Merge branch 'master' of http://192.168.0.105:10010/r/qfqk-android

shuishen

2022-02-25 178be3f7a5c36338ee8f2587502fa9a9f059ea8c

 pages/grabOrders/map.vue

@@ -4,9 +4,17 @@
      <!-- <u-button type="info" @click="acc">测试</u-button> -->
      <!-- <web-view :src="urls" @message="message"></web-view> -->
      <map :scale='18' id="myMap" style="width: 100%" :style="{height: mapHeight + 'px'}" :markers="markersCom"
         :longitude="longitude" :latitude="latitude" :circles="circlesCom" :polyline="mypolylinesCom"
         show-location="true"></map>
      <view id="Umain">
         :longitude="longitude" :latitude="latitude" :circles="circlesCom" :polyline="mypolylines"
         show-location="true">
         <cover-view class="dingwBut" @click="mapControlsBack">
            <cover-image src="./map/img/dingwei.png" @click="mapControlsBack">
            </cover-image>
         </cover-view>

      </map>
      <view id="Umain" :style="{ height: activeHeight}" @touchstart="touchstart" @touchend="touchend"
         @touchmove="touchmove">
         <view :class="['activeTip',activeTip?'isOpens':'notOpens'] " :style="{height:'30px'}"></view>
         <view class="once-b">
            任务详情
         </view>
@@ -86,21 +94,22 @@
               {{ourData.num==ourData.jnum?"人数已满":'我参与'}}
            </u-button>
         </view>
         <u-popup v-model="showIn" mode="center" border-radius="14" z-index='1000001'>
            <view class="Info2">
               <view class="Info4">是否参加活动</view>
               <view class="Info3">
                  <u-button type="primary" @click="openAPP('oks')">参加</u-button>
                  <u-button type="error" @click="openAPP('nos')">取消</u-button>
               </view>
            </view>
         </u-popup>

      </view>
      <u-popup v-model="showIn" mode="bottom" border-radius="14" z-index='1000001' :mask-close-able="true">
         <view class="Info2">
            <view class="Info4">是否参加活动</view>
            <u-button class="Info5" type="primary" @click="openAPP('oks')">参加</u-button>
            <u-button class="Info5" type="error" @click="openAPP('nos')">取消</u-button>
            <!--<view  class="Info3">
            </view> -->
         </view>
      </u-popup>
   </view>
</template>

