物资与装备、防御备战对接左侧接口

src/api/duty/eventing.ts

@@ -159,3 +159,21 @@ export function taskList(data) {
     data: data
   });
 }
+
+// 事件情况-年季月统计
+export function getEventCount(data) {
+  return request({
+    url: '/api/gateway/v2/get_event_details_year_quarter_month_count',
+    method: 'post',
+    data: data
+  });
+}
+
+// 事件情况-年季月统计
+export function getEventTypeCount(data) {
+  return request({
+    url: '/api/gateway/v2/get_event_details_type_count',
+    method: 'post',
+    data: data
+  });
+}

src/api/globalMap/spatialAnalysis.ts

@@ -25,6 +25,25 @@ export const getRescueMateriaDetails = (id: string) => {
     }
   });
 };
+// 救援物资仓库
+export const getWarehouseDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_rescue_materia_warehouse_info',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+// 救援物资仓库 不合并同点位
+export const getWarehouseDetails2 = () => {
+  return request({
+    url: '/api/gateway/v1/get_rescue_materia_warehouse_list',
+    method: 'get'
+  });
+};
 
 // 避难场所详情
 export const getEmergencyShelterTypeDetails = (id: string) => {

src/api/routineCommandMap/index.ts

@@ -26,3 +26,12 @@ export function getTrainingList(params) {
     params: params
   });
 }
+
+// 获取培训记录列表
+export function getTemperature(data) {
+  return request({
+    url: '/api/temperature_precipitation/temperature',
+    method: 'post',
+    data: data
+  });
+}

src/api/routineCommandMap/riskMonitor.ts

@@ -0,0 +1,66 @@
+import request from '@/utils/request';
+
+// 雨情（镇街降水）
+export function getTownshipRain(durationTime: string) {
+  return request({
+    url: '/api/risk_monitor/rain/get_township_rain',
+    method: 'post',
+    data: {
+      rn: durationTime
+    }
+  });
+}
+
+// 森林火灾风险分析
+export function getTownshipRainWarrning() {
+  return request({
+    url: '/api/risk_monitor/rain/township_rain_warrning',
+    method: 'post',
+    data: {}
+  });
+}
+
+// 危化品最高等级
+export function getMaxHazardous() {
+  return request({
+    url: '/api/risk_monitor/hazardous/get_max_hazardous',
+    method: 'post',
+    data: {}
+  });
+}
+
+// 危化品最高等级
+export function getMaxHazardousCount() {
+  return request({
+    url: '/api/risk_monitor/hazardous/hazardous_warrning_count',
+    method: 'post',
+    data: {}
+  });
+}
+
+// 森林火灾风险分析
+export function getHazardousWarrning() {
+  return request({
+    url: '/api/risk_monitor/hazardous/hazardous_warrning',
+    method: 'post',
+    data: {}
+  });
+}
+
+// 森林火灾最高风险
+export function getMaxForest() {
+  return request({
+    url: '/api/risk_monitor/forest/get_max_forest',
+    method: 'post',
+    data: {}
+  });
+}
+
+// 森林火灾风险分析
+export function getForestWarrning() {
+  return request({
+    url: '/api/risk_monitor/forest/forest_warrning',
+    method: 'post',
+    data: {}
+  });
+}

src/components/Dialog/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="modelValue || customShow" class="common-dialog" :style="{ width: computedWidth, height: computedHeight }">
     <div :class="type === 'xs' ? 'dialog-header2' : 'dialog-header'">
-      <div class="dialog-title">
+      <div v-if="!hideTitle" class="dialog-title">
         {{ title ? title : '弹窗' }}
       </div>
       <i class="decoration" />
