工具栏逻辑调整

src/components/AreaLayerSwitch/index.vue

@@ -14,13 +14,13 @@
             <div>{{ item.name }}</div>
           </div>
         </div>
-        <div class="region_tuceng"></div>
+        <div  :class="[commonStore.activeTools['图例'] ? 'region_tuceng_active' : 'region_tuceng']" v-if="commonStore.activeIndex===1"  @click="handleLegendOpen"></div>
 
         <div class="region_bg"></div>
       </div>
 
       <!-- 全球 -->
-      <div class="global"  @click="btnClick('全球')">
+      <div class="global"  @click="btnClick('全球')" >
         <div class="global_text" :class="{global_text_active: activeIndex === '全球'}">全球</div>
       </div>
     </div>
@@ -30,7 +30,12 @@
 import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 import {changeStreet, initDistrict} from "@/utils/map/baseMethod.js";
 import {useEventInteractionStore} from "@/store/eventInteraction.js";
-import {ClearMap} from "@/utils/map/AddLayer.js";
+import { ClearMap } from "@/utils/map/AddLayer.js";
+import { useCommonStore } from "@/store/common.js";
+let commonStore = useCommonStore();
+import { useRightPanelStore } from "@/store/rightPanel";
+const rightPanelStore = useRightPanelStore();
+
 const emit = defineEmits(['btnClick'])
 const activeIndex = ref("上海市")
 
@@ -151,6 +156,23 @@ function btnDblClick(index, item) {
   eventInteractionStore.selectDistrict = item.name
 }
 
