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

<template>
  <view class="Recognition">
    <u-list :height="666">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <u-cell
          :title="`${item.deviceName} (${
            item.checkNum == '1'
              ? '第一次'
              : item.checkNum == '2'
              ? '第二次'
              : ''
          })`"
          @click="getSbClick(item)"
        >
          <u-avatar
            slot="icon"
            shape="square"
            size="35"
            :src="item.img"
            customStyle="margin: -3px 5px -3px 0"
          ></u-avatar>
          <view
            slot="value"
            style="display: flex; align-items: center; margin-left: 20px"
          >
            <text :class="item.status == '2' ? 'fail-text' : 'suc-text'">{{
              item.status == "0"
                ? "处理中"
                : item.status == "1"
                ? "识别成功"
                : item.status == "2"
                ? "识别失败"
                : ""
            }}</text>
          </view>
        </u-cell>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
import api from "@/api/api";
import configService from "@/common/service/config.service.js";

export default {
  name: "Recognition",
  components: {},
  props: {
    recognitionData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      listData: [],
      sbData: [], //识别数据
      sbParamData: {},
    };
  },
  computed: {
    username: function () {
      return uni.getStorageSync("login_user_info")["realname"];
    },
    searchTime: function () {
      return uni.getStorageSync("searchTime");
    },
  },
  watch: {
    recognitionData: {
      handler(newV, oldV) {
        if (newV && newV.length != 0) {
          this.listData = newV;
          this.processArray(this.listData);
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    async processArray(array) {
      let that = this;
      for (const obj of array) {
        let findIndex = that.listData.findIndex(
          (v) => v.deviceId == obj.deviceId
        );
        //0:处理中，1:识别成功，2:识别失败
        that.listData[findIndex].status = "0";
        const result = await that.processObject(obj);
        that.$set(that.listData, findIndex, {
          ...obj,
          status: result[0].status,
        });
        that.sbData = that.listData.map((el) => {
          return {
            ...el,
            sbList: result,
          };
        });
      }
      uni.hideLoading();
    },

    async processObject(obj) {
      let that = this;
      let list = [];
      // 模拟异步操作，例如网络请求
      return new Promise((resolve) =>
        setTimeout(() => {
          let apiUrlImg = `${configService.apiUrlP}:6008`;
          uni.uploadFile({
            url: `${apiUrlImg}/gasIdentifyDs`,
            filePath: uni.getStorageSync(obj.deviceId),
            name: "img",
            formData: {
              user: that.username,
              order: obj.classType_dictText,
              reportdate: that.searchTime,
              checkpath: obj.deviceName,
              imgpath: uni.getStorageSync(obj.deviceId),
            },
            success: (res) => {
              if (res) {
                that.indexList = JSON.parse(res.data).data || [];
                list = that.indexList.map((el) => {
                  return {
                    ...el,
                    status: "1",
                  };
                });
                resolve(list);
                // that.deviceId = that.deviceID;
              }
            },
            fail: (error) => {
              list.push({ status: "2" });
              resolve(list);
            },
          });
        }, 1000)
      );
    },
    //识别跳转
    getSbClick(item) {
      this.sbParamData = this.sbData.filter(
        (v) => v.deviceId == item.deviceId
      )[0];
      console.log(this.sbParamData, "sbParam------");
      //跳转填报页面
      this.$emit("getRepport", this.sbParamData);
    },
  },
};
</script>

<style lang="scss" scoped>
.Recognition {
  position: relative;
  width: 100%;
  background-color: #fff;

  .suc-text {
    font-size: 12px;
    color: rgb(118, 236, 88);
  }
  .fail-text {
    font-size: 12px;
    color: rgb(240, 20, 4);
  }
}

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