按钮禁用逻辑

src/components/AreaLayerSwitch/index.vue

@@ -2,52 +2,82 @@
   <div class="area_layer_switch_container">
     <div class="area_layer_switch_content">
       <!-- 全国 -->
-      <div class="national"  @click="btnClick('全国')">
-        <div class="national_text" :class="{national_text_active: activeIndex === '全国'}">全国</div>
+      <div class="national" @click="btnClick('全国')">
+        <div class="national_text" :class="{ national_text_active: commonStore.areaLayerSwitchActive === '全国' }">全国</div>
       </div>
 
       <!-- 片区 -->
       <div class="region">
-        <div class="region_shi" :class="{ region_shi_active: activeIndex === '上海市' }" @click="btnClick('上海市')"><div>上海市</div></div>
-        <div class="region_pianqu">
-          <div class="region_pianqu_btn" :class="{ region_pianqu_btn_active: activeIndex === item.name }" v-for="(item, index) in bottons" :key="item.name" @click="btnClick(index, item)" @dblclick="btnDblClick(index, item)" >
-            <div>{{ item.name }}</div>
+        <div class="region_shi" :class="{ region_shi_active: commonStore.areaLayerSwitchActive === '上海市' }" @click="btnClick('上海市')">
+          <div>上海市</div>
+        </div>
+        <div class="region_pianqu" >
+          <div
+            class="region_pianqu_btn"
+            :class="[{ region_pianqu_btn_active: commonStore.areaLayerSwitchActive === item.name }, { region_pianqu_btn_disabled: isGlobalOrNational }]"
+            v-for="(item, index) in bottons"
+            :key="item.name"
+            @click="!isGlobalOrNational && btnClick(index, item)"
+            @dblclick="!isGlobalOrNational && btnDblClick(index, item)"
+          >
+           <template v-if="isGlobalOrNational" :key="item.name">
+              <el-tooltip  content="请切换至上海市后再选择区域" placement="top" effect="customized" :key="item.name">
+              <div >{{ item.name }}</div>
+            </el-tooltip>
+         </template>
+         
+            <div v-else>{{ item.name }}</div>
           </div>
         </div>
