<template>
|
<div id="mdcLogLayout" style="width: 100%; height: 100%; overflow: hidden">
|
<!-- 查询区域 -->
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="4" :sm="4">
|
<a-form-item label="设备编号">
|
<a-input placeholder="请选择设备" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="6">
|
<a-form-item label="设备名称">
|
<a-input placeholder="请选择设备" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :md="4" :sm="4">
|
<a-form-item label="日期">
|
<a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" @change="dataChange"
|
format='YYYY-MM-DD'/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="2" :sm="2" :xs="2">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<div style="width: 100%;height: 180px;border: none;" align="center">
|
<table cellpadding="0" cellspacing="0" width="100%">
|
<tr>
|
<td>
|
<table width="100%">
|
<tr style="word-break: keep-all;">
|
<td align="right"><a id="btnMdcLogWline" href="#">
|
<div style="padding-top: 15px;" @click="openWorkChart">
|
<img src="../../../../../assets/image/linechart.png" alt="">
|
<p>工作曲线</p>
|
</div>
|
</a></td>
|
<td width="100%" height="100%">
|
<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
|
<tr>
|
<td style="word-break: keep-all;" align="left">
|
<div
|
style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative;overflow: hidden">
|
<div class="mdcLogShowOne"
|
:style='{display: "inline-block",width:item.dateProportion, height: "100%"}'
|
v-for="item in 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 v-if="item.status == 22" style="z-index: 999;"
|
:style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
|
v-for="item in waring">
|
<span
|
:style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
|
</div>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</td>
|
<td align="left"><a id="btnMdcLogBar" href="#">
|
<div style="padding-top: 15px;" @click="openHistoryChart">
|
<img src="../../../../../assets/image/Histogram.png" alt="">
|
<p>历史记录</p>
|
</div>
|
</a></td>
|
</tr>
|
<tr>
|
<td align="right">0</td>
|
<td width="100%">
|
<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>
|
<td></td>
|
</tr>
|
</table>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<table width="400px;" align="center" style="margin-top: 20px;">
|
<tr>
|
<td align="right"><a id="btnMdcLogPreviousDay" style="margin-right:15px">
|
<img @click="dataBefore" src="../../../../../assets/image/left.png" alt="">
|
</a></td>
|
<td align="right">关机</td>
|
<td align="left">
|
<div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/>
|
</td>
|
<td align="right">待机</td>
|
<td align="left">
|
<div style="width: 15px;height: 15px;background-color: #ffea91"/>
|
</td>
|
<td align="right">运行</td>
|
<td align="left">
|
<div style="width: 15px;height: 15px;background-color: #00ee00"/>
|
</td>
|
<td align="right">报警</td>
|
<td align="left">
|
<div style="width: 15px;height: 15px;background-color: red"/>
|
</td>
|
<td><a id="btnMdcLogAfterDay" style="margin-left:20px">
|
<img @click="dataAfter" src="../../../../../assets/image/right.png" alt="">
|
</a></td>
|
</tr>
|
</table>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div id="mdcLogTabs" class="mdcLogTabs-title" style="width: 100%;">
|
<div>
|
<a-tabs :activeKey="activeKey" @change="tabChange">
|
<a-tab-pane key="1" tab="设备日志" force-render>
|
<log-list :dataList='normalList' ref="logList" :loadingequip='loadingStatus'></log-list>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="运行日志">
|
<work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingRunStatus"></work-log-list>
|
</a-tab-pane>
|
<a-tab-pane key="3" tab="报警日志">
|
<alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingWarnStatus"></alarm-log-list>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</div>
|
<work-chart-model ref="workChartModel" :collectTime="this.queryParams.collectTime"
|
:equipment="this.equipment"></work-chart-model>
|
<work-history-model ref="workHistoryModel"></work-history-model>
|
</div>
|
</template>
|
|
|
<script>
|
import moment from 'moment'
|
import LogList from './LogList'
|
import WorkLogList from './WorkLogList'
|
import AlarmLogList from './AlarmLogList'
|
import WorkChartModel from './WorkChartModel'
|
import WorkHistoryModel from './WorkHistoryModel'
|
import { getAction } from '@/api/manage'
|
|
export default {
|
components: {
|
LogList,
|
WorkLogList,
|
AlarmLogList,
|
WorkChartModel,
|
WorkHistoryModel
|
},
|
props: { equipment: {} },
|
data() {
|
return {
|
readOnly: true,
|
defaultId: '',
|
defaultName: '',
|
middleTime: '',
|
queryParam: {},
|
queryParams: {
|
collectTime: undefined
|
},
|
loadingStatus: false,
|
loadingRunStatus: false,
|
loadingWarnStatus: false,
|
normal: [],
|
waring: [],
|
normalList: [],
|
waringList: [],
|
runList: [],
|
activeKey: '1',
|
equipment: {},
|
url: {
|
getBaseTree: '/mdc/mdcequipment/loadTree',
|
getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
|
list: '/mdc/mdcEquipmentRunningSection/logList'
|
},
|
ProStartId: ''
|
}
|
},
|
methods: {
|
tabChange(val) {
|
this.activeKey = val
|
},
|
disabledDate(current) {
|
return current && current > moment().subtract('days', 0)
|
},
|
queryChart() {
|
// this.normal = []
|
// this.waring = []
|
this.loadingStatus = true
|
this.loadingRunStatus = true
|
this.loadingWarnStatus = true
|
getAction(this.url.list, this.queryParams).then((res) => {
|
this.normalList = []
|
this.waringList = []
|
this.runList = []
|
this.loadingStatus = false
|
this.loadingRunStatus = false
|
this.loadingWarnStatus = false
|
this.normal = []
|
this.waring = []
|
if (res.success) {
|
if (res.result != null) {
|
for (let i = 0; i < res.result.length; i++) {
|
this.normalList.push(res.result[i])
|
if ('22' == res.result[i].status) {
|
this.waringList.push(res.result[i])
|
res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
|
let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
|
res.result[i].left = leftTmp / 86400 * 100 + '%'
|
this.waring.push(res.result[i])
|
|
} else if ('3' == res.result[i].status) {
|
this.runList.push(res.result[i])
|
res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
|
this.normal.push(res.result[i])
|
} else {
|
res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
|
this.normal.push(res.result[i])
|
}
|
}
|
}
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
dataChange(val) {
|
this.queryParams.collectTime = val
|
this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
|
},
|
searchQuery() {
|
// console.log(this.queryParams.collectTime)
|
this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
|
if (!this.queryParams.equipmentId || !this.queryParams.equipmentName) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择设备'
|
})
|
return false
|
}
|
this.queryChart()
|
},
|
searchReset() {
|
this.queryParams = {
|
collectTime : moment()
|
}
|
this.equipment = {}
|
this.queryChart()
|
},
|
openWorkChart() {
|
if (!this.equipment.equipmentId) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择设备进行查询'
|
})
|
} else {
|
// 判断是否点击设备日志表格行的数据，此时为点击表格数据为false
|
this.$refs.workChartModel.isClicklogListRow = false
|
this.$refs.workChartModel.add(this.equipment)
|
this.$refs.workChartModel.title = '工作曲线'
|
}
|
},
|
openHistoryChart() {
|
if (!this.equipment.equipmentId) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择设备进行查询'
|
})
|
} else {
|
this.$refs.workHistoryModel.add(this.equipment)
|
this.$refs.workHistoryModel.title = '历史日志'
|
}
|
|
},
|
dataBefore() {
|
this.queryParams.collectTime = moment(this.queryParams.collectTime.add(-1, 'd'), 'YYYY-MM-DD')
|
this.searchQuery()
|
},
|
dataAfter() {
|
if ((this.queryParams.collectTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择今天以及今天之前的日期！！'
|
})
|
} else {
|
this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD')
|
this.searchQuery()
|
}
|
|
},
|
initEquipment(id) {
|
let _this = this
|
getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
|
if (res.success) {
|
if (res.result != null) {
|
_this.$set(this.queryParams, 'equipmentName', res.result.equipmentName)
|
_this.$set(this.queryParams, 'equipmentId', res.result.equipmentId)
|
_this.equipment = res.result
|
_this.searchQuery()
|
} else {
|
this.queryParams = {}
|
this.equipment = {}
|
_this.$notification.warning({
|
message: '消息',
|
description: '请联系管理员，开放设备权限！'
|
})
|
}
|
} else {
|
_this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
|
}
|
})
|
}
|
},
|
created() {
|
this.queryParams.collectTime = moment()
|
this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
|
this.initEquipment()
|
},
|
watch: {
|
equipment(val) {
|
if (val && val.equipmentId) {
|
this.$set(this.queryParams, 'equipmentName', val.equipmentName)
|
this.$set(this.queryParams, 'equipmentId', val.equipmentId)
|
this.equipment = val
|
this.searchQuery()
|
} else {
|
this.initEquipment(val.key)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped="scoped">
|
.mdcLogTabs-title {
|
display: flex;
|
width: 100%;
|
}
|
|
.mdcLogTabs-title > div {
|
margin: 2px 5px;
|
width: 100%;
|
color: #000;
|
font-weight: 600;
|
padding: 3px;
|
border-radius: 5px;
|
}
|
|
.btnMdcLogSearch {
|
position: relative;
|
margin-left: 10px;
|
}
|
|
.btnMdcLogSearch .btnMdcLogSearchZi {
|
position: absolute;
|
left: 3px;
|
}
|
|
.btnMdcLogSearch input {
|
padding-left: 23px;
|
border-radius: 5px;
|
outline: none;
|
color: #000;
|
border: 1px solid #000;
|
}
|
|
#mdcLogShow {
|
display: flex;
|
}
|
|
#mdcLogShow > div {
|
flex: 1;
|
}
|
|
/*.mdcLogShowOne{*/
|
/*position: absolute;*/
|
/*}*/
|
</style>
|
