<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">
|
<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
|
:style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
|
</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>
|
|
</table>
|
</div>
|
</div>
|
|
</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'
|
|
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);
|
},
|
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 + '%'
|
}
|
} 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 + '%'
|
}
|
} else {
|
tmp.waring = []
|
}
|
} else {
|
res.result[i].value = { normal: [], waring: [] }
|
}
|
}
|
_this.listInfo = res.result
|
}
|
})
|
},
|
dateParamChange(v1, v2) {
|
this.queryParams.startTime = v2[0]
|
this.queryParams.endTime = v2[1]
|
},
|
add(node) {
|
let _this = this
|
this.visible = true
|
this.node = node
|
this.queryParams = {
|
equipmentId: node.equipmentId,
|
equipmentName: node.equipmentName
|
}
|
this.dates = [moment().subtract('days', 5), moment().subtract('days', 2)]
|
this.queryParams.startTime = moment(this.dates[0]).format('YYYY-MM-DD')
|
this.queryParams.endTime = moment(this.dates[1]).format('YYYY-MM-DD')
|
this.$nextTick(() => {
|
_this.queryCharts()
|
})
|
},
|
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>
|
