<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 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>
|
</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 { getAction } from '@/api/manage'
|
|
export default {
|
name: 'WorkHistoryModel',
|
data() {
|
return {
|
title: '',
|
listInfo: [],
|
dates: [],
|
visible: false,
|
queryParams: {},
|
url: {
|
logCharts: '/mdc/mdcEquipmentRunningSection/logCharts'
|
}
|
}
|
},
|
methods: {
|
disabledDate(current) {
|
return current && current > moment().subtract('days', 1)
|
},
|
queryCharts() {
|
let _this = this
|
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 = []
|
}
|
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 = []
|
}
|
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: [], fault: [] }
|
}
|
}
|
_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.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
|
}
|
}
|
}
|
</script>
|
