From 7398d36b5c8eeef2123f6c23afad684bca2cf0d6 Mon Sep 17 00:00:00 2001
From: liupeng <511646242@qq.com>
Date: Fri, 23 May 2025 18:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/designer/viewWidgets/monitor/MonitorView.vue | 257 +++++++++++++++++++----
 1 file changed, 215 insertions(+), 42 deletions(-)

diff --git a/src/designer/viewWidgets/monitor/MonitorView.vue b/src/designer/viewWidgets/monitor/MonitorView.vue
index 99ae190..833be3b 100644
--- a/src/designer/viewWidgets/monitor/MonitorView.vue
+++ b/src/designer/viewWidgets/monitor/MonitorView.vue
@@ -11,46 +11,99 @@
     </span>
   </div>
   <div class="calc-left-panel">
-    MonitorView1<br />
-    MonitorView2<br />
-    MonitorView3<br />
-    MonitorView4<br />
-    MonitorView5<br />
-    MonitorView6<br />
-    MonitorView7<br />
-    MonitorView8<br />
-    MonitorView9<br />
-    MonitorView10<br />
-    MonitorView11<br />
-    MonitorView12<br />
-    MonitorView13<br />
-    MonitorView14<br />
-    MonitorView15<br />
-    MonitorView16<br />
-    MonitorView17<br />
-    MonitorView18<br />
-    MonitorView19<br />
-    MonitorView20<br />
-    MonitorView21<br />
-    MonitorView22<br />
-    MonitorView23<br />
-    MonitorView24<br />
-    MonitorView25<br />
-    MonitorView26<br />
-    MonitorView27<br />
-    MonitorView28<br />
-    MonitorView29<br />
-    MonitorView30<br />
-    MonitorView31<br />
-    MonitorView32<br />
-    MonitorView33<br />
-    MonitorView34<br />
-    MonitorView35<br />
-    MonitorView36<br />
-    MonitorView37<br />
-    MonitorView38<br />
-    MonitorView39<br />
-    MonitorView40<br />
+    <div class="monitor-tool-wrap">
+      <div class="infor-row">
+        <div class="infor-item">
+          总数<span class="num">{{total}}</span>
+        </div>
+        <div class="infor-item">
+          上线<span class="num num-red">{{online}}</span>
+        </div>
+        <div class="infor-item">
+          下线<span class="num num-green">{{offline}}</span>
+        </div>
+        <div class="infor-item">
+          运行中<span class="num num-blue">{{running}}</span>
+        </div>
+        <div class="infor-item">
+          空闲中<span class="num num-orange">{{idle}}</span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item">
+          <div class="title">
+            名称 <span class="num">AGV-0</span>
+            <component :is="renderIcon('antd WifiOutlined')"></component>
+            电量 <span class="num">0%</span>
+            <component  :is="renderIcon('fa BatteryEmpty')"></component>
+          </div>
+          <div class="content">
+            <div class="row">
+              <div class="row-icon">
+                <component  :is="renderIcon('antd CodeSandboxOutlined')"></component>
+              </div>
+              <div class="row-content">
+                <div class="data-infor">状态 <span>空闲</span></div>
+                <div class="data-infor">车速 <span>0 m/s</span></div>
+                <div class="data-infor">当前地标 <span></span></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
+            </div>
+          </div>
+          <div class="footer">警告信息</div>
+        </div>
+        <div class="item selected">
+          <div class="title">
+            名称 <span class="num">AGV-0</span>
+            <component :is="renderIcon('antd WifiOutlined')"></component>
+            电量 <span class="num">0%</span>
+            <component  :is="renderIcon('fa BatteryEmpty')"></component>
+          </div>
+          <div class="content">
+            <div class="row">
+              <div class="row-icon">
+                <component  :is="renderIcon('antd CodeSandboxOutlined')"></component>
+              </div>
+              <div class="row-content">
+                <div class="data-infor">状态 <span>空闲</span></div>
+                <div class="data-infor">车速 <span>0 m/s</span></div>
+                <div class="data-infor">当前地标 <span></span></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
+            </div>
+          </div>
+          <div class="footer">警告信息</div>
+        </div>
+        <div class="item">
+          <div class="title">
+            名称 <span class="num">AGV-0</span>
+            <component :is="renderIcon('antd WifiOutlined')"></component>
+            电量 <span class="num">0%</span>
+            <component  :is="renderIcon('fa BatteryEmpty')"></component>
+          </div>
+          <div class="content">
+            <div class="row">
+              <div class="row-icon">
+                <component  :is="renderIcon('antd CodeSandboxOutlined')"></component>
+              </div>
+              <div class="row-content">
+                <div class="data-infor">状态 <span>空闲</span></div>
+                <div class="data-infor">车速 <span>0 m/s</span></div>
+                <div class="data-infor">当前地标 <span></span></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
+            </div>
+          </div>
+          <div class="footer">警告信息</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -61,7 +114,12 @@ export default {
   emits: ['close'],
   data() {
     return {
-      searchKeyword: ''
+      searchKeyword: '',
+      total: 0,
+      online: 0,
+      offline: 0,
+      running: 0,
+      idle: 0
     }
   },
   methods: {
@@ -71,4 +129,119 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="less">
+.monitor-tool-wrap{
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .infor-row{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    //background: #cdcccc;
+    padding:3px 0;
+    .infor-item{
+      margin:2px 8px;
+      font-size: 12px;
+      background: #f3e9c0;
+      border-radius: 3px;
+      padding:  0 5px;
+    }
+    .num{
+      display: inline-block;
+      padding:0 3px;
+      font-weight: bold;
+      color: #333;
+      &:first-child{
+        margin-left: 0;
+      }
+      &:last-child{
+        margin-right: 0;
+      }
+      &.num-red{
+        color: red;
+      }
+      &.num-green{
+        color: green;
+      }
+      &.num-blue{
+        color: blue;
+      }
+      &.num-orange{
+        color: #d78f0b;
+      }
+    }
+  }
+  .list{
+    flex:1;
+    overflow: auto;
+    font-size: 12px;
+    color:#fff;
+    .item{
+      display: flex;
+      flex-direction: column;
+      border:2px solid #808080;
+      margin:5px 5px;
+      border-radius: 5px;
+      background: #747a80;
+      &.selected{
+        border-color: #fa9d12;
+      }
+      .title{
+        display: flex;
+        align-items: center;
+        padding:3px 10px;
+        border-bottom: 1px solid #81888e;
+        margin-bottom: 5px;
+        .num{
+          font-weight: bold;
+          margin-left:5px;
+        }
+        .el-icon{
+          margin:  0 5px;
+          font-size: 15px;
+        }
+      }
+      .content{
+        flex:1;
+        .row{
+          display: flex;
+          flex-direction: row;
+          margin:0 5px;
+          .row-icon{
+            width: 75px;
+            height: 75px;
+            background: #3e454c;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .el-icon{
+              font-size: 70px;
+              color: #f4c521;
+            }
+          }
+          .row-content{
+            flex:1;
+            margin-left:5px;
+          }
+        }
+        .data-infor{
+          margin:3px 0;
+          span{
+            font-weight: bold;
+            margin-left:5px;
+          }
+        }
+      }
+      .footer{
+        border-top:1px solid #656a70;
+        background: #747a80;
+        padding: 3px 5px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file