storevisit-ui-mobile/src/views/historicalVisit/perfectStoreTSJ.vue

<template>
  <div class="perfectStoreTSJ">
    <van-nav-bar class="navBar" title="AI 调色机识别" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <!-- <div class="contentBox" v-for="val in tiaoSJArr"> -->
      <div class="contentBox" v-if="tiaoSJArr">
        <div class="deviceCode">
          <div class="vertical"></div>
          <div class="codeData">
            <p style="margin: 13px 0">设备编号：{{ tiaoSJArr.deviceCode || '' }}</p>
            <p style="margin: 13px 0">投放编号：{{ tiaoSJArr.putInCode || '' }}</p>
          </div>
        </div>
        <div class="shopSign specialTask" v-if="tiaoSJArr && tiaoSJArr.qualifiedState">
          <div class="specialTaskLeft">
            <div class="SignText">识别结果:</div>
            <div class="signContent">
              <div class="icon">
                <van-icon name="checked" color="#07c160" v-if="tiaoSJArr.qualifiedState == '1'" />
                <van-icon name="warning" color="#ee0a24" v-else />
              </div>
              <div :style="{ color: tiaoSJArr.qualifiedState == '1' ? '#07c160' : '#ee0a24' }">
                {{
                  tiaoSJArr.qualifiedState == '1'
                    ? '调色机完整，投放号正确'
                    : tiaoSJArr.unqualifiedReason
                }}
              </div>
            </div>
            <div class="shopSignButton">
              <div class="" style="display: flex">
                <van-button round type="primary" v-if="tiaoSJArr.qualifiedState == '1'"
                  >通过</van-button
                >
                <van-button round type="danger" v-else>不通过</van-button>
              </div>
            </div>
          </div>
        </div>

        <div
          class="container containert"
          style="font-size: 16px; width: 100%; margin: 0 auto; padding-bottom: 10px"
          v-if="tiaoSJArr.collectionItemList.length">
          <van-form ref="tabstoreVal">
            <div v-for="(item, index) in tiaoSJArr.collectionItemList" :key="index">
              <div v-if="item.answerType == 'tel_send_code'" class="formLabel z-cell z-cells">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0">{{ item.answerValue }}</p>
                </div>
              </div>
              <div v-if="item.answerType == 'nyr'" class="formLabel z-cell z-cells">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0">{{ item.answerValue }}</p>
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'sz'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <p class="mg0">{{ item.answerValue }}</p>
                <p
                  style="
                    color: #444;
                    font-size: 12px;
                    margin: 0;
                    padding: 10px 0;
                    text-align: right;
                  ">
                  <van-field
                    class="mobile-input"
                    v-model="item.collectionOptionList[0].collectionOption"
                    autosize
                    readonly
                    type="textarea" />
                </p>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'zp'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div
                class="formLabel z-cell z-cells"
                v-if="item.answerType == 'wb' || item.answerType == 'dhwb'">
                <van-cell>
                  <template #title>
                    {{ index + 1 }}.{{ item.collectionName }}
                    <span
                      style="color: #00afff; position: absolute; top: 8px; right: 0px"
                      v-if="item.showHistory == 1"
                      @click="getCollectionShowHistory(item)"
                      >回显历史</span
                    >
                  </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0">{{ item.answerValue }}</p>
                </div>
                <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
                  <van-field
                    class="mobile-input"
                    v-model="item.collectionOptionList[0].collectionOption"
                    autosize
                    readonly
                    type="textarea" />
                </p>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'tel'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0">{{ item.answerValue }}</p>
                </div>
                <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
                  <van-field
                    class="mobile-input"
                    v-model="item.collectionOptionList[0].collectionOption"
                    autosize
                    readonly
                    type="textarea" />
                </p>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'date'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0">{{ item.answerValue }}</p>
                </div>
                <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
                  <van-field
                    class="mobile-input"
                    v-model="item.collectionOptionList[0].collectionOption"
                    autosize
                    readonly
                    type="textarea" />
                </p>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'sm'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <div style="font-size: 14px" v-if="item.collectionOptionList[0].answerValue">
                    <div v-if="item.success" style="color: green">
                      <p>系统资产编码：{{ item.equipmentCode1 }}</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;条形码编码：{{ item.equipmentCode2 }}</p>
                      <span style="float: right; margin-top: -48px"
                        ><van-icon name="passed" size="16" />&nbsp;一致</span
                      >
                    </div>
                    <div v-if="!item.success" style="color: red">
                      <p>系统资产编码：{{ item.equipmentCode1 }}</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;条形码编码：{{ item.equipmentCode2 }}</p>
                      <span style="float: right; margin-top: -48px"
                        ><van-icon name="close" size="16" />&nbsp;不一致</span
                      >
                    </div>
                  </div>
                </div>
                <p
                  style="color: #444; font-size: 12px; margin: 0; text-align: right"
                  v-if="item.collectionOptionList[0].collectionOption">
                  <van-field
                    class="mobile-input"
                    v-model="item.collectionOptionList[0].collectionOption"
                    autosize
                    readonly
                    type="textarea" />
                </p>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'duox'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0" v-for="(item1, index1) in item.collectionOptionList" :key="index1">
                    <span v-if="item1.isCheck == 1">{{ item1.collectionOption }}</span>
                  </p>
                </div>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
              <div class="formLabel z-cell z-cells" v-if="item.answerType == 'dx'">
                <van-cell>
                  <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                </van-cell>
                <div class="selesetText">
                  <p class="mg0" v-for="(item2, index2) in item.collectionOptionList" :key="index2">
                    <span v-if="item2.isCheck == 1">{{ item2.collectionOption }}</span>
                  </p>
                </div>
                <div v-if="item.fileInfoList" class="imgBox">
                  <img
                    v-for="value in item.fileInfoList"
                    :src="value.fileUrl"
                    @click="previewsImg(item.fileInfoList)" />
                </div>
              </div>
            </div>
          </van-form>
        </div>
        <!-- <div class="shopSignImg">
          <div class="text">店招照片</div>
          <div class="imgBox">
            <img
              v-if="val && val.qualifiedState"
              :src="val.fileUrl"
              @click="previewsImg(val.fileUrl)" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import deleteUploadImg from '@/components/deleteUploadImg';
