From 2390dd9eb74cb7aa152a36a40fcaf1706a8e9767 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=93=B6=E4=B8=AD=E6=B2=99?= <464652163@qq.com>
Date: Sat, 29 Jun 2024 11:04:11 +0800
Subject: [PATCH] 123

---
 src/assets/qd.png          | Bin 0 -> 1253 bytes
 src/components/Header.vue  |   3 +
 src/components/Sidebar.vue |  10 ++--
 src/router/index.js        |  10 ++--
 src/views/Data.vue         | 119 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 129 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/qd.png

diff --git a/src/assets/qd.png b/src/assets/qd.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cb955bf8433d3930c34b28e86da22ff713d6f8a
GIT binary patch
literal 1253
zcmV<B1RDE^P)<h;3K|Lk000e1NJLTq001Wd001Be1^@s6k)~md00001b5ch_0Itp)
z=>Px(pGibPR9Hv7S6yrrRTTctEG?}hCX(<V!2~NRbf=B@5BLDxsf7m~swod`)9fr#
zl>`&@NnWHeCO+|i8f;^Cwi<Y#s0oQ~=+4r8AfX|kraN0~t+olG#%OA^LbcsFdS~0+
z+3wElbS&Jr-Ftq%`OdlDxtHLw8p2A03A7V&Gl=SlF~NjWbL*=5Cf|+!?dH20d*l?P
zK@D{?sMldXMZ^cw(d7550m3OpS#ZIK(nX8`x5P|HW}>=s$HB>}G7Mn1E%8kP#u?ad
z2V=6SN|2^Y0J3@A7`X7A{eL;E>^5S0Y9$|2mN{8fcqs^hGA7Ie87(>15N>W`;xk?n
zFwmFL^cRJ#?PF7hrtk6MFKjA;W8l4vrXLZ;!GkU9$;|%dHMpVaBp3rhR3f(+d%QB}
z1nye^TXN_N%*kOT0z$tRaJP-QpsMr|&}}a*gKGiQ6#*lD0VWmoR*s$9*mLz=O;1Vz
zDGp%03rk-bn*Nv<7M*OYl1pd<Xe}5iV!D!!4SiD}#lcgKG_?{3-ePcYxrx2he!w-f
zKXVVStvL_iiPDpf9wVk7b371B4qH0*-Ca{P{~8hYG9UvO1LKQqb)ffJ-}#^X0JBbS
zSUC&A^N#+U1L!y*{3f>KrVQJ~y^1$0#b?SsvZ~-#qJ#OqBJMP4O`JH}0mccN<h)V@
zPL71$2GdT<faqripOxn3E~HOioT>Dset`Wqg^EPkF8%;c=E2Dk<suln{4~E$U?Nq@
zoL$&IHkg_%5o<z^1x{9#yy%u=$nA7G0Q(w@SIfqd(9VoQw!IMst`N`+;Ne19>18oq
zPJm#IC)dU3DZ5W4%{>Cs>|8$hmwdN{n;#4iPq^kH3>i_qg=AH^3gFRvgEAdR#}b2b
zL^)E_pq0Sq_J`+*I>)1lAKlC=#J*u@`X;OGWmWkFzy|9FD3jI_LeH!vtBO$T0@W@V
z861~tYC6&<Kd*Rra<Q9sf&&pEJk8(-089gP&Cn9h<%tTap(z4w&Vj?Ntb|=-{rXqi
z)qNZ0F)x67S)cws`&Z`=gO_f3G4^Uh!Eop>5xsA7xC!9$;_t$Rb5XUu23`$25)3V1
zVYq^-j~kl4)o;RW-7WV9{>h4qXDbMe42l!;<+=H)<CCZ2e>lapq$H?@>Lo~L901;6
zqQjYJ;+!9FZm~s=6XEEnL+rc=iy#E46W~?=8wqrsfe9%<uaAB>H01}_;-L~PQhNKy
zcRhZkth6^hFeFr?XnC5gJKA>C{&`pJ#*#-%SEvyZIp6sLbRSIqXjxA2oGiMuGI1;u
zO{yyfCm03OXGD0&e)SHj%5g&ZDd5;ciyFFosxWvuqb2WOF*rG_9D{8Nh)2s}x$-YG
zFC}-?P{NE6)k`W+v8=1boLxif)n}iQV2%_%imw`4^6?cjCmekD9ML9#KelTqfu;bi
zV?aEZti_CXGBN!PU*Noy&B;bqo6iBf-z^3)8q+a7eaFFV4e#E(hN}7i7FVL>Yf_Tv
zrP2OGvK;t|J@<cDTk@@MYpa&l%^W4dAr^0bV2TN!1gfReqaO@8&hLK#EQtGDj8<lt
P00000NkvXXu0mjfL1;-v

