hy/vue_mdc_hyjs.git

			@@ -1,166 +1,167 @@
			<template>
			<div ref="workHistory">
			<a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal" :visible="visible"
			@cancel="handleCancel" cancelText="关闭" :footer="null">
			<div>
			<div class="his_params">
			<a-form layout="inline">
			<a-form-item label="设备编号">
			<a-input placeholder="输入设备编号查询" :readOnly="true" v-model="queryParams.equipmentId"></a-input>
			</a-form-item>
			<a-form-item label="设备名称">
			<a-input placeholder="输入设备名称查询" :readOnly="true" v-model="queryParams.equipmentName"></a-input>
			</a-form-item>
			<a-form-item label="日期">
			<a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange" format='YYYY-MM-DD'/>
			</a-form-item>
			<a-button type="primary" @click="queryCharts" icon="search">查询</a-button>
			</a-form>
			</div>
			<div style="width: 100%;border: none;" align="center">
			<table cellpadding="0" cellspacing="0" width="100%">
			<tr>
			<td>
			<table width="100%">
			<tr style="word-break: keep-all;">
			<td width="100%" height="100%">
			<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0" style="border-collapse:separate; border-spacing:10px;">
			<tr v-for="info in listInfo" >
			<td align="left">{{info.date}}</td>
			<td style="word-break: keep-all;" align="left">
			<div
			style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative">
			<div class="mdcLogShowOne"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%"}'
			v-for="item in info.value.normal">
			<a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal"
			:visible="visible"
			@cancel="handleCancel" cancelText="关闭" :footer="null">
			<div>
			<div class="his_params">
			<a-form layout="inline">
			<a-form-item label="设备编号">
			<a-input placeholder="输入设备编号查询" :readOnly="true" v-model="queryParams.equipmentId"></a-input>
			</a-form-item>
			<a-form-item label="设备名称">
			<a-input placeholder="输入设备名称查询" :readOnly="true" v-model="queryParams.equipmentName"></a-input>
			</a-form-item>
			<a-form-item label="日期">
			<a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange"
			format='YYYY-MM-DD'/>
			</a-form-item>
			<a-button type="primary" @click="queryCharts" icon="search">查询</a-button>
			</a-form>
			</div>
			<div style="width: 100%;border: none;" align="center">
			<table cellpadding="0" cellspacing="0" width="100%">
			<tr>
			<td>
			<table width="100%">
			<tr style="word-break: keep-all;">
			<td width="100%" height="100%">
			<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"
			style="border-collapse:separate; border-spacing:10px;">
			<tr v-for="info in listInfo">
			<td align="left">{{info.date}}</td>
			<td style="word-break: keep-all;" align="left">
			<div
			style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative">
			<div class="mdcLogShowOne"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%"}'
			v-for="item in info.value.normal">
			<span v-if="item.status == 0"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 1"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 2"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 3"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 23"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
			</div>
			<div style="z-index: 999;"
			:style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
			v-for="item in info.value.waring">
			<span v-if="item.status == 1"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 2"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 3"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
			<span v-if="item.status == 23"
			:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
			</div>
			<div style="z-index: 999;"
			:style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
			v-for="item in info.value.waring">
			<span
			:style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
			</div>
			<div style="z-index: 1000;"
			:style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
			v-for="item in info.value.fault">
			<span
			:style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span>
			</div>
			</div>
			</div>
			</td>
			</tr>
			<tr>
			<td align="right">0</td>
			<td width="95%">
			<table width="100%;" cellpadding="0" cellspacing="0">
			<tr align="right" style="word-break: keep-all;">
			<td>02:00</td>
			<td>04:00</td>
			<td>06:00</td>
			<td>08:00</td>
			<td>10:00</td>
			<td>12:00</td>
			<td>14:00</td>
			<td>16:00</td>
			<td>18:00</td>
			<td>20:00</td>
			<td>22:00</td>
			<td>24:00</td>
			</tr>
			</table>
			</td>
			</tr>
			</table>
			</td>
			</tr>
			</table>
			</td>
			</tr>
			</td>
			</tr>
			<tr>
			<td align="right">0</td>
			<td width="95%">
			<table width="100%;" cellpadding="0" cellspacing="0">
			<tr align="right" style="word-break: keep-all;">
			<td>02:00</td>
			<td>04:00</td>
			<td>06:00</td>
			<td>08:00</td>
			<td>10:00</td>
			<td>12:00</td>
			<td>14:00</td>
			<td>16:00</td>
			<td>18:00</td>
			<td>20:00</td>
			<td>22:00</td>
			<td>24:00</td>
			</tr>
			</table>
			</td>
			</tr>
			</table>
			</td>
			</tr>
			</table>
			</td>
			</tr>

			</table>
			</table>
			</div>
			</div>
			</div>

			</a-modal>
			</a-modal>
			</div>
			</template>

			<script>
			import moment from 'moment'
			import * as echarts from 'echarts'
			import {
			getAction,
			postAction
			} from '@/api/manage'
			import {
			duplicateCheck
			} from '@/api/api'
			import { getAction } from '@/api/manage'

			export default {
			name: 'WorkHistoryModel',
			components: {},
			props: { waring:[],},
			data() {
			return {
			title: '',
			listInfo: [],
			dates: [],
			node: {},

			stratOpen: false,
			endOpen: false,
			visible: false,
			show: false,
			queryParams: {},
			url: {
			logCharts: '/mdc/mdcEquipmentRunningSection/logCharts'
			}
			}
			},
			mounted() {
			},
			methods: {
			disabledDate(current){
			return current && current > moment().subtract('days', 1);
			disabledDate(current) {
			return current && current > moment().subtract('days', 1)
			},
			queryCharts() {
			let _this = this
			getAction(this.url.logCharts, this.queryParams).then((res) => {
			if (res.success) {
			for (let i = 0; i < res.result.length; i++) {
			let tmp = res.result[i].value
			// console.log(tmp)
			if (tmp) {
			if (tmp.normal) {
			for (let k = 0; k < tmp.normal.length; k++) {
			tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%'
			// let leftTmp = (moment(tmp.normal[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
			// tmp.normal[i].left = leftTmp / 86400 * 100 + '%'
			this.listInfo = []
			getAction(this.url.logCharts, this.queryParams)
			.then((res) => {
			if (res.success) {
			for (let i = 0; i < res.result.length; i++) {
			let tmp = res.result[i].value
			if (tmp) {
			if (tmp.normal) {
			for (let k = 0; k < tmp.normal.length; k++) {
			tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%'
			}
			} else {
			tmp.normal = []
			}
			} else {
			tmp.normal = []
			}
			if (tmp.waring) {
			// console.log("测试判断")
			for (let j = 0; j < tmp.waring.length; j++) {
			tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%'
			let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
			tmp.waring[j].left = leftTmp / 86400 * 100 + '%'
			if (tmp.waring) {
			for (let j = 0; j < tmp.waring.length; j++) {
			tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%'
			let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
			tmp.waring[j].left = leftTmp / 86400 * 100 + '%'
			}
			} else {
			tmp.waring = []
			}
			} else {
			tmp.waring = []
			if (tmp.fault) {
			for (let j = 0; j < tmp.fault.length; j++) {
			tmp.fault[j].dateProportion = tmp.fault[j].duration / 86400 * 100 + '%'
			let leftTmp = (moment(tmp.fault[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
			tmp.fault[j].left = leftTmp / 86400 * 100 + '%'
			}
			} else {
			tmp.fault = []
			}
			}
			} else {
			res.result[i].value = { normal: [], waring: [] }
			else {
			res.result[i].value = { normal: [], waring: [], fault: [] }
			}
			}
			_this.listInfo = res.result
			}
			_this.listInfo = res.result
			}
			})
			})
			},
			dateParamChange(v1, v2) {
			this.queryParams.startTime = v2[0]
			@@ -169,7 +170,6 @@
			add(node) {
			let _this = this
			this.visible = true
			this.node = node
			this.queryParams = {
			equipmentId: node.equipmentId,
			equipmentName: node.equipmentName
			@@ -183,79 +183,8 @@
			},
			handleCancel() {
			this.visible = false
			},
			close() {
			this.visible = false
			this.show = false
			}
			}
			}
			</script>

			<style scoped lang="less">
			.full-modal {
			.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
			}
			.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
			}
			.ant-modal-body {
			flex: 1;
			}
			}
			/deep/ .ant-modal{
			/background-color: #000;/
			/color: #fff;/
			}
			/deep/ .ant-modal-header{
			/background-color: #000;/
			}
			/deep/ .ant-modal-title{
			/color: #fff;/
			}
			/deep/ .ant-modal-close{
			color: #1191b0;
			font-size: 24px;
			}
			/deep/ .ant-modal-content{
			/background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);/
			/background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));/
			/background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);/
			/background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);/
			/background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);/
			/background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);/
			/background-color: #000;/
			/color: #fff;/
			position: relative;
			}
			/deep/ .ant-modal-header{
			/border-bottom: none!important;/
			}
			/deep/ .ant-form-item-label label{
			/color: #fff;/
			}
			/.ant-btn {/
			/padding: 0 10px;/
			/margin-left: 3px;/
			/}/

			/.ant-form-item-control {/
			/line-height: 0px;/
			/}/

			/!* 主表单行间距 !/
			/.ant-form .ant-form-item {/
			/margin-bottom: 10px;/
			/}/

			/!* Tab页面行间距 !/
			/.ant-tabs-content .ant-form-item {/
			/margin-bottom: 0px;/
			/}/
			</style>