对接接口搜索、水位状态、路网视频

src/api/duty/eventing.ts

@@ -3,7 +3,6 @@ import request from '@/utils/request';
 // 获取事件列表
 export function getEvent(params) {
   return request({
-    url: '/api/event_management/event/list',
     url: '/api/event_management/event/list',
     method: 'get',
     params: params

src/api/globalMap/reservoirMonitor.ts

@@ -16,3 +16,11 @@ export const getReservoirCourseLevel = (params) => {
     params: params
   });
 };
+
+// 水库监测-水库水位状态
+export const getReservoirWaterStatus = () => {
+  return request({
+    url: '/api/gateway/v2/get_reservoir_water_status',
+    method: 'get'
+  });
+};

src/api/globalMap/riverMonitor.ts

@@ -17,3 +17,10 @@ export const getRiverCourseLevel = (params) => {
   });
 };
 
+// 河道监测-河流水位状态
+export const getRiverWaterStatus = () => {
+  return request({
+    url: '/api/gateway/v2/get_river_water_status',
+    method: 'get'
+  });
+};

src/api/globalMap/roadNetworkVideo.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+// 路网视频-视频列表
+export const getRoadVideoList = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_road_video_list',
+    method: 'post',
+    data: data
+  });
+};

src/types/components.d.ts

@@ -50,8 +50,6 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']

src/views/globalMap/RightMenu/Reservoir.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="container">
     <div class="title">江湖河库</div>
-    <div>
-      <el-input v-model="queryParams.name" :prefix-icon="Search" size="large" clearable />
+    <div class="flex">
+      <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
+      <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
     </div>
     <div>视频类型</div>
     <el-table :data="listData" border style="width: 100%">
-      <el-table-column prop="data1" show-overflow-tooltip align="center">
+      <el-table-column prop="area" show-overflow-tooltip align="center">
         <template #header>
-          <el-select v-model="queryParams.range" placeholder="所有区县" size="large">
+          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </template>
@@ -40,13 +41,13 @@
 import { Search } from '@element-plus/icons-vue';
 import Dialog from '@/components/Dialog/index2.vue';
 import { getWaterList2 } from '@/api/globalMap/reservoir';
+import { deepClone } from '@/utils';
 
 const queryParams = reactive({
   current: 1,
   size: 10,
-  name: '',
-  type: '检测站',
-  range: ''
+  keyword: '',
+  area: ''
 });
 const total = ref(0);
 
@@ -72,14 +73,9 @@ const options = reactive([
     label: '化州市'
   }
 ]);
-const listData = ref([{ data1: '高州', data2: '高州市根子水库' }]);
+const listData = ref([]);
 
 let showDialog = ref(false);
