Merge remote-tracking branch 'origin/master'

src/api/globalMap/riverMonitor.ts

@@ -1,18 +1,18 @@
-import request from '@/utils/request';
+import request from "@/utils/request";
 // 获取河流列表
-export const getRiverList = (data) => {
+export const getRiverList = data => {
   return request({
-    url: '/api/gateway/v1/get_river_list',
-    method: 'post',
+    url: "/api/gateway/v1/get_river_list",
+    method: "post",
     data: data
   });
 };
 
 // 河道监测-过去24小时河流水位变化图
-export const getRiverCourseLevel = (params) => {
+export const getRiverCourseLevel = params => {
   return request({
-    url: '/api/gateway/v1/get_river_course_level',
-    method: 'get',
+    url: "/api/gateway/v1/get_river_course_level",
+    method: "get",
     params: params
   });
 };
@@ -20,7 +20,7 @@ export const getRiverCourseLevel = (params) => {
 // 河道监测-河流水位状态
 export const getRiverWaterStatus = () => {
   return request({
-    url: '/api/gateway/v2/get_river_water_status',
-    method: 'get'
+    url: "/api/gateway/v2/get_river_water_status",
+    method: "get"
   });
 };

src/router/routes.ts

@@ -226,6 +226,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       title: "防风防汛应急专题"
     }
   },
+  {
+    path: "/windAndFloodPreventionView",
+    name: "WindAndFloodPreventionView",
+    component: () =>
+      import("@/views/disasterRiskMonitor/windAndFloodPreventionView.vue"),
+    meta: {
+      title: "防风防汛视频详情"
+    }
+  },
   {
     path: "/geologicalDisaster",
     name: "GeologicalDisaster",

src/views/disasterRiskMonitor/windAndFloodPrevention.vue

@@ -37,13 +37,21 @@
         <div class="text">一周预报</div>
       </div>
       <div class="card-content3">
-        <div v-for="(item, index) in weekForecast" :key="index" class="card-item">
+        <div
+          v-for="(item, index) in weekForecast"
+          :key="index"
+          class="card-item"
+        >
           <div class="text1">{{ item.name }}</div>
-          <div class="text1"><i :class="getClass(item.type1)" />{{ item.type1 }}</div>
+          <div class="text1">
+            <i :class="getClass(item.type1)" />{{ item.type1 }}
+          </div>
           <div class="text1">{{ item.data1 }}℃</div>
           <div class="text1">{{ item.data2 }}</div>
           <div class="text1">|</div>
-          <div class="text1"><i :class="getClass(item.type2)" />{{ item.type2 }}</div>
+          <div class="text1">
+            <i :class="getClass(item.type2)" />{{ item.type2 }}
+          </div>
           <div class="text1">{{ item.data3 }}℃</div>
           <div class="text1">{{ item.data4 }}</div>
         </div>
@@ -105,9 +113,9 @@
         <div class="card-item">
           <i class="icon1" />
           <div class="flex">
-            <div class="text1">漫坝</div>
+            <div class="text1">{{ riverStatus[0].type }}</div>
             <div class="text2 text-red">
-              30
+              {{ riverStatus[0].value }}
               <div class="text3">个</div>
             </div>
           </div>
@@ -115,9 +123,9 @@
         <div class="card-item2">
           <i class="icon2" />
           <div class="flex">
-            <div class="text1">超保证</div>
+            <div class="text1">{{ riverStatus[1].type }}</div>
             <div class="text2 text-orange">
-              69
+              {{ riverStatus[1].value }}
               <div class="text3">个</div>
             </div>
           </div>
@@ -125,9 +133,9 @@
         <div class="card-item3">
           <i class="icon3" />
           <div class="flex">
-            <div class="text1">超警戒</div>
+            <div class="text1">{{ riverStatus[2].type }}</div>
             <div class="text2 text-blue">
-              41
+              {{ riverStatus[2].value }}
               <div class="text3">个</div>
             </div>
           </div>
@@ -155,11 +163,15 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="易涝点名称" prop="flood_name" 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>
@@ -181,7 +193,9 @@ 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";
+import { getEasyFlood } from "@/api/disasterRiskMonitor/easyFlood";
+import router from "@/router";
+import { getRiverStatus } from "@/api/disasterRiskMonitor/riverInform";
 
 let tabs = reactive([
   { name: "6h降水", value: "6h_precipitation" },
@@ -194,6 +208,7 @@ let tabs = reactive([
 
 let tabActive = ref("hourly_temperature");
 
+const riverStatus = ref();
 const liveMapState = reactive({
   show: false,
   activeIndex: 0,
@@ -202,13 +217,69 @@ const liveMapState = reactive({
   data: []
 });
 let weekForecast = ref([
-  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '雷雨', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '雷雨', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
-  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  {
+    name: "今天",
+    type1: "晴",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "晴",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "雷雨",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "晴",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "雷雨",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "晴",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  },
+  {
+    name: "今天",
+    type1: "晴",
+    data1: "32.6",
+    data2: "小于3级",
+    type2: "阴",
+    data3: "32.6",
+    data4: "小于3级"
+  }
 ]);
 let detailsData = ref({
   dataList: []
@@ -230,6 +301,12 @@ const queryParams2 = ref({
   }
 });
 const option1 = ref(chartOption2);
+const getRiverDetail = () => {
+  getRiverStatus().then(res => {
+    riverStatus.value = res.rows;
+  });
+};
+getRiverDetail();
 watch(
   () => liveMapState.show,
   () => {
@@ -249,17 +326,17 @@ const onSelectTypeConfirm = ({ selectedOptions }) => {
   initData();
 };
 
-const getClass = (name) => {
-  let res = ''
-  if (name === '晴') {
-    res = 'icon1'
-  } else if (name === '阴') {
-    res = 'icon2'
-  } else if (name === '雷雨') {
-    res = 'icon3'
+const getClass = name => {
+  let res = "";
+  if (name === "晴") {
+    res = "icon1";
+  } else if (name === "阴") {
+    res = "icon2";
+  } else if (name === "雷雨") {
+    res = "icon3";
   }
-  return res
-}
+  return res;
+};
 
 const initData = () => {
   getTemperature({ args: tabActive.value }).then(res => {
@@ -365,7 +442,16 @@ const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";
 };
 
-const handlePlay = id => {};
+const handlePlay = row => {
+  router.push({
+    name: "WindAndFloodPreventionView",
+    query: {
+      latitude: row.lat,
+      longitude: row.lng,
+      name: encodeURIComponent(row.flood_name)
+    }
+  });
+};
 onMounted(() => {
   initData();
 });
@@ -395,7 +481,7 @@ onMounted(() => {
       align-items: center;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
-      background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
+      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
       .icon-line {
         display: inline-block;
         width: 6px;
@@ -425,15 +511,20 @@ onMounted(() => {
       justify-content: space-between;
       align-items: center;
       .card-item {
-        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box1.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box1.png")
+          no-repeat;
       }
       .card-item2 {
-        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box2.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box2.png")
+          no-repeat;
       }
       .card-item3 {
-        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box3.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/box3.png")
+          no-repeat;
       }
-      .card-item, .card-item2, .card-item3 {
+      .card-item,
+      .card-item2,
+      .card-item3 {
         width: 106px;
         height: 71px;
 
@@ -454,7 +545,7 @@ onMounted(() => {
           width: 25px;
           height: 27px;
           background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/icon2.png")
-          no-repeat;
+            no-repeat;
           background-size: 100% 100%;
         }
         .icon3 {
@@ -462,7 +553,7 @@ onMounted(() => {
           width: 25px;
           height: 26px;
           background: url("@/assets/images/disasterRiskMonitor/windAndFloodPrevention/icon3.png")
-          no-repeat;
+            no-repeat;
           background-size: 100% 100%;
         }
         .flex {
@@ -505,9 +596,16 @@ onMounted(() => {
         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;
+        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;
@@ -519,7 +617,7 @@ onMounted(() => {
           justify-content: center;
           align-items: center;
           font-size: 12px;
-          color: #414F64;
+          color: #414f64;
           line-height: 21px;
         }
       }

src/views/disasterRiskMonitor/windAndFloodPreventionView.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>