+

liuyg

2021-07-02 e3be7edc5564f1723b87ec82442a3877be894c22

 xcxMapJQLG/js/vueMain.js

@@ -24,6 +24,14 @@
      shipingM3u8Url: '',
      resultFeedbackPopupShow: false,
      popupDisplay: "none",

      haveShishiweizhi: 1,
      isFromJQ: false,
      chulijieguo: '',
      wentifankui: '',
      oldlat: '',
      oldlng: '',

   },
   methods: {
      getDataList() {
@@ -37,26 +45,58 @@
            "state": '0',
            "dtype": '0',
            "size": '300',
            "jd": "115.822311",
            "wd": "28.646341"
            "jd": "114.91385",
            "wd": "25.81051"
         }]
         //url解码
         // this.getdata = this.getQueryVariable('data') || data;
         this.getdata = data;
         this.getdata = this.getQueryVariable('data') || data;
         // this.getdata = data;
         this.changeDom(this.getdata[0]);
         this.map = this.beginMap(this.map, this.getdata); //创建并接受map
         // this.move = new myDomMove('#seedata', '.title', '#map');
         this.map.invalidateSize(true); //应用地图高度
         // this.move.followFinger(this.map, 'down');
         this.lat = data[0].wd;
         this.lng = data[0].jd;
         this.oldlat = data[0].wd;
         this.oldlng = data[0].jd;
      },
      changeDom(data) {
         console.log(data, 'changeDom');

         function changeDoms(dom, item) {
            $(dom).empty();
            $(dom).append(item);
         }
         changeDoms('#um-m-t-bz', data.bz);
         changeDoms('#um-m-t-dz', data.place);
         // console.log(data.jtype, data.securityId, '11111111111')
         if (data.jtype == 2) {
            changeDoms('#um-m-t-states', '已处理');

         } else if (data.jtype == 1) {
            changeDoms('#um-m-t-states', '处理中');
            $('#jieshou').hide();
            $('#wanchen').show();
         } else {
            changeDoms('#um-m-t-states', '未处理');
            $('#jieshou').show();
            $('#wanchen').hide();
         }
         // if (this.isFromJQ == false) {
         //    $('#wanchen').show();
         // }

      },
      //url解码
      getQueryVariable(variable) {
         var that = this;
         var query = window.location.search.substring(1);
         var vars = query.split("&");
         for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
               that.isFromJQ = true; //确认是警情进来
               return JSON.parse(decodeURI(pair[1]));
            } //解码url 和 JSON
         }
@@ -103,14 +143,14 @@

         var transportIcon = L.Icon.extend({ //图标初始化
            options: {
               iconSize: [30, 30], // 图标尺寸
               iconSize: [50, 30], // 图标尺寸
            }
         });
         var carIcon = new transportIcon({ //引入图标
               iconUrl: './img/gray.png'
            }),
            planeIcon = new transportIcon({
               iconUrl: './img/green.png'
               iconUrl: './img/zd.png'
            }),
            busIcon = new transportIcon({
               iconUrl: './img/red.png'
@@ -131,7 +171,6 @@
               console.log('没有坐标', i)
            } else {
               setData(a);
               that.getDHLine(a.jd, a.wd);
            }
            markers.addLayer(marker);
         }
