调试接口

src/api/disasterRiskMonitor/easyFlood.ts

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+//易涝点视频列表
+export function getEasyFlood(params) {
+  return request({
+    url: "/api/gateway/v2/get_waterlogged_roads_list",
+    method: "post",
+    data: params
+  });
+}

src/api/disasterRiskMonitor/riverInform.ts

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+//河流信息列表
+export function getRiverInform(params) {
+  return request({
+    url: "/api/gateway/v2/get_river_list",
+    method: "post",
+    data: params
+  });
+}
+
+//河流状态
+export function getRiverStatus() {
+  return request({
+    url: "/api/gateway/v2/get_river_water_status",
+    method: "get"
+  });
+}

src/router/routes.ts

@@ -665,6 +665,17 @@ export const leaderRoute: Array<RouteRecordRaw> = [
           noCache: true
         }
       },
+
+      {
+        path: "easyToFloodPointView",
+        name: "EasyToFloodPointView",
+        component: () =>
+          import("@/views/disasterRiskMonitor/easyToFloodPointView.vue"),
+        meta: {
+          title: "易涝点详情",
+          noCache: true
+        }
+      },
       {
         path: "person_information",
         name: "PersonInformation",

src/views/disasterRiskMonitor/easyToFloodPoint.vue

@@ -21,11 +21,11 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="易涝点名称" prop="name" align="center" />
-          <el-table-column label="提供单位" prop="data1" align="center" />
+          <el-table-column label="易涝点名称" prop="flood_name" align="center" />
+          <el-table-column label="提供单位" prop="unit" align="center" />
           <el-table-column label="视频" prop="publicTime" align="center">
             <template #default="scope">
-              <div class="btn" @click="handlePlay">播放</div>
+              <div class="btn" @click="handlePlay(scope.row)">播放</div>
             </template>
           </el-table-column>
         </el-table>
@@ -37,6 +37,8 @@
 <script setup lang="ts">
 import { ElTable, ElTableColumn } from "element-plus";
 import { onMounted, reactive, ref } from "vue";
+import router from "@/router";
+import {getEasyFlood} from "@/api/disasterRiskMonitor/easyFlood";
 
 let detailsData = ref({
   dataList: []
@@ -50,18 +52,39 @@ const liveMapState = reactive({
   playing: false,
   data: []
 });
+const queryParams = ref({
+  query: {
+    area: "",
+    keyword: ""
+  }
+});
 const initData = () => {
-  detailsData.value.dataList = [
-    { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
-  ];
+  getTableDetail();
+  // detailsData.value.dataList = [
+  //   { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
+  // ];
+};
+const handlePlay = row => {
+  router.push({
+    name: "EasyToFloodPointView",
+    query: {
+      latitude: row.lat,
+      longitude: row.lng,
+      name: encodeURIComponent(row.flood_name)
+    }
+  });
+};
+const getTableDetail = () => {
+  getEasyFlood(queryParams.value).then(res => {
+    detailsData.value.dataList = res.rows;
+  });
 };
-const handlePlay = id => {};
 onMounted(() => {
   initData();
 });

src/views/disasterRiskMonitor/easyToFloodPointView.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="container">
+    <div class="title">
+      {{ name }}
+    </div>
+    <div class="box">
+      <div class="card-header">
+        <i class="icon-line" />
+        <div class="text">视频</div>
+      </div>
+      <HKVideo
+        v-if="!!video1"
+        :dot_data="video1"
+        autoplay
+        style="height: 200px"
+      />
+    </div>
+    <div class="box">
+      <div class="card-header">
+        <i class="icon-line" />
+        <div class="text">周边视频</div>
+      </div>
+      <el-table
+        :data="videoList"
+        header-cell-class-name="common-table-header"
+        :row-class-name="getTableRowClass"
+        table-layout="auto"
+        class="common-table"
+      >
+        <el-table-column label="序号" type="index" align="center" />
+        <el-table-column label="视频名称" prop="name" align="center" />
+        <el-table-column
+          label="距离"
+          prop="distance"
+          align="center"
+          width="60px"
+        />
+        <el-table-column label="操作" align="center" width="50px">
+          <template #default="scope">
+            <div
+              class="btn"
+              :style="{ color: video1 === scope.row ? '#000' : '#1d92ff' }"
+              @click="switchVideo(scope.row)"
+            >
+              切换
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import { getVideoInfo } from "@/api/disasterRiskMonitor/rainfall";
+
+const route = useRoute();
+const latitude = ref(route.query.latitude);
+const longitude = ref(route.query.longitude);
+const name = ref(decodeURIComponent(route.query.name));
+const queryParams = reactive({
+  location: "",
+  radius: "2000"
+});
+const videoList = ref();
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
+queryParams.location = "POINT(" + longitude.value + " " + latitude.value + ")";
+const getVideo = () => {
+  getVideoInfo(queryParams).then(res => {
+    res.data.list.forEach(item => {
+      item.video_code = item.indexcode;
+      item.distance = (Math.ceil(item.distance * 100) / 100).toFixed(2);
+    });
+    videoList.value = res.data.list;
+    video1.value = res.data.list[0];
+  });
+};
+getVideo();
+const video1 = ref();
+const switchVideo = row => {
+  video1.value = row;
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100vh;
+  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%
+    );
+    .icon-line {
+      display: inline-block;
+      width: 6px;
+      height: 16px;
+      background: url("@/assets/images/line.jpg") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+    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;
+      }
+    }
+  }
+}
+/* 移除表单容器背景 */
+:deep(.van-cell-group) {
+  background: transparent !important;
+}
+
+/* 移除每个表单项的背景 */
+:deep(.van-cell) {
+  background: transparent !important;
+}
+
+/* 移除内嵌容器的边距和阴影 */
+:deep(.van-cell-group--inset) {
+  margin: 0;
+  box-shadow: none;
+  &::after {
+    border: none !important; /* 移除默认边框 */
+  }
+}
+:deep(.van-field--disabled) {
+  .van-field__label,
+  .van-field__control {
+    color: rgba(12, 12, 12, 0.93) !important; /* 设置文字颜色为黑色 */
+    -webkit-text-fill-color: #4a4848 !important; /* 适配 iOS 设备 */
+  }
+
+  /* 移除禁用蒙层 */
+  .van-field__disabled-mask {
+    display: none !important;
+  }
+}
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 32px;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 8px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+</style>

src/views/disasterRiskMonitor/riverMonitor.vue

@@ -14,7 +14,12 @@
         </template>
       </van-search>
       <div class="box3">
-        <Select v-model="area" :columns="district_type" canSelectAll @confirm="onSelectConfirm" />
+        <Select
+          v-model="area"
+          :columns="district_type"
+          canSelectAll
+          @confirm="onSelectConfirm"
+        />
       </div>
     </div>
     <Map
@@ -58,8 +63,8 @@
       header-cell-class-name="common-table-header"
       :row-class-name="getTableRowClass"
     >
-      <el-table-column label="站点" prop="data1" align="center" />
-      <el-table-column label="河流" prop="data2" align="center" />
+      <el-table-column label="站点" prop="address" align="center" />
+      <el-table-column label="河流" prop="name" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />
       <el-table-column label="水位(m)" prop="data4" align="center" />
       <el-table-column label="超警戒(m)" prop="data5" align="center" sortable />
@@ -68,24 +73,50 @@
 </template>
 
 <script lang="ts" setup name="riverMonitor">
-import Map from '@/components/Map/index2.vue';
+import Map from "@/components/Map/index2.vue";
 import searchImg from "@/assets/images/search.png";
 import { onMounted, reactive, ref } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
-import {useDict} from "@/utils/dict";
+import { useDict } from "@/utils/dict";
+import {
+  getRiverInform,
+  getRiverStatus
+} from "@/api/disasterRiskMonitor/riverInform";
 
-const { district_type } = toRefs<any>(useDict('district_type'));
+const { district_type } = toRefs<any>(useDict("district_type"));
 let mapRef = ref();
 let eventDetails = ref({});
 let keyword = ref("");
 let area = ref("");
-let tags = reactive([
-  { name: "超堰顶", num: 1, icon: "icon1", checked: true },
-  { name: "超警戒河道站", num: 1, icon: "icon2", checked: true },
-  { name: "漫堤河道站", num: 2, icon: "icon3", checked: true },
-  { name: "水文站", num: 6, icon: "icon4", checked: false },
-  { name: "水位站", num: 5, icon: "icon5", checked: false }
+const riverStatus = ref();
+const tags = reactive([
+  { name: "", num: 0, icon: "icon1", checked: true },
+  { name: "", num: 0, icon: "icon2", checked: true },
+  { name: "", num: 0, icon: "icon3", checked: true },
+  { name: "水文站", num: 0, icon: "icon4", checked: false },
+  { name: "水位站", num: 0, icon: "icon5", checked: false }
 ]);
+// let tags = reactive([
+//   { name: "超堰顶", num: 1, icon: "icon1", checked: true },
+//   { name: "超警戒河道站", num: 1, icon: "icon2", checked: true },
+//   { name: "漫堤河道站", num: 2, icon: "icon3", checked: true },
+//   { name: "水文站", num: 6, icon: "icon4", checked: false },
+//   { name: "水位站", num: 5, icon: "icon5", checked: false }
+// ]);
+watch(
+  () => riverStatus.value,
+  newVal => {
+    if (newVal && newVal.length > 0) {
+      tags.forEach((tag, index) => {
+        if (newVal[index]) {
+          tag.name = newVal[index].type;
+          tag.num = newVal[index].value;
+        }
+      });
+    }
+  },
+  { immediate: true }
+);
 let detailsData = ref({
   text: "",
   dataList: []
@@ -118,180 +149,183 @@ let iconList = reactive({
     size: [20, 20]
   }
 });
-
-const onSelectConfirm = (data) => {
-  initData();
-}
-
-const onSearchKeyword = val => {
-  keyword.value = val;
-  initData();
+const queryParams = ref({
+  current: "1",
+  size: 5,
+  query: {
+    area: ""
+  }
+});
+const getRiverList = () => {
+  getRiverInform(queryParams.value).then(res => {
+    detailsData.value.dataList = res.rows;
+  });
 };
 
-const onSearchCancel = () => {
-  keyword.value = "";
-  initData();
-};
-const handleClickTag = item => {
-  item.checked = !item.checked;
+const getRiverDetail = () => {
+  getRiverStatus().then(res => {
+    riverStatus.value = res.rows;
+  });
 };
+getRiverDetail();
 const initData = () => {
   const dom = mapRef.value;
-  detailsData.value = {
-    text: "2024年10月30日 20:45，袂花江河段当前水位处于正常范围内，低于警戒水位。由于近期连续降雨，河道流量有所增加，但流速和流量仍在可控范围内。",
-    dataList: [
-      {
-        data1: "茂南小东江超堰顶站",
-        data2: "小东江",
-        data3: "10月30日12:00",
-        data4: 28.5,
-        data5: -1.2,
-        longitude: "110.908662",
-        latitude: "21.671108",
-        dataType: "1"
-      },
-      {
-        data1: "电白袂花江超警戒站",
-        data2: "袂花江",
-        data3: "10月30日13:00",
-        data4: 27.3,
-        data5: -1.5,
-        longitude: "111.133971",
-        latitude: "21.744637",
-        dataType: "2"
-      },
-      {
-        data1: "信宜罗江漫堤站",
-        data2: "罗江",
-        data3: "10月30日14:00",
-        data4: 25.6,
-        data5: -2.0,
-        longitude: "110.572589",
-        latitude: "21.890757",
-        dataType: "3"
-      },
-      {
-        data1: "化州鉴江漫堤站",
-        data2: "鉴江",
-        data3: "10月30日15:00",
-        data4: 26.7,
-        data5: -2.1,
-        longitude: "110.661191",
-        latitude: "21.573497",
-        dataType: "3"
-      },
-      {
-        data1: "茂南小东江上游站",
-        data2: "小东江",
-        data3: "10月30日11:00",
-        data4: 27.9,
-        data5: -2.1,
-        longitude: "110.908662",
-        latitude: "21.671108",
-        dataType: "4"
-      },
-      {
-        data1: "电白袂花江下游站",
-        data2: "袂花江",
-        data3: "10月30日14:00",
-        data4: 27.5,
-        data5: -1.5,
-        longitude: "111.133971",
-        latitude: "21.744637",
-        dataType: "4"
-      },
-      {
-        data1: "信宜罗江支流站",
-        data2: "罗江",
-        data3: "10月30日13:00",
-        data4: 25.8,
-        data5: -2.0,
-        longitude: "110.572589",
-        latitude: "21.890757",
-        dataType: "4"
-      },
-      {
-        data1: "化州鉴江支流站",
-        data2: "鉴江",
-        data3: "10月30日12:00",
-        data4: 26.9,
-        data5: -2.1,
-        longitude: "110.664431",
-        latitude: "21.661873",
-        dataType: "4"
-      },
-      {
-        data1: "茂南小东江下游站",
-        data2: "小东江",
-        data3: "10月30日15:00",
-        data4: 28.2,
-        data5: -1.3,
-        longitude: "110.908662",
-        latitude: "21.671108",
-        dataType: "4"
-      },
-      {
-        data1: "电白袂花江上游站",
-        data2: "袂花江",
-        data3: "10月30日12:00",
-        data4: 27.7,
-        data5: -1.8,
-        longitude: "110.92052",
-        latitude: "21.579965",
-        dataType: "4"
-      },
-      {
-        data1: "信宜罗江主站",
-        data2: "罗江",
-        data3: "10月30日11:00",
-        data4: 25.4,
-        data5: -1.9,
-        longitude: "110.572589",
-        latitude: "21.890757",
-        dataType: "5"
-      },
-      {
-        data1: "化州鉴江主站",
-        data2: "鉴江",
-        data3: "10月30日10:00",
-        data4: 26.5,
-        data5: -2.2,
-        longitude: "110.641206",
-        latitude: "21.605162",
-        dataType: "5"
-      },
-      {
-        data1: "茂南小东江中游站",
-        data2: "小东江",
-        data3: "10月30日13:00",
-        data4: 28.1,
-        data5: -1.4,
-        longitude: "110.908662",
-        latitude: "21.671108",
-        dataType: "5"
-      },
-      {
-        data1: "电白袂花江中游站",
-        data2: "袂花江",
-        data3: "10月30日11:00",
-        data4: 27.4,
-        data5: -1.6,
-        longitude: "110.92052",
-        latitude: "21.579965",
-        dataType: "5"
-      },
-      {
-        data1: "信宜罗江支流下游站",
-        data2: "罗江",
-        data3: "10月30日15:00",
-        data4: 25.9,
-        data5: -2.1,
-        longitude: "110.572589",
-        latitude: "21.890757",
-        dataType: "5"
-      }
-    ]
-  };
+  getRiverList();
+  detailsData.value.text =
+    "2024年10月30日 20:45，袂花江河段当前水位处于正常范围内，低于警戒水位。由于近期连续降雨，河道流量有所增加，但流速和流量仍在可控范围内。";
+  // dataList: [
+  //   {
+  //     data1: "茂南小东江超堰顶站",
+  //     data2: "小东江",
+  //     data3: "10月30日12:00",
+  //     data4: 28.5,
+  //     data5: -1.2,
+  //     longitude: "110.908662",
+  //     latitude: "21.671108",
+  //     dataType: "1"
+  //   },
+  //   {
+  //     data1: "电白袂花江超警戒站",
+  //     data2: "袂花江",
+  //     data3: "10月30日13:00",
+  //     data4: 27.3,
+  //     data5: -1.5,
+  //     longitude: "111.133971",
+  //     latitude: "21.744637",
+  //     dataType: "2"
+  //   },
+  //   {
+  //     data1: "信宜罗江漫堤站",
+  //     data2: "罗江",
+  //     data3: "10月30日14:00",
+  //     data4: 25.6,
+  //     data5: -2.0,
+  //     longitude: "110.572589",
+  //     latitude: "21.890757",
+  //     dataType: "3"
+  //   },
+  //   {
+  //     data1: "化州鉴江漫堤站",
+  //     data2: "鉴江",
+  //     data3: "10月30日15:00",
+  //     data4: 26.7,
+  //     data5: -2.1,
+  //     longitude: "110.661191",
+  //     latitude: "21.573497",
+  //     dataType: "3"
+  //   },
+  //   {
+  //     data1: "茂南小东江上游站",
+  //     data2: "小东江",
+  //     data3: "10月30日11:00",
+  //     data4: 27.9,
+  //     data5: -2.1,
+  //     longitude: "110.908662",
+  //     latitude: "21.671108",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "电白袂花江下游站",
+  //     data2: "袂花江",
+  //     data3: "10月30日14:00",
+  //     data4: 27.5,
+  //     data5: -1.5,
+  //     longitude: "111.133971",
+  //     latitude: "21.744637",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "信宜罗江支流站",
+  //     data2: "罗江",
+  //     data3: "10月30日13:00",
+  //     data4: 25.8,
+  //     data5: -2.0,
+  //     longitude: "110.572589",
+  //     latitude: "21.890757",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "化州鉴江支流站",
+  //     data2: "鉴江",
+  //     data3: "10月30日12:00",
+  //     data4: 26.9,
+  //     data5: -2.1,
+  //     longitude: "110.664431",
+  //     latitude: "21.661873",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "茂南小东江下游站",
+  //     data2: "小东江",
+  //     data3: "10月30日15:00",
+  //     data4: 28.2,
+  //     data5: -1.3,
+  //     longitude: "110.908662",
+  //     latitude: "21.671108",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "电白袂花江上游站",
+  //     data2: "袂花江",
+  //     data3: "10月30日12:00",
+  //     data4: 27.7,
+  //     data5: -1.8,
+  //     longitude: "110.92052",
+  //     latitude: "21.579965",
+  //     dataType: "4"
+  //   },
+  //   {
+  //     data1: "信宜罗江主站",
+  //     data2: "罗江",
+  //     data3: "10月30日11:00",
+  //     data4: 25.4,
+  //     data5: -1.9,
+  //     longitude: "110.572589",
+  //     latitude: "21.890757",
+  //     dataType: "5"
+  //   },
+  //   {
+  //     data1: "化州鉴江主站",
+  //     data2: "鉴江",
+  //     data3: "10月30日10:00",
+  //     data4: 26.5,
+  //     data5: -2.2,
+  //     longitude: "110.641206",
+  //     latitude: "21.605162",
+  //     dataType: "5"
+  //   },
+  //   {
+  //     data1: "茂南小东江中游站",
+  //     data2: "小东江",
+  //     data3: "10月30日13:00",
+  //     data4: 28.1,
+  //     data5: -1.4,
+  //     longitude: "110.908662",
+  //     latitude: "21.671108",
+  //     dataType: "5"
+  //   },
+  //   {
+  //     data1: "电白袂花江中游站",
+  //     data2: "袂花江",
+  //     data3: "10月30日11:00",
+  //     data4: 27.4,
+  //     data5: -1.6,
+  //     longitude: "110.92052",
+  //     latitude: "21.579965",
+  //     dataType: "5"
+  //   },
+  //   {
+  //     data1: "信宜罗江支流下游站",
+  //     data2: "罗江",
+  //     data3: "10月30日15:00",
+  //     data4: 25.9,
+  //     data5: -2.1,
+  //     longitude: "110.572589",
+  //     latitude: "21.890757",
+  //     dataType: "5"
+  //   }
+  // ]
+
   detailsData.value.dataList.forEach(item => {
     const icon =
       item.dataType && !!iconList[item.dataType].image
@@ -305,6 +339,23 @@ const initData = () => {
   });
   dom.addMarker(detailsData.value.dataList);
 };
+const onSelectConfirm = data => {
+  initData();
+};
+
+const onSearchKeyword = val => {
+  keyword.value = val;
+  initData();
+};
+
+const onSearchCancel = () => {
+  keyword.value = "";
+  initData();
+};
+const handleClickTag = item => {
+  item.checked = !item.checked;
+};
+
 // table样式
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";

src/views/disasterRiskMonitor/windAndFloodPrevention.vue

@@ -155,8 +155,8 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="易涝点名称" prop="name" align="center" />
-          <el-table-column label="提供单位" prop="data1" align="center" />
+          <el-table-column label="易涝点名称" prop="flood_name" align="center" />
+          <el-table-column label="提供单位" prop="unit" align="center" />
           <el-table-column label="视频" prop="publicTime" align="center">
             <template #default="scope">
               <div class="btn" @click="handlePlay">播放</div>
@@ -181,6 +181,7 @@ import { onMounted, reactive, ref, watch } from "vue";
 import { getTemperature } from "@/api/disasterRiskMonitor/windAndFloodPrevention";
 import temp1 from "@/assets/temp1.jfif";
 import { chartOption2 } from "./chartOptions";
+import {getEasyFlood} from "@/api/disasterRiskMonitor/easyFlood";
 
 let tabs = reactive([
   { name: "6h降水", value: "6h_precipitation" },
@@ -190,6 +191,7 @@ let tabs = reactive([
   { name: "24h最低温", value: "24h_min_temperature" },
   { name: "24小时变温", value: "24h_variable_temperature" }
 ]);
+
 let tabActive = ref("hourly_temperature");
 
 const liveMapState = reactive({
@@ -221,6 +223,12 @@ const columns = ref([
 let queryParams = reactive({
   area: ""
 });
+const queryParams2 = ref({
+  query: {
+    area: "",
+    keyword: ""
+  }
+});
 const option1 = ref(chartOption2);
 watch(
   () => liveMapState.show,
@@ -257,15 +265,16 @@ const initData = () => {
   getTemperature({ args: tabActive.value }).then(res => {
     liveMapState.data = res.data.max_level;
   });
-  detailsData.value.dataList = [
-    { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
-    { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
-    { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
-  ];
+  // detailsData.value.dataList = [
+  //   { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
+  //   { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
+  //   { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
+  // ];
+  getTableDetail();
   option1.value.xAxis.data = [
     "19时",
     "20时",
@@ -346,6 +355,11 @@ const initData = () => {
   ];
 };
 
+const getTableDetail = () => {
+  getEasyFlood(queryParams2.value).then(res => {
+    detailsData.value.dataList = res.rows;
+  });
+};
 // table样式
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";