功能点完善台风应急

src/router/routes.ts

@@ -60,6 +60,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
+  {
+    path: "/typhoonEmergency",
+    name: "TyphoonEmergency",
+    component: () => import("@/views/disasterRiskMonitor/typhoonEmergency.vue"),
+    meta: {
+      title: "台风应急",
+      noCache: true
+    }
+  },
   {
     path: "/reservoirMonitor",
     name: "ReservoirMonitor",

src/utils/olMap/olMap.ts

@@ -38,7 +38,7 @@ import * as turf from '@turf/turf';
 import { nanoid } from 'nanoid';
 import carImg from '@/assets/images/car.png';
 import { globalHeaders } from '@/utils/request';
-import { iconList } from '@/views/globalMap/data/mapData';
+import { iconList } from '@/components/Map/mapData';
 import gdJson from '@/assets/json/gd.json';
 
 const tk = 'a8df87f1695d224d2679aa805c1268d9';

src/views/disasterRiskMonitor/chartOptions.ts

@@ -796,3 +796,159 @@ export const chartOption7 = {
     }
   ]
 };
+
+export const chartOption8 = {
+  grid: {
+    top: "25%",
+    bottom: "10%" //也可设置left和right设置距离来控制图表的大小
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+      label: {
+        show: true
+      }
+    },
+    formatter: params => {
+      let result = "";
+      // 遍历每个轴上的数据点
+      params.forEach(function (item) {
+        if (item.seriesName === "风速") {
+          result +=
+              "<div>" + item.marker + item.seriesName + item.value + "m/s</div>";
+        } else {
+          result +=
+              "<div>" + item.marker + item.seriesName + item.value + "mm</div>";
+        }
+      });
+      return result;
+    }
+  },
+  legend: {
+    data: ["风速", "降水"],
+    top: "15%",
+    textStyle: {
+      color: "#7F8B9F"
+    }
+  },
+  xAxis: {
+    data: [],
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
+    },
+    axisTick: {
+      show: true
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
+    }
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "单位：m/s",
+      nameTextStyle: {
+        color: "#7F8B9F"
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#7F8B9F"
+        }
+      }
+    },
+    {
+      type: "value",
+      name: "单位：mm",
+      nameTextStyle: {
+        color: "#7F8B9F"
+      },
+      position: "right",
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#7F8B9F"
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: "风速",
+      type: "line",
+      smooth: true, //平滑曲线显示
+      showSymbol: false,
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#9bbdf4"
+          },
+          {
+            offset: 1,
+            color: "#2a72e9"
+          }
+        ])
+      },
+      data: []
+    },
+    {
+      name: "降水",
+      type: "line",
+      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+      smooth: true, //平滑曲线显示
+      // showSymbol: false,
+      itemStyle: {
+        //折线拐点标志的样式
+        color: "#feaf00"
+      },
+      lineStyle: {
+        color: new graphic.LinearGradient(0, 0, 1, 0, [
+          {
+            offset: 0,
+            color: "#f9df83"
+          },
+          {
+            offset: 1,
+            color: "#f7983f"
+          }
+        ])
+      },
+      data: []
+    }
+  ]
+};

