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

<template>
  <div class="monitor">
  <div class="title">
    <Card title="总平面图" style="width:390%">
      <div style="width:326px;height:170px;position: absolute;">
        <img style="width:310px;height:170px;margin-top: 20px;" src="~@/assets/images/zjsj/monitor.jpg" alt="">

      </div>
    </Card>
  </div>
    <Card title="监控设备列表" style="width: 16% !important;margin: 13% 0px 0 -100px; ">
      <!-- 左边列表 -->
      <div class="videoLeft">
        <div class="videoList" v-if="dataType == 1">
          <!-- <el-table-column type="index" label="序号"></el-table-column> -->

          <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
        for(let i = 1; i <= this.dataList.length;i++) {
           this.dataList[i-1].videoName = i+"."+this.dataList[i-1].videoName
        }
 
        this.selectList = [this.dataList[0],this.dataList[1],this.dataList[2],this.dataList[3]];
        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;
  .topImg{
    position: absolute;
  }
  .textSize {
    font-size: 15px !important;
  }
  .videoLeft {
    width: 20%;
    height: 100%;
    .videoList {
      margin-top: 20px;
      margin-left: 2px !important;
    }
  }
  .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;
    margin-left: 15px;
    color: #fff;
  }
  ::v-deep .el-tree-node {
    // color: #fff;
    height: 30px;
    margin-top: 15px;
    width: 300px !important;
    background: url('~@/assets/images/zjsj/zjsj_bgi.png') no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-tree-node__content {
    font-size: 15px;
  }
  ::v-deep .el-tree-node__children {
    width: 300px;
    color: #fff !important;
  }
  ::v-deep .el-tree-node__content {
    color:#fff  !important;
    width: 300px !important;

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

  }
  ::v-deep .el-tree__empty-text {
    width: 200px;
    position: absolute;
    left: 250%;
    top: 600%;
    transform: translate(-50%, -50%);
    color: #737996;
    font-size: 18px;
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content{
    background-color:none
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content {
  /*设置选中的样式 */
  height: 30px;
  background-color: #66D4D9  !important;
}
::v-deep .el-tree-node__content:hover {
  /*设置鼠标飘过的颜色 */
  background: #66D4D9  !important;
  color: #fff;
  height: 30px;

}
 
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   /*current选中的样式 */
   height: 30px;

   color: #fff;
    font-weight: bold;
  background-color: #66D4D9  !important;
} 
}
</style>