树搭建

src/views/IOTDataAnalysis/components/IOTLIstDialog.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="iot-list-dialog">
+    <div class="top-icon"></div>
+    <div class="top-title">IOT列表</div>
+    <div class="tree-box">
+      <el-tree
+        :data="treeDataTabSecond"
+        ref="treeTabSecondRef"
+        show-checkbox
+        check-strictly
+        node-key="id"
+        :default-expand-all="true"
+        :renderContent="renderContent"
+        @check=""
+      >
+      </el-tree>
+    </div>
+    <div class="top-icon-bottom"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const treeTabSecondRef = ref(null);
+const testData = [
+  {
+    id: 1,
+    label: "Level one 1",
+    children: [
+      {
+        id: 4,
+        label: "Level two 1-1",
+        children: [
+          {
+            id: 9,
+            label: "Level three 1-1-1",
+          },
+          {
+            id: 10,
+            label: "Level three 1-1-2",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: "Level one 2",
+    children: [
+      {
+        id: 5,
+        label: "Level two 2-1",
+      },
+      {
+        id: 6,
+        label: "Level two 2-2",
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: "Level one 3",
+    children: [
+      {
+        id: 7,
+        label: "Level two 3-1",
+      },
+      {
+        id: 8,
+        label: "Level two 3-2",
+      },
+    ],
+  },
+];
+const renderContent = (h, { node, data, store }) => {
+  if (data.children == null || data.children.length === 0) {
+    return h("div", { class: "custom-tree-node" }, [
+      h(
+        "span",
+        { class: "node-label ch-label", title: data.label },
+        data.label
+      ),
+    ]);
+  }
+
+  return h("div", { class: "custom-tree-node" }, [
+    h("span", { class: "node-label" }, [
+      data.label,
+      h(
+        "svg",
+        {
+          class: "care-bottom",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 1024 1024",
+        },
+        [h("path", { fill: "currentColor", d: "m192 384 320 384 320-384z" })]
+      ),
+      h(
+        "svg",
+        {
+          class: "care-right",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 1024 1024",
+        },
+        [h("path", { fill: "currentColor", d: "M384 192v640l384-320.064z" })]
+      ),
+    ]),
+  ]);
+};
+let treeDataTabSecond = ref([...testData]);
+</script>
+
+<style scoped lang="scss">
+.iot-list-dialog {
+  position: fixed;
+  width: 353px;
+  height: 553px;
+  top: 110px;
+  left: 440px;
+  background-image: url("@/assets/imgs/IOTImage/dialog-bg.png");
+  background-size: 100% 100%;
+  padding: 5px;
+  padding-top: 38px;
+  .top-icon {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    right: 10px;
+    height: 32px;
+    background-image: url("@/assets/imgs/IOTImage/header-top.png");
+    background-size: 100% 100%;
+  }
+  .top-title {
+    width: 100%;
+    text-align: left;
+    color: #c8cef2;
+    padding-left: 23px;
+    font-size: 24px;
+    font-family: "heitao";
+  }
+  .tree-box {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding-left: 25px;
+    padding-right: 5px;
+    :deep(.el-tree) {
+      background-color: rgba(0, 0, 0, 0);
+      padding-left: 20px;
+      .el-checkbox {
+        position: absolute;
+        right: 30px;
+        .el-checkbox__inner {
+          width: 16px;
+          height: 16px;
+          border: 1px solid #66b3ff;
+          background-color: rgba(0, 0, 0, 0);
+          border-radius: 0;
+        }
+      }
+    }
+    :deep(.el-tree-node__content > .el-tree-node__expand-icon) {
+      display: none;
+      font-size: 15px;
+      color: #585858;
+    }
+    :deep(.el-tree > .el-tree-node > .el-tree-node__content) {
+      position: relative;
+      &:before{
+        content: '';
+        position: absolute;
+        left: -20px;
+        top: 8px;
+        width: 9px;
+        height: 9px;
+        background: rgba(20,220,232,0.78);
+        transform: rotate(45deg);
+      }
+    }
+    :deep(.care-bottom) {
+      display: none;
+      width: 13px;
+      margin-left: 8px;
+    }
+    :deep(.care-right) {
+      display: inline;
+      width: 13px;
+      margin-left: 8px;
+    }
+    :deep(.el-tree > .is-expanded > .el-tree-node__content) {
+      .care-bottom {
+        display: inline;
+      }
+      .care-right {
+        display: none;
+      }
+    }
+    :deep(
+        .el-tree .el-tree-node__children > .is-expanded > .el-tree-node__content
+      ) {
+      .care-bottom {
+        display: inline;
+      }
+      .care-right {
+        display: none;
+      }
+    }
+  }
+  .top-icon-bottom {
+    position: absolute;
+    bottom: 5px;
+    left: 10px;
+    right: 10px;
+    height: 32px;
+    background-image: url("@/assets/imgs/IOTImage/header-bottom.png");
+    background-size: 100% 100%;
+  }
+}
+</style>

src/views/IOTDataAnalysis/components/IOTRight.vue

@@ -236,22 +236,21 @@ onMounted(() => {
       }
       .pie-info-data {
         display: flex;
-        justify-content: flex-start;
+        justify-content: space-between;
         flex-wrap: wrap;
         position: absolute;
         top: 200px;
         left: 0px;
         z-index: 101;
-        padding-left: 10px;
         .pie-info-item {
           display: flex;
-          flex: 1;
+          width: calc(30% - 18px);
           flex-direction: column;
           text-align: left;
           position: relative;
           color: #ffffff;
           padding-top: 5px;
-          padding-left: 20px;
+          padding-left: 18px;
           
           .icon-label {
             position: absolute;
@@ -264,7 +263,8 @@ onMounted(() => {
           .name {
             font-size: 14px;
             color: #9bb9dd;
-            min-width: 80px;
+            
+            white-space: nowrap;
           }
           .num {
             color: #dfecfb;

src/views/IOTDataAnalysis/index.vue

@@ -3,7 +3,7 @@
     <IOTHeader/>
     <IOTLeft/>
     <IOTRight/>
-
+    <IOTLIstDialog/>
 </div>
 </template>
 
@@ -11,7 +11,7 @@
 import IOTHeader from './components/IOTHeader.vue'
 import IOTLeft from './components/IOTLeft.vue';
 import IOTRight from './components/IOTRight.vue';
-
+import IOTLIstDialog from './components/IOTLIstDialog.vue';
 </script>
 
 <style scoped lang="scss">