发现报告-病例定位、交通流向

src/components/Map.vue

@@ -72,7 +72,7 @@ export default {
   left: 0;
   height: 100%;
   width: 100%;
-  background-color: #235f61;
+  //background-color: #0b2245;
   z-index: 0;
 }
 

src/store/common.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import {useRiskTableStore} from "@/store/riskTable.js";
 
 export const useCommonStore = defineStore('common', {
   state: () => {
@@ -16,8 +17,8 @@ export const useCommonStore = defineStore('common', {
     }
   },
   // 使用插件的配置选项
-  persist: {
-    key: 'common-store',// 自定义存储的键名
-    storage: localStorage // 可以改为sessionStorage
-  }
+  // persist: {
+  //   key: 'common-store',// 自定义存储的键名
+  //   storage: localStorage // 可以改为sessionStorage
+  // }
 })

src/store/eventInteraction.js

@@ -1,7 +1,13 @@
 import { defineStore } from "pinia";
 import { ref, watch } from "vue";
 import { useCommonStore } from "./common";
-import {changeStreet, handleDangerStatistic, initDistrict} from "@/utils/map/baseMethod.js";
+import {
+  changeStreet,
+  handleCaseRelPoints,
+  handleDangerStatistic,
+  handleJtlxPoints,
+  initDistrict
+} from "@/utils/map/baseMethod.js";
 import {addMyGraphByData_TJ, changeMapType, createMap} from "@/utils/map/AddLayer.js";
 
 export const useEventInteractionStore = defineStore("eventInteractionStore", () => {
@@ -19,6 +25,9 @@ export const useEventInteractionStore = defineStore("eventInteractionStore", ()
   //是否打开风险统计
   const isDangerStatistic = ref(true);
 
+  //是否打开病例撒点
+  const isCaseShow = ref(false);
+
 
   watch(
     () => commonStore.activeIndex,
@@ -49,15 +58,30 @@ export const useEventInteractionStore = defineStore("eventInteractionStore", ()
     () => currentMapScale.value,
     (newValue,oldValue) => {
       // console.log(newValue,oldValue);
-      if(isDangerStatistic.value){
-        if(oldValue > 90000 && newValue <= 90000){
-          handleDangerStatistic(true, true)
+      if(commonStore.activeIndex === 0){
+        if(isDangerStatistic.value){
+          if(oldValue > 90000 && newValue <= 90000){
+            handleDangerStatistic(true, true)
+          }
+
+          if(oldValue < 90000 && newValue >= 90000){
+            handleDangerStatistic(false, true)
+          }
+        }
+      }
+
+      if(isCaseShow.value){
+        if(oldValue > 140000 && newValue <= 140000){
+          handleCaseRelPoints(true)
+          handleJtlxPoints(false)
         }
 
-        if(oldValue < 90000 && newValue >= 90000){
-          handleDangerStatistic(false, true)
+        if(oldValue < 140000 && newValue >= 140000){
+          handleCaseRelPoints(false)
+          handleJtlxPoints(true)
         }
       }
+
     }
   )
 
@@ -67,14 +91,15 @@ export const useEventInteractionStore = defineStore("eventInteractionStore", ()
     () => selectDistrict.value,
     (val) => {
       console.log(val);
-      if(val){
-        isDangerStatistic.value = false
-        changeStreet(val, true, true)
-      }else {
-        isDangerStatistic.value = true
-        initDistrict()
+      if(commonStore.activeIndex === 0){
+        if(val){
+          isDangerStatistic.value = false
+          changeStreet(val, true, true)
+        }else {
+          isDangerStatistic.value = true
+          initDistrict()
+        }
       }
-
     }
   )
 
@@ -83,5 +108,6 @@ export const useEventInteractionStore = defineStore("eventInteractionStore", ()
     selectDistrict,
     currentMapScale,
     isDangerStatistic,
+    isCaseShow
   };
 });

src/store/riskTable.js

@@ -55,8 +55,8 @@ export const useRiskTableStore = defineStore('riskTable', {
 
   },
   // 使用插件的配置选项
-  persist: {
-    key: 'risk-table-store',// 自定义存储的键名
-    storage: localStorage // 可以改为sessionStorage
-  }
+  // persist: {
+  //   key: 'risk-table-store',// 自定义存储的键名
+  //   storage: localStorage // 可以改为sessionStorage
+  // }
 })

src/utils/map/baseMethod.js

@@ -261,7 +261,7 @@ export function addGenerateWhere(item) {
   return where;
 }
 
-//人口公共设施企业点位图
+//撒点通用方法
 export function addMultiImagePoints(layerID, params, imgurl, size = '80px') {
   if (params?.data) {
     params.data = params.data.map((item) => {
@@ -292,14 +292,11 @@ export function addSingleImagePoint(layerID, params, size = '50px') {
   addMyGraph({
     is_clear: false,
     is_goto: false,
-    type: 'points',
-    data: [
-      {
-        ...params,
-        mapz: 3,
-      },
-    ],
-    attributes: null,
+    type: 'point',
+    data: [params.mapx, params.mapy, 3],
+    attributes: {
+      ...params
+    },
     symbol: {
       type: 'picture-marker',
       url: params.imgurl || '',
@@ -603,6 +600,7 @@ export function viewComplete() {
   }
 }
 
+//定位区后，所属区内各分类撒点
 export function handleRiskPoints(bol,district) {
   if(bol){
     removeMapLayers("jkzx-points")
@@ -691,6 +689,7 @@ export function handleRiskPoints(bol,district) {
   }
 }
 
+//全国-病例撒点
 export function handleChinaCasePoint(bol) {
   if(bol){
     removeMapLayers("china-case-point")
@@ -713,3 +712,318 @@ export function handleChinaCasePoint(bol) {
   }
 }
 
+
+//处置进展-病例撒点
+export function handleCasePoint(bol) {
+  const eventInteractionStore = useEventInteractionStore();
+  eventInteractionStore.isCaseShow = bol
+  if(bol){
+    removeMapLayers("case-point")
+    addSingleImagePoint(
+      'case-point',
+      {
+        attributes: {
+          ...analogData["病例_发病就诊过程"].features[0].properties,
+        },
+        mapx: -11391.153275823075,
+        mapy: -8666.594500441925,
+        is_goto: true,
+        // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+        imgurl: "images/sadian/病例.png"
+      },
+      "120px"
+    );
+  }else {
+    removeMapLayers("case-point")
+  }
+}
+
+
+//处置进展-病例相关撒点
+export function handleCaseRelPoints(bol) {
+  if(bol){
+    removeMapLayers("case-rel-point")
+
+    //处置单位
+    addSingleImagePoint(
+      'case-rel-point',
+      {
+        attributes: {
+          "单位" : "上海市疾病预防控制中心",
+          "地址" : "闵行区申虹路1399号",
+          "bdlng" : 121.320368,
+          "bdlat" : 31.224148,
+          "shanghai_x" : -15027.741936,
+          "shanghai_y" : -1729.709243
+        },
+        mapx: -15027.741936,
+        mapy: -1729.709243,
+        // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+        imgurl: "images/sadian/处置单位.png"
+      },
+      "80px"
+    );
+    //配合单位
+    addSingleImagePoint(
+      'case-rel-point',
+      {
+        attributes: {
+          "单位" : "上海市疾病预防控制中心",
+          "地址" : "中山西路1380号",
+          "bdlng" : 121.424228,
+          "bdlat" : 31.199643,
+          "shanghai_x" : -5148.250453,
+          "shanghai_y" : -4444.028907
+        },
+        mapx: -5148.250453,
+        mapy: -4444.028907,
+        // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+        imgurl: "images/sadian/配合单位.png"
+      },
+      "80px"
+    );
+    //户籍地
+    addSingleImagePoint(
+      'case-rel-point',
+      {
+        mapx: -10197.242169896594,
+        mapy: -8764.560469809805,
+        // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+        imgurl: "images/sadian/病例户籍地.png"
+      },
+      "80px"
+    );
+    //居住地
+    addSingleImagePoint(
+      'case-rel-point',
+      {
+        mapx: -10197.242169896594,
+        mapy: -8764.560469809805,
+        // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+        imgurl: "images/sadian/病例居住地.png"
+      },
+      "80px"
+    );
+  }else {
+    removeMapLayers("case-rel-point")
+  }
+  handleYjryPoints(bol)
+  handleYjclPoints(bol)
+}
+
+//应急人员
+export function handleYjryPoints(bol){
+  if(bol){
+    removeMapLayers("yjry-points")
+    addMultiImagePoints(
+      'yjry-points',
+      {
+        data: analogData["人员实时gps位置"]
+          .filter((el) => el.x !== null && el.y !== null).slice(0, 20)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item,
+              },
+              mapx: item.x,
+              mapy: item.y,
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/应急人员-备班.png",
+    );
+  }else {
+    removeMapLayers("yjry-points")
+  }
+}
+
+//应急车辆
+export function handleYjclPoints(bol){
+  if(bol){
+    removeMapLayers("yjcl-points")
+    addMultiImagePoints(
+      'yjcl-points',
+      {
+        data: analogData["人员实时gps位置"]
+          .filter((el) => el.x !== null && el.y !== null).slice(-20)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item,
+              },
+              mapx: item.x,
+              mapy: item.y,
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/应急车辆-值班.png",
+    );
+  }else {
+    removeMapLayers("yjcl-points")
+  }
+}
+
+//交通流向
+export function handleJtlxPoints(bol){
+  if(bol){
+    removeMapLayers("jtlx-points")
+
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["环线"].features
+          .filter((el) => el.geometry !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              rings: item.geometry.coordinates,
+
+            };
+          }),
+        type: "polygons",
+        symbol: {
+          type: 'simple-fill',
+          color: [239, 132, 9, 0],
+          outline: {
+            color: [239, 132, 9, 1],
+            width: 1,
+          },
+        },
+      },
+    );
+    // return
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["疾控中心"].features
+          .filter((el) => el.properties.shanghai_x !== null && el.properties.shanghai_y !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.properties.shanghai_x,
+              mapy: item.properties.shanghai_y,
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/red.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["渡口"].features
+          .filter((el) => el.properties.POINT_X !== null && el.properties.POINT_Y !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.properties.POINT_X,
+              mapy: item.properties.POINT_Y,
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/码头.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["海关"].features
+          .filter((el) => el.properties.shanghai_x !== null && el.properties.shanghai_y !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.properties.shanghai_x,
+              mapy: item.properties.shanghai_y,
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/海关.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["火车站"].features
+          .filter((el) => el.geometry !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.geometry.coordinates[0],
+              mapy: item.geometry.coordinates[1],
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/海关.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["机场"].features
+          .filter((el) => el.geometry !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.geometry.coordinates[0],
+              mapy: item.geometry.coordinates[1],
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/海关.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["汽车站"].features
+          .filter((el) => el.geometry !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.geometry.coordinates[0],
+              mapy: item.geometry.coordinates[1],
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/物流中心.png",
+    );
+    addMultiImagePoints(
+      'jtlx-points',
+      {
+        data: analogData["医疗检测机构"].features
+          .filter((el) => el.geometry !== null)
+          .map((item) => {
+            return {
+              attributes: {
+                ...item.properties,
+              },
+              mapx: item.geometry.coordinates[0],
+              mapy: item.geometry.coordinates[1],
+            };
+          }),
+      },
+      // new URL(`@/assets/img/pinpoint(1).png`, import.meta.url).href,
+      "images/sadian/实验室.png",
+    );
+  }else {
+    removeMapLayers("jtlx-points")
+  }
+}
+

src/views/index.vue

@@ -69,8 +69,11 @@ import {
   onUnmounted,
   watch,
 } from "vue";
+import {useRiskTableStore} from "@/store/riskTable.js";
+import {initDistrict} from "@/utils/map/baseMethod.js";
 let userStore = useUserStore();
 let commonStore = useCommonStore();
+let riskTableStore = useRiskTableStore();
 
 console.log(userStore, "useUserStore");
 let { name, age } = storeToRefs(userStore);
@@ -113,6 +116,10 @@ function setActive(index, item) {
   // 切换高亮按钮，点击时高亮切换
   activeIndex.value = index;
   commonStore.setActiveIndex(index);
+  riskTableStore.setCurrentBackground(1)
+  if(index === 0){
+    initDistrict()
+  }
 }
 </script>
 <style lang="scss" scoped>

src/views/left/comp/dispose/RiskProfile.vue

@@ -198,7 +198,7 @@ import { getRiskTimeEchartsOption, getRiskAreaEchartsOption } from './echarts/ec
 import AiPublicRiskDialog from './dialog/AiPublicRiskDialog'
 import HeaderBoxContent from './common/HeaderBoxContent'
 import * as echarts from 'echarts'
-import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { ref, watch, computed, reactive, toRefs, onBeforeUnmount, onMounted } from 'vue'
 import TowLevelTitle from '@/components/TowLevelTitle'
 import DetectionResultDialog from './dialog/DetectionResultDialog'
 
@@ -206,6 +206,7 @@ import { useDialogStore } from '@/store/dialog'
 let dialogStore = useDialogStore()
 
 import { useRightPanelStore } from "@/store/rightPanel";
+import {handleCasePoint, handleCaseRelPoints, handleJtlxPoints} from "@/utils/map/baseMethod.js";
 const rightPanelStore = useRightPanelStore();
 
 const headerObj = ref({
@@ -310,10 +311,23 @@ function openTestResDialogHandle () {
   dialogStore.setRiskTestResDialogOpen(true)
 }
 
+const initCasePoints = () => {
+  handleCasePoint(true)
+  handleCaseRelPoints(true)
+}
+
 // 在组件挂载后初始化 ECharts
 onMounted(() => {
   initTimeChart()
   initAreaChart()
+
+  initCasePoints()
+})
+
+onBeforeUnmount(() => {
+  handleCasePoint(false)
+  handleCaseRelPoints(false)
+  handleJtlxPoints(false)
 })
 </script>
 <style lang="scss" scoped>