-// 请求参数
-const queryParams2 = reactive({
-  current: 1,
-  size: 1
-});
 let videoMonitorData = ref({});
 const handleShowDialog = (row) => {
   showDialog.value = false;
@@ -89,8 +85,16 @@ const handleShowDialog = (row) => {
   });
 };
 const initData = () => {
-  getWaterList2(queryParams).then((res) => {
-    listData.value = res.data.list;
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area,
+    keyword: queryParams.keyword
+  };
+  delete newQueryParams.area;
+  delete newQueryParams.keyword;
+  getWaterList2(newQueryParams).then((res) => {
+    listData.value = res.rows;
+    total.value = res.total;
   });
 };
 initData();

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -3,16 +3,16 @@
   <div style="margin-top: 20px">更新时间：{{ ReservoirMonitorData.time }}</div>
   <div class="flex" style="margin-top: 20px">
     <div style="margin-right: 20px">
-      <div>漫坝</div>
-      {{ ReservoirMonitorData.data1 }}
+      <div>超警戒</div>
+      {{ ReservoirMonitorData.statusList[0] ? ReservoirMonitorData.statusList[0]?.value : '-' }}
     </div>
     <div style="margin-right: 20px">
-      <div>超汛限</div>
-      {{ ReservoirMonitorData.data2 }}
+      <div>超保证</div>
+      {{ ReservoirMonitorData.statusList[1] ? ReservoirMonitorData.statusList[1]?.value : '-' }}
     </div>
     <div>
-      <div>超堰顶(在溢洪)</div>
-      {{ ReservoirMonitorData.data3 }}
+      <div>漫坝</div>
+      {{ ReservoirMonitorData.statusList[2] ? ReservoirMonitorData.statusList[2]?.value : '-' }}
     </div>
   </div>
   <el-table :data="ReservoirMonitorData.listData" border style="width: 100%">
@@ -25,13 +25,13 @@
     </el-table-column>
     <el-table-column prop="area" show-overflow-tooltip align="center">
       <template #header>
-        <el-select v-model="queryParams.area" placeholder="所属区县2" size="large">
+        <el-select v-model="queryParams.area" placeholder="所属区县" size="large" clearable @change="initData">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </template>
     </el-table-column>
     <el-table-column prop="floodLimit" label="汛限水位(m)" show-overflow-tooltip sortable align="center" />
-    <el-table-column prop="waterStor" label="当前水位(m)" show-overflow-tooltip sortable align="center" />
+    <el-table-column prop="level" label="当前水位(m)" show-overflow-tooltip sortable align="center" />
     <el-table-column prop="waterDiff" label="差值" show-overflow-tooltip sortable align="center" />
   </el-table>
   <pagination
@@ -45,7 +45,7 @@
     <div class="flex">
       <div class="detail-container">
         <div class="flex">
-          <div style="font-size: 44px;margin-right: 10px">{{ selectRow.name }}</div>
+          <div style="font-size: 44px; margin-right: 10px">{{ selectRow.name }}</div>
           <div>{{ selectRow.address }}</div>
         </div>
         <div class="flex" style="justify-content: space-between">
@@ -55,7 +55,7 @@
           </div>
           <div class="flex">
             <div>当前水位</div>
-            <div>{{ selectRow.waterStor }}米</div>
+            <div>{{ selectRow.level }}米</div>
           </div>
         </div>
         <div>
@@ -64,31 +64,23 @@
         </div>
         <div class="table-wrap">
           <div class="table-title">
-            <div
-              class="title-item"
-              v-for="(item, index) in tableTitle"
-              :key="index"
-            >
+            <div v-for="(item, index) in tableTitle" :key="index" class="title-item">
               {{ item }}
             </div>
           </div>
           <div class="content-wrap">
-            <div
-              class="content-item"
-              v-for="(item, index) in detailData"
-              :key="index"
-            >
+            <div v-for="(item, index) in detailData" :key="index" class="content-item">
               <div class="time">{{ item.time }}</div>
-              <div class="value">{{ item.waterStor }}</div>
+              <div class="value">{{ item.level }}</div>
               <div class="value1">{{ item.inFlow ? item.inFlow : '-' }}</div>
               <div class="value2">{{ item.ouFlow ? item.ouFlow : '-' }}</div>
               <div
                 class="waterunit"
                 :style="{
-                  color: item.ss == '涨' ? '#fc5a5a' : item.ss == '落' ? '#00e9ea' : '#cbddff'
+                  color: item.waterLevelStatus == '涨' ? '#fc5a5a' : item.waterLevelStatus == '落' ? '#00e9ea' : '#cbddff'
                 }"
               >
-                {{ item.ss }}
+                {{ item.waterLevelStatus }}
               </div>
             </div>
           </div>
@@ -112,10 +104,10 @@
 <script lang="ts" setup name="ReservoirMonitor">
 import Dialog from '@/components/Dialog/index2.vue';
 import { option3 } from './echartOptions';
-import { getEmergencyVideoCata } from '@/api/routineCommandMap';
-import { getReservoirCourseLevel, getReservoirList } from '@/api/globalMap/reservoirMonitor';
+import { getReservoirCourseLevel, getReservoirList, getReservoirWaterStatus } from '@/api/globalMap/reservoirMonitor';
 import { parseTime } from '@/utils/ruoyi';
 import { getVideoInfo } from '@/api/globalMap';
