视频监控

src/views/qdtl/video/video.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+      <div class='leftTree'>
+            <el-input
+                placeholder="输入关键字进行过滤"
+                v-model="filterText">
+            </el-input>
+            <el-tree
+                :data="videoData"
+                :load="loadNode"
+                lazy
+                show-checkbox
+                node-key="id"
+                :default-expanded-keys="[2, 3]"
+                :default-checked-keys="[5]"
+                :props="defaultProps"
+                :filter-node-method="filterNode"
+                ref="tree"
+                @check-change = 'treeChange'
+                style="height:97rem;background-color:#04283C;color:#C5D0D4"
+                >
+            </el-tree>
+      </div>
+
+     <div style="float:left;margin-left:3rem;margin-top:1rem">
+         <videodiv :cameracode="ccode" style="width:115rem;height:100rem"></videodiv>
+           <!-- <mapdiv ref='mapv' style="height:100rem;width:115rem" ></mapdiv> -->
+      </div>
+
+  </div>
+</template>
+
+<script>
+import { listVideo } from "@/api/qdtl/video";
+import { httpRequest } from "@/api/data/http";
+import videodiv from "@/components/Videoplayer/index.vue"
+
+export default {
+    data() {
+      return {
+        videoData:[],
+        data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        filterText:'',
+        ccode:'',
+        pointIdArry:[],
+        regionIndexCode:'',
+        queryParams:{
+             url:'http://2.90.220.252:9017/artemis-web/debug',
+             params:'{"httpMethod":"POST","path":"/api/resource/v1/regions","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+        },
+         videoParams:{
+             url:'http://2.90.220.252:9017/artemis-web/debug',
+            //  params:'{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+this.regionIndexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+        },
+      };
+    },
+    components:{
+      videodiv
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    created() {
+        this.getvideo();
+        // this.getList();
+    },
+    methods:{
+        loadNode(node, resolve){
+             console.log(node.data.indexCode);
+            //  this.regionIndexCode = node.data.indexCode;
+        //       setTimeout(() => {
+        //       var data;
+        //       if (hasChild) {
+        //         data = [{
+        //           name: 'zone' + this.count++
+        //         }, {
+        //           name: 'zone' + this.count++
+        //         }];
+        //       } else {
+        //         data = [];
+        //       }
+
+        //   resolve(data);
+        // }, 500);
+
+        if (node.level > 1) return resolve([]);
+
+        if(node.level === 1){
+             this.videoParams.params = '{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+node.data.indexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                        console.log(json);
+                        var childerns = [];
+                        for(var index in json.data.list){
+                          // console.log();
+                              var obj = json.data.list[index];
+                              obj.id = obj.cameraIndexCode;
+                              obj.label = obj.name;
+                              obj.data = obj;
+                              obj.lnglat = obj.longitude +','+obj.latitude;
+                              childerns.push(obj);
+                        }
+                        resolve(childerns);
+                  });
+        }
+          
+        },
+        getvideo(){
+           httpRequest(this.queryParams).then(response => {
+               console.log(response);
+               var json = JSON.parse(response.data);
+               console.log(json);
+               for(var index in json.data.list){
+                  var obj = json.data.list[index]
+                  obj.id = obj.indexCode;
+                  obj.label = obj.name;
+                  obj.data = obj;
+                  this.videoData.push(obj);
+                  // this.regionIndexCode = obj.indexCode;
+                  // httpRequest(this.videoParams).then(data =>{
+                  //        console.log(data);
+                  // });
+               }
+
+           });
+        },
+       getList() {
+            listVideo().then(response => {
+                console.log(response);
+                this.videoData= response.data
+                 console.log(this.videoData);
+                 for(var index in this.videoData){
+                    var obj = this.videoData[index];
+                    obj.label = obj.areaName;
+                    obj.children = []
+                    for(var i in obj.monitors){
+                         var monitor = obj.monitors[i]
+                         monitor.data = monitor;
+                         monitor.label = monitor.name;
+                         obj.children.push(monitor);
+                    }
+                 }
+                 console.log(this.videoData);
+            });
+       },
+      filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+      },
+      treeChange(data, node){
+          console.log(data);
+          console.log(node);
+          var arry = this.$refs.tree.getCheckedNodes()
+          var pointArry = this.$refs.mapv.pointArry;
+          console.log(pointArry);
+          if(data.lnglat != null){
+              if(node == false){
+                   this.$refs.mapv.removeLayer(data.id);
+              }else if(node == true){
+                   this.$refs.mapv.addMarker(data.lnglat.split(','),'监控 (2) 拷贝 20.png',0.2,data.id,data);
+              }
+
+          }
+          // for(var index in arry){
+          //       var obj = arry[index]
+          //       if(obj.lnglat){
+          //           if(pointArry.get('obj') == null){
+          //                 console.log(obj.lnglat);
+          //                 this.$refs.mapv.addMarker(obj.lnglat.split(','),'监控 (2) 拷贝 20.png',0.2,obj.id);
+          //                 this.pointIdArry.push(obj.id);
+          //           }
+          //       }
+          // }
+       
+
+      }
+    }
+};
+</script>
+
+<style>
+     .leftTree{
+          float:left;
+          width:34rem;
+     }
+</style>
+