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

<template>
  <div>
    <NavBar :go="{type:'push',path:'/monitoringCall'}" />
    <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">
              <!-- //主机列表组件 -->
              <MonitoingList :list="item" :taskStatus="taskData.taskStatus"></MonitoingList>
            </div>
          </div>
          <!-- ------------ -->
          <div 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="getHostHandler"></passage>
            </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="hostList&&hostList.length>0">
          <van-col span="24">
            <van-button type="info" @click="endMontor">结束调阅</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 扫描弹框 -->
    <scandialog ref="scandialog" @change="resultImg" @changeNFC="getNFC"></scandialog>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
//通道列表
import passage from './passage.vue'
// 主机列表组件
import MonitoingList from './monitoringList.vue'
import { upload } from '@/api/public'
import { Col, Row, Dialog, Toast, Icon, Picker } from 'vant'
import { registrationList, getEndInfo, login, getSysDeviceByTaskId, registration } from '@/api/toConsult.js'
import scandialog from '@/components/nfcPopup/alone.vue'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
export default {
  data() {
    return {
      taskData: {},
      hostList:[],//主机列表
      activeNames: []
    }
  },
  components: {
    scandialog,
    
    passage,
    NavBar,
    Dialog,
    Icon,
    Picker,
    Col,
    Row,
    MonitoingList
  },

  created() {
    this.init()
  },
  methods: {
    //项目初始化获取数据
    init() {
      registrationList({ taskId: this.$route.params.id.split('_')[0] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.taskData = data

          //如果当前是调阅中则获取视频主机和通道
          if (data?.taskStatus < 2) {
          
            this.getHostHandler()
          }
        }
      })
    },
    getHostHandler() {
      getSysDeviceByTaskId({ taskId: this.$route.params.id.split('_')[0] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          
          this.hostList=data
          this.activeNames=[this.hostList[0].hostId]
        }
      })
    },
    addInfoHandler() {
      console.log(this.taskData)
      this.$router.push('/addInfo/' + this.$route.params.id.split('_')[0] + '_' + this.taskData.id + '_add')
    },
    //结束调阅
    endMontor() {
      //没有记录的时候不能结束调阅
      if (!this.taskData?.coreMonitoringTaskRegistrationMonitorVOList||this.taskData?.coreMonitoringTaskRegistrationMonitorVOList?.length == 0) {
        Dialog({ message: '该调阅没有记录不能进行结束操作!' })
        return
      }

      let startDate = JSON.parse(JSON.stringify(this.taskData.taskStartTime))

      startDate = Date.parse(new Date(startDate))
      let endDate = Date.parse(new Date())
      if (endDate - startDate <= 3600000) {
        Dialog({ message: '该调阅未满一个小时请确认' })
        // 未满一小时不能结束调阅
      } else {
        this.$refs.scandialog.visible = true

        startDate = new Date(startDate)
      }
    },
    //文件上传
    resultImg(img) {
      let obj = base64ToBlob(img.base)
      let formData = new FormData()

      obj.name = '调阅.jpg'
      formData.append('file', base64ToBlob(img.base))

      upload(formData, 'image')
        .then(res => {
          console.log(process.env.NODE_ENV)
          /*上传成功*/
          let imgUrl = process.env.NODE_ENV === 'development' ? res.data.url : window.origin + res.data.url
          this.photoHandler(imgUrl)

          // this.$emit("imgUrl", res.data.url);
        })
        .catch(err => {
          /*上传失败*/
        })
    },
    //上传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) {
          Toast.success('扫描成功')
          setTimeout(() => {
            
            //结束调阅
            this.endHandler()
          }, 2000);
        }
      })
    },
    endHandler() {
      getEndInfo({
        id: this.taskData.id,
        taskId: this.$route.params.id.split('_')[0]
      }).then(res => {
        this.$router.push('/monitoringCall')
      })
    },
    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;
    padding-bottom: 0px;
  }
  .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>