From 8c610945469c4a4a0b0ff2b868e87f25fe01792d Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 18 六月 2025 14:01:46 +0800
Subject: [PATCH] 1、设备日志页面列表及状态横向分布图新增故障状态颜色区分以及增加故障日志列表页签 2、设备日志页面历史记录弹窗中状态横向分布图新增故障状态颜色区分
---
src/views/mdc/base/modules/DeviceLog/LogInfo.vue | 290 ++++++++++++++++++++++++---------------------------------
1 files changed, 122 insertions(+), 168 deletions(-)
diff --git a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
index da70e00..9b03a2c 100644
--- a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
+++ b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
@@ -6,18 +6,18 @@
<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-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="readOnly" v-model="queryParams.equipmentName"></a-input>
+ <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.collectTime" :disabledDate="disabledDate" @change="dataChange"
- format='YYYY-MM-DD'/>
+ <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">
@@ -29,7 +29,8 @@
</a-row>
</a-form>
</div>
- <div style="width: 100%;height: 180px;border: none;" align="center">
+
+ <div>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
@@ -63,9 +64,15 @@
</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">
+ 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="z-index: 1000;"
+ :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>
</td>
@@ -104,56 +111,47 @@
</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>
+
+ <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" style="width: 100%;">
+
+ <div id="mdcLogTabs" class="mdcLogTabs-title">
<div>
- <a-tabs :activeKey="activeKey" @change="tabChange">
+ <a-tabs>
<a-tab-pane key="1" tab="璁惧鏃ュ織" force-render>
- <log-list :dataList='normalList' ref="logList" :loadingequip='loadingStatus'></log-list>
+ <log-list :dataList='normalList' :loading='loading'/>
</a-tab-pane>
<a-tab-pane key="2" tab="杩愯鏃ュ織">
- <work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingRunStatus"></work-log-list>
+ <work-log-list :dataList='runList' :loading="loading"/>
</a-tab-pane>
<a-tab-pane key="3" tab="鎶ヨ鏃ュ織">
- <alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingWarnStatus"></alarm-log-list>
+ <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="this.equipment"></work-chart-model>
- <work-history-model ref="workHistoryModel"></work-history-model>
+ :equipment="equipment"/>
+
+ <work-history-model ref="workHistoryModel"/>
</div>
</template>
@@ -163,12 +161,14 @@
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: {
+ components: {
+ FaultLogList,
LogList,
WorkLogList,
AlarmLogList,
@@ -178,101 +178,82 @@
props: { equipment: {} },
data() {
return {
- readOnly: true,
- defaultId: '',
- defaultName: '',
- middleTime: '',
queryParam: {},
queryParams: {
- collectTime: undefined
+ collectTimeStr: moment().format('YYYY-MM-DD')
},
- loadingStatus: false,
- loadingRunStatus: false,
- loadingWarnStatus: false,
+ loading: false,
normal: [],
- waring: [],
+ warning: [],
+ fault: [],
normalList: [],
- waringList: [],
+ warningList: [],
+ faultList: [],
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])
+ 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 + '%'
- 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])
+ 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
- this.cardLoading = false
- })
- },
- dataChange(val) {
- this.queryParams.collectTime = val
- this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
+ })
+ .finally(() => {
+ this.loading = false
+ })
},
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: '璇烽�夋嫨璁惧'
+ description: '璇烽�夋嫨璁惧杩涜鏌ヨ'
})
- return false
+ return
}
this.queryChart()
},
searchReset() {
this.queryParams = {
- collectTime : moment()
- }
+ collectTimeStr: moment().format('YYYY-MM-DD')
+ }
this.equipment = {}
this.queryChart()
},
@@ -282,12 +263,13 @@
message: '娑堟伅',
description: '璇烽�夋嫨璁惧杩涜鏌ヨ'
})
- } else {
- // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛屾鏃朵负鐐瑰嚮琛ㄦ牸鏁版嵁涓篺alse
- this.$refs.workChartModel.isClicklogListRow = false
- this.$refs.workChartModel.add(this.equipment)
- this.$refs.workChartModel.title = '宸ヤ綔鏇茬嚎'
+ return
}
+
+ // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛屾鏃朵负鐐瑰嚮琛ㄦ牸鏁版嵁涓篺alse
+ this.$refs.workChartModel.isClicklogListRow = false
+ this.$refs.workChartModel.add(this.equipment)
+ this.$refs.workChartModel.title = '宸ヤ綔鏇茬嚎'
},
openHistoryChart() {
if (!this.equipment.equipmentId) {
@@ -295,27 +277,26 @@
message: '娑堟伅',
description: '璇烽�夋嫨璁惧杩涜鏌ヨ'
})
- } else {
- this.$refs.workHistoryModel.add(this.equipment)
- this.$refs.workHistoryModel.title = '鍘嗗彶鏃ュ織'
+ return
}
+ 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.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(-1, 'd').format('YYYY-MM-DD')
this.searchQuery()
},
dataAfter() {
- if ((this.queryParams.collectTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
+ if (moment(this.queryParams.collectTimeStr).isSame(moment(), 'd')) {
this.$notification.warning({
message: '娑堟伅',
description: '璇烽�夋嫨浠婂ぉ浠ュ強浠婂ぉ涔嬪墠鐨勬棩鏈燂紒锛�'
})
- } else {
- this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD')
- this.searchQuery()
+ return
}
-
+ this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(1, 'd').format('YYYY-MM-DD')
+ this.searchQuery()
},
initEquipment(id) {
let _this = this
@@ -324,11 +305,10 @@
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()
+ _this.$emit('initEquipment', res.result)
} else {
- this.queryParams = {}
- this.equipment = {}
+ _this.queryParams = {}
+ _this.$emit('initEquipment', {})
_this.$notification.warning({
message: '娑堟伅',
description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
@@ -345,8 +325,6 @@
}
},
created() {
- this.queryParams.collectTime = moment()
- this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
this.initEquipment()
},
watch: {
@@ -354,7 +332,6 @@
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)
@@ -364,48 +341,25 @@
}
</script>
-<style scoped="scoped">
- .mdcLogTabs-title {
+<style scoped="scoped" lang="less">
+ .date-change-container {
display: flex;
- width: 100%;
- }
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
- .mdcLogTabs-title > div {
- margin: 2px 5px;
- width: 100%;
- color: #000;
- font-weight: 600;
- padding: 3px;
- border-radius: 5px;
- }
+ /deep/ .ant-space-item {
+ display: flex;
+ align-items: center;
- .btnMdcLogSearch {
- position: relative;
- margin-left: 10px;
- }
+ > div {
+ width: 15px;
+ height: 15px;
+ }
+ }
- .btnMdcLogSearch .btnMdcLogSearchZi {
- position: absolute;
- left: 3px;
+ img {
+ cursor: pointer;
+ }
}
-
- .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>
--
Gitblit v1.9.3