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;
            this.getPlayUrl();
          }
        });
    },
    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();
  },
  mounted() {
    
  }
};
</script>

<style lang="scss" scoped>
.home-box {
  height: calc(100% - 60px);
  width: 100%;
  margin: 2px auto;
  @include font-colr(whate_colr);
  overflow: hidden;
  min-height: 700px;
  padding: 10px;
}

.tree-box {
  border-radius: 2px;
  height: calc(100% - 0px);
  overflow: hidden;
  @include background_color(treeboxbg);
}

.tree-title {
  height: 30px;
  line-height: 30px;
  padding-left: 30px;
  font-size: 14px;
  @include background_color(taskshipintitlebg);
}

.tree-box:hover {
  overflow-y: auto;
}

.tree-left {
}

.video-box,
.show-box {
  height: calc(100% - 0px);
  overflow: hidden;
}

.show-box {
  overflow: hidden;
  padding: 10px;
  @include background_color(treeboxbg);
}

.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, 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);
  @include font-colr(runtask_color);

}

.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;
  @include font-colr(sbtask_color);
  // width calc(100% - 30px);
  overflow: hidden;
  cursor: pointer;

  .icon {
    font-size: 10px;
    padding-right: 2px;
    transform: scale(0.6);
    color: #01ce82;
  }
}

.disabledColor {
  color: #c0c0c0 !important;
}

.subtaskActive {
  position: relative;
  color: #333;
  padding-right:10px;
}

.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>