src/views/disasterRiskMonitor/typhoonEmergency.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="container">
+    <img src="@/assets/images/temp/typhoon.png" />
+    <el-table :data="dataList" border table-layout="auto">
+      <el-table-column label="时间" prop="data1" align="center" />
+      <el-table-column label="位置" prop="data2" align="center" />
+      <el-table-column label="移动方向" prop="data3" align="center" />
+      <el-table-column label="风速等级" prop="data4" align="center" />
+      <el-table-column label="预测路径" prop="data5" align="center" />
+      <el-table-column label="预计登录时间" prop="data6" align="center" />
+      <el-table-column label="预计登录地点" prop="data7" align="center" />
+      <el-table-column label="预警级别" prop="data8" align="center" />
+    </el-table>
+    <div class="card">
+      <div class="card-header">
+        <i class="icon-line" />
+        <div class="text">逐小时预报</div>
+      </div>
+      <div class="card-content">
+        <Chart :option="option1" style="height: 240px" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElTable, ElTableColumn } from "element-plus";
+import { chartOption8 } from "./chartOptions";
+import { onMounted, ref } from "vue";
+
+const option1 = ref(chartOption8);
+const dataList = ref([
+  {
+    data1: "2023-09-10 08:00",
+    data2: "东经115.8°，北纬20.5°",
+    data3: "西北偏西",
+    data4: "12级（台风）",
+    data5: "向粤西沿海靠近",
+    data6: "2023-09-11 14:00",
+    data7: "广东湛江至茂名一带",
+    data8: "黄色预警"
+  },
+  {
+    data1: "2023-09-10 10:00",
+    data2: "东经115.3°，北纬20.8°",
+    data3: "西北",
+    data4: "13级（台风）",
+    data5: "直逼雷州半岛",
+    data6: "2023-09-11 16:00",
+    data7: "广东徐闻附近",
+    data8: "橙色预警"
+  },
+  {
+    data1: "2023-09-10 12:00",
+    data2: "东经114.9°，北纬21.2°",
+    data3: "西北偏北",
+    data4: "14级（强台风）",
+    data5: "可能影响阳江、江门",
+    data6: "2023-09-11 18:00",
+    data7: "广东阳江沿海",
+    data8: "橙色预警"
+  },
+  {
+    data1: "2023-09-10 14:00",
+    data2: "东经114.5°，北纬21.6°",
+    data3: "北偏西",
+    data4: "13级（台风）",
+    data5: "向珠江口以西移动",
+    data6: "2023-09-11 20:00",
+    data7: "广东珠海至中山一带",
+    data8: "红色预警"
+  },
+  {
+    data1: "2023-09-10 16:00",
+    data2: "东经114.0°，北纬22.0°",
+    data3: "北",
+    data4: "12级（台风）",
+    data5: "逐渐转向粤东海域",
+    data6: "2023-09-11 22:00",
+    data7: "广东汕尾以东海域",
+    data8: "黄色预警"
+  }
+]);
+const initData = () => {
+  option1.value.xAxis.data = [
+    "19时",
+    "20时",
+    "21时",
+    "22时",
+    "23时",
+    "24时",
+    "1时",
+    "2时",
+    "3时",
+    "40时",
+    "5时",
+    "6时",
+    "7时",
+    "8时",
+    "9时",
+    "10时",
+    "11时",
+    "12时",
+    "13时",
+    "14时",
+    "15时",
+    "16时",
+    "17时",
+    "18时"
+  ];
+  option1.value.series[0].data = [
+    "22",
+    "22",
+    "21",
+    "21",
+    "20",
+    "20",
+    "19",
+    "19",
+    "19",
+    "20",
+    "21",
+    "22",
+    "22",
+    "23",
+    "24",
+    "25",
+    "25",
+    "25",
+    "24",
+    "23",
+    "24",
+    "23",
+    "22",
+    "22"
+  ];
+  option1.value.series[1].data = [
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "11.0",
+    "13.0",
+    "10.0",
+    "9.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0",
+    "0.0"
+  ];
+};
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: calc(100vh);
+  padding: 16px;
+  .card {
+    background-color: #ffffff;
+    border: 1px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    border-radius: 4px;
+    padding: 2px;
+    margin-top: 16px;
+    &:first-child {
+      margin-top: 0;
+    }
+    .card-header {
+      font-size: 16px;
+      color: #414f64;
+      font-weight: bold;
+      line-height: 26px;
+      padding: 11px 10px;
+      display: flex;
+      align-items: center;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+      .icon-line {
+        display: inline-block;
+        width: 6px;
+        height: 16px;
+        background: url("@/assets/images/line.jpg") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 3px;
+      }
+    }
+    .card-content3 {
+      display: flex;
+      padding-bottom: 16px;
+      overflow-x: auto;
+      .card-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 60px;
+        height: 194px;
+        background-image: linear-gradient(
+          180deg,
+          #ffffff 0%,
+          #f6f9ff 79%,
+          #f8faff 100%
+        );
+        border: 2px solid #ffffff;
+        box-shadow:
+          0 2px 1px -1px #bcd7ffb5,
+          inset 0 1px 3px 6px #ace2ff08;
+        border-radius: 4px;
+        margin-left: 5px;
+        padding: 20px 5px;
+        .text1 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          color: #414f64;
+          line-height: 21px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/event/ReportPage.vue

@@ -108,6 +108,7 @@ import selectIcon from "@/assets/images/selectIcon.png";
 import { ref } from "vue";
 import {PickerConfirmEventParams, showToast} from "vant";
 
+const router = useRouter();
 interface FormItem {
   fieldValue: string;
   showPicker: boolean;
@@ -183,6 +184,8 @@ const handleCancel = () => {
       unit_name: ""
     }
   ];
+  // 返回上一页
+  router.go(-1);
 };
 </script>
 

src/views/leader/index.vue

@@ -122,6 +122,7 @@ const menu2 = ref([
       { name: '大风灾害', icon: 'wind', url: 'GaleDisaster' },
       { name: '森林火灾', icon: 'forestFire', url: 'ForestFireWarn' },
       { name: '台风实况', icon: 'typhoon', url: 'TyphoonPath' },
+      // { name: '台风应急', icon: 'typhoon', url: 'TyphoonEmergency' },
       { name: '水库监测', icon: 'hydrology', url: 'ReservoirMonitor' },
       { name: '河道监测', icon: 'riverMonitor', url: 'RiverMonitor' },
       { name: "应急响应", icon: "emergencyResponse", url: "EmergencyResponse" },