<script>
   import $moveWindow from "./map/js/move.js"
   import $moveUniAppMap from "./map/js/moveUniAppMap.js"
   export default {
      data() {
         return {
@@ -110,11 +119,26 @@
            rid: '',
            webV: null,
            wv: null,
            mapHeight: 0,
            latitude: 28.687205773173343,
            longitude: 115.8995839881188,
            circles: [], //圆
            markers: [], //标记点
            mypolylines: [],
            mypolylines: [{ //指定一系列坐标点，从数组第一项连线至最后一项
                  points: [],
                  color: "#FE0000", //线的颜色
                  width: 10, //线的宽度
                  dottedLine: false, //是否虚线
                  arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
               },
               { //指定一系列坐标点，从数组第一项连线至最后一项
                  points: [],
                  color: "#10a4ff", //线的颜色
                  width: 10, //线的宽度
                  dottedLine: false, //是否虚线
                  arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
               },
            ],
            useTime: null,
            useTimeSet: null,
            times: 3000,
@@ -129,9 +153,44 @@
            },
            bye: true,
            types: '', //android?
            moveDom: null, //移动实体类
            activeHeight: "auto ", //活动高度  默认自动
            afterClass: {},
            activeTip: false, //是否展开

            mapControls: [{
               id: "1",
               position: 20,
               iconPath: "/static/tabbar/addSelectedIcon.png",
               clickable: true,
            }], //地图控件
         }
      },
      methods: {
         mapControlsBack() {
            // console.log(1111)
            this.getLocationInfo("notSet");
            // this.bye = false;
            // this.timeBegin(1);
         },
         touchstart(e) {
            // console.log(e.changedTouches[0].clientY)
            if (this.moveDom) {
               this.moveDom.ListenerTouchstart(e)
            }
         },
         touchmove(e) {
            // console.log(e.changedTouches[0].clientY)
            if (this.moveDom) {
               this.moveDom.ListenerTouchmove(e)
            }
         },
         touchend(e) {
            // console.log(e.changedTouches[0].clientY)
            if (this.moveDom) {
               this.moveDom.ListenerTouchend(e)
            }
         },
         openAPP(type) {
            let that = this;
            if (type == "oks") {
@@ -260,7 +319,7 @@
                  //    }
                  // })
                  let d = {
                     rid:rid,
                     rid: rid,
                     serid: serid,
                     type: type,
                     // data: JSON.stringify(item),
@@ -280,6 +339,7 @@
               }
            } else {
               this.showIn = true;
               // this.openAPP('oks')
               // this.$confirm('是否参与活动：' + this.ourData.rname + "?", '提示', {
               //    confirmButtonText: '确定',
               //    cancelButtonText: '取消',
@@ -314,7 +374,8 @@
         //    }
         // },
         timeBegin(val) {
            console.log(this.bye)
            // console.log(this.bye)
            let that = this;
            if (this.bye) {
               console.log("再见")
               if (that.useTime) {
@@ -327,10 +388,17 @@
               }
               return
            }
            let that = this;
            if (this.useTime) {
               return
            } else {
               //加入自己的路线基础  索引1
               // this.mypolylines[1] = { //指定一系列坐标点，从数组第一项连线至最后一项
               //    points: [],
               //    color: "#10a4ff", //线的颜色
               //    width: 10, //线的宽度
               //    dottedLine: false, //是否虚线
               //    arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
               // }
               if (val == 1) {
                  that.getLocationInfo();
               }
@@ -361,8 +429,8 @@
               latitude: a,
            });
         },
         getLocationInfo() {
            var that = this
         getLocationInfo(val) {
            var that = this;
            uni.getLocation({
               type: 'wgs84',
               isHighAccuracy: true,
@@ -370,13 +438,8 @@
                  // console.log(res, "当前位置");
                  that.latitude = res.latitude
                  that.longitude = res.longitude
                  console.log(that.latitude)
                  console.log(that.longitude)
                  let d = {
                     id: that.ourData.id,
                     intlat: [res.longitude, res.latitude]
                  }
                  that.timeBeginSet(d) //30秒送数据
                  // console.log(that.latitude)
                  // console.log(that.longitude)
                  that.map.moveToLocation({
                     latitude: res.latitude,
                     longitude: res.longitude
@@ -398,6 +461,31 @@
                     radius: 10, //半径
                     strokeWidth: 2 //描边的宽度
                  }]
                  if (val != "notSet") {
                     let d = {
                        id: that.ourData.id,
                        intlat: [res.longitude, res.latitude]
                     }
                     that.timeBeginSet(d) //30秒送数据
                     //加入绘制路线
                     let useDataPosition = {
                        latitude: res.latitude,
                        longitude: res.longitude
                     }
                     let lat = useDataPosition.latitude + '';
                     let long = useDataPosition.longitude + '';
                     let oldLat = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
                        that.mypolylines[1].points.length -
                        1].latitude + '';
                     let oldLong = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
                        that.mypolylines[1].points.length -
                        1].longitude + '';
                     if (lat != oldLat && long != oldLong) { //判断如果两次位置不一样  那就添加
                        that.mypolylines[1].points.push(useDataPosition);
                     }
                     // console.log(lat != oldLat && long != oldLong, 222222222222);
                     // console.log(that.mypolylines[1].points.length)
                  }
               }
            });
         },
@@ -473,9 +561,10 @@
         markersCom() {
            return this.markers.slice(0);
         },
         mypolylinesCom() {
            return this.mypolylines.slice(0);
         },
         // mypolylinesCom() {
         //    // console.log(this.mypolylines,"333333333333333333333")
         //    return this.mypolylines.slice(0);
         // },
         socketValue() {
            return this.$store.state.socketValue;
         }
