历史分析

src/assets/styles/element-ui.scss

@@ -795,7 +795,6 @@
   background: rgba(5, 18, 53, 0.85) !important;
   border: 1px solid #2C81FF !important;
   border-radius: 0 !important;
-  //box-shadow:inset  0 0 10px rgba(26, 144, 255, 0.5) !important;
   .el-picker-panel {
     background: rgba(5, 18, 53, 0.85) !important;
 
@@ -804,9 +803,6 @@
   .el-date-table {
     font-size: 14px;
   }
-  //.el-date-picker {
-  //  width: 934px;
-  //}
   .el-date-picker .el-picker-panel__content {
     width: auto !important;
   }
@@ -827,9 +823,6 @@
     color: #b1cae0;
     font-size: 14px;
   }
-  //.el-year-table td div, .el-month-table td div {
-  //  height: 95px !important;
-  //}
   .el-year-table td .cell, .el-month-table td .cell {
     color: #b1cae0;
     font-size: 14px;
@@ -840,23 +833,83 @@
   .el-date-table th {
     color: #b1cae0;
     border-bottom: 1px solid #8fa4b7;
-    //width: 76px !important;
-    //height: 76px !important;
-    //line-height: 76px !important;
   }
   .el-date-picker__header--bordered {
     border-bottom: 1px solid #8fa4b7;
   }
-  .el-date-table-cell__text {
-    //width: 76px !important;
-    //height: 76px !important;
-    //line-height: 76px !important;
+  .el-date-table td.available:hover {
+    color: #7af0e9;
+  }
+  .el-date-table td.today .el-date-table-cell__text, .el-month-table td .cell:hover, .el-year-table td.today .cell, .el-year-table td .cell:hover {
+    color: #7af0e9;
+  }
+  .el-month-table td.current:not(.disabled) .cell, .el-date-table td.current:not(.disabled) .el-date-table-cell__text,.el-year-table td.current:not(.disabled) .cell {
+    background-color: #7af0e9;
+  }
+  .el-date-table td.next-month, .el-date-table td.prev-month {
+    color: #8fa4b7;
+  }
+}
+
+.common-date-range {
+  box-shadow: none !important;
+  background-color: #0d2b5f !important;
+  .el-range__icon {
+    color: #a8ccde !important;
+  }
+  .el-range-separator {
+    color: #a8ccde !important;
   }
-  .el-date-table td .el-date-table-cell {
+  .el-range-input {
+    color: #a8ccde !important;
+  }
+}
+.common-date-range-popper {
+  background: rgba(5, 18, 53, 0.85) !important;
+  border: 1px solid #2C81FF !important;
+  border-radius: 0 !important;
+  .el-picker-panel {
+    background: rgba(5, 18, 53, 0.85) !important;
+
+    color: #b1cae0;
+  }
+  .el-date-table {
+    font-size: 14px;
+  }
+  .el-date-picker .el-picker-panel__content {
+    width: auto !important;
+  }
+  .el-date-picker__header {
+    .arrow-left, .arrow-right, .d-arrow-left, .d-arrow-right {
+      font-size: 14px;
+      color: #ffffff;
+      &:hover {
+        color: #7af0e9;
+      }
+    }
+  }
+  .el-popper__arrow:before {
+    border: 1px solid #2C81FF !important;
+    background-color: rgba(5, 18, 53, 1) !important;
+  }
+  .el-date-picker__header-label {
+    color: #b1cae0;
+    font-size: 14px;
+  }
+  .el-year-table td .cell, .el-month-table td .cell {
+    color: #b1cae0;
+    font-size: 14px;
     //width: 95px !important;
     //height: 95px !important;
     //line-height: 95px !important;
   }
+  .el-date-table th {
+    color: #b1cae0;
+    border-bottom: 1px solid #8fa4b7;
+  }
+  .el-date-picker__header--bordered {
+    border-bottom: 1px solid #8fa4b7;
+  }
   .el-date-table td.available:hover {
     color: #7af0e9;
   }
@@ -869,4 +922,7 @@
   .el-date-table td.next-month, .el-date-table td.prev-month {
     color: #8fa4b7;
   }
+  .el-icon {
+    color: #a7bfd6 !important;
+  }
 }

src/views/censusDataAnalysis/ForestFire/BaseService.vue

@@ -4,42 +4,46 @@
       <div
         v-for="(item, index) in baseService.menu"
         :key="index"
-        :class="activeIndex3 === index ? 'tag-item tag-active2' : 'tag-item'"
+        :class="activeIndex === index ? 'tag-item tag-active2' : 'tag-item'"
         @click="handleClick3(item, index)"
       >
         {{ item.name }}
       </div>
     </div>
-    <div v-for="(item, index) in baseService.dataList" :key="index" class="checked-box">
-      <div class="checked-header">
-        <div class="title-box2">
-          <div class="text1">{{ item.name }}</div>
-          <el-checkbox v-model="item.checked" label="全选" @change="() => handleCheckedAllChange(item)" />
+    <template v-if="activeIndex === 0">
+      <div v-for="(item, index) in baseService.dataList" :key="index" class="checked-box">
+        <div class="checked-header">
+          <div class="title-box2">
+            <div class="text1">{{ item.name }}</div>
+            <el-checkbox v-model="item.checked" label="全选" @change="() => handleCheckedAllChange(item)" />
+          </div>
+          <div class="expand-box" @click="item.show = !item.show">
+            <div>{{ item.show ? '收起' : '展开' }}</div>
+            <el-icon class="icon">
+              <ArrowUpBold v-show="item.show" />
+              <ArrowDownBold v-show="!item.show" />
+            </el-icon>
+          </div>
         </div>
-        <div class="expand-box" @click="item.show = !item.show">
-          <div>{{ item.show ? '收起' : '展开' }}</div>
-          <el-icon class="icon">
-            <ArrowUpBold v-show="item.show" />
-            <ArrowDownBold v-show="!item.show" />
-          </el-icon>
-        </div>
-      </div>
-      <div v-if="!!item.children && !!item.show" class="checked-box2">
-        <div
-          v-for="(item2, index2) in item.children"
-          :key="index2"
-          :class="!!item2.checked ? 'checked-item checked-item-active' : 'checked-item'"
-          :title="item2.name"
-          @click="handleClickChecked(item2)"
-        >
+        <div v-if="!!item.children && !!item.show" class="checked-box2">
           <div
-            class="icon"
-            :style="{ backgroundImage: `url(${iconList[item2.value] && iconList[item2.value].image ? iconList[item2.value].image : ''})` }"
-          />
-          <div class="text">{{ item2.name }}</div>
+            v-for="(item2, index2) in item.children"
+            :key="index2"
+            :class="!!item2.checked ? 'checked-item checked-item-active' : 'checked-item'"
+            :title="item2.name"
+            @click="handleClickChecked(item2)"
+          >
+            <div
+              class="icon"
+              :style="{ backgroundImage: `url(${iconList[item2.value] && iconList[item2.value].image ? iconList[item2.value].image : ''})` }"
+            />
+            <div class="text">{{ item2.name }}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
+    <template v-else-if="activeIndex === 1"></template>
+    <template v-else-if="activeIndex === 2"></template>
   </div>
 </template>
 
@@ -49,7 +53,7 @@ import { ArrowDownBold } from '@element-plus/icons-vue';
 
 const emits = defineEmits(['change']);
 // 基础服务
-const activeIndex3 = ref(0);
+const activeIndex = ref(0);
 const baseService = reactive({
   menu: [],
   dataList: []
@@ -104,8 +108,8 @@ const getBaseServiceDataList = () => {
 
 // 点击基础服务菜单
 const handleClick3 = (item, index) => {
-  if (activeIndex3.value === index) return;
-  activeIndex3.value = index;
+  if (activeIndex.value === index) return;
+  activeIndex.value = index;
   getBaseServiceDataList();
   console.log('点击', item);
 };

src/views/censusDataAnalysis/ForestFire/RightSection.vue

@@ -5,7 +5,7 @@
         <div class="header-left">
           <div class="header-title">风险概述</div>
           <div class="time">
-            {{ parseTime(riskOverviewData.time1, '{m}月{d}日 {h}:{i}') }}-{{ parseTime(riskOverviewData.time2, '{m}月{d}日 {h}:{i}') }}
+            {{ parseTime2(time) }}-{{ time }}
           </div>
         </div>
         <div class="btn" @click="showExportReport = true">综合分析报告</div>
@@ -127,7 +127,9 @@
 <script lang="ts" setup name="RightSection">
 import { setHighText } from '@/utils';
 import { getImageUrl } from './data';
-
+const props = defineProps({
+  time: String
+});
 let showExportReport = ref(false);
 let riskOverviewData = ref({
   time1: '',
@@ -230,6 +232,23 @@ const getData = () => {
   riskDistributionState.townShipLevel[3].value = data3.data4;
   riskDistributionState.townShipLevel[4].value = data3.data5;
 };
+const parseTime2 = (dateStr) => {
+  if (!dateStr) return ''
+  let time = dateStr.replace(/年/g, '-').replace(/月/g, '-').replace(/日/g, '');
+  // 将字符串转换为 Date 对象
+  const date = new Date(time);
+
+  // 设置时间为 00:00:00
+  date.setHours(0, 0, 0, 0);
+
+  // 格式化输出为所需的字符串格式
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
+  const day = String(date.getDate()).padStart(2, '0');
+  const formattedDate = `${year}年${month}月${day}日 00:00:00`;
+
+  return formattedDate;
+}
 onMounted(() => {
   getData();
 });
@@ -531,6 +550,7 @@ onMounted(() => {
         justify-content: center;
         align-items: center;
         padding-left: 15px;
+        cursor: pointer;
       }
     }
     .box-content {

src/views/censusDataAnalysis/ForestFire/index.vue

@@ -59,7 +59,8 @@
       <div class="map-time">{{ mapTime }}</div>
     </div>
     <div class="right-box">
-      <RightSection id="mapId" />
+      <RightSection v-show="activeIndex === '1'" id="mapId" :time="mapTime" />
+      <HistoricalAnalysis v-show="activeIndex === '2'" />
     </div>
     <!--风险趋势分析-->
     <RiskTrendAnalysis v-if="showRiskTrendAnalysis" v-model="showRiskTrendAnalysis" @confirm="handleRiskConfirm" />
@@ -72,6 +73,7 @@ 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';
 
 let activeIndex = ref('1');
 let activeIndex1 = ref(0);
@@ -81,7 +83,7 @@ const analysisServices = ref([
 ]);
 let showRiskTrendAnalysis = ref(false);
 const handleClick = (index) => {
-
+    activeIndex.value = index;
 };
 // 点击分析服务
 const handleClick1 = (index) => {

src/views/censusDataAnalysis/HistoricalAnalysis.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="data-box1">
+      <div class="title-box">
+        <div class="gradient-text">历史年度自然灾害数量统计</div>
+      </div>
+      <div class="box-content">
+        <div class="date-box">
+          <div class="date-title">时间选择</div>
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            class="common-date-range"
+            popper-class="common-date-range-popper"
+          />
+        </div>
+        <div class="title-box2">历史年度自然灾害影响分析</div>
+        <div class="card-box">
+          <div class="card-item">
+            <i class="icon-people" />
+            <div class="text-box">
+              <div class="text1">受灾人口</div>
+              <div class="text-box2">
+                <div class="text2">6</div>
+                <div class="text3">万人</div>
+              </div>
+            </div>
+          </div>
+          <div class="card-item">
+            <i class="icon-economy" />
+            <div class="text-box">
+              <div class="text1">经济损失</div>
+              <div class="text-box2">
+                <div class="text2">23.38</div>
+                <div class="text3">万元</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="title-box2">历史年度自然灾害受灾人口统计</div>
+        <img src="@/assets/images/censusDataAnalysis/bar.png" alt="" style="cursor: pointer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+let dateRange = ref([]);
+</script>
+
+<style lang="scss" scoped>
+.data-box1 {
+  &::after {
+    content: '';
+    display: block;
+    width: 517px;
+    height: 19px;
+    background: url('@/assets/images/censusDataAnalysis/line.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: -8px;
+  }
+  .title-box {
+    width: 516px;
+    height: 40px;
+    background: url('@/assets/images/censusDataAnalysis/titleBox3.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 50px;
+    .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 10px;
+    .date-box {
+      display: flex;
+      align-items: center;
+      .date-title {
+        font-size: 14px;
+        color: #eaf3fc;
+        margin-right: 12px;
+      }
+      .common-date-range {
+        width: 200px;
+      }
+    }
+    .title-box2 {
+      display: flex;
+      align-items: center;
+      height: 25px;
+      background: url('@/assets/images/censusDataAnalysis/titleBox2.png') no-repeat bottom left;
+      background-size: 136px 20px;
+      padding-left: 23px;
+      font-size: 16px;
+      color: #ffffff;
+      margin: 20px 0;
+    }
+    .card-box {
+      display: flex;
+      .card-item {
+        width: 172px;
+        height: 95px;
+        background: url('@/assets/images/censusDataAnalysis/box5.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        padding: 10px 10px;
+        margin-left: 28px;
+        &:first-child {
+          margin-left: 0;
+        }
+        .icon-people {
+          width: 118px;
+          height: 117px;
+          background: url('@/assets/images/censusDataAnalysis/people.png') no-repeat;
+          background-size: 100% 100%;
+          flex-shrink: 0;
+          margin-left: -35px;
+        }
+        .icon-economy {
+          width: 115px;
+          height: 116px;
+          background: url('@/assets/images/censusDataAnalysis/economy.png') no-repeat;
+          background-size: 100% 100%;
+          flex-shrink: 0;
+          margin-left: -35px;
+        }
+        .text-box {
+          margin-left: -25px;
+          height: 60px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .text1 {
+            font-size: 21px;
+            color: #ffffff;
+          }
+          .text-box2 {
+            display: flex;
+            align-items: baseline;
+            .text2 {
+              min-width: 56px;
+            }
+            .text2 {
+              font-size: 24px;
+              font-family: BEBAS-1;
+              color: transparent;
+              background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
+              -webkit-background-clip: text;
+              background-clip: text;
+              display: inline-block;
+              margin-right: 10px;
+            }
+            .text3 {
+              font-size: 18px;
+              color: #a8ccde;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/censusDataAnalysis/RiskTrendAnalysis.vue

@@ -1,6 +1,6 @@
 <template>
-  <Dialog custom-show title="风险趋势分析" width="1271px" @confirm="handleConfirm">
-    <div style="position: relative; height: 264px;">
+  <Dialog custom-show title="风险趋势分析" width="1271px" @close="handleClose" @confirm="handleConfirm">
+    <div style="position: relative; height: 264px">
       <div class="swiper-button-prev"></div>
       <swiper
         ref="mySwiper"
@@ -75,6 +75,9 @@ const getDatesWithCurrentHour = (n) => {
 const handleClick = (index) => {
   activeIndex.value = index;
 };
+const handleClose = () => {
+  emits('update:modelValue', false);
+}
 const initData = () => {
   const dates = getDatesWithCurrentHour(10);
   let data = [];