调整摄像机接入页面

zhangzengfei

2020-07-30 d6bf6c38fe15510aac8e56569ca0450fb8656c89

 src/pages/cameraAccess/index/App.vue

@@ -1,307 +1,116 @@
<template>
  <div class="s-video-manage">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane
        :label="firstLabeName"
        name="camera-info"
        v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:info')"
      >
        <camera-info ref="cameraInfo" />
      </el-tab-pane>
      <el-tab-pane
        :label="firstLabeName"
        name="camera-info"
        v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:stackInfo')"
      >
        <data-stack-info ref="dataStackInfo" />
      </el-tab-pane>
      <el-tab-pane
        label="独立场景"
        name="separate-rule"
        v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:selfRule')"
      >
        <separate-rules ref="sepRule" />
        <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
      </el-tab-pane>
      <el-tab-pane
        label="独立场景"
        name="separate-rule"
        v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:selfRule')"
      >
        <separate-rules ref="sepRule" />
        <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
      </el-tab-pane>
      <el-tab-pane
        label="联动场景"
        name="linkage-rule"
        v-if="(isShow('VIDEOCAMERA:camera:linkRule') || isShow('VIDEOCAMERA:dataStack:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
      >
        <linkage-rule ref="linkRule" />
      </el-tab-pane>
      <el-tab-pane
        label="算力配置"
        name="poll-setting"
        v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:resourceCalc')"
      >
        <poll-setting ref="pullSetting" />
      </el-tab-pane>
      <el-tab-pane
        label="算力配置"
        name="poll-setting"
        v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:resourceCalc')"
      >
        <poll-setting ref="pullSetting" />
      </el-tab-pane>
    </el-tabs>
  <div class="column">
    <div class="column-left" :style="`height:${screenHeight}px;`">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right" :style="`height:${screenHeight}px;`">
      <right-side />
    </div>
  </div>
</template>

<script>
import CameraInfo from "@/components/camera/CameraInfo";
import DataStackInfo from "@/components/camera/DataStackInfo"
import SeparateRules from "@/components/camera/SeparateRules";
import LinkageRule from "@/components/camera/LinkageRule";
import PollSetting from "@/components/camera/PollSetting";
// import fTemplate from "@/components/common/fTemplate";
// import localSeparate from "@/components/camera/localSeparate";

//import bus from "@/main";
import TreeDataPool from "@/Pool/TreeData";
import LeftNav from "@/components/LeftNav";
// import CameraVideo from "./components/Video.vue";
import RightSide from "./VideoManage"