@@ -30,6 +30,7 @@ interface Props {
   modelValue?: boolean;
   type?: string;
   title?: string;
+  hideTitle: boolean;
   width?: string;
   height?: string;
   cancelText?: string;

src/components/Map/index.vue

@@ -27,7 +27,7 @@ import {
   getGasolinestationDetails,
   getHospitalDetails,
   getMiningcompanyDetails,
-  getRescueMateriaDetails,
+  getWarehouseDetails,
   getChemicalcompanyDetails,
   getSchoolDetails,
   getWaterloggedRoadsDetails,
@@ -43,7 +43,7 @@ import {
   getChemicalWarehouseDetails,
   getMiningOperationsDetails,
   getEmergencyTransportResourcesDetails, getEmergencyDisasterInfoOfficerDetails
-} from "@/api/globalMap/spatialAnalysis";
+} from '@/api/globalMap/spatialAnalysis';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import ElementResizeDetectorMaker from 'element-resize-detector';
 import useAppStore from '@/store/modules/app';
@@ -59,7 +59,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 
-const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo']);
+const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
@@ -79,7 +79,7 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo } = useAMap({
+const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover } = useAMap({
   key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
@@ -159,7 +159,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
 const handlePointDetails = (data) => {
   let methodList = {
     '1': getEmergencyExpertDetails,
-    '2': getRescueMateriaDetails,
+    '2': getWarehouseDetails,
     '3': getEmergencyShelterTypeDetails,
     '4': getWaterloggedRoadsDetails,
     '5': getSchoolDetails,
@@ -187,7 +187,7 @@ const handlePointDetails = (data) => {
   };
   let titleList = {
     '1': '专家信息',
-    '2': '救援物资信息',
+    '2': '物资与装备仓库信息',
     '3': '避难所信息',
     '4': '易涝点信息',
     '5': '学校信息',
@@ -228,7 +228,18 @@ const handlePointDetails = (data) => {
       titleDom.className = 'title-box';
       titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
       div.appendChild(titleDom);
-      if (data.dataType === 4) {
+      if (data.dataType === 2) {
+        let btnBox = document.createElement('div');
+        let btn = document.createElement('div');
+        btnBox.className = 'flex';
+        btn.className = 'btn';
+        btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
+        btn.onclick = () => {
+          emits('handleShowWarehouse', data);
+        };
+        btnBox.appendChild(btn);
+        div.appendChild(btnBox);
+      } else if (data.dataType === 4) {
         let btnBox = document.createElement('div');
         let btn = document.createElement('div');
         btnBox.className = 'flex';
@@ -279,6 +290,7 @@ const handlePointDetails = (data) => {
       closeBtn.className = 'close';
       closeBtn.onclick = hideInfo;
       div.appendChild(closeBtn);
+      debugger
       showInfo(div, [data.longitude, data.latitude], true);
     }
   });
@@ -388,7 +400,7 @@ const setCenter = (item) => {
   map.setCenter([item.longitude, item.latitude]);
 };
 
-defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool });
+defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover });
 const handleResize = () => {
   const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
   const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;

src/hooks/AMap/useAMap.ts

@@ -111,6 +111,7 @@ export function useAMap(options) {
       context.marker.on('click', function (e) {
         const extData = e.target.getExtData();
         let index = 0;
+        let index2 = 0;
         for (let i = 0; i < addPoints.length; i++) {
           if (addPoints[i].id === extData.id && addPoints[i].imageHover) {
             addPoints[i].icon = addPoints[i].imageHover;
@@ -121,11 +122,10 @@ export function useAMap(options) {
             if (addPoints[i].id === extData2.id) {
               addPoints[i].icon = addPoints[i].image;
               clickMarker.setContent(content);
-
-              index++;
+              index2++;
             }
           }
-          if ((!!clickMarker && index === 2) || (!clickMarker && index === 1)) {
+          if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
             break;
           }
         }
@@ -155,6 +155,35 @@ export function useAMap(options) {
     markers[id] = [];
   };
 
+  const handleHover = (extData, dataType) => {
+    map.setZoom(18);
+    map.setCenter([extData.lng, extData.lat]);
+    setTimeout(() => {
+      let index = 0;
+      let index2 = 0;
+      let data = {};
+      debugger
+      for (let i = 0; i < addPoints.length; i++) {
+        if (addPoints[i].id === extData.id.toString() && addPoints[i].dataType === dataType) {
+          addPoints[i].icon = addPoints[i].imageHover;
+          index++;
+          data = addPoints[i];
+        } else if (!!clickMarker) {
+          const extData2 = clickMarker.getExtData();
+          if (addPoints[i].id === extData2.id) {
+            addPoints[i].icon = addPoints[i].image;
+            index2++;
+          }
+        }
+        if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
+          break;
+        }
+      }
+      addMarker(addPoints);
+      options.onMarkerClick(data);
+    }, 2000);
+  };
+
   const getMarkers = () => {
     return markers;
   };
@@ -206,6 +235,7 @@ export function useAMap(options) {
     getMarkers,
     getScale,
     showInfo,
-    hideInfo
+    hideInfo,
+    handleHover
   };
 }

src/views/globalMap/MaterialDetail.vue

@@ -0,0 +1,85 @@
+<template>
+  <Dialog hideTitle custom-show hide-footer @close="handleClose">
+    <el-select
+      v-model="warehouseId"
+      placeholder="请选择"
+      class="custom-select"
+      size="large"
+      popper-class="custom-select-popper"
+      :teleported="false"
+      @change="changSelect"
+    >
+      <el-option v-for="item in wareHouseList" :key="item.id" :label="item.name" :value="item.id" />
+    </el-select>
+    <div class="material-detail-container">
+      <div class="common-table">
+        <div class="table-header">
+          <div class="td">物资名称</div>
+          <div class="td">已有物资名称</div>
+          <div class="td">物资型号</div>
+          <div class="td">物资数量</div>
+          <div class="td">物资单位</div>
+        </div>
+        <div v-for="(item, index) in detailData" :key="index" class="tr">
+          <div class="td">{{ item.materia_name }}</div>
+          <div class="td">-</div>
+          <div class="td">-</div>
+          <div class="td">{{ item.materia_num }}</div>
+          <div class="td">{{ item.materia_unit }}</div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="MaterialDetail">
+import { getRescueMateriaDetails, getWarehouseDetails2 } from '@/api/globalMap/spatialAnalysis';
+
+const props = defineProps({
+  modelValue: Boolean,
+  warehouseData: Object
+});
+const showDetail = inject('showDetail');
+let wareHouseList = ref([]);
+let warehouseId = ref();
+const emits = defineEmits(['update:modelValue']);
+let detailData = ref();
+const changSelect = (id) => {
+  for (let i = 0; i < wareHouseList.value.length; i++) {
+    if (wareHouseList.value[i].id === id) {
+      const data = {
+        id: wareHouseList.value[i].id,
+        lat: wareHouseList.value[i].latitude,
+        lng: wareHouseList.value[i].longitude
+      };
+      showDetail(data, 2);
+      break;
+    }
+  }
+  initData();
+};
+const initData = () => {
+  getRescueMateriaDetails(warehouseId.value).then((res) => {
+    detailData.value = res.rows;
+  });
+};
+onMounted(() => {
+  warehouseId.value = props.warehouseData.id;
+  getWarehouseDetails2().then((res) => {
+    wareHouseList.value = res.data.list;
+  });
+  initData();
+});
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-select {
+  width: 800px;
+  position: absolute;
+  top: 20px;
+  left: 55px;
+}
+</style>

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -75,6 +75,7 @@ import {
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
 const getMap = inject('getMap');
+const showDetail = inject('showDetail');
 const queryParams = reactive({
   area: '',
   keyword: ''
@@ -99,8 +100,7 @@ const showMoreVideos = () => {
 };
 const handleShowDialog = (item) => {
   location.value = [item.lng, item.lat];
-  getMap().setCenter(location.value);
-  showNearbyVideos.value = true;
+  showDetail(item, 4);
 };
 let timeArr = ref([]);
 onMounted(() => {

src/views/globalMap/data/mapData.ts

@@ -4229,13 +4229,15 @@ export const pointDetailTemplate = {
     type: '专家类型'
   },
   '2': {
-    materia_type: '物资类型',
-    materia_num: '物资数量',
-    materia_ratio: '物资比例',
-    materia_unit: '物资单位',
-    materia_name: '物资名称',
+    warehouse_code: '仓库编码',
+    warehouse_name: '仓库名称',
     area: '所在区县',
-    management_unit: '物资所在仓库'
+    management_unit: '日常管理单位',
+    supervisory_department: '主管部门',
+    data_source: '数据来源',
+    longitude: '经度',
+    latitude: '纬度',
+    update_time: '更新时间'
   },
   '3': {
     area: '所在区县',

src/views/globalMap/index.vue

@@ -4,7 +4,7 @@
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
       <!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
       <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />
-      <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" />
+      <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" @handleShowWarehouse="handleShowWarehouse" />
       <!--左侧菜单-->
       <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
       <!--右侧菜单-->
@@ -15,6 +15,7 @@
       <TimeAxis />
       <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
       <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
+      <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouseData="warehouseData" />
     </div>
   </div>
 </template>
@@ -26,6 +27,7 @@ import MapLogical from '@/components/Map/MapLogical.vue';
 import { iconList, logicalData } from './data/mapData';
 import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
 import LeftMenu from './LeftMenu.vue';
+import MaterialDetail from './MaterialDetail.vue';
 import TimeAxis from '@/components/TimeAxis/index.vue';
 import { deepClone } from '@/utils';
 import { getPointInfo } from '@/api/globalMap';
@@ -157,6 +159,14 @@ const getMap = () => {
   }
   return {};
 };
+const showDetail = (data, dataType) => {
+  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+    return map2Ref.value.handleHover(data, dataType);
+  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
+    return mapRef.value.handleHover(data, dataType);
+  }
+  return {};
+};
 const getDrawTool = () => {
   if (['satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.drawTool;
@@ -180,6 +190,12 @@ const handleShowVideo = (data) => {
   location = [data.longitude, data.latitude];
   showNearbyVideos.value = true;
 };
+let showWarehouse = ref(false);
+let warehouseData = ref('');
+const handleShowWarehouse = (data) => {
+  warehouseData.value = data;
+  showWarehouse.value = true;
+};
 // const handleResize = () => {
 //   debugger
 // }
@@ -188,6 +204,7 @@ const handleShowVideo = (data) => {
 // })
 
 provide('getMap', getMap);
+provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getMarkers', getMarkers);
 </script>

src/views/routineCommandMap/LeftSection/RealSituation.vue

@@ -6,7 +6,7 @@
         {{ item.name }}
       </div>
     </div>
-    <img class="img-box" :src="liveMapState.data[0].img" @click="handleShowDialog" />
+    <img class="img-box" :src="liveMapState.data[0] ? liveMapState.data[0].pic_url : ''" @click="handleShowDialog" />
     <!--    <div class="temperature-box">-->
     <!--      <i class="decoration1" />-->
     <!--      <div class="temperature-content">-->
@@ -16,7 +16,7 @@
     <!--    </div>-->
     <Dialog v-model="liveMapState.show" :title="tabs[tabActive].name" hide-footer>
       <div class="img-box2">
-        <img v-show="liveMapState.activeIndex > -1" :src="liveMapState.data[liveMapState.activeIndex]?.img" />
+        <img v-show="liveMapState.activeIndex > -1" :src="liveMapState.data[liveMapState.activeIndex]?.pic_url" />
       </div>
       <div class="tool-container">
         <div class="tool-left">
@@ -44,35 +44,22 @@
 </template>
 
 <script lang="ts" setup name="RealSituation">
-import tempImg from '@/assets/images/routineCommandMap/realSituation/temp.jfif';
 import Dialog from '@/components/Dialog/index.vue';
-import img1 from '@/components/TimeAxis/tempImg/img1.jfif';
-import img2 from '@/components/TimeAxis/tempImg/img2.jfif';
-import img3 from '@/components/TimeAxis/tempImg/img3.jfif';
-import img4 from '@/components/TimeAxis/tempImg/img4.jfif';
-import img5 from '@/components/TimeAxis/tempImg/img5.jfif';
-import img6 from '@/components/TimeAxis/tempImg/img6.jfif';
-import img7 from '@/components/TimeAxis/tempImg/img7.jfif';
-import img8 from '@/components/TimeAxis/tempImg/img8.jfif';
-import img9 from '@/components/TimeAxis/tempImg/img9.jfif';
-import img10 from '@/components/TimeAxis/tempImg/img10.jfif';
+import { getTemperature } from '@/api/routineCommandMap';
 
 let tabActive = ref(0);
 let tabs = reactive([
-  { name: '6h降水', value: '' },
-  { name: '24h降水', value: '' },
-  { name: '整点气温', value: '' },
-  { name: '24h最高温', value: '' },
-  { name: '24h最低温', value: '' },
-  { name: '24小时变温', value: '' }
+  { name: '6h降水', value: '6h_precipitation' },
+  { name: '24h降水', value: '24h_precipitation' },
+  { name: '整点气温', value: 'hourly_temperature' },
+  { name: '24h最高温', value: '24h_max_temperature' },
+  { name: '24h最低温', value: '24h_min_temperature' },
+  { name: '24小时变温', value: '24h_variable_temperature' }
 ]);
 const clickTab = (index) => {
   tabActive.value = index;
+  initData();
 };
-let orderList = reactive({
-  unit: '',
-  dataList: []
-});
 const speedList = reactive([
   { name: '1秒', value: 1 },
   { name: '2秒', value: 2 }
@@ -82,48 +69,7 @@ const liveMapState = reactive({
   activeIndex: 0,
   speed: 1,
   playing: false,
-  data: [
-    {
-      time: '00:15',
-      img: img1
-    },
-    {
-      time: '01:15',
-      img: img2
-    },
-    {
-      time: '01:45',
-      img: img3
-    },
-    {
-      time: '02:15',
-      img: img4
-    },
-    {
-      time: '03:15',
-      img: img5
-    },
-    {
-      time: '04:15',
-      img: img6
-    },
-    {
-      time: '05:15',
-      img: img7
-    },
-    {
-      time: '06:15',
-      img: img8
-    },
-    {
-      time: '07:15',
-      img: img9
-    },
-    {
-      time: '07:45',
-      img: img10
-    }
-  ]
+  data: []
 });
 watch(
   () => liveMapState.show,
@@ -183,17 +129,9 @@ const toNextTime = (flag?: boolean) => {
   }
 };
 const initData = () => {
-  orderList = {
-    unit: '(mm)',
-    dataList: [
-      { label: '0', value: '#abf698' },
-      { label: '1.0', value: '#6dbf54' },
-      { label: '1.6', value: '#62d2ff' },
-      { label: '7.0', value: '#2e63fb' },
-      { label: '15.0', value: '#dd34ff' },
-      { label: '40.0', value: '#992b2a' }
-    ]
-  };
+  getTemperature({ args: tabs[tabActive.value].value }).then((res) => {
+    liveMapState.data = res.data.max_level;
+  });
 };
 onMounted(() => {
   initData();

src/views/routineCommandMap/LeftSection/RiskMonitor.vue

@@ -43,17 +43,17 @@
         <i class="line" />
         <div class="box-right">
           <div>当前预警等级较高的风险区域：</div>
-          <div>{{ hazardousChemicals.highRiskArea.toString() }}</div>
+          <div>{{ hazardousChemicals.highRiskArea ? hazardousChemicals.highRiskArea : '无' }}</div>
         </div>
       </div>
       <div class="data-box2">
         <div class="common-title-box">预警等级</div>
         <div class="box-right">
-          <div v-for="(item, index) in hazardousChemicals.warningLevelData" :key="index" :class="getStatusClass3(item.name)">
+          <div v-for="(item, index) in hazardousChemicals.warningLevelData" :key="index" :class="getStatusClass3(item.LEVEL)">
             <i class="icon" />
             <div class="text-box">
-              <div class="text">{{ item.value }}</div>
-              <div>{{ item.name }}</div>
+              <div class="text">{{ item.VALUES }}</div>
+              <div>{{ item.LEVEL }}</div>
             </div>
           </div>
         </div>
@@ -66,35 +66,10 @@
           <div class="text2">镇街个数</div>
         </div>
         <div class="box2">
-          <div class="rain-box6">
-            <div class="text3">特大暴雨</div>
-            <div class="text3">(>200)</div>
-            <div class="text">{{ rainList.data6 }}</div>
-          </div>
-          <div class="rain-box5">
-            <div class="text3">大暴雨</div>
-            <div class="text3">(100-200)</div>
-            <div class="text">{{ rainList.data5 }}</div>
-          </div>
-          <div class="rain-box4">
-            <div class="text3">暴雨</div>
-            <div class="text3">(50-200)</div>
-            <div class="text">{{ rainList.data4 }}</div>
-          </div>
-          <div class="rain-box3">
-            <div class="text3">大雨</div>
-            <div class="text3">(25-50)</div>
-            <div class="text">{{ rainList.data3 }}</div>
-          </div>
-          <div class="rain-box2">
-            <div class="text3">中雨</div>
-            <div class="text3">(10-25)</div>
-            <div class="text">{{ rainList.data2 }}</div>
-          </div>
-          <div class="rain-box1">
-            <div class="text3">小雨</div>
-            <div class="text3">(<10)</div>
-            <div class="text">{{ rainList.data1 }}</div>
+          <div v-for="(item, index) in rainList" :key="index" class="rain-box6">
+            <div class="text3">{{ item.name }}</div>
+            <div class="text3">{{ item.range }}</div>
+            <div class="text">{{ item.value }}</div>
           </div>
         </div>
       </div>
@@ -128,40 +103,47 @@
 </template>
 
 <script lang="ts" setup name="RiskMonitor">
-const active = ref('2');
+import {
+  getForestWarrning, getHazardousWarrning,
+  getMaxForest, getMaxHazardous, getMaxHazardousCount,
+  getTownshipRain,
+  getTownshipRainWarrning
+} from '@/api/routineCommandMap/riskMonitor';
+
+const active = ref('0');
 const riskList = ref([
   { name: '危化品', value: '0' },
   { name: '雨晴', value: '1' },
   { name: '森林火灾', value: '2' }
 ]);
 // 危化品
-const hazardousChemicals = ref({
+const hazardousChemicals = reactive({
   nowWarningLevel: '',
   nowWarningLevelName: '',
-  highRiskArea: [],
+  highRiskArea: '',
   warningLevelData: []
 });
 const getStatusClass = () => {
-  const level = hazardousChemicals.value.nowWarningLevel;
-  if (level === '1') {
+  const level = hazardousChemicals.nowWarningLevel;
+  if (level === 1) {
     return 'icon1 lowRisk1';
-  } else if (level === '2') {
+  } else if (level === 2) {
     return 'icon1 normalRisk1';
-  } else if (level === '3') {
+  } else if (level === 3) {
     return 'icon1 moreRisk1';
-  } else if (level === '4') {
+  } else if (level === 4) {
     return 'icon1 significantRisk1';
   }
 };
 const getStatusClass2 = () => {
-  const level = hazardousChemicals.value.nowWarningLevel;
-  if (level === '1') {
+  const level = hazardousChemicals.nowWarningLevel;
+  if (level === 1) {
     return 'lowRiskText1';
-  } else if (level === '2') {
+  } else if (level === 2) {
     return 'normalRiskText1';
-  } else if (level === '3') {
+  } else if (level === 3) {
     return 'moreRiskText1';
-  } else if (level === '4') {
+  } else if (level === 4) {
     return 'significantRiskText1';
   }
 };
@@ -177,11 +159,11 @@ const getStatusClass3 = (level: string) => {
   }
 };
 // 雨晴
-const durationTime = ref('1');
+const durationTime = ref(1);
 const durationTimeList = ref([
-  { name: '1小时', value: '1' },
-  { name: '1.5小时', value: '1.5' },
-  { name: '2小时', value: '2' }
+  { name: '1小时', value: 1 },
+  { name: '1.5小时', value: 1.5 },
+  { name: '2小时', value: 2 }
 ]);
 const rainList = ref({
   data1: 0,
@@ -193,13 +175,13 @@ const rainList = ref({
 });
 const raidDescribe = ref('');
 // 森林火灾
-const forestFireData = ref({
+const forestFireData = reactive({
   nowLevel: '',
   text: ''
 });
 const levelList = ref(['极度危险', '高度危险', '较高危险', '较低危险']);
 const getStatusClass4 = () => {
-  const level = forestFireData.value.nowLevel;
+  const level = forestFireData.nowLevel;
   if (level === '较低危险') {
     return 'icon1 lowRisk1';
   } else if (level === '较高危险') {
@@ -211,7 +193,7 @@ const getStatusClass4 = () => {
   }
 };
 const getStatusClass5 = () => {
-  const level = forestFireData.value.nowLevel;
+  const level = forestFireData.nowLevel;
   if (level === '较低危险') {
     return 'lowRiskText1';
   } else if (level === '较高危险') {
@@ -235,28 +217,51 @@ const getStatusClass6 = (level: string) => {
 };
 const initData = () => {
   if (active.value === '0') {
-    const data = {
-      nowWarningLevel: '4',
-      nowWarningLevelName: '重大危险',
-      highRiskArea: ['电白区', '信宜市'],
-      warningLevelData: [
-        { name: '重大风险', value: 0 },
-        { name: '较大风险', value: 13 },
-        { name: '一般风险', value: 23 },
-        { name: '低风险', value: 11 }
-      ]
-    };
-    hazardousChemicals.value = data;
+    getMaxHazardous().then((res) => {
+      const levelList = {
+        1: '低风险',
+        2: '一般风险',
+        3: '较大风险',
+        4: '重大风险'
+      };
+      hazardousChemicals.nowWarningLevel = res.data.max_level;
+      hazardousChemicals.nowWarningLevelName = levelList[res.data.max_level];
+    });
+    getHazardousWarrning().then((res) => {
+      hazardousChemicals.highRiskArea = res.data.result;
+    });
+    getMaxHazardousCount().then((res) => {
+      hazardousChemicals.warningLevelData = res.data.result;
+    });
   } else if (active.value === '1') {
-    raidDescribe.value =
-      '今日08时至当前，全市有5个镇街发生降雨，最大降雨出现在茂名市茂南区高山镇，累计雨量为67.0毫米。当前1小时降雨量大于50毫米的镇街0个;当前3小时降雨量大于100毫米的镇街0个';
+    getTownshipRain(durationTime.value).then((res) => {
+      res.data.forEach((item) => {
+        const result = splitWithBrackets(item.name);
+        item.name = result[0];
+        item.range = result[1];
+      });
+      rainList.value = res.data;
+    });
+    getTownshipRainWarrning().then((res) => {
+      raidDescribe.value = res.data.result;
+    });
   } else if (active.value === '2') {
-    forestFireData.value = {
-      nowLevel: '极度危险',
-      text: '2024年09月09日08时，电白区、信宜市的森林火险等级为中度危险(三级)。高州市、信宜市、化州市的森林火灾等级为轻度危险'
-    };
+    getMaxForest().then((res) => {
+      forestFireData.nowLevel = res.data.max_level;
+    });
+    getForestWarrning().then((res) => {
+      forestFireData.text = res.data.result;
+    });
   }
 };
+const splitWithBrackets = (inputString) => {
+  // 找到第一个左括号的位置
+  const firstBracketIndex = inputString.indexOf('（');
+  // 截取括号外的部分
+  const beforeBrackets = inputString.slice(0, firstBracketIndex);
+  const brackets = inputString.slice(firstBracketIndex, inputString.length);
+  return [beforeBrackets, brackets];
+};
 onMounted(() => {
   initData();
 });

src/views/routineCommandMap/RightSection/DrillRecord.vue

@@ -1,280 +0,0 @@
-<template>
-  <el-card shadow="hover">
-    <!-- <template #header>
-      <el-row :gutter="10">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
-        </el-col>
-      </el-row>
-    </template> -->
-
-    <el-table
-      v-loading="loading"
-      :default-sort="{ prop: 'startTime,endTime', order: 'descending' }"
-      :data="dataList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="培训主题" align="center" prop="theme" :show-overflow-tooltip="true" />
-      <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
-      <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
-      <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
-      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
-      <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
-        <template #default="scope">
-          <span>{{ scope.row.startTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="结束时间" sortable align="center" prop="endTime" width="160">
-        <template #default="scope">
-          <span>{{ scope.row.endTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
-      <el-table-column fixed="right" label="操作" width="100">
-        <template #default="scope">
-          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > queryParams.pageSize"
-      v-model:page="queryParams.page"
-      v-model:limit="queryParams.pageSize"
-      :total="total"
-      @pagination="getList"
-    />
-  </el-card>
-  <!-- 添加或修改培训记录配置对话框 -->
-  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="培训主题" prop="theme">
-        <el-input v-model="form.theme" placeholder="请输入培训主题" />
-      </el-form-item>
-      <el-form-item label="培训单位" prop="unitName">
-        <el-input v-model="form.unitName" placeholder="请输入培训单位" />
-      </el-form-item>
-      <el-form-item label="培训方式" prop="trainingWay">
-        <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
-          <el-option label="线上培训" value="1" />
-          <el-option label="线下培训" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="参与人数" prop="peopleNum">
-        <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
-      </el-form-item>
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
-      </el-form-item>
-      <el-form-item label="培训地点" prop="address">
-        <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
-          <template #append>
-            <div style="cursor: pointer" @click="openMapDialog">地图定位</div>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="培训内容" prop="Content">
-        <el-input v-model="form.Content" type="textarea" placeholder="请输入培训内容"></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-  <!-- 地图弹窗 -->
-  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
-</template>
-<script setup lang="ts">
-import {
-  getTrainingList,
-  addTraining,
-  updateTraining,
-  getTrainingDetail,
-  deleteTraining
-} from '@/api/riskPrevention/planManage';
-import { to } from 'await-to-js';
-import { ref } from 'vue';
-import { PlanVO } from '@/api/routineCommandMap/type';
-
-const props = defineProps({
-  id: String
-});
-
-const formRef = ref<ElFormInstance>();
-const ids = ref<string[]>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const selectedRow = ref<PlanVO | null>(null);
-const dataList = ref([]);
-const loading = ref(true);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['update:modelValue', 'getList']);
-let visible = ref(false);
-let buttonLoading = ref(false);
-let title = ref('');
-const queryParams = reactive({
-  page: 1,
-  pageSize: 10
-});
-const form = ref({
-  trainingId: '',
-  theme: '',
-  unitName: '',
-  address: '',
-  lon: '',
-  lat: '',
-  startTime: '',
-  endTime: '',
-  peopleNum: '',
-  Content: '',
-  trainingWay: ''
-});
-const rules = reactive({
-  theme: [{ required: true, message: '培训主题不能为空', trigger: 'blur' }],
-  unitName: [{ required: true, message: '培训单位不能为空', trigger: 'blur' }],
-  peopleNum: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
-  trainingWay: [{ required: true, message: '培训方式不能为空', trigger: 'blur' }],
-  address: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
-  Content: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
-  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
-  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
-});
-
-// 获取列表数据
-const getList = () => {
-  loading.value = true;
-  getTrainingList({ ...queryParams, planNum: props.id })
-    .then((res) => {
-      dataList.value = res.data;
-      total.value = res.total;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-};
-
-watch(
-  () => props.id,
-  () => {
-    if (props.id) {
-      getList();
-    }
-  },
-  {
-    immediate: true
-  }
-);
-
-/** 重置操作表单 */
-const reset = () => {
-  form.value = {
-    trainingId: '',
-    theme: '',
-    unitName: '',
-    address: '',
-    lon: '',
-    lat: '',
-    startTime: '',
-    endTime: '',
-    peopleNum: '',
-    Content: '',
-    trainingWay: ''
-  };
-  formRef.value?.resetFields();
-};
-/** 取消按钮 */
-const cancel = () => {
-  resetForm();
-  visible.value = false;
-};
-
-/**
- * 关闭用户弹窗
- */
-const closeDialog = () => {
-  emits('update:modelValue', false);
-  resetForm();
-};
-
-const resetForm = () => {
-  formRef.value?.resetFields();
-  formRef.value?.clearValidate();
-};
-
-const handleUpdate = async (row) => {
-  if (row) {
-    resetForm();
-    const res = await getTrainingDetail(row.trainingId);
-    form.value = res.data;
-    visible.value = true;
-    title.value = '修改培训记录';
-  }
-};
-
-const handleAdd = () => {
-  resetForm();
-  visible.value = true;
-  title.value = '添加培训记录';
-};
-
-/**提交按钮 */
-const submitForm = () => {
-  formRef.value?.validate(async (valid) => {
-    if (valid) {
-      try {
-        buttonLoading.value = true;
-        form.value.trainingId ? await updateTraining({ ...form.value, planId: props.id }) : await addTraining({ ...form.value, planId: props.id });
-        proxy?.$modal.msgSuccess(form.value.trainingId ? '修改成功' : '新增成功');
-        visible.value = false;
-        getList();
-      } finally {
-        buttonLoading.value = false;
-      }
-    }
-  });
-};
-
-const handleSelectionChange = (selection) => {
-  ids.value = selection.map((item) => item.trainingId);
-  selectedRow.value = selection.length === 1 ? selection[0] : null;
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
-const handleDelete = async (row) => {
-  const deleteIds = row && row.trainingId ? [row?.trainingId] : ids.value;
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的培训记录？') as any);
-  if (!err) {
-    await deleteTraining(deleteIds);
-    getList();
-    proxy?.$modal.msgSuccess('删除成功');
-  }
-};
-
-// 地图定位
-const mapDialogVisible = ref(false);
-const openMapDialog = () => {
-  mapDialogVisible.value = true;
-};
-const handleMapChange = (data) => {
-  form.value.address = data.address;
-  form.value.lon = data.lnglat[0];
-  form.value.lat = data.lnglat[1];
-  mapDialogVisible.value = false;
-};
-</script>

src/views/routineCommandMap/RightSection/KnowledgeDialog.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="app-container">
-    <transition name="fade">
-      <div class="mb-[10px]">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-          <el-form-item style="width: 200px" label="事件类型" prop="eventType">
-            <el-select v-model="queryParams.eventType" placeholder="全部" clearable>
-              <el-option label="全部" value=""></el-option>
-              <el-option v-for="dict in mm_event_type" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="发布日期" prop="publishDate">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="YYYY-MM-DD"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-input v-model="queryParams.summary" placeholder="请输入报告的关键词/主题词" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </transition>
-
-    <!--      表格组件-->
-    <el-table v-loading="loading" :data="knowledgeList">
-      <el-table-column label="报告编号" align="center" prop="reportId" />
-      <el-table-column label="报告名称" align="center" prop="reportName" />
-      <el-table-column label="主题词" align="center" prop="summary" />
-      <el-table-column label="事件类型" align="center" prop="eventType" />
-      <el-table-column label="摘要" align="center" prop="summary" />
-      <el-table-column label="来源单位" align="center" prop="publishingUnit" />
-      <el-table-column label="发布日期" align="center" prop="publishDate" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-tooltip content="查看" placement="top">
-            <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
-  </div>
-</template>
-
-<script lang="ts" setup name="KnowledgeDialog">
-import { getReportsList } from '@/api/routineCommandMap';
-import { parseTime } from '@/utils/ruoyi';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { mm_event_type } = toRefs<any>(proxy?.useDict('mm_event_type'));
-const queryFormRef = ref();
-let loading = ref(false);
-let total = ref(0);
-let dateRange = ref(['', '']);
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  sortBy: 'publishDate',
-  sortOrder: 'desc',
-  summary: '',
-  eventType: ''
-});
-let knowledgeList = ref([]);
-let showDetailDialog = ref(false);
-let detailData = ref({});
-
-// 查询列表数据
-const getList = () => {
-  getReportsList(proxy?.addDateRange(queryParams, dateRange.value)).then((res) => {
-    res.data.forEach((item) => {
-      item.publishDate = parseTime(item.publishDate);
-      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
-    });
-    knowledgeList.value = res.data;
-  });
-};
-
-// 搜索
-const handleQuery = () => {
-  queryParams.pageNum = 1;
-  getList();
-};
-
-// 重置
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-// 显示应急知识库详情
-const handleView = (row) => {
-  showDetailDialog.value = true;
-};
-
-onMounted(() => {
-  getList();
-});
-</script>
-
-<style lang="scss" scoped></style>

src/views/routineCommandMap/RightSection/TrainingRecord.vue

@@ -1,279 +0,0 @@
-<template>
-  <el-card shadow="hover">
-    <!-- <template #header>
-      <el-row :gutter="10">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
-        </el-col>
-      </el-row>
-    </template> -->
-
-    <el-table
-      v-loading="loading"
-      :default-sort="{ prop: 'startTime,endTime', order: 'descending' }"
-      :data="dataList"
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="培训主题" align="center" prop="theme" :show-overflow-tooltip="true" />
-      <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
-      <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
-      <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
-      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
-      <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
-        <template #default="scope">
-          <span>{{ scope.row.startTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="结束时间" sortable align="center" prop="endTime" width="160">
-        <template #default="scope">
-          <span>{{ scope.row.endTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
-      <el-table-column fixed="right" label="操作" width="100">
-        <template #default="scope">
-          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > queryParams.pageSize"
-      v-model:page="queryParams.page"
-      v-model:limit="queryParams.pageSize"
-      :total="total"
-      @pagination="getList"
-    />
-  </el-card>
-  <!-- 添加或修改培训记录配置对话框 -->
-  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="培训主题" prop="theme">
-        <el-input v-model="form.theme" placeholder="请输入培训主题" />
-      </el-form-item>
-      <el-form-item label="培训单位" prop="unitName">
-        <el-input v-model="form.unitName" placeholder="请输入培训单位" />
-      </el-form-item>
-      <el-form-item label="培训方式" prop="trainingWay">
-        <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
-          <el-option label="线上培训" value="1" />
-          <el-option label="线下培训" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="参与人数" prop="peopleNum">
-        <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
-      </el-form-item>
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
-      </el-form-item>
-      <el-form-item label="培训地点" prop="address">
-        <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
-          <template #append>
-            <div style="cursor: pointer" @click="openMapDialog">地图定位</div>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="培训内容" prop="Content">
-        <el-input v-model="form.Content" type="textarea" placeholder="请输入培训内容"></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-  <!-- 地图弹窗 -->
-  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
-</template>
-<script setup lang="ts">
-import {
-  getTrainingList,
-  addTraining,
-  updateTraining,
-  getTrainingDetail,
-  deleteTraining
-} from '@/api/riskPrevention/planManage';
-import { to } from 'await-to-js';
-import { ref } from 'vue';
-import { PlanVO } from '@/api/system/user/types';
-
-const props = defineProps({
-  id: String
-});
-
-const formRef = ref<ElFormInstance>();
-const ids = ref<string[]>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const selectedRow = ref<PlanVO | null>(null);
-const dataList = ref([]);
-const loading = ref(true);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['update:modelValue', 'getList']);
-let visible = ref(false);
-let buttonLoading = ref(false);
-let title = ref('');
-const queryParams = reactive({
-  page: 1,
-  pageSize: 10
-});
-const form = ref({
-  trainingId: '',
-  theme: '',
-  unitName: '',
-  address: '',
-  lon: '',
-  lat: '',
-  startTime: '',
-  endTime: '',
-  peopleNum: '',
-  Content: '',
-  trainingWay: ''
-});
-const rules = reactive({
-  theme: [{ required: true, message: '培训主题不能为空', trigger: 'blur' }],
-  unitName: [{ required: true, message: '培训单位不能为空', trigger: 'blur' }],
-  peopleNum: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
-  trainingWay: [{ required: true, message: '培训方式不能为空', trigger: 'blur' }],
-  address: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
-  Content: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
-  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
-  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
-});
-
-// 获取列表数据
-const getList = () => {
-  loading.value = true;
-  getTrainingList({ ...queryParams, planNum: props.id })
-    .then((res) => {
-      dataList.value = res.data;
-      total.value = res.total;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-};
-
-watch(
-  () => props.id,
-  () => {
-    if (props.id) {
-      getList();
-    }
-  },
-  {
-    immediate: true
-  }
-);
-
-/** 重置操作表单 */
-const reset = () => {
-  form.value = {
-    trainingId: '',
-    theme: '',
-    unitName: '',
-    address: '',
-    lon: '',
-    lat: '',
-    startTime: '',
-    endTime: '',
-    peopleNum: '',
-    Content: '',
-    trainingWay: ''
-  };
-  formRef.value?.resetFields();
-};
-/** 取消按钮 */
-const cancel = () => {
-  resetForm();
-  visible.value = false;
-};
-
-/**
- * 关闭用户弹窗
- */
-const closeDialog = () => {
-  emits('update:modelValue', false);
-  resetForm();
-};
-
-const resetForm = () => {
-  formRef.value?.resetFields();
-  formRef.value?.clearValidate();
-};
-
-const handleUpdate = async (row) => {
-  if (row) {
-    resetForm();
-    const res = await getTrainingDetail(row.trainingId);
-    form.value = res.data;
-    visible.value = true;
-    title.value = '修改培训记录';
-  }
-};
-
-const handleAdd = () => {
-  resetForm();
-  visible.value = true;
-  title.value = '添加培训记录';
-};
-
-/**提交按钮 */
-const submitForm = () => {
-  formRef.value?.validate(async (valid) => {
-    if (valid) {
-      try {
-        buttonLoading.value = true;
-        form.value.trainingId ? await updateTraining({ ...form.value, planId: props.id }) : await addTraining({ ...form.value, planId: props.id });
-        proxy?.$modal.msgSuccess(form.value.trainingId ? '修改成功' : '新增成功');
-        visible.value = false;
-        getList();
-      } finally {
-        buttonLoading.value = false;
-      }
-    }
-  });
-};
-
-const handleSelectionChange = (selection) => {
-  ids.value = selection.map((item) => item.trainingId);
-  selectedRow.value = selection.length === 1 ? selection[0] : null;
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
-const handleDelete = async (row) => {
-  const deleteIds = row && row.trainingId ? [row?.trainingId] : ids.value;
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的培训记录？') as any);
-  if (!err) {
-    await deleteTraining(deleteIds);
-    getList();
-    proxy?.$modal.msgSuccess('删除成功');
-  }
-};
-
-// 地图定位
-const mapDialogVisible = ref(false);
-const openMapDialog = () => {
-  mapDialogVisible.value = true;
-};
-const handleMapChange = (data) => {
-  form.value.address = data.address;
-  form.value.lon = data.lnglat[0];
-  form.value.lat = data.lnglat[1];
-  mapDialogVisible.value = false;
-};
-</script>

src/views/routineCommandMap/RightSection/checkview.vue

@@ -1,147 +0,0 @@
-<template>
-  <div class="app-container">
-    <transition name="fade">
-      <div class="mb-[5px]">
-        <h3>{{ detailData.planName }}</h3>
-        <el-card shadow="hover">
-          <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
-            <el-tab-pane label="总则" name="first">
-              <div>
-                <el-row>
-                  <el-col :span="4">
-                    <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick1">
-                      <el-anchor-link href="#part1" title="编制目的" />
-                      <el-anchor-link href="#part2" title="编制依据" />
-                      <el-anchor-link href="#part3" title="适用范围" />
-                      <el-anchor-link href="#part4" title="工作原则" />
-                    </el-anchor>
-                  </el-col>
-                  <el-col :span="20">
-                    <div ref="containerRef" style="height: 300px; overflow-y: auto">
-                      <div id="part1" style="height: auto; margin-top: 20px; font-size: 14px">
-                        <h3 style="font-weight: 600">1.1 编制目的</h3>
-                        <span style="text-indent: 2em">这是内容这是内容</span>
-                      </div>
-                      <div id="part2" style="height: auto; margin-top: 15px; font-size: 14px">
-                        <h3 style="font-weight: 600">1.2 编制依据</h3>
-                        <span style="text-indent: 28px">这是内容这是内容这是内容</span>
-                      </div>
-                      <div id="part3" style="height: auto; margin-top: 15px; font-size: 14px">
-                        <h3 style="font-weight: 600">1.3 适用范围</h3>
-                        <span style="text-indent: 28px">这是内容这是内容</span>
-                      </div>
-                      <div id="part4" style="height: auto; margin-top: 15px; font-size: 14px">
-                        <h3 style="font-weight: 600">1.4 工作原则</h3>
-                        <span style="text-indent: 28px">这是内容这是内容</span>
-                      </div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="组织体系" name="second">组织体系</el-tab-pane>
-            <el-tab-pane label="运行机制" name="third">运行机制</el-tab-pane>
-            <el-tab-pane label="应急保障" name="fourth">应急保障</el-tab-pane>
-            <el-tab-pane label="监督管理" name="fifth">监督管理</el-tab-pane>
-            <el-tab-pane label="附则" name="sixth">附则</el-tab-pane>
-            <el-tab-pane label="附件" name="seventh">附件</el-tab-pane>
-
-            <el-tab-pane label="培训记录" :lg="30" :xs="24">
-              <!-- <h3>培训记录</h3> -->
-              <TrainingRecord :id="planId" />
-            </el-tab-pane>
-            <el-tab-pane label="演练记录" :lg="30" :xs="24">
-              <!-- <h3>演练记录</h3> -->
-              <DrillRecord :id="planId" />
-            </el-tab-pane>
-            <el-tab-pane label="响应记录" :lg="30" :xs="24">
-              <h3>响应记录</h3>
-            </el-tab-pane>
-          </el-tabs>
-        </el-card>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { TabsPaneContext } from 'element-plus';
-import { getPlanDetail } from '@/api/riskPrevention/planManage';
-import { UserVO, UserForm, PlanVO, PlanForm } from '@/api/routineCommandMap/type';
-import { addDateRange } from '@/utils/ruoyi';
-import { getTrainingList } from '@/api/routineCommandMap/index';
-import DrillRecord from '@/views/routineCommandMap/RightSection/DrillRecord.vue';
-import TrainingRecord from '@/views/routineCommandMap/RightSection/TrainingRecord.vue';
-
-const router = useRouter();
-const showSearch = ref(true);
-const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
-const dataList = ref([]);
-// const loading = ref(true);
-const demoList = ref<PlanVO[]>([]);
-
-let visible = ref(false);
-const demoFormRef = ref(null);
-const total = ref(0);
-const containerRef = ref<HTMLElement | null>(null);
-const activeName = ref('first');
-
-const handleClick2 = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
-};
-
-const handleClick1 = (e: MouseEvent) => {
-  e.preventDefault();
-};
-
-const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  planId: String
-  //   data: form
-});
-
-
-
-/***培训记录编辑界面时间选择 */
-const route = useRoute();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
-
-// 预案编辑
-let detailData = ref({
-  planId: '',
-  planName: '',
-  planType: '',
-  publishDate: '',
-  organizingUnit: '',
-  document: '',
-  fileList: []
-});
-
-const getList = async () => {
-  loading.value = true;
-  const res = await getTrainingList(addDateRange(props.planId, dateRange.value));
-  demoList.value = res.data;
-  total.value = res.total;
-  dataList.value = res.data;
-};
-
-onMounted(() => {
-  getList();
-  getPlanDetail(props.planId).then((res) => {
-    detailData.value = res.data;
-  });
-});
-</script>
-
-<style lang="scss" scoped>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-</style>

src/views/routineCommandMap/RightSection/index.vue

@@ -13,30 +13,30 @@
           <i class="year-icon" />
           <div class="box-flex">
             <div class="text-box">
-              <div class="gradient-text3 text1">{{ statisticalData.year }}</div>
+              <div class="gradient-text3 text1">{{ statisticalData.nf_value }}</div>
               <div class="text2">件</div>
             </div>
-            <div class="text3">{{ queryParams.year }}年度</div>
+            <div class="text3">{{ statisticalData.nf }}年度</div>
           </div>
         </div>
         <div class="box-item">
           <i class="month-icon" />
           <div class="box-flex">
             <div class="text-box">
-              <div class="gradient-text3 text1">{{ statisticalData.season }}</div>
+              <div class="gradient-text3 text1">{{ statisticalData.jd_value }}</div>
               <div class="text2">件</div>
             </div>
-            <div class="text3">第三季度</div>
+            <div class="text3">{{ statisticalData.jd }}</div>
           </div>
         </div>
         <div class="box-item">
           <i class="month-icon" />
           <div class="box-flex">
             <div class="text-box">
-              <div class="text4">{{ statisticalData.month }}</div>
+              <div class="text4">{{ statisticalData.yf_value }}</div>
               <div class="text2">件</div>
             </div>
-            <div class="text3">9月份</div>
+            <div class="text3">{{ statisticalData.yf }}</div>
           </div>
         </div>
       </div>
@@ -54,14 +54,16 @@
           <div class="table-content">
             <div v-for="(item, index) in eventTypeData" :key="index" class="tr">
               <div class="td">
-                <div :class="['0', '1'].includes(item.event_type) ? 'td-icon' : 'td-icon2'"></div>
+                <div :class="['0'].includes(item.event_type) ? 'td-icon' : 'td-icon2'"></div>
               </div>
-              <div class="td">{{ item.name }}</div>
               <div class="td">
-                <div :class="['0', '1'].includes(item.event_type) ? 'td-text1' : 'td-text2'">{{ item.value }}</div>
+                <dict-tag :options="mm_event_type" :value="item.event_type" />
+              </div>
+              <div class="td">
+                <div :class="['0'].includes(item.event_type) ? 'td-text1' : 'td-text2'">{{ item.cn }}</div>
                 件
               </div>
-              <div class="td td-text2">{{ item.percent }}</div>
+              <div class="td td-text2">{{ item.ratio ? item.ratio + '%' : '' }}</div>
             </div>
           </div>
         </div>
@@ -75,74 +77,87 @@
 import EventReport from './EventReport/index.vue';
 import { option1 } from './chartOptions';
 import BigNumber from 'bignumber.js';
+import { getEventCount, getEventTypeCount } from '@/api/duty/eventing';
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { mm_event_type } = toRefs<any>(
+  proxy?.useDict('mm_event_type')
+);
 const queryParams = reactive({
   year: '2024'
 });
 const yearOptions = reactive([{ name: '2024', value: '2024' }]);
 const statisticalData = ref({
-  year: '',
-  season: '',
-  month: ''
+  nf: '',
+  nf_value: '',
+  jd: '',
+  jd_value: '',
+  yf: '',
+  yf_value: ''
 });
 const chartOption1 = ref(option1);
 const eventTypeData = ref([]);
 const colorList = reactive(['#247dff', '#00fde7']);
 const initData = () => {
-  statisticalData.value = {
-    year: '18',
-    season: '12',
-    month: '5'
-  };
-  const data = [
-    { name: '自然灾害', value: 750, percent: '75%', event_type: '0' },
-    { name: '安全灾害', value: 250, percent: '25%', event_type: '2' }
-  ];
-  eventTypeData.value = data;
-  const placeHolderStyle = {
-    label: {
-      show: false
-    },
-    labelLine: {
-      show: false
-    },
-    color: 'rgba(0, 0, 0, 0)',
-    borderColor: 'rgba(0, 0, 0, 0)',
-    borderWidth: 0
-  };
-  let total = 0;
-  data.forEach((item) => {
-    total += item.value;
+  getEventCount({
+    query: {
+      year_n: queryParams.year
+    }
+  }).then((res) => {
+    statisticalData.value = res.rows;
   });
-  const transparentData = {
-    value: new BigNumber(total).multipliedBy(0.02).toNumber(),
-    name: '',
-    itemStyle: placeHolderStyle
-  };
-  const len = data.length;
-  const chartData = [];
-  const chartData2 = [];
-  for (let i = 0; i < len; i++) {
-    chartData.push({
-      name: data[i].name,
-      value: data[i].value,
-      itemStyle: {
-        color: ['0', '1'].includes(data[i].event_type) ? colorList[0] : colorList[1]
-      }
-    });
-    chartData2.push({
-      name: data[i].name,
-      value: data[i].value,
-      itemStyle: {
-        color: ['0', '1'].includes(data[i].event_type) ? colorList[0] : colorList[1],
-        opacity: 0.1
-      }
+  getEventTypeCount({
+    query: {
+      year_n: queryParams.year
+    }
+  }).then((res) => {
+    const data = res.rows;
+    eventTypeData.value = data;
+    const placeHolderStyle = {
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      color: 'rgba(0, 0, 0, 0)',
+      borderColor: 'rgba(0, 0, 0, 0)',
+      borderWidth: 0
+    };
+    let total = 0;
+    data.forEach((item) => {
+      total += item.cn;
     });
-    chartData.push(transparentData);
-    chartData2.push(transparentData);
-  }
-  chartOption1.value.series[0].data = chartData;
-  chartOption1.value.series[1].data = chartData2;
+    const transparentData = {
+      value: new BigNumber(total).multipliedBy(0.02).toNumber(),
+      name: '',
+      itemStyle: placeHolderStyle
+    };
+    const len = data.length;
+    const chartData = [];
+    const chartData2 = [];
+    for (let i = 0; i < len; i++) {
+      chartData.push({
+        // name: data[i].name,
+        value: data[i].cn,
+        itemStyle: {
+          color: ['0'].includes(data[i].event_type) ? colorList[0] : colorList[1]
+        }
+      });
+      chartData2.push({
+        // name: data[i].name,
+        value: data[i].cn,
+        itemStyle: {
+          color: ['0'].includes(data[i].event_type) ? colorList[0] : colorList[1],
+          opacity: 0.1
+        }
+      });
+      chartData.push(transparentData);
+      chartData2.push(transparentData);
+    }
+    chartOption1.value.series[0].data = chartData;
+    chartOption1.value.series[1].data = chartData2;
+  });
 };
 onMounted(() => {
   initData();

src/views/routineCommandMap/RightSection/planManageDialog.vue

@@ -1,305 +0,0 @@
-<template>
-  <Dialog v-model="localValue" custom-show type="xl" title="预案管理列表" hide-footer @close="handleClose">
-    <transition name="fade">
-      <div v-if="isFormVisible" class="mb-[20px]">
-        <el-form ref="queryFormRef" :model="planForm" :inline="true">
-          <el-row :gutter="20">
-            <!-- 预案类型 -->
-            <el-col :span="6">
-              <el-form-item label="预案类型" prop="planType" label-width="200px">
-                <el-select
-                  v-model="planForm.planType"
-                  placeholder="全部"
-                  class="custom-select"
-                  :teleported="false"
-                  size="large"
-                  popper-class="custom-select-popper"
-                  clearable
-                >
-                  <el-option label="全部" value=""></el-option>
-                  <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <!-- 发布日期 -->
-            <el-col :span="6">
-              <el-form-item label="发布日期" prop="publish_date" label-width="200px">
-                <el-date-picker
-                  v-model="dateRange"
-                  type="date"
-                  range-separator="-"
-                  placeholder="选择发布日期"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  value-format="YYYY-MM-DD"
-                  class="common-date-picker"
-                  popper-class="common-date-popper"
-                  :teleported="false"
-                  style="width: 100%"
-                ></el-date-picker>
-              </el-form-item>
-            </el-col>
-
-            <!-- 关键词搜索 -->
-            <el-col :span="6">
-              <el-form-item label="关键词" label-width="200px">
-                <el-input
-                  v-model="planForm.keywords"
-                  class="custom-input2"
-                  placeholder="请输入预案名称/编制单位"
-                  clearable
-                  style="width: 600px"
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item>
-            </el-col>
-
-            <!-- 操作按钮 -->
-            <el-col :span="6">
-              <div class="flex" style="align-items: flex-start">
-                <div class="common-btn-primary" style="margin-top: -32px" @click="handleQuery">搜索</div>
-                <div class="common-btn" style="margin-left: 10px" @click="resetQuery">重置</div>
-              </div>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </transition>
-
-    <!-- 表格组件 -->
-    <div class="common-table">
-      <div class="table-header">
-        <div class="td">预案编号</div>
-        <div class="td">预案名称</div>
-        <div class="td">预案类型</div>
-        <div class="td">发文字号</div>
-        <div class="td">编制单位</div>
-        <div class="td">发布日期</div>
-        <div class="td">操作</div>
-      </div>
-      <div v-for="(item, index) in demoList" :key="index" class="tr">
-        <div class="td">{{ item.planId }}</div>
-        <div class="td">{{ item.planName }}</div>
-        <!--        <div class="td">{{ item.planType }}</div>-->
-        <div v-if="item.planType === '1' || item.planType === '2' || item.planType === '3'" class="flex">
-          <template v-if="item.planType === '1'">
-            <div>总体应急预案</div>
-          </template>
-          <template v-if="item.planType === '2'">
-            <div>专项应急预案</div>
-          </template>
-          <template v-if="item.planType === '3'">
-            <div>部门应急预案</div>
-          </template>
-        </div>
-        <div class="td">{{ item.document }}</div>
-        <div class="td">{{ item.organizingUnit }}</div>
-        <div class="td">{{ item.publishDate }}</div>
-        <div class="td">
-          <div class="common-btn2" @click="showDetail(item)">查看</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 底部分页 -->
-    <div class="footer">
-      <pagination
-        v-show="total > 0"
-        v-model:page="planForm.pageNum"
-        v-model:limit="planForm.pageSize"
-        :total="total"
-        layout="total, prev, pager, next"
-        @pagination="getList"
-      />
-    </div>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, defineProps, defineEmits, toRefs } from 'vue';
-import { useRouter } from 'vue-router';
-import { parseTime } from '@/utils/ruoyi';
-import { getEmergencyPlanList } from '@/api/routineCommandMap';
-
-// 定义props和emit
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  }
-});
-const emit = defineEmits(['update:modelValue']);
-
-// 内部局部状态来控制弹窗显示
-const localValue = ref(props.modelValue);
-
-// 监听外部的 modelValue 变化，并同步到本地的 localValue
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    localValue.value = newVal;
-  }
-);
-
-// 在关闭弹窗时，发出事件通知父组件更新 modelValue
-const handleClose = () => {
-  emit('update:modelValue', false);
-};
-
-// 数据管理
-const demoList = ref<any[]>([]);
-const loading = ref(false);
-const total = ref(0);
-const dateRange = ref<[string, string]>(['', '']);
-const planForm = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  planType: '',
-  keywords: '',
-  sortBy: 'publish_date',
-  sortOrder: 'desc'
-});
-const isFormVisible = ref(true);
-
-const router = useRouter();
-onMounted(() => {
-  getList();
-});
-const proxy = getCurrentInstance()?.proxy;
-const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
-// 获取列表
-const getList = () => {
-  loading.value = true;
-  const params = {
-    ...planForm,
-    startDate: dateRange.value[0],
-    endDate: dateRange.value[1]
-  };
-  // 获取预案列表
-  getEmergencyPlanList(params).then((res) => {
-    demoList.value = res.data;
-    total.value = res.total;
-    loading.value = false;
-  });
-};
-// 查询
-const handleQuery = () => {
-  planForm.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  planForm.pageNum = 1;
-  planForm.planType = '';
-  planForm.keywords = '';
-  dateRange.value = ['', ''];
-  getList();
-};
-
-// 显示预案详情
-const handleView = (row: PlanVO) => {
-  router.push({
-    path: '/riskPrevention/planManage/planList',
-    query: { planId: row.planId }
-  });
-};
-</script>
-<style lang="scss" scoped>
-.dialog-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 2000;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
-  }
-  .dialog {
-    width: 5000px;
-    height: 2000px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 20px;
-  }
-}
-.dialog {
-  padding: 0 50px;
-  .dialog-header {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .icon-close {
-      cursor: pointer;
-    }
-  }
-}
-.footer {
-  height: 64px;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 30px;
-  .pagination-container {
-    height: 64px;
-    margin: 0;
-  }
-  :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
-  }
-  :deep(.el-pagination) {
-    .btn-next,
-    .btn-prev {
-      background-color: transparent;
-      border: none;
-      .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
-      }
-    }
-    .btn-prev:disabled,
-    .btn-next:disabled {
-      background-color: transparent;
-      border: none;
-    }
-    .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
-      text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
-      &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
-      }
-    }
-    .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
-    }
-  }
-}
-.flex {
-  display: flex;
-  align-items: flex-start;
-}
-</style>