Merge branch 'master' into release-sy-v1.0.0

src/layout/components/Navbar.vue

@@ -242,7 +242,10 @@ export default {
   },
   mounted() {
     if (!this.selectTab) {
-      let res = this.newTopMenus.find((v) => v.label === "一张图");
+      let res = this.newTopMenus.find((v) => {
+        return v.label === "一张图" || v.label === "安全监管"
+      });
+      console.log(res, 'asdsadsa');
       if (res) {
         this.handleSelectTab(res);
       }
@@ -365,7 +368,7 @@ export default {
             timestamp: new Date().getTime(),
           },
         });
-      } else if (e.label === "一张图") {
+      } else if (e.label === "一张图" || e.label === "安全监管") {
         if (
           typeof e.component === "string" &&
           e.component.toLowerCase() === "iframe"
@@ -382,13 +385,13 @@ export default {
         ) {
           this.handleJump(e.path);
         }
-      } else if (e.value === "reservoir") {
-        this.$router.replace({
-          path: "/reservoir/engineeringCondition/resBaseInfo",
-          query: {
-            timestamp: new Date().getTime(),
-          },
-        });
+        // } else if (e.value === "reservoir") {
+        //   this.$router.replace({
+        //     path: "/reservoir/engineeringCondition/resBaseInfo",
+        //     query: {
+        //       timestamp: new Date().getTime(),
+        //     },
+        //   });
       } else {
         this.$router.replace({
           path: "/",

src/store/modules/permission.js

@@ -11,7 +11,7 @@ import Iframe from "@/layout/Iframe";
 // 提取路由
 const pickRoutes = ["/reservoir", "/dike", "/sluice", "/aiSupervision"];
 // 根据meta.title提取的路由
-const pickRouteNames = ["一张图"];
+const pickRouteNames = ["一张图", "安全监管"];
 
 const permission = {
   state: {
@@ -221,7 +221,7 @@ function resolveChildrenRoutes(routes, pickRoute = permission.state.selectTab) {
         });
       }
     }
-    return !pickRoutes.includes(v.path) && v.meta?.title !== "一张图";
+    return !pickRoutes.includes(v.path) && v.meta?.title !== "一张图" && v.meta?.title !== "安全监管";
   });
   // 提取三大模块菜单的子路由
   let pickChildrenRoutes = [];

src/views/components/VideoPlayer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="video-player-comp">
+    <video id="videoPlayerId" ref="videoRef" :autoplay="true" muted></video>
+  </div>
+</template>
+<script>
+import flvjs from "../../vendors/flv";
+
+export default {
+  props: {
+    url: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      flvPlayer: false,
+    };
+  },
+  created() {},
+  watch: {
+    url: {
+      handler: function (val, oldVal) {
+        if (val) {
+          this.$nextTick(() => {
+            this.play(val);
+          });
+        } else {
+          if (this.flvPlayer) this.flvPlayer.destroy();
+          this.flvPlayer = false;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    play(url) {
+      const videoEle = document.getElementById("videoPlayerId");
+      console.log("videoEle >>>>>  ", videoEle);
+      if (videoEle && url) {
+        if (this.flvPlayer) {
+          this.flvPlayer.destroy();
+          this.flvPlayer = false;
+        }
+
+        this.flvPlayer = flvjs.createPlayer({
+          type: "flv",
+          isLive: true,
+          cors: true,
+          url: url,
+        });
+        this.flvPlayer.attachMediaElement(videoEle);
+        this.flvPlayer.load();
+        console.log("开始播放 >>>> ");
+        this.flvPlayer.play();
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.flvPlayer) {
+      this.flvPlayer.destroy();
+      this.flvPlayer = false;
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.video-player-comp {
+  width: 100%;
+  height: 100%;
+  background: #383838;
+  video {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/dike/runManage/dangerWeakProject/inspectTasks/taskDetails.vue

@@ -543,9 +543,9 @@ export default {
             <el-col :span="2">
               <div class="item-row-content">堤防级别</div>
             </el-col>
-            <el-col :span="2">
-              <div class="item-row-content">堤防型式</div>
-            </el-col>
+<!--            <el-col :span="2">-->
+<!--              <div class="item-row-content">堤防型式</div>-->
+<!--            </el-col>-->
             <el-col :span="2">
               <div class="item-row-content">堤防类型</div>
             </el-col>
@@ -691,18 +691,17 @@ export default {
             <el-table-column
               prop="dikeName"
               label="堤防名称"
-              width="180"
             ></el-table-column>
-            <el-table-column
-              prop="engineeringManagementUnit"
-              label="管理单位"
-              width="180"
-            ></el-table-column>
-            <el-table-column prop="adcdStart" label="所属区域" width="180">
-              <template slot-scope="scope">
-                {{ formatAdcd(scope.row.adcdStart) }}
-              </template>
-            </el-table-column>
+<!--            <el-table-column-->
+<!--              prop="engineeringManagementUnit"-->
+<!--              label="管理单位"-->
+<!--              width="180"-->
+<!--            ></el-table-column>-->
+<!--            <el-table-column prop="adcdStart" label="所属区域" width="180">-->
+<!--              <template slot-scope="scope">-->
+<!--                {{ formatAdcd(scope.row.adcdStart) }}-->
+<!--              </template>-->
+<!--            </el-table-column>-->
             <el-table-column
               fixed="right"
               label="操作"

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

@@ -1,6 +1,6 @@
 <template>
   <div class="project-detail-page">
-    <el-tabs :tab-position="'left'" v-model="activeTab">
+    <el-tabs class="my-tabs" :tab-position="'left'" v-model="activeTab">
       <el-tab-pane label="基础信息" name="1" lazy>
         <BaseInfo
           ref="baseInfoRef"
@@ -83,6 +83,11 @@ export default {
 </script>
 <style scoped lang="scss">
 .project-detail-page {
-  min-height: 600px;
+  .my-tabs {
+    min-height: 600px;
+    .el-tabs__content {
+      height: 100%;
+    }
+  }
 }
 </style>

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

@@ -1,44 +1,54 @@
 <template>
   <div class="video-analysis">
-    <div class="videoSelect">
-      <el-select
-        placeholder="请选择视频"
-        v-model="activeVideo"
-        size="mini"
-        style="width: 240px"
-        @change="change"
-      >
-        <el-option
-          v-for="item in videoList"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
-    </div>
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="实时视频" name="realTime">
-        <div class="videoBox">
-          <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" />
-              <span>暂无内容</span>
+    <template v-if="videoList.length">
+      <div class="videoBox" v-for="index in 9" :key="index">
+        <div
+          class="video-player-box"
+          ref="videoPlayerBoxRef"
+          v-if="videoList[index - 1]"
+        >
+          <div class="video-player-title">
+            <div>
+              {{ videoList[index - 1].cameraId || `视频${index}` }}
             </div>
+            <img
+              @click="handleFullscreen(index - 1, true)"
+              src="@/assets/image/icon-fullscreen.png"
+              class="fullscreen-btn"
+            />
+            <img
+              @click="handleFullscreen(index - 1, false)"
+              src="@/assets/image/icon-fullscreen-close.png"
+              class="fullscreen-close-btn"
+            />
+          </div>
+          <!-- <VideoPlayer :url="videoList[index - 1].flvPlayUrl"></VideoPlayer> -->
+          <VideoPlayer
+            url="http://172.16.32.69/live/test.live.flv"
+          ></VideoPlayer>
+        </div>
+        <div v-else class="videoNull">
+          <div class="videoContent">
+            <img src="@/assets/image/videoNull2.png" />
+            <span>暂无视频</span>
           </div>
         </div>
-      </el-tab-pane>
-    </el-tabs>
+      </div>
+    </template>
+    <div v-else class="video-no-data">
+      <img src="@/assets/image/videoNull3.png" alt="" />
+      <div>暂无接入</div>
+    </div>
   </div>
 </template>
 <script>
-import { getVideoDataList, getOperationPlay} from "@/api/reservoir";
+import { getVideoDataList, getOperationPlay } from "@/api/reservoir";
+import VideoPlayer from "../../../components/VideoPlayer.vue";
 
 export default {
+  components: {
+    VideoPlayer,
+  },
   props: {
     resCode: {
       type: String,
@@ -47,45 +57,91 @@ export default {
   },
   data() {
     return {
-      activeName: "realTime",
-      videoUrl: "",
-      activeVideo: "",
-      videoList: [
-      ],
+      videoList: [],
     };
   },
   created() {
-    getVideoDataList({
-      pageNum: 1,
-      pageSize: 100,
+    getOperationPlay({
       resCode: this.resCode,
     }).then((res) => {
       if (res.data) {
-        this.videoList = res.data.cameraIds;
+        this.videoList = res.data.urlsMapList || [];
       }
     });
   },
   methods: {
-    change(val) {
-      console.log("cameraId-watch >>>>>  ", val);
-      getOperationPlay({
-        cameraId: val,
-      }).then((res) => {
-      if (res.data) {
-        this.videoUrl = res.data.urlsMap.flvPlayUrl;
-      }
-    });
+    handleFullscreen(index) {
+      this.$refs.videoPlayerBoxRef[index].classList.toggle("fullscreen");
     },
   },
 };
 </script>
 <style scoped lang="scss">
 .video-analysis {
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: baseline;
+  width: 100%;
+  height: 100%;
   .videoBox {
-    height: 558px;
-    video {
+    width: 320px;
+    height: 180px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    .video-player-box {
+      position: relative;
       width: 100%;
       height: 100%;
+      .fullscreen-btn {
+        cursor: pointer;
+        display: block;
+      }
+      .fullscreen-close-btn {
+        cursor: pointer;
+        display: none;
+      }
+      &.fullscreen {
+        position: absolute;
+        width: calc(100% - 40px);
+        height: calc(100% - 40px);
+
+        left: 20px;
+        top: 20px;
+        z-index: 2;
+        .fullscreen-btn {
+          display: none;
+        }
+        .fullscreen-close-btn {
+          display: block;
+        }
+      }
+
+      .video-player-title {
+        position: absolute;
+        width: 100%;
+        padding: 0 8px;
+        left: 0;
+        top: 0;
+        color: #fff;
+        font-size: 12px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 1;
+        background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+        img {
+          width: 18px;
+          height: 18px;
+        }
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
     }
     .videoNull {
       width: 100%;
@@ -95,10 +151,11 @@ export default {
       justify-content: center;
       align-items: center;
       .videoContent {
+        font-size: 12px;
         img {
-          width: 44px;
-          height: 35px;
-          margin-bottom: 8px;
+          width: 48px;
+          height: 48px;
+          margin-bottom: 4px;
         }
         display: flex;
         flex-direction: column;
@@ -107,11 +164,21 @@ export default {
       }
     }
   }
-  .videoSelect {
-    position: absolute;
-    z-index: 12;
-    right: 0;
-    top: 5px;
+
+  .video-no-data {
+    width: 100%;
+    height: 480px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 16px;
+    color: #262626;
+    img {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 16px;
+    }
   }
 }
 </style>

vue.config.js

@@ -80,8 +80,9 @@ module.exports = {
         changeOrigin: true,
       },
       [process.env.VUE_APP_BASE_API]: {
-        // target: "http://shuili.product.dev.com:30115/",
-        target: "http://127.0.0.1:18082/",
+        target: "http://shuili.product.dev.com:30115/",
+        // target: "http://127.0.0.1:18082/",
+        // target: "http://172.16.34.80:18082/",
         // target: 'http://172.16.32.62:18888/',
         // target: "http://172.16.34.27:18082",
         changeOrigin: true,