zhgdyun/src/views/projectAdmin/fourEngin/monitor/index.vue

<template>
  <div class="monitor">
    <Card title="监控设备列表" style="width: 14%; font-size: 15px !important">
      <!-- 左边列表 -->
      <div class="videoLeft">
        <div class="videoList" v-if="dataType == 1">
          <!-- <vue-scroll>
              <ul v-if="devList.length > 0">
                <li @click="changeVideo(item)" v-for="(item, index) in devList" :key="index">
                  <img v-if="item.deviceType == 2" src="@/assets/images/icon-video2-white.png" />
                  <img v-else src="@/assets/images/icon-video-white.png" />
                  {{ item.videoName }}
                </li>
              </ul>
              <div class="placeholderBox" v-else>
                <img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
              </div>
            </vue-scroll> -->
          <el-tree
            :data="dataList"
            :props="defaultProps"
            @node-click="changeVideo"
          ></el-tree>
        </div>
        <div class="videoBox" v-else>
          <vue-scroll>
            <el-collapse v-model="activeNames" style="padding: 0 20px">
              <el-collapse-item
                :title="item.name"
                :name="index"
                v-for="(item, index) in devList"
                :key="index"
              >
                <ul v-if="item.list.length > 0">
                  <li
                    @click="changeVideo(data)"
                    v-for="(data, index2) in item.list"
                    :key="index2"
                  >
                    <img
                      v-if="data.deviceType == 2"
                      src="@/assets/images/icon-video2-white.png"
                    />
                    <img v-else src="@/assets/images/icon-video-white.png" />
                    {{ data.videoName }}
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </vue-scroll>
        </div>
      </div>
    </Card>

    <!-- 右边视频 -->
    <Card title="视频监控" style="width: 80%; margin-right: 40px">
      <div class="videoTight">
        <VideoModule
          class="playVideoBox"
          :type="'project'"
          :value="selectList"
          :displayBottomMod="false"
          :winNumBer="9"
          :autoplay="false"
          :showCaptrue="false"
          :showControl="false"
          :showPlayback="false"
          :xxx="7"
        ></VideoModule>
      </div>
    </Card>
  </div>
</template>

<script>
// import Left from "./left.vue";
// import Right from "./right.vue"
import {
  selectProjectVideoListApi,
  selectUserVideoListApi,
} from "@/assets/js/api/equipmentCenter/cameraList";
import Card from "../components/Card.vue";
import VideoModule from "@/components/videoModule/videoModule.vue";
export default {
  components: { Card, VideoModule },
  data() {
    return {
      devList: [],
      selectList: [],
      dataType: 1,
      activeNames: [0],
      screens: {},
      pluginType: "",
      current: -1,
      threeIndex: -1,
      currentTwo: -1,
      dataList: [],
      defaultProps: {
        children: "list",
        label: "videoName",
      },
    };
  },
  mounted() {
    // console.dir(window.parent)
    // console.log(window.parent.document.getElementById("myFrame"), 12312313)
    if (this.$store.state.userInfo.accountType != 6) {
      this.loadData();
    } else {
      this.loadData2();
    }
  },
  methods: {
    changeVideo(item) {
      console.log(item, "xxxxxxxxxx");
      this.selectList = [item];
      console.log("右边的值", this.selectList);
    },
    loadData() {
      selectProjectVideoListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.dataList=res.result.videoList
        console.log("视频的列表", res);
        this.dataType = res.result.type;
      });
    },
    loadData2() {
      selectUserVideoListApi({
        projectSn: this.$store.state.projectSn,
        userId: this.$store.state.userInfo.userId,
      }).then((res) => {
        var DATA = res.result.videoList;
        this.devList = DATA;
        this.dataType = res.result.type;
      });
    },
    showThree(a, b) {},
    next2(item) {
      //   this.secondId = item.id;
      //   this.loadRigthtList();
    },
    next(index, $event, data, type) {
      console.log("data", data);
      this.currentTwo = -1;
      //
      if (this.current != index) {
        this.threeIndex = -1;
      }

      this.threeData = [];
      this.type = type;
      this.parentid1 = data.id;
      if (this.current == index) {
        this.current = -1;
      } else {
        this.current = index;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.monitor {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .textSize {
    font-size: 15px !important;
  }
  .videoLeft {
    width: 20%;
    height: 100%;
    .videoList {
      margin-top: 20px;
      margin-left: 20px;
    }
  }
  .videoTight {
    width: 99%;
    height: 90%;
    margin-left: 9px;
    margin-top: 1.5%;
  }

  ::v-deep .el-tree-node__expand-icon {
    position: absolute;
    right: -600%;
    // color: red;
    font-size: 16px;
  }
  ::v-deep .el-tree-node__label {
    font-size: 16px;
  }
  ::v-deep .el-tree-node {
    // color: #fff;
    width: 200px;
  }
  ::v-deep .el-tree-node__content {
    font-size: 15px;
  }
  ::v-deep .el-tree-node__children {
    width: 300px;
    color: #59bdc1 !important;
  }
  ::v-deep .el-tree-node__content {
    color:#59bdc1  !important;

    // color: #fff !important;
    font-size: 20px;

  }
 
}
</style>