hitap-chat/pages/map/index.vue

<template>
  <view class="map" :style="getHeight()">
    <!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> -->
    <!-- 轮播图 -->
    <map
      id="maps"
      style="width: 100%; height: 100%"
      :latitude="latitude"
      :longitude="longitude"
      :markers="covers"
      :polyline="polyline"
      @mousedown="onMapTap"
    >
    </map>
    <cover-view class="location" @click="getLocationInfo" :style="getTop()">
      <cover-image src="../../static/map/3746.png" alt="" srcset="" />
    </cover-view>
    <view class="dialog dialog-one" v-if="pageType == 1">
      <view class="status" v-if="pageType1Result.deadlineType == 1">超期</view>
      <view class="status" v-if="pageType1Result.deadlineType == 2">延期</view>
      <!-- <view class="status" v-if="pageType1Result.deadlineType == 3">正常</view> -->
      <view class="top">
        <image src="/static/logo.png" mode="" style="width: 120px;height: 90px;" class="mimg"></image>
        <view class="font">
          <view class="tit">{{ pageType1Result.name }}</view>
          <view class="desc">
            <view style="margin-right: 12px">排查</view>
            <view>{{ pageType1Result.deadlineStatus }}</view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view @click="handleCheck(1)" class="btn btn1"> 智能排查 </view>
        <view @click="handleCheck(2)" class="btn btn2"> 人工排查 </view>
      </view>
    </view>
    <view class="dialog dialog-two" v-if="pageType == 2">
      <view class="two-f1">根据当前定位信息，您要排查的是这条路吗？</view>
      <view class="two-f2">{{ rname }}</view>
      <view class="btn-box">
        <view @click="onJump(3)" class="btn btn3"> 更换 </view>
        <view @click="handleCheck(1)" class="btn btn4"> 智能排查 </view>
        <view @click="handleCheck(2)" class="btn btn5"> 人工排查 </view>
      </view>
    </view>
    <view class="dialog dialog-three" v-if="pageType == 3">
      <view class="search">
        <view class="searchL">
          <image src="/static/map/search.png" alt="" />
          <input
            v-model="search"
            class="sinput"
            placeholder-style="color: #BFBFBF;"
            placeholder="搜索路段或路口"
            type="text"
            confirm-type="search"
            @confirm="confirm"
          />
        </view>
        <view @click="onJump(4)" class="addbtn"> 新增 </view>
      </view>
      <scroll-view :scroll-top="0" scroll-y="true" class="list-box">
        <view
          class="list-item"
          v-for="(item, index) in data"
          :key="index"
          @click="onList(item, index)"
          :style="idx == index ? 'background: #E5EFFF' : ''"
        >
          <image src="/static/map/d2.png" alt="" v-if="idx == index" />
          <image src="/static/map/d1.png" alt="" v-else />
          <view class="tit">
            {{ item.name }}
          </view>
          <view class="jl">{{ item.distance }}m内</view>
        </view>
        <view></view>
      </scroll-view>
    </view>
    <view class="dialog dialog-four" v-if="pageType == 4">
      <view class="form-item">
        <view class="form-label">对象</view>
        <view class="form-sw">
          <view
            :style="ftype == 1 ? 'background: #2663bf; color: #fff;' : ''"
            @click="ftype = '1'"
            >路段</view
          >
          <view
            :style="ftype == 2 ? 'background: #2663bf; color: #fff;' : ''"
            @click="ftype = '2'"
            >路口</view
          >
        </view>
      </view>
      <view class="form-item">
        <view class="form-label">道路名称</view>
        <view class="form-tent">
          <input
            class="linput"
            v-model="name1"
            placeholder-style="color: #BFBFBF;"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="form-item" v-if="ftype==1">
        <view class="form-label">起始路口</view>
        <view class="form-tent">
          <input
            class="linput"
            v-model="name2"
            placeholder-style="color: #BFBFBF;"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="form-item" v-if="ftype==1">
        <view class="form-label">终止路口</view>
        <view class="form-tent">
          <input
            class="linput"
            v-model="name3"
            placeholder-style="color: #BFBFBF;"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="form-item" v-if="ftype==2">
        <view class="form-label">路口名称</view>
        <view class="form-tent">
          <input
            class="linput"
            v-model="name4"
            placeholder-style="color: #BFBFBF;"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="btn-box" :style="ftype == 1 ? 'margin-top: 18px' : 'margin-top: 80px'">
        <view @click="onJump(3)" class="btn btn6"> 取消 </view>
        <view @click="handleSubmit" class="btn btn7"> 确定 </view>
      </view>
    </view>
   <u-modal :show="show" content="新增成功" confirm-text="人工排查" cancel-text="智能排查" :showConfirmButton='true'
   	:showCancelButton='true' @confirm="handleCheck(2)" @cancel="handleCheck(1)"
   	:closeOnClickOverlay="false"></u-modal>
  </view>
