Vent-App/pages/gasreport/components/taskBoardAddress.vue

<template>
  <view class="taskBoardAddress">
    <!-- 查看巡检点详情时隐藏本页导航栏，由详情页展示自己的标题与返回键 -->
    <u-navbar
      v-if="!toComponent"
      :title="gasTitle"
      :safeAreaInsetTop="true"
      :fixed="true"
      height="50px"
      bgColor="#afc3fc"
      leftIcon="arrow-left"
      @leftClick="handlerToggle"
    >
    </u-navbar>
    <view>
      <u-button
        v-if="showBtn"
        icon="eye"
        type="primary"
        size="small"
        loadingText="识别中"
        style="width: 100%; margin-top: 20px"
        @click="getYjsb"
        >一键识别</u-button
      >
    </view>
    <u-list :height="666" :scrollTop="topH" v-if="isShow">
      <u-list-item v-for="(item, index) in indexList" :key="index">
        <u-cell icon="share">
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">{{
              `${item.deviceName} (${
                item.checkNum == "1"
                  ? "第一次"
                  : item.checkNum == "2"
                  ? "第二次"
                  : ""
              })`
            }}</text>
            <!-- <u-tag text="查看" plain size="mini" type="warning">
                        </u-tag> -->
          </view>
          <view slot="value" style="display: flex; align-items: center">
            <u-icon
              :name="item.checkState == '0' ? 'plus' : 'checkmark'"
              size="16"
              @click="getBoradAddress(item, index)"
            ></u-icon>
            <u-icon
              v-if="item.zcShow"
              style="margin-left: 10px"
              name="photo"
              size="16"
            ></u-icon>
          </view>
        </u-cell>
      </u-list-item>
    </u-list>
    <!-- 一键识别List -->
    <view v-if="sbShow">
      <Recognition
        :recognitionData="recognitionData"
        @getRepport="getRepport"
      ></Recognition>
    </view>
    <component
      :is="toComponent"
      :Ids="Ids"
      :checkNum="checkNum"
      :classType="classType"
      :isSensor="isSensor"
      :deviceID="deviceID"
      :deviceName="deviceName"
      :saveImg="saveImg"
      :checkState="checkState"
      :sbData="sbData"
      :urlData="urlData"
      @getBackAddress="getBackAddress"
      @clearImg="clearImg"
    >
    </component>
  </view>
</template>

<script>
import api from "@/api/api";
import gasImgIdentify from "./gasImgIdentify.vue";
import Recognition from "./Recognition.vue";

export default {
  name: "taskBoardAddress",
  components: { gasImgIdentify, Recognition },
  props: {
    taskId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      saveImg: "",
      // imgList: [],
      topH: 0,
      activeIndex: 0,
      Ids: "",
      checkNum: "", //巡检次数
      classType: "",
      isSensor: "",
      deviceID: "",
      deviceName: "",
      checkState: "",
      isShow: true,
      toComponent: "",
      indexList: [],
      gasTitle: "任务明细", //标题
      sbShow: false,
      sbData: [],
      urlData: "",
      showBtn: true,
    };
  },
  computed: {
    searchTime: function () {
      return uni.getStorageSync("searchTime");
    },
    //一键识别列表
    recognitionData: function () {
      let list = [];
      this.indexList.forEach((el) => {
        if (uni.getStorageSync(el.deviceId)) {
          el.img = uni.getStorageSync(el.deviceId);
          el.status = "";
          list.push(el);
        }
      });
      return list;
    },
  },
  mounted() {
    this.taskDetailsLists();
  },
  methods: {
    //点击返回上一级
    handlerToggle() {
      this.$emit("getBackBoard");
    },
    //暂存图片预览
    // getView(item) {
    //     let imgList = []
    //     imgList.push(uni.getStorageSync(item.deviceId))
    //     // 预览图片
    //     uni.previewImage({
    //         urls: imgList,
    //         current: 0
    //     });
    // },
    //清除暂存图片
    clearImg(data) {
      if (data) {
        this.saveImg = "";
      }
    },

    //一键识别
    getYjsb() {
      let that = this;
      that.isShow = false;
      that.sbShow = true;
      that.showBtn = false;
      if (that.recognitionData.length != 0) {
        uni.showLoading({
          title: "批量识别中...",
          mask: true,
        });
      }
    },
    //批量识别后跳转到填报页面
    getRepport(param) {
      let that = this;
      that.sbShow = false;
      that.showBtn = false;
      console.log(param, "param------");
      that.Ids = param.id;
      that.checkNum = param.checkNum;
      that.classType = param.classType_dictText;
      that.checkState = param.checkState;
      that.isSensor = param.isSensor;
      that.deviceID = param.deviceId;
      that.deviceName = param.deviceName;
      that.sbData = param.sbList;
      that.urlData = param.img;
      that.toComponent = "gasImgIdentify";
    },
    getBoradAddress(item, index) {
      let that = this;
      that.activeIndex = index;
      that.isShow = false;
      that.showBtn = false;
      if (item.checkState == "0") {
        that.Ids = item.id;
        that.isSensor = item.isSensor;
      }
      that.checkNum = item.checkNum;
      that.classType = item.classType_dictText;
      that.checkState = item.checkState;
      that.deviceID = item.deviceId;
      that.deviceName = item.deviceName;
      that.saveImg = uni.getStorageSync(item.deviceId);
      that.toComponent = "gasImgIdentify";
    },
    getBackAddress() {
      this.isShow = true;
      this.showBtn = true;
      this.sbShow = false;
      this.toComponent = "";
      this.urlData = "";
      this.topH = 39 * this.activeIndex;
      this.taskDetailsLists();
    },

    taskDetailsLists() {
      let that = this;
      new Promise((resolve, reject) => {
        api
          .taskDetailsList({
            pageNo: 1,
            pageSize: 100,
            taskId: that.taskId,
            taskTime: that.searchTime,
          })
          .then((response) => {
            if (response.data.code == 200) {
              console.log(response, "地点列表---");
              that.indexList = response.data.result.records || [];
              if (that.indexList.length != 0) {
                that.indexList.forEach((el) => {
                  if (uni.getStorageSync(el.deviceId)) {
                    el.zcShow = true;
                  } else {
                    el.zcShow = false;
                  }
                });
              }
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.taskBoardAddress {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  box-sizing: border-box;
}

::v-deep .u-slot-title {
  display: flex;
}
</style>