soc_app/src/views/menu/securityCheckRegister/detail.vue

<template>
  <div v-if="active" class="register-detail">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card" v-if="taskInfo">
        <van-cell-group>
          <van-cell :title="taskInfo.taskName">
            <template #right-icon>
              <span :style="{ color: getState(getDictLabel(taskInfo.status, 'safety_check_status')) }">
                {{ getDictLabel(taskInfo.status, 'safety_check_status') }}
              </span>
            </template>
          </van-cell>
          <van-cell class="cell-item28" title="任务时间" :value="formatTime(taskInfo.planStartTime,taskInfo.planEndTime)" />
          <van-cell class="cell-item28" title="受检机构" :value="taskInfo.beCheckedOrgName" />
          <van-cell class="cell-item28" title="检查开始时间" :value="formatRegisterTime(taskInfo.startTime)" />
          <van-cell class="cell-item28" title="检查结束时间" :value="formatRegisterTime(taskInfo.endTime)" />
          <van-cell class="cell-item28" title="检查组成员" :value="taskInfo.checkTeam || '无'" />
        </van-cell-group>
      </div>
      <!--  检查项目    -->
      <div class="card">
          <!--  搜索框  -->
            <van-search v-model="itemName" class="van-hairline--top" placeholder="请输入检查内容" />
            <van-collapse v-model="activeNames" v-for="(v,i) in resultList" :key="v.itemId">
            <van-collapse-item :title="`${i+1}.${v.itemName}`" :name="v.itemName">
              <div v-for="(item, index) in v.pointList" :key="item.pointId" class="collapse-box" :class="{'van-hairline--bottom':item.status}">
                <van-cell :border="true">
                  <template #title>
                    <pre> <span>{{`${i+1}-${index+1}`}}.</span> {{ item.pointName }}</pre>
                  </template>
                  <template #right-icon>
                    <span v-if="item.nfcList && item.nfcList.length"   @click="clickNFCNum(item.nfcList)">
                        <span style="color:#009240;">{{ getNfcState(item.nfcList) }}</span>/<span >{{item.nfcList.length}}</span>
                    </span>
                    <img
                      v-if="item.nfcList && item.nfcList.length"
                      :src="require('../../../assets/svg/NFC.svg')"
                      class="nfc-icon"/>
                    <span> </span>
                    <span v-if="item.status != null">
                      <van-tag v-if="item.status == '1'" type="warning">隐患</van-tag>
                      <van-tag v-else type="success">正常</van-tag>
                    </span>
                  </template>
                </van-cell>
                <van-cell-group v-show="item.status =='1'" :border="false">
                  <van-cell v-if="item.nfcList && item.nfcList.length > 0" :border="false">
                    <div
                      v-if="img.img"
                      class="nfc-img"
                      v-for="(img, i) in item.nfcList"
                      :key="img.img"
                      @click="preViewNFC(i)"
                    >
                      <img :src="imgUrl(img.img)" alt="" />
                      <span>{{ img.checkName }}</span>
                    </div>
                  </van-cell>
                  <van-cell  title="情况描述">
                    <template #label>
                      <p class="text-style">{{item.remark}}</p>
                    </template>
                  </van-cell>
                  <van-cell  title="整改期限" :border="false" :value="`${item.rectificationDeadline}天`"></van-cell>
<!--                  <select-cell-->
<!--                    required-->
<!--                    :disabled="!enable"-->
<!--                    is-row-->
<!--                    title="整改期限"-->
<!--                    v-model="item.rectificationDeadline"-->
<!--                    :data-list="dateList"-->
<!--                  />-->
                  <div v-if="item.imgData && item.imgData.length > 0" class="upload-box">
                    <van-cell>
                      <div
                        class="nfc-img"
                        v-for="(v, i) in item.imgData"
                        :key="v.imgPath"
                        @click="clickWarnImage(item.imgData, i)"
                      >
                        <img :src="imgUrl(v.imgPath)" alt="" />
                      </div>
                    </van-cell>
                  </div>
                </van-cell-group>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
    </div>

    <van-action-sheet v-model="total_show" @closed="closedNfcList">
      <div class="content">
        <van-tabs>
          <van-tab title="未扫描" name="b">
            <div v-if="unmetList.length > 0" class="nfc-list">
              <van-cell v-for="item in unmetList" :title="item.nfcName" :key="item.nfcCode">
                <!-- <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon"/>-->
<!--                <span >{{item.pointScan == 1?'必扫':'可选'}}</span>-->
              </van-cell>
            </div>
            <van-empty v-else description="" />
          </van-tab>
          <van-tab title="已扫描" name="a">
            <div v-if="fullList.length > 0" class="nfc-list">
              <van-cell v-for="item in fullList" :title="item.nfcName" :key="item.nfcCode">
                <span style="color: green"> {{item.scanMethod == 0?'NFC扫描':'拍照上传'}}</span>
              </van-cell>
            </div>
            <van-empty v-else description="" />
          </van-tab>
        </van-tabs>
      </div>
    </van-action-sheet>

  </div>

</template>