+import { deepClone } from '@/utils';
 
 const options = reactive([
   {
@@ -150,17 +142,23 @@ let total = ref(0);
 // 数据
 const ReservoirMonitorData = reactive({
   time: '',
-  data1: '',
-  data2: '',
-  data3: '',
+  statusList: [],
   listData: []
 });
 // 获取数据
 const initData = async () => {
-  getReservoirList(queryParams).then((res) => {
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area
+  };
+  delete newQueryParams.area;
+  getReservoirList(newQueryParams).then((res) => {
     total.value = res.total;
     ReservoirMonitorData.listData = res.rows;
   });
+  getReservoirWaterStatus().then((res) => {
+    ReservoirMonitorData.statusList = res.rows || [];
+  });
 };
 
 initData();
@@ -170,7 +168,7 @@ const selectRow = ref({
   name: '',
   address: '',
   floodLimit: '',
-  waterStor: ''
+  level: ''
 });
 const detailData = ref([]);
 const tableTitle = ref(['时间', '库上水位(m)', '入库流量(m²/s)', '出库流量(m²/s)', '水势']);
@@ -204,7 +202,7 @@ const handleShowDialog = (row) => {
 
       data.forEach((item) => {
         time.push(parseTime(item.time, '{h}'));
-        resultData.push(item.waterStor);
+        resultData.push(item.level);
         inFlowData2.push(item.inFlow);
         outFlowData.push(item.outFlow);
         item.time = parseTime(item.time, '{m}-{d} {h}:{i}');

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -3,16 +3,16 @@
   <div style="margin-top: 20px">更新时间：{{ riverMonitorData.time }}</div>
   <div class="flex" style="margin-top: 20px">
     <div style="margin-right: 20px">
-      <div>漫坝</div>
-      {{ riverMonitorData.data1 }}
+      <div>超警戒</div>
+      {{ riverMonitorData.statusList[0] ? riverMonitorData.statusList[0]?.value : '-' }}
     </div>
     <div style="margin-right: 20px">
-      <div>超汛限</div>
-      {{ riverMonitorData.data2 }}
+      <div>超保证</div>
+      {{ riverMonitorData.statusList[1] ? riverMonitorData.statusList[1]?.value : '-' }}
     </div>
     <div>
-      <div>超堰顶(在溢洪)</div>
-      {{ riverMonitorData.data3 }}
+      <div>漫坝</div>
+      {{ riverMonitorData.statusList[2] ? riverMonitorData.statusList[2]?.value : '-' }}
     </div>
   </div>
   <el-table :data="riverMonitorData.listData" border style="width: 100%">
@@ -25,7 +25,7 @@
     </el-table-column>
     <el-table-column prop="area" label="所属区县" show-overflow-tooltip align="center">
       <template #header>
-        <el-select v-model="queryParams.area" placeholder="所属区县" size="large">
+        <el-select v-model="queryParams.area" placeholder="所属区县" size="large" clearable @change="initData">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </template>
@@ -100,9 +100,10 @@
 import Dialog from '@/components/Dialog/index2.vue';
 import { option1, option2 } from './echartOptions';
 import { getEmergencyVideoCata } from '@/api/routineCommandMap';
-import { getRiverCourseLevel, getRiverList } from '@/api/globalMap/riverMonitor';
+import { getRiverCourseLevel, getRiverList, getRiverWaterStatus } from '@/api/globalMap/riverMonitor';
 import { parseTime } from '@/utils/ruoyi';
 import { getVideoInfo } from '@/api/globalMap';
+import { deepClone } from '@/utils';
 
 const options = reactive([
   {
@@ -137,17 +138,23 @@ let total = ref(0);
 // 数据
 const riverMonitorData = reactive({
   time: '',
-  data1: '',
-  data2: '',
-  data3: '',
+  statusList: [],
   listData: []
 });
 // 获取数据
 const initData = async () => {
-  getRiverList(queryParams).then((res) => {
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area
+  };
+  delete newQueryParams.area;
+  getRiverList(newQueryParams).then((res) => {
     total.value = res.total;
     riverMonitorData.listData = res.rows;
   });
+  getRiverWaterStatus().then((res) => {
+    riverMonitorData.statusList = res.rows || [];
+  });
 };
 
 initData();

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="container">
     <div class="title">路网视频</div>
-    <div>
-      <el-input v-model="queryParams.name" :prefix-icon="Search" size="large" clearable />
+    <div class="flex">
+      <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
+      <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
     </div>
     <div>类型</div>
     <el-checkbox-group v-model="queryParams.type" size="large">
@@ -10,23 +11,31 @@
     </el-checkbox-group>
     <div>视频类型</div>
     <el-table :data="listData" border style="width: 100%">
-      <el-table-column prop="data1" show-overflow-tooltip align="center">
+      <el-table-column prop="area" show-overflow-tooltip align="center">
         <template #header>
-          <el-select v-model="queryParams.range" placeholder="全部" size="large">
+          <el-select v-model="queryParams.area" placeholder="全部" size="large" clearable @change="initData">
             <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称" show-overflow-tooltip align="center">
         <template #default="scope">
           <div style="color: #409eff; cursor: pointer" @click="handleShowDialog(scope.row)">
-            {{ scope.row.data1 }}
+            {{ scope.row.name }}
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="data2" label="名称" show-overflow-tooltip align="center" />
     </el-table>
+    <pagination
+      v-show="total > queryParams.size"
+      v-model:page="queryParams.current"
+      v-model:limit="queryParams.size"
+      :total="total"
+      @pagination="initData"
+    />
     <Dialog v-model="showDialog" title="路网视频" width="2500px" height="1200px">
-      <div style="width: 2500px; height: 1120px; display: flex; justify-content: center; align-items: center;">
-        <HKVideo :dot_data="videoMonitorData[0]" :width="2400" :height="1000" />
+      <div style="width: 2500px; height: 1120px; display: flex; justify-content: center; align-items: center">
+        <HKVideo :dot_data="videoMonitorData" :width="2400" :height="1000" />
       </div>
     </Dialog>
   </div>
@@ -36,15 +45,18 @@
 import { Search } from '@element-plus/icons-vue';
 import { getEmergencyVideoCata } from '@/api/routineCommandMap';
 import Dialog from '@/components/Dialog/index2.vue';
+import { deepClone } from '@/utils';
+import { getWaterList2 } from '@/api/globalMap/reservoir';
+import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
 
 const queryParams = reactive({
-  page: 1,
-  pageSize: 10,
-  name: '',
+  current: 1,
+  size: 10,
+  keyword: '',
   type: '检测站',
-  range: ''
+  area: ''
 });
-
+let total = ref(0);
 const options = reactive([
   { label: '检测站', value: '检测站' },
   { label: '收费站', value: '收费站' },
@@ -54,8 +66,27 @@ const options = reactive([
   { label: '高速服务区', value: '高速服务区' }
 ]);
 
-const options2 = reactive([{ label: '包茂高速', value: '包茂高速' }]);
-const listData = ref([{ data1: '包茂高速', data2: '钱排互通 往南宁方向' }]);
+const options2 = reactive([{
+  value: '茂南区',
+  label: '茂南区'
+},
+  {
+    value: '高州市',
+    label: '高州市'
+  },
+  {
+    value: '电白区',
+    label: '电白区'
+  },
+  {
+    value: '信宜市',
+    label: '信宜市'
+  },
+  {
+    value: '化州市',
+    label: '化州市'
+  }]);
+const listData = ref([]);
 
 let showDialog = ref(false);
 // 请求参数
@@ -63,13 +94,28 @@ const queryParams2 = reactive({
   current: 1,
   size: 1
 });
-let videoMonitorData = ref([]);
+let videoMonitorData = ref({});
 const handleShowDialog = (row) => {
-  showDialog.value = true;
-  getEmergencyVideoCata(queryParams2).then((res) => {
-    videoMonitorData.value = res.rows;
+  showDialog.value = false;
+  nextTick(() => {
+    videoMonitorData.value = row;
+    showDialog.value = true;
+  });
+};
+const initData = () => {
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area,
+    keyword: queryParams.keyword
+  };
+  delete newQueryParams.area;
+  delete newQueryParams.keyword;
+  getRoadVideoList(newQueryParams).then((res) => {
+    listData.value = res.rows;
+    total.value = res.total;
   });
 };
+initData();
 </script>
 
 <style lang="scss" scoped>