</template>
<script>
import TopTitle from "../../components/top-title.vue";
import {wgs84LL2gcjLL2} from './c.js';
export default {
  components: { TopTitle },
  data() {
    return {
      pageHeight: 300,
      latitude: 39.909,
      longitude: 116.39742,
      covers: [],
      title: "下拉刷新 + 加载更多",
      data: [],
      idx: -1,
      loadMoreText: "加载中...",
      showLoadMore: false,
      max: 0,
      polyline: [],
      pageType: 1,
      ftype: '1',
      faddress: "",
      fcoordinate: "",
      businessId: "",
      pageType1Result: null,
      rname: "",
      search: "",
      name1: "",
      name2: "",
      name3: "",
      name4: "",
      show: false,
    };
  },
  onLoad(options) {
    console.log(options);
    // this.businessId = "RX202310210238";
    this.businessId = options.businessId;
    this.pageHeight = uni.getSystemInfoSync().windowHeight;

    this.pageType = 1;
    this.initData();
  },

  onReady() {
    // wx请求获取位置权限
    this.getAuthorize()
      .then(() => {
        //   同意后获取
        // this.getLocationInfo();
      })
      .catch(() => {
        //   不同意给出弹框，再次确认
        // this.getLocationInfo();
      });
  },

  onUnload() {
    // this.max = 0,
    // 	this.data = [],
    // 	this.loadMoreText = "加载更多",
    // 	this.showLoadMore = false;
  },
  onReachBottom() {
    // console.log("onReachBottom");
    // if (this.max > 40) {
    // 	this.loadMoreText = "没有更多数据了!"
    // 	return;
    // }
    // this.showLoadMore = true;
    // setTimeout(() => {
    // 	this.setListData();
    // }, 300);
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
  },
  mounted() {
    let that = this;
    var maps = uni.createMapContext("maps", this).$getAppMap();
    maps.onclick = function (point) {
      console.log(point, "point");
      if (that.pageType == 4) {
        that.longitude = point.longitude;
        that.latitude = point.latitude;
        that.covers = [
          {
            id: "markers1",
            latitude: that.latitude,
            longitude: that.longitude,
            iconPath: "/static/icon/fill_position.svg",
            width: 24, //宽
            height: 28, //高
          },
        ];
      }

      // that.covers = [];
      // that.covers = [{
      // 	id: 2, //点击时候是第二次作为标记点定义。id为2，不能重复
      // 	latitude: point.latitude,
      // 	longitude: point.longitude,
      // 	iconPath: img,
      // 	fontSize: 80,
      // 	title: "所选位置"
      // }]
      // let pages = getCurrentPages()
      // let prevPage = pages[pages.length - 2]
      // let currentLocat = that.longitude + ',' + that.latitude
      // prevPage.$vm.getMapValue(currentLocat)
      // setTimeout(res=>{
      // 	uni.navigateBack({
      // 		delta: 1 // 返回的页面数
      // 	})
      // },1000)
    };
  },
  methods: {
    initData() {
      this.$request
        .globalRequest(
          "/hiddenDanger/highDanger/getDangerRoad",
          { businessId: this.businessId },
          "GET"
        )
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            if (res.result) {
              this.pageType1Result = res.result;
              this.longitude = res.result.coordinateList[0].longitude; //118.787575;
              this.latitude = res.result.coordinateList[0].latitude; //32.05024;
              this.covers = [
                {
                  id: "markers1",
                  latitude: this.latitude,
                  longitude: this.longitude,
                  iconPath: "/static/icon/fill_position.svg",
                  width: 24, //宽
                  height: 28, //高
                },
              ];
              this.polyline = [
                {
                  name: "xian1",
                  arrowLine: true,
                  color: "#CC2936",
                  width: 8,
                  id: 1,
                  points: res.result.coordinateList,
                },
              ];
            } else {
              this.pageType = 2;
              this.getLocationInfo();
            }
          } else {
            this.$.toast(res.message);
          }
        });
    },
    initDat2() {
      this.$request
        .globalRequest(
          "/hiddenDanger/highDanger/getNearRoadInfo",
          {
            x: this.longitude,
            y: this.latitude,
          },
          "POST"
        )
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.data = res.result;
            this.rname = this.data[0].name;
            this.polyline = [
              {
                name: "xian1",
                arrowLine: true,
                color: "#CC2936",
                width: 8,
                id: 1,
                points: this.data[0].position,
              },
            ];
          } else {
            this.$.toast(res.message);
          }
        });
    },
    // 返回
    backPage() {
      uni.navigateBack({
        delta: 1, // 默认值是1，表示返回的页面层数
      });
    },
    setListData() {
      // let data = [];
      // this.max += 10;
      // for (var i = this.max - 9; i < this.max + 1; i++) {
      // 	data.push(i)
      // }
      // this.data = this.data.concat(data);
    },
    handleCheck(v) {
	 this.show = false
      let url = v == 1 ? "/pages/index/detail" : "/pages/investigation/task";
      this.$.open(url + "?id=" + this.businessId);
      // this.$.open(url + "?id=" + 'RX202310210236');
    },
    handleSubmit() {
      let address = ''
      if(this.ftype == 1) {
        address = `${this.name1}（${this.name2}-${this.name3}）`;
      } else {
        address = `${this.name1}（${this.name4}）`;
      }
      
      this.$request
        .globalRequest(
          "/hiddenDanger/highDanger/saveSectionOrCrossing",
          {
            businessId: this.businessId,
            address,
            coordinate: this.longitude + "," + this.latitude,
            addType: this.ftype,
          },
          "POST"
        )
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.show = true;
            // this.data = res.result;
            // console.log(this.data[0][Object.keys(this.data[0])])
            // this.rname = Object.keys(this.data[0])[0]
            // this.polyline = [
            //   {
            //     name: "xian1",
            //     arrowLine: true,
            //     color: "#CC2936",
            //     width: 8,
            //     id: 1,
            //     points: this.data[0][Object.keys(this.data[0])].position,
            //   },
            // ];
          } else {
            this.$.toast(res.message);
          }
        });
    },
    onList(e, i) {
      this.pageType = 2;
      this.idx = i;
      if (e && e.name && e.position) {
        this.rname = e.name;
        this.polyline = [
          {
            name: "xian1",
            arrowLine: true,
            color: "#CC2936",
            width: 8,
            id: 1,
            points: e.position,
          },
        ];
      }
    },
    //   初次位置授权

    getAuthorize() {
      return new Promise((resolve, reject) => {
        uni.authorize({
          scope: "scope.userLocation",
          success: () => {
            resolve(); // 允许授权
          },
          fail: () => {
            reject(); // 拒绝授权
          },
        });
      });
    },
    // 确认授权后，获取用户位置
    getLocationInfo() {
		console.log('getLocationInfo')
      uni.getLocation({
        type: "wgs84",
        success: (res) => {
          console.log(res);
          const coord = wgs84LL2gcjLL2(res.longitude, res.latitude)
          console.log(coord)
          this.longitude = coord[0]; //118.787575;
          this.latitude = coord[1]; //32.05024;
          //   this.longitude = 120.38771;
          //   this.latitude = 36.110146;
          this.covers = [
            {
              id: "markers1",
              latitude: this.latitude,
              longitude: this.longitude,
              iconPath: "/static/icon/fill_position.svg",
              width: 24, //宽
              height: 28, //高
            },
          ];
          this.initDat2();
        },
      });
    },
    // 彻底拒绝位置获取
    rejectGetLocation() {
      uni.showToast({
        title: "你拒绝了授权，无法获得周边信息",
        icon: "none",
        duration: 2000,
      });
    },
    confirm() {
      this.getList();
    },
    getList() {
      const data = {
        x: this.longitude,
        y: this.latitude,
        search: this.search,
      };
      if (!this.search) delete data.search;
      this.$request
        .globalRequest("/hiddenDanger/highDanger/getNearRoadInfo", data, "POST")
        .then((res) => {
          console.log(res);
          this.data = res.result;
        });
    },
    onJump(v) {
      this.pageType = v;
    },
    getTop() {
      if (this.pageType == 1) {
        return `top: calc(${this.pageHeight}px - 280px)`;
      }
      if (this.pageType == 2) {
        return `top: calc(${this.pageHeight}px - 280px)`;
      }
      if (this.pageType == 3) {
        return `top: calc(${this.pageHeight}px - 410px)`;
      }
      if (this.pageType == 4) {
        return `top: calc(${this.pageHeight}px - 440px)`;
      }
    },
    getHeight() {
      if (this.pageType == 1) {
        return `height: ${this.pageHeight - 230}px`;
      }
      if (this.pageType == 2) {
        return `height: ${this.pageHeight - 210}px`;
      }
      if (this.pageType == 3) {
        return `height: ${this.pageHeight - 350}px`;
      }
      if (this.pageType == 4) {
        return `height: ${this.pageHeight - 388}px`;
      }
    },
    onMapTap(r) {
      if (this.pageType == 4) {
        this.covers = [
          {
            id: "markers2",
            latitude: this.latitude,
            longitude: this.longitude,
            iconPath: "/static/icon/fill_position.svg",
            width: 24, //宽
            height: 28, //高
          },
        ];
      }
      console.log(r);
    },
  },
};
</script>
  
  <style scoped lang="scss">