@@ -140,26 +179,116 @@
         markers.on('click', function(a) {
            if (i == 0) {


					
               console.log(that.getdata)


               i = 1
            } else if (i == 1) {
               i = 0
               i = -1
            }
            i++
         });
         console.log(markers)
         // console.log(markers)
         this.nowPosition = center;
         return map; //抛出map
      },
      Submit(){
         this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success',
            center: true
         });
      Submit() {
         $('#loding').show();
         var time = setTimeout(() => {
            $('#loding').hide();
         }, 2000)

      },
      SubmitDown() {
         $('#SubmitDown').show();
      },
      SubmitSD() {
         console.log(this.chulijieguo, 'chulijieguo')
         console.log(this.wentifankui, 'wentifankui')
      },

      showPolyLine(xy) {
         var that = this;
         that.LxdhLine = L.polyline(xy, {
            color: 'red'
         }).addTo(that.map);

         // zoom the map to the polyline
         that.map.fitBounds(that.LxdhLine.getBounds())
      },
      //定位警情位置
      // titleClick() {
      //    this.map.setView(this.nowPosition, 20);
      // },
      //定位当前位置
      locationMap() {
         // console.log([this.lat, this.lng])
         // this.map.setView([this.lat, this.lng], 20);
         this.getLocationData();
      },
      // 获取实时位置
      getLocationData() {

         var that = this;
         var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
         var positionNum = 0;
         var options = {
            timeout: 1000
         };

         function showPosition(position) {
            var adCode = position.adCode; //邮政编码
            var nation = position.nation; //中国
            var city = position.city; //城市
            var addr = position.addr; //详细地址
            that.lat = position.lat; //
            that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
            that.haveShishiweizhi++; //控制只执行一次
            console.log(that.haveShishiweizhi)
            if (that.haveShishiweizhi == 2) {
               // console.log(position)
               if (that.LXdhStart == null) {
                  //点位
                  var position = [that.lat, that.lng];

                  //把map定位到点位上，13为地图的级别，也可以直接marker.getLatLng()
                  that.map.setView(position, 15);

               } else {
                  that.map.removeLayer(that.LXdhStart);
               }


               //绘制起点和终点
               that.LXdhStart = L.markerClusterGroup();

               var transportIcon = L.Icon.extend({ //图标初始化
                  options: {
                     iconSize: [50, 50], // 图标尺寸
                  }
               });

               var qd = new transportIcon({
                  iconUrl: './img/dingw.gif'
               });

               that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
                  icon: qd,
               }));

               that.map.addLayer(that.LXdhStart);
               that.getDHLine(+that.oldlng, +that.oldlat)
               // console.log(that.lat, that.lng);
               // console.log(+that.oldlat, +that.oldlng);

            };
         };

         function showErr() {
            //TODO 如果出错了调用此方法 
            // console.log(15)
         };

         geolocation.getLocation(showPosition, showErr, options);
         // console.log(geolocation);
      },
      getDHLine(x, y) {

@@ -180,17 +309,28 @@
               opt: "sf2"
            },
         }).then((res) => {
            var resdata = res.data.result.coords;
            var err = res.data.result.err;
            var data = [];
            // console.log(err)
            if (!err) {
            if (res.data.result.coords == undefined) {
               console.log('目标太远 或不存在路径')
            } else {

               var resdata = res.data.result.coords;
               console.log(resdata)
               var data = [];
               for (var i = 0; i < resdata.length; i++) {
                  var xy = [];
                  xy.push(resdata[i][1]);
                  xy.push(resdata[i][0]);
                  data.push(xy);
               }
               var w = resdata[0][0] - resdata[resdata.length - 1][0];
               w = Math.abs(w);
               w = w / 0.00000899;
               w = w.toFixed(2);
               console.log(w);
               $('#t-mi').empty();
               $('#t-mi').append(w + '米');
               $('#t-fz').empty();
               $('#t-fz').append(w / 30 + '分钟');

               if (that.LXdhEnd != null) {
                  that.map.removeLayer(that.LXdhEnd);
@@ -209,7 +349,7 @@
               });

               var zd = new transportIcon({
                  iconUrl: './img/zd.png'
                  iconUrl: './img/zd2.png'
               });
               // var qd = new transportIcon({
               //    iconUrl: './img/qd.png'
@@ -220,9 +360,9 @@
               var x = resdata[resdata.length - 1][0];
               var y = resdata[resdata.length - 1][1];

               that.LXdhEnd.addLayer(L.marker([y, x], {
                  icon: zd,
               }));
               // that.LXdhEnd.addLayer(L.marker([y, x], {//不要图标
               //    icon: zd,
               // }));
               // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
               //    icon: qd,
               // }));
@@ -230,142 +370,38 @@
               that.map.addLayer(that.LXdhEnd);

               that.showPolyLine(data);
            } else {
               console.log('请求位置出错');
            }
         });
      },
      showPolyLine(xy) {
         var that = this;
         that.LxdhLine = L.polyline(xy, {
            color: 'red'
            color: '#169BD5'
         }).addTo(that.map);

         // zoom the map to the polyline
         that.map.fitBounds(that.LxdhLine.getBounds())
      },
      //定位警情位置
      // titleClick() {
      //    this.map.setView(this.nowPosition, 20);
      // },
      //定位当前位置
      locationMap() {
         console.log([this.lat, this.lng])
         this.map.setView([this.lat, this.lng], 20);
      refreshMap() {
         console.log('shuaxin')

      },
      shipingClick(open) { //打开视频
         if (open) {
            this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata
               .deviceNumber, this.seedata.manufacturer);
         } else {
            this.shipingPopupShow = false;
         }
      },
      resultFeedbackClick() { //结果反馈跳转小程序
         uni.webView.navigateTo({
            url: `../poput/workbench/policeDetails/policeDetails?id=${this.seedata.id}`
         });
      },
      openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) { //获取视频地址
         var that = this;
         if (manufacturer == "HK") {
            axios
               .get(
                  `/api/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
               )
               .then((result) => {
                  that.videoSource = result.data.data.address;
                  that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                  that.shipingPopupShow = true;
               })
               .ce;
         } else {
            var newAxios = axios.create({
               baseURL: "https://web.byisf.com:18000",
               withCredentials: false,
               headers: {
                  "Content-type": "application/x-www-form-urlencoded",
               },
            });
            newAxios
               .post(
                  "/api_control", {}, {
                     params: {
                        param: JSON.stringify({
                           PktType: "GetAccessToken"
                        }),
                     },
                  }
               )
               .then((res) => {
                  newAxios
                     .get(
                        `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
                     )
                     .then((result) => {
                        that.videoSource = result.data.data.m3u8;
                        that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                        that.shipingPopupShow = true;
                     });
               });
         }
      },
      upData() {
         console.log('上传信息成功')
      },
      getLocationData() {
         var that = this;
         var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
         var positionNum = 0;
         var options = {
            timeout: 8000
         };

         function showPosition(position) {
            var adCode = position.adCode; //邮政编码
            var nation = position.nation; //中国
            var city = position.city; //城市
            var addr = position.addr; //详细地址
            that.lat = position.lat; //
            that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
            console.log(position, 1111)
            if (that.LXdhStart != null) {
               that.map.removeLayer(that.LXdhStart);
            }

            //绘制起点和终点
            that.LXdhStart = L.markerClusterGroup();

            var transportIcon = L.Icon.extend({ //图标初始化
               options: {
                  iconSize: [50, 50], // 图标尺寸
               }
            });

            var qd = new transportIcon({
               iconUrl: './img/dingw.gif'
            });

            that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
               icon: qd,
            }));

            that.map.addLayer(that.LXdhStart);

         };

         function showErr() {
            //TODO 如果出错了调用此方法 
         };

         geolocation.getLocation(showPosition, showErr, options);
      },

      // resultFeedbackClick() { //结果反馈跳转小程序
      //    uni.webView.navigateTo({
      //       url: `../poput/workbench/policeDetails/policeDetails?id=${this.seedata.id}`
      //    });
   },
   created() {},
   mounted() {
      this.getDataList();
      this.getLocationData();
      var time = setInterval(() => {
         if (this.haveShishiweizhi == 1) {
            this.getLocationData();
            console.log(this.haveShishiweizhi)

         } else if (this.haveShishiweizhi == 2) {
            clearInterval(time);
            time = null;
         }
      }, 3000)
   },
   wacth: {}
})