森林火灾

src/components/DateRangePicker/index.vue

@@ -1,67 +1,37 @@
 <template>
-  <div class="date-input-container">
-    <div
-        class="date-picker"
-        :class="bordered ? 'bordered' : ''"
-        @click="isShowStartTime = true"
-        :style="{ width: width, height: height, background: background, border: borderStyle, 'border-radius': borderRadius }">
-      <!-- 日历图标 -->
-      <img v-show="isShowCalendarIcon && position === 'left'" class="calendar left" src="../assets/img/common/rl.png" />
-      <!-- 日期范围 -->
-      <span class="text-container" :class="textClass">
-        <span class="timePosition">{{ startDateText || (mode === 'time' ? '开始时间' : '开始日期') }}</span>
-        <span class="spacer">{{ spacer }}</span>
-        <span class="timePosition">{{ endDateText || (mode === 'time' ? '结束时间' : '结束日期') }}</span>
-      </span>
-
-      <div class="right-btn">
-        <!-- 清除按钮 -->
-        <img v-show="isShowClearBtn && startDateText" @click.stop="clearDate()" class="clear-date" src="../assets/img/login/user.png" />
-
-        <!-- 日历图标 -->
-        <img v-show="isShowCalendarIcon  && position === 'right'" class="calendar right" src="../assets/img/common/rl.png" />
-
-        <!-- 箭头图标 -->
-        <van-icon v-show="isShowArrowIcon" name="arrow-down" class="arrow-down" />
-      </div>
-    </div>
-
-    <van-popup v-model:show="isShowStartTime" round position="bottom">
-      <van-date-picker
-          v-model="startTime"
-          :type="mode"
-          :title="mode === 'time' ? '选择开始时间' : '选择开始日期'"
-          @confirm="onConfirmStartDate"
-          @cancel="isShowStartTime = false"
-      />
-    </van-popup>
-
-    <van-popup v-model:show="isShowEndTime" round position="bottom">
-      <van-date-picker
-          v-model="endTime"
-          :type="mode"
-          :title="mode === 'time' ? '选择结束时间' : '选择结束日期'"
-          @confirm="onConfirmEndDate"
-          @cancel="isShowEndTime = false"
-      />
-    </van-popup>
+  <div class="date-input-container" @click="showDateRangePicker = true">
+    <div class="text">{{ startDateLabel ? startDateLabel : '请选择' }}</div>
+    <div class="spacer-text">{{ spacer }}</div>
+    <div class="text">{{ endDateLabel ? endDateLabel : '请选择' }}</div>
   </div>
+  <van-popup v-model:show="showDateRangePicker" position="bottom">
+    <van-picker-group
+        v-if="showDateRangePicker"
+        title="预约日期"
+        :tabs="['开始日期', '结束日期']"
+        next-step-text="下一步"
+        @confirm="onConfirm"
+        @cancel="showDateRangePicker = false"
+    >
+      <van-date-picker v-model="startDate" />
+      <van-date-picker v-model="endDate" />
+    </van-picker-group>
+  </van-popup>
 </template>
 
 <script lang="ts" setup name="DateRangePicker">
