iot也买你搭建

src/views/IOTDataAnalysis/components/IOTHeader.vue

@@ -13,7 +13,9 @@
 
 <style scoped lang="scss">
 .iot-header {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   font-size: 18px;
   z-index: 101;

src/views/IOTDataAnalysis/components/IOTLIstDialog.vue

@@ -30,16 +30,6 @@ const testData = [
       {
         id: 4,
         label: "Level two 1-1",
-        children: [
-          {
-            id: 9,
-            label: "Level three 1-1-1",
-          },
-          {
-            id: 10,
-            label: "Level three 1-1-2",
-          },
-        ],
       },
     ],
   },
@@ -55,6 +45,22 @@ const testData = [
         id: 6,
         label: "Level two 2-2",
       },
+      {
+        id: 19,
+        label: "Level two 3-1",
+      },
+      {
+        id: 110,
+        label: "Level two 3-2",
+      },
+      {
+        id: 111,
+        label: "Level two 3-1",
+      },
+      {
+        id: 112,
+        label: "Level two 3-2",
+      },
     ],
   },
   {
@@ -69,6 +75,22 @@ const testData = [
         id: 8,
         label: "Level two 3-2",
       },
+      {
+        id: 9,
+        label: "Level two 3-1",
+      },
+      {
+        id: 10,
+        label: "Level two 3-2",
+      },
+      {
+        id: 11,
+        label: "Level two 3-1",
+      },
+      {
+        id: 12,
+        label: "Level two 3-2",
+      },
     ],
   },
 ];
@@ -141,9 +163,11 @@ let treeDataTabSecond = ref([...testData]);
   .tree-box {
     box-sizing: border-box;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 52px);
+    overflow-y: auto;
     padding-left: 25px;
     padding-right: 5px;
+    scrollbar-width: none;
     :deep(.el-tree) {
       background-color: rgba(0, 0, 0, 0);
       padding-left: 20px;
@@ -164,19 +188,32 @@ let treeDataTabSecond = ref([...testData]);
       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(.el-tree) {
+      & > .el-tree-node {
+        margin-bottom: 20px;
+        & > .el-tree-node__content {
+          position: relative;
+          &:before {
+            content: "";
+            position: absolute;
+            left: -20px;
+            top: 10px;
+            width: 9px;
+            height: 9px;
+            background: rgba(20, 220, 232, 0.78);
+            transform: rotate(45deg);
+          }
+        }
       }
     }
+    :deep(.el-tree-node__content:hover) {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    :deep(.el-tree-node__content) {
+      background-color: rgba(0, 0, 0, 0) !important;
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
     :deep(.care-bottom) {
       display: none;
       width: 13px;

src/views/IOTDataAnalysis/components/IOTPie.vue

@@ -147,7 +147,6 @@ onMounted(() => {
 .iot-pie {
   width: 100%;
   height: 180px;
-  overflow: hidden;
   padding-left: 30px;
   padding-top: 20px;
   .pie-box {

src/views/IOTDataAnalysis/components/IOTRight.vue

@@ -145,13 +145,32 @@ const deviceInfoOption = ref({
   ],
 });
 
+const barWidth = 20;
 const onLineOptions = ref({
   xAxis: {
-    data: ['Animals', 'Fruits', 'Cars']
+    data: ["春节", "元宵节", "端午节", "中秋节"],
+    axisTick: {
+      show: false,
+    },
+    axisLine: { lineStyle: { color: "#ffffff", opacity: 0.52, width: 1 } },
+  },
+  yAxis: {
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: "#ffffff",
+        opacity: 0.18,
+      },
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#BFC8D7",
+      },
+    },
   },
-  yAxis: {},
-  dataGroupId: '',
-  animationDurationUpdate: 500,
+  dataGroupId: "",
   grid: {
     left: "5%",
     right: "5%",
@@ -159,31 +178,78 @@ const onLineOptions = ref({
     top: "3%",
     containLabel: true,
   },
-  series: {
-    type: 'bar',
-    id: 'sales',
-    data: [
-      {
-        value: 5,
-        groupId: 'animals'
+  series: [
+    {
+      type: "pictorialBar", // 象型柱状
+      symbol: "diamond",
+      symbolSize: [barWidth, 5], // 调整大小
+      // symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
+      symbolOffset: ["0%", -3], // 图形相对于原本位置的偏移
+      symbolPosition: "end",
+      z: 12,
+      color: "#E1EEFF",
+      data: [
+        {
+          name: "春节",
+          value: 24,
+        },
+        { name: "端午节", value: 44 },
+        { name: "中秋节", value: 32 },
+        { name: "春节", value: 50 },
+      ], //Y轴上的高度
+    },
+    {
+      name: "",
+      type: "bar",
+      barWidth: barWidth,
+      barGap: "10%",
+      // zlevel: 2,
+      stack: "1",
+
+      itemStyle: {
+        opacity: 0.7,
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+          {
+            offset: 0.5,
+            color: "rgba(199,217,243,0.99)",
+          },
+          {
+            offset: 0.5,
+            color: "rgba(199,217,243,0.5)",
+          },
+          {
+            offset: 0.5,
+            color: "#6C86C4",
+          },
+          {
+            offset: 1,
+            color: "#6C86C4",
+          },
+        ]),
+        // barBorderRadius: 0,
+        borderRadius: 0,
       },
-      {
-        value: 2,
-        groupId: 'fruits'
+      // 是否在每个柱子显示 相应的值
+      label: {
+        show: false,
+        position: ["0", "-25"],
+        color: "#005dd9",
+        fontSize: 14,
+        fontWeight: "bold",
       },
-      {
-        value: 4,
-        groupId: 'cars'
-      }
-    ],
-    universalTransition: {
-      enabled: true,
-      divideShape: 'clone'
-    }
-  }
+      data: [
+        {
+          name: "春节",
+          value: 24,
+        },
+        { name: "端午节", value: 44 },
+        { name: "中秋节", value: 32 },
+        { name: "春节", value: 50 },
+      ],
+    },
+  ],
 });
 
-
 const initCharts = (domRefValue, options) => {
   const myChart = echarts.init(domRefValue);
   options && myChart.setOption(options);
@@ -230,7 +296,7 @@ onMounted(() => {
     }
 
     .pie-position-box {
-        position: relative;
+      position: relative;
       .pie-item {
         margin-top: 20px;
       }
@@ -251,7 +317,7 @@ onMounted(() => {
           color: #ffffff;
           padding-top: 5px;
           padding-left: 18px;
-          
+
           .icon-label {
             position: absolute;
             width: 8px;
@@ -263,7 +329,7 @@ onMounted(() => {
           .name {
             font-size: 14px;
             color: #9bb9dd;
-            
+
             white-space: nowrap;
           }
           .num {

src/views/IOTDataAnalysis/index.vue

@@ -4,14 +4,19 @@
     <IOTLeft/>
     <IOTRight/>
     <IOTLIstDialog/>
+    <div class="gis-map" id="gisMap" ref="gisMapRef"></div>
 </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import IOTHeader from './components/IOTHeader.vue'
 import IOTLeft from './components/IOTLeft.vue';
 import IOTRight from './components/IOTRight.vue';
 import IOTLIstDialog from './components/IOTLIstDialog.vue';
+
+const gisMapRef = ref(null)
+
 </script>
 
 <style scoped lang="scss">
@@ -19,5 +24,10 @@ import IOTLIstDialog from './components/IOTLIstDialog.vue';
     width: 100vw;
     height: 100vh;
     font-size: 18px;
+    .gis-map{
+        width: 100%;
+        height: 100%;
+        background-color: #dddddd;
+    }
 }
 </style>