123

src/components/Header.vue

@@ -133,6 +133,9 @@ export default {
       font-size: 20px;
     }
   }
+  .right {
+    font-size: 20px;
+  }
 }
 .el-icon-back {
   border: 1px solid #e9e9e9;

src/components/Sidebar.vue

@@ -93,11 +93,11 @@ export default {
               name: "驱动管理",
               index: "/page",
             },
-            // {
+            {
-            //   id: 3 - 2,
+              id: 3 - 3,
-            //   name: "实时数据",
+              name: "实时数据",
-            //   index: "/data",
+              index: "/data",
-            // },
+            },
             // {
             //   id: 3 - 3,
             //   name: "上报管理",

src/router/index.js

@@ -32,11 +32,11 @@ const router = createRouter({
       name: 'page',
       component: () => import('../views/Page.vue')
     },
-    // {
+    {
-    //   path: '/data',
+      path: '/data',
-    //   name: 'data',
+      name: 'data',
-    //   component: () => import('../views/Data.vue')
+      component: () => import('../views/Data.vue')
-    // },
+    },
     // {
     //   path: '/report',
     //   name: 'report',

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>