预警态势、大风灾害形势感知

src/router/routes.ts

@@ -99,6 +99,15 @@ const routes: Array<RouteRecordRaw> = [
           title: "预警态势",
           noCache: true
         }
+      },
+      {
+        path: "galeDisaster",
+        name: "GaleDisaster",
+        component: () => import("@/views/disasterRiskMonitor/galeDisaster.vue"),
+        meta: {
+          title: "大风灾害形势感知",
+          noCache: true
+        }
       }
     ]
   },

src/views/disasterRiskMonitor/galeDisaster.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="container">
+    <div class="box">
+      <div class="box-item">
+        <div class="box-label">实况：</div>
+      </div>
+    </div>
+    <van-image :src="detailsData.img" />
+    <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
+    <el-table :data="detailsData.dataList" table-layout='auto'>
+      <el-table-column label="地区" prop="area" align="center" />
+      <el-table-column prop="level" align="center">
+        <template #header>
+          <div class="table-line" @click="showLevelPicker = true">
+            <div>{{ labelData.level ? labelData.level : '县区' }}</div>
+            <i class="icon-down" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="站址" prop="address" align="center" width="160px" />
+      <el-table-column label="风速(m/s)" prop="speed" align="center" sort />
+    </el-table>
+    <van-popup v-model:show="showLevelPicker" round position="bottom">
+      <van-picker
+          :columns="levelColumns"
+          @cancel="showLevelPicker = false"
+          @confirm="onSelectLevelConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {ElTable, ElTableColumn} from "element-plus";
+
+const option1 = reactive([
+  { text: '1h', value: '1' },
+  { text: '3h', value: '3' },
+  { text: '6h', value: '6' },
+  { text: '12h', value: '12' },
+  { text: '24h', value: '24' }
+]);
+const option2 = reactive([
+  { text: '1h', value: '1' },
+  { text: '3h', value: '3' },
+  { text: '6h', value: '6' },
+  { text: '12h', value: '12' },
+  { text: '24h', value: '24' }
+]);
+const labelData = reactive({
+  type: '',
+  level: '',
+  area: ''
+})
+const queryParams = reactive({
+  value1: '',
+  value2: '',
+  type: '',
+  level: '',
+  area: ''
+});
+const detailsData = ref({
+  img: '',
+  text: '',
+  dataList: []
+});
+const initData = () => {
+  detailsData.value = {
+    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+    text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
+    dataList: [
+      { area: '电白', type: '滨海新区', address: '但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地', speed: '12.1' },
+    ]
+  }
+}
+
+const levelColumns = ref([
+  { text: '全部', value: '' },
+  { text: '滨海新区', value: '0' },
+  { text: '信宜', value: '1' },
+  { text: '电白', value: '2' },
+  { text: '高州', value: '3' }
+])
+let showLevelPicker = ref(false);
+const onSelectLevelConfirm  = ({selectedOptions}) => {
+  showLevelPicker.value = false;
+  labelData.level = selectedOptions[0].text === '全部' ? '县区' :selectedOptions[0].text;
+  queryParams.level = selectedOptions[0].value;
+  initData();
+};
+
+onMounted(() => {
+  initData()
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 55px);
+  padding: 0;
+  .text-box {
+    margin: 10px 0;
+    padding: 10px;
+    background-color: #fff;
+  }
+  .table-line {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .icon-down {
+      margin-left: 3px;
+      display: inline-block;
+      flex-shrink: 0;
+      width: 14px;
+      height: 14px;
+      background: url('@/assets/images/down.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/disasterRiskMonitor/warningSituation.vue

@@ -1,11 +1,171 @@
 <template>
-  <div>warningSituation</div>
+  <div class="container">
+    <van-image :src="detailsData.img" />
+    <el-table :data="detailsData.dataList" table-layout='auto'>
+      <el-table-column prop="type" align="center">
+        <template #header>
+          <div class="table-line" @click="showTypePicker = true">
+            <div>{{ labelData.type ? labelData.type : '类型' }}</div>
+            <i class="icon-down" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="level" align="center">
+        <template #header>
+          <div class="table-line" @click="showLevelPicker = true">
+            <div>{{ labelData.level ? labelData.level : '等级' }}</div>
+            <i class="icon-down" />
+          </div>
+        </template>
+        <template #default="scope">
+          <div :class="getClass(scope.row.level)">{{ getLabel(scope.row.level) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="地区" prop="area" align="center" />
+      <el-table-column label="发布时间" prop="publicTime" align="center" />
+    </el-table>
+    <van-popup v-model:show="showTypePicker" round position="bottom">
+      <van-picker
+          :columns="typeColumns"
+          @cancel="showTypePicker = false"
+          @confirm="onSelectTypeConfirm"
+      />
+    </van-popup>
+    <van-popup v-model:show="showLevelPicker" round position="bottom">
+      <van-picker
+          :columns="levelColumns"
+          @cancel="showLevelPicker = false"
+          @confirm="onSelectLevelConfirm"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script lang="ts" setup name="warningSituation">
+import {onMounted, reactive, ref} from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
 
+const labelData = reactive({
+  type: '',
+  level: '',
+  area: ''
+})
+const queryParams = reactive({
+  type: '',
+  level: '',
+  area: ''
+});
+const detailsData = ref({
+  img: '',
+  dataList: []
+});
+const getClass = (data: string) => {
+  let res = 'text';
+  if (data === '1') {
+    res = 'text text-blue'
+  } else if (data === '2') {
+    res = 'text text-yellow'
+  } else if (data === '3') {
+    res = 'text text-orange'
+  } else if (data === '4') {
+    res = 'text text-red'
+  }
+  return res;
+};
+const getLabel = (data: string) => {
+  let res = '无预警';
+  if (data === '1') {
+    res = '蓝色'
+  } else if (data === '2') {
+    res = '黄色'
+  } else if (data === '3') {
+    res = '橙色'
+  } else if (data === '4') {
+    res = '红色'
+  }
+  return res;
+};
+const initData = () => {
+  detailsData.value = {
+    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+    dataList: [
+      { area: '电白', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' },
+      { area: '高新', type: '1', level: '2', publicTime: '2024-10-03 15:42:01' },
+      { area: '茂南', type: '1', level: '3', publicTime: '2024-10-03 15:42:01' },
+      { area: '滨海', type: '1', level: '4', publicTime: '2024-10-03 15:42:01' },
+      { area: '化州', type: '1', level: '0', publicTime: '2024-10-03 15:42:01' },
+      { area: '高州', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' },
+      { area: '信宜', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' }
+    ]
+  }
+}
+
+const typeColumns = ref([
+  { text: '全部', value: '' },
+  { text: '森林火险', value: '1' }
+])
+let showTypePicker = ref(false);
+const onSelectTypeConfirm  = ({selectedOptions}) => {
+  showTypePicker.value = false;
+  labelData.type = selectedOptions[0].text;
+  queryParams.type = selectedOptions[0].value;
+  initData();
+};
+
+const levelColumns = ref([
+  { text: '全部', value: '' },
+  { text: '无预警', value: '0' },
+  { text: '蓝色', value: '1' },
+  { text: '黄色', value: '2' },
+  { text: '橘色', value: '3' },
+  { text: '红色', value: '4' }
+])
+let showLevelPicker = ref(false);
+const onSelectLevelConfirm  = ({selectedOptions}) => {
+  showLevelPicker.value = false;
+  labelData.level = selectedOptions[0].text;
+  queryParams.level = selectedOptions[0].value;
+  initData();
+};
+
+onMounted(() => {
+  initData();
+})
 </script>
 
 <style lang="scss" scoped>
-
+.container {
+  height: calc(100vh - 55px);
+  padding: 0;
+  .table-line {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .icon-down {
+      margin-left: 3px;
+      display: inline-block;
+      flex-shrink: 0;
+      width: 14px;
+      height: 14px;
+      background: url('@/assets/images/down.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .text {
+    font-size: 14px;
+    color: #A3A7AD;
+  }
+  .text-blue {
+    color: #2C81FF;
+  }
+  .text-yellow {
+    color: #ffd700;
+  }
+  .text-orange {
+    color: #FFAF00;
+  }
+  .text-red {
+    color: #ec2734;
+  }
+}
 </style>

src/views/leader/index.vue

@@ -55,7 +55,7 @@
           <div v-for="(item, index) in menu2" :key="index" class="box">
             <div class="box-title">{{ item.name }}</div>
             <div class="box-content">
-              <div v-for="(item2, index2) in item.children" :key="index2" class="box-item"  @click="handleClickMenu(item.url)">
+              <div v-for="(item2, index2) in item.children" :key="index2" class="box-item"  @click="handleClickMenu(item2.url)">
                 <img class="icon" :src="getImageUrl(item2.icon)" alt="" />
                 <span>{{ item2.name }}</span>
               </div>
@@ -118,7 +118,7 @@ const menu2 = ref([
     name: '自然灾害风险监测',
     children: [
       { name: '预警态势', icon: 'monitor', url: 'WarningSituation' },
-      { name: '大风灾害', icon: 'wind', url: '' },
+      { name: '大风灾害', icon: 'wind', url: 'GaleDisaster' },
       { name: '森林火灾', icon: 'forestFire', url: '' },
       { name: '台风实况', icon: 'typhoon', url: '' },
       { name: '水文监测', icon: 'hydrology', url: '' }