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">
            <!-- //主机列表组件 -->
            <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="getHostHandlerA"
            ></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" @input="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 {
      endNum: false, //判断是否能结束调阅
      taskData: {},
      hostList: [], //主机列表
      activeNames: []
    }
  },
  components: {
    scandialog,

    passage,
    NavBar,
    Dialog,
    Icon,
    Picker,
    Col,
    Row,
    MonitoingList
  },

  created() {
    this.init(1)
  },
  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)
          }
        }
      })
    },
    getHostHandlerA(num) {
      // this.getHostHandler()
      this.init(num)
    },
    getHostHandler(num = 0) {
      // num//判断是不是第一次初始化
      console.log(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, '////')
          }
        }
      })
    },
    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))

        startDate = Date.parse(new Date(startDate))
        let endDate = Date.parse(new Date())
        if (endDate - startDate) {
          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
    },
    //文件上传
    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() {
      getEndInfo({
        id: this.taskData.id,
        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>