减灾能力、自然灾害承灾体、气象灾害

src/assets/styles/index.scss

@@ -609,6 +609,7 @@ aside {
 }
 
 .common-table {
+  width: 100%;
   .table-header {
     width: 100%;
     min-height: 31px;

src/components/Map/YztMap/DistributionMap.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="containerRef" class="map-container">
     <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
-    <div class="level-box">
+    <div v-if="!hideLegend" class="level-box">
       <i class="left-decoration" />
       <div class="box">
         <div v-show="!hideBox" class="box2">
@@ -31,6 +31,7 @@ interface Props {
   points?: [];
   distributionData?: [];
   legendTitle?: string;
+  hideLegend?: boolean;
 }
 const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {

src/components/Map/YztMap/DrawMap.vue

@@ -0,0 +1,210 @@
+<template>
+  <div ref="containerRef" class="map-container">
+    <div id="YztMap" ref="mapRef" class="map-container" :style="{ width: width, height: height }"></div>
+    <div class="tool-box">
+      <i class="left-decoration" />
+      <div class="box">
+        <div v-for="(item, index) in toolMenu" :key="index" class="box-item">
+          <div :class="item.value"></div>
+        </div>
+      </div>
+      <i class="right-decoration" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'ol/ol.css';
+import mmJson from '@/assets/json/mm.json';
+import { olMap } from '@/utils/olMap/olMap';
+interface Props {
+  activeMap: string;
+  points?: [];
+}
+const containerScale = inject('containerScale');
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:drawing', 'selectGraphics']);
+
+let toolMenu = ref([
+  { name: '圆形', value: 'circle' },
+  { name: '矩形', value: 'rect' },
+  { name: '多边形', value: 'polygon' },
+  { name: '撤销', value: 'cancel' },
+  { name: '删除', value: 'delete' },
+  { name: '移动', value: 'move' }
+]);
+const mapRef = ref(null);
+const mapState = reactive({
+  center: [110.925175, 22],
+  zoom: 9.5,
+  minZoom: 6,
+  maxZoom: 16,
+  isThreeDimensional: false,
+  // 是否显示比例尺
+  showScale: true
+});
+const containerRef = ref();
+const width = ref('100%');
+const height = ref('100%');
+let yztMap, map;
+
+// 监听地图类型变化
+watch(
+  () => props.activeMap,
+  () => {
+    if (!map) return;
+    const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
+    map.replaceLayers(id);
+  }
+);
+watch(
+  () => props.points,
+  () => {
+    if (props.points) {
+      map.addMarker(props.points);
+    }
+  },
+  {
+    deep: true
+  }
+);
+
+const init = () => {
+  const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
+  map = new olMap({
+    dom: mapRef.value,
+    id: id,
+    center: mapState.center,
+    zoom: mapState.zoom,
+    minZoom: mapState.minZoom,
+    maxZoom: mapState.maxZoom,
+    // 加载完成事件
+    onLoadCompleted: (yMap) => {
+      yztMap = yMap;
+      map.createVecByJson(mmJson, '茂名市');
+      handleResize();
+      map.addMarker(props.points);
+    }
+  });
+};
+const addMarker = (points) => {
+  map.addMarker(points);
+};
+const clearMarker = () => {
+  map.clearMarker();
+};
+
+defineExpose({ addMarker, clearMarker });
+const handleResize = () => {
+  let containerScaleData = !!containerScale
+    ? containerScale()
+    : {
+        scaleX: 1,
+        scaleY: 1
+      };
+  const containerWidth = containerRef.value.clientWidth * containerScaleData.scaleX;
+  const containerHeight = containerRef.value.clientHeight * containerScaleData.scaleY;
+  width.value = containerWidth + 'px';
+  height.value = containerHeight + 'px';
+  yztMap.updateSize();
+};
+// 加载事件
+onMounted(() => {
+  init();
+  window.addEventListener('resize', handleResize);
+});
+// 卸载事件
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  .tool-box {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    .box {
+      width: 377px;
+      height: 53px;
+      background: url('@/assets/images/censusDataAnalysis/box3.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      .box-item {
+        width: 59px;
+        height: 43px;
+        background: url('@/assets/images/censusDataAnalysis/box6.png') no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 3px;
+        .circle {
+          width: 37px;
+          height: 31px;
+          background: url('@/assets/images/map/circle2.png');
+          background-size: 100% 100%;
+        }
+        .rect {
+          width: 39px;
+          height: 29px;
+          background: url('@/assets/images/map/rect.png');
+          background-size: 100% 100%;
+        }
+        .polygon {
+          width: 39px;
+          height: 27px;
+          background: url('@/assets/images/map/polygon.png');
+          background-size: 100% 100%;
+        }
+        .cancel {
+          width: 44px;
+          height: 36px;
+          background: url('@/assets/images/map/cancel.png');
+          background-size: 100% 100%;
+        }
+        .delete {
+          width: 36px;
+          height: 36px;
+          background: url('@/assets/images/map/delete.png');
+          background-size: 100% 100%;
+        }
+        .move {
+          width: 35px;
+          height: 35px;
+          background: url('@/assets/images/map/move.png');
+          background-size: 100% 100%;
+        }
+        &:first-child {
+          margin-left: 2px;
+        }
+      }
+    }
+    .left-decoration {
+      display: inline-block;
+      width: 6px;
+      height: 58px;
+      background: url('@/assets/images/censusDataAnalysis/decoration1.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .right-decoration {
+      display: inline-block;
+      width: 5px;
+      height: 58px;
+      background: url('@/assets/images/censusDataAnalysis/decoration2.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/types/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
+    DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
     ElAnchor: typeof import('element-plus/es')['ElAnchor']
     ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']

src/views/censusDataAnalysis/DisasterReduction/RightSection.vue

@@ -3,10 +3,11 @@
     <div class="data-box1" style="margin-top: 9px">
       <div class="title-box">
         <div class="gradient-text">区县级减灾能力评估排行</div>
-      </div>
-      <div class="box-content">
         <div class="btn" @click="showExportReport = true">综合分析报告</div>
       </div>
+      <div class="box-content" style="padding: 5px 0 5px 5px; height: 220px">
+        <Chart :option="option1" />
+      </div>
     </div>
     <div class="data-box1" style="margin-top: 9px">
       <div class="title-box">
@@ -62,6 +63,61 @@ let colorText = ref([
   { text: '中高风险', color: '#f07d00' },
   { text: '极高风险', color: '#aa0d1c' }
 ]);
+let option1 = reactive({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  color: ['#3372f7'],
+  grid: {
+    top: '15px',
+    left: '10px',
+    right: '20px',
+    bottom: '10px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value',
+    boundaryGap: [0, 0.01],
+    axisLabel: {
+      color: '#9a9ea7'
+    },
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#2b3446'
+      }
+    }
+  },
+  yAxis: {
+    type: 'category',
+    inverse: true,
+    axisLine: {
+      lineStyle: {
+        color: '#2b3446'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#9a9ea7'
+    },
+    data: []
+  },
+  series: [
+    {
+      type: 'bar',
+      barWidth: 15,
+      data: [182, 234, 290, 104, 131, 630]
+    }
+  ]
+});
 // 风险分布
 let riskDistributionState = reactive({
   showLevel: '1',
@@ -123,6 +179,9 @@ const getData = () => {
     { area: '化州区', data1: '较强', data2: '较强', data3: '较强', data4: '较强', data5: '较强' },
     { area: '信宜区', data1: '中等', data2: '中等', data3: '中等', data4: '中等', data5: '中等' }
   ];
+
+  option1.yAxis.data = ['茂南区', '电白区', '高州区', '化州区', '信宜区'];
+  option1.series[0].data = [0.81, 0.72, 0.58, 0.52, 0.47];
 };
 const parseTime2 = (dateStr) => {
   if (!dateStr) return '';
@@ -166,19 +225,17 @@ onMounted(() => {
     .title-box {
       width: 516px;
       height: 40px;
-      background: url('@/assets/images/censusDataAnalysis/titleBox.png') no-repeat;
+      background: url('@/assets/images/censusDataAnalysis/titleBox4.png') no-repeat;
       background-size: 100% 100%;
       padding-left: 50px;
+      position: relative;
       .gradient-text {
         font-size: 24px;
       }
-    }
-    .box-content {
-      min-height: 123px;
-      background: url('@/assets/images/censusDataAnalysis/box.png') no-repeat;
-      background-size: 100% 100%;
-      padding: 5px 28px;
       .btn {
+        position: absolute;
+        top: 0;
+        right: 0;
         width: 106px;
         height: 40px;
         background: url('@/assets/images/censusDataAnalysis/btn.png') no-repeat;
@@ -191,6 +248,12 @@ onMounted(() => {
         padding-left: 15px;
         cursor: pointer;
       }
+    }
+    .box-content {
+      min-height: 123px;
+      background: url('@/assets/images/censusDataAnalysis/box.png') no-repeat;
+      background-size: 100% 100%;
+      padding: 5px 28px;
       .box1 {
         display: flex;
         align-items: center;

src/views/censusDataAnalysis/DisasterReduction/index.vue

@@ -100,7 +100,7 @@ let mapTime = ref('');
 let distributionData = ref([]);
 let points = ref([]);
 let rightTabs = ref([
-  { name: '风险实时分析', value: '1', icon: '' },
+  { name: '减灾能力评估', value: '1', icon: '' },
   { name: '历史分析', value: '2', icon: '' }
 ]);
 // 点击图层分析

src/views/censusDataAnalysis/MeteorologicalCalamity/RightSection.vue

@@ -497,7 +497,7 @@ onMounted(() => {
           //&:nth-child(3) {
           //  margin-top: 0;
           //}
-          &:nth-child(3n + 1) {
+          &:nth-child(4n + 1) {
             margin-left: 0;
           }
           .text1 {

src/views/censusDataAnalysis/NaturalDisaster/RightSection.vue

@@ -4,14 +4,25 @@
       <div class="title-box">
         <div class="gradient-text">公共服务承灾体总数</div>
       </div>
+      <div class="box-content" style="padding: 5px 0 5px 5px; height: 195px">
+        <div class="box4">
+          <div v-for="(item, index) in riskData" :key="index" class="item" :style="{ backgroundImage: `url(${item.icon})` }">
+            <div class="text1">{{ item.name }}</div>
+            <div class="text2">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="data-box1" style="margin-top: 9px">
-      <div class="title-box">
+      <div class="title-box2">
         <div class="gradient-text">茂名市公共服务承灾体数量</div>
       </div>
+      <div class="box-content" style="padding: 5px 0 5px 5px; height: 220px">
+        <Chart :option="option1" />
+      </div>
     </div>
     <div class="data-box1" style="margin-top: 9px">
-      <div class="title-box">
+      <div class="title-box3">
         <div class="gradient-text">茂名市公共服务承灾体数量统计表</div>
       </div>
       <div class="box-content" style="padding: 5px 0 5px 5px; height: 255px">
@@ -31,87 +42,90 @@
         </div>
       </div>
     </div>
-    <Dialog v-model="showExportReport" type="xs" title="导出综合分析报告" hide-footer>
-      <div class="flex-box">
-        <div class="icon-chart"></div>
-        <div>暂无数据导出</div>
-      </div>
-    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup name="RightSection">
-import { setHighText } from '@/utils';
-const props = defineProps({
-  time: String
-});
-let showExportReport = ref(false);
-let riskOverviewData = ref({
-  time1: '',
-  time2: '',
-  text: ''
-});
-let colorText = ref([
-  { text: '低风险', color: '#40c75f' },
-  { text: '中低风险', color: '#3180f6' },
-  { text: '中风险', color: '#efec93' },
-  { text: '中高风险', color: '#f07d00' },
-  { text: '极高风险', color: '#aa0d1c' }
+import { getImageUrl1 } from './data';
+
+let riskData = reactive([
+  { name: '学校', value: '1', icon: getImageUrl1('school2') },
+  { name: '医疗卫生机构', value: '1', icon: getImageUrl1('hospital2') },
+  { name: '提供住宿的社会服务机构', value: '1', icon: getImageUrl1('socialInstitution2') },
+  { name: '公共文化场所', value: '1', icon: getImageUrl1('publicPlace2') },
+  { name: '旅游景区', value: '1', icon: getImageUrl1('scenicSpot2') },
+  { name: '星级饭店', value: '1', icon: getImageUrl1('restaurant2') },
+  { name: '体育场馆', value: '1', icon: getImageUrl1('gymnasium2') },
+  { name: '宗教活动场所', value: '1', icon: getImageUrl1('religiousPlace2') },
+  { name: '大型超市', value: '1', icon: getImageUrl1('supermarket2') }
 ]);
-// 风险分布
-let riskDistributionState = reactive({
-  showLevel: '1',
-  countyLevel: [
-    { name: '极高风险区县', value: '0', icon: 'icon5', text: 'red-text' },
-    { name: '中高风险区县', value: '0', icon: 'icon4', text: 'orange-text' },
-    { name: '中风险区县', value: '0', icon: 'icon3', text: 'yellow-text' },
-    { name: '中低风险区县', value: '0', icon: 'icon2', text: 'blue-text' },
-    { name: '低风险区县', value: '0', icon: 'icon1', text: 'green-text' }
-  ],
-  townShipLevel: [
-    { name: '极高风险镇街', value: '0', icon: 'icon5', text: 'red-text' },
-    { name: '中高风险镇街', value: '0', icon: 'icon4', text: 'orange-text' },
-    { name: '中风险镇街', value: '0', icon: 'icon3', text: 'yellow-text' },
-    { name: '中低风险镇街', value: '0', icon: 'icon2', text: 'blue-text' },
-    { name: '低风险镇街', value: '0', icon: 'icon1', text: 'green-text' }
+let option1 = reactive({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  color: ['#3172f3', '#5cc4f1'],
+  legend: {
+    textStyle: {
+      color: '#9a9ea7'
+    }
+  },
+  grid: {
+    top: '25',
+    left: '10px',
+    right: '20px',
+    bottom: '10px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value',
+    boundaryGap: [0, 0.01],
+    axisLabel: {
+      color: '#9a9ea7'
+    },
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#2b3446'
+      }
+    }
+  },
+  yAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: '#2b3446'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#9a9ea7'
+    },
+    data: []
+  },
+  series: [
+    {
+      name: '星级饭店',
+      type: 'bar',
+      data: []
+    },
+    {
+      name: '旅游景点',
+      type: 'bar',
+      data: []
+    }
   ]
 });
 //
 const tableData = ref([]);
 const getData = () => {
-  const data = {
-    time1: '2024-10-31 09:00:00',
-    time2: '2024-10-31 09:00:00',
-    text: '经系统研判，当前茂名市海洋风险为低风险当前全市林火中高风险区县共有1个，为信宜市。林火中风险区县共有1个，为化州市，林火中低危险区县共有1个，为高州市，电白区、茂南区为低风险。'
-  };
-  data.text = setHighText(data.text, colorText.value);
-  riskOverviewData.value = data;
-
-  const data2 = {
-    data1: '0',
-    data2: '0',
-    data3: '21',
-    data4: '258',
-    data5: '34'
-  };
-  const data3 = {
-    data1: '0',
-    data2: '0',
-    data3: '6',
-    data4: '156',
-    data5: '6'
-  };
-  riskDistributionState.countyLevel[0].value = data2.data1;
-  riskDistributionState.countyLevel[1].value = data2.data2;
-  riskDistributionState.countyLevel[2].value = data2.data3;
-  riskDistributionState.countyLevel[3].value = data2.data4;
-  riskDistributionState.countyLevel[4].value = data2.data5;
-  riskDistributionState.townShipLevel[0].value = data3.data1;
-  riskDistributionState.townShipLevel[1].value = data3.data2;
-  riskDistributionState.townShipLevel[2].value = data3.data3;
-  riskDistributionState.townShipLevel[3].value = data3.data4;
-  riskDistributionState.townShipLevel[4].value = data3.data5;
-
   tableData.value = [
     { area: '茂南区', data1: '123', data2: '74' },
     { area: '电白区', data1: '23', data2: '12' },
@@ -119,6 +133,9 @@ const getData = () => {
     { area: '化州区', data1: '25', data2: '14' },
     { area: '信宜区', data1: '21', data2: '24' }
   ];
+  option1.yAxis.data = ['茂南区', '电白区', '高州区', '化州区', '信宜区'];
+  option1.series[0].data = [182, 234, 290, 104, 131];
+  option1.series[1].data = [193, 234, 310, 121, 134];
 };
 onMounted(() => {
   getData();
@@ -143,9 +160,29 @@ onMounted(() => {
       margin-top: -8px;
     }
     .title-box {
+      width: 450px;
+      height: 40px;
+      background: url('@/assets/images/censusDataAnalysis/titleBox6.png') no-repeat;
+      background-size: 100% 100%;
+      padding-left: 50px;
+      .gradient-text {
+        font-size: 24px;
+      }
+    }
+    .title-box2 {
       width: 516px;
       height: 40px;
-      background: url('@/assets/images/censusDataAnalysis/titleBox.png') no-repeat;
+      background: url('@/assets/images/censusDataAnalysis/titleBox4.png') no-repeat;
+      background-size: 100% 100%;
+      padding-left: 50px;
+      .gradient-text {
+        font-size: 24px;
+      }
+    }
+    .title-box3 {
+      width: 518px;
+      height: 40px;
+      background: url('@/assets/images/censusDataAnalysis/titleBox5.png') no-repeat;
       background-size: 100% 100%;
       padding-left: 50px;
       .gradient-text {

src/views/censusDataAnalysis/NaturalDisaster/index.vue

@@ -1,47 +1,6 @@
 <template>
   <div class="disaster-container">
     <div class="left-box">
-      <!--      <div class="data-box1">-->
-      <!--        <div class="title-box">-->
-      <!--          <div class="gradient-text">分析服务</div>-->
-      <!--        </div>-->
-      <!--        <div class="box-content">-->
-      <!--          <div class="btn-box">-->
-      <!--            <div :class="activeIndex === '1' ? 'text-active text' : 'text'" @click="handleClick('1')">风险分析</div>-->
-      <!--            <div class="line">|</div>-->
-      <!--            <div :class="activeIndex === '2' ? 'text-active text' : 'text'" @click="handleClick('2')">历史分析</div>-->
-      <!--          </div>-->
-      <!--          <div class="tag-box1">-->
-      <!--            <div-->
-      <!--              v-for="(item, index) in analysisServices"-->
-      <!--              :key="index"-->
-      <!--              :class="activeIndex1 === index ? 'tag-item tag-active' : 'tag-item'"-->
-      <!--              @click="handleClick1(item.value)"-->
-      <!--            >-->
-      <!--              <i :class="item.icon" />-->
-      <!--              {{ item.name }}-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </div>-->
-      <!--      </div>-->
-      <!--      <div class="data-box1">-->
-      <!--        <div class="title-box">-->
-      <!--          <div class="gradient-text">图层分析</div>-->
-      <!--        </div>-->
-      <!--        <div class="box-content2">-->
-      <!--          <div class="tag-box2">-->
-      <!--            <div-->
-      <!--              v-for="(item, index) in layerService"-->
-      <!--              :key="index"-->
-      <!--              :class="activeIndex2 === index ? 'tag-item tag-active' : 'tag-item'"-->
-      <!--              @click="handleClick2(item, index)"-->
-      <!--            >-->
-      <!--              <i :class="item.icon" />-->
-      <!--              {{ item.name }}-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </div>-->
-      <!--      </div>-->
       <div class="data-box1">
         <div class="title-box">
           <div class="gradient-text">基础服务</div>
@@ -50,19 +9,14 @@
       </div>
     </div>
     <div class="middle-box">
-      <DistributionMap :active-map="activeMap" :distribution-data="distributionData" :points="points" />
-      <div class="map-title">{{ mapTitle }}</div>
-      <div class="map-time">{{ mapTime }}</div>
+      <DrawMap :active-map="activeMap" :points="points" />
       <div class="right-tabs">
         <div v-for="(item, index) in rightTabs" :key="index" class="tab" @click="handleClick(item.value)">{{ item.name }}</div>
       </div>
     </div>
     <div class="right-box">
-      <RightSection v-show="activeIndex === '1'" id="mapId" :time="mapTime" />
-      <HistoricalAnalysis v-show="activeIndex === '2'" />
+      <RightSection v-show="activeIndex === '1'" id="mapId" />
     </div>
-    <!--风险趋势分析-->
-    <RiskTrendAnalysis v-if="showRiskTrendAnalysis" v-model="showRiskTrendAnalysis" @confirm="handleRiskConfirm" />
   </div>
 </template>
 
@@ -70,125 +24,22 @@
 // 分析服务
 import RightSection from './RightSection.vue';
 import BaseService from './BaseService.vue';
-import RiskTrendAnalysis from '@/views/censusDataAnalysis/RiskTrendAnalysis.vue';
-import { parseTime } from '@/utils/ruoyi';
-import HistoricalAnalysis from '@/views/censusDataAnalysis/HistoricalAnalysis.vue';
-import { area_map } from '@/api/censusDataAnalysis/map';
+import DrawMap from '@/components/Map/YztMap/DrawMap.vue';
 
 let activeIndex = ref('1');
-let activeIndex1 = ref(0);
-const analysisServices = ref([
-  { name: '风险实时分析', value: '1', icon: 'icon1' },
-  { name: '风险趋势分析', value: '2', icon: 'icon2' }
-]);
-let showRiskTrendAnalysis = ref(false);
 const handleClick = (value) => {
   activeIndex.value = value;
 };
-// 点击分析服务
-const handleClick1 = (index) => {
-  if (index === '2') {
-    showRiskTrendAnalysis.value = true;
-  }
-};
 
-// 图层服务
-const activeIndex2 = ref(0);
-const layerService = ref([]);
 // 中部
 // 使用地图地图
 let activeMap = ref('imageMap');
-let mapTitle = ref('');
-let mapTime = ref('');
-let distributionData = ref([]);
 let points = ref([]);
-let rightTabs = ref([
-  { name: '风险实时分析', value: '1', icon: '' },
-  { name: '历史分析', value: '2', icon: '' }
-]);
-// 点击图层分析
-const handleClick2 = (item, index) => {
-  if (activeIndex2.value === index) return;
-  activeIndex2.value = index;
-  getDistributionData();
-  console.log('点击', item);
-};
-// 分布图数据
-const getDistributionData = () => {
-  const tempData2 = [
-    {
-      name: '高',
-      color: '#ff2f3c',
-      points: []
-    },
-    {
-      name: '较高',
-      color: '#ffaf00',
-      points: [
-        [
-          // [110.718235, 21.96198],
-          // [110.796045, 22.020253],
-          // [110.915004, 21.964755],
-          // [110.727213, 21.818969],
-          // [110.597389, 22.030205],
-          // [110.677, 22.072317],
-          // [110.718235, 21.96198],
-          // [110.718235, 21.96198]
-        ],
-        [
-          // [110.891302, 22.335445],
-          // [111.02116, 22.266791],
-          // [110.893363, 22.224818],
-          // [110.823281, 22.310657],
-          // [110.891302, 22.335445]
-        ]
-      ]
-    },
-    {
-      name: '较低',
-      color: '#ffd800',
-      points: []
-    },
-    {
-      name: '低',
-      color: '#40c75f',
-      points: [
-        [
-          // [110.491302, 22.035445],
-          // [110.52116, 22.166791],
-          // [110.593363, 22.024818],
-          // [110.491302, 22.035445]
-        ]
-      ]
-    }
-  ];
-  distributionData.value = tempData2;
-};
+let rightTabs = ref([{ name: '风险实时分析', value: '1', icon: '' }]);
 // 分布图打点
 const handleChange = (data) => {
   points.value = data;
 };
-const handleRiskConfirm = (data) => {
-  mapTime.value = data.title;
-  showRiskTrendAnalysis.value = false;
-};
-// 加载数据
-const initData = () => {
-  layerService.value = [
-    { name: '森林火灾风险等级分布图', value: '1', icon: 'icon1' },
-    { name: '森林火灾减灾能力薄弱隐患等级分布图', value: '2', icon: 'icon2' },
-    { name: '森林火灾防治区划图', value: '3', icon: 'icon3' },
-    { name: '可燃物载量分布图', value: '4', icon: 'icon4' }
-  ];
-  getDistributionData();
-  const now = new Date();
-  const currentHour = now.getHours();
-  now.setHours(currentHour, 0, 0, 0);
-  mapTime.value = parseTime(now, '{y}年{m}月{d}日 {h}:{i}:{s}');
-};
-onMounted(() => {
-  initData();
-});
 </script>
 
 <style lang="scss" scoped>