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)"
            v-if="item.status == 'Running'"
          >
            <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="el-icon-caret-bottom" style="display:inline-block"></span> -->
              <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"
                v-show="subTask.enableStatus != 1"
                :class="[
                  { subtaskActive: subTask.subtask_id == currentSubtaskId },
                  { disabledColor: subTask.enableStatus == 5 }
                ]"
                :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"
            :vchan="vchandata"
          ></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: [],
      vchandata: {},
      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) {
      console.log(vdata);
      //删除中的任务不能点击
      if (vdata.enableStatus == 5) {
        return;
      }
      this.$store.commit("setocxstate", 1);
      this.currentSubtaskId = vdata.subtask_id;
      this.subtaskdata = vdata;
      this.$refs.setting.TaskParams(vdata.subtask_id);
      if (vdata.running_status != "Running") {
        this.$message({
          message: "该任务没有运行，无法获取分析视频和抓拍信息",
          type: "error"
        });
        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) {
      let data = {
        send_stream: true,
        task_id: this.currentSubtaskId,
        is_analyse: true
      };
      this.$api.task
        .getStream(this.dev_unid, vdata.vchan.vchan_refid, data)
        .then(m => {
          if (m.ecode) {
            this.$message({
              message: "发送推流请求失败：" + m.enote,
              type: "error"
            });
          } else {
            this.vchandata = vdata.vchan;
            setTimeout(() => {
              this.getPlayUrl();
            }, 2000);
          }
        });
    },
    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);
          console.info("视频播放地址：", this.playurl.rtsp_url);
        } else {
          this.$message({
            message: "获取rtsp播放地址失败!请重试!",
            type: "error"
          });
        }
      });
    },
    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
  min-height 700px
	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
  font-size 14px
  color rgba(102, 102, 102, 1)
  margin-top 15px
  .icon {
    padding-left 10px
  }
}
.runningtask{
    // color rgba(1, 206, 184, 0.56);
    color rgba(102, 102, 102, 1)
  }
.stoptask{
     color rgba(102, 102, 102, 1)
    .icon {
      font-size 22px
      margin-left -2px
  }
  }
.task-title{
  padding-left 10px
  width 100%
  display inline-block
  overflow hidden
}
.tasklist{
  padding-left 10px;
  width 100%
  overflow hidden
}
.subtask{
  margin-bottom 5px
  width 15vw
  height 30px
  margin-left 15px
  line-height 30px
  font-size 13px
  padding-left 8px
  color #666666
  // width calc(100% - 30px);
  overflow hidden
  cursor pointer
  .icon{
    font-size 10px
    padding-right 2px
    transform scale(.6)
    color #01ce82
  }
}
.disabledColor{
  color #c0c0c0!important;
  text-decoration: line-through;
  cursor text
}
.subtaskActive {
  position relative
  color #333
}
.subtaskActive::before{
  position absolute
  content ""
  top 11px
  left 0px
  display inline-block
  height 8px
  width 8px
  background rgba(42, 225, 47, 0.74)
  border-radius 10px
}
</style>