+const legendOpen=ref(false)
+
+function handleLegendOpen () {
+  commonStore.activeTools['图例'] = !commonStore.activeTools['图例']
+  // legendOpen.value = !legendOpen.value
+  // rightPanelStore.legendVisible = !rightPanelStore.legendVisible
+  // if (rightPanelStore.legendVisible) {
+  //   rightPanelStore.legendVisible =false
+  // } else {
+  //   rightPanelStore.legendVisible =true
+  // }
+}
+
+onMounted(() => {
+ legendOpen.value=  rightPanelStore.legendVisible
+})
+
 watch(
     () => eventInteractionStore.selectDistrict,
     (val) => {
@@ -204,7 +226,8 @@ watch(
   height: 97px;
   margin-bottom: 30px;
   display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
+  justify-content: center;
   position: relative;
   // background-color: pink;
   .region_shi {
@@ -317,4 +340,11 @@ watch(
 .global_text_active{
  color: rgb(233, 233, 52) !important;
 }
+
+.region_tuceng_active{
+    width: 98px;
+    height: 100%;
+    background: url(../../assets/img/图层高亮.png) no-repeat;
+    background-size: 100% 100%;
+}
 </style>

src/store/common.js

@@ -5,6 +5,11 @@ export const useCommonStore = defineStore('common', {
   state: () => {
     return {
       activeIndex: 0, // 存储当前高亮按钮的索引
+      activeTools: {
+        '风险列表': true,
+        '图例': true,
+        '色阶图': true,
+      }, //存储当前激活的工具
     }
   },
   actions: {

src/store/dialog.js

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia'
 export const useDialogStore = defineStore('dialog', {
   state: () => {
     return {
+      publicHealthRiskDialogOpen: true, //公共卫生风险弹窗
+      
       riskPersonnelDialogOpen: false, // 存储风险人员弹窗开关
       riskLocationDialogOpen: false,  // 存储风险场所弹窗开关
       riskActivityDialogOpen: false,  // 存储活动轨迹弹窗开关
@@ -37,6 +39,15 @@ export const useDialogStore = defineStore('dialog', {
     }
   },
   actions: {
+    // 公共卫生风险
+    setPublicHealthRiskDialogOpen (open) {
+      this.publicHealthRiskDialogOpen = open
+    },
+
+    getPublicHealthRiskDialogOpen () {
+      return this.publicHealthRiskDialogOpen
+    },
+
     // 风险人员
     setRiskPersonnelDialogOpen (open) {
       this.riskPersonnelDialogOpen = open

src/store/rightPanel.js

@@ -21,7 +21,10 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
   const warningVisible = ref(true);
 
   // 视频通话窗口
-  const videoCallVisible =ref(false)
+  const videoCallVisible = ref(false)
+  
+  // 图例开关
+  const legendVisible = ref(true)
 
   //关闭右侧弹窗
   const handleCloseAllVisible = () => {
@@ -54,6 +57,7 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
     districtString,
     handleCloseAllVisible,
     timerSwitchStatus,
-    videoCallVisible
+    videoCallVisible,
+    legendVisible
   };
 });

src/utils/map/legendMethod.js

@@ -0,0 +1,17 @@
+import {
+  addMapLayer,
+  addMyGraph,
+  clearMap,
+  ClearMap,
+  emptyAllLayers,
+  layerControlNew,
+  LayerQuery,
+  removeMapLayers,
+  setCamera,
+  addMyGraphByData_TJ,
+  addPointMap, layerShade, addPointSearch, layerControl, setHeatmap, SetExtent, addEchartsLayer,
+} from '@/utils/map/AddLayer.js';
+import { analogData, districtArr, getGroupLayers, getLayerInfo } from '@/utils/mapService/local-data.js';
+import { useRoute } from 'vue-router';
+import { useEventInteractionStore } from "@/store/eventInteraction.js";
+import { useCommonStore } from "@/store/common.js";

src/utils/map/modulesMethod.js

@@ -0,0 +1,17 @@
+import {
+  addMapLayer,
+  addMyGraph,
+  clearMap,
+  ClearMap,
+  emptyAllLayers,
+  layerControlNew,
+  LayerQuery,
+  removeMapLayers,
+  setCamera,
+  addMyGraphByData_TJ,
+  addPointMap, layerShade, addPointSearch, layerControl, setHeatmap, SetExtent, addEchartsLayer,
+} from '@/utils/map/AddLayer.js';
+import { analogData, districtArr, getGroupLayers, getLayerInfo } from '@/utils/mapService/local-data.js';
+import { useRoute } from 'vue-router';
+import { useEventInteractionStore } from "@/store/eventInteraction.js";
+import { useCommonStore } from "@/store/common.js";

src/views/left/index.vue

@@ -20,7 +20,7 @@
       <BigRiskTable v-if="riskTableStore.bigRiskTableShow" @changeRiskView="changeRiskView"></BigRiskTable>
 
       <!-- 弹窗 -->
-      <PublicHealthRisksDialog v-if="riskTableStore.initShow"></PublicHealthRisksDialog>
+      <PublicHealthRisksDialog v-if="commonStore.activeTools['风险列表']"></PublicHealthRisksDialog>
       <!-- <ProgressInDisposalDialog v-if="disposalShow"></ProgressInDisposalDialog> -->
     </div>
   </div>
@@ -39,6 +39,8 @@ let commonStore = useCommonStore()
 
 import { useRiskTableStore } from '@/store/riskTable.js'
 let riskTableStore = useRiskTableStore()
+import { useDialogStore } from '@/store/dialog'
+let dialogStore = useDialogStore()
 
 let tabActiveIndex = ref(0) // 存储当前高亮按钮的索引
 
@@ -54,6 +56,8 @@ watch(
       riskTableStore.setInitShow(false)
       riskTableStore.setBigRiskTableShow(false)
       riskTableStore.setDisposalShow(true)
+      // dialogStore.setPublicHealthRiskDialogOpen(false)
+      commonStore.activeTools['风险列表']=false
     }
   },
   {

src/views/left/modules/components/dialog/MapTools copy.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="tools_container">
+    <div v-for="item in tools" :key="item.name" @click="selectTool(item.name)" :class="{ active: activeTool === item.name }" class="tools_item">
+      <img :src="getToolImg(item.name)" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import {setDistrictResult} from "@/utils/map/AddLayer.js";
+import {useEventInteractionStore} from "@/store/eventInteraction.js";
+import {handleJtlxPoints} from "@/utils/map/baseMethod.js";
+const eventInteractionStore = useEventInteractionStore()
+
+// 公共路径
+const basePath = '../../../../../assets/img/'
+
+// 工具配置数据
+const tools = ref([
+  {
+    name: '风险列表',
+    img: '风险列表1.png',
+    activeImg: '风险列表2.png'
+  },
+  {
+    name: '图例',
+    img: '图例1.png',
+    activeImg: '图例2.png'
+  },
+  {
+    name: '色阶图',
+    img: '色阶图1.png',
+    activeImg: '色阶图2.png'
+  }
+])
+
+// 当前激活的工具
+const activeTool = ref('')
+
+// 预处理图片路径
+const imgMap = ref({})
+
+// 选择工具
+const selectTool = name => {
+  if(activeTool.value === name){
+    activeTool.value = ""
+  }else{
+    activeTool.value = name
+  }
+
+  if(name === "色阶图"){
+    let data = [
+      {
+        "name": "黄浦区",
+        "count": 48
+      },{
+        "name": "宝山区",
+        "count": 11
+      },{
+        "name": "崇明区",
+        "count": 5
+      },{
+        "name": "奉贤区",
+        "count": 8
+      },{
+        "name": "虹口区",
+        "count": 10
+      },{
+        "name": "嘉定区",
+        "count": 35
+      },{
+        "name": "金山区",
+        "count": 40
+      },{
+        "name": "静安区",
+        "count": 1
+      },{
+        "name": "闵行区",
+        "count": 46
+      },{
+        "name": "浦东新区",
+        "count": 159
+      },{
+        "name": "普陀区",
+        "count": 21
+      },{
+        "name": "青浦区",
+        "count": 34
+      },{
+        "name": "松江区",
+        "count": 39
+      },{
+        "name": "徐汇区",
+        "count": 77
+      },{
+        "name": "杨浦区",
+        "count": 45
+      },{
+        "name": "长宁区",
+        "count": 36
+      }]
+    setDistrictResult(activeTool.value === "色阶图",  data)
+    eventInteractionStore.isDangerStatistic = activeTool.value === "色阶图"
+
+    handleJtlxPoints(activeTool.value !== "色阶图")
+  }
+}
+
+// 预加载图片路径
+onMounted(() => {
+  tools.value.forEach(item => {
+    imgMap.value[item.name] = {
+      default: new URL(`${basePath}${item.img}`, import.meta.url).href,
+      active: new URL(`${basePath}${item.activeImg}`, import.meta.url).href
+    }
+  })
+})
+
+// 获取工具图片
+const getToolImg = name => {
+  return activeTool.value === name ? imgMap.value[name]?.active : imgMap.value[name]?.default
+}
+</script>
+
+<style lang="scss" scoped>
+.tools_container {
+  width: 51px;
+  height: 191px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 70px;
+  right: -61px;
+}
+.tools_item {
+  width: 51px;
+  height: 51px;
+  cursor: pointer;
+}
+</style>

src/views/left/modules/components/dialog/MapTools.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="tools_container">
-    <div v-for="item in tools" :key="item.name" @click="selectTool(item.name)" :class="{ active: activeTool === item.name }" class="tools_item">
+    <div v-for="item in tools" :key="item.name" @click="toggleTool(item.name)"
+      :class="{ active: commonStore.activeTools[item.name] }" class="tools_item">
       <img :src="getToolImg(item.name)" alt="" />
     </div>
   </div>
@@ -8,49 +9,54 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import {setDistrictResult} from "@/utils/map/AddLayer.js";
-import {useEventInteractionStore} from "@/store/eventInteraction.js";
-import {handleJtlxPoints} from "@/utils/map/baseMethod.js";
+import { setDistrictResult } from "@/utils/map/AddLayer.js";
+import { useEventInteractionStore } from "@/store/eventInteraction.js";
+import { handleJtlxPoints } from "@/utils/map/baseMethod.js";
 const eventInteractionStore = useEventInteractionStore()
+import { useDialogStore } from '@/store/dialog'
+let dialogStore = useDialogStore()
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
+import { useRightPanelStore } from "@/store/rightPanel";
+const rightPanelStore = useRightPanelStore();
 
 // 公共路径
 const basePath = '../../../../../assets/img/'
 
 // 工具配置数据
 const tools = ref([
-  {
-    name: '风险列表',
-    img: '风险列表1.png',
-    activeImg: '风险列表2.png'
-  },
-  {
-    name: '图例',
-    img: '图例1.png',
-    activeImg: '图例2.png'
-  },
-  {
-    name: '色阶图',
-    img: '色阶图1.png',
-    activeImg: '色阶图2.png'
-  }
+  { name: '风险列表', img: '风险列表1.png', activeImg: '风险列表2.png' },
+  { name: '图例', img: '图例1.png', activeImg: '图例2.png' },
+  { name: '色阶图', img: '色阶图1.png', activeImg: '色阶图2.png' }
 ])
 
-// 当前激活的工具
-const activeTool = ref('')
-
 // 预处理图片路径
 const imgMap = ref({})
 
-// 选择工具
-const selectTool = name => {
-  if(activeTool.value === name){
-    activeTool.value = ""
-  }else{
-    activeTool.value = name
+// 切换工具选中状态
+const toggleTool = name => {
+  if (commonStore.activeTools[name]) {
+    handleToolClose(name) // 关闭操作
+    commonStore.activeTools[name] = false
+  } else {
+    commonStore.activeTools[name] = true
+    handleToolAction(name) // 激活操作
   }
+}
 
-  if(name === "色阶图"){
-    let data = [
+// 工具激活时执行的操作
+const handleToolAction = name => {
+  console.log(`${name} 已激活，执行对应操作`)
+  if (name === '风险列表') {
+    console.log('显示风险列表...')
+    // dialogStore.setPublicHealthRiskDialogOpen(true)
+  } else if (name === '图例') {
+    console.log('展示图例...')
+    rightPanelStore.legendVisible = true
+    // handleCase()
+  } else if (name === '色阶图') {
+    console.log('加载色阶图数据...')
+      let data = [
       {
         "name": "黄浦区",
         "count": 48
@@ -100,14 +106,30 @@ const selectTool = name => {
         "name": "长宁区",
         "count": 36
       }]
-    setDistrictResult(activeTool.value === "色阶图",  data)
-    eventInteractionStore.isDangerStatistic = activeTool.value === "色阶图"
+      commonStore.activeTools[name] 
+     setDistrictResult(commonStore.activeTools[name],  data)
+     eventInteractionStore.isDangerStatistic = commonStore.activeTools[name]
 
-    handleJtlxPoints(activeTool.value !== "色阶图")
   }
 }
 
-// 预加载图片路径
+// 工具取消高亮时执行的操作
+const handleToolClose = name => {
+  console.log(`${name} 取消激活，执行关闭操作`)
+  if (name === '风险列表') {
+    console.log('隐藏风险列表...')
+    // dialogStore.setPublicHealthRiskDialogOpen(false)
+  } else if (name === '图例') {
+    console.log('隐藏图例...')
+    rightPanelStore.legendVisible=false
+  } else if (name === '色阶图') {
+    console.log('清除色阶图数据...')
+    // setDistrictResult(commonStore.activeTools[name])
+    // handleJtlxPoints(!commonStore.activeTools[name])
+  }
+}
+
+// 预加载图片路径并初始化第一个工具
 onMounted(() => {
   tools.value.forEach(item => {
     imgMap.value[item.name] = {
@@ -115,11 +137,23 @@ onMounted(() => {
       active: new URL(`${basePath}${item.activeImg}`, import.meta.url).href
     }
   })
+
+  // 默认高亮第一个工具
+  if (tools.value.length > 0) {
+    // const firstTool = tools.value[0].name
+    // const firstTool2 = tools.value[2].name
+    // const firstTool3 = tools.value[1].name
+    // commonStore.activeTools[firstTool] = true
+    // commonStore.activeTools[firstTool2] = true
+    // commonStore.activeTools[firstTool3] = true
+    // activeTools[firstTool3] = true
+    // handleToolAction(firstTool) // 确保默认工具生效
+  }
 })
 
 // 获取工具图片
 const getToolImg = name => {
-  return activeTool.value === name ? imgMap.value[name]?.active : imgMap.value[name]?.default
+  return commonStore.activeTools[name] ? imgMap.value[name]?.active : imgMap.value[name]?.default
 }
 </script>
 
@@ -136,6 +170,7 @@ const getToolImg = name => {
   top: 70px;
   right: -61px;
 }
+
 .tools_item {
   width: 51px;
   height: 51px;

src/views/right/components/reportHandle/comp/IntelligentAnalysis.vue

@@ -159,9 +159,11 @@ const showContent = ref(false);
       position: absolute;
       top: 0px;
       right: 0;
-      width: 75px;
-      height: 60px;
+      width: 35px;
+      height: 30px;
       cursor: pointer;
+       background-image: url("../../../../../assets/img/cha-icon.png");
+      background-size: 100% 100%;
     }
   }
   .ai-public-content {

src/views/right/index.vue

@@ -4,6 +4,7 @@
     <handleProcess v-if="commonStore.activeIndex == 1"></handleProcess>
     <warningDialog v-if="rightPanelStore.warningVisible" />
     <RightLegend
+      v-if="commonStore.activeTools['图例']"
       class="right-legend"
       :class="{
         'right-legend-max': rightPanelStore.emergencyVisible,
@@ -17,13 +18,12 @@ import { ref, watch, reactive, toRefs, onBeforeMount, computed } from "vue";
 import reportHandle from "./components/reportHandle/index.vue";
 import handleProcess from "./components/handleProcess/index.vue";
 import warningDialog from "./components/warningDialog.vue";
-import { useRightPanelStore } from "../../store/rightPanel";
-import { useCommonStore } from "@/store/common.js";
 import RightLegend from "./components/common/RightLegend.vue";
 import Timer from "../../components/Timer/Timer.vue";
-
+import { useCommonStore } from "@/store/common.js";
 let commonStore = useCommonStore();
 
+import { useRightPanelStore } from "../../store/rightPanel";
 const rightPanelStore = useRightPanelStore();
 //activeIndex: 0表示报告处置 1处置进展
 watch(