iot也买你搭建

src/views/IOTDataAnalysis/components/IOTLIstDialog.vue

@@ -11,7 +11,6 @@
         node-key="id"
         :default-expand-all="true"
         :renderContent="renderContent"
-        @check=""
       >
       </el-tree>
     </div>
@@ -143,6 +142,7 @@ let treeDataTabSecond = ref([...testData]);
   background-size: 100% 100%;
   padding: 5px;
   padding-top: 38px;
+  z-index: 29;
   .top-icon {
     position: absolute;
     top: 5px;
@@ -182,6 +182,14 @@ let treeDataTabSecond = ref([...testData]);
           border-radius: 0;
         }
       }
+      .el-checkbox__input.is-checked .el-checkbox__inner{
+        background-color: #409eff;
+        &::after{
+          left: 4px;
+          width: 5px;
+          height: 9px;
+        }
+      }
     }
     :deep(.el-tree-node__content > .el-tree-node__expand-icon) {
       display: none;

src/views/IOTDataAnalysis/components/IOTLeft.vue

@@ -191,7 +191,7 @@ const getCount = (totalArr, num) => {
   font-size: 18px;
   z-index: 99;
   padding: 58px 0 44px 25px;
-  //   background: linear-gradient(90deg, rgba(0,17,50,0.95), rgba(0,17,50,0.5), rgba(0,17,51,0));
+  background: linear-gradient(90deg, rgba(0,17,50,0.75), rgba(0,17,50,0.5), rgba(0,17,51,0));
   .left-box {
     box-sizing: border-box;
     width: 100%;

src/views/IOTDataAnalysis/components/IOTRight.vue

@@ -14,32 +14,32 @@
           <IOTPie class="pie-item" />
           <div class="pie-info-data">
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">设备离线</span>
               <span class="num">20%</span>
             </div>
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">雨水液位异常</span>
               <span class="num">20%</span>
             </div>
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">污水液位异常</span>
               <span class="num">20%</span>
             </div>
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">设备离线</span>
               <span class="num">20%</span>
             </div>
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">水务供应压力异常</span>
               <span class="num">20%</span>
             </div>
             <div class="pie-info-item">
-              <div class="icon-label" style="background-color: #bcbf5c"></div>
+              <div class="icon-label" style="border-color: #bcbf5c"></div>
               <span class="name">其他</span>
               <span class="num">20%</span>
             </div>
@@ -272,7 +272,7 @@ onMounted(() => {
   font-size: 18px;
   z-index: 99;
   padding: 58px 25px 44px 0;
-  //   background: linear-gradient(90deg, rgba(0,17,50,0.95), rgba(0,17,50,0.5), rgba(0,17,51,0));
+  background: linear-gradient(90deg, rgba(0,17,51,0),rgba(0,17,50,0.5),rgba(0,17,50,0.75),);
   .left-box {
     box-sizing: border-box;
     width: 100%;
@@ -320,11 +320,22 @@ onMounted(() => {
 
           .icon-label {
             position: absolute;
-            width: 8px;
-            height: 8px;
-            border-radius: 1px;
-            top: 30%;
-            left: 5px;
+            width: 9px;
+            height: 9px;
+            border: 1px solid;
+            border-radius: 50%;
+            top: 25%;
+            left: 2px;
+            &::before{
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              content: '';
+              border: 3px solid;
+              border-color: inherit;
+              border-radius: 5px;
+            }
           }
           .name {
             font-size: 14px;

src/views/IOTDataAnalysis/index.vue

@@ -4,7 +4,9 @@
     <IOTLeft/>
     <IOTRight/>
     <IOTLIstDialog/>
-    <div class="gis-map" id="gisMap" ref="gisMapRef"></div>
+    <div class="gis-map" id="gisMap" ref="gisMapRef">
+        <Map/>
+    </div>
 </div>
 </template>
 
@@ -14,7 +16,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';
-
+import Map from './map/Map.vue'
 const gisMapRef = ref(null)
 
 </script>

src/views/IOTDataAnalysis/map/Map.vue

@@ -0,0 +1,129 @@
+<template>
+    <div id="iotmap">
+      <iframe id="iot_map" name="iot_map">
+  
+      </iframe>
+    </div>
+  </template>
+  
+  <script>
+  import CityGis from '@/unit/map/CityGis.Bridge.js';
+  import {myBridge} from "@/unit/map/map.js";
+  import {useMapStore} from "@/store/mapStore.js";
+  import {nextTick,ref,onMounted} from "vue";
+  import {
+    AddSingleLayer,
+    AreaJsonRankShow,
+    FeatureThreeDimension,
+    MapClickByType,
+    SetBackground
+  } from "@/unit/map/addLayer.js";
+  import {getMapNum} from "@/service/map.js";
+  let bridge;
+  export default {
+    name: "Map",
+    setup(){
+      const mapStore = useMapStore();
+      onMounted(()=>{
+        myBridge.bridgeContent =  bridge = new CityGis.Bridge({
+          id: "iot_map",
+          url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark_hyjcsjk&type=3D', //建科发布
+          //url: 'http://localhost:8081/#/jk_map?theme=dark_hyjcsjk&type=3D',
+          onReady: function () {
+            console.log("地图创建完成")
+          }
+        })
+        MapClickByType('show');
+        SetBackground();
+        bridge.addEventListener(arg => {
+          switch (arg.action) {
+            case "MapExtentChanged":
+              let scale = arg.data.scale;
+              if(mapStore.currentNum){
+                if(scale > 100000 && mapStore.scale  <= 100000){
+                  getMapNum('county',mapStore.currentNum).then(res =>{
+                    debugger
+                    let data = res.data.data;
+                    let zxCount = 0;
+                    let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
+                    data.forEach(item =>{
+                      if(zxList.indexOf(item.name) > -1){
+                        zxCount += item.value * 1;
+                      }
+                    })
+                    data.push({
+                      name:"中心城区",
+                      value:zxCount
+                    })
+                    debugger
+                    AreaJsonRankShow({
+                      type:"zx",
+                      status:"show",
+                      data:data
+                    });
+                  })
+                }else if(scale > 80000 && mapStore.scale  <= 80000 ){
+                  debugger
+                  getMapNum('county',mapStore.currentNum).then(res =>{
+                    debugger
+                    let data = res.data.data
+                    AreaJsonRankShow({
+                      type:"qx",
+                      status:"show",
+                      data:data
+                    });
+                  })
+                }else if(scale < 70000 && mapStore.scale  >= 70000){
+                  getMapNum('street',mapStore.currentNum).then(res =>{
+                    debugger
+                    let data = res.data.data
+                    AreaJsonRankShow({
+                      type:"jz",
+                      status:"show",
+                      data:data
+                    });
+                  })
+                }
+                if(scale < 6000 && mapStore.scale  >= 6000){
+                  debugger
+                  FeatureThreeDimension({
+                    url:mapStore.currentLayer.ADDRESS,
+                    token:mapStore.currentLayer.TOKEN,
+                    status:"show"
+                  });
+                }else if(scale > 6000 && mapStore.scale  <= 6000){
+                  debugger
+                  FeatureThreeDimension({
+                    url:mapStore.currentLayer.ADDRESS,
+                    token:mapStore.currentLayer.TOKEN,
+                    status:"hide"
+                  });
+                }
+              }
+              mapStore.scale = scale;
+              break;
+          }
+        })
+      })
+    }
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  #iotmap{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+  #iot_map {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border: none;
+  }
+  </style>