<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="6" :sm="6">
|
<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="6" :sm="6">
|
<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="3" :sm="3">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
</a-col>
|
<a-col :md="2" :sm="2" :xs="2">
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</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='loadingstayus'></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"></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'
|
// import {mapActions} from 'vuex'
|
export default {
|
components: {
|
LogList,
|
WorkLogList,
|
AlarmLogList,
|
WorkChartModel,
|
WorkHistoryModel
|
},
|
props: { equement: {} },
|
data() {
|
return {
|
readOnly:true,
|
defaultId: '',
|
defaultName: '',
|
middleTime: '',
|
queryParam:{},
|
queryParams: {
|
collectTime:undefined,
|
},
|
loadingstayus:false,
|
loadingrunStatus:false,
|
loadingwarnStatus:false,
|
normal: [],
|
waring: [],
|
normalList: [],
|
waringList: [],
|
runList: [],
|
activeKey: '1',
|
equipment: {},
|
url: {
|
// logChart: '/mdc/equipmentrunningsection/logList',
|
getBaseTree: '/mdc/mdcequipment/loadTree',
|
getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
|
list: '/mdc/mdcEquipmentRunningSection/logList'
|
},
|
ProStartId:''
|
}
|
},
|
methods: {
|
// ...mapActions(['QueryProduction']),
|
// queryTreeData() {
|
//
|
// this.QueryProduction().then(res => {
|
// if (res.success) {
|
// // console.log(res.result[0].key)
|
// this.ProStartId = res.result[0].key
|
// this.initEquipment(this.ProStartId)
|
// } else {
|
// this.$message.warn(res.message)
|
// }
|
// }).finally(() =>{
|
//
|
// })
|
//
|
// },
|
tabChange(val) {
|
this.activeKey = val
|
},
|
disabledDate(current){
|
//Can not slect days before today and today
|
return current && current > moment().subtract('days', 0);
|
},
|
queryChart() {
|
// this.normal = []
|
// this.waring = []
|
this.loadingstayus = true;
|
this.loadingrunStatus = true;
|
this.loadingwarnStatus = true
|
getAction(this.url.list, this.queryParams).then((res) => {
|
this.normalList = []
|
this.waringList = []
|
this.runList = []
|
this.loadingstayus = 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])
|
// console.log(this.normal)
|
}
|
}
|
}
|
|
// if (res.result.normal) {
|
// for (let i = 0; i < res.result.normal.length; i++) {
|
// res.result.normal[i].dateProportion = res.result.normal[i].duration / 86400 * 100 + '%'
|
// }
|
// this.normal = res.result.normal
|
// }
|
// if (res.result.waring) {
|
// for (let i = 0; i < res.result.waring.length; i++) {
|
// res.result.waring[i].dateProportion = res.result.waring[i].duration / 86400 * 100 + '%'
|
// let leftTmp = (moment(res.result.waring[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
|
// res.result.waring[i].left = leftTmp / 86400 * 100 + '%'
|
// }
|
// this.waring = res.result.waring
|
// }
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
// queryList() {
|
// this.loadingstayus = true;
|
// this.loadingrunStatus = true;
|
// this.loadingwarnStatus = true
|
// // this.normalList = []
|
// // this.waringList = []
|
// // this.runList = []
|
// // console.log(this.queryParams)
|
// getAction(this.url.list, this.queryParams).then((res) => {
|
// this.normalList = []
|
// this.waringList = []
|
// this.runList = []
|
// this.loadingstayus = false;
|
// this.loadingrunStatus = false;
|
// this.loadingwarnStatus = false
|
// if (res.success) {
|
// this.loading = true;
|
// for (let i = 0; i < res.result.length; i++) {
|
// this.normalList.push(res.result[i])
|
// if ('3' == res.result[i].status) {
|
// this.runList.push(res.result[i])
|
// }
|
// if ('22' == res.result[i].status) {
|
// this.waringList.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)
|
if(this.queryParams.collectTime != undefined){
|
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()
|
}else{
|
// this.$message.warning("请选择时间")
|
console.log('触发提示')
|
this.$notification.warning({
|
message:'消息',
|
description:"请选择时间"
|
});
|
}
|
// this.queryList()
|
},
|
searchReset() {
|
this.queryParams = {}
|
// this.queryList()
|
this.equipment = {}
|
this.queryChart()
|
// this.dates = []
|
// this.queryStatistical()
|
// this.onClearSelected()
|
},
|
openWorkChart() {
|
if(!this.equipment.equipmentId){
|
// this.$message.warning("请选择设备进行查询")
|
this.$notification.warning({
|
message:'消息',
|
description:"请选择设备进行查询"
|
});
|
}else{
|
this.$refs.workChartModel.add(this.equipment)
|
this.$refs.workChartModel.title = '工作曲线'
|
}
|
|
},
|
openHistoryChart() {
|
// console.log(this.equipment);
|
if(!this.equipment.equipmentId){
|
// this.$message.warning("请选择设备进行查询")
|
this.$notification.warning({
|
message:'消息',
|
description:"请选择设备进行查询"
|
});
|
// console.log(1111)
|
} 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.$message.warning("请选择今天以及今天之前的日期！！")
|
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.queryList()
|
this.equipment = {}
|
// _this.$message.warning('请联系管理员，开放设备权限！')
|
_this.$notification.warning({
|
message:'消息',
|
description:'请联系管理员，开放设备权限！'
|
});
|
}
|
}else{
|
// this.$message.warning(res.message)
|
_this.$notification.warning({
|
message:'消息',
|
description:res.message
|
});
|
|
}
|
})
|
}
|
},
|
created() {
|
this.queryParams.collectTime = moment()
|
this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
|
this.initEquipment();
|
// this.queryTreeData();
|
},
|
watch: {
|
equement(val) {
|
console.log('通过watch触发')
|
|
if (val && val.equipmentId) {
|
this.$set(this.queryParams, 'equipmentName', val.equipmentName)
|
this.$set(this.queryParams, 'equipmentId', val.equipmentId)
|
this.equipment = val
|
this.searchQuery()
|
} else {
|
// console.log(111)
|
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>
|