import { getVisitsDetailPerfectStoreByTaskId } from '@/api/index';
import { ImagePreview } from 'vant';
export default {
  name: 'perfectStoreTSJ',
  components: { deleteUploadImg },
  data() {
    return {
      visitsId: '',
      detail: null,
      tiaoSJArr: null,
      //   collectionItemList: [],
    };
  },
  activated() {
    this.visitsId = this.$route.query.visitId || '';
    this.detail = null;
    this.getVisitsDetailFn();
  },
  methods: {
    getVisitsDetailFn() {
      this.toastLoading(0, '加载中...', true);
      this.tiaoSJArr = null;
      //   this.collectionItemList = [];
      getVisitsDetailPerfectStoreByTaskId({
        visitsId: this.visitsId,
        taskId: this.$route.query.taskId,
      })
        .then((res) => {
          this.toastLoading().clear();
          if (res.code == 200) {
            this.detail = res.data;
            this.tiaoSJArr = this.detail;
            console.log(this.tiaoSJArr);
            for (let i = 0; i < this.tiaoSJArr.length; i++) {
              this.filterCollectionItemLists(this.tiaoSJArr[i].collectionItemList);
            }
          } else {
            this.$dialog.alert({
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$dialog.alert({
            message: err.msg,
          });
        });
    },
    filterCollectionItemLists(item) {
      for (let q = 0; q < item.length; q++) {
        if (
          item[q].answerType == 'sz' ||
          item[q].answerType == 'wb' ||
          item[q].answerType == 'tel' ||
          item[q].answerType == 'date' ||
          item[q].answerType == 'tel_send_code' ||
          item[q].answerType == 'check_code' ||
          item[q].answerType == 'nyr' ||
          item[q].answerType == 'dhwb'
        ) {
          item[q].answerValue = item[q].collectionOptionList[0].answerValue;
        }
        if (item[q].answerType == 'sm') {
          item[q].success = false;
          if (
            item[q].collectionOptionList[0].answerValue != null &&
            item[q].collectionOptionList[0].answerValue != ''
          ) {
            item[q].equipmentCode2 = item[q].collectionOptionList[0].answerValue.split(',')[1];
            if (item[q].collectionOptionList[0].answerValue.split(',')[0] != 'null') {
              item[q].equipmentCode1 = item[q].collectionOptionList[0].answerValue.split(',')[0];
            } else {
              item[q].equipmentCode1 = '编码不存在';
            }
            if (
              item[q].collectionOptionList[0].answerValue.split(',')[0] ==
              item[q].collectionOptionList[0].answerValue.split(',')[1]
            ) {
              item[q].success = true;
            }
          }
        }
        if (item[q].answerType == 'duox' || item[q].answerType == 'dx') {
          item[q].answerValue = [];
          if (item[q].collectionOptionList.length) {
            for (var qq = 0; qq < item[q].collectionOptionList.length; qq++) {
              if (item[q].collectionOptionList[qq].isCheck == 1) {
                item[q].answerValue.push(item[q].collectionOptionList[qq].collectionOptionId);
                item[q].collectionOptionList[qq].code = item[q].collectionCode;
                item[q].collectionOptionList[qq].answerType = item[q].answerType;
              }
            }
            item[q].answerValue = item[q].answerValue.join();
          }
        }
      }
    },
    previewsImg(fileInfoList) {
      var arrimg = [];
      for (var imgi = 0; imgi < fileInfoList.length; imgi++) {
        arrimg.push(fileInfoList[imgi].fileUrl);
      }
      ImagePreview(arrimg);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.perfectStoreTSJ {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    .contentBox {
      width: 100%;
      margin-top: 10px;
      .deviceCode {
        font-size: 16px;
        background-color: white;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        // padding: 3px 0;
      }
      .vertical {
        background-color: rgb(25, 137, 250);
        height: 14px;
        width: 8px;
        border-radius: 40px;
        margin-right: 10px;
      }
      .container {
        background: #fff;
      }
    }

    // ///////
    .specialTask {
      display: flex;
      flex-direction: row;
      padding: 10px;
      font-size: 16px;
      justify-content: space-between;
      background: #e5faff;
      .specialTaskLeft {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .SignText {
        width: 80px;
        font-weight: 600;
      }
      .signContent {
        flex: 1;
        display: flex;
        flex-direction: row;
        margin: 0 8px;
        .icon {
          padding-top: 2px;
          margin-right: 5px;
        }
      }
    }
    .shopSignButton {
      width: 56px;
      button {
        width: 55px;
        height: 28px;
        padding: 0;
        font-size: 12px;
      }
    }
    .shopSignImg {
      .text {
        font-size: 16px;
        font-weight: 600;
        padding: 15px 10px;
      }
    }
  }
  .imgBox {
    width: 100%;
    text-align: center;
    img {
      width: 60%;
    }
  }
}
</style>
<style lang="scss">
.perfectStoreTSJ {
  .van-button--danger {
    background-color: #ee0a24 !important;
    border: 1px solid #ee0a24 !important;
  }
  .formLabel {
    margin: 0 16px;
    // padding-bottom: 16px;
    border-bottom: 1px solid #f1f1f1;
  }

  .formLabel .van-cell {
    padding: 5px 0;
    font-size: 16px;
  }

  .formLabel .van-cell::after {
    border: 0;
  }

  .formLabel .van-field {
    border: 1px solid #f1f1f1;
    padding: 6px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }

  .formLabel .van-field__control {
    padding: 0 10px;
  }

  .formLabel .formLabeltitle {
    position: absolute;
    top: 8px;
  }
}
</style>