暂存

ZZJ

2021-12-20 832896ccaf8ac6a8ca31394e55577f064bc5eacf

 src/pages/cameraAccess/index/VideoManage.vue

@@ -1,300 +1,319 @@
<template>
  <div class="s-video-manage">
    <el-tabs
      class="video-tab"
      ref="topTab"
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="firstLabeName"
        name="camera-info"
        v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('cameraAccess:cameraInfo')"
      >
        <camera-info ref="cameraInfo" />
      </el-tab-pane>
      <el-tab-pane
        :label="firstLabeName"
        name="camera-info"
        v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('dataStack:cameraInfo')"
      >
        <data-stack-info ref="dataStackInfo" />
      </el-tab-pane>
      <el-tab-pane
        label="独立场景"
        name="separate-rule"
        v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('cameraAccess: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('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('cameraAccess:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
      >
        <linkage-rule ref="linkRule" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

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

import bus from "@/plugin/bus";
//import TreeDataPool from "@/Pool/TreeData";

export default {
  components: {
    CameraInfo,
    DataStackInfo,
    SeparateRules,
    LinkageRule
  },
  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" ? "摄像机信息" : "数据栈信息"
    }
  },
  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) {
        if (this.TreeDataPool.treeActiveName !== 'dataStack') {
          return
        }
        this.$nextTick(() => {
          if (this.activeName == "camera-info") {
            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('cameraAccess:cameraInfo')) {
        this.activeName = "camera-info"
      } else if (this.isShow('cameraAccess:selfRule')) {
        this.activeName = "separate-rule"
      } else if (this.isShow('cameraAccess:linkRule')) {
        this.activeName = "linkage-rule"
      }
    } else {
      if (this.isShow('dataStack:cameraInfo')) {
        this.activeName = "camera-info"
      } else if (this.isShow('dataStack:selfRule')) {
        this.activeName = "separate-rule"
      }
    }

    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.PollData.statisticTaskInfo();
    this.intervalTimer = setInterval(() => {
      _this.PollData.statisticTaskInfo();
    }, 10000)
  },
  methods: {
    isShow(authority) {
      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
    },
    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%;
  min-width: 1599px;
  height: 100%;
  float: left;
  box-sizing: border-box;
  .el-tabs--border-card {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
  }
  // .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%;
    &.video-tab {
      & > .el-tabs__header {
        //position: fixed;
        //position: absolute;
        //top:0;
        //left: 0;
        height: 54px;
        overflow-y: hidden;
      }
    }
    .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;
      }
    }
  }
  .video-tab > .el-tabs__content {
    width: 100%;
    //margin-top: 52px;
    height: calc(100% - 36px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 0;
  }
  .video-tab > .el-tabs__content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  .el-tab-pane {
    width: 100%;
    //height: 100%;
  }
}
</style>
<template>

  <div class="s-video-manage">

    <el-tabs

      class="video-tab"

      ref="topTab"

      v-model="activeName"

      type="border-card"

      @tab-click="handleClick"

    >

      <el-tab-pane

        :label="firstLabeName"

        name="camera-info"

        v-if="

          this.TreeDataPool.treeActiveName == 'camera' &&

          isShow('cameraAccess:cameraInfo')

        "

      >

        <camera-info ref="cameraInfo" />

      </el-tab-pane>

      <el-tab-pane

        :label="firstLabeName"

        name="camera-info"

        v-if="

          this.TreeDataPool.treeActiveName == 'dataStack' &&

          isShow('dataStack:cameraInfo')

        "

      >

        <data-stack-info ref="dataStackInfo" />

      </el-tab-pane>

      <el-tab-pane

        label="独立场景"

        name="separate-rule"

        v-if="

          this.TreeDataPool.treeActiveName == 'camera' &&

          isShow('cameraAccess: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('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('cameraAccess:linkRule') &&

          this.TreeDataPool.treeActiveName == 'camera'

        "

      >

        <linkage-rule ref="linkRule" />

      </el-tab-pane>

    </el-tabs>

  </div>

</template>



<script>

import CameraInfo from "../components/CameraInfo";

import DataStackInfo from "../components/DataStackInfo";

import SeparateRules from "../components/SeparateRules";

import LinkageRule from "../components/LinkageRule";

// import fTemplate from "@/components/common/fTemplate";

// import localSeparate from "@/components/camera/localSeparate";



import bus from "@/plugin/bus";

//import TreeDataPool from "@/Pool/TreeData";



export default {

  components: {

    CameraInfo,

    DataStackInfo,

    SeparateRules,

    LinkageRule,

  },

  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"

        ? "摄像机信息"

        : "数据栈信息";

    },

  },

  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) {

        if (this.TreeDataPool.treeActiveName !== "dataStack") {

          return;

        }

        this.$nextTick(() => {

          if (this.activeName == "camera-info") {

            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("cameraAccess:cameraInfo")) {

        this.activeName = "camera-info";

      } else if (this.isShow("cameraAccess:selfRule")) {

        this.activeName = "separate-rule";

      } else if (this.isShow("cameraAccess:linkRule")) {

        this.activeName = "linkage-rule";

      }

    } else {

      if (this.isShow("dataStack:cameraInfo")) {

        this.activeName = "camera-info";

      } else if (this.isShow("dataStack:selfRule")) {

        this.activeName = "separate-rule";

      }

    }



    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.PollData.statisticTaskInfo();

    this.intervalTimer = setInterval(() => {

      _this.PollData.statisticTaskInfo();

    }, 10000);

  },

  methods: {

    isShow(authority) {

      return (

        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1

      );

    },

    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) {

      console.log(this.TreeDataPool);

      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%;

  min-width: 1599px;

  height: 100%;

  float: left;

  box-sizing: border-box;

  .el-tabs--border-card {

    box-shadow: none;

    -webkit-box-shadow: none;

    border: none;

  }

  // .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%;

    &.video-tab {

      & > .el-tabs__header {

        //position: fixed;

        //position: absolute;

        //top:0;

        //left: 0;

        height: 54px;

        overflow-y: hidden;

      }

    }

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

      }

    }

  }

  .video-tab > .el-tabs__content {

    width: 100%;

    //margin-top: 52px;

    height: calc(100% - 36px);

    box-sizing: border-box;

    overflow-y: auto;

    padding: 0;

  }

  .video-tab > .el-tabs__content::-webkit-scrollbar {

    /*滚动条整体样式*/

    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 6px;

  }

  .el-tab-pane {

    width: 100%;

    //height: 100%;

  }

}

</style>