soc_app/src/views/menu/monitoringCall/components/consultInfo.vue

<template>
  <div>
    <NavBar />
    <div class="bigBox">
      <van-collapse v-model="activeNames" @open="addActiveNames">
        <div class="titleBox">
          <div class="textTitle">{{ taskData.taskName }}</div>
          <div class="text">调阅开始时间:{{ taskData.taskStartTime }}</div>
          <div class="text" v-if="taskData.taskStatus == 2">调阅结束时间:{{ taskData.taskEndTime }}</div>
        </div>

        <!-- 进行调阅 -->

        <!-- <div @click="editTaskInfo">进行调阅</div> -->
        <div v-if="taskData.taskStatus == 2">
          <!-- 调阅列表 -->
          <div class="topBox" v-for="item in taskData.coreMonitoringTaskRegistrationMonitorVOList" :key="item.id">
            <!-- //主机列表组件 -->
            <areaMonitoringList :list="item" :taskStatus="taskData.taskStatus"></areaMonitoringList>
          </div>
        </div>

        <div class="topBox" v-else>
          <!-- <van-collapse-item :name="item.hostId" v-for="item in hostList" :key="item.hostId">
            <template #title>
              <div class="textTitle">{{ item.hostName }}</div>
            </template>
            <passage
              ref="passage"
              :list="item.deviceVOS"
              :taskId="$route.params.id.split('_')[0]"
              :hostId="item.hostId"
              @resetList="getHostHandlerA"
            ></passage>
          </van-collapse-item> -->
          <!-- <van-collapse-item>
            <template #title>
              <div class="textTitle">区域列表</div>
            </template> -->
          <areaPassage
              ref="passage"
              :list="retrievalAreaList"
              :taskId="$route.params.id.split('_')[0]"
              @resetList="getHostHandlerA"
            ></areaPassage>
          <!-- </van-collapse-item>        -->
        </div>
      </van-collapse>

      <!-- 底部按钮 -->
      <div class="bottomClass" v-if="this.$route.params.id.split('_')[1] != 2">
        <!-- <van-row>
          <van-col span="24">
            <van-button type="info" @click="addInfoHandler">添加调阅记录</van-button>
          </van-col>
        </van-row> -->
        <van-row v-if="retrievalAreaList && retrievalAreaList.length > 0">
          <van-col span="24">
            <van-button type="info" @click="endMontor">结束调阅</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-action-sheet v-model="showSign" :title="shwoSignTitle" class="sheet">
        <writingPad ref="esign" :old-signature-seal="oldSignatureSeal" @resultImg="resultSignImg" @cancelSign="cancelSign"></writingPad>
    </van-action-sheet>
    <!-- 扫描弹框 -->
    <scandialog ref="scandialog" @input="resultImg" @changeNFC="getNFC"></scandialog>

    <van-dialog v-model="confirmShow" title="引入签名" show-cancel-button @confirm="confirmSignImg">
      <van-image :src="this_window + oldSignatureSeal" />
    </van-dialog>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
//通道列表
import passage from './passage.vue'
import areaPassage from './areaPassage.vue'
// 主机列表组件
import MonitoingList from './monitoringList.vue'
import areaMonitoringList from './areaMonitoringList.vue'

