BJYSYBZ/YSGZYBZ_WXAPP/pages/received/index.vue

<template>
  <view class="receivedBox">
    <view class="container">
      <map
        class="mapBox"
        :latitude="latitude"
        :longitude="longitude"
        :markers="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 url = config.bjdkgl + '/0/query';
      let params = {
        where: item.dksyh,
      };
      //https://zlzd.zrzyt.zj.gov.cn/arcMapServer216/arcgis/rest/services/YSYBZ/BJ_DKGL/MapServer/0/query
      httpAjax({
        url: url,
        method: 'POST',
        data: params,
      }).then((result) => {
        console.log(result);
      });
    },
    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>