From 4bdafebef311d37a28f84c09dcf74bebb096dbb6 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 23 六月 2025 14:43:50 +0800
Subject: [PATCH] 1、mdc设备多选输入框优化新增点击输入框同样触发查询按钮弹出抽屉或弹窗 2、解决进入过产品结构树页面后再进入设备日志页面后设备状态分布图样式变形问题以及优化组件代码
---
src/views/mdc/base/modules/DeviceLog/LogInfo.vue | 435 ++++++++++++++++++++++++-----------------------------
1 files changed, 197 insertions(+), 238 deletions(-)
diff --git a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
index da70e00..051eadd 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,131 +29,94 @@
</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">
+
+ <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>
- </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 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" 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 +126,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 +143,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 +228,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 +242,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 +270,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 +290,6 @@
}
},
created() {
- this.queryParams.collectTime = moment()
- this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
this.initEquipment()
},
watch: {
@@ -354,7 +297,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 +306,65 @@
}
</script>
-<style scoped="scoped">
- .mdcLogTabs-title {
+<style scoped="scoped" lang="less">
+ @image-container-width: 58px;
+
+ .equipment-status-container {
display: flex;
- width: 100%;
+
+ > a {
+ display: inline-block;
+ text-align: center;
+ width: @image-container-width
+ }
+
+ > div {
+ height: 62px;
+ border: 1px solid #9d9d9d;
+ position: relative;
+ overflow: hidden;
+ flex: 1
+ }
}
- .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 {
+ .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;
+ }
+ }
}
- #mdcLogShow > div {
- flex: 1;
- }
+ .date-change-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
- /*.mdcLogShowOne{*/
- /*position: absolute;*/
- /*}*/
+ /deep/ .ant-space-item {
+ display: flex;
+ align-items: center;
+
+ > div {
+ width: 15px;
+ height: 15px;
+ }
+ }
+
+ img {
+ cursor: pointer;
+ }
+ }
</style>
--
Gitblit v1.9.3