literal 0
HcmV?d00001

diff --git a/src/components/Header.vue b/src/components/Header.vue
index e421973..fb83b9d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -133,6 +133,9 @@ export default {
       font-size: 20px;
     }
   }
+  .right {
+    font-size: 20px;
+  }
 }
 .el-icon-back {
   border: 1px solid #e9e9e9;
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 8e4fc0f..c131523 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -93,11 +93,11 @@ export default {
               name: "驱动管理",
               index: "/page",
             },
-            // {
-            //   id: 3 - 2,
-            //   name: "实时数据",
-            //   index: "/data",
-            // },
+            {
+              id: 3 - 3,
+              name: "实时数据",
+              index: "/data",
+            },
             // {
             //   id: 3 - 3,
             //   name: "上报管理",
diff --git a/src/router/index.js b/src/router/index.js
index 795aed9..b383398 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,11 +32,11 @@ const router = createRouter({
       name: 'page',
       component: () => import('../views/Page.vue')
     },
-    // {
-    //   path: '/data',
-    //   name: 'data',
-    //   component: () => import('../views/Data.vue')
-    // },
+    {
+      path: '/data',
+      name: 'data',
+      component: () => import('../views/Data.vue')
+    },
     // {
     //   path: '/report',
     //   name: 'report',
diff --git a/src/views/Data.vue b/src/views/Data.vue
index bfa33ba..684fe26 100644
--- a/src/views/Data.vue
+++ b/src/views/Data.vue
@@ -1,7 +1,48 @@
 <template>
   <el-card class="content-div">
     <div class="all-content">
-      
+        <fieldset class="left  box2">
+          <legend class="box-ht">驱动列表</legend>
+          <div v-for="(item, i) in qdDatas" :class="i===indexi?'active': ''" :key="i" @click="changeQd(i)">
+            <img src="../assets/qd.png" alt="">
+            {{ item.name }}
+          </div>
+        </fieldset>
+      <div class="right">
+        <div class="right-set">
+          <el-tree
+          :data="data"
+          :props="defaultProps"
+          :highlight-current="true"
+          accordion 
+          @node-click="handleNodeClick">
+        </el-tree>
+        </div>
+        <div class="right-table">
+          <el-table :data="tableData"  border :row-class-name="tableRowClassName"
+            :header-cell-style="{ background: '#F6F7FC' }" size="large">
+            <el-table-column type="index" label="序号" width="60" align="center" />
+            <el-table-column prop="name" label="名称" width="150" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="描述" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="质量" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="值" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="单位" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="类型" align="center" show-overflow-tooltip />
+            <el-table-column prop="description" label="时间戳" align="center" show-overflow-tooltip />
+            <el-table-column label="操作" align="center" show-overflow-tooltip>
+              <template #default="scope">
+                <el-button type="success" size="large">
+                  历史
+                </el-button>
+                <el-button type="warning" size="large">
+                  写值
+                </el-button>
+    
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
     </div>
   </el-card>
 </template>
@@ -15,21 +56,93 @@ export default {
   setup() {
     const ruleFormRef = ref(null);
     const state = reactive({
+      indexi: 0,
+      qdDatas: [{
+        id: 1,
+        name: '驱动一',
+      },{
+        id: 2,
+        name: '驱动二',
+      },{
+        id: 3,
+        name: '驱动三',
+      },{
+        id: 4,
+        name: '驱动四',
+      },{
+        id: 5,
+        name: '驱动五',
+      }],
+      data: [{
+          id: 11,
+          label: '设备一',
+      }, {
+        id: 12,
+      label: '设备二',
       
+      }, {
+        id: 13,
+        label: '设备三',
+      
+      }],
+      tableData: []
     });
 
     onMounted(() => {
       
     });
-
+    const changeQd = (i) => {
+      state.indexi = i;
+    }
     
 
     return {
       ...toRefs(state),
+      changeQd
     };
   },
 };
 </script>
 <style lang="scss" scoped>
-
+.all-content {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+.left {
+  width: 15%;
+  border: 1px solid #006b3b;
+  font-size: 16px;
+  img {
+    width: 24px;
+  }
+  >div {
+    background: #e2f4e5;
+    margin-top: 10px;
+    text-align: center;
+    line-height: 40px;
+    cursor:pointer;
+  }
+  .active {
+    background: #00AAA3;
+    color: #fff;
+  }
+}
+.right {
+  width: 84%;
+  border: 1px solid #006b3b;
+  display: flex;
+  justify-content: space-around;
+  .right-set {
+    width: 10%;
+    padding: 20px;
+  }
+  .right-table {
+    width: 88%;
+    //  .el-tree-node {
+    //     border: 1px solid #ddd !important;
+    //     margin-top: 10px !important;
+    // }
+  }
+}
+}
 </style>