iot数据专题分析

src/unit/map/addLayer.js

@@ -1,275 +1,285 @@
-import {myBridge,previewMapBridge} from "./map.js";
-import {getMapToken,getServiceToken} from "../../service/map.js";
+import { myBridge, previewMapBridge } from "./map.js";
+import { getMapToken, getServiceToken } from "../../service/map.js";
 
-export function invokeParams(ActionName,params){
-    getMapToken().then(res =>{
-        let token = res.data.msg[0].Rows[0].token;
-        myBridge.bridgeContent.Invoke({
-            'ActionName': ActionName,
-            "Parameters": {
-                token: token,
-                ...params
-            }
-        })
-    })
+export function invokeParams(ActionName, params) {
+  getMapToken().then((res) => {
+    let token = res.data.msg[0].Rows[0].token;
+    myBridge.bridgeContent.Invoke({
+      ActionName: ActionName,
+      Parameters: {
+        token: token,
+        ...params,
+      },
+    });
+  });
 }
 export function previewInvokeParams(ActionName, params) {
-    getMapToken().then(res =>{
-        let token = res.data.msg[0].Rows[0].token;
-        previewMapBridge.bridgeContent.Invoke({
-            'ActionName': ActionName,
-            "Parameters": {
-                token: token,
-                ...params
-            }
-        })
-    })
+  getMapToken().then((res) => {
+    let token = res.data.msg[0].Rows[0].token;
+    previewMapBridge.bridgeContent.Invoke({
+      ActionName: ActionName,
+      Parameters: {
+        token: token,
+        ...params,
+      },
+    });
+  });
 }
 
-async function returnProxyUrl(url){
-    let arr = url.split('/');
-    let username = '';
-    let password = '';
-    debugger
-    if(arr.indexOf('MapProxyApi') !== -1){ //不需要授权服务
-        for(let i=0;i<arr.length;i++){
-            if(arr[i] ==='getSceneServer'){
-                username = arr[i+1];
-                password = arr[i+2];
-                const response = await getServiceToken(username,password);
-                if(response?.data.length > 0){
-                    arr.splice(i-1, 4);
-                    return arr.join('/')+'/MapServiceProxy/'+response.data;
-                }
-            }
+async function returnProxyUrl(url) {
+  let arr = url.split("/");
+  let username = "";
+  let password = "";
+  debugger;
+  if (arr.indexOf("MapProxyApi") !== -1) {
+    //不需要授权服务
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i] === "getSceneServer") {
+        username = arr[i + 1];
+        password = arr[i + 2];
+        const response = await getServiceToken(username, password);
+        if (response?.data.length > 0) {
+          arr.splice(i - 1, 4);
+          return arr.join("/") + "/MapServiceProxy/" + response.data;
         }
-    }else{
-        return url
+      }
     }
+  } else {
+    return url;
+  }
 }
 
-export function SetBackground(){
-    invokeParams('SetBackground', {
-        "opacity": 1,
-        "color": "transparent",
-    })
+export function SetBackground() {
+  invokeParams("SetBackground", {
+    opacity: 1,
+    color: "transparent",
+  });
 }
 
-export function FeatureThreeDimension(params){
-    debugger
-    if(params.token){
-        params.url = "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.token;
-    }
-    invokeParams('FeatureThreeDimension', {
-        "url": params.url,
-        "status": params.status
-    })
+export function FeatureThreeDimension(params) {
+  debugger;
+  if (params.token) {
+    params.url =
+      "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.token;
+  }
+  invokeParams("FeatureThreeDimension", {
+    url: params.url,
+    status: params.status,
+  });
 }
 
 //区县聚类
-export function MapClickByType(status){
-    invokeParams('MapClickAll', {
-        "status": status,
-        "disableLayerIdList":["districtArea","districtStreet","bgFeaturelayer"]
-    })
+export function MapClickByType(status) {
+  invokeParams("MapClickAll", {
+    status: status,
+    disableLayerIdList: ["districtArea", "districtStreet", "bgFeaturelayer"],
+  });
 }
 
 //点查询
-export function AreaJsonRankShow(params){
-    debugger
-    invokeParams('AreaJsonRankShow', {
-        "type": params.type,  //qx、jz
-        "district": null,
-        "id": "AreaTextLayer",
-        "title": "文本标绘",
-        "status": params.status,
-        "data": params.data,
-        "symbol": {
-            "color": [255, 255, 255, 1],
-            "backgroundColor": [77, 161, 194, 0.4],
-            "font": {
-                "size": 12
-            }
-        },
-    })
+export function AreaJsonRankShow(params) {
+  debugger;
+  invokeParams("AreaJsonRankShow", {
+    type: params.type, //qx、jz
+    district: null,
+    id: "AreaTextLayer",
+    title: "文本标绘",
+    status: params.status,
+    data: params.data,
+    symbol: {
+      color: [255, 255, 255, 1],
+      backgroundColor: [77, 161, 194, 0.4],
+      font: {
+        size: 12,
+      },
+    },
+  });
 }
 
 export async function AddBaseMapLayer() {
-    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/93493321");
-    console.log("1111",url);
-    debugger
-    invokeParams('AddBaseMapLayer', {
-        "id": "BaseMap",
-        "title": "BaseMap",
-        "visible": true,
-        "opacity": 1,
-        url
-    })
+  let url = await returnProxyUrl(
+    "https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/93493321"
+  );
+  console.log("1111", url);
+  debugger;
+  invokeParams("AddBaseMapLayer", {
+    id: "BaseMap",
+    title: "BaseMap",
+    visible: true,
+    opacity: 1,
+    url,
+  });
 }
 
 export async function AddZhenwuMapLayer() {
-    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/37072265");
-    console.log("1111",url);
-    debugger
-    invokeParams('AddBaseMapLayer', {
-        "id": "BaseMapZhenwu",
-        "title": "BaseMapZhenwu",
-        "visible": true,
-        "opacity": 1,
-        url
-    })
+  let url = await returnProxyUrl(
+    "https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/37072265"
+  );
+  console.log("1111", url);
+  debugger;
+  invokeParams("AddBaseMapLayer", {
+    id: "BaseMapZhenwu",
+    title: "BaseMapZhenwu",
+    visible: true,
+    opacity: 1,
+    url,
+  });
 }
 
 export async function AddYaoganMapLayer() {
-    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/50115036");
-    console.log("1111",url);
-    debugger
-    invokeParams('AddBaseMapLayer', {
-        "id": "BaseMapYaoGan",
-        "title": "BaseMapYaoGan",
-        "visible": true,
-        "opacity": 1,
-        "type": "tile",
-       url
-    })
+  let url = await returnProxyUrl(
+    "https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/50115036"
+  );
+  console.log("1111", url);
+  debugger;
+  invokeParams("AddBaseMapLayer", {
+    id: "BaseMapYaoGan",
+    title: "BaseMapYaoGan",
+    visible: true,
+    opacity: 1,
+    type: "tile",
+    url,
+  });
 }
 
 //关闭图层
 export function clearAllLayer() {
-    invokeParams('ClearMapLayers',{
-    })
+  invokeParams("ClearMapLayers", {});
 }
 
-
-export function AddSingleLayer(params){
-    debugger;
-    if(params.token){
-        params.url = "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.token;
+export function AddSingleLayer(params) {
+  debugger;
+  if (params.token) {
+    params.url =
+      "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.token;
+  }
+  let wkid = "0"; // 0 代表上海城建 1：代表3857
+  if (params.wkid) {
+    if (params.type == "动态地图" && params.wkid == "1") {
+      params.type = "dynamic";
     }
-    let wkid = "0"  // 0 代表上海城建 1：代表3857
-    if(params.wkid){
-        if(params.type == "动态地图" && params.wkid =="1"){
-            params.type = "dynamic"
-        }
-        if(params.type == "切片地图" && params.wkid =="1"){
-            params.type = "tile"
-        }
+    if (params.type == "切片地图" && params.wkid == "1") {
+      params.type = "tile";
     }
+  }
 
-    if(params.type=="scene"||params.type=='3DObject'){
-        invokeParams('AddSingleLayer', {
-            "id": params.id,
-            "title": params.title,
-            "visible": params.visible,
-            "opacity": params.opacity === undefined?1:params.opacity,
-            "url": params.url,
-            "type": "scene",
-            "mapID": params.mapID
-        })
-    }
-    else if(params.type=="bim"){
-        switch (params.title) {
-            case '朱家角车站':
-                invokeParams('AddSingleLayer',
-                    {
-                        "id": params.id,
-                        "title": params.title,
-                        "visible": params.visible,
-                        "opacity": params.opacity === undefined?1:params.opacity,
-                        "url": params.url,
-                        "elevationInfo": {   //下沉高度
-                            mode:"absolute-height",
-                            offset:-19.5
-                        },
-                        "type": "building",
-                        "mapID": params.mapID
-                    })
-                break;
-            default:
-                invokeParams('AddSingleLayer',
-                    {
-                        "id": params.id,
-                        "title": params.title,
-                        "visible": params.visible,
-                        "opacity": params.opacity === undefined?1:params.opacity,
-                        "url": params.url,
-                        "elevationInfo": {   //下沉高度
-                            mode:"absolute-height",
-                            offset:-19.5
-                        },
-                        "type": "building",
-                        "mapID": params.mapID
-                    })
-                break
-        }
+  if (params.type == "scene" || params.type == "3DObject") {
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      type: "scene",
+      mapID: params.mapID,
+    });
+  } else if (params.type == "bim") {
+    switch (params.title) {
+      case "朱家角车站":
+        invokeParams("AddSingleLayer", {
+          id: params.id,
+          title: params.title,
+          visible: params.visible,
+          opacity: params.opacity === undefined ? 1 : params.opacity,
+          url: params.url,
+          elevationInfo: {
+            //下沉高度
+            mode: "absolute-height",
+            offset: -19.5,
+          },
+          type: "building",
+          mapID: params.mapID,
+        });
+        break;
+      default:
+        invokeParams("AddSingleLayer", {
+          id: params.id,
+          title: params.title,
+          visible: params.visible,
+          opacity: params.opacity === undefined ? 1 : params.opacity,
+          url: params.url,
+          elevationInfo: {
+            //下沉高度
+            mode: "absolute-height",
+            offset: -19.5,
+          },
+          type: "building",
+          mapID: params.mapID,
+        });
+        break;
     }
-    else if(params.type=='mesh'){
-        invokeParams('AddSingleLayer',
-            {
-                "id": params.id,
-                "title": params.title,
-                "visible": params.visible,
-                "opacity": params.opacity === undefined?1:params.opacity,
-                "url": params.url,
-                //"renderer":locationRenderer,
-                "type": "mesh",
-                "mapID": params.mapID
-            })
-        return
-    }
-    else if(params.type=="dynamic"){
-        invokeParams('AddSingleLayer', {
-            "id": params.id,
-            "title": params.title,
-            "visible": params.visible,
-            "opacity": params.opacity === undefined?1:params.opacity,
-            "url": params.url,
-            // "sublayers": [
-            //     {
-            //         "id": 0
-            //     },{
-            //         "id": 1
-            //     }
-            // ],
-            "type": "dynamic",
-            "mapID": params.mapID
-        })
-    }
-    else if(params.type=="tile"){
-        invokeParams('AddSingleLayer', {
-            "id": params.id,
-            "title": params.title,
-            "visible": params.visible,
-            "opacity": params.opacity === undefined?1:params.opacity,
-            "url": params.url,
-            "type": "tile",
-            "mapID": params.mapID
-        })
-    }else if(params.type=="动态地图"){
-        invokeParams('AddSingleLayer', {
-            "id": params.id,
-            "title": params.title,
-            "visible": params.visible,
-            "opacity": params.opacity === undefined?1:params.opacity,
-            "url": params.url,
-            "type": "shc_map",
-            "mapID": params.mapID
-        })
-    }else if(params.type=="切片地图"){
-        let size = [256,256];
-        let origin = {
-            "x": -9080400.0,
-            "y": 10002300
-        };
-        invokeParams('AddSingleLayer',
-            {
-                "id": params.id,
-                "title": params.title,
-                "visible": params.visible,
-                "opacity": params.opacity === undefined?1:params.opacity,
-                "url": params.url,
-                "type": "shc_tile",
-                "mapID": params.mapID
-            })
-    }
-}
+  } else if (params.type == "mesh") {
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      //"renderer":locationRenderer,
+      type: "mesh",
+      mapID: params.mapID,
+    });
+    return;
+  } else if (params.type == "dynamic") {
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      // "sublayers": [
+      //     {
+      //         "id": 0
+      //     },{
+      //         "id": 1
+      //     }
+      // ],
+      type: "dynamic",
+      mapID: params.mapID,
+    });
+  } else if (params.type == "tile") {
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      type: "tile",
+      mapID: params.mapID,
+    });
+  } else if (params.type == "动态地图") {
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      type: "shc_map",
+      mapID: params.mapID,
+    });
+  } else if (params.type == "切片地图") {
+    let size = [256, 256];
+    let origin = {
+      x: -9080400.0,
+      y: 10002300,
+    };
+    invokeParams("AddSingleLayer", {
+      id: params.id,
+      title: params.title,
+      visible: params.visible,
+      opacity: params.opacity === undefined ? 1 : params.opacity,
+      url: params.url,
+      type: "shc_tile",
+      mapID: params.mapID,
+    });
+  }
+}
+
+//地图洒点
+export function addDataPoint(is_clear, data) {
+  invokeParams("AddDataPoint", {
+    is_clear: true,
+    position: data,
+    is_goto: true,
+  });
+}

