zengh
2022-09-14 8ea19a6bb34daab1410f6186992a4c1e90299c92
leafletMapOur/grabOrdersMap/js/vueMain.js
@@ -32,35 +32,153 @@
      oldlat: '',
      oldlng: '',
      haveJDWD: true,
      data: {}
      // {
      //    type: 0,
      //    city: "南昌市",
      //    content: "按路线巡逻",
      //    district: "青山湖区",
      //    id: 5,
      //    integral: "14",
      //    jnum: 2,
      //    line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
      //    num: 0,
      //    province: "江西省",
      //    raddress: null,
      //    rname: "巡逻任务",
      //    rtype: "0",
      //    serid: null,
      //    time: "2021-11-17 00:00:00",
      //    url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
      // }
      data: {},
      mapPositionLoding: false, //定位loding
      oncePosition: null, //一次定位实例
      onPosition: false, //持续定位指示
      setPositionTime: null, //发送定位节流
      setPositionUseTime: 30000, //节流时间
   },
   methods: {
      // unis(data) {
      //    //向uniapp传值
      //    uni.postMessage({
      //       data: {
      //          action: data
      //       }
      //    });
      // },
      // setUniAppMsg(state, data) {
      //    let that = this;
      //    if (window.parent) {
      //       console.log("有window.parent")
      //       if (state == "hBackMsg") {
      //          window.parent.hBackMsg(data);
      //       }
      //       if (state == "setIntLat") {
      //          window.parent.setIntLat({
      //             rid: that.data.id,
      //             fn: (out) => {
      //                // console.log(out,"1111");
      //                // that.addIcon(out);
      //                that.addIcon([out[1], out[0]]);
      //             }
      //          });
      //       }
      //       if (state == "showTip") {
      //          that.parent.showTip("获取定位失败");
      //       }
      //    } else {
      //       console.log("没window.parent")
      //       if (state == "hBackMsg") {
      //          // window.parent.hBackMsg(data);
      //          that.unis("hBackMsg")
      //       }
      //       if (state == "setIntLat") {
      //          // window.parent.setIntLat({
      //          //    rid: that.data.id,
      //          //    fn: (out) => {
      //          //       // console.log(out,"1111");
      //          //       // that.addIcon(out);
      //          //       that.addIcon([out[1], out[0]]);
      //          //    }
      //          // });
      //          that.unis("setIntLat")
      //       }
      //       if (state == "showTip") {
      //          // that.parent.showTip("获取定位失败");
      //          that.unis("showTip")
      //       }
      //    }
      // },
      openAPP(type) {
         // console.log(type)
         let that = this;
         if (type != 1) {
            //反馈
            uni.navigateTo({
               url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
            });
            if (that.data.butCT == "beginUp") {
               // 反馈
               if (that.onPosition) {
                  that.onPosition.overContinued();
               }
               uni.redirectTo({
                  url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data) +
                     '&other="11111"'
               });
            } else if (that.data.butCT == "begin") {
               // 开始任务
               // that.setUniAppMsg("hBackMsg", {
               //    type: "start",
               //    data: {
               //       id: that.data.id,
               //       serid: that.data.serid
               //    },
               //    fn: function(val) {
               //       if (val == "success") {
               //          // console.log("成功开启任务")
               //          that.data.butCT = "beginUp";
               //          that.data.rtype = '0';
               //          that.data.type = "0";
               //       }
               //    }
               // })
               let rid = that.data.id,
                  serid = that.data.serid,
                  type = 'start',
                  url = that.data.appenUrl + "taskqd/startTask?" +
                  `rid=${rid}&serid=${serid}&type=${type}`;
               axios.get(url).then((res) => {
                  // console.log(res);
                  that.onPosition = new $getPositions({
                     id: rid,
                     fn: function(res) {
                        // console.log(res);
                        // state.isOnTaskValue[id] = {
                        //    id: id,
                        //    intlat: res.intlat
                        // }
                        // state.changes = !state.changes;
                        // console.log(state.isOnTaskValue)
                        // $store.commit("setMsg", {
                        //    id: id,
                        //    intlat: res.intlat
                        // })
                        let out = res.intlat;
                        if (typeof out != "string") {
                           that.addIcon([out[1], out[0]]);
                           //坐标输出
                           let d = {
                              uid: that.data.myid,
                              rid: rid,
                              jd: out[0],
                              wd: out[1],
                           }
                           if (that.setPositionTime) {
                              return;
                           } else {
                              that.setPositionTime = setTimeout(() => {
                                 axios.post(that.data.appenUrl +
                                       "trar/submit", d)
                                    .then(res => {
                                       // console.log('res=>', res);
                                    })
                                 clearTimeout(that.setPositionTime);
                                 that.setPositionTime = null;
                              }, that.setPositionUseTime)
                           }
                        } else {
                           console.log("获取定位失败")
                        }
                     }
                  })
                  that.onPosition.continuedTime();
                  that.data.butCT = "beginUp";
                  that.data.rtype = '0';
                  that.data.type = "0";
               })
            }
         } else {
            this.$confirm('是否参与活动:' + this.data.rname + "?", '提示', {
               confirmButtonText: '确定',
@@ -69,50 +187,30 @@
               center: true,
               customClass: "customClass"
            }).then(() => {
               let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
               let url = that.data.appenUrl + "taskqd/Graborder",
                  dataAppend = that.data;
               axios.post(url, dataAppend).then(res => {
                  // console.log(res);
                  if (res.data.msg == "抢单成功") {
                     that.data.type = 0;
                     that.$message({
                        message: res.data.msg,
                        type: 'success'
                     });
                     return;
                  }
                  that.$message({
                     message: res.data.msg,
                     type: 'warning'
                  });
               })
               console.log(url, dataAppend)
               // axios.post(url, dataAppend).then(res => {
               //    // console.log(res);
               //    if (res.data.msg == "抢单成功") {
               //       that.data.type = 0;
               //       that.$message({
               //          message: res.data.msg,
               //          type: 'success'
               //       });
               //       return;
               //    }
               //    that.$message({
               //       message: res.data.msg,
               //       type: 'warning'
               //    });
               // })
            }).catch(() => {
               // this.$message({
               //    type: 'info',
               //    message: '已取消删除'
               // });
            });
            // return;
            //抢单
            // console.log(this.data)
            // let up = this.data.appenUrl == '/api' ? "http://192.168.0.107:85" : this.data.appenUrl;
            // let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
            //    dataAppend = this.data;
            // axios.post(url, dataAppend).then(res => {
            //    console.log(res);
            //    if (res.data.msg == "抢单成功") {
            //       this.data.type = 0;
            //       this.$message({
            //          message: res.data.msg,
            //          type: 'success'
            //       });
            //       return;
            //    }
            //    this.$message({
            //       message: res.data.msg,
            //       type: 'warning'
            //    });
            // })
         }
      },
      getDataList() {
@@ -121,43 +219,101 @@
      },
      beginCome() {
         var data = {
            city: "无数据",
            content: "无数据",
            district: "无数据",
            id: 5,
            integral: "14",
            jnum: 2,
            line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
            num: 2,
            province: "无数据",
            raddress: "",
            rname: "无数据",
            rtype: "0",
            serid: "1123598821738675201,",
            time: "无数据",
            url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
            buttype: "0",
            type:'1'
         }
               appenUrl: "http://192.168.0.108:83/",
               butCT: "begin",
               buttype: 0,
               captain: "我",
               city: "南昌市",
               content: "测试",
               district: "西湖区",
               id: 37,
               integral: "222",
               iscation: "1",
               jnum: 3,
               line: "LINESTRING(115.8995839881188 28.687205773173343,115.89391916267935 28.678966027079593,115.90404718391959 28.673644524394046,115.91211526863638 28.681369286356936)",
               num: 1,
               nums: 0,
               province: "江西省",
               publisher: "管理",
               raddress: null,
               rname: "测试1",
               rtype: "0",
               serid: "1123598821738675201,",
               team: "你,他,它",
               time: "2022-02-18 14:15:52",
               type: "0",
               url: "http://61.131.136.25:2081/zhba/upload/20220218/67f0c8bf3e7b5024c64133691f265072.ico",
               fname:"管理员"
            },
            that = this;
         //url解码
         this.data = this.getQueryVariable('data') || data;
         // this.getdata = data;
         // this.changeDom(this.getdata[0]);//改变地图高度
         // console.log(this.getdata[0]);
         // console.log(this.data)
         if (typeof this.data == "string") {
            this.data = JSON.parse(this.data)
         }
         console.log(this.data)
         if (this.data.isOn || this.data.butCT == "beginUp") {
            //队长开启任务
            let rid = that.data.id;
            that.onPosition = new $getPositions({
               id: rid,
               fn: function(res) {
                  // console.log(res);
                  // state.isOnTaskValue[id] = {
                  //    id: id,
                  //    intlat: res.intlat
                  // }
                  // state.changes = !state.changes;
                  // console.log(state.isOnTaskValue)
                  // $store.commit("setMsg", {
                  //    id: id,
                  //    intlat: res.intlat
                  // })
                  let out = res.intlat;
                  if (typeof out != "string") {
                     that.addIcon([out[1], out[0]]);
                     console.log(out)
                     //坐标输出
                     let d = {
                        uid: that.data.myid,
                        rid: rid,
                        jd: out[0],
                        wd: out[1],
                     }
                     // console.log(d)
                     if (that.setPositionTime) {
                        return;
                     } else {
                        that.setPositionTime = setTimeout(() => {
                           axios.post(that.data.appenUrl + "trar/submit", d)
                              .then(res => {
                                 // console.log('res=>', res);
                              })
                           clearTimeout(that.setPositionTime);
                           that.setPositionTime = null;
                        }, that.setPositionUseTime)
                     }
                  } else {
                     console.log("获取定位失败")
                  }
               }
            })
            that.onPosition.continuedTime();
            that.data.butCT = "beginUp";
            that.data.rtype = '0';
            that.data.type = "0";
         }
         if (typeof this.data.team === "string") {
            this.data.team = this.data.team.split(',');
         }
         let lines = this.data.line
         let position = lines.slice(lines.indexOf("(") + 1, lines.indexOf(",")).split(" ");
         // console.log(position)
         // return
         this.map = this.beginMap(this.map, position); //创建并接受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;
         // this.oldlat = this.getdata[0].wd;
         // this.oldlng = this.getdata[0].jd;
         console.log("完成数据")
      },
      changeDom(data) {
         // console.log(data, 'changeDom');
@@ -204,7 +360,7 @@
         // desc = "+proj=longlat +datum=WGS84 +no_defs ",
         // crs = new L.CRS("EPSG:4326", desc, {});
         // center = [data[0].wd, data[0].jd],
         // url = `http://223.82.109.183:2082/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
         // url = `http://106.225.193.35:83/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
         // url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
         // this.nowPosition = center;
         // axios.post(url).then((res) => {
@@ -360,8 +516,61 @@
      // },
      //定位当前位置
      locationMap() {
         // console.log([this.lat, this.lng])
         this.map.setView([this.lat, this.lng], 20);
         let that = this;
         if (!this.oncePosition) {
            this.oncePosition = new $getPositions({
               id: 1,
               fn: function(res) {
                  // console.log(res);
                  that.mapPositionLoding = res.state;
                  if (!res.state) {
                     console.log(res)
                     if (typeof res.intlat === "string") {
                        // that.parent.showTip("获取定位失败")
                     } else {
                        that.addIcon([res.intlat[1], res.intlat[0]]);
                     }
                  }
               }
            }).init();
            this.oncePosition.once();
         } else {
            this.oncePosition.once();
         }
         // if (!this.onPosition) {
         //    this.oncePosition.continuedTime();
         //    this.onPosition = !this.onPosition;
         // } else {
         //    this.oncePosition.overContinued();
         //    this.onPosition = !this.onPosition;
         // }
      },
      //添加图标
      addIcon(intlat) {
         var markers = L.markerClusterGroup(),
            marker;
         var transportIcon = L.Icon.extend({ //图标初始化
            options: {
               iconSize: [30, 30], // 图标尺寸
            }
         });
         var carIcon = new transportIcon({ //引入图标
            iconUrl: './img/dinw/dinw1.png'
         });
         var setData = (a) => { //定义图标
            marker = L.marker(a, {
               icon: carIcon,
               myData: { //自定义数据
                  ...a
               }
            });
         }
         setData(intlat)
         markers.addLayer(marker);
         this.map.addLayer(markers);
         this.map.setView(intlat, this.map._zoom);
      },
      toJQposition() {
         this.map.setView([this.oldlat, this.oldlng], 20);
@@ -384,6 +593,7 @@
            that.lat = position.lat; //
            that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
            that.haveShishiweizhi++; //控制只执行一次
            console.log(position)
            // console.log(that.haveShishiweizhi)
            if (that.haveShishiweizhi == 2) {
               // console.log(position)
@@ -534,38 +744,126 @@
         for (let k in line) {
            line[k] = line[k].split(" ").reverse();
         }
         // console.log(line)
         // var latlngs = [
         //    ['28.67705200351289', '115.88518439579809'],
         //    ['28.68755200354289', '115.88518439574809'],
         //    ['28.68755200354289', '115.85518439574809'],
         // ]
         // var polygon = L.polygon(latlngs, {
         //    color: '#000eff',
         //    fillColor: '#0000ed',
         //    weight: 2
         // });
         var polyline = L.polyline(line, {
            color: '#FC5E20'
         })
         // let point = L.circle([28.67705200351289,115.88518439579809],{color:'#FF0000',fillColor:'#FF0000',radius:1000000,fillOpacity:1});
         map.addLayer(polyline)
      },
      checkDomHeight(data) {
         //  声明定时器
         var timer = null;
         //  检查dom是否执行完成
         function checkDom() {
            let useData;
            if (data.domName == 'not') {
               useData = this[data.name];
            } else {
               let dom = document[data.domName](data.name);
               useData = dom;
            }
            if (useData) {
               //  执行dom加载完成后的操作
               //  清除定时器
               if (!timer) {
                  clearTimeout(timer);
               }
               if (data.fn) {
                  //回调函数
                  data.fn(useData);
                  return;
               } else {
                  return dom;
               }
            } else {
               //  自我调用
               timer = setTimeout(checkDom, 200);
            }
         }
         //  首次执行
         checkDom();
      }
   },
   created() {},
   mounted() {
      let that = this;
      this.getDataList();
      // var time = setInterval(() => {
      //    if (this.haveShishiweizhi == 1) {
      //       this.getLocationData();
      //       // console.log(this.haveShishiweizhi)
      //map适应任务详情高度
      // console.log(document.getElementById("map"))
      //因为按钮使用v-if所以在识别高度时候,but还没渲染所以手动添加 56px 不会变
      console.log("应用数据")
      let UmainHeight = document.getElementById("Umain").clientHeight;
      if (this.data.iscation == "1") {
         UmainHeight += 56;
      }
      let h = document.getElementById("mapVue").clientHeight;
      this.checkDomHeight({
         domName: "getElementById",
         name: "map",
         fn: function(dom) {
            dom.style.height = h - UmainHeight + "px";
            document.getElementsByClassName("dingwei")[0].style.bottom =
               UmainHeight + 10 + "px";
            that.map.invalidateSize(true);
         }
      })
      //开启滑动
      //计算最小单位
      let rows = document.getElementsByClassName("once"),
         rowsHeight = 45;
      for (let ri = 0; ri < 3; ri++) {
         rowsHeight += rows[ri].clientHeight;
      }
      this.domMove = new $moveWindow({
         id: "Umain",
         minHeight: rowsHeight,
         maxHeight: UmainHeight,
         critical: (UmainHeight - rowsHeight) / 4,
         openAnimation: false,
         fn: function(res) {
            // console.log(that.map.options)
      //    } else if (this.haveShishiweizhi == 2) {
      //       clearInterval(time);
      //       time = null;
            document.getElementById("map").style.height = h - res.height + "px";
            // that.map.setView([that.map.options.center[0], +that.map.options.center[1] + 0.002], that.map
            //    .options.zoom);
            // console.log(h - res.height)
            if (res.state === true || res.state === false) {
               that.map.invalidateSize(true);
            }
            document.getElementsByClassName("dingwei")[0].style.bottom = res.height +
               10 + "px";
         },
      });
      this.domMove.init();
      // console.log(window.parent.setIntLat)
      // that.setUniAppMsg("setIntLat")
      // window.parent.setIntLat({
      //    rid: this.data.id,
      //    fn: (out) => {
      //       // console.log(out,"1111");
      //       // that.addIcon(out);
      //       that.addIcon([out[1], out[0]]);
      //    }
      // }, 1000)
      // })
      // window.addEventListener('message', e => {
      //    console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
      //    app.dataList = JSON.parse(e.data.data).navigation
      //    console.log(app.dataList, '+++++++++');
      // }, false)
      // // HTML 接受APP发送过来的消息 (APP端)
      // function requestData(data) {
      //    console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)');
      //    app.dataList = data.navigation // 赋值
      // }
   },
   wacth: {}
   wacth: {},
   beforeDestroy() {
      let that = this;
      if (that.onPosition) {
         that.onPosition.overContinued();
         console.log("关闭地图")
      }
   }
})