import { upload } from '@/api/public'
import { Col, Row, Dialog, Toast, Icon, Picker } from 'vant'
import { registrationList, finishRegistration, login, getSysDeviceByTaskId, registration } from '@/api/toConsult.js'
import scandialog from '@/components/nfcPopup/alone.vue'
import writingPad from '@/components/writingPad/index.vue'
import imgCom from '@/components/imgCom/index.vue'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
export default {
  data() {
    return {
      endNum: false, //判断是否能结束调阅
      taskData: {},
      hostList: [], //主机列表
      retrievalAreaList:[], // 监控调阅区域名称
      activeNames: [],
      showSign:false,
      shwoSignTitle:"签名",
      signImgUrl:"",
      oldSignatureSeal:"",
      confirmShow:false,
      this_window: process.env.NODE_ENV === 'development' ? '/dev' : window.origin,
    }
  },
  components: {
    scandialog,
    areaPassage,
    // passage,
    NavBar,
    Dialog,
    Icon,
    Picker,
    Col,
    Row,
    // MonitoingList,
    areaMonitoringList,
    writingPad,
    imgCom,
  },

  created() {
    this.init(1)
  },
  mounted() {
    this.oldSignatureSeal = JSON.parse(window.sessionStorage.getItem('SET_MASTER_SIGNATURE_SEAL')) + '';
  },
  methods: {
    //项目初始化获取数据
    init(num=0) {
      registrationList({ taskId: this.$route.params.id.split('_')[0] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.taskData = data
        if (data && data.taskStatus < 2) {
              this.getHostHandler(num)
            }
          if(num === 1 && data.taskStatus !=2){
            Dialog.alert({
            message: '当前为监控调阅区域选择界面，请根据实际调阅情况选择，无需全部填写。',
            }).then(() => {

            });
          }        }
      })
    },
    getHostHandlerA(num) {
      // this.getHostHandler()
      this.init(num)
    },
    getHostHandler(num = 0) {
      // num//判断是不是第一次初始化
      // getSysDeviceByTaskId({ taskId: this.$route.params.id.split('_')[0] }).then(res => {
      //   let { code, data, msg } = res
      //   if (code == 200) {
      //     this.hostList = data
      //     if (num == 1) {
      //       this.activeNames = [this.hostList[0].hostId]
      //     } else {
      //       console.log(this.activeNames, '////')
      //     }
      //   }
      // })

       //获取调阅字典
       this.getDictHandler('video_retrieval_area', res => {
           let areaList = JSON.parse(JSON.stringify(res));

           if(this.taskData.coreMonitoringTaskRegistrationMonitorVOList){
            areaList.forEach(area=>{
             let tempList= this.taskData.coreMonitoringTaskRegistrationMonitorVOList.filter(item=>item.areaCode == area.dictValue);
             if(tempList && tempList.length>0)
             {
                if(tempList[0].coreMonitoringTaskMonitorInfoList && tempList[0].coreMonitoringTaskMonitorInfoList.findIndex(x=>{
                 return x.situation=="1";
                })>-1)
                {
                  this.$set(area, 'type', 2)
                }
                else{
                  this.$set(area, 'type', 1)
                }
             }
             else{
              this.$set(area, 'type', 0)
             }

            });
           }
           else{
            areaList.forEach(area=>{
              this.$set(area, 'type', 0)
            })
           }

           this.retrievalAreaList=areaList;
          // this.dataList.forEach(item => {
          //   this.$set(item, 'situation', '') //异常情况初始化默认值
          //   this.$set(item, 'isChecked', false) //选中初始值
          //   this.$set(item, 'abnormalIllustrate', '') //情况说明初始化默认值
          // })
        })

    },
    addInfoHandler() {
      this.$router.push('/addInfo/' + this.$route.params.id.split('_')[0] + '_' + this.taskData.id + '_add')
    },
    //结束调阅
    endMontor() {
      //没有记录的时候不能结束调阅
      let falg = this.taskData.coreMonitoringTaskRegistrationMonitorVOList
      if (falg && falg.length > 0) {
        let startDate = JSON.parse(JSON.stringify(this.taskData.taskStartTime))
        let obj=startDate.replace(/-/g,"/");

        startDate = Date.parse(new Date(startDate))
        if(!startDate){
          startDate = Date.parse(new Date(obj));
        }
        let endDate = Date.parse(new Date())

        if (endDate - startDate) {
          this.shwoSignTitle= `调阅时长为${this.dateTime(endDate - startDate)},是否结束调阅?`;
          this.showSign=true;


          // Dialog.confirm({
          //   title: '提示',
          //   message: `当前调阅时长为${this.dateTime(endDate - startDate)},是否结束调阅?`
          // }).then(() => {
          //     this.$refs.scandialog.visible = true
          //     this.globalLoading = true
          //   })
          //   .catch(() => {
          //     // on cancel
          //   })
        }

      } else {
        Dialog({ message: '调阅项目登记不能为全空!' })
        return
      }

      // else {
      // this.$refs.scandialog.visible = true

      //   startDate = new Date(startDate)
      // }
    },
    dateTime(msd) {
      //将毫秒秒转化为xx小时xx分钟xx秒

      let time = parseFloat(msd) / 1000 //先将毫秒转化成秒
      if (null != time && '' != time) {
        if (time > 60 && time < 60 * 60) {
          time =
            parseInt(time / 60.0) + '分钟' + parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) + '秒'
        } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
          time =
            parseInt(time / 3600.0) +
            '小时' +
            parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) +
            '分钟' +
            parseInt(
              (parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) *
                60
            ) +
            '秒'
        } else {
          time = parseInt(time) + '秒'
        }
      }
      return time
    },
    cancelSign()
    {
      this.showSign=false;
    },
    confirmSignImg(){
      // this.cancelSign();
      // this.submitSign(this.oldSignatureSeal);
      this.signImgUrl = this.oldSignatureSeal;
      this.showSign=false;
      this.$refs.scandialog.visible = true
      this.globalLoading = true
    },
     //上传签名图到服务器
    resultSignImg(img,oldImgUrl) {
      if (oldImgUrl !== "" && oldImgUrl !== null && oldImgUrl !== "null"){
        //this.submitSign(oldImgUrl)
        this.confirmShow =true;
        this.oldSignatureSeal = oldImgUrl;
      }else {
        let obj = base64ToBlob(img)
        let formData = new FormData()

        obj.name = '签名.jpg'
        formData.append('file', base64ToBlob(img))

        upload(formData, 'image')
          .then(res => {
            /*上传成功*/
            this.signImgUrl = process.env.NODE_ENV === 'development' ? res.data.url : res.data.url
            this.showSign=false;
            this.$refs.scandialog.visible = true
            this.globalLoading = true
          })
          .catch(err => {
            /*上传失败*/
          })
      }
    },
    //文件上传
    resultImg(img) {
      this.photoHandler(img[0].url)
    },
    //上传NFC
    getNFC(nfc) {
      this.photoHandler('', nfc)
    },
    //扫描图片并上传到服务器和后端
    photoHandler(img = '', nfc = '') {
      //上传到服务器
      //开始调阅上传
      let obj = {
        endPicture: img,
        endNfc: nfc,
        taskId: this.$route.params.id.split('_')[0]
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          //结束调阅
          this.endHandler()
        }
      })
    },
    endHandler() {
      finishRegistration({
        id: this.taskData.id,
        signImgUrl:this.signImgUrl,
        taskId: this.$route.params.id.split('_')[0]
      }).then(res => {
        this.$router.go(-1)

      })
    },
    addActiveNames() {

    }
  }
}
</script>
<style lang="scss" scoped>
.van-collapse-item {
  margin: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.titleBox {
  margin: 20px;
  margin-bottom: 0px;
  background-color: #fff;
}
.bigBox {
  height: calc(100vh - 260px);
  overflow: scroll;
  // height: 100vh;
  // padding: 20px;
  background-color: #f2f2f2;

  .textTitle {
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
  }
  .text {
    padding: 20px;

    font-size: 26px;
    color: #b0b0b0;
  }
  .topBox {
    // margin-bottom: 10px;
    // margin: 20px;
    color: black;
    margin-top: 10px;
  }
  .bottomClass {
    position: fixed;
    width: 100%;
    bottom: 0%;
  }
  .van-button {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
  }
}
</style>