export default {
  name: "SearchPage",
  components: {
    CameraInfo,
    DataStackInfo,
    SeparateRules,
    LinkageRule,
    PollSetting
    LeftNav,
    RightSide
  },
  data() {
    return {
      activeName: "camera-info",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      intervalTimer: null
    };
  },
  computed: {
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    },
    firstLabeName() {
      return this.TreeDataPool.treeActiveName === "camera" ? "摄像机信息" : "数据栈信息"
      screenHeight: 0,
    }
  },
  watch: {
    // 数据栈不显示联动规则，防止在选中联动规则tab中切换到数据栈
    "TreeDataPool.treeActiveName": function (val) {
      if (val === "dataStack" && this.activeName === "linkage-rule") {
        this.activeName = "camera-info";
      }
    },
    "TreeDataPool.selectedNode": function (node) {
      if (this.activeName == "camera-info") {
        if (this.TreeDataPool.treeActiveName == 'camera') {
          this.$refs.cameraInfo.selectCamera(node);
        }
      } else if (this.activeName === "separate-rule") {
        this.$refs.sepRule.Camera = {}
        this.$refs.sepRule.initCameraData(node.id);
      }
    },
    "TreeDataPool.selectedNodes": {
      handler(nodes) {
        if (this.activeName == "linkage-rule") {
          this.$refs.linkRule.initCameraData();
        }
      },
      deep: true
    },
    "DataStackPool.selectedDir": {
      handler(node, oldNode) {
        console.log(this.activeName)
        console.log(node, '勾选本地视频')
        if (this.TreeDataPool.treeActiveName !== 'dataStack') {
          return
        }
        this.$nextTick(() => {
          if (this.activeName == "camera-info") {
            console.log("dataStackInfo.selectDir(node)")
            this.$refs.dataStackInfo.selectDir(node);
          } else if (this.activeName == "separate-rule" && node.length !== 0) {
            this.$refs.sepRule.initCameraData(node.id);
          }
        })
      },
      deep: true
    }
  },
  created() {
    if (this.TreeDataPool.treeActiveName == 'camera') {
      if (this.isShow('VIDEOCAMERA:camera:info')) {
        this.activeName = "camera-info"
      } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
        this.activeName = "separate-rule"
      } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
        this.activeName = "linkage-rule"
      } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
        this.activeName = "poll-setting"
      }
    } else {
      if (this.isShow('VIDEOCAMERA:camera:info')) {
        this.activeName = "camera-info"
      } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
        this.activeName = "separate-rule"
      } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
        this.activeName = "linkage-rule"
      } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
        this.activeName = "poll-setting"
      }
    }
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = false;
    this.TreeDataPool.selectedNode = "";
    this.selectedNodes = [];
    this.VideoManageData.init();
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
    //this.TreeDataPool.treeActiveName = "camera";
  },
  mounted() {
    this.$nextTick(() => {
    //   bus.$on("addCameraOnTree", node => {
    //     this.handAddDevice(node);
    //   });
    //   bus.$on("addDirOnTree", node => {
    //     this.handAddDIr(node);
    //   });
    //   this.TreeDataPool.clean();
    });

    let _this = this
    this.intervalTimer = setInterval(() => {
      _this.PollData.statisticTaskInfo();
    }, 10000)
    this.screenHeight = document.documentElement.clientHeight - 20;
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else if ("videoCamera:pollSetting" === authority) {
        return true;
      } else {
        return false;
      }
    },
    handAddDevice(node) {
      let _this = this;
      setTimeout(() => {
        _this.$refs.cameraInfo.addDevice(node);
        _this.activeName = "camera-info";
      }, 100);
    },
    handAddDIr(node) {
      let _this = this;
      setTimeout(() => {
        _this.$refs.dataStackInfo.addDir(node);
        _this.activeName = "camera-info";
      }, 100);
    },
    handleClick(tab, event) {
      this.TreeDataPool.multiple = tab.name === "linkage-rule";
      if (tab.name === "camera-info") {
        if (this.TreeDataPool.treeActiveName == 'camera') {
          this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
        } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
          this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
        }
      } else if (tab.name === "separate-rule") {
        if (this.TreeDataPool.treeActiveName == 'camera') {
          this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
        } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
          this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
        }
      } else if (this.activeName == "linkage-rule") {
        this.$refs.linkRule.initCameraData();
      } else if (this.activeName == "poll-setting") {
        this.$nextTick(() => {
          this.$refs.pullSetting.initLineChart();
        })
      }
    }
  }
};
</script>
<style lang="scss">
.s-video-manage {
  width: 100%;

<style lang="scss" scoped>
.column {
  overflow: hidden;
}
.column-left {
  height: inherit;
  background-color: #fff;
  position: relative;
  float: left;
}
.column-right {
  height: 100%;
  float: right;
  box-sizing: border-box;
  padding: 16px;
  background-color: #e9ebf2;
  .el-tabs--border-card {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
  background-color: #eee;
  box-sizing: border-box;
  overflow: hidden;
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  padding: 16px;
  overflow-x: hidden;
}
.resize-bar {
  width: 310px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  opacity: 0;
  overflow: scroll;
  max-width: 500px; //设定最大拉伸长度
  min-width: 310px; //设定最小宽度
}
/* 拖拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #eee;
  border-left: 1px solid #bbb;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  // .s-video-manage-breadcrumb {
  //   height: 5%;
  //   -webkit-box-sizing: border-box;
  //   border: 1px solid #e4e7ed;
  //   -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
  //   box-shadow: #e4e7ed 0px 0px 9px inset;
  //   border-radius: 5px;
  // }
  .el-tabs--border-card {
    height: 100%;
    width: 100%;
    .el-tabs__header {
      .is-active {
        color: #3d68e1 !important;
      }
      .el-tabs__item:not(.is-disabled):hover {
        color: #3d68e1 !important;
      }
      height: 52px;
      border-bottom: none;
      background-color: #f8f9fb;
      .el-tabs__nav-wrap,
      .el-tabs__nav-scroll,
      .el-tabs__nav,
      .el-tabs__item {
        height: calc(100% + 1px);
      }
      .el-tabs__item {
        line-height: 52px;
        width: 144px;
        border-right-color: transparent;
        border-left-color: transparent;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #222222;
      }
    }
  }
  .el-tabs__content {
    width: 100%;
    height: calc(100% - 52px);
    box-sizing: border-box;
    padding: 13px 38px;
  }
  .el-tab-pane {
    width: 100%;
    height: 100%;
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    // background: url(./resize.svg);
    background-size: 100% 100%;
  }
}
</style>