-import dayjs from 'dayjs'
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 
 const props = defineProps({
   modelValue: [Array, String],
-  // 模式: date-年月日  year-month - 年月   month-day - 月日  time - 时间  datehour年月日小时 datetime年月日时分
-  mode: {
-    type: String,
-    default: 'date'
-  },
+  // // 模式: date-年月日  year-month - 年月   month-day - 月日  time - 时间  datehour年月日小时 datetime年月日时分
+  // mode: {
+  //   type: String,
+  //   default: 'date'
+  // },
   spacer: {
     type: String,
-    default: '-'
+    default: '至'
   },
   // 是否显示清除日期按钮
   isShowClearBtn: {
@@ -73,212 +43,45 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-
-  // 是否显示箭头图标
-  isShowArrowIcon: {
-    type: Boolean,
-    default: false
-  },
-
   // 是否显示边框
   bordered: {
     type: Boolean,
     default: true
-  },
-
-  // 容器宽度
-  width: {
-    type: String,
-    default: () => '100vw'
-  },
-
-  height: {
-    type: String,
-    default: () => '38px'
-  },
-
-  background: {
-    type: String,
-    default: () => '#ffffff'
-  },
-
-  borderStyle: {
-    type: String,
-    default: () => '1px solid #dddddd;'
-  },
-
-  borderRadius: {
-    type: String,
-    default: () => '5px'
-  },
-
-  // 日历图标的位置: left、right
-  position: {
-    type: String,
-    default: () => 'right'
   }
 });
 const emits = defineEmits(['update:modelValue', 'change']);
-let startDateText = ref(props.modelValue[0] || '');
-let endDateText = ref(props.modelValue[1] || '');
-let isShowStartTime =  ref(false)
-let isShowEndTime = ref(false);
-let textClass = ref(''); // 日期样式
-let startTime = ref('');
-let endTime = ref('');
-let format = ref(''); // 日期格式
-
-onMounted(() => {
-  textClass.value = props.position
-  switch (props.mode) {
-    case 'date': // 年月日
-      format.value = 'YYYY-MM-DD'
-      break
-    case 'year-month': // 年月
-      format.value = 'YYYY-MM'
-      break
-    case 'month-day': // 月日
-      format.value = 'MM-DD'
-      break
-    case 'datetime': // 年月日小时分钟
-      format.value = 'YYYY-MM-DD hh:mm'
-      break
-    case 'datehour': // 年月日小时
-      format.value = 'YYYY-MM-DD hh'
-      break
-    case 'time': // 小时分钟
-      format.value = undefined
-      break
-  }
-
-  if (format.value) {
-    startTime.value = props.modelValue[0] ? new Date(props.modelValue[0]) : new Date();
-    endTime.value = props.modelValue[1] ? new Date(props.modelValue[1]) : new Date();
-  } else {
-    startTime.value = props.modelValue[0];
-    endTime.value = props.modelValue[1];
-  }
-})
-
-
-const onConfirmStartDate = (val) => {
-  if (format.value) {
-    startTime.value = dayjs(val).format(format.value)
-  } else {
-    startTime.value = val
-  }
-
-  startDateText.value = startTime.value
-  isShowStartTime.value = false
-  isShowEndTime.value = true
-};
-const onConfirmEndDate = (val) => {
-  if (format.value) {
-    endTime.value = dayjs(val).format(format.value)
-  } else {
-    endTime.value = val
-  }
-
-  endDateText.value = endTime.value
-  isShowEndTime.value = false
-  emits('update:modelValue', [startTime.value, endTime.value])
-  emits('change', [startTime.value, endTime.value])
-};
-const clearDate = () => {
-  startDateText.value = ''
-  endDateText.value = ''
-  emits('update:modelValue', ['', ''])
-  emits('change', ['', ''])
+let showDateRangePicker = ref(false);
+let startDate = ref([]);
+let endDate = ref([]);
+let startDateLabel = ref();
+let endDateLabel = ref();
+// 日期范围选择
+const onConfirm = () => {
+  showDateRangePicker.value = false;
+  startDateLabel.value = startDate.value[0] +'-'+ startDate.value[1] + '-' + startDate.value[2];
+  endDateLabel.value = endDate.value[0] +'-'+ endDate.value[1] + '-' + endDate.value[2];
+  emits('update:modelValue', [startDateLabel.value, endDateLabel.value])
+  emits('change', [startDateLabel.value, endDateLabel.value])
 }
 </script>
 
 <style lang="scss" scoped>
 .date-input-container {
   position: relative;
-
-  .date-picker {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    z-index: 499;
-    text-indent: 5px;
-    white-space: nowrap;
-    padding: 0 5px;
-    border-radius: 15px;
-    &.bordered {
-      border: 1px solid #dddddd;
-      border-radius: 5px;
-    }
-
-    .text-container {
-      display: inline-block;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      width: 100%;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-
-      &.left {
-        margin-left: 15px;
-      }
-    }
-
-    .timePosition {
-      display: inline-block;
-      vertical-align: middle;
-      &:last-child {
-        min-width: 75px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-
-    .spacer {
-      display: inline-block;
-      height: 28px;
-      margin: 0 5px;
-      line-height: 28px;
-      vertical-align: middle;
-    }
-
-    .date {
-      font-style: normal;
-      font-size: 14px;
-    }
-    .right-btn {
-      display: flex;
-      align-items: center;
-      .clear-date {
-        margin: 0 6px;
-        width: 15px;
-        height: 15px;
-        vertical-align: middle;
-      }
-
-      .calendar {
-        vertical-align: middle;
-        margin-left: 6px;
-        width: 15px;
-        height: 14px;
-
-        &.left {
-          margin-right: 6px;
-        }
-
-        &.right {
-          margin-left: 10px;
-        }
-      }
-      .arrow-down {
-        vertical-align: middle;
-        width: 7px;
-        right: 12px;
-      }
-    }
+  width: 100%;
+  height: 35px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  .text {
+    flex: 1;
+    font-size: 14px;
+    text-align: center;
+  }
+  .spacer-text {
+    font-size: 14px;
+    margin: 0 5px;
   }
 }
 </style>

src/router/routes.ts

@@ -109,6 +109,16 @@ const routes: Array<RouteRecordRaw> = [
           noCache: true
         }
       }
+      ,
+      {
+        path: "forestFireWarn",
+        name: "ForestFireWarn",
+        component: () => import("@/views/disasterRiskMonitor/forestFireWarn.vue"),
+        meta: {
+          title: "森林火灾监测预警",
+          noCache: true
+        }
+      }
     ]
   },
   {

src/styles/index.less

@@ -45,7 +45,6 @@ html {
   height: 100%;
   overflow-y: auto;
   margin: 0 auto;
-  padding: 16px;
 }
 
 a,

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="container">
+    <Map ref="mapRef" class="map" active-map="vectorgraph" :point-type="pointType" :event-details="eventDetails" />
+    <div class="info-box">
+      <div class="select-box">
+        <van-radio-group v-model="queryParams.type" direction="horizontal" @change="handleChange">
+          <van-radio name="1">当然热点</van-radio>
+          <van-radio name="2">
+            <div class="picker-container">
+              <DateRangePicker v-model="dateState.selectDate" @change="handleChange" />
+            </div>
+          </van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="content-header">
+        <div class="text-box">
+          <div class="text1">经统计：</div>
+          <div class="text1">{{queryParams.date[0]}}</div>
+          <div class="text1">至</div>
+          <div class="text1">{{queryParams.date[1]}}</div>
+          <div class="text1">共</div>
+          <div class="text2">{{ forestFireData.total }}</div>
+          <div class="text1">条数据</div>
+        </div>
+      </div>
+      <van-swipe v-if="forestFireData.dataList">
+        <van-swipe-item v-for="(item, index) in forestFireData.dataList" :key="index" class="swipe-card">
+          <div class="card-cell">
+            <div class="text1">{{ item.name }}</div>
+          </div>
+          <div class="card-cell">
+            <div class="card-item">
+              <div class="item-label">热点上报时间</div>
+              <div class="item-value">{{ item.time1 }}</div>
+            </div>
+            <div class="card-item">
+              <div class="item-label">
+                <div>反馈类型</div>
+                <div class="tag">{{ item.data2 }}</div>
+              </div>
+              <div class="item-value">{{ item.time2 }}</div>
+            </div>
+          </div>
+          <div class="card-cell">
+            <div class="card-item">
+              <div class="item-label">亮温强度</div>
+              <div class="item-value">{{ !!item.data1 ? item.data1 : '--' }}K</div>
+            </div>
+          </div>
+          <div class="card-cell">
+            <div class="card-item">
+              <div class="item-label">热点定位({{ item.lng + ',' + item.lat }})</div>
+              <div class="item-value">{{ item.address }}</div>
+            </div>
+          </div>
+        </van-swipe-item>
+        <template #indicator="{ active, total }">
+          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
+        </template>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="forestFireWarn">
+import {onMounted, reactive, ref} from "vue";
+
+const queryParams = reactive({
+  type: '1',
+  date: []
+});
+let dateState = reactive({
+  nowDate: [],
+  selectDate: []
+})
+let pointType = ref([]);
+let eventDetails = ref({});
+let forestFireData = reactive({
+  total: 0,
+  dataList: []
+});
+
+const initData = () => {
+  console.log('初始化数据', queryParams);
+  forestFireData = {
+    total: 4,
+    dataList: [
+      { name: '茂名市-高州市1', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
+      { name: '茂名市-高州市2', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
+      { name: '茂名市-高州市3', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
+      { name: '茂名市-高州市4', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' }
+    ]
+  }
+}
+
+// 选项变化
+const handleChange = () => {
+  if (queryParams.type === '1') {
+    createNowDate();
+    initData();
+  } else if (dateState.selectDate[0] || dateState.selectDate[1]){
+    queryParams.date = dateState.selectDate;
+    initData();
+  }
+};
+// 生成当日时间
+const createNowDate = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且使用padStart来确保是两位数
+  const day = String(now.getDate()).padStart(2, '0'); // 使用padStart来确保是两位数
+  const date = `${year}-${month}-${day}`
+  dateState.nowDate = [date, date];
+  queryParams.date = [date, date];
+}
+onMounted(() => {
+  createNowDate();
+  initData();
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 55px);
+  .map {
+    width: 100%;
+    height: 50%;
+  }
+  .select-box {
+    background-color: #ffffff;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    .picker-container {
+      width: 210px;
+    }
+  }
+}
+.info-content {
+  .content-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    .text-box {
+      display: flex;
+      font-size: 14px;
+      .text1 {
+        color: #a7a7a7;
+      }
+      .text2 {
+        color: #4894e2;
+        font-weight: bold;
+        margin: 0 5px;
+      }
+    }
+  }
+}
+.swipe-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px;
+  .card-cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ebedf0;
+    padding: 8px 0;
+    font-size: 14px;
+    &:last-child {
+      border-bottom: none;
+    }
+    .text1 {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .card-item  {
+      .item-label {
+        color: #969799;
+        display: flex;
+        align-items: center;
+      }
+      .tag {
+        background-color: #fd0000;
+        color: #fff;
+        border-radius: 10px;
+        padding: 2px 4px;
+        margin-left: 5px;
+      }
+      .item-value {
+        margin-top: 8px;
+      }
+    }
+  }
+}
+.van-swipe{
+  position: relative;
+  .custom-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 5px;
+  }
+}
+</style>

src/views/leader/index.vue

@@ -146,7 +146,7 @@ const menu2 = ref([
     children: [
       { name: '预警态势', icon: 'monitor', url: 'WarningSituation' },
       { name: '大风灾害', icon: 'wind', url: 'GaleDisaster' },
-      { name: '森林火灾', icon: 'forestFire', url: '' },
+      { name: '森林火灾', icon: 'forestFire', url: 'ForestFireWarn' },
       { name: '台风实况', icon: 'typhoon', url: '' },
       { name: '水文监测', icon: 'hydrology', url: '' }
     ]