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 | 159 +++++++++++++++++++++++++++-------------------------
1 files changed, 82 insertions(+), 77 deletions(-)
diff --git a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
index 9b03a2c..051eadd 100644
--- a/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
+++ b/src/views/mdc/base/modules/DeviceLog/LogInfo.vue
@@ -31,87 +31,52 @@
</div>
<div>
- <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 warning">
+ <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="z-index: 1000;"
- :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
- v-for="item in fault">
+ </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>
- </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>
- </table>
+ </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="">
@@ -342,6 +307,46 @@
</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;
--
Gitblit v1.9.3