图例等级

src/store/rightPanel.js

@@ -206,7 +206,7 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
       value: "D",
     },
   ]);
-  const riskTypeSelect = ref(['A'])
+  const riskTypeSelect = ref(['A','B','C','D'])
   
 
   //关闭右侧弹窗

src/views/index.vue

@@ -68,7 +68,7 @@
     <DanWeiJiGoDialog v-if="dialogStore.danWeiJiGoDialogOpen"></DanWeiJiGoDialog>
     <YiLiaoJiGoDialog v-if="dialogStore.yiLiaoJiGoDialogOpen"></YiLiaoJiGoDialog>
     <AnZhiChangSuoDialog v-if="dialogStore.anZhiChangSuoDialogOpen"></AnZhiChangSuoDialog> -->
-    
+
       <component v-if="activeDialog" :is="activeDialog.component" />
     </div>
   </div>
@@ -190,6 +190,10 @@ const activeDialog = computed(() => {
 watch(
   () => commonStore.activeModule,
   (val, oldVal) => {
+    rightPanelStore.riskLevelList.forEach(item => {
+      item.value = true
+    })
+    rightPanelStore.riskTypeSelect=['A','B','C','D']
     handleRiskStatistic(false)
     // console.log(val, oldVal)
     // commonStore.areaLayerSwitchActive = val

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

@@ -36,20 +36,20 @@
               <div class="switch-box" :class="{ switchOpen: item.value }"></div>
             </div>
           </template>
-        </div>
-      </transition>
 
-      <!-- 新增 -->
-      <div class="line-box"></div>
-      <template v-for="(item, index) in rightPanelStore.emergencyList" :key="index">
-        <div class="legend-item" @click="isDistrictLevel && handleEmergencyLevel(item)" :class="{ disabled: !isDistrictLevel }">
-          <div class="icon-box">
-            <img :src="item.img" />
-          </div>
-          <div class="text-box">{{ item.name }}</div>
-          <div class="switch-box" :class="{ switchOpen: item.value }"></div>
+          <!-- 新增 -->
+          <div class="line-box"></div>
+          <template v-for="(item, index) in rightPanelStore.emergencyList" :key="index">
+            <div class="legend-item" @click="isDistrictLevel && handleEmergencyLevel(item)" :class="{ disabled: !isDistrictLevel }">
+              <div class="icon-box">
+                <img :src="item.img" />
+              </div>
+              <div class="text-box">{{ item.name }}</div>
+              <div class="switch-box" :class="{ switchOpen: item.value }"></div>
+            </div>
+          </template>
         </div>
-      </template>
+      </transition>
 
       <div class="line-box"></div>
 
@@ -71,29 +71,29 @@
         </el-select>
       </div>
       <!-- 时间选择器 -->
-      <!-- <div class="legend-item">
-      <div class="icon-box">
-        <img src="../../../../assets/img/Component 240(8).png" />
-      </div>
-      <el-tooltip :disabled="!commonStore.timeSelect.length" placement="bottom" effect="customized" :content="formatTimeRange(commonStore.timeSelect)" popper-class="tooltip-multiline">
-        <div class="date-picker-container" @click="handleDatePickerClick">
-          <el-date-picker
-            ref="datePickerRef"
-            v-model="commonStore.timeSelect"
-            type="datetimerange"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            format="YYYY-MM-DD HH:mm:ss"
-            date-format="YYYY/MM/DD ddd"
-            time-format="A hh:mm:ss"
-            :teleported="false"
-            popper-class="date_picker_custom-class"
-            @visible-change="onDatePickerVisibleChange"
-            @change="onDateChange"
-          />
+      <div class="legend-item">
+        <div class="icon-box">
+          <img src="../../../../assets/img/Component 240(8).png" />
         </div>
-      </el-tooltip>
-    </div> -->
+        <el-tooltip :disabled="!commonStore.timeSelect.length" placement="bottom" effect="customized" :content="formatTimeRange(commonStore.timeSelect)" popper-class="tooltip-multiline">
+          <div class="date-picker-container" @click="handleDatePickerClick">
+            <el-date-picker
+              ref="datePickerRef"
+              v-model="commonStore.timeSelect"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              date-format="YYYY/MM/DD ddd"
+              time-format="A hh:mm:ss"
+              :teleported="true"
+              popper-class="date_picker_custom-class"
+              @visible-change="onDatePickerVisibleChange"
+              @change="onDateChange"
+            />
+          </div>
+        </el-tooltip>
+      </div>
 
       <template v-if="commonStore.activeIndex == 1">
         <div class="line-box"></div>
@@ -160,6 +160,11 @@ const onDatePickerVisibleChange = visible => {
   if (visible) {
     // 调整弹窗的位置
     adjustPopperPosition()
+  } else {
+    // 弹层关闭时展开父容器
+    nextTick(() => {
+     isTimePickerOpen.value = false
+    })
   }
 }
 
@@ -300,7 +305,7 @@ const handleDeviceLevel = item => {
 
 const handleInstitutionLevel = item => {
   item.value = !item.value
- dialogStore.closeAllDialog() 
+  dialogStore.closeAllDialog()
   if (item.name === '学校') {
     handleXuexiaoPoints(item.value)
   }

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

@@ -213,7 +213,21 @@ watch(
     {
       immediate: false
     }
-);
+)
+
+watch(
+  () => activeSelect.value,
+  val => {
+    console.log(val, 'activeSelect')
+    rightPanelStore.riskLevelList.forEach(item => {
+      console.log(item, 'item')
+      item.value = val.includes(item.type.charAt(0))
+    })
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>

src/views/right/components/reportHandle/index.vue

@@ -70,7 +70,7 @@ function setActiveModule(module) {
   commonStore.activeModule = module
   // rightPanelStore.riskLevelList
   if(commonStore.activeModule === '风险研判'){
-    let levels = riskTypeSelect.value.map((item) => {
+    let levels = rightPanelStore.riskTypeSelect.map((item) => {
       return item + "级"
     })
     handleRiskStatistic(true, levels, "日")