src/views/IOTDataAnalysis/components/IOTLeft.vue

@@ -70,7 +70,7 @@
                   ? '#FFC85A'
                   : '',
               }"
-              >{{ item.numRatio + '%' }}</span
+              >{{ item.numRatio + "%" }}</span
             >
           </div>
         </div>
@@ -106,7 +106,7 @@ import {
   QueryListEquipment,
   QueryTrendsOnline,
 } from "../../../service/iotService";
-
+import { addDataPoint } from "@/unit/map/addLayer";
 //设备类型统计数据
 const equipmentData = ref([]);
 const equipmentColor = ref([
@@ -238,7 +238,6 @@ const deviceTypeArr = computed(() => {
 //设备类型选中
 const selectCurrentKey = (params) => {
   if (selectDeviceType.value.includes(params.monitorScene)) {
-    
     selectDeviceType.value = selectDeviceType.value.filter(
       (item) => item != params.monitorScene
     );
@@ -251,13 +250,105 @@ const selectCurrentKey = (params) => {
 
 //基本情况设备状态选择
 const deviceStatusSelect = (status) => {
-  if(deviceStatus.value == status){
-    deviceStatus.value = null
-    return
+  const data = [
+    {
+      mapx: -2465.155,
+      mapy: -4227.303,
+    },
+    {
+      mapx: -2457.302,
+      mapy: -4210.527,
+    },
+    {
+      mapx: -2483.733,
+      mapy: -4259.984,
+    },
+    {
+      mapx: -2450.596,
+      mapy: -4222.605,
+    },
+    {
+      mapx: -2478.293,
+      mapy: -4229.018,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+    {
+      mapx: -2482.258,
+      mapy: -4217.836,
+    },
+  ];
+  addDataPoint(true, data);
+  if (deviceStatus.value == status) {
+    deviceStatus.value = null;
+    return;
   }
   deviceStatus.value = status;
 };
 
+
 const init = () => {
   getBasicsInfo();
   getListEquipment();
@@ -437,5 +528,6 @@ onMounted(() => {
       }
     }
   }
+
 }
 </style>

src/views/IOTDataAnalysis/index.vue

@@ -1,37 +1,56 @@
 <template>
-<div class="iot-data-analysis">
-    <IOTHeader/>
-    <IOTLeft/>
-    <IOTRight/>
-    <IOTLIstDialog/>
-    <!-- <IOTToolDialog/> -->
-    <div class="gis-map" id="gisMap" ref="gisMapRef">
-        <Map/>
-    </div>
-</div>
+  <div class="iot-data-analysis">
+    <IOTHeader />
+    <IOTLeft> </IOTLeft>
+    <IOTRight />
+    <IOTLIstDialog v-show="isShowListDialog" />
+    <IOTBaseMapSwitch />
+    <Map />
+    <template v-if="mapStore.layerDetailShow">
+      <LayerDetailDialog :dia-attrs="{ modal: false }" />
+    </template>
+    <div class="list-controll" @click="changeShowListDialog"></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';
-import IOTToolDialog from './components/IOTToolDialog.vue';
-import Map from './map/Map.vue'
-const gisMapRef = ref(null)
+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";
+import Map from "./map/Map.vue";
+import { useMapStore } from "@/store/mapStore.js";
 
+import IOTBaseMapSwitch from "./map/IOTBaseMapSwitch.vue";
+import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
+const mapStore = useMapStore();
+const isShowListDialog = ref(false);
+const changeShowListDialog = () => {
+  isShowListDialog.value = !isShowListDialog.value;
+  console.log(isShowListDialog.value);
+};
 </script>
 
 <style scoped lang="scss">
-.iot-data-analysis{
-    width: 100vw;
-    height: 100vh;
-    font-size: 18px;
-    .gis-map{
-        width: 100%;
-        height: 100%;
-        background-color: #dddddd;
-    }
+.iot-data-analysis {
+  width: 100vw;
+  height: 100vh;
+  font-size: 18px;
+  .gis-map {
+    width: 100%;
+    height: 100%;
+    background-color: #dddddd;
+  }
+  .list-controll {
+    position: fixed;
+    left: 420px;
+    top: 80px;
+    width: 35px;
+    height: 35px;
+    background-image: url("@/assets/imgs/tckg.png");
+    background-size: 100% 100%;
+    z-index: 999;
+  }
 }
-</style>
+</style>

src/views/IOTDataAnalysis/map/IOTBaseMapSwitch.vue

@@ -0,0 +1,178 @@
+<template>
+  <div id="baseMapSwitch" @mouseleave="leave" @mouseenter="enter"  :class="[mapStore.right_board?'switch-right-active':'switch-right']">
+    <Transition name="fade" >
+      <div class="hide_part" v-show="show">
+        <div v-for="item in mapList" :key="item.id" >
+          <transition name="width">
+            <img class="title_img" v-if="!item.chosen" :src="imgUrl(item.name)" @click="changeBaseMap(item.id)">
+          </transition>
+        </div>
+      </div>
+    </Transition>
+    <div class="cur">
+      <div class="single-chosen" v-for="item in mapList" :key="item.id" >
+        <img class="title_img_next" v-if="item.chosen" :src="imgUrl(item.name)" @click="changeBaseMap(item.id)" alt="">
+        <div v-if="item.chosen" class="img-name">
+          <span>{{item.label}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useMapStore} from "@/store/mapStore.js";
+import {ref} from "vue";
+import {AddBaseMapLayer, AddYaoganMapLayer, AddZhenwuMapLayer} from "@/unit/map/addLayer.js";
+
+export default {
+  name: "BaseMapSwitch",
+  setup(){
+    const mapStore = useMapStore();
+    let show = ref(false);
+    let mapList = ref([
+      {
+        id:1,
+        label:"政务",
+        name:"zhenwu",
+        chosen:false
+      },
+      {
+        id:2,
+        label:"遥感",
+        name:"yaogan",
+        chosen:false
+      },
+      {
+        id:3,
+        label:"暗色",
+        name:"ditu",
+        chosen:true
+      },
+    ]);
+    function imgUrl(name){
+      return new URL(`../../../assets/imgs/${name}.png`, import.meta.url).href
+    }
+    function changeBaseMap(id) {
+      for (let i = 0; i < mapList.value.length; i++) {
+        if (id == mapList.value[i].id) {
+          if (mapList.value[i].chosen) {
+            return
+          } else {
+            switch (mapList.value[i].id) {
+              case 1:
+                AddZhenwuMapLayer();
+                break;
+              case 2:
+                AddYaoganMapLayer();
+                break;
+              case 3:
+                AddBaseMapLayer()
+                break;
+            }
+            mapList.value[i].chosen = true;
+          }
+        } else {
+          mapList.value[i].chosen = false;
+        }
+      }
+    }
+    function enter(){
+      show.value = true;
+    }
+    function leave(){
+      show.value = false;
+    }
+    return{
+      mapStore,
+      imgUrl,
+      changeBaseMap,
+      enter,
+      leave,
+      mapList,
+      show
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fade-enter,.fade-leave-to{
+  transform: translateX(100px);
+  .title_img{
+    width: 25px !important;
+  }
+}
+.fade-enter-active,.fade-leave-active{
+  transition: 0.5s all;
+}
+.width-enter,.width-leave-to{
+  width: 25px !important;
+}
+.width-enter-active,.width-leave-active{
+  transition: 0.5s all;
+}
+#baseMapSwitch{
+  background-color: rgba(0, 22, 52, 0.75);
+  position: absolute;
+  z-index: 2;
+  right: 460px;
+  bottom: 80px;
+  width: 92px;
+  height: 92px;
+  cursor: pointer;
+  .cur{
+    border: 1px solid #4CD2FF;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+  }
+  .single-chosen{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .img-name{
+      position: absolute;
+      width: 100%;
+      height: 30px;
+      bottom: 0px;
+      left:0px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0,71,141,0.5);
+      span{
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  .hide_part{
+    display: flex;
+    position: absolute;
+    right: 100px;
+
+  }
+  .title_img{
+    transition: 0.5s all;
+    width: 90px;
+    height: 90px;
+  }
+  .title_img_next{
+    width: 90px;
+    height: 90px;
+  }
+}
+.switch-right-active{
+  transition-property: transform;
+  transition-duration:1s;
+}
+.switch-right{
+  transition-property: transform;
+  transition-duration:1s;
+  transform: translateX(480px);
+}
+</style>

src/views/IOTDataAnalysis/map/Map.vue

@@ -36,6 +36,7 @@
         MapClickByType('show');
         SetBackground();
         bridge.addEventListener(arg => {
+          debugger
           switch (arg.action) {
             case "MapExtentChanged":
               let scale = arg.data.scale;