预警态势、大风灾害

src/router/routes.ts

@@ -51,22 +51,12 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
-  {
-    path: "/hydrologicalMonitor",
-    name: "HydrologicalMonitor",
-    component: () =>
-      import("@/views/disasterRiskMonitor/hydrologicalMonitor/index.vue"),
-    meta: {
-      title: "水文监测",
-      noCache: true
-    }
-  },
   {
     path: "/reservoirMonitor",
     name: "ReservoirMonitor",
     component: () =>
       import(
-        "@/views/disasterRiskMonitor/hydrologicalMonitor/reservoirMonitor.vue"
+        "@/views/disasterRiskMonitor/reservoirMonitor.vue"
       ),
     meta: {
       title: "水库监测",
@@ -78,7 +68,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     name: "RiverMonitor",
     component: () =>
       import(
-        "@/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue"
+        "@/views/disasterRiskMonitor/riverMonitor.vue"
       ),
     meta: {
       title: "河道监测",

src/views/disasterRiskMonitor/galeDisaster.vue

@@ -32,32 +32,39 @@
         </div>
       </div>
     </div>
-    <van-image :src="detailsData.img" style="display: block" />
-    <van-text-ellipsis
-      class="text-box"
-      :content="detailsData.text"
-      rows="3"
-      expand-text="展开"
-      collapse-text="收起"
-    />
-    <el-table :data="detailsData.dataList" border 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" sortable />
-    </el-table>
+    <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="风速(m/s)" prop="speed" align="center" sortable />
+      </el-table>
+    </div>
     <van-popup v-model:show="showLevelPicker" round position="bottom">
       <van-picker
         :columns="levelColumns"
@@ -155,7 +162,10 @@ const handleClickMenu = (value1, value2) => {
   queryParams.value2 = value2;
   initData();
 };
-
+// table样式
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
 onMounted(() => {
   initData();
 });
@@ -164,9 +174,13 @@ onMounted(() => {
 <style lang="scss" scoped>
 .container {
   height: 100vh;
-  padding: 0;
+  padding: 8px 16px;
   .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 {
@@ -186,10 +200,31 @@ onMounted(() => {
       }
     }
   }
+  .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: 10px 0;
+    margin-top: 10px;
     padding: 10px;
-    background-color: #fff;
+    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;

src/views/disasterRiskMonitor/geologicalDisaster.vue

@@ -131,11 +131,9 @@
         </div>
         <el-table
           :data="detailsData.dataList"
-          border
           table-layout="auto"
           header-cell-class-name="common-table-header"
           :row-class-name="getTableRowClass"
-          class="common-table"
         >
           <el-table-column label="县区" prop="area" align="center">
             <template #header>

src/views/disasterRiskMonitor/hydrologicalMonitor/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="container">
-    <div v-for="(item, index) in menuData" :key="index" class="box" @click="handleClick(item.path)">
-      <div class="box-left">
-        <i :class="item.img" />
-      </div>
-      <div class="label">{{ item.name }}</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup name="hydrologicalMonitor">
-import {reactive} from "vue";
-import {useRouter} from "vue-router";
-
-const router = useRouter();
-const menuData = reactive([
-  { name: '水库监测', path: 'ReservoirMonitor', img: 'icon1' },
-  { name: '河道监测', path: 'RiverMonitor', img: 'icon2' },
-])
-const handleClick = (name: string) => {
-  router.push({ name: name});
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 0;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-  .box {
-    width: 358px;
-    height: 89px;
-    background: url('@/assets/images/onlineRollCall/box.png') no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    margin-top: 16px;
-    position: relative;
-    .icon1 {
-      display: inline-block;
-      width: 92px;
-      height: 93px;
-      background: url('@/assets/images/onlineRollCall/icon1.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    .icon2 {
-      display: inline-block;
-      width: 97px;
-      height: 94px;
-      background: url('@/assets/images/onlineRollCall/icon2.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    .label {
-      color: #414F64;
-      font-size: 16px;
-      width: 144px;
-      text-align: center;
-    }
-  }
-}
-</style>

src/views/disasterRiskMonitor/warningSituation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <van-image :src="detailsData.img" />
-    <el-table :data="detailsData.dataList" border table-layout="auto">
+    <el-table :data="detailsData.dataList" header-cell-class-name="common-table-header" :row-class-name="getTableRowClass" table-layout="auto">
       <el-table-column prop="type" align="center">
         <template #header>
           <div class="table-line" @click="showTypePicker = true">
@@ -191,6 +191,11 @@ const onSelectLevelConfirm = ({ selectedOptions }) => {
   initData();
 };
 
+// table样式
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
+
 onMounted(() => {
   initData();
 });