.map {
  width: 100%;
  height: 64vh;
  position: relative;
  .location {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 10px;
    top: calc(50vh + 70px);
    background: #fff;
    border-radius: 16px;
	z-index: 99998;
    cover-image {
      width: 32px;
      height: 32px;
    }
  }

  .dialog {
    width: 96%;
    position: fixed;
    left: 2%;
    bottom: 0;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 99999;
    .status {
      position: absolute;
      top: 0px;
      right: 0;
      width: 50px;
      height: 28px;
      line-height: 28px;
	  font-size: 22rpx;
      background: #cc2936;
      color: #fff;
      text-align: center;
      &::after {
        content: "";
        position: absolute;
        left: -11px;
        top: 0;
        width: 0;
        height: 0;
        border-left: 11px solid transparent;
        border-right: 12px solid transparent;
        border-top: 26px solid #cc2936;
      }
    }
    .font {
      width: 65%;
    }
    .mimg {
      width: 120px;
      height: 90px;
    }
    .top {
      padding: 14px;
      display: flex;
      .tit {
        width: 92%;
        height: 92rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 18px;
        color: #363f4d;
        font-weight: bold;
        margin: 14px 14px 8px 14px;
      }
      .desc {
        color: #666666;
        display: flex;
        margin-left: 14px;
      }
    }
    .btn-box {
      display: flex;
      justify-content: space-between;
      padding: 14px;
      border-top: 1px solid #d3e0f2;
      .btn {
        color: white;
        cursor: pointer;
        position: relative;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
      }
      .btn1 {
        width: 50%;
        background: url(../../static/map/elright.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btn2 {
        width: 50%;
        background: url(../../static/map/elleft.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btn3 {
        width: 33%;
        background: url(../../static/map/l.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #363f4d;
      }
      .btn4 {
        width: 33%;
        background: url(../../static/map/c.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btn5 {
        width: 33%;
        background: url(../../static/map/r.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btn6 {
        width: 33%;
        background: url(../../static/map/ll.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        color: #363f4d;
      }
      .btn7 {
        width: 67%;
        background: url(../../static/map/rr.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .dialog-one {
    height: 410rpx;
  }
  .dialog-two {
    height: 410rpx;
    .two-f1 {
      text-align: center;
      margin: 56rpx 0;

      font-size: 28rpx;
      color: #777777;
    }
    .two-f2 {
      text-align: center;
      height: 96rpx;
      margin-bottom: 16rpx;

      font-size: 36rpx;
      color: #333333;
    }
  }
  .dialog-three {
    width: 100%;
    height: 340px;
    left: 0;
    padding: 0 23px;
    box-sizing: border-box;
    box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 0px 0px;
    .search {
      margin: 23px 0;
      height: 48px;
      display: flex;
      justify-content: space-between;
      .searchL {
        width: 74%;
        height: 100%;
        border: 1px solid #d9d9d9;
        display: flex;
        image {
          width: 24px;
          height: 24px;
          margin: 12px;
        }
        input {
          width: 80%;
          height: 100%;
        }
      }
      .addbtn {
        width: 23%;
        height: 100%;
        color: #fff;
        background: #2663bf;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .list-box {
      width: 100%;
      height: 244px;
      // overflow: auto;
      .list-item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        image {
          width: 22px;
          height: 24px;
          margin: 12px;
        }
        .tit {
          width: 62%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .jl {
          width: 30%;
          text-align: right;
          color: #666666;
          padding-right: 4px;
          box-sizing: border-box;
        }
      }
    }
  }
  .dialog-four {
    width: 100%;
    height: 372px;
    left: 0;
    padding: 0 23px;
    box-sizing: border-box;
    box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 0px 0px;
    .form-item {
      width: 100%;
      height: 45px;
      line-height: 45px;
      margin-top: 24px;
      display: flex;
      .form-label {
        width: 24%;
        font-size: 16px;
        color: #5e6f8a;
        text-align: right;
        margin-right: 10px;
      }
      .form-sw {
        display: flex;
        view {
          width: 60px;
          height: 100%;
          border-radius: 4px 4px 4px 4px;
          background: #f0f3f7;
          margin-right: 12px;
          color: #363f4d;
          font-size: 16px;
          text-align: center;
        }
      }
      .form-tent {
        width: 76%;
        height: 100%;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #d9d9d9;
        padding-left: 12px;
        input {
          width: 100%;
          height: 100%;

          font-size: 16px;
        }
      }
    }
  }
}
</style>