<script>
import NavBar from '@/components/NavBar'
import { imgUrl } from '@/utils'
import { ImagePreview } from 'vant'
import { mapGetters } from 'vuex'
import {registerDetail} from './api'

export default {
  name: 'securityDetail',
  components: { NavBar },
  data() {
    return {
      id: null,
      activeNames: ['1'],
      //基本信息
      taskInfo: [],
      //选中的nfc列表
      NFCList: [],
      //区域下检查内容列表
      checkList: [],
      //检查内容具体项列表
      checkItemList: [],
      //nfc扫描数量
      NFCNum: 0,
      //所有检查项数量
      allCheckNum: 0,
      //区域下检查项数量
      checkNum: 0,
      //nfc图片
      nfcImage: [],
      enable: false,
      stateList: [],
      dayList: [],
      itemName:null,
      preViewImages: {
        images: [],
        startPosition: 0
      },
      dicts: ['safety_check_status', 'rectification_deadline'],
      showPreView: false,
      selected: null,
      active: true,
      dateList:[],
      go: {
        type: 'replace',
        path: '/securityCheckRegister'
      },
      /* 以下为NFC弹窗详情数据*/
      total_show:false,
      fullList:[],
      unmetList:[],
    }
  },
  computed: {
    ...mapGetters(['dictionary',"roleList",'orgId']),
    resultList(){
      if (!this.itemName) {
        return this.checkList;
      }
      // 使用传入的值来过滤数据
      const filteredData = this.checkList.map(item => ({
        ...item,
        pointList:
          item.pointList.filter(point =>
            (point.itemName.includes(this.itemName) || point.pointName.includes(this.itemName))
          )
      })).filter(item => item.pointList.length > 0);
      return filteredData;
    },
  },
  mounted() {
    this.id = this.$route.query.id
    this.getData()
  },
  beforeDestroy() {
    window.openCameraCallBack = null
    window.openNFCScanCallBack = null
  },
  methods: {
    //长度校验
    validator(val) {
      let len = val.length;
      if( len > 5) {
        this.$toast.fail('问题情况输入长度不能超过200');
        return true
      }else {
        return false
      }
    },
    //获取NFC已扫描数据
    getNfcState(arr){
        arr = arr || [];
        let nums = arr.filter(v=>{return v.status === 1});
        return nums.length;
    },
    //调用nfc
    checkNFC(){
      //设置nfc调用后的回调
      window.openNFCScanCallBack = this.openNFCScanCallBack;
      //设置loading弹窗
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        position: 'top',
        forbidClick: true,
        message: '请靠近NFC标签，进行扫描！',
      });

      let second = 30;
      this.timer = setInterval(() => {
        second--;
        if(!second){
          this.$toast.clear();
          clearInterval(this.timer);
          this.$toast.fail({
            message: '未扫描到任何信息！',
          });
        }
      }, 1000);

      //挂载nfc
      this.useNFC();
    },
    //调用nfc后的回调
    openNFCScanCallBack(nfcStr){
      //alert(JSON.stringify(nfcStr))
      clearInterval(this.timer);
      let nfcCode = '';
      try{
        let nfc = JSON.parse(nfcStr);
        nfcCode =  nfc.content;
      }catch (e) {
        nfcCode = nfcStr.content;
      }
      // let nfc = JSON.parse(nfcStr);
      // let nfcCode =  nfc.content;
      //alert(nfcCode)
      this.checkNfcFilter(nfcCode);
    },
    //验证nfc数据
    checkNfcFilter(nfcCode){
      //let areaId = null;
      let checkOk =  false;
      //alert(JSON.stringify(this.NFCList,'NFCList'));
      this.NFCList.forEach(v => {
        if(v.nfcCode === nfcCode){
          if(v.status === 1){
            this.$toast.fail('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
            throw new Error('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
          }
          v.status = 1;
          v.scanMethod = 0;
          this.$toast('NFC点位：' + v.nfcName + '扫描成功！');
          checkOk = true;
        }
      });
      if(!checkOk){
        this.$toast.fail( "扫描结果不在本次检查范围内！");
      }
    },

    //是否显示nfc图标
    nfcState(item){
      if(item.nfcList && item.nfcList.length > 0){
        return item.nfcList.some(v=>{
          return v.status === 0
        })
      }
      return false
    },

    //格式化时间范围
    formatTime(start,end,format){
      format = format ||  'YYYY年MM月DD日'
      return `${this.dayjs(start).format(format)} ~ ${this.dayjs(end).format(format)}`;
    },
    //格式化时间范围
    formatRegisterTime(time,format){
      if (!time){
        return '';
      }
      format = format ||  'YYYY年MM月DD日 HH时mm分'
      return `${this.dayjs(time).format(format)}`;
    },

    //插入检查项
    addItem(val) {
      console.log(val, 'list')
      if (!val) return
      let str = JSON.parse(JSON.stringify(val))
      str.forEach(valItem => {
        console.log(this.checkList, 'checkList')
        // 查找是否有与 valItem.itemId 相同的项
        const existingItem = this.checkList.find(checkItem => checkItem.itemId === valItem.itemId)
        if (existingItem) {
          // // 如果存在相同 itemId 的项，查找 pointList 是否有与 valItem.pointId 相同的项
          const existingPoint = existingItem.pointList.find(pointItem => pointItem.pointId === valItem.id)
          if (!existingPoint) {
            console.log(existingItem, 'point添加成功')
            this.$nextTick(() => {
              valItem.isAdd = 1;
              existingItem.pointList.push(valItem)
              this.active = true
            })
          } else {
            this.$toast(existingPoint.pointName + '已添加')
          }
        } else {
          console.log(valItem, 'item添加成功')
          this.checkList.push({
            isAdd:1,
            itemId: valItem.itemId,
            itemName: valItem.itemName,
            pointList: [valItem]
          })
          this.active = true
        }
      })
    },

    goBack() {
      this.active = true
    },

    getState(state) {
      switch (state){
        case '待检查':
          return '#008cd6';
        case '进行中':
          return '#bc9f71';
        case '已完成':
          return '#009240';
        case '已逾期':
          return '#D7000F';
      }
    },
    addCheck() {
      this.active = false
    },
    clickWarnImage(arr, i) {
      this.preViewImages.images = arr.map(v => imgUrl(v.imgPath))
      this.preViewImages.startPosition = i
      ImagePreview(this.preViewImages)
    },
     preViewNFC(i) {
      this.preViewImages.images = this.nfcImage.map(v => imgUrl(v.img))
      this.preViewImages.startPosition = i
      ImagePreview(this.preViewImages)
    },
    getDicts(s) {
      return this.stateList.find(v => s == v.dictValue).dictLabel
    },
    //初始化数据
    getData() {
      let taskId = this.$route.query.id;
      registerDetail(taskId).then(res => {
        console.log(res, 'res')
        this.taskInfo = res.data;
        this.enable = this.taskInfo.status === 1 || this.taskInfo.status === 2; //是否可编辑
        this.checkList = res.data.checkList;
        this.dateList = this.getDictItem('rectification_deadline');
        //设置默认展开项
        this.activeNames = this.checkList.map(v => v.itemName);
      })
    },
    //点击NFC数字图标
    clickNFCNum(arr) {
      arr.forEach(v=>{
        if(v.status){
          this.fullList.push(v);
        }else {
          this.unmetList.push(v)
        }
      })
      this.total_show =true;
    },
    closedNfcList(){
      this.fullList = [];
      this.unmetList = [];
    },
    //清空数据
    clearData() {
      this.areaList = []
      this.taskInfo = []
      this.selectArea = []
      this.NFCList = []
      this.checkList = []
      this.checkItemList = []
      this.NFCNum = 0
      this.enable = false
    },
    //切换开关时添加操作时间
    switchChange(item) {
      console.log(item, '666')
      //item.resTime = formatDate(new Date());
    },
    //添加图片时的回调
    changeNfcImg(imgItem) {
      console.log(imgItem, this.NFCList, 'imgItem')
      this.NFCList.forEach(v => {
        if (v.nfcCode === imgItem.nfcCode) {
          v.img = imgItem.url
          v.status = 1
          v.scanMethod = 1
          this.nfcImage.push(v)
        }
      })
      console.log(this.NFCList, this.nfcImage, 'nfcObj')
    },

  }
}
</script>
<style lang="scss">
.register-detail{
  .van-collapse-item__content{
    padding: 0 30px 0px 30px;
  }
  .van-tabs__content{
    border-top:2px solid #eaeaea;
  }
}
</style>
<style lang="scss" scoped>
.register-detail {
  height: 100%;
  overflow: hidden;
  .page-container {
    height: calc(100vh - 92px);
    overflow: auto;
    padding: 20px;
  }
  .flex-box {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > span {
      margin: 0 20px;
    }

    >button{
      flex:.45;
      margin:0 10px;
      /* min-width: 30%;
      max-width: 50%; */
    }
  }
  .legend {
    background-color: #fff;
    padding: 0 20px;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    > span {
      color: orange;
    }
  }
  .card {
    margin-bottom: 20px;
    box-shadow: 0 10px 10px #eaeaea;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .collapse-box{
    -padding-bottom: 10px;
  }
  .check-area {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    color: #aaa;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 6px #ddd;
  }
  .nfc-icon {
    width: 50px;
    height: 50px;
    margin: 0 20px;
  }
  .custom-title {
    align-self: center;
    vertical-align: middle;
  }
  .upload-box {
    padding: 30px;
  }
  .warning-msg {
    color: orange;
    text-align: center;
    height: 80px;
    line-height: 80px;
  }
  .active {
    color: #fff;
    background-color: #1989fa;
  }
  .nfc-img {
    display: inline-block;
    width: 140px;
    height: 140px;
    margin: 0 10px;
    position: relative;
    > img {
      width: 100%;
      height: 100%;
      border: none;
    }
    > span {
      position: absolute;
      padding: 0 10px;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      color: #eaeaea;
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 30px;
      height: 30px;
    }
  }
  .nfc-list{
    min-height: 300px;
    max-height: 600px;
    overflow: auto;
    padding: 10px 0;
  }
}
</style>