feat: sort camera tree

zhangzengfei

2020-09-04 b23a2a35a14b010a3b97a1b61a02ec179dfab924

 src/pages/cameraVideo/index/Video.vue

@@ -1,53 +1,56 @@
<template>
  <div style="height: 100%;">
  <div style="width:100%; height: 100%;">
    <div class="monitoring-right" ref="videoRight">
      <div class="monitoring-video" ref="monitorVideo">
        <div class="monitoring-video-guid">
          <span
            :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
            @click="setGuid(1)"
          ></span>
          <span
            :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
            @click="setGuid(2)"
          ></span>
          <span
            :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
            @click="setGuid(3)"
          ></span>
          <el-tooltip
            v-show="true"
            :content="`${track ? '关闭追踪': '开启追踪'}`"
            placement="bottom"
            popper-class="atooltip"
          >
      <div class="main-top">
        <div class="monitoring-video" ref="monitorVideo">
          <div class="monitoring-video-guid">
            <span
              :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
              @click="handleTrack"
              :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
              @click="setGuid(1)"
            ></span>
          </el-tooltip>
            <span
              :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
              @click="setGuid(2)"
            ></span>
            <span
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip
              v-show="true"
              :content="`${track ? '关闭追踪': '开启追踪'}`"
              placement="bottom"
              popper-class="atooltip"
            >
              <span
                :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
                @click="handleTrack"
              ></span>
            </el-tooltip>
          </div>
          <div class="fixedRatioBox">
            <div
              :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
              v-if="visibilityState"
            >
              <video-item
                v-for="(item, index) in TreeDataPool.videoArr"
                :key="index"
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :class="[
                  TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
                  guid === 1 ? 'onlyActiveItem' : ''
                ]"
                @click="videoItemClick(index)"
              ></video-item>
            </div>
          </div>
        </div>
        <div
          :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
          style="width: 100%; height: calc(100% - 52px);"
          v-if="visibilityState"
        >
          <video-item
            v-for="(item, index) in TreeDataPool.videoArr"
            :key="index"
            :videoGuid="guid"
            :videoIndex="index"
            :videoItem="item"
            :class="[
              TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
              guid === 1 ? 'onlyActiveItem' : ''
            ]"
            @click="videoItemClick(index)"
          ></video-item>
        <div class="monitoring-task" ref="monitorTask">
          <video-task ref="taskview" @addToBase="toAdd"></video-task>
        </div>
      </div>
      <div class="monitoring-task" ref="monitorTask">
        <video-task ref="taskview" @addToBase="toAdd"></video-task>
      </div>
      <div class="monitoring-photo">
        <video-photo ref="photoview" @addToBase="toAdd"></video-photo>
@@ -163,8 +166,9 @@
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.getRightWidth);
      this.getRightWidth();
      window.addEventListener("resize", this.resizeMonitorTask);
      //this.getRightWidth();
      this.resizeMonitorTask();
    })
    this.getCenter();
    this.blackAngWhite();
@@ -186,6 +190,7 @@
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      console.log('newArry',newArry)
      const cameras = this.filterNodes(newArry);
      this.getActiveIndex();
      this.$refs.taskview.showTasks(cameras);
@@ -421,6 +426,14 @@
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight(){
      let h = this.$refs.monitorVideo.offsetHeight;
      this.$refs.monitorTask.style.height = h+'px';
    },
    resizeMonitorTask(){
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      // console.log("w是：", w,this.$refs.monitorVideo.offsetWidth);
@@ -554,20 +567,23 @@
.monitoring-right {
  width: 100%;
  height: 100%;
  float: right;
  min-width: 981px;
  //float: right;
  box-sizing: border-box;
  padding: 10px;
  background-color: #e9ebf2;
  .main-top{
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }
  .monitoring-video {
    width: 70.5%;
    //min-width: 800px;
    min-width: 740px;
    max-width: 1208px;
    height: 75%;
    float: left;
    padding: 0px, 10px 10px 10px;
    height: 98%;
    //float: left;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
    .activeItem {
@@ -606,15 +622,22 @@
        cursor: pointer;
      }
    }
    .fixedRatioBox{
      padding-top: 56.3%;
      box-sizing: border-box;
      position: relative;
      >div{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
    }
  }
  .monitoring-task {
    // @media screen and (max-width: 1700px){

    // }
    width: calc(29.5% - 10px);
    //width: calc(29.5% - 10px);
    width: calc(34% - 10px);
    //width: auto;
    // width: 23%;
    height: 73%;
    background-color: #fff;
    float: left;
    margin: 0px 0px 0px 10px;
@@ -627,15 +650,91 @@

  .monitoring-photo {
    width: 100%;
    height: calc(25% + 10px);
    height: calc(25% + 32px);
    background-color: #fff;
    float: left;
    padding: 10px;
    margin-top: -10px;
    //margin-top: -10px;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
  }

}
.titlebar{
  height: 10px!important;
  background: #fff!important;
  .button{
    position: absolute;
    font-size: 25px!important;
    right: 10px;
    top: 10px;
    z-index: 3;
  }
}
.addToBase {
    width: 98%;
    height: 430px;
    position: relative;
    .topLabel {
      margin-top: 20px;
      height: 40px;
      border-bottom: 1px solid #eee;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      font-weight: 600;
      line-height: 1rem;
      color: #222222;
      text-align: left;
      margin-left: 15px;
    }
    .items {
      width: 100%;
      height: auto;
      max-height: 35%;
      overflow-y: auto;
      margin: 20px 0px;
      .lable {
        width: 15%;
        margin-top: 10px;
        float: left;
        //font-family: PingFangSC-Medium;
        font-size: 14px;
        font-weight: 600;
      }
      .baseList {
        width: 85%;
        height: 100%;
        float: left;

        // display: flex;
        // justify-content: flex-start;
        .base {
          //flex-wrap: wrap;
          width: calc(33% - 10px);
          padding: 0px 5px;
          line-height: 30px;
          float: left;
          text-align: left;
          font-size: 12px !important;
          .el-checkbox {
            width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .el-checkbox__label {
              display: inline !important;
            }
          }
        }
      }
    }
    .buttons {
      position: absolute;
      right: 0px;
      bottom: 15px;
    }
  }
</style>