coys

src/api/toConsult.js

@@ -41,6 +41,14 @@ export function registrationList(query) {
     params: query
   })
 }
+//获取任务主机已经通道
+export function getSysDeviceByTaskId(query) {
+  return request({
+    url: '/system/device/getSysDeviceByTaskId/'+query.taskId,
+    method: 'get',
+    // params: query
+  })
+}
 //根据字典类型查询字典值接口
 export function getDict(dictType) {
   return request({
@@ -91,9 +99,9 @@ export function updateInfo(data) {
 //获取卡片查询详情
 export function getEditInfo(query) {
   return request({
-    url: `/core/info/${query}`,
+    url: `/core/info/getInfo`,
     method: 'get',
-    
+    params:query
   })
 }
 //结束调阅

src/views/menu/monitoringCall/components/addInfo.vue

@@ -12,7 +12,16 @@
           <div class="text">调阅开始时间:{{ taskData?.taskStartTime }}</div>
         </van-col>
       </van-row>
-
+     
+      
+      <!-- <van-row>
+          <van-col class="vancol" span="6">{{ item.project | proJectListFilter(this_) }}</van-col>
+          <van-col class="vancol" span="18"
+            ><span :style="{ color: item.situation == 1 ? '#ffa05c' : '#12b533' }">{{
+              item.situation | dictFilter(this_)
+            }}</span></van-col
+          >
+        </van-row> -->
       <!-- 主机选择 -->
       <van-row>
         <van-col span="24">
@@ -161,6 +170,18 @@ import {
 import { mapGetters } from 'vuex'
 
 export default {
+  props:{
+    //主机ID
+    hostId:{
+      type:String,
+      default:''
+    },
+    //通道
+    videoChannel:{
+      type:String,
+      default:''
+    }
+  },
   data() {
     return {
       disabled: '', //是否禁用

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

@@ -2,29 +2,42 @@
   <div>
     <NavBar />
     <div class="bigBox">
-      <van-row>
-        <van-col span="24">
-          <div class="textTitle">任务名称:{{ taskData?.taskName }}</div>
-        </van-col>
-        <van-col span="24">
+      <van-collapse v-model="activeNames">
+        <div class="titleBox">
+
+          <div class="textTitle">{{ taskData?.taskName }}</div>
           <div class="text">调阅开始时间:{{ taskData?.taskStartTime }}</div>
-        </van-col>
-      </van-row>
-      <div v-if="taskData?.coreMonitoringTaskRegistrationMonitorVOList">
-        <!-- 调阅列表 -->
-        <div class="topBox" v-for="item in taskData.coreMonitoringTaskRegistrationMonitorVOList" :key="item.id">
-          <!-- //主机列表组件 -->
-          <MonitoingList :list="item" :taskStatus="taskData.taskStatus"></MonitoingList>
         </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-row>
           <van-col span="24">
             <van-button type="info" @click="addInfoHandler">添加调阅记录</van-button>
           </van-col>
-        </van-row>
+        </van-row> -->
         <van-row>
           <van-col span="24">
             <van-button type="info" @click="endMontor">结束调阅</van-button>
@@ -38,21 +51,27 @@
 </template>
 <script>
 import NavBar from '@/components/NavBar'
-
+//通道列表
+import passage from './passage.vue'
 // 主机列表组件
 import MonitoingList from './monitoringList.vue'
+
 import { Col, Row, Dialog, Toast, Icon, Picker } from 'vant'
-import { registrationList, getEndInfo, login, registration } from '@/api/toConsult.js'
+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: {}
+      taskData: {},
+      hostList:[],//主机列表
+      activeNames: ['1']
     }
   },
   components: {
     scandialog,
+    
+    passage,
     NavBar,
     Dialog,
     Icon,
@@ -64,7 +83,6 @@ export default {
 
   created() {
     this.init()
-    console.log(this)
   },
   methods: {
     //项目初始化获取数据
@@ -73,6 +91,21 @@ export default {
         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
         }
       })
     },
@@ -83,12 +116,11 @@ export default {
     //结束调阅
     endMontor() {
       //没有记录的时候不能结束调阅
-      if(this.taskData?.coreMonitoringTaskRegistrationMonitorVOList.length==0){
+      if (this.taskData?.coreMonitoringTaskRegistrationMonitorVOList.length == 0) {
         Dialog({ message: '该调阅没有记录不能进行结束操作!' })
-        return 
+        return
       }
 
-
       let startDate = JSON.parse(JSON.stringify(this.taskData.taskStartTime))
 
       startDate = Date.parse(new Date(startDate))
@@ -97,9 +129,9 @@ export default {
         Dialog({ message: '该调阅未满一个小时请确认' })
         //未满一小时不能结束调阅
       } else {
-      this.$refs.scandialog.visible = true
+        this.$refs.scandialog.visible = true
 
-      startDate = new Date(startDate)
+        startDate = new Date(startDate)
       }
     },
     //文件上传
@@ -152,28 +184,45 @@ export default {
       }).then(res => {
         this.$router.push('/monitoringCall')
       })
-    }
+    },
+    
   }
 }
 </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: 40px;
+    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;
+    // margin-bottom: 10px;
+    // margin: 20px;
+    color: black;
   }
   .bottomClass {
     position: fixed;

src/views/menu/monitoringCall/components/monitoringList.vue

@@ -1,27 +1,36 @@
 <template>
   <div>
     <div class="topBox">
-      <div>
-        <van-button class="buttoncls" size="mini" type="info" v-if="taskStatus == '2'" @click="editHandler(1)">详情</van-button>
+      <!-- <div>
+        <van-button class="buttoncls" size="mini" type="info" v-if="taskStatus == '2'" @click="editHandler(1)"
+          >详情</van-button
+        >
         <img class="img" v-else @click="editHandler(0)" src="../../../../assets/img/icon/edit-square.png" alt="" />
-      </div>
-      <div class="title">监控主机:{{ list?.hostName }}</div>
+      </div> -->
+      <div class="title" style="padding-top: 10px; margin-top: 0px">监控主机:{{ list?.hostName }}</div>
       <div class="title">视频通道:{{ list?.videoChannelName }}</div>
       <van-row class="List titleList">
-        <van-col class="vancol" span="6">项目</van-col>
-        <van-col class="vancol" span="6">检查情况</van-col>
-        <van-col class="vancol" span="12">异常说明</van-col>
+        <van-col class="vancol" span="6">类型</van-col>
+        <van-col class="vancol" span="18">状态</van-col>
       </van-row>
-      <van-row class="Listmain" v-for="item in list.coreMonitoringTaskMonitorInfoList" :key="item.id">
-        <div class="itemMain" >{{ item.project | proJectListFilter(this_) }}</div>
+      <div v-for="item in list.coreMonitoringTaskMonitorInfoList" :key="item.id">
+        <van-row>
+          <van-col class="vancol" span="6">{{ item.project | proJectListFilter(this_) }}</van-col>
+          <van-col class="vancol" span="18"
+            ><span :style="{ color: item.situation == 1 ? '#ffa05c' : '#12b533' }">{{
+              item.situation | dictFilter(this_)
+            }}</span></van-col
+          >
+        </van-row>
+        <van-row v-if="item.situation == 1">
 
-        <div   class="itemMain"
-          ><span :style="{ color: item.situation == 1 ? '#d97b7e' : '#12b533' }">{{
-            item.situation | dictFilter(this_)
-          }}</span></div
-        >
-        <div  class="info" >{{ item.abnormalIllustrate }}</div>
-      </van-row>
+          <van-col class="abnorText" span="6">异常原因:</van-col>
+          <van-col class="abnorText" span="18">{{ item.abnormalIllustrate }}</van-col>
+        </van-row>
+       
+      </div>
+
+     
     </div>
   </div>
 </template>
@@ -84,17 +93,17 @@ export default {
 
   methods: {
     //编辑项目
-    editHandler(isEdit) {
-      let path=''
-      if(isEdit===1){
-        path='info'
-      }else{
-        path='update'
-      }
-      // isEdit 1查看 0编辑
-      console.log();
-      this.$router.push(`/${path}/` + this.$route.params.id.split('_')[0] + '_' + this.list.id + '_edit'+'_'+isEdit)
-    }
+    // editHandler(isEdit) {
+    //   let path = ''
+    //   if (isEdit === 1) {
+    //     path = 'info'
+    //   } else {
+    //     path = 'update'
+    //   }
+    //   // isEdit 1查看 0编辑
+    //   console.log()
+    //   this.$router.push(`/${path}/` + this.$route.params.id.split('_')[0] + '_' + this.list.id + '_edit' + '_' + isEdit)
+    // }
   }
 }
 </script>
@@ -104,63 +113,44 @@ export default {
   background-color: #fff;
   width: 100%;
   border-radius: 10px;
-  padding: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
 
   font-size: 26px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .title {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 .van-row {
-  text-align: center;
+  
+  padding-left: 10px;
 }
 
 .List {
-  border: 1px solid #ccc;
-  background-color: #fff;
+  background-color: #e8e8e8;
   margin-bottom: -1px;
   text-align: left;
   height: 100%;
 }
-.Listmain{
-
-  border: 1px solid #ccc;
-  background-color: #fff;
-  margin-bottom: -1px;
-  text-align: left;
-  align-items: center;
-  display: flex;
-  height: 100%;
- 
-  .itemMain{
-    width: 25%;
-    min-height: 136px;
-    line-height: 136px;
-    height: 100%;
-    text-align: center;
-    border-left: 1px solid #ccc;
-  }
-  .info{
-    flex: 1;
-    min-height: 136px;
-    height: 100%;
-    border-left: 1px solid #ccc;
-  }
-}
 .titleList {
   font-size: 26px;
-  text-align: center;
+  text-align: left;
   font-weight: bold;
 }
 .vancol {
   height: 100%;
-  // min-height: 60px;
+
   line-height: 60px;
-  
-  border-left: 1px solid #ccc;
-  padding-left: 5px;
+
+  padding-left: 10px;
+}
+.abnorText{
+  font-size: 20px;
+  color: #ccc;
+  padding-left: 10px;
+  word-wrap:break-word;
 }
 .img {
   width: 50px;
@@ -168,10 +158,11 @@ export default {
   position: absolute;
   right: 20px;
 }
-.buttoncls{
+.buttoncls {
   width: 100px;
   height: 50px;
   position: absolute;
   right: 20px;
+  top: 5%;
 }
 </style>

src/views/menu/monitoringCall/components/passage.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <van-row v-if="list && list.length > 0">
+      <van-col
+        span="5"
+        @click="passageEdit(item.videoId)"
+        :class="'passageIcon' + ' ' + classlist[item.type]"
+        v-for="item in list"
+        :key="item.name"
+      >
+        <span class="pors success" v-if="item.type == '1'">
+          <van-icon name="success" size="14" color="#fff" />
+        </span>
+        <span class="pors error" v-if="item.type == '2'">
+          <van-icon name="fail" size="14" color="#fff" />
+        </span>
+        {{ item.videoName }}
+      </van-col>
+    </van-row>
+    <!-- 添加或编辑调阅任务弹框 -->
+    <!-- @resetList="" -->
+    <taskInfo ref="taskInfo" @resetList="resetList"></taskInfo>
+  </div>
+</template>
+<script>
+//调阅弹框组件
+import taskInfo from './taskInfo.vue'
+export default {
+  name: 'SocAppPassage',
+  components: {
+    taskInfo
+  },
+  props: {
+    //通道列表
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    //任务ID
+    taskId: {
+      type: String,
+      default: ''
+    },
+    //主机ID
+    hostId:{
+        type:String,
+        default:''
+    }
+  },
+  data() {
+    return {
+      classlist: ['cls0', 'cls1', 'cls2']
+    }
+  },
+
+  mounted() {},
+
+  methods: {
+    passageEdit(videoId) {
+      //添加或者编辑调阅
+
+      this.$refs.taskInfo.init(this.taskId,videoId,this.hostId)
+    },
+    resetList(){
+        this.$emit('resetList')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.passageIcon {
+  position: relative;
+  text-align: center;
+  margin: 10px 10px 0px 10px;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+.cls0 {
+  background-color: #e6e6e6;
+  border: 1px solid #fff;
+}
+.cls1 {
+  background-color: #fff;
+  border: 1px solid #3cbda9;
+  color: #3cbda9;
+}
+.cls2 {
+  background-color: #fff;
+  // background-color: #ff6b00;
+  border: 1px solid #ff6b00;
+  color: #ff6b00;
+}
+.pors {
+  position: absolute;
+  border-radius: 50%;
+  width: 36px;
+  text-align: center;
+  height: 36px;
+  top: -20px;
+  right: -12px;
+  // transform: translate();
+}
+.success {
+  background-color: #3cbda9;
+}
+.error {
+  background-color: #ff6b00;
+}
+// 'cls0', 'cls1', 'cls2']
+</style>

src/views/menu/monitoringCall/components/taskInfo.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <van-overlay :show="show">
+      <div class="wrapper">
+        <div class="block">
+          <!-- 标题信息 -->
+          <van-row>
+            <van-col span="24">
+              <div class="textTitle">调阅记录</div>
+            </van-col>
+            <van-col span="24">
+              <div class="text">{{videoChannelName}}</div>
+            </van-col>
+          </van-row>
+          <!-- //主体内容 -->
+          <div class="mainBox">
+            <van-row class="titleList">
+              <van-col class="itemCol" span="10"> 类型</van-col>
+              <van-col class="itemCol" span="7"> 正常</van-col>
+              <van-col class="itemCol" span="7"> 异常</van-col>
+            </van-row>
+            <div class="mainItem">
+              <van-row class="rowItem" v-for="item in dataList" :key="item.id">
+                <van-col class="itemCls" span="10"
+                  ><van-checkbox v-model="item.isChecked" :disabled="disabled" icon-size="16px" shape="square">{{
+                    item.dictLabel
+                  }}</van-checkbox>
+                </van-col>
+                <van-radio-group v-model="item.situation" @change="checkHandler($event, item)">
+                  <van-col class="itemCls" span="7" v-for="itemDict in dictList" :key="itemDict.dictValue">
+                    <van-radio icon-size="16px" shape="square" :name="itemDict.dictValue">{{
+                      itemDict.dictLabel
+                    }}</van-radio></van-col
+                  >
+                </van-radio-group>
+              
+                <van-col span="24" v-if="item.situation == '1'">
+                  <van-field
+                    v-model="item.abnormalIllustrate"
+                    rows="2"
+                    required
+                    autosize
+                    label=""
+                    type="textarea"
+                    maxlength="50"
+                    placeholder="请输入异常原因"
+                    show-word-limit
+                    :rules="[{ required: true, message: '内容不能为空' }]"
+                /></van-col>
+              </van-row>
+            </div>
+            <!-- 底部按钮 -->
+            <div>
+              <van-row>
+                <van-col span="12">
+                  <van-button class="btn" size="small" @click="show = false" type="default">取消</van-button></van-col
+                >
+                <van-col span="12">
+                  <van-button class="btn" size="small" type="info" v-if="!disabled" @click="submitHadnler">{{
+                    '确定'
+                  }}</van-button></van-col
+                >
+              </van-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+<script>
+import {
+
+  updateInfo,
+  getEditInfo,
+
+} from '@/api/toConsult.js'
+import {  Toast } from 'vant'
+
+export default {
+  name: 'SocAppTaskInfo',
+
+  data() {
+    return {
+      taskId: '', //任务ID
+      show: false,
+      host: '',
+      hostId: '',
+      videoChannelName: '',
+      videoChannel: '',
+      taskRegistrationId: '',
+      id: '',
+      falg: false,
+      checked: '',
+      message: '',
+      radio: '0',
+      dictList: [],
+      dataList: [] //列表
+    }
+  },
+  created() {
+    this.disabled = +this.$route.params.id.split('_')[3] ? true : false
+  },
+  mounted() {},
+
+  methods: {
+    //组件初始化
+    init(taskId, videoId, hostId) {
+      this.taskId = taskId
+      this.show = true
+      //获取调阅字典
+      this.getDictHandler('core_registration_project', res => {
+        this.dataList = JSON.parse(JSON.stringify(res))
+        this.dataList.forEach(item => {
+          this.$set(item, 'situation', '0') //异常情况初始化默认值
+          this.$set(item, 'isChecked', false) //选中初始值
+          this.$set(item, 'abnormalIllustrate', '') //情况说明初始化默认值
+          
+        })
+        //获取异常情况字典
+        this.getDictHandler('core_check_type', res => {
+          this.dictList = res
+          this.dictList.forEach(item => {
+            item.text = item.dictLabel
+            item.value = item.dictValue
+          })
+        })
+        this.getInfoHandler(taskId, videoId, hostId) //获取详情
+      })
+    },
+    //复选框选中变化
+    checkHandler(val, item) {
+      if (val&&item.situation=='0') {
+        item.abnormalIllustrate = ''
+      }
+    },
+    getInfoHandler(id, videoId, hostId) {
+      //获取卡片详情数据
+      getEditInfo({ taskId: id+'', videoId: videoId+'', hostId: hostId+'' }).then(res => {
+        let { data, msg, code } = res
+        if (code == 200) {
+          
+            this.dataList.forEach(item => {
+              data.coreMonitoringTaskMonitorInfoList.forEach(i => {
+                if (i.project === item.dictValue) {
+                  
+                  //查询赋值
+                  this.$set(item, 'isChecked', true)
+                  this.$set(item, 'situation', i.situation)
+                  this.$set(item, 'abnormalIllustrate', i.abnormalIllustrate)
+                  
+                }
+              })
+            })
+            console.log(this.dataList);
+          //赋值主机&通道名称
+          this.host = data.hostName
+          this.hostId = data.host
+          this.videoChannelName = data.videoChannelName
+          this.videoChannel = data.videoChannel
+          this.taskRegistrationId = data.registrationId
+          this.id = data.id
+            
+         
+        }
+      })
+    },
+
+    //表单提交前校验
+    beforSubmitV() {
+      this.falg = false
+
+      this.dataList.forEach(item => {
+        if (item.isChecked) {
+          if (item.situation == '1' && item.abnormalIllustrate == '') {
+            Toast(`${item.dictLabel}的异常情况说明不能为空!`)
+            this.falg = true
+          }
+        }
+      })
+    },
+    submitHadnler() {
+      if (this.falg) {
+        //校验不通过
+      } else {
+        let list = []
+
+        this.dataList.forEach(item => {
+          if (item.isChecked) {
+            item.project=item.dictValue
+            list.push(item)
+          }
+        })
+
+        //编辑提交
+        updateInfo({
+          host: this.hostId,
+          videoChannel: this.videoChannel,
+          taskRegistrationId: this.taskRegistrationId,
+          id: this.id||'',
+          coreMonitoringTaskMonitorInfoList: list
+        }).then(res => {
+          let { data, msg, code } = res
+          if (code == 200) {
+            Toast('编辑成功!')
+           this.show=false
+           this.$emit('resetList')
+          }
+          this.falg = false
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mainItem {
+  overflow: scroll;
+  height: 750px;
+}
+.rowItem {
+  margin-bottom: 30px;
+}
+.block {
+  width: 85vw;
+  height: 140vw;
+  background-color: #fff;
+  margin: auto;
+  position: absolute;
+  top: 7%;
+  left: 10%;
+  padding: 20px;
+}
+.textTitle {
+  font-size: 30px;
+  font-weight: bold;
+  padding: 20px;
+  color: black;
+  text-align: center;
+  padding-bottom: 0px;
+}
+
+.text {
+  text-align: center;
+  margin-top: 20px;
+  color: black;
+}
+.mainBox {
+  .titleList {
+    background-color: #e8e8e8;
+    margin-top: 20px;
+    font-size: 22px;
+    text-align: left;
+    font-weight: bold;
+    .itemCol {
+      padding-left: 10px;
+      color: black;
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}
+.itemCls {
+  padding-left: 10px;
+
+  height: 40px;
+  line-height: 40px;
+}
+.btn {
+  width: 90%;
+}
+</style>

src/views/menu/monitoringCall/index.vue

@@ -2,29 +2,8 @@
   <div>
     <NavBar />
     <van-row>
-      
       <van-col span="24">
         <org-tree v-model="cascaderValue" @change="getDataList"></org-tree>
-        <!-- <van-field
-          v-model="value1"
-          is-link
-          label-width="3em"
-          clearable
-          label="机构"
-          placeholder=""
-          @click="show = true"
-        />
-        <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false">
-          <van-cascader
-            v-model="cascaderValue"
-            title="组织机构"
-            :options="options"
-            @close="closeDialog"
-            @change="changeCascader"
-            @finish="onFinish"
-            :field-names="fieldNames"
-          />
-        </van-popup> -->
       </van-col>
     </van-row>
     <van-row>
@@ -74,37 +53,23 @@
     <!-- 调阅列表 -->
     <div class="bigbox">
       <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <!-- <van-cell :title="item.title"  v-for="item in taskList" :key="item.id" is-link :value="item.taskName" arrow-direction="down" /> -->
-        <van-panel :title="item.title" v-for="item in taskList" :key="item.id" class="card" status="状态">
-
-          <template #header>
-            <div class="titleClass">
-              <div class="title">
-                {{ item.taskName }} <span :class="monitor[item.status]">{{ item.status | statusFilter(this_) }}</span>
-              </div>
-              <div>
-                <van-button type="info" size="small" v-if="item.status == 0" @click="startMonitorHandler(item.id)"
-                  >开始调阅</van-button
-                >
-                <van-button
-                  class="bttons"
-                  size="small"
-                  v-else-if="item.status != 0 && item.status != 3"
-                  @click="lookInfoHandler(item.id, item.status)"
-                  ><van-icon name="arrow"
-                /></van-button>
-              </div>
-            </div>
-          </template>
-          <div class="mainItem">
-            <div>开始时间:</div>
-            <div class="date">{{ item.planStartTime }}</div>
-          </div>
-          <div class="mainItem">
-            <div>结束时间:</div>
-            <div class="date">{{ item.planEndTime }}</div>
-          </div>
-        </van-panel>
+        <van-cell-group>
+          <van-cell
+            :title="item.taskName"
+            v-for="item in taskList"
+            :key="item.id"
+            size="large"
+            :label="item.planStartTime+'~'+item.planEndTime"
+            is-link
+            @click="linkHandler(item.status,item.id)"
+          >
+            <template #title>
+              <span class="custom-title">{{ item.taskName }}</span>
+              <span :class="monitor[item.status]">{{ item.status | statusFilter(this_) }}</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+        
       </van-list>
     </div>
 
@@ -181,7 +146,7 @@ export default {
   },
   created() {
     this.init()
-   
+
     this.presentDate = this.presentDateCpd
   },
   computed: {
@@ -190,10 +155,19 @@ export default {
     }
   },
   mounted() {
-    this.cascaderValue=(JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID'))+'')
-    console.log(this.cascaderValue);
+    this.cascaderValue = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
+    console.log(this.cascaderValue)
   },
   methods: {
+    //单元格点击事件
+    linkHandler(status,id){
+      if(status==0){
+        this.startMonitorHandler(id)
+      }
+      if(status!=0&&status!=3){
+        this.lookInfoHandler(id,status)
+      }
+    },
     //机构变化
     getDataList(v) {
       this.cascaderValue = v
@@ -205,7 +179,7 @@ export default {
         this.pageNum = 2
       }
 
-      this.selectListAppHandler(1,() => {
+      this.selectListAppHandler(1, () => {
         this.loading = false
         this.pageNum++
       })
@@ -250,7 +224,7 @@ export default {
         if (code == 200) {
           if (type) {
             this.taskList.push(...rows)
-            if (rows.length == 0||rows.length <10) {
+            if (rows.length == 0 || rows.length < 10) {
               //已加载完全部数据
               this.finished = true
             }
@@ -284,7 +258,7 @@ export default {
       })
     },
     //扫描图片并上传到服务器和后端
-    photoHandler(img='',nfc='') {
+    photoHandler(img = '', nfc = '') {
       //上传到服务器
       //开始调阅上传
       let obj = {
@@ -323,8 +297,8 @@ export default {
         })
     },
     //上传NFC
-    getNFC(nfc){
-      this.photoHandler('',nfc)
+    getNFC(nfc) {
+      this.photoHandler('', nfc)
     },
     //关闭弹框事件
     closeDialog() {
@@ -406,51 +380,51 @@ export default {
     background-color: #fff;
   }
 }
+.custom-title{
+  font-weight: bold;
+}
+.van-cell__label{
+  font-size: 20px;
+}
 .monitor {
   color: #ed6a0c;
   padding-left: 10px;
   padding-right: 10px;
+ 
+  float: right;
   font-size: 20px;
-  bottom: 5%;
-  right: 2%;
-  position: absolute;
   // border-radius: 10px;
   // background-color: #8cb585;
 }
 .monitored {
   color: #1989fa;
- 
+
   padding-left: 10px;
   padding-right: 10px;
-  bottom: 5%;
-  right: 2%;
-
-  position: absolute;
+  float: right;
   font-size: 20px;
+  
   // border-radius: 10px;
   // background-color: #1989fa;
 }
 .monitoring {
-  color: #25da0b;
+  color: #7fd355;
   padding-left: 10px;
   padding-right: 10px;
-  bottom: 5%;
-  right: 2%;
-  position: absolute;
+  float: right;
   font-size: 20px;
   // border-radius: 10px;
   // background-color: #25da0b;
 }
 .waringtoring {
-  color: white;
+  color:  #e46962;
   padding-left: 10px;
   padding-right: 10px;
-  bottom: 5%;
-  right: 2%;
-  position: absolute;
+  float: right;
+  
   font-size: 20px;
-  border-radius: 10px;
-  background-color: #e46962;
+  // border-radius: 10px;
+  // background-color: #e46962;
 }
 .title {
   margin: 10px;
@@ -523,8 +497,11 @@ export default {
   box-sizing: border-box;
 }
 .bigbox {
-  height: calc(100vh - 380px);
+  height: calc(100vh - 400px);
   overflow: scroll;
+  margin-top: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
   background-color: #fff;
 }
 .card {
@@ -559,7 +536,7 @@ export default {
     text-decoration: underline;
   }
 }
-.bttons{
+.bttons {
   color: #1989fa;
   border: none;
 }

src/views/menu/training/index.vue

@@ -172,7 +172,7 @@ export default {
         num: 0
       }, // 缺席人员
       orgName: JSON.parse(sessionStorage.getItem('SET_USER_ORGNAME')) || '', //机构名称
-      cascaderValue: JSON.parse(sessionStorage.getItem('SET_USER_ORGID')) || '', //机构ID
+      cascaderValue: '', //机构ID
       show: false, //机构弹框显示隐藏
 
       fieldNames: {
@@ -237,6 +237,10 @@ export default {
     this.init()
     this.presentDate = this.presentDateCpd
   },
+  mounted() {
+    this.cascaderValue=(JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID'))+'')
+    console.log(this.cascaderValue);
+  },
   computed: {
     presentDateCpd() {
       return new Date(+newDateMonth().split('-')[0], +newDateMonth().split('-')[1] - 1)