qdtlui/src/views/qdtl/video/video.vue

<template>
  <div class="app-container">
    <headerdiv ref="headerDiv" :currentindexP="currentindexNew" :menuNameP="itemName"></headerdiv>
    <div style="display: inline-flex">
      <div class="leftTree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-top: 1rem">
        </el-input>
        <div style="height: 83vh">
          <el-scrollbar style="height: 110%">
            <el-tree :data="treedata" :load="loadNode" lazy :expand-on-click-node="false" node-key="id"
              :default-expanded-keys="expandedKeys" :default-checked-keys="[5]" :props="defaultProps"
              :filter-node-method="filterNode" ref="tree" @node-click="treeChange"
              style="background-color: #04283c; color: #c5d0d4">
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div style="width: 82vw;margin-left: 1vw;">
        <div style="padding-top:1vh">
          <el-form ref="form" :inline="true" :model="form" label-width="100px">
            <!-- <el-form-item label="所属航段" prop="航段">
                            <el-select v-model="form.hangdaoName" placeholder="请选择" @change="initVideoData()">
                                <el-option v-for="item in hangdaoList" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item label="宫格数量" prop="航段">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option v-for="item in typeList" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div style="width: 100%;" v-if="form.type == '单视频'">
          <liveqing videoElementId="videoId1" style="width: 80vw;height: 80vh;"></liveqing>
          <!-- </div> -->
        </div>
        <div style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;" v-if="form.type == '四宫格'">
          <!-- <div v-for="item in 9"> -->
          <!-- <video v-for="item in 4" style="width: 49%;margin-left:0.5%" :src="videoList[item - 1]" controls="controls"
            :autoplay="false" muted="muted" :ref="`videoref${item}`"></video> -->
          <!-- </div> -->
          <div v-for="item in 4"
            style="width: 40vw;height: 40vh;margin-left: 0.5vw;margin-top: 0.5vh;position: relative;">
            <div
              style="cursor: pointer;color: #ffffff;font-size: 1.5rem;top:10px;right: 10px; position: absolute;z-index: 999;"
              @click="deleteVideo(item)">
              <i class="el-icon-close"></i>
            </div>
            <LivePlayer v-if="displayList[item - 1]" :videoUrl="videoList[item - 1]" fluent autoplay live stretch
              style="width:100%;height:100%;">
            </LivePlayer>
          </div>
          <!-- <div style="width: 35vw;margin-left:1vw" class='video_content' v-for="(item, index) in 4">
            <liveqing :videoElementId="videoId+index" style="width:40vw;height: 40vh;"></liveqing>
          </div> -->
        </div>
        <div style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;" v-if="form.type == '九宫格'">
          <div v-for="item in 9"
            style="width: 26vw;height: 26vh;margin-left: 0.5vw;margin-top: 0.5vh;position: relative;">
            <div
              style="cursor: pointer;color: #ffffff;font-size: 1.5rem;top:10px;right: 10px; position: absolute;z-index: 999;"
              @click="deleteVideo(item)">
              <i class="el-icon-close"></i>
            </div>
            <LivePlayer v-if="displayList[item - 1]" :videoUrl="videoList[item - 1]" fluent autoplay live stretch
              style="width:100%;height:100%;">
            </LivePlayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listVideo, queryCamera, editCamera } from "@/api/qdtl/video";
import { getSinglePawns } from "@/api/qdtl/data";

import { httpRequest } from "@/api/data/http";
import videodiv from "@/components/Videoplayer/index.vue";
import headerdiv from "@/components/HeaderDiv/index.vue";

import LivePlayer from '@liveqing/liveplayer' // vue2

import liveqing from "@/components/livePlayer.vue";

