ISMS-Visualization-BJGD-TKT/src/views/basePage/panels/IntelligentVideo/index.vue

<template>
  <div class="page_container">
    <base-title title="激光云台" />
    <div class="page_content">
      <!-- 上半部分 -->
      <div class="video_window window1">
        <video-window :windowData="topData" />
      </div>
      <!-- 下半部分 -->
      <div class="video_window window2" v-if="bottomData.length">
        <video-window :windowData="bottomData" />
      </div>
      <!-- <video-image-window :cameraData="videoData" :cameraId="videoData.id" /> -->
    </div>
  </div>
</template>

<script>
import { divide } from "lodash-es";
import BaseTitle from "../BaseTitle.vue";
import VideoWindow from "./videoWindow.vue";
import { mapGetters } from "vuex";
export default {
  name: "IntelligentVideo",
  components: { BaseTitle, VideoWindow },
  data() {
    return {
      videoData: {
        id: "593102253968072704",
        name: "吴圩站",
        type: "wxz",
        ptzEnable: true,
        tags: { ndTag: "ND", gqTag: "GQ" },
      },
      curStation: {},
      stationList: [
        //初始化泄漏报警骨架
        {
          id: "1",
          name: "贵阳作业区",
          children: [
            {
              id: "101",
              name: "贵阳站",
              children: [
                {
                  id: "1",
                  name: "云台1",
                  ndTag: "ND",
                },
                {
                  id: "2",
                  name: "云台2",
                  ndTag: "ND",
                },
                {
                  id: "3",
                  name: "云台3",
                  ndTag: "ND",
                },
              ],
            },
            {
              id: "102",
              name: "白云站",
              children: [
                {
                  id: "4",
                  name: "云台1",
                  ndTag: "ND",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          name: "都匀作业区",
          children: [
            {
              id: "201",
              name: "都匀站",
              children: [
                {
                  id: "20101",
                  name: "云台1",
                },
              ],
            },
            {
              id: "202",
              name: "独山首站",
              children: [
                {
                  id: "20201",
                  name: "云台1",
                },
                {
                  id: "20202",
                  name: "云台2",
                },
              ],
            },
            {
              id: "203",
              name: "凯口站",
              children: [
                {
                  id: "20301",
                  name: "云台1",
                },
              ],
            },
            {
              id: "204",
              name: "云雾首站",
              children: [
                {
                  id: "20401",
                  name: "云台1",
                },
              ],
            },
          ],
        },
      ],
      list: [],
      dId: "",
    };
  },
  computed: {
    ...mapGetters(["departmentId"]),
    topData() {
      let arr = [];
      let leng = this.curStation?.children?.length || 0;
      if (leng === 0) {
        arr = [];
      }
      // 一个的时候只显示上半部分，下半隐藏
      // 两个的时候，上下都显示
      else if (leng <= 2) {
        arr = [this.curStation.children[0]];
      }
      // 大于2个的时候，上面左右结构，下面显示其余
      else {
        arr = [this.curStation.children[0], this.curStation.children[1]];
      }
      return arr;
    },
    bottomData() {
      let arr = [];
      let leng = this.curStation?.children?.length || 0;
      if (leng <= 1) {
        // 一个的时候只显示上半部分，下半隐藏
        arr = [];
      }
      // 两个的时候，上下各显示一个
      else if (leng == 2) {
        arr = [this.curStation.children[1]];
      }
      // 大于两个，上面显示两个，下面显示其余
      else {
        arr = this.curStation.children.slice(2);
      }
      return arr;
    },
  },
  created() {
    this.init();
  },
  watch: {
    departmentId(newVal) {
      // console.log("部门id信息", newVal, this.list);
      this.dId = newVal;
      if (this.dId === "") {
        this.init();
      } else {
        setTimeout(() => {
          for (let i = 0; i < this.list[0].children.length; i++) {
            const e = this.list[0].children[i];
            if (e.departmentId === this.dId) {
              this.stationList[0].children = [this.list[0].children[i]];
            }
          }
          this.curStation = this.getCurStation("1");
        }, 200);
      }
      // console.log("场站云台列表", this.stationList);
    },
  },
  methods: {
    init() {
      this.list = GY_JGYT_CONFIG;
      if (this.list.length > 0) {
        this.stationList = [
          {
            id: this.list[0].id,
            name: this.list[0].name,
            children: [this.list[0].children[0]],
          },
        ];
      }
      this.curStation = this.getCurStation("1");
      // console.log("curStation", this.curStation);
    },
    getCurStation(id) {
      let obj = {};
      const find = (arr) => {
        arr.forEach((item) => {
          if (item.id === id) {
            obj.id = item.id;
            obj.name = item.name;
            obj.type = item.type;
            obj.ptzEnable = item.ptzEnable;
            obj.tags = item.tags;
            obj.children = item.children;
          } else if (item.children && item.children.length) {
            find(item.children);
          }
        });
      };

      find(this.stationList);
      return obj;
    },
  },
};
</script>

<style lang="less" scoped>
.page_container {
  width: 400px;
  z-index: 2;
  .page_content {
    width: 100%;

    .video_window {
      width: 100%;
      height: 268px;
      margin-top: 10px;
    }
  }
}
</style>