视频

src/api/data/http.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询区域列表
+export function httpRequest(data) {
+  return request({
+    url: '/qdtl/common/http',
+    method: 'post',
+    data: data
+  })
+}

src/components/map/index.vue

@@ -1,7 +1,24 @@
 <template>
+<div>
   <div style="width:100%;height:100%">
     <div id="map" ref="rootmap"></div>
   </div>
+
+  <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="50%"
+      height="80rem"
+      :before-close="handleClose">
+      <div style="height:70rem">
+         <videodiv :cameracode="ccode" style="width:100%;height:60rem;"></videodiv>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span> -->
+</el-dialog>
+</div>
 </template>
 
 <script>
@@ -57,7 +74,8 @@ export default {
       locations:[],
       vector:null,
       pointArry:new Map(),
-     
+      dialogVisible:false,
+      ccode:''
     };
   },
   mounted() {
@@ -69,9 +87,34 @@ export default {
 
 
     var that = this
-    // this.map.on("click", function (e) {
-    //        that.addMarker(e.coordinate,'专家站点.png',0.2);
-    // });
+    this.map.on("click", function (e) {
+          //  that.addMarker(e.coordinate,'专家站点.png',0.2);
+           console.log(e)
+            var pixel = that.map.getEventPixel(e.originalEvent);
+            var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+                return feature;
+              });
+            // var feature = that.map.forEachFeatureAtPixel(e.pixel,
+            //     function(feature) {
+            //       console.log(feature);
+            //         return feature;
+            //     });
+                console.log(feature)
+            if (feature) { //这里说明我们点击的是点标记，
+                let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
+                if (tadata) {
+                    if (tadata.sectionId == "line") {
+                        alert("我是线：" + tadata.towerNumber)
+                    }
+                    if (tadata.sectionId == "point") {
+                         that.dialogVisible = true
+                         console.log(tadata.data)
+                         this.ccode = tadata.data.cameraIndexCode
+                    }
+                    //含有lnglat 参数的点标记触发事件
+                }
+            }
+    });
 
 
     var view = this.map.getView();
@@ -249,11 +292,17 @@ const vector = new LayerVec({
               this.vector.getSource().clear()
           }
       },
-      addMarker(lnglats,icon,size,id) {
+      removeLayer(id){
+         var layers = this.pointArry.get(id);
+         this.map.removeLayer(layers);
+
+      },
+      addMarker(lnglats,icon,size,id,data) {
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
                     towerNumber: 22,
+                    data: data,
                 }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                 geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
             });

src/views/qdtl/video/index.vue

@@ -7,6 +7,8 @@
             </el-input>
             <el-tree
                 :data="videoData"
+                :load="loadNode"
+                lazy
                 show-checkbox
                 node-key="id"
                 :default-expanded-keys="[2, 3]"
@@ -29,6 +31,7 @@
 
 <script>
 import { listVideo } from "@/api/qdtl/video";
+import { httpRequest } from "@/api/data/http";
 import mapdiv from "@/components/map/index.vue"
 
 export default {
@@ -74,7 +77,17 @@ export default {
           children: 'children',
           label: 'label'
         },
-        filterText:''
+        filterText:'',
+        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:{
@@ -86,11 +99,71 @@ export default {
       }
     },
     created() {
-        this.getList();
+        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(this.queryParams).then(response => {
+            listVideo().then(response => {
                 console.log(response);
                 this.videoData= response.data
                  console.log(this.videoData);
@@ -112,15 +185,32 @@ export default {
                 if (!value) return true;
                 return data.label.indexOf(value) !== -1;
       },
-      treeChange(){
+      treeChange(data, node){
+          console.log(data);
+          console.log(node);
           var arry = this.$refs.tree.getCheckedNodes()
-          var pontArry = this.$refs.mapdiv.pointArry;
-          for(var index in arry){
-                var obj = arry[index]
-                if(pontArry.get(obj.id) == null){
-                       this.$refs.mapdiv.pointArry();
-                }
+          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);
+          //           }
+          //       }
+          // }
+       
+
       }
     }
 };

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
         proxy: {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
-                target: `http://qdtlbg.xt.wenhq.top:8083`,
+                target: `http://58.221.168.61:9000/api`,
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: ''