let player;
export default {
  data() {
    return {
      typeList: ['单视频', '四宫格', '九宫格'],
      displayList: [true, true, true, true, true, true, true, true, true],
      videoList: [

      ],
      form: { type: '四宫格' },
      timer: null,
      itemName: "视频监测",
      videoMap: new Map(),
      nameObj: {
        channel: "",
        name: "",
      },
      videoplaysrc: "",
      treedata: [
        {
          id: 1,
          label: "监控视频",
          children: [],
        },
        {
          id: 100,
          label: "单兵",
          children: [],
        },
      ],
      dbdata: [],
      videoData: [],
      videoCodeList: [],
      isvideo: true,
      // videoMap:new Map(),
      expandedKeys: [],
      videoIndex: 1,
      currentindexNew: 2,
      remarkName: false,
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      filterText: "",
      ccode: "",
      jsonArry: [],
      creamData: [],
      pointIdArry: [],
      regionIndexCode: "",
      queryParams: {
        url: "http://2.90.220.252:9017/artemis-web/debug",
        params:
          '{"httpMethod":"POST","path":"/api/resource/v1/regions","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}',
      },
      videoParams: {
        url: "http://2.90.220.252:9017/artemis-web/debug",
        //  params:'{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+this.regionIndexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
      },
      hlsParams: {
        url: "http://2.90.220.252:9017/artemis-web/debug",
      }
    };
  },
  components: {
    videodiv,
    headerdiv,
    liveqing,
    LivePlayer
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    videoData(val) {
      this.treedata[0].children = val;
    },
    dbdata(val) {
      this.treedata[1].children = val;
    },
  },
  created() {
    this.getvideo();
    var that = this
    this.timer = setInterval(() => {
      that.initVideoList();
    }, 60000);
  },

  mounted() {
    this.queryCamera();

    getSinglePawns().then((res) => {
      this.dbdata = res.data.map((res) => {
        return { id: res.code, label: res.name, playaddr: res.playaddr };
      });
    });
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
    // window.videosize = "1x1";
    // closevideo();
  },
  methods: {
    selectVideo(item) {
    },
    addVideo() {
      this.videoList.push('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
    },
    openName(node, data) {
      if (this.nameObj.name.length > 0) {
        this.nameObj.channel = data.id;
        editCamera(this.nameObj).then((response) => {
        });
      }
    },
    editCamera() {
      editCamera().then((data) => { });
    },
    queryCamera() {
      queryCamera().then((data) => {
        this.videoMap = data.data;
      });
    },
    loadNode(node, resolve) {
      // if (node.level > 4) return resolve([]);
      if (node.level === 0) {
        return resolve(this.treedata);
      }
      if (node.id === 1 && node.level === 1) {
        return resolve(this.treedata[0].children);
      }

      if (node.id != 1 && node.level === 1) {
        return resolve(this.treedata[1].children);
      }
      if (node.id === 1 && node.level === 1) {
        var childrens = [];
        for (var index in this.videoData) {
          if (node.data.id == this.jsonArry[index].parentIndexCode) {
            childrens.push(this.jsonArry[index]);
          }
        }
        return resolve(childrens);
      }
      if (node.level < 4) {
        var childrens = [];
        for (var index in this.jsonArry) {
          if (node.data.id == this.jsonArry[index].parentIndexCode) {
            childrens.push(this.jsonArry[index]);
          }
        }
        return resolve(childrens);
      }

      if (node.level >= 4) {
        this.videoParams.params =
          '{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "' +
          node.data.indexCode +
          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
        var childrens = [];
        for (var index in this.jsonArry) {
          if (node.data.id == this.jsonArry[index].parentIndexCode) {
            //console.log(childerns);
            childrens.push(this.jsonArry[index]);
          }
        }
        httpRequest(this.videoParams).then((data) => {
          var json = JSON.parse(data.data);
          // console.log(json);
          for (var index in json.data.list) {
            // console.log();\
            var obj = json.data.list[index];
            obj.id = obj.cameraIndexCode;
            // remarkName
            if (this.videoMap[obj.id]) {
              obj.label = this.videoMap[obj.id];
            } else {
              obj.label = obj.name;
            }
            obj.data = obj;
            obj.lnglat = obj.longitude + "," + obj.latitude;
            childrens.push(obj);
          }
          resolve(childrens);
        });
      }

      //return resolve([]);
    },
    getvideo() {
      httpRequest(this.queryParams).then((response) => {
        try {
          //  console.log(response);
          var json = JSON.parse(response.data);
          for (var index in json.data.list) {
            // obj = json.data.list[index]
            // obj.id = obj.indexCode;
            // obj.label = obj.name;
            // obj.data = obj;
            var obj = json.data.list[index];
            obj.id = obj.indexCode;
            obj.label = obj.name;
            obj.data = obj;
            this.jsonArry.push(obj);
            if (obj.parentIndexCode == -1) {
              this.videoData.push(obj);
              this.expandedKeys.push(obj.id);
            }
            // this.expandedKeys.push(obj.id);
            if (this.videoData.length > 0) {
              if (obj.parentIndexCode == this.videoData[0].id) {
                this.expandedKeys.push(obj.id);
              }
            }
          }
        } catch (error) { }
      });
    },
    getList() {
      listVideo().then((response) => {
        this.videoData = response.data;
        for (var index in this.videoData) {
          var obj = this.videoData[index];
          obj.label = obj.areaName;
          obj.children = [];
          for (var i in obj.monitors) {
            var monitor = obj.monitors[i];
            monitor.data = monitor;
            monitor.label = monitor.name;
            obj.children.push(monitor);
          }
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    deleteVideo(item) {
      this.videoCodeList.splice(item - 1,1);
      this.videoList.splice(item - 1, 1);
    },
    initVideoList() {
      this.videoList = [];
      for (var index in this.videoCodeList) {
        console.log(this.videoCodeList)
        this.hlsParams.params =
          '{"httpMethod":"POST","path":"/api/video/v1/cameras/previewURLs","headers":{},"query":{},"parameter":{},"body":{"streamType":0,"protocol":"hls","transmode":0,"expand":"transcode=0","cameraIndexCode": "' +
          this.videoCodeList[index] +
          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
        httpRequest(this.hlsParams).then((data) => {
          var videoData = JSON.parse(data.data);
          var url = videoData.data.url
          url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
          console.log(url)
          // console.log(window.location.host+window.location.port)
          this.videoList.push(url);
        })
      }
    },
    treeChange(data, node) {
      var arry = this.$refs.tree.getCheckedNodes();
      if (data.cameraIndexCode != null) {
        this.hlsParams.params =
          '{"httpMethod":"POST","path":"/api/video/v1/cameras/previewURLs","headers":{},"query":{},"parameter":{},"body":{"streamType":0,"protocol":"hls","transmode":0,"expand":"transcode=0","cameraIndexCode": "' +
          data.cameraIndexCode +
          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
        httpRequest(this.hlsParams).then((res) => {
          var videoData = JSON.parse(res.data);
          var dataList = [];
          if (this.form.type == '四宫格') {
            if (this.videoList.length < 4) {
              var url = 'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'
              // var url = videoData.data.url
              // this.videoCodeList.push(data.cameraIndexCode);
              // console.log(this.videoCodeList)
              // url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
              // // console.log(window.location.host+window.location.port)
              // console.log(url)
              this.videoList.push(url);
            } else {
              this.$message('摄像机已满');
            }
          } else if (this.form.type == '九宫格') {
            if (this.videoList.length < 9) {
              // var url = 'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'
              var url = videoData.data.url
              this.videoCodeList.push(data.cameraIndexCode);
              url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
              // console.log(window.location.host+window.location.port)
              this.videoList.push(url);
            } else {
              this.$message('摄像机已满');
            }
          }
        })
      }

      // if (data.cameraIndexCode != null) {
      //   console.log(data.cameraIndexCode);
      //   this.isvideo = true;
      //   window.startPreview(data.cameraIndexCode, -1);
      // } else {
      //   if (data.playaddr != null) {
      //     this.isvideo = false;
      //     this.videoplaysrc = "/webLive.html?url=" + data.playaddr;
      //   }
      // }
    },
  },
};
</script>

<style>
.leftTree {
  /* float:left; */
  width: 16vw;
  background-color: #04283c;
  padding: 10px;
  padding-top: 0;
  min-height: 95vh;
  z-index: 1001;
}

.app-container {
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.selectVideo {
  border-style: solid;
  border-color: #98bf21;
}
</style>