From a22a69946912221dab4d32987dda6c4c8ba3c5d8 Mon Sep 17 00:00:00 2001
From: cuilei <ray_tsu1@163.com>
Date: 星期二, 24 六月 2025 17:43:24 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 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