强降水

src/router/routes.ts

@@ -412,13 +412,21 @@ export const leaderRoute: Array<RouteRecordRaw> = [
       {
         path: "satellite_cloud_chart",
         name: "SatelliteCloudchart",
-        component: () =>
-          import("@/views/disasterRiskMonitor/satelliteCloudChart.vue"),
+        component: () => import("@/views/disasterRiskMonitor/satelliteCloudChart.vue"),
         meta: {
           title: "卫星云图",
           noCache: true
         }
       },
+      {
+        path: "rainfall",
+        name: "Rainfall",
+        component: () => import("@/views/disasterRiskMonitor/rainfall.vue"),
+        meta: {
+          title: "强降水",
+          noCache: true
+        }
+      },
       {
         path: "radar_echo_map",
         name: "RadarEchoMap",

src/views/disasterRiskMonitor/rainfall.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="container">
+    <div class="title">茂名市强降水实况及预报</div>
+    <div class="box">
+      <div class="box-item">
+        <div class="box-label">实况：</div>
+        <div
+            v-for="(item, index) in option1"
+            :key="index"
+            :class="
+            queryParams.value1 === '1' && queryParams.value2 === item.value
+              ? 'box-tag tag-active'
+              : 'box-tag'
+          "
+            @click="handleClickMenu('1', item.value)"
+        >
+          {{ item.text }}
+        </div>
+      </div>
+      <div class="box-item">
+        <div class="box-label">预报：</div>
+        <div
+            v-for="(item, index) in option1"
+            :key="index"
+            :class="
+            queryParams.value1 === '2' && queryParams.value2 === item.value
+              ? 'box-tag tag-active'
+              : 'box-tag'
+          "
+            @click="handleClickMenu('2', item.value)"
+        >
+          {{ item.text }}
+        </div>
+      </div>
+    </div>
+    <div class="box2">
+      <van-image :src="detailsData.img" style="display: block" />
+      <div class="text-box">
+        <i class="icon-chart" />
+        <van-text-ellipsis
+            class="text"
+            :content="detailsData.text"
+            rows="3"
+            expand-text="展开"
+            collapse-text="收起"
+        />
+      </div>
+    </div>
+    <div class="box3">
+      <el-table
+          :data="detailsData.dataList"
+          header-cell-class-name="common-table-header"
+          :row-class-name="getTableRowClass"
+          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="雨量(mm)"
+            prop="speed"
+            align="center"
+            sortable
+        />
+      </el-table>
+    </div>
+    <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";
+import icon1 from '@/assets/images/disasterRiskMonitor/galeDisaster/icon1.png'
+
+const option1 = 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: "1",
+  value2: "24",
+  type: "",
+  level: "",
+  area: ""
+});
+const detailsData = ref({
+  img: "",
+  text: "",
+  dataList: []
+});
+const initData = () => {
+  detailsData.value = {
+    img: icon1,
+    text: "据气象水文监测，25日至26日16时，茂名无降水。",
+    dataList: [
+      {
+        area: "茂名",
+        level: "化州",
+        address: "林尘镇政府",
+        speed: "0.0"
+      },
+      {
+        area: "茂名",
+        level: "化州",
+        address: "那务镇宝树水库",
+        speed: "0.0"
+      }
+    ]
+  };
+};
+
+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();
+};
+const handleClickMenu = (value1, value2) => {
+  queryParams.value1 = value1;
+  queryParams.value2 = value2;
+  initData();
+};
+// table样式
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100vh;
+  padding: 8px 16px;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 32px;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 8px;
+  }
+  .box {
+    background-color: #ffffff;
+    border: 1px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    border-radius: 4px;
+    background-image: linear-gradient(
+            to bottom,
+            #f3f7fd 0%,
+            #f7fafe 20px,
+            #fcfdff 50px,
+            #ffffff 50px,
+            #ffffff 100%
+    );
+    padding: 10px 16px;
+    margin-bottom: 10px;
+    .box-item {
+      display: flex;
+      align-items: center;
+      height: 30px;
+      .box-tag {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .tag-active {
+        background-color: #5f9ff2;
+        border-radius: 4px;
+        color: #ffffff;
+      }
+    }
+  }
+  .box2 {
+    background-color: #ffffff;
+    border: 1px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    border-radius: 4px;
+  }
+  .box3 {
+    margin-top: 10px;
+  }
+  .text-box {
+    margin-top: 10px;
+    padding: 10px;
+    display: flex;
+    .icon-chart {
+      display: inline-block;
+      width: 16px;
+      height: 17px;
+      background: url("@/assets/images/disasterRiskMonitor/galeDisaster/chart.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 7px;
+      flex-shrink: 0;
+    }
+    .text {
+      flex: 1;
+    }
+  }
+  .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/leader/index.vue

@@ -123,6 +123,7 @@ const menu2 = ref([
       { name: "雷达回波图", icon: "radarEchoMap", url: "RadarEchoMap" },
       { name: "气温降水实况", icon: "temperatureAndPrecipitation", url: "TemperatureAndPrecipitation" },
       { name: "天气预报", icon: "weatherForecast", url: "WeatherForecast" },
+      { name: "强降水", icon: "temperatureAndPrecipitation", url: "Rainfall" },
       { name: "易涝点视频", icon: "easyToflood", url: "EasyToFloodPoint" }
     ]
   },