index.vue

<template>
  <el-row class="home-box" :gutter="10">
    <el-col :span="3" class="ht100 tree-left">
      <div  class="tree-box">
				<div class="tree-title">视频设备</div>
				<div class=""></div>
        <div class="">
           <el-input class="search-input"
              prefix-icon="el-icon-search"
              placeholder="请输入内容"
              v-model="searchInfo"
              >
            </el-input>
        </div>
        <ul class="tasklist">
          <li v-for="(item,index) in taskdata" :key="index" @click="selecttask(item,index)">
           <span :class="{'task-lsit':true,'runningtask':item.status == 'Running', 'stoptask':item.status != 'Running'}" >
              <i :class="{'el-icon-fanxin-yiyunhangrenwuliebiao':item.status == 'Running',' el-icon-fanxin-task-pause':item.status != 'Running', 'icon':true}"></i>
              <span class="task-title">{{item.task_name}}</span>
          </span>
            <ol v-if="index == subindex">
							<li @click.stop='subTasksClick(subTask)' class="subtask" :title='subTask.subtask_name' v-for="subTask in subTasks" :key="subTask.subtask_id" :class="[{ subtaskActive: subTask.subtask_id == currentSubtaskId},{disabledColor:subTask.running_status!='Running'}]" :data-subtask='subTask.subtask_id' :id='subTask.vchan.vdev_unid+","+subTask.vchan.vchan_refid'>
							<i class="el-icon-fanxin-yuandian icon"></i>	{{subTask.subtask_name?subTask.subtask_name:subTask.name}}
							</li>
						</ol>
          </li>
        </ul>
      </div>
    </el-col>
    <el-col :span="15" class="ht100">
      <div class="video-box">
        <div class="play-box">
          <videoplay ref="videoplay" :playurl="playurl"></videoplay>
        </div>
        <div class="">
          <setting :taskid="taskID" ref="setting" :subtaskid="currentSubtaskId" :subtaskdata="subtaskdata"  :playurl="playurl"></setting>
        </div>
      </div>
    </el-col>
    <div>
      <InfoDialog  ref="displayInfo"></InfoDialog>
    </div>
    <el-col :span="6" class="ht100">
      <div class="show-box">
        <eventtab ref="event" ></eventtab>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import videoplay from '../public/videoPlay'
import InfoDialog from '../public/infodialog'
import setting from './setting'
import eventtab from './eventTab'
export default {
    components:{
      videoplay,
      InfoDialog,
      setting,
      eventtab
    },
    data() {
      return {
        searchInfo:'',
        taskdata: [],
        subtaskdata:[],
        subTasks:[],
        subindex:-1,
        playurl:'',
        taskID:'',
        currentSubtaskId:'',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        timer:null,
        searchstate:null
      };
    },
    methods: {
      selecttask(data,index){
        this.subTasks = []
        this.subindex = index;
         this.$api.task.getSubTask(data.task_id).then(res => {
          this.subTasks = res.list_data
          this.taskID = data.task_id
        })
      },
      subTasksClick(vdata){
        this.$store.commit('setocxstate',1)
        this.currentSubtaskId = vdata.subtask_id;
        this.subtaskdata =  vdata
        this.$refs.setting.getTaskParams()
        if(vdata.running_status!='Running') {
          this.$refs.displayInfo.showInfo('该任务没有运行，无法获取分析视频和抓拍信息')
          return
        }
        this.pushSteam(vdata);
        this.$refs.event.dataInit(this.currentSubtaskId,vdata.task_type);
      },
      getTask(data){
        let that = this;
        this.$api.task.getTask({
            task_name: this.searchInfo,
        }).then(res => {
          that.taskdata = res.list_data
          console.log(res)
        })
      },
      //发送推流请求
      pushSteam(vdata){
        this.$api.task.getStream(this.dev_unid,vdata.vchan.vchan_id).then(m => {
          console.log(m)
           if (m.ecode) {
              this.$message({
                message: '发送推流请求失败：' + m.enote,
                type: 'error'
              });
           } else {
            console.log('请求推送分析流成功', JSON.stringify(m));
						setTimeout(() => {
							this.getPlayUrl();
						}, 500);
           }
        })
      },
      getPlayUrl: function() {
        this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => {
          this.playurl = res
          if(this.playurl.rtsp_url) {
            this.$message({
              message: '获取播放地址成功，请耐心等待视频加载',
              type: 'success'
            });
            setTimeout(()=> {
              this.$refs.videoplay.videoPlay()
            }, 2000)
          } else {
             this.$message({
              message: '获取rtsp播放地址失败!请重试!',
              type: 'error'
            });
            setTimeout(() => {
              alert('获取rtsp播放地址失败!请重试!');
            }, 0);
          }
        });
			},
      getVchansIsSending(){
        this.axios.get(this.API.task.getstream()).then(res => {

        })
      },
     debounce(fn, wait) {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            fn
          }, wait);
      },
    },
    watch: {
      searchInfo(val){
        this.debounce(this.getTask(),800)
      }
    },
    created() {
      this.getTask()
    },
  };
</script>
<style lang="stylus" scoped>
.home-box{
  height calc(100% - 60px)
  width 100%
  margin 2px auto
  color  #fff
  overflow hidden
	padding 10px
}
.tree-box{
  border-radius 2px
  height calc(100% - 0px)
  overflow hidden
	background #fff
}
.tree-title{
	height 30px
	line-height 30px
	padding-left 30px
	font-size 14px
	background #3BB7FF
}
.tree-box:hover{
  overflow-y auto
}
.tree-left{
}
.video-box,.show-box{
  height calc(100% - 0px)
  overflow hidden
	background #fff
}
.show-box {
  overflow hidden
	padding 10px
}
.show-box:hover{
  overflow-y auto
}
.play-box{
  height 70%
  background black
  margin-bottom 10px
}

.ht100{
  height 100%
}
.search-input{
  border-radius 1px
  width 90%
  margin 10px
  .search-btn{
    background rgba(0,0,0,.3)
    border-radius 0
    text-align center
  }
}
.vido-ifram{
  height 100%
  width 100%
  border 0
}
.task-lsit{
  display inline-block
  cursor pointer
  padding 10px 0
  .icon {
    padding-left 10px
  }
}
.runningtask{
    // color rgba(1, 206, 184, 0.56);
    color #999697;
  }
.stoptask{
    color #999697
    .icon {
      font-size 22px
      margin-left -2px
  }
  }
.task-title{
  padding-left 10px
}
.tasklist{
  padding-left 10px;
  width 100%
  overflow hidden
}
.subtask{
  margin-bottom 5px
  width 15vw
  height 30px
  padding-left 30px
  line-height 30px
  font-size 14px
  color #666666
  // width calc(100% - 30px);
  overflow hidden
  cursor pointer
  .icon{
    font-size 10px
    padding-right 2px
    transform scale(.6)
    color #01ce82
  }
}
.subtaskActive {
  // background #0c3b87
}
</style>