BJYSYBZ/YSGZYBZ_WXAPP/pages/received/index.vue

<template>
  <view class="receivedBox">
    <view class="container">
      <map
        class="mapBox"
        :latitude="latitude"
        :longitude="longitude"
        :polygons="covers"
        :scale="scale"
        id="map"
        ref="map"
      >
      </map>
      <SlideCard>
        <view class="titleBox">
          <view class="search">
            <input
              v-model="dkbhModel"
              placeholder-class="address"
              class="input"
              type="text"
              placeholder="请输入地块编号"
            />
          </view>
          <view class="searchBtn" @click="queryClick()">
            <image class="icon" src="../../static/images/search.png"></image>
          </view>
        </view>
        <scroll-view scroll-y="true" class="scroll-view_H" lower-threshold="50">
          <view
            class="cardBox"
            @click="cardBoxClick(item, index)"
            v-for="(item, index) in listData"
            :key="index"
          >
            <view class="cardBoxTitle">
              <view class="titleOne">
                <view class="x1">{{ index + 1 }}</view>
                <view class="x2">{{ item.dkbh }}</view>
              </view>
              <view class="citys">
                <image class="icon" src="../../static/images/citys.png"></image>
                <view class="x1">{{ item.dkwz }}</view>
              </view>
            </view>
            <div class="cardBoxContent">
              <view class="x1"> 管地单位：{{ item.gddw }} </view>
              <view class="x1"> 地块面积：{{ item.mj }} 亩 </view>
              <view class="x1"> 上次巡查时间：{{ item.xcsj }} </view>
            </div>
            <div class="cardBoxBtns">
              <view class="btn btn1" @click.stop="toDetailHandle(item)">
                <image class="icon" src="../../static/images/xcxq.png"></image>
                <view class="x1">详情</view>
              </view>
              <view class="btn btn2" @click.stop="toDetailHandle1(item)">
                <image
                  class="icon"
                  src="../../static/images/xuncha.png"
                ></image>
                <view class="x1">巡查</view>
              </view>
            </div>
          </view>
        </scroll-view>
      </SlideCard>
    </view>
  </view>
</template>

<script>
import SlideCard from '../../components/SlideCard/SlideCard.vue';

import CustomMixins from '@/mixins/CustomMixins.js';
import httpAjax from '@/utils/https.js';
import config from '@/utils/config.js';
export default {
  mixins: [CustomMixins],
  components: {
    SlideCard,
  },
  data() {
    return {
      dkbhModel: '',
      scale: 12,
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 30.131,
      longitude: 120.19308,
      covers: [],
      count: 0,
      listData: [],
      scrollTop: 0,
      pageNo: 1, //当前页
      pageSize: 10, //每页显示多少条
      isRequest: true, //是否请求 是 true，否 false
      detailData: {},
      mapObj: null,
    };
  },
  mounted() {
    this.queryWarningPage();
    this.mapObj = uni.createMapContext('map');
  },
  methods: {
    cardBoxClick(item, index) {
      // let s = dksyhArr.map((item) => `'${item}'`).join(",");
      // let url = config.bjdkgl + '/0/query?dksyh=' + item.dksyh;
      let params = {
        where: 'dksyh=' + item.dksyh,
      };
      let where =
        '?where=dksyh%3D%27' +
        item.dksyh +
        '%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=pjson';
      let url = config.bjdkgl + '/0/query';
      // let whereStr = `1=1 and dksyh in (${s})`;
      uni
        .request({
          url: url + where,
          method: 'GET',
        })
        .then((result) => {
          let arr = result[1].data.features[0].geometry.rings[0];
          let newArr = [];
          arr.forEach((item, index) => {
            let obj = {
              latitude: item[1],
              longitude: item[0],
            };
            newArr.push(obj);
          });
          let center = this.calculateCenter(newArr);

          // this.latitude = newArr[0].latitude - (Math.random() / 100000 + 0.008);
          // this.longitude = newArr[0].longitude;
          this.latitude = center.lat - 0.007;
          this.longitude = center.lng;
          this.scale = 15.3 + (Math.random() + 1) / 1000;
          this.covers = [
            {
              // dashArray: Math.random(),
              points: newArr,
              strokeColor: '#ff0000',
              fillColor: '#ff0000',
              zIndex: 100,
              strokeWidth: 2,
            },
          ];
        });
    },
    // 取面对象 中心点
    calculateCenter(lnglatarr) {
      var total = lnglatarr.length;
      var X = 0,
        Y = 0,
        Z = 0;
      lnglatarr.forEach(function (lnglat) {
        var lng = (lnglat.longitude * Math.PI) / 180;
        var lat = (lnglat.latitude * Math.PI) / 180;
        var x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      var Lng = Math.atan2(Y, X);
      var Hyp = Math.sqrt(X * X + Y * Y);
      var Lat = Math.atan2(Z, Hyp);
      console.log(Lng, Lat, Hyp);
      return { lng: (Lng * 180) / Math.PI, lat: (Lat * 180) / Math.PI };
    },
    queryClick() {
      this.queryWarningPage();
    },
    location(val) {
      const sendData = {
        id: val.id,
      };
      httpAjax({
        url: 'app-api/mining/app/task',
        method: 'GET',
        data: sendData,
      })
        .then((result) => {
          const data = result['data'];
          this.latitude = data.lat - (Math.random() / 100000 + 0.004);
          this.longitude = data.lng;
          this.scale = 15.3 + (Math.random() + 1) / 1000;
          this.covers = [
            {
              id: Math.random(),
              latitude: data.lat,
              longitude: data.lng,
              width: 18,
              height: 25,
              iconPath: '../../static/images/location.png',
            },
          ];
        })
        .catch((err) => {
          console.error('');
        });
    },
    toDetailHandle(item) {
      uni.navigateTo({
        url: `/pages/receivedDetail/index?obj=${JSON.stringify(item)}`,
      });
    },
    toDetailHandle1(item) {
      uni.navigateTo({
        url: `/pages/nocheckDetail/index?obj=${JSON.stringify(item)}`,
      });
    },
    scrollHandle() {
      if (this.isRequest) {
        this.pageNo += 1;
        this.queryWarningPage();
      }
    },
    queryWarningPage() {
      if (!this.isRequest) return;
      const sendData = {
        dkbh: this.dkbhModel,
        xcryId: uni.getStorageSync('userInfo').id,
        // xcryId: '11e77c7e53b2730407fd3e481b2d6558',
      };
      httpAjax({
        url: 'app/xc/getXcryDkList',
        method: 'GET',
        data: sendData,
      })
        .then((result) => {
          if (result.data) {
            this.listData = result.data;
            this.listData.forEach((item) => {
              if (item.lxdh.indexOf('\n') > -1) {
                item.lxdh = item.lxdh.replace('\n', '');
              }
              for (let key in item) {
                if (item[key] == null) {
                  item[key] = '';
                }
              }
            });
            console.log(this.listData);
          }
        })
        .catch((err) => {
          console.error('');
        });
    },
    queryWarningRegional() {
      //查询预警区域分布
      if (!this.isRequest) return;
      const sendData = {
        taskStatus: 1,
      };
      httpAjax({
        url: '/admin-api/mining/deviceWarning/regional',
        method: 'GET',
        data: sendData,
      })
        .then((result) => {})
        .catch((err) => {
          console.error('');
        });
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>