@@ -510,7 +599,55 @@
      onReady() {
         let that = this;

         this.types = uni.getSystemInfoSync().platform;
         this.types = uni.getSystemInfoSync();

         var animation = uni.createAnimation({
            duration: 1000,
            timingFunction: 'linear',
         })

         this.animation = animation;

         let activeHeight = 0;
         this.getDom("#Umain", (res) => {
            // console.log(res, 1111111111111111111111111111)
            that.mapHeight = that.types.windowHeight - res.height + 30;
            // that.mapHeight = 30;
            that.activeHeight = res.height;
            activeHeight = res.height;
            let minHeight = 4 * 40 + 30
            let d = {
               activeDom: "#Umain",
               adaptDom: "#myMap",
               uni: uni,
               maxHeight: activeHeight, //在外面获取活动区域的高度，
               //在构造中动态获取会实时改变这个值
               //导致改变固定的最高高度
               useHeight: minHeight, //缩小后的高度、、可设置成保留高度
               critical: (activeHeight - minHeight) / 3, //收缩程度，，可设置成总滑动距离的1/2 (maxHeight - useHeight) / 2
               fn: (res) => {
                  // console.log(res)
                  if (res.state != 'on') {
                     that.mapHeight = that.types.windowHeight - res.height + 30;
                  } else {
                     if (res.translate) {
                        that.activeTip = true;
                     }
                     if (res.translate) {
                        that.activeTip = false;
                     }
                  }

                  if (res.translate === true) {
                     that.activeTip = true;
                  } else if (res.translate === false) {
                     that.activeTip = false;
                  }
                  that.activeHeight = res.height + 'px';
               }
            }
            that.moveDom = new $moveUniAppMap(d);
         })
         // if (type == "android") {
         //    this.useHeight = "calc(100vh - 40px)";
         // }
@@ -557,7 +694,7 @@
            // data = JSON.stringify({
            datas = {
               appenUrl: "http://192.168.0.108:83/",
               butCT: "beginUp",
               butCT: "begin",
               buttype: 0,
               captain: "我",
               city: "南昌市",
@@ -605,12 +742,18 @@
            toStrings(d);
         }
         toStrings(datas);
         console.log(data)
         // console.log(data)
         if (data.team) {
            data["teams"] = data.team.split(",");
         }
         that.ourData = data;


         uni.getSystemInfo({ //初始化地图高度
            success(res) {
               that.mapHeight = res.windowHeight;
            }
         });
         // console.log(data);
         // return
         // console.log(options.html)
@@ -654,31 +797,31 @@
         // }
         that.query = uni.createSelectorQuery();
         const _this = this;
         uni.getSystemInfo({
            success: (res) => {
               // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2 
               // setTimeout(() => {
               // that.getDom('#Umain', data => {
               // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
               // console.log(res.screenHeight - data.height + res
               //    .statusBarHeight)
               // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
               that.mapHeight = res.screenHeight - res.statusBarHeight - 466
               that.mapHeight = that.mapHeight
               // })
               // }, 1000)
         // uni.getSystemInfo({
         //    success: (res) => {
         //       // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2 
         //       // setTimeout(() => {
         //       // that.getDom('#Umain', data => {
         //       // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
         //       // console.log(res.screenHeight - data.height + res
         //       //    .statusBarHeight)
         //       // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
         //       that.mapHeight = res.screenHeight - res.statusBarHeight - 466
         //       that.mapHeight = that.mapHeight
         //       // })
         //       // }, 1000)

               // that.query.select('#Umain').boundingClientRect(data => {
               //    console.log('11111111')
               //    console.log(data)
               // }).exec();
               // console.log(res)
               // let info = uni.createSelectorQuery().select("Umain");
               // info.boundingClientRect(function(data) { //data - 各种参数
               //    console.log(data.width) // 获取元素宽度
               // }).exec()
            }
         })
         //       // that.query.select('#Umain').boundingClientRect(data => {
         //       //    console.log('11111111')
         //       //    console.log(data)
         //       // }).exec();
         //       // console.log(res)
         //       // let info = uni.createSelectorQuery().select("Umain");
         //       // info.boundingClientRect(function(data) { //data - 各种参数
         //       //    console.log(data.width) // 获取元素宽度
         //       // }).exec()
         //    }
         // })
         // console.log(document.getElementById("Umain"))
         // this.checkDomHeightId({
         //    domName: "getElementById",
@@ -759,10 +902,10 @@


         //画线
         console.log(data)
         // console.log(data)
         let line = data.line.split("(")[1].split(")")[0].split(",");
         console.log(line[0].split(" ")[1])
         console.log(line[0].split(" ")[0])
         // console.log(line[0].split(" ")[1])
         // console.log(line[0].split(" ")[0])
         this.latitude = line[0].split(" ")[1];
         this.longitude = line[0].split(" ")[0];
         this.map.moveToLocation({
@@ -780,14 +923,15 @@
            })
         }
         // setTimeout(() => {
         this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
            points: ourline,
            color: "#FE0000", //线的颜色
            width: 10, //线的宽度
            dottedLine: false, //是否虚线
            arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
         }
         console.log(this.mypolylines)
         // this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
         //    points: ourline,
         //    color: "#FE0000", //线的颜色
         //    width: 10, //线的宽度
         //    dottedLine: false, //是否虚线
         //    arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
         // }
         that.mypolylines[0].points = ourline;
         // console.log(this.mypolylines)
         // }, 1000)
         this.showWindow();
         // this.getLocationInfo(data);
