更新

src/api/qdtl/data.js

@@ -33,5 +33,13 @@ export function getLineData() {
     })
   }
 
+  export function getVideoHttp(query) {
+    return request({
+      url: '/qdtl/common/rtmp/'+query,
+      method: 'get',
+      param:query
+    })
+  }
+
 
 

src/components/map/index.vue

@@ -35,6 +35,17 @@
       </el-checkbox-group>
    </div>
 
+   
+    <div class='locationDiv' :style="locationStyle" v-show='isShow'>
+          <div style="background:blue;height:4rem;width:100%;padding-top:0.8rem;padding-left:0.5rem">
+               <span style='color:white;font-size:1.5rem;'>巡检点</span>
+          </div>
+          <div style="text-align:center;margin-top:0.5rem"> 
+              <img :src='clickObj.imgsrc' style="width:20rem;height:20rem"/>
+              <div>{{clickObj.name}}</div>
+          </div>
+    </div>
+
 
       <el-dialog
           title="视频播放"
@@ -112,7 +123,7 @@ import videodiv from "@/components/Videoplayer/index.vue"
 import { getResource } from "@/api/qdtl/data";
 import {LineString, Point} from "ol/geom";
 import { scale } from 'ol/coordinate';
-import { getLineData } from "@/api/qdtl/data";
+import { getLineData,getVideoHttp } from "@/api/qdtl/data";
 import {toStringHDMS} from 'ol/coordinate';
 // import {Icon, Stroke, Style} from "ol/style";
 // import {Vector as LayerVec} from "ol/layer";
