<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 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 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.collectTimeStr" :disabledDate="disabledDate"
|
value-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>
|
<div class="equipment-status-container">
|
<a href="#" @click="openWorkChart">
|
<img src="@/assets/image/linechart.png" alt="">
|
<div>工作曲线</div>
|
</a>
|
|
<div>
|
<div :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='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
|
v-for="item in warning">
|
<span
|
:style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
|
</div>
|
<div v-if="item.status == 25"
|
:style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
|
v-for="item in fault">
|
<span
|
:style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span>
|
</div>
|
</div>
|
|
<a href="#" @click="openHistoryChart">
|
<img src="@/assets/image/Histogram.png" alt="">
|
<div>历史记录</div>
|
</a>
|
</div>
|
|
<div class="time-container">
|
<div>0</div>
|
<div>
|
<div v-for="item in 12">{{('0'+item*2).slice(-2)}}:00</div>
|
</div>
|
<div></div>
|
</div>
|
|
<a-space class="date-change-container">
|
<img @click="dataBefore" src="@/assets/image/left.png" alt="">
|
<span>关机</span>
|
<div style="background-color: #A8A8A8"/>
|
<span>待机</span>
|
<div style="background-color: #ffea91"/>
|
<span>运行</span>
|
<div style="background-color: #00ee00"/>
|
<span>报警</span>
|
<div style="background-color: #f00"/>
|
<span>故障</span>
|
<div style="background-color: #C11900"/>
|
<img @click="dataAfter" src="@/assets/image/right.png" alt="">
|
</a-space>
|
</div>
|
|
<div id="mdcLogTabs" class="mdcLogTabs-title">
|
<div>
|
<a-tabs>
|
<a-tab-pane key="1" tab="设备日志" force-render>
|
<log-list :dataList='normalList' :loading='loading'/>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="运行日志">
|
<work-log-list :dataList='runList' :loading="loading"/>
|
</a-tab-pane>
|
<a-tab-pane key="3" tab="报警日志">
|
<alarm-log-list :dataList='warningList' :loading="loading"/>
|
</a-tab-pane>
|
<a-tab-pane key="4" tab="故障日志">
|
<fault-log-list :dataList='faultList' :loading="loading"/>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</div>
|
|
<work-chart-model ref="workChartModel" :collectTime="this.queryParams.collectTime"
|
:equipment="equipment"/>
|
|
<work-history-model ref="workHistoryModel"/>
|
</div>
|
</template>
|
|
|
<script>
|
import moment from 'moment'
|
import LogList from './LogList'
|
import WorkLogList from './WorkLogList'
|
import AlarmLogList from './AlarmLogList'
|
import FaultLogList from './FaultLogList'
|
import WorkChartModel from './WorkChartModel'
|
import WorkHistoryModel from './WorkHistoryModel'
|
import { getAction } from '@/api/manage'
|
|
export default {
|
components: {
|
FaultLogList,
|
LogList,
|
WorkLogList,
|
AlarmLogList,
|
WorkChartModel,
|
WorkHistoryModel
|
},
|
props: { equipment: {} },
|
data() {
|
return {
|
queryParam: {},
|
queryParams: {
|
collectTimeStr: moment().format('YYYY-MM-DD')
|
},
|
loading: false,
|
normal: [],
|
warning: [],
|
fault: [],
|
normalList: [],
|
warningList: [],
|
faultList: [],
|
runList: [],
|
url: {
|
getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
|
list: '/mdc/mdcEquipmentRunningSection/logList'
|
}
|
}
|
},
|
methods: {
|
disabledDate(current) {
|
return current && current > moment().subtract('days', 0)
|
},
|
queryChart() {
|
this.loading = true
|
this.normalList = []
|
this.warningList = []
|
this.runList = []
|
this.faultList = []
|
this.normal = []
|
this.warning = []
|
this.fault = []
|
getAction(this.url.list, this.queryParams)
|
.then((res) => {
|
if (res.success) {
|
if (res.result != null) {
|
for (let i = 0; i < res.result.length; i++) {
|
this.normalList.push(res.result[i])
|
res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
|
if ('22' == res.result[i].status) {
|
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.warning.push(res.result[i])
|
this.warningList.push(res.result[i])
|
} else if ('25' == res.result[i].status) {
|
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.faultList.push(res.result[i])
|
this.fault.push(res.result[i])
|
} else if ('3' == res.result[i].status) {
|
this.runList.push(res.result[i])
|
this.normal.push(res.result[i])
|
} else {
|
this.normal.push(res.result[i])
|
}
|
}
|
}
|
}
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
},
|
searchQuery() {
|
if (!this.queryParams.equipmentId || !this.queryParams.equipmentName) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择设备进行查询'
|
})
|
return
|
}
|
this.queryChart()
|
},
|
searchReset() {
|
this.queryParams = {
|
collectTimeStr: moment().format('YYYY-MM-DD')
|
}
|
this.equipment = {}
|
this.queryChart()
|
},
|
openWorkChart() {
|
if (!this.equipment.equipmentId) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择设备进行查询'
|
})
|
return
|
}
|
|
// 判断是否点击设备日志表格行的数据，此时为点击表格数据为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: '请选择设备进行查询'
|
})
|
return
|
}
|
|
this.$refs.workHistoryModel.add(this.equipment)
|
this.$refs.workHistoryModel.title = '历史日志'
|
},
|
dataBefore() {
|
this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(-1, 'd').format('YYYY-MM-DD')
|
this.searchQuery()
|
},
|
dataAfter() {
|
if (moment(this.queryParams.collectTimeStr).isSame(moment(), 'd')) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择今天以及今天之前的日期！！'
|
})
|
return
|
}
|
this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(1, 'd').format('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.$emit('initEquipment', res.result)
|
} else {
|
_this.queryParams = {}
|
_this.$emit('initEquipment', {})
|
_this.$notification.warning({
|
message: '消息',
|
description: '请联系管理员，开放设备权限！'
|
})
|
}
|
} else {
|
_this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
|
}
|
})
|
}
|
},
|
created() {
|
this.initEquipment()
|
},
|
watch: {
|
equipment(val) {
|
if (val && val.equipmentId) {
|
this.$set(this.queryParams, 'equipmentName', val.equipmentName)
|
this.$set(this.queryParams, 'equipmentId', val.equipmentId)
|
this.searchQuery()
|
} else {
|
this.initEquipment(val.key)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
@image-container-width: 58px;
|
|
.equipment-status-container {
|
display: flex;
|
|
> a {
|
display: inline-block;
|
text-align: center;
|
width: @image-container-width
|
}
|
|
> div {
|
height: 62px;
|
border: 1px solid #9d9d9d;
|
position: relative;
|
overflow: hidden;
|
flex: 1
|
}
|
}
|
|
.time-container {
|
display: flex;
|
align-items: center;
|
|
> div:not(:nth-child(2)) {
|
width: @image-container-width;
|
text-align: right;
|
}
|
|
> div:nth-child(2) {
|
width: calc(100% - @image-container-width * 2);
|
display: flex;
|
|
div {
|
width: calc(100% / 12);
|
text-align: right;
|
}
|
}
|
}
|
|
.date-change-container {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 20px;
|
|
/deep/ .ant-space-item {
|
display: flex;
|
align-items: center;
|
|
> div {
|
width: 15px;
|
height: 15px;
|
}
|
}
|
|
img {
|
cursor: pointer;
|
}
|
}
|
</style>
|