@@ -804,18 +948,18 @@

<style lang="scss">
   .content {
      flex: 1;
      height: 100%;
      // flex: 1;
      // height: 100%;
      overflow: hidden;
      // position: relative;
   }

   #Umain {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      bottom: 0;
      background-color: #e8e8e8;
      z-index: 1000000;
      left: 0;
      width: 100%;
      overflow: hidden;
   }

   .once {
@@ -911,8 +1055,8 @@


   .Info2 {
      width: 200px;
      height: 100px;
      width: 100%;
      // height: 100px;
      padding: 0 10px;

      .Info3 {
@@ -930,5 +1074,99 @@
         text-align: center;
         height: 50px;
      }

      .Info5 {
         margin-bottom: 10px !important;
         width: 70%;
      }
   }

   .notOpens {
      &::after {
         content: "";
         display: block;
         width: 20px;
         height: 4px;
         background-color: rgba(202, 202, 202, 1);
         position: absolute;
         top: 10px;
         left: calc(50% - 10px);
         border-radius: 5px;
         transition: all 0.1s;
      }
   }

   .activeTip {
      background-color: #fff;
   }

   .isOpens {
      &::after {
         content: "";
         display: block;
         width: 13px;
         height: 4px;
         background-color: rgba(202, 202, 202, 1);
         position: absolute;
         top: 10px;
         left: calc(50% - 12px);
         border-radius: 5px;
         transform: rotate(30deg);
         transition: all 0.1s;
      }

      &::before {
         content: "";
         display: block;
         width: 13px;
         height: 4px;
         background-color: rgba(202, 202, 202, 1);
         position: absolute;
         top: 10px;
         left: calc(50% - 4px);
         border-radius: 5px;
         transform: rotate(-30deg);
         transition: all 0.1s;
      }
   }

   .dingwBut {
      width: 80upx;
      height: 80upx;
      background-color: #fff;
      border-radius: 20upx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 40upx;
      right: 40upx;

      // background-color: red;
      // .dingwButImg {
      //    width: 80%;
      //    height: 80%;
      // }
      // .icon{
      // }
      // &::after{
      //    content: url(map/img/dingwei.png);
      // }
      // .dingwButImg {
      //    animation: mymove 5s infinite;
      //    animation-timing-function: linear;
      // }
   }



   @keyframes mymove {
      0% {
         transform: rotate(0deg);
      }

      100% {
         transform: rotate(1turn);
      }
   }
</style>