@@ -128,7 +139,10 @@ export default {
   dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
   data() {
     return {
+      locationStyle:'left:85.5rem;top:71.1rem',
+      clickObj:{},
       iconSelectArea:true,
+      isShow:false,
       iconSelect:0,
       checkList:[],
       map: null,
@@ -141,6 +155,7 @@ export default {
       pointArry:{},
       mapHashMap:{},
       deviceList:[],
+      Base64:require('js-base64').Base64,
       areaList:[],
       dialogVisible:false,
       ccode:'',
@@ -196,6 +211,7 @@ export default {
             this.getResource();
     }
     this.map.on("click", function (e) {
+      // console.log(event.screenX+','+event.screenY)        
           //  that.addMarker(e.coordinate,'专家站点.png',0.2);
             var pixel = that.map.getEventPixel(e.originalEvent);
             var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
@@ -208,6 +224,19 @@ export default {
                         // alert("我是线：" + tadata.towerNumber)
                     }
                     if (tadata.sectionId == "point") {
+                         if(tadata.type == 'location'){
+
+                                var event = window.event; 
+                                var x = event.screenX/10+5;
+                                var y = event.screenY/10-20;
+                                console.log(x+','+y);
+                                that.locationStyle='top:'+y+'rem;left:'+x+'rem'
+                                console.log(that.locationStyle);
+                                that.clickObj = tadata.data
+                                // console.log(tadata.pic);
+                                that.clickObj.imgsrc = 'http://58.221.168.61:9000/api'+tadata.data.pic
+                                that.isShow = true
+                         }
                          if(tadata.type == 'video'){
                                that.ccode = tadata.data.cameraIndexCode
                                 window.cameraid = that.ccode;
@@ -219,9 +248,10 @@ export default {
                           if(tadata.type == 'wrj'){
                               //  that.ccode = tadata.data.cameraIndexCode
                                 // window.cameraid = that.ccode;
+                                // console.log(tadata.data);
                                 that.dialogVisibleCk = true
                                 setTimeout(() => {
-                                  that.loadCkplayer()
+                                  that.loadCkplayer(tadata.data.video)
                                 }, 1000);
                          }
                          if(that.isLine){
@@ -273,61 +303,61 @@ export default {
     this.map.on('moveend', function (e) {
     });
 
-    this.map.on('pointermove', function (evt) {
-          if (evt.dragging) {
-            return;
-          }
-          const pixel = that.map.getEventPixel(evt.originalEvent);
-          var feature = that.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-                return feature;
-              });
-           if (feature) { //这里说明我们点击的是点标记，
-                let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
-                if (tadata) {
-                    if (tadata.sectionId == "line") {
-                        // alert("我是线：" + tadata.towerNumber)
-                    }
-                    if (tadata.sectionId == "point") {
-                        //  that.addText(evt.coordinate);
-                      // console.log(tadata);
-                       $(that.element).popover('dispose');
-                           that.popup.setPosition(evt.coordinate);
-                           if(tadata.data.pic){
-                                //  var src = 'http://58.221.168.61:9000/api/common/download/resource?resource=/profile/bx/1.jpg'
-                                 var src = 'http://58.221.168.61:9000/api'+tadata.data.pic
-                                 $(that.element).popover({
-                                    placement: 'top',
-                                    html: true,
-                                    content: '<div><div class="imgClass" style="width:10rem;height:10rem"><img  style="width:10rem;height:10rem" src="'+src+'" class="imgClass"/></div><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
-                                  });
-
-                           }else{
-                                 $(that.element).popover({
-                                    placement: 'top',
-                                    html: true,
-                                    content: '<div><img src="'+that.imgBg+'" style="width:5rem;height:5rem"/><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
-                                  });
-                           }
-                                 $(that.element).popover('show');
-                        // } else {
-                        //   $(element).popover('dispose');
-                        // }
-                                          // popup = new OpenLayers.Popup.FramedCloud("Popup",
-                    //     new OpenLayers.LonLat(5.6, 50.6),
-                    //     null,
-                    //     '<div>Hello World! Put your html here</div>',
-                    //     null,
-                    //     false);
-                    // this.map.addPopup(popup);
-                    }else{
-                      //  console.log(1111111);
-                       $(that.element).popover('dispose');
-                    }
-                    //含有lnglat 参数的点标记触发事件
-                }
-            }
+    // this.map.on('pointermove', function (evt) {
+    //       if (evt.dragging) {
+    //         return;
+    //       }
+    //       const pixel = that.map.getEventPixel(evt.originalEvent);
+    //       var feature = that.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+    //             return feature;
+    //           });
+    //        if (feature) { //这里说明我们点击的是点标记，
+    //             let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
+    //             if (tadata) {
+    //                 if (tadata.sectionId == "line") {
+    //                     // alert("我是线：" + tadata.towerNumber)
+    //                 }
+    //                 if (tadata.sectionId == "point") {
+    //                     //  that.addText(evt.coordinate);
+    //                   // console.log(tadata);
+    //                    $(that.element).popover('dispose');
+    //                        that.popup.setPosition(evt.coordinate);
+    //                        if(tadata.data.pic){
+    //                             //  var src = 'http://58.221.168.61:9000/api/common/download/resource?resource=/profile/bx/1.jpg'
+    //                              var src = 'http://58.221.168.61:9000/api'+tadata.data.pic
+    //                              $(that.element).popover({
+    //                                 placement: 'top',
+    //                                 html: true,
+    //                                 content: '<div><div class="imgClass" style="width:10rem;height:10rem"><img  style="width:10rem;height:10rem" src="'+src+'" class="imgClass"/></div><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
+    //                               });
+
+    //                        }else{
+    //                              $(that.element).popover({
+    //                                 placement: 'top',
+    //                                 html: true,
+    //                                 content: '<div><img src="'+that.imgBg+'" style="width:5rem;height:5rem"/><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
+    //                               });
+    //                        }
+    //                              $(that.element).popover('show');
+    //                     // } else {
+    //                     //   $(element).popover('dispose');
+    //                     // }
+    //                                       // popup = new OpenLayers.Popup.FramedCloud("Popup",
+    //                 //     new OpenLayers.LonLat(5.6, 50.6),
+    //                 //     null,
+    //                 //     '<div>Hello World! Put your html here</div>',
+    //                 //     null,
+    //                 //     false);
+    //                 // this.map.addPopup(popup);
+    //                 }else{
+    //                   //  console.log(1111111);
+    //                    $(that.element).popover('dispose');
+    //                 }
+    //                 //含有lnglat 参数的点标记触发事件
+    //             }
+    //         }
               
-    })
+    // })
   },
   methods: {
      locationDelete(data){
@@ -339,27 +369,27 @@ export default {
              }
         }   
      },
-      loadCkplayer(){
-      // var videoObject = {
-      //   container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
-      //   variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
-      //   autoplay:true,
-      //   live:true,
-      //   overspread:true,//是否让视频铺满播放器
-      //   plug:'flv.js',//m3u8-hls形式播放视频
-      //   // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
-      //   video:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'//视频地址
-      //   // video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls.m3u8'
-      // };
-      var videoObject = {
-        container: '.video', //容器的ID或className
-        variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
-        autoplay:true,
-        live:true,
-				plug:'flv.js',//设置使用hls插件
-				video:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
-			};
-      window.player = new ckplayer(videoObject);
+      loadCkplayer(url){
+        url = 'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
+        console.log(url);
+        url = this.Base64.encode(url);
+        console.log(url);
+        getVideoHttp(url).then(data=>{
+            console.log(data.data)
+            var videoObject = {
+              container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
+              variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
+              autoplay:true,
+              live:true,
+              overspread:true,//是否让视频铺满播放器
+              html5m3u8:true,//m3u8-hls形式播放视频
+              // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
+              video:data.data//视频地址
+              // video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls.m3u8'
+            };
+            console.log(videoObject);
+            window.player = new ckplayer(videoObject);
+        })
     },
      getResource(){
                getResource({date:'2022-03-12'}).then(response =>{
@@ -413,11 +443,11 @@ export default {
                          if(obj.configKey.indexOf('lined') > -1){
                                 var lineLocations ="["+obj.configValue+"]"                            
                                 var json = JSON.parse(lineLocations);
-                                this.addline(json,1);
+                                this.addline(json,'nqtl');
                          }else if(obj.configKey.indexOf('lineun') > -1){
                                 var lineLocations ="["+obj.configValue+"]"
                                 var json = JSON.parse(lineLocations);
-                                this.addline(json,2);
+                                this.addline(json,'nqtl2');
                          }
 
                     }
@@ -636,7 +666,7 @@ export default {
             // markerta.setVisible(true)
 
       },
-        addline: function(lnglats,type) {
+      addline: function(lnglats,type) {
             let line = new Feature({
                 tadata: {
                     sectionId: "line",
@@ -657,6 +687,9 @@ export default {
               if(type == 'device'){
                  this.deviceList.push(linevectorLayer);
                  linevectorLayer.setVisible(false)
+            }else{
+               this.mapHashMap[type]=linevectorLayer;
+               linevectorLayer.setVisible(false)
             }
             this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
         },
@@ -703,25 +736,6 @@ export default {
 
               }
         },
-        transpoints: function(points, type) {
-            if (false) {
-                return points;
-            } else {
-                if (type == 1) {
-                    var pp = [];
-                    points.forEach(point => {
-                        pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
-                    });
-                    return pp;
-                } else {
-                    var pp = [];
-                    points.forEach(point => {
-                        pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
-                    });
-                    return pp;
-                }
-            }
-        },
         handleClose(){
             closevideo();
             this.dialogVisible = false
@@ -743,6 +757,7 @@ export default {
             for(var index in this.areaList){
                  this.areaList[index].setVisible(false)
             }
+            console.log(this.deviceList);
             for(var index in value){
               if(value[index] == 'device'){
                     for(var index in this.deviceList){
@@ -767,7 +782,7 @@ export default {
                     color: "#008000"
                 })
             })
-          if(type == 1){
+          if(type == 'nqtl'){
               style =[
                           new Style({
                               stroke: new Stroke({
@@ -787,7 +802,7 @@ export default {
                               zIndex:21
                           })
                       ]
-          }else if(type == 2){
+          }else if(type == 'nqtl2'){
                style =[
                      new Style({
                           stroke: new Stroke({
@@ -861,4 +876,14 @@ img{
     width:10rem;
     height:10rem
 }
+
+.locationDiv{
+    position: absolute;
+    /* top: 50rem;
+    right: 5rem; */
+    width: 24rem;
+    min-height: 24rem;
+    background-color: transparent ;
+    background:white
+}
 </style>

src/main.js

@@ -40,6 +40,8 @@ import DictData from '@/components/DictData'
 //echarts组件
 import echarts from 'echarts'
 
+import Base64 from 'js-base64'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -51,6 +53,7 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 Vue.prototype.$echarts = echarts
+Vue.prototype.$Base64 = Base64;
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
@@ -64,6 +67,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+// Vue.use(Base64)
 DictData.install()
 
 /**

src/views/governance/index.vue

@@ -1,8 +1,8 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
-  <div style="display:fix;flex-direction:row">
-  <div style="width:25%;height:100%;display: inline-flex;">
+  <div style="display: inline-flex;width:100%">
+  <div style="width:25%;height:100%;">
        <div style="width:100%">
        <div class="divtitle" style="margin-top:0.5rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
@@ -52,15 +52,15 @@
         <div>
              <div></div>
         </div>
-
        </div>
 
-
   </div>
-  <div style="width:48%;height:95%;position:absolute;display: inline-flex;">
+
+  <div style="width:50%;height:90rem">
       <mapdiv ref="mapdiv" style=""></mapdiv>
   </div>
-  <div style="width:25%;height:100%;margin-left:92rem;display: inline-flex;">
+  
+  <div style="width:25%;height:100%;">
         <div style="width:100%;padding-left:1rem">
         <div class="divtitle" style="margin-top:1.5rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>

src/views/qdtl/paiban/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-     <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+     <!-- <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv> -->
      <div class="divtitle">
        <img src="~@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
        <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:1rem">{{divtitle}}</div>