fix: 添加图例和视频

src/api/reservoir/index.js

@@ -174,6 +174,15 @@ export const getReservoirCZMonitorEchartsData = (data) =>{
   })
 }
 
+// 获取视频列表/safe/operation/Play
+export const getOperationPlayDataList = (data) => {
+  return request({
+    url: `/safe/operation/Play`,
+    method: 'post',
+    data
+  })
+}
+
 // 水库实时监测--监测站树数据
 export const getReservoirMonitorTreeData = (id) =>{
   return request({

src/views/dike/safeOperation/components/Legend.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="legend-comp">
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
+      <span>大型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
+      <span>中型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
+      <span>小型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_one.png" alt="" />
+      <span>一级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_two_three.png" alt="" />
+      <span>二三级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_four.png" alt="" />
+      <span>四级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_big.png" alt="" />
+      <span>大型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_middle.png" alt="" />
+      <span>中型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_small.png" alt="" />
+      <span>小型水闸</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.legend-comp {
+  width: 100%;
+  .row {
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+}
+</style>

src/views/dike/safeOperation/index.vue

@@ -59,18 +59,7 @@
     </Transition>
 
     <div class="legend-icon">
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
-        <span>大型</span>
-      </div>
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
-        <span>中型</span>
-      </div>
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
-        <span>小型</span>
-      </div>
+      <Legend></Legend>
     </div>
 
     <!-- 弹窗 -->
@@ -104,6 +93,7 @@ import {
 } from "@/views/aiSupervision/waterSetting/runScene/layerTree/index";
 
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
+import Legend from "./components/Legend.vue";
 
 import { throttle } from "lodash-es";
 import { devRun } from "@/utils";
@@ -121,7 +111,7 @@ window.panelClickFunc = function (code, name) {
   });
 };
 export default {
-  components: { ProjectDetail },
+  components: { ProjectDetail, Legend },
   data() {
     return {
       showDialog: false,

src/views/reservoir/safeOperation/components/Legend.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="legend-comp">
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
+      <span>大型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
+      <span>中型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
+      <span>小型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_one.png" alt="" />
+      <span>一级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_two_three.png" alt="" />
+      <span>二三级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_four.png" alt="" />
+      <span>四级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_big.png" alt="" />
+      <span>大型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_middle.png" alt="" />
+      <span>中型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_small.png" alt="" />
+      <span>小型水闸</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.legend-comp {
+  width: 100%;
+  .row {
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+}
+</style>

src/views/reservoir/safeOperation/components/ProjectDetail.vue

@@ -30,10 +30,7 @@
         ></MonitorWarning>
       </el-tab-pane>
       <el-tab-pane label="视频分析" name="6" lazy>
-        <VideoAnalysis
-          ref="videoAnalysis"
-          :resCode="resCode"
-        ></VideoAnalysis>
+        <VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -54,6 +51,7 @@ export default {
     EngineSafe,
     VideoAnalysis,
     DataStatistics,
+    MonitorWarning,
   },
   props: {
     resCode: {

src/views/reservoir/safeOperation/components/VideoAnalysis.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="video-analysis">
     <div class="videoSelect">
-      <el-select placeholder="请选择视频" v-model="activeVideo" size="mini" style="width: 240px">
+      <!-- <el-select
+        placeholder="请选择视频"
+        v-model="activeVideo"
+        size="mini"
+        style="width: 240px"
+      >
         <el-option
           v-for="item in videoList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         />
-      </el-select>
+      </el-select> -->
     </div>
     <el-tabs v-model="activeName">
       <el-tab-pane label="实时视频" name="realTime">
         <div class="videoBox">
-          <video :src="videoUrl" v-if="videoUrl"></video>
+          <video
+            style="width: 100%; height: 100%"
+            :src="videoUrl"
+            v-if="videoUrl"
+          ></video>
           <div v-else class="videoNull">
             <div class="videoContent">
-              <img src="@/assets/image/videoNull.png">
+              <img src="@/assets/image/videoNull.png" />
               <span>暂无内容</span>
             </div>
           </div>
@@ -26,6 +35,7 @@
   </div>
 </template>
 <script>
+import { getOperationPlayDataList } from "@/api/reservoir";
 
 export default {
   props: {
@@ -36,37 +46,30 @@ export default {
   },
   data() {
     return {
-      activeName: 'realTime',
-      videoUrl: '',
-      activeVideo: '0',
+      activeName: "realTime",
+      videoUrl: "",
+      activeVideo: "",
       videoList: [
         {
-          label: 'SP0012',
-          value: '0',
+          label: "实时视频",
+          value: "0",
         },
-        {
-          value: 'Option2',
-          label: 'Option2',
-        },
-        {
-          value: 'Option3',
-          label: 'Option3',
-        },
-        {
-          value: 'Option4',
-          label: 'Option4',
-        },
-        {
-          value: 'Option5',
-          label: 'Option5',
-        },
-      ]
+      ],
     };
   },
   created() {
+    getOperationPlayDataList({
+      pageNum: 1,
+      pageSize: 100,
+      resCode: this.resCode,
+    }).then((res) => {
+      if (res.data) {
+        this.videoList = res.data;
+        this.videoUrl = (res.data.urlsMap && res.data.urlsMap.flvPlayUrl) || "";
+      }
+    });
   },
-  methods: {
-  },
+  methods: {},
 };
 </script>
 <style scoped lang="scss">
@@ -99,6 +102,7 @@ export default {
   }
   .videoSelect {
     position: absolute;
+    z-index: 12;
     right: 0;
     top: 5px;
   }

src/views/reservoir/safeOperation/index.vue

@@ -58,28 +58,27 @@
       </div>
     </Transition>
 
-    <div class="legend-icon" v-if="legendList.length > 0">
-<!--      <div class="row">-->
-<!--        <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />-->
-<!--        <span>大型</span>-->
-<!--      </div>-->
-<!--      <div class="row">-->
-<!--        <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />-->
-<!--        <span>中型</span>-->
-<!--      </div>-->
-<!--      <div class="row">-->
-<!--        <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />-->
-<!--        <span>小型</span>-->
-<!--      </div>-->
-          <div class="legend-content">
-            <div v-for="(item, index) in legendList" :key="item.layerName + index" class="legend-item-box">
+    <div class="legend-icon">
+      <Legend></Legend>
+      <!-- <div class="legend-content">
+        <div
+          v-for="(item, index) in legendList"
+          :key="item.layerName + index"
+          class="legend-item-box"
+        >
           <div class="legend-title">{{ item.layerName }}</div>
           <div v-for="legend in item.legends" class="legend-item">
-                <img class="legend-img" :src="`data:${legend.contentType};base64,${legend.imageData}`" alt="" />
-                <div class="legend-text">{{ legend.label || legend.name || legend.text }}</div>
+            <img
+              class="legend-img"
+              :src="`data:${legend.contentType};base64,${legend.imageData}`"
+              alt=""
+            />
+            <div class="legend-text">
+              {{ legend.label || legend.name || legend.text }}
             </div>
           </div>
         </div>
+      </div> -->
     </div>
     <!-- 弹窗 -->
     <el-dialog
@@ -112,6 +111,7 @@ import {
 } from "@/views/aiSupervision/waterSetting/runScene/layerTree/index";
 
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
+import Legend from "./components/Legend.vue";
 
 import { throttle } from "lodash-es";
 import { devRun } from "@/utils";
@@ -129,7 +129,7 @@ window.panelClickFunc = function (code, name) {
   });
 };
 export default {
-  components: { ProjectDetail },
+  components: { ProjectDetail, Legend },
   data() {
     return {
       showDialog: false,
@@ -311,10 +311,10 @@ export default {
       if (data.pid === "root" || data.layers) return;
       if (checked) {
         this.checkList = [...this.checkList, data.id];
-        const list = this.$refs.tree.getCheckedNodes()
+        const list = this.$refs.tree.getCheckedNodes();
         console.log("checkList >>>>>  ", this.checkList);
         addLayer(data);
-        this.legendList = getSelectedLayersLegend(list)
+        this.legendList = getSelectedLayersLegend(list);
         this.layerList.push(data);
       } else {
         this.checkList = this.checkList.filter((v) => v != data.id);

src/views/reservoir/safeOperation/js/initEcharts.js

@@ -87,6 +87,7 @@ export const initLineOptions = (data) => {
         name: "时间",
         position: "bottom",
         axisLine: {
+          onZero: false,
           show: true,
         },
         axisTick: {

src/views/sluice/safeOperation/components/Legend.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="legend-comp">
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
+      <span>大型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
+      <span>中型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
+      <span>小型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_one.png" alt="" />
+      <span>一级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_two_three.png" alt="" />
+      <span>二三级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/dike_four.png" alt="" />
+      <span>四级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_big.png" alt="" />
+      <span>大型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_middle.png" alt="" />
+      <span>中型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/image/sluice_small.png" alt="" />
+      <span>小型水闸</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.legend-comp {
+  width: 100%;
+  .row {
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+}
+</style>

src/views/sluice/safeOperation/index.vue

@@ -58,20 +58,7 @@
       </div>
     </Transition>
 
-    <div class="legend-icon">
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
-        <span>大型</span>
-      </div>
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
-        <span>中型</span>
-      </div>
-      <div class="row">
-        <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
-        <span>小型</span>
-      </div>
-    </div>
+    <div class="legend-icon"><<Legend></Legend></div>
 
     <!-- 弹窗 -->
     <el-dialog
@@ -106,6 +93,7 @@ import {
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
 
 import { throttle } from "lodash-es";
+import Legend from "./components/Legend.vue";
 import { devRun } from "@/utils";
 
 const emitter = mitt();
@@ -121,7 +109,7 @@ window.panelClickFunc = function (code, name) {
   });
 };
 export default {
-  components: { ProjectDetail },
+  components: { ProjectDetail, Legend },
   data() {
     return {
       showDialog: false,