安防监控

src/api/monitoring/camera.js

@@ -50,4 +50,4 @@ export function exportCamera(query) {
     method: 'get',
     params: query
   })
-}
+}

src/layout/components/Sidebar/SidebarItem.vue

@@ -28,6 +28,7 @@
         :base-path="resolvePath(child.path)"
         class="nest-menu"
         ref="menuref"
+        @click.native="a(child)"
       />
     </el-submenu>
   </div>
@@ -39,7 +40,9 @@ import { isExternal } from "@/utils/validate";
 import Item from "./Item";
 import AppLink from "./Link";
 import FixiOSBug from "./FixiOSBug";
-
+import {
+  listCamera,
+} from "@/api/monitoring/camera";
 export default {
   name: "SidebarItem",
   components: { Item, AppLink },
@@ -61,12 +64,19 @@ export default {
   },
   data() {
     this.onlyOneChild = null;
-    return {};
+    return {
+      form:{},
+      cameraList:[]
+    };
   },
   mounted() {
     
   },
   methods: {
+    a(indent){
+      this.form=indent
+       this.$bus.$emit("Click", this.form)
+    },
     hasOneShowingChild(children = [], parent) {
       if (!children) {
         children = [];

src/layout/components/Sidebar/index.vue

@@ -29,11 +29,13 @@
         mode="vertical"
         :default-active="$route.path"
       >
+      <!-- @click.native="a(route,index)" -->
         <sidebar-item
           v-for="(route, index) in routs"
           :key="route.path + index"
           :item="route"
           :base-path="route.path"
+          
         />
       </el-menu>
     </el-scrollbar>
@@ -89,6 +91,9 @@ export default {
     // window.location.reload()
   },
   methods: {
+    a(route,index){
+      console.log(route,index)
+    },
     sidebarRoutersfun() {
       this.sidebarRouters.map(item => {
         // console.log(this.$route.query.name);

src/main.js

@@ -65,6 +65,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.handleTree = handleTree
 Vue.prototype.getNowWeek = getNowWeek
+Vue.prototype.$bus=  new Vue();
 // originVal 后台返回的中国标准时间
 Vue.filter('dataFormat', originVal => {
   const dt = new Date(originVal)

src/views/monitoring/camera/index.vue

@@ -230,11 +230,21 @@
       </el-col>
       <el-col :span="1.5" class="isSubmit">
         <!-- <el-radio-group v-model="queryParams.type" @change="caoZuoTypefun"> -->
-        <button @click="one" class="single" :class="this.btn==0?'bg':''">单屏</button>
-        <button @click="four" class="singles" :class="this.btn==1?'bg':''">四分屏</button>
+        <button @click="one" class="single" :class="this.btn == 0 ? 'bg' : ''">
+          单屏
+        </button>
+        <!-- <button
+          
+          class="singles"
+          :class="this.btn == 1 ? 'bg' : ''"
+        >
+          四分屏
+        </button> -->
         <!-- <el-radio-button label="2">九分屏</el-radio-button> -->
         <!-- <el-radio-button label="3" class="allFlv1">十六分屏</el-radio-button> -->
-        <button @click="all" class="allFlv" :class="this.btn==3?'bg':''">全通道FLV</button>
+        <button @click="four" class="allFlv" :class="this.btn == 1 ? 'bg' : ''">
+          全通道FLV
+        </button>
         <!-- <el-radio-button label="5" class="fullscreen">全屏</el-radio-button> -->
         <!-- </el-radio-group> -->
       </el-col>
@@ -261,19 +271,26 @@
             highlight-current
             :expand-on-click-node="false"
           ></el-tree> -->
+          <!-- 左侧 -->
           <div class="videolist">
             <div class="userAgrees">
-              <ul style="height: calc(100vh - 240px); overflow: auto">
+              <ul
+                style="height: calc(100vh - 240px); overflow: auto"
+                v-if="this.as == true"
+              >
                 <li
                   style="margin-left: -40px; padding-left: 40px"
                   v-for="(item, index) in cameraList"
-                  :key="index"
+                  :key="item.id"
                   @click="clickhandleitem(item, index)"
                 >
                   <i class="el-icon-video-camera-solid"></i>
                   {{ item.cname }}
                 </li>
               </ul>
+              <!-- <div id="aa">
+              {{cameraList.query}}
+            </div> -->
             </div>
           </div>
         </div>
@@ -317,17 +334,11 @@
         </div>
         <!-- 四屏播放 -->
         <!-- <keep-alive> -->
-        <div class="video1" v-if="this.btn == 1">
+        <div class="video1" v-if="this.btn == 1 && this.dan == false">
           <div
             v-for="(i, index) in this.fourvideo"
             :key="index"
-            style="
-              width: 49.5%;
-              height: calc(50vh - 106px);
-              margin-left: 5px;
-              margin-bottom: 5px;
-              position: relative;
-            "
+            class="fourscreen"
           >
             <video
               autoplay
@@ -343,54 +354,18 @@
             ></video>
           </div>
         </div>
-        <!-- 全通道FLV -->
-        <div class="video1" v-if="this.btn == 3">
-          <div
-            v-for="(i, index) in 6"
-            :key="index"
-            style="
-              width: 32.9%;
-              height: calc(50vh - 110px);
-              margin-left: 5px;
-              margin-bottom: 5px;
-              position: relative;
-            "
-          >
+        <div class="video1" v-if="this.btn == 1 && this.dan == true">
+          <div v-for="(i, index) in 1" :key="index" class="fullscreen">
             <video
               autoplay
               controls
-              style="width: 100%; height: 100%"
+              style="width: 100%; height: 100%; position: relative"
               :id="'singleplay' + index"
             ></video>
           </div>
-          <!-- <pagination
-            style="position: absolute; right: 0; bottom: 5px"
-            v-show="total > 0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-          /> -->
         </div>
       </el-col>
     </el-row>
-
-    <div class="videobox">
-      <!-- <div class="videolist">
-        <div class="search">
-          <ul>
-            <li
-              v-for="(item, index) in rtsplist"
-              :key="index"
-              @click="clickhandleitem(item, index)"
-            >
-              <i class="el-icon-video-camera-solid"></i>
-              列表{{ index }}
-            </li>
-          </ul>
-        </div>
-      </div> -->
-    </div>
   </div>
 </template>
 
@@ -442,7 +417,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
         cname: null,
         caddr: null,
         cstatus: null,
@@ -509,48 +484,120 @@ export default {
       flvPlayerList1: [],
       fourvideo: 4,
       videourl: [
-        "http://192.168.5.187/hdl/live/stream1.flv",
         "http://192.168.5.187/hdl/live/stream0.flv",
         "http://192.168.5.187/hdl/live/stream1.flv",
         "http://192.168.5.187/hdl/live/stream0.flv",
+        "http://192.168.5.187/hdl/live/stream1.flv",
       ],
       btn: 0,
+      clickindex: "",
+      sixvideo: 6,
+      dan: false,
+      as: true,
+      belongLocal: "",
+      ad: 0,
     };
   },
   mounted() {
+    listCamera(this.queryParams).then((response) => {
+      this.url1 = response.rows[0].caddr;
+    });
     // 单个视频播放
     // this.singleplayvideo();
     this.oneVideo();
+    // 点击
+    this.$bus.$on("Click", (cameraList) => {
+      listCamera({ belongLocal: cameraList.query }).then((response) => {
+        this.cameraList = response.rows;
+        this.ad = 1;
+        this.getList(cameraList.query);
+      });
+    });
   },
+  beforeMount() {},
   created() {
     this.queryParams.type = 0;
-    this.getList();
+    // debugger
+    this.aa();
     // 获取执行单位列表
     getDept2().then((res) => {
       this.users = res.data;
     });
   },
-
   methods: {
+    // 调用List接口
+    aa() {
+      if (this.$route.path == "/monitoring/camera") {
+        this.getList(1);
+      } else if (this.$route.path == "/monitoring/1") {
+        this.getList(2);
+      } else if (this.$route.path == "/monitoring/3") {
+        this.getList(3);
+      }
+    },
     // 初始化视频
     singleplayvideo(name, url, num) {
-      console.log(name);
+      // console.log(name);
       if (flvjs.isSupported()) {
         // debugger;
-
-        name = flvjs.createPlayer({
-          type: "flv",
-          url: url, //你的url地址
-        });
-        console.log(1);
+        name = flvjs.createPlayer(
+          {
+            type: "flv",
+            url: url, //你的url地址
+          },
+          {
+            enableWorker: false, //不启用分离线程
+            enableStashBuffer: false, //关闭IO隐藏缓冲区
+            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+            autoCleanupSourceBuffer: true, //自动清除缓存
+            fixAudioTimestampGap: false,
+          }
+        );
         this.$nextTick(() => {
           // 可以使用回调函数的写法
           // 这个函数中DOM必定渲染完成
           let videoElement1 = document.getElementById("singleplay" + num);
           // debugger;
           name.attachMediaElement(videoElement1);
-          name.load();
-          name.play();
+          // name.load();
+          // name.play();
+          if (url !== "" && url !== null) {
+            name.load();
+            name.play();
+          }
+          //定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
+          setInterval(function () {
+            if (videoElement1.buffered.length > 0) {
+              const end = videoElement1.buffered.end(0); // 视频结尾时间
+              const current = videoElement1.currentTime; //  视频当前时间
+              const diff = end - current; // 相差时间
+              // console.log(diff);
+              const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
+              const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
+              const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
+              let playbackRate = 1.0; // 播放速度
+              if (diff > diffCritical) {
+                //  this.flvPlayer.load();
+                // console.log("相差超过4秒，进行跳转");
+                videoElement1.currentTime = end - 1.5;
+                playbackRate = Math.max(1, Math.min(diffCritical, 16));
+              } else if (diff > diffSpeedUp) {
+                // console.log("相差超过1秒，进行加速");
+                playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
+              }
+              videoElement1.playbackRate = playbackRate;
+              if (videoElement1.paused) {
+                videoElement1.play();
+              }
+            }
+          }, 1000);
+
+          name.on(flvjs.Events.ERROR, (errType, errDetail) => {
+            // alert("网络波动,正在尝试连接中...");
+            if (name) {
+              this.reloadVideo(name);
+            }
+          });
           this.flvPlayerList1.push(name);
         });
       }
@@ -561,22 +608,36 @@ export default {
     },
     // 单分屏点击事件。
     clickhandleitem(data, index) {
-      console.log(1);
-      this.destoryVideo(this.flvPlayerList1[0]);
-      this.flvPlayerList1.shift();
-      this.url1 = this.cameraList[index].caddr;
-      this.singleplayvideo("flvPlayer1", this.url1, "");
-      // }
+      if (this.btn == 0) {
+        this.destoryVideo(this.flvPlayerList1[0]);
+        this.flvPlayerList1.shift();
+        this.url1 = this.cameraList[index].caddr;
+        this.singleplayvideo("flvPlayer1", this.url1, "");
+      } else if (this.btn == 1) {
+        this.fourvideo = 1;
+        this.clickindex = index;
+        for (var i of this.flvPlayerList1) {
+          this.destoryVideo(this.flvPlayerList1[0]);
+          this.flvPlayerList1.shift();
+        }
+        console.log(this.flvPlayerList1);
+        this.url1 = this.cameraList[index].caddr;
+        console.log(this.url1);
+        this.dan = true;
+        this.singleplayvideo("flvPlayer1", this.url1, 0);
+      }
+    },
+    // 播放
+    play(flvPlayer) {
+      flvPlayer.play();
     },
     // 单分屏播放
     one() {
       this.btn = 0;
-      console.log(this.flvPlayerList1);
       for (var i of this.flvPlayerList1) {
         this.destoryVideo(this.flvPlayerList1[0]);
         this.flvPlayerList1.shift();
       }
-      console.log(this.flvPlayerList1);
       this.oneVideo();
       // console.log(this.flvPlayerList1)
     },
@@ -584,65 +645,49 @@ export default {
     four() {
       this.fourvideo = 4;
       this.btn = 1;
+      this.dan = false;
       for (var i of this.flvPlayerList1) {
         this.destoryVideo(this.flvPlayerList1[0]);
         this.flvPlayerList1.shift();
       }
-      console.log(this.flvPlayerList1);
       for (var i = 0; i < this.fourvideo; i++) {
-        // console.log(i)
-        if (i == 1) {
-          this.singleplayvideo("flvPlayer" + i, this.url1, i);
-        } else {
-          this.url1 = this.videourl[i - 2];
-          this.singleplayvideo("flvPlayer" + i, this.url1, i);
-        }
+        this.url1 = this.cameraList[i].caddr;
+        // 报错原因是这个地址没有视频
+        console.log(this.url1);
+        this.singleplayvideo("flvPlayer" + i, this.url1, i);
       }
-      console.log(this.flvPlayerList1);
+    },
+    /** 查询安防监控列表 */
+    getList(a) {
+      // debugger
+      this.loading = true;
+      listCamera({ belongLocal: a }).then((response) => {
+        this.cameraList = response.rows;
+        this.url1 = this.cameraList[0].caddr;
+        console.log(this.url1);
+        this.total = response.total;
+        this.loading = false;
+        // this.queryParams.type==""
+      });
     },
     // 操作类型
     caoZuoTypefun() {
       this.getList();
     },
     // 全通道
-    all(){
-      this.btn=3
-    },
-    // createVideo() {
-    //   if (flvjs.isSupported()) {
-    //     var videoElement = document.getElementById("videoElement" + this.count);
-    //     this.flvPlayer = flvjs.createPlayer(
-    //       {
-    //         type: "flv",
-    //         isLive: true,
-    //         hasAudio: false,
-    //         url: this.url,
-    //       },
-    //       {
-    //         enableWorker: false, //不启用分离线程
-    //         enableStashBuffer: false, //关闭IO隐藏缓冲区
-    //         reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
-    //         autoCleanupSourceBuffer: true, //自动清除缓存
-    //       }
-    //     );
-
-    //     this.flvPlayer.attachMediaElement(videoElement);
-    //     // this.flvPlayer.load();
-
-    //     if (this.url !== "" && this.url !== null) {
-    //       this.flvPlayer.load();
-    //       this.flvPlayer.play();
-    //     }
+    // all() {
+    //   this.sixvideo = 6;
+    //   this.btn = 1;
+    //   this.dan=false
+    //   for (var i of this.flvPlayerList1) {
+    //     this.destoryVideo(this.flvPlayerList1[0]);
+    //     this.flvPlayerList1.shift();
+    //   }
+    //   console.log(this.flvPlayerList1);
+    //   for (var i = 0; i < this.sixvideo; i++) {
+    //     this.url1 = this.cameraList[i].caddr;
+    //     this.singleplayvideo("flvPlayer" + i, this.url1, i);
     //   }
-
-    //   this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
-    //     // alert("网络波动,正在尝试连接中...");
-    //     if (this.flvPlayer) {
-    //       this.reloadVideo(this.flvPlayer);
-    //     }
-    //   });
-    //   console.log(this.flvPlayer)
-    //   this.flvPlayerList.push(this.flvPlayer);
     // },
     reloadVideo(flvPlayer) {
       this.destoryVideo(flvPlayer);
@@ -656,17 +701,6 @@ export default {
       flvPlayer.destroy();
       flvPlayer = null;
     },
-    /** 查询安防监控列表 */
-    getList() {
-      this.loading = true;
-      listCamera(this.queryParams).then((response) => {
-        this.cameraList = response.rows;
-        // console.log(this.cameraList);
-        this.total = response.total;
-        this.loading = false;
-        // this.queryParams.type==""
-      });
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -703,7 +737,6 @@ export default {
       this.multiple = !selection.length;
     },
     selectPeo(item) {
-      console.log(item);
       this.form.unitname = item.label;
     },
     /** 新增按钮操作 */
@@ -724,7 +757,6 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form);
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -775,6 +807,7 @@ export default {
   },
 };
 </script>
+
 <style scoped>
 .bg {
   background: #1d96ff;
@@ -829,7 +862,7 @@ export default {
   color: #ffffff;
 }
 
-::v-deep .allFlv{
+::v-deep .allFlv {
   width: 100px;
   height: 36px;
   color: white;
@@ -1133,16 +1166,27 @@ video {
   color: #ffffff;
   /* border-radius: 8px 0px 0px 8px; */
 }
-.single:focus{
+.single:focus {
   outline: none;
 }
-.singles:focus{
+.singles:focus {
   outline: none;
 }
-.allFlv:focus{
+.allFlv:focus {
   outline: none;
 }
-.bg{
+.bg {
   background: #006cff;
 }
+.fullscreen {
+  width: 100%;
+  height: calc(100vh - 200px);
+}
+.fourscreen {
+  width: 49.5%;
+  height: calc(50vh - 106px);
+  margin-left: 5px;
+  margin-bottom: 5px;
+  position: relative;
+}
 </style>

src/views/system/menu/index.vue

@@ -455,6 +455,7 @@ export default {
       this.loading = true;
       listMenu(this.queryParams).then((response) => {
         this.menuList = this.handleTree(response.data, "menuId");
+        console.log(this.menuList)
         this.loading = false;
       });
     },