-        <div  :class="[commonStore.activeTools['图例'] ? 'region_tuceng_active' : 'region_tuceng']" v-if="commonStore.activeIndex===1"  @click="handleLegendOpen"></div>
+        <div :class="[legendOpen ? '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_text" :class="{global_text_active: activeIndex === '全球'}">全球</div>
+      <div class="global" @click="btnClick('全球')">
+        <div class="global_text" :class="{ global_text_active: commonStore.areaLayerSwitchActive === '全球' }">全球</div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-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 { useCommonStore } from "@/store/common.js";
-let commonStore = useCommonStore();
-import { useRightPanelStore } from "@/store/rightPanel";
-const rightPanelStore = useRightPanelStore();
+import { ref, watch,nextTick, 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 { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
+import { useRightPanelStore } from '@/store/rightPanel'
+const rightPanelStore = useRightPanelStore()
 
 const emit = defineEmits(['btnClick'])
-const activeIndex = ref("上海市")
+// const activeIndex = ref('上海市')
+// const isGlobalOrNational = computed(() => ['全国', '全球'].includes(commonStore.areaLayerSwitchActive))
+const isGlobalOrNational = ref(false)
+
+watch(
+  () => commonStore.areaLayerSwitchActive,
+  (newVal, oldVal) => {
+    nextTick(() => {
+    isGlobalOrNational.value =['全国', '全球'].includes(newVal)
+      
+    })
+  },
+  {
+    immediate: true
+  }
+)
 
 const eventInteractionStore = useEventInteractionStore()
-const national=ref(false)
+const national = ref(false)
 const global = ref(false)
 
 function nationalChange() {
-   national.value= !national.value
+  national.value = !national.value
 }
 function globalChange() {
-   global.value= !global.value
+  global.value = !global.value
 }
 
 // const bottons = ref([
@@ -88,96 +118,84 @@ const bottons = ref([
   { id: 16, name: '崇明区', active: false }
 ])
 
-
 const clickTimer = ref(null)
 
 function btnClick(index, item) {
+  commonStore.areaLayerSwitchActive = index
   //判断点击的是上海市
-  if(index === "上海市") {
-    activeIndex.value = index
-    ClearMap();
-    if(eventInteractionStore.mapType !== "shanghai"){
-      eventInteractionStore.mapType = "shanghai"
+  if (index === '上海市') {
+    ClearMap()
+    if (eventInteractionStore.mapType !== 'shanghai') {
+      eventInteractionStore.mapType = 'shanghai'
     }
-    eventInteractionStore.selectDistrict = ""
+    eventInteractionStore.selectDistrict = ''
     return
   }
 
-  if(index === "全国") {
-    activeIndex.value = index
-    eventInteractionStore.mapType = "china"
+  if (index === '全国') {
+    eventInteractionStore.mapType = 'china'
     return
   }
 
-  if(index === "全球") {
-    activeIndex.value = index
-    eventInteractionStore.mapType = "world"
+  if (index === '全球') {
+    eventInteractionStore.mapType = 'world'
     return
   }
 
-  if(eventInteractionStore.mapType !== "shanghai"){
-    return;
+  if (eventInteractionStore.mapType !== 'shanghai') {
+    return
   }
 
-  if(clickTimer.value) {
+  if (clickTimer.value) {
     clearTimeout(clickTimer.value)
   }
 
   clickTimer.value = setTimeout(() => {
     console.log(index, 'index', item)
 
-    if(activeIndex.value !== item.name){
-      activeIndex.value = item.name
+    if ((commonStore.areaLayerSwitchActive = index !== item.name)) {
+      commonStore.areaLayerSwitchActive = index = item.name
       emit('btnClick', item)
-
       changeStreet(item.name, false, true)
-    }else{
-      activeIndex.value = "上海市"
-      ClearMap();
-      eventInteractionStore.selectDistrict = ""
+    } else {
+      commonStore.areaLayerSwitchActive = '上海市'
+      ClearMap()
+      eventInteractionStore.selectDistrict = ''
     }
-
   }, 300)
-
 }
 function btnDblClick(index, item) {
-  if(eventInteractionStore.mapType !== "shanghai"){
-    return;
+  if (eventInteractionStore.mapType !== 'shanghai') {
+    return
   }
 
-  if(clickTimer.value) {
+  if (clickTimer.value) {
     clearTimeout(clickTimer.value)
   }
 
-  console.log("btnDblClick"+index, 'index')
-  activeIndex.value = index
+  console.log('btnDblClick' + index, 'index')
+  commonStore.areaLayerSwitchActive = index
   emit('btnDblClick', item)
 
   eventInteractionStore.selectDistrict = item.name
 }
 
-const legendOpen=ref(false)
+const legendOpen = ref(false)
 
-function handleLegendOpen () {
+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) => {
-      activeIndex.value = val
-    })
+  () => eventInteractionStore.selectDistrict,
+  val => {
+    commonStore.areaLayerSwitchActive = val
+  }
+)
 </script>
 <style lang="scss" scoped>
 .area_layer_switch_container {
@@ -229,6 +247,7 @@ watch(
   // justify-content: space-between;
   justify-content: center;
   position: relative;
+
   // background-color: pink;
   .region_shi {
     width: 130px;
@@ -238,6 +257,7 @@ watch(
     display: flex;
     justify-content: center;
     cursor: pointer;
+
     > div {
       font-family: Alibaba PuHuiTi 3;
       font-weight: normal;
@@ -265,6 +285,8 @@ watch(
     flex-wrap: wrap;
     gap: 3px;
     overflow: visible; // 防止内容被裁剪
+    z-index: 5;
+
     .region_pianqu_btn {
       width: 87px;
       height: 42px;
@@ -277,6 +299,11 @@ watch(
       cursor: pointer;
 
       > div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
         font-weight: normal;
         font-size: 14px;
@@ -294,6 +321,7 @@ watch(
       background-size: 100% 100%;
     }
   }
+
   .region_tuceng {
     width: 98px;
     height: 100%;
@@ -321,6 +349,7 @@ watch(
   height: 63px;
   display: flex;
   cursor: pointer;
+
   .global_text {
     position: absolute;
     top: 18px;
@@ -334,17 +363,43 @@ watch(
   }
 }
 
-.national_text_active{
- color: rgb(233, 233, 52) !important;
+.national_text_active {
+  color: rgb(233, 233, 52) !important;
 }
-.global_text_active{
- color: rgb(233, 233, 52) !important;
+
+.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%;
+.region_tuceng_active {
+  width: 98px;
+  height: 100%;
+  background: url(../../assets/img/图层高亮.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+
+.region_pianqu .region_pianqu_btn.region_pianqu_btn_disabled {
+  cursor: not-allowed !important;
+  // pointer-events: none !important;
+  opacity: 0.6;
+}
+
+
+</style>
+
+<style>
+.el-popper.is-customized {
+  color: #fff;
+  /* Set padding to ensure the height is 32px */
+  padding: 6px 12px;
+  /* background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); */
+  background: linear-gradient(90deg, rgb(96, 195, 231, 0.3));
+}
+
+.el-popper.is-customized .el-popper__arrow::before {
+  /* background: linear-gradient(45deg, #b2e68d, #bce689); */
+  /* background: linear-gradient(45deg, rgb(96, 195, 231,0.3), rgb(96, 195, 231,0.3)); */
+  right: 0;
 }
 </style>

src/store/common.js

@@ -5,6 +5,7 @@ export const useCommonStore = defineStore('common', {
   state: () => {
     return {
       activeIndex: 0, // 存储当前高亮按钮的索引
+      areaLayerSwitchActive:'上海市',
       activeTools: {
         '风险列表': true,
         '图例': true,

src/store/rightPanel.js

@@ -26,6 +26,98 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
   // 图例开关
   const legendVisible = ref(true)
 
+  //风险等级
+  const riskLevelList = ref([
+    {
+      name: "A级风险",
+      img: new URL("@/assets/img/pinpoint.png", import.meta.url).href,
+      value: true,
+    },
+    {
+      name: "B级风险",
+      img: new URL("@/assets/img/pinpoint(1).png", import.meta.url)
+        .href,
+      value: true,
+    },
+    {
+      name: "C级风险",
+      img: new URL("@/assets/img/pinpoint(2).png", import.meta.url)
+        .href,
+      value: true,
+    },
+    {
+      name: "D级风险",
+      img: new URL("@/assets/img/pinpoint(3).png", import.meta.url)
+        .href,
+      value: true,
+    },
+  ]);
+
+  //应急
+  const deviceList = ref([
+    {
+      name: "应急人员",
+      img: new URL("@/assets/img/Component 240.png", import.meta.url)
+        .href,
+      value: false,
+      disabled:false
+    },
+    {
+      name: "应急车辆",
+      img: new URL("@/assets/img/Component 240(1).png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+    {
+      name: "物资装备",
+      img: new URL("@/assets/img/Component 240(2).png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+  ]);
+
+  //机构
+  const institutionList = ref([
+    {
+      name: "学校",
+      img: new URL("@/assets/img/Component 240(3).png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+
+    {
+      name: "养老机构",
+      img: new URL("@/assets/img/Component 240(4).png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+    {
+      name: "托幼机构",
+      img: new URL("@/assets/img/Component 240(5).png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+    {
+      name: "医院",
+      img: new URL("@/assets/img/history-icon.png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+    {
+      name: "海关",
+      img: new URL("@/assets/img/haiguan-icon.png", import.meta.url)
+        .href,
+      value: false,
+      disabled: false
+    },
+  ]);
+
   //关闭右侧弹窗
   const handleCloseAllVisible = () => {
     rightPanelVisible.value = "";
@@ -58,6 +150,9 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
     handleCloseAllVisible,
     timerSwitchStatus,
     videoCallVisible,
-    legendVisible
+    legendVisible,
+    riskLevelList,
+    deviceList,
+    institutionList
   };
 });

src/views/index.vue

@@ -10,8 +10,7 @@
         </div>
         <div class="home_container_header-left_tab">
           <div class="button-container">
-            <div v-for="(item, index) in buttons" :key="index" class="parallelogram-button"
-              :class="{ highlight: commonStore.activeIndex === index }" @click="setActive(index, item)">
+            <div v-for="(item, index) in buttons" :key="index" class="parallelogram-button" :class="{ highlight: commonStore.activeIndex === index }" @click="setActive(index, item)">
               <div class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">
                 {{ item.title }}
               </div>
@@ -40,83 +39,89 @@
     <AreaLayerSwitch></AreaLayerSwitch>
 
     <!-- 提示框 -->
-    <MyAlert v-if="commonStore.showAlert" :message="commonStore.alertMessage" :duration="3" 
-      :onClose="() => (commonStore.showAlert = false)"></MyAlert>
+    <MyAlert v-if="commonStore.showAlert" :message="commonStore.alertMessage" :duration="3" :onClose="() => (commonStore.showAlert = false)"></MyAlert>
   </div>
 </template>
 <script setup>
 import MyAlert from '../components/MyAlert/index'
-import AreaLayerSwitch from "../components/AreaLayerSwitch/index";
-import LeftPage from "./left/index.vue";
-import RightPage from "./right/index.vue";
-import Map from "@/components/Map.vue";
-import { storeToRefs } from "pinia";
-import { useUserStore } from "../store/user";
-import { useCommonStore } from "../store/common.js";
-import {
-  ref,
-  reactive,
-  toRefs,
-  onBeforeMount,
-  onMounted,
-  onUnmounted,
-  watch,
-} from "vue";
-import { useRiskTableStore } from "@/store/riskTable.js";
-import { handleJtlxPoints, initDistrict } from "@/utils/map/baseMethod.js";
-let userStore = useUserStore();
-let commonStore = useCommonStore();
-let riskTableStore = useRiskTableStore();
+import AreaLayerSwitch from '../components/AreaLayerSwitch/index'
+import LeftPage from './left/index.vue'
+import RightPage from './right/index.vue'
+import Map from '@/components/Map.vue'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '../store/user'
+import { useCommonStore } from '../store/common.js'
+import { ref, reactive, toRefs, onBeforeMount, onMounted, onUnmounted, watch } from 'vue'
+import { useRiskTableStore } from '@/store/riskTable.js'
+import { handleJtlxPoints, initDistrict } from '@/utils/map/baseMethod.js'
+let userStore = useUserStore()
+let commonStore = useCommonStore()
+let riskTableStore = useRiskTableStore()
 
-console.log(userStore, "useUserStore");
-let { name, age } = storeToRefs(userStore);
-const currentTime = ref("");
+console.log(userStore, 'useUserStore')
+let { name, age } = storeToRefs(userStore)
+const currentTime = ref('')
 // 更新当前时间的函数
 // 更新当前时间的函数
 const updateTime = () => {
-  const now = new Date();
+  const now = new Date()
 
   // 格式化为 2025-02-25 10:39:05
-  const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需加 1
-  const day = String(now.getDate()).padStart(2, "0");
-  const hours = String(now.getHours()).padStart(2, "0");
-  const minutes = String(now.getMinutes()).padStart(2, "0");
-  const seconds = String(now.getSeconds()).padStart(2, "0");
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需加 1
+  const day = String(now.getDate()).padStart(2, '0')
+  const hours = String(now.getHours()).padStart(2, '0')
+  const minutes = String(now.getMinutes()).padStart(2, '0')
+  const seconds = String(now.getSeconds()).padStart(2, '0')
 
-  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-};
+  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
 // 设置定时器每秒更新一次
-let timer;
+let timer
 onMounted(() => {
-  updateTime(); // 初始化时更新时间
-  timer = setInterval(updateTime, 1000); // 每秒更新
-  activeIndex.value = commonStore.getActiveIndex();
-});
+  updateTime() // 初始化时更新时间
+  timer = setInterval(updateTime, 1000) // 每秒更新
+  activeIndex.value = commonStore.getActiveIndex()
+})
 
 // 清理定时器
 onUnmounted(() => {
-  clearInterval(timer);
-});
+  clearInterval(timer)
+})
 
 let buttons = ref([
-  { id: 0, title: "报告处置", active: true },
-  { id: 1, title: "处置进展", active: false },
-]);
-let activeIndex = ref(0); // 存储当前高亮按钮的索引
+  { id: 0, title: '报告处置', active: true },
+  { id: 1, title: '处置进展', active: false }
+])
+let activeIndex = ref(0) // 存储当前高亮按钮的索引
 
-function setActive (index, item) {
+function setActive(index, item) {
   // 切换高亮按钮，点击时高亮切换
-  activeIndex.value = index;
-  commonStore.setActiveIndex(index);
+  activeIndex.value = index
+  commonStore.setActiveIndex(index)
   riskTableStore.setCurrentBackground(1)
   if (index === 0) {
     initDistrict()
   }
 
-
   handleJtlxPoints(index === 0)
 }
+
+// watch(
+//   () => commonStore.activeIndex,
+//   val => {
+//     if (val === 0) {
+//       commonStore.activeTools['风险列表'] = true
+//       commonStore.activeTools['图例'] = true
+
+//     }
+//     if (val === 1) {
+//       commonStore.activeTools['图例'] = false
+//     }
+//   }, {
+//     // immediate:true
+//   }
+// )
 </script>
 <style lang="scss" scoped>
 .home_container {
@@ -257,7 +262,7 @@ function setActive (index, item) {
       .icon-img {
         width: 40px;
         height: 40px;
-        background-image: url("../assets/img/通讯录@2x.png");
+        background-image: url('../assets/img/通讯录@2x.png');
         background-size: 100% 100%;
       }
 
@@ -284,7 +289,7 @@ function setActive (index, item) {
     .duoyun {
       width: 35px;
       height: 35px;
-      background-image: url("../assets/img/多云.png");
+      background-image: url('../assets/img/多云.png');
       background-size: 100% 100%;
     }
 

src/views/left/dialog/PublicHealthRisksDialog.vue

@@ -15,7 +15,7 @@
       </el-select>
     </div>
 
-    <el-table :data="tableData" class="dialog_table" :row-class-name="rowClassName" @row-click="handleRowClick">
+    <el-table :data="tableData" class="dialog_table" :row-class-name="rowClassName" @row-click="handleRowClick" highlight-current-row ref="tableRef">
       <el-table-column prop="area" label="行政区划" align="center" />
       <el-table-column prop="riskLevelA" label="A级" align="center" width="55" />
       <el-table-column prop="riskLevelB" label="B级" align="center" width="55" />
@@ -29,13 +29,10 @@ import TowLevelTitle from '../../../components/TowLevelTitle'
 import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 import { useDialogStore } from '@/store/dialog'
 let dialogStore = useDialogStore()
+import { riskTypeOptions, riskLevelList, riskStatusOptions } from '@/data/dict.js'
 
-import {
-  riskTypeOptions,
-  riskLevelList,
-  riskStatusOptions
-} from "@/data/dict.js";
-
+const tableRef = ref(null)
+const currentRow = ref(null)
 const buttons = ref([
   { id: 1, name: '报告地', active: false },
   { id: 2, name: '发生地', active: true }
@@ -195,13 +192,23 @@ const tableData = ref([
 
 const selectedRowIndex = ref(null)
 function rowClassName({ row, rowIndex }) {
-  let className = ''
+  // let className = ''
   if (rowIndex === 0) {
     return 'yellow-text' // 第一行文字为黄色
   }
+  if (row === currentRow.value) {
+    return 'selected-row'
+  }
+  if (row.area === '全市') {
+    return 'yellow-text'
+  }
+  return ''
 }
 
-function handleRowClick() {}
+function handleRowClick(row) {
+  currentRow.value = row
+  tableRef.value.setCurrentRow(row) // 设置当前高亮行
+}
 </script>
 <style lang="scss" scoped>
 .table_container {
@@ -344,6 +351,7 @@ function handleRowClick() {}
   background-color: rgba(0, 170, 255, 0.15) !important;
 }
 
+
 .dialog_table th {
   height: 28px;
   border-radius: 0px 0px 0px 0px;
@@ -358,7 +366,7 @@ function handleRowClick() {}
 // table伪类显示白色问题
 .el-table__body tr.hover-row > td.el-table__cell,
 .el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: rgba(15, 61, 151, 0.8) !important;
+  background-color: rgba(15, 61, 151, 0.5) !important;
 }
 
 .el-table--group::after,
@@ -401,12 +409,14 @@ function handleRowClick() {}
 
 /* ✅ 修改日期切换箭头颜色 */
 .date_picker_custom-class .el-picker-panel__icon-btn {
-  color: #1d85a9 !important; /* 修改箭头颜色 */
+  color: #1d85a9 !important;
+  /* 修改箭头颜色 */
 }
 
 /* 选中时箭头的颜色 */
 .date_picker_custom-class .el-picker-panel__icon-btn:hover {
-  color: #00ffaa !important; /* 鼠标悬停时箭头颜色 */
+  color: #00ffaa !important;
+  /* 鼠标悬停时箭头颜色 */
 }
 
 /* ✅ 隐藏下拉控件的箭头 */
@@ -417,6 +427,7 @@ function handleRowClick() {}
 .el-date-picker__header-label {
   color: #fff !important;
 }
+
 /* 针对面板内容区域 */
 .date_picker_custom-class .el-picker-panel__body {
   background-color: #214370;
@@ -440,4 +451,13 @@ function handleRowClick() {}
   background-color: #214370;
   color: #fff;
 }
+
+// .dialog_table .selected-row {
+//   background: rgba(58, 58, 58, 0.4) !important;
+// }
+.el-table__body tr.current-row>td.el-table__cell{
+  background: rgba(15, 61, 151, 0.8) !important;
+}
 </style>
+
+

src/views/left/index.vue

@@ -52,6 +52,7 @@ watch(
       riskTableStore.setInitShow(true)
       riskTableStore.setBigRiskTableShow(false)
       riskTableStore.setDisposalShow(false)
+      commonStore.activeTools['风险列表']=true
     } else if (newActiveIndex === 1) {
       riskTableStore.setInitShow(false)
       riskTableStore.setBigRiskTableShow(false)

src/views/left/modules/ProgressInDisposal.vue

@@ -46,6 +46,9 @@ let dialogStore = useDialogStore()
 import { useRiskTableStore } from '@/store/riskTable.js'
 let riskTableStore = useRiskTableStore()
 
+import { useCommonStore } from "@/store/common.js";
+let commonStore = useCommonStore();
+
 import { useRightPanelStore } from '@/store/rightPanel'
 const rightPanelStore = useRightPanelStore()
 
@@ -64,6 +67,10 @@ function openAIDialogHandle() {
   dialogStore.closeAllDialog()
   dialogStore.setRiskAIDialogOpen(true)
 }
+
+onMounted(() => {
+  commonStore.activeTools['图例'] = false
+})
 </script>
 <style lang="scss" scoped>
 .dispose_container {

src/views/left/modules/ReportDisposal.vue

@@ -381,6 +381,17 @@ function openRiskBigTable() {
   // console.log('openRiskBigTable')
   emit('openRiskBigTable')
 }
+
+onMounted(() => {
+  // commonStore.activeTools['风险列表'] = true
+  // commonStore.activeTools['图例'] = true
+  commonStore.activeTools = {
+        '风险列表': true,
+        '图例': true,
+        '色阶图': true,
+      }
+
+})
 </script>
 <style lang="scss" scoped>
 .body_container {

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

@@ -143,7 +143,11 @@ onMounted(() => {
     // const firstTool = tools.value[0].name
     // const firstTool2 = tools.value[2].name
     // const firstTool3 = tools.value[1].name
-    // commonStore.activeTools[firstTool] = true
+    commonStore.activeTools = {
+        '风险列表': true,
+        '图例': true,
+        '色阶图': true,
+      }
     // commonStore.activeTools[firstTool2] = true
     // commonStore.activeTools[firstTool3] = true
     // activeTools[firstTool3] = true

src/views/right/components/common/RightLegend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-legend">
-    <template v-for="(item, index) in riskLevelList" :key="index">
-      <div class="legend-item">
+    <template v-for="(item, index) in rightPanelStore.riskLevelList" :key="index">
+      <div class="legend-item" >
         <div class="icon-box icon-box-fill">
           <img :src="item.img" />
         </div>
@@ -15,8 +15,8 @@
     </template>
 
     <div class="line-box"></div>
-    <template v-for="(item, index) in deviceList" :key="index">
-      <div class="legend-item" @click="handleDeviceLevel(item)">
+    <template v-for="(item, index) in rightPanelStore.deviceList" :key="index">
+      <div class="legend-item" @click="isDistrictLevel && handleDeviceLevel(item)" :class="{ disabled: !isDistrictLevel }">
         <div class="icon-box">
           <img :src="item.img" />
         </div>
@@ -27,8 +27,8 @@
 
     <div class="line-box"></div>
 
-    <template v-for="(item, index) in institutionList" :key="index">
-      <div class="legend-item" @click="handleInstitutionLevel(item)">
+    <template v-for="(item, index) in rightPanelStore.institutionList" :key="index">
+      <div class="legend-item" @click="isDistrictLevel && handleInstitutionLevel(item)" :class="{ disabled: !isDistrictLevel }">
         <div class="icon-box">
           <img :src="item.img" />
         </div>
@@ -125,7 +125,7 @@
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref,computed } from "vue";
 import { useCommonStore } from "@/store/common.js";
 import { useRightPanelStore } from "../../../../store/rightPanel";
 import {handleHeatMap} from "@/utils/map/baseMethod.js";
@@ -134,6 +134,11 @@ import { riskTypeOptions } from "../../../../data/dict";
 const commonStore = useCommonStore();
 const rightPanelStore = useRightPanelStore();
 
+const districtList = ["全国", "全球", "上海市"]
+const isDistrictLevel = computed(() =>
+  !districtList.includes(commonStore.areaLayerSwitchActive)
+);
+
 const bingliSwitch = ref(false);
 const videoSwitch = ref(false);
 
@@ -200,88 +205,88 @@ const timeArr = ref([
 ]);
 
 //风险等级
-const riskLevelList = ref([
-  {
-    name: "A级风险",
-    img: new URL("@/assets/img/pinpoint.png", import.meta.url).href,
-    value: true,
-  },
-  {
-    name: "B级风险",
-    img: new URL("@/assets/img/pinpoint(1).png", import.meta.url)
-      .href,
-    value: true,
-  },
-  {
-    name: "C级风险",
-    img: new URL("@/assets/img/pinpoint(2).png", import.meta.url)
-      .href,
-    value: true,
-  },
-  {
-    name: "D级风险",
-    img: new URL("@/assets/img/pinpoint(3).png", import.meta.url)
-      .href,
-    value: true,
-  },
-]);
+// const riskLevelList = ref([
+//   {
+//     name: "A级风险",
+//     img: new URL("@/assets/img/pinpoint.png", import.meta.url).href,
+//     value: true,
+//   },
+//   {
+//     name: "B级风险",
+//     img: new URL("@/assets/img/pinpoint(1).png", import.meta.url)
+//       .href,
+//     value: true,
+//   },
+//   {
+//     name: "C级风险",
+//     img: new URL("@/assets/img/pinpoint(2).png", import.meta.url)
+//       .href,
+//     value: true,
+//   },
+//   {
+//     name: "D级风险",
+//     img: new URL("@/assets/img/pinpoint(3).png", import.meta.url)
+//       .href,
+//     value: true,
+//   },
+// ]);
 
-//应急
-const deviceList = ref([
-  {
-    name: "应急人员",
-    img: new URL("@/assets/img/Component 240.png", import.meta.url)
-      .href,
-    value: false,
-  },
-  {
-    name: "应急车辆",
-    img: new URL("@/assets/img/Component 240(1).png", import.meta.url)
-      .href,
-    value: false,
-  },
-  {
-    name: "物资装备",
-    img: new URL("@/assets/img/Component 240(2).png", import.meta.url)
-      .href,
-    value: false,
-  },
-]);
+// //应急
+// const deviceList = ref([
+//   {
+//     name: "应急人员",
+//     img: new URL("@/assets/img/Component 240.png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+//   {
+//     name: "应急车辆",
+//     img: new URL("@/assets/img/Component 240(1).png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+//   {
+//     name: "物资装备",
+//     img: new URL("@/assets/img/Component 240(2).png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+// ]);
 
-//机构
-const institutionList = ref([
-  {
-    name: "学校",
-    img: new URL("@/assets/img/Component 240(3).png", import.meta.url)
-      .href,
-    value: false,
-  },
+// //机构
+// const institutionList = ref([
+//   {
+//     name: "学校",
+//     img: new URL("@/assets/img/Component 240(3).png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
 
-  {
-    name: "养老机构",
-    img: new URL("@/assets/img/Component 240(4).png", import.meta.url)
-      .href,
-    value: false,
-  },
-  {
-    name: "托幼机构",
-    img: new URL("@/assets/img/Component 240(5).png", import.meta.url)
-      .href,
-    value: false,
-  },
-  {
-    name: "医院",
-    img: new URL("@/assets/img/history-icon.png", import.meta.url)
-      .href,
-    value: true,
-  },
-  {
-    name: "海关",
-    img: new URL("@/assets/img/haiguan-icon.png", import.meta.url)
-      .href,
-    value: true,
-  },
-]);
+//   {
+//     name: "养老机构",
+//     img: new URL("@/assets/img/Component 240(4).png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+//   {
+//     name: "托幼机构",
+//     img: new URL("@/assets/img/Component 240(5).png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+//   {
+//     name: "医院",
+//     img: new URL("@/assets/img/history-icon.png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+//   {
+//     name: "海关",
+//     img: new URL("@/assets/img/haiguan-icon.png", import.meta.url)
+//       .href,
+//     value: false,
+//   },
+// ]);
 
 const handleRiskLevel = (item) => {
   item.value = !item.value;
@@ -377,4 +382,19 @@ const handleInstitutionLevel = (item) => {
     background-size: 100% 100%;
   }
 }
+
+.legend-item.disabled {
+  cursor: not-allowed;
+
+  .switch-box {
+    pointer-events: none; // 防止误触
+    opacity: 0.4; // 可选，弱化视觉
+  }
+
+  .text-box {
+    opacity: 0.6; // 可选，弱化文字颜色
+  }
+}
+
+
 </style>

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

@@ -73,7 +73,15 @@
     </div>
     <div class="third-item">
       <rightMinTitleContent title="现场处置视频" />
-      <div class="video-box"></div>
+      <!-- 一个视频 -->
+      <!-- <div class="video-box"></div> -->
+      <!-- 多个视频 -->
+      <div class="video-box">
+         <div class="video-box_item"></div>
+         <div class="video-box_item"></div>
+         <div class="video-box_item"></div>
+         <div class="video-box_item"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -291,6 +299,15 @@ onMounted(() => {
       height: 180px;
       background-image: url("../../../../../assets/img/Frame 1321314936.png");
       background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 5px;
+      .video-box_item{
+        width: (50% - 5);
+        height: 50%;
+        background: #000;
+      }
     }
   }
 }

src/views/right/index.vue

@@ -7,59 +7,59 @@
       v-if="commonStore.activeTools['图例']"
       class="right-legend"
       :class="{
-        'right-legend-max': rightPanelStore.emergencyVisible,
+        'right-legend-max': rightPanelStore.emergencyVisible
       }"
     ></RightLegend>
-    <Timer class="timer-box" v-if="rightPanelStore.timerSwitchStatus" :time-list="hotCurrentTime"/>
+    <Timer class="timer-box" v-if="rightPanelStore.timerSwitchStatus" :time-list="hotCurrentTime" />
   </div>
 </template>
 <script setup>
-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 RightLegend from "./components/common/RightLegend.vue";
-import Timer from "../../components/Timer/Timer.vue";
-import { useCommonStore } from "@/store/common.js";
-let commonStore = useCommonStore();
+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 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();
+import { useRightPanelStore } from '../../store/rightPanel'
+const rightPanelStore = useRightPanelStore()
 //activeIndex: 0表示报告处置 1处置进展
 watch(
   () => commonStore.activeIndex,
   (newActiveIndex, oldActiveIndex) => {
-    console.log(newActiveIndex, "newActiveIndex");
+    // if (newActiveIndex === 0) {
+    //   commonStore.activeTools['风险列表'] = true
+    //   commonStore.activeTools['图例'] = true
+    // }
+    // if (newActiveIndex === 1) {
+    //   commonStore.activeTools['图例'] = false
+    // }
   },
   {
-    deep: true,
+    deep: true
     // immediate: true
   }
-);
+)
 
 const hotCurrentTime = computed(() => {
-  let nowTime = Date.now();
+  let nowTime = Date.now()
   let TimeArr = [
     {
-      name: new Date(nowTime)
-        .toLocaleDateString()
-        .slice(5, 10)
-        .replaceAll("/", "-"),
-      value: nowTime,
-    },
-  ];
-  let timeNum = 60 * 60 * 1000 * 24;
+      name: new Date(nowTime).toLocaleDateString().slice(5, 10).replaceAll('/', '-'),
+      value: nowTime
+    }
+  ]
+  let timeNum = 60 * 60 * 1000 * 24
   for (let i = 1; i <= 30; i++) {
     TimeArr.push({
-      name: new Date(nowTime + i * timeNum)
-        .toLocaleDateString()
-        .slice(5, 10)
-        .replaceAll("/", "-"),
-      value: nowTime + i * timeNum,
-    });
+      name: new Date(nowTime + i * timeNum).toLocaleDateString().slice(5, 10).replaceAll('/', '-'),
+      value: nowTime + i * timeNum
+    })
   }
-  return TimeArr;
-});
+  return TimeArr
+})
 </script>
 <style lang="scss" scoped>
 .right_container {