|
|
@@ -0,0 +1,332 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <headerdiv ref="headerDiv" :currentindexP = currentindexNew :menuNameP= itemName></headerdiv>
|
|
|
+ <div style="display: inline-flex">
|
|
|
+ <div class='leftTree'>
|
|
|
+ <!-- <el-form :model="nameObj" ref="nameObj" :inline="true" label-width="68px">
|
|
|
+ <el-form-item label="名称" prop="name"> -->
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="nameObj.name"
|
|
|
+ placeholder="请输入重命名名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ /> -->
|
|
|
+ <!-- </el-form-item>
|
|
|
+ </el-form> -->
|
|
|
+ <el-input
|
|
|
+ placeholder="输入关键字进行过滤"
|
|
|
+ v-model="filterText"
|
|
|
+ style="margin-top:1rem">
|
|
|
+ </el-input>
|
|
|
+ <div style="height:83vh;">
|
|
|
+ <el-scrollbar style="height:110%;">
|
|
|
+ <el-tree
|
|
|
+ :data="videoData"
|
|
|
+ :load="loadNode"
|
|
|
+ lazy
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ node-key="id"
|
|
|
+ :props="defaultProps"
|
|
|
+ :default-expand-all= isExpand
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ @node-click = 'treeChange'
|
|
|
+ style="background-color:#04283C;color:#C5D0D4"
|
|
|
+ >
|
|
|
+ <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click.stop="treeChange"
|
|
|
+ @click="() => openName(node, data)"
|
|
|
+ style="margin-left:2rem">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </span> -->
|
|
|
+ </el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="position: absolute;right:0;top:0;width:100%;height:90%;padding-left:33rem;margin-top:5rem;z-index:1000;">
|
|
|
+ <!-- <videodiv :cameracode="ccode" style="height:100%;width:100%"></videodiv> -->
|
|
|
+ <div style="width:100%;height:90rem;position:relative">
|
|
|
+ <div class="video" id="video" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
|
|
|
+ <!-- <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listVideo,queryCamera,editCamera } from "@/api/qdtl/video";
|
|
|
+import { httpRequest } from "@/api/data/http";
|
|
|
+import { getLineData,getVideoHttp } from "@/api/qdtl/data";
|
|
|
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
|
|
|
+import videodiv from "@/components/Videoplayer/index.vue"
|
|
|
+import headerdiv from '@/components/HeaderDiv/index.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ itemName:'无人机监测',
|
|
|
+ videoMap:new Map(),
|
|
|
+ nameObj:{
|
|
|
+ channel:'',
|
|
|
+ name:''
|
|
|
+ },
|
|
|
+ videoData:[],
|
|
|
+ // videoMap:new Map(),
|
|
|
+ expandedKeys:[],
|
|
|
+ Base64:require('js-base64').Base64,
|
|
|
+ isExpand:true,
|
|
|
+ videoIndex:1,
|
|
|
+ currentindexNew:2,
|
|
|
+ remarkName:false,
|
|
|
+ data: [],
|
|
|
+ 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"}'
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ videodiv,
|
|
|
+ headerdiv,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getvideo();
|
|
|
+ this.getDroneList();
|
|
|
+ // this.initCkplayer();
|
|
|
+ this.loadCkplayer('http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls1.m3u8');
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted(){
|
|
|
+ window.videosize = "3x3";
|
|
|
+ this.queryCamera();
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeDestroy(){
|
|
|
+ window.videosize = "1x1";
|
|
|
+ closevideo();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initCkplayer(){
|
|
|
+ var videoObject = {
|
|
|
+ container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
|
|
|
+ variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
|
|
|
+ autoplay:true,
|
|
|
+ live:true,
|
|
|
+ overspread:true,//是否让视频铺满播放器
|
|
|
+ html5m3u8:true,//m3u8-hls形式播放视频
|
|
|
+ // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
|
|
|
+ // video:data.data//视频地址
|
|
|
+ video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls1.m3u8'
|
|
|
+ };
|
|
|
+ console.log(videoObject);
|
|
|
+ window.player = new ckplayer(videoObject);
|
|
|
+
|
|
|
+ },
|
|
|
+ loadCkplayer(url){
|
|
|
+ // url = 'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
|
|
|
+ console.log(url);
|
|
|
+ url = this.Base64.encode(url);
|
|
|
+ console.log(url);
|
|
|
+ getVideoHttp(url).then(data=>{
|
|
|
+ console.log(process.env.NODE_ENV)
|
|
|
+
|
|
|
+ if(process.env.NODE_ENV === "production"){
|
|
|
+
|
|
|
+ data.data = (data.data+"").replaceAll("http://58.221.168.61:9000/","http://172.24.25.2:9000/")
|
|
|
+ }
|
|
|
+ console.log(data.data)
|
|
|
+ var videoObject = {
|
|
|
+ container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
|
|
|
+ variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
|
|
|
+ autoplay:true,
|
|
|
+ live:true,
|
|
|
+ overspread:true,//是否让视频铺满播放器
|
|
|
+ html5m3u8:true,//m3u8-hls形式播放视频
|
|
|
+ // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
|
|
|
+ video:data.data//视频地址
|
|
|
+ // video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls.m3u8'
|
|
|
+ };
|
|
|
+ console.log(videoObject);
|
|
|
+ window.player = new ckplayer(videoObject);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDroneList() {
|
|
|
+ getConfig(104).then(response => {
|
|
|
+ this.configObj = response.data
|
|
|
+ var jsonArry = JSON.parse(response.data.configValue);
|
|
|
+ // var droneList = jsonArry
|
|
|
+ for(var index in jsonArry){
|
|
|
+ var obj = jsonArry[index]
|
|
|
+ // obj.id = obj.indexCode;
|
|
|
+ obj.label = obj.area;
|
|
|
+ obj.data = obj;
|
|
|
+ // console.log(obj);
|
|
|
+ this.videoData.push(obj);
|
|
|
+ }
|
|
|
+ // console.log(this.droneList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openName(node,data){
|
|
|
+ if(this.nameObj.name.length > 0){
|
|
|
+ this.nameObj.channel = data.id
|
|
|
+ // console.log(this.nameObj);
|
|
|
+ editCamera(this.nameObj).then(response =>{
|
|
|
+ console.log(response);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editCamera(){
|
|
|
+ editCamera().then(data =>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryCamera(){
|
|
|
+ queryCamera().then(data =>{
|
|
|
+ this.videoMap = data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadNode(node, resolve){
|
|
|
+ if (node.level > 3) return resolve([]);
|
|
|
+ if(node.level <3){
|
|
|
+ var childrens = []
|
|
|
+ for(var index in this.jsonArry){
|
|
|
+ if(node.data.id == this.jsonArry[index].parentIndexCode){
|
|
|
+ childrens.push(this.jsonArry[index]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resolve(childrens);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(node.level === 3){
|
|
|
+ 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"}'
|
|
|
+ httpRequest(this.videoParams).then(data =>{
|
|
|
+ var json = JSON.parse(data.data);
|
|
|
+ // console.log(json);
|
|
|
+ var childerns = [];
|
|
|
+ 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;
|
|
|
+ childerns.push(obj);
|
|
|
+ }
|
|
|
+ resolve(childerns);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getvideo(){
|
|
|
+ httpRequest(this.queryParams).then(response => {
|
|
|
+ // console.log(response);
|
|
|
+ var json = JSON.parse(response.data);
|
|
|
+ console.log(json);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ listVideo().then(response => {
|
|
|
+ console.log(response);
|
|
|
+ this.videoData= response.data
|
|
|
+ console.log(this.videoData);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.videoData);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ treeChange(data, node){
|
|
|
+ var arry = this.$refs.tree.getCheckedNodes()
|
|
|
+ console.log(data);
|
|
|
+ if(data.video != null){
|
|
|
+ this.loadCkplayer(data.video);
|
|
|
+ //window.startPreview(data.cameraIndexCode,-1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .leftTree{
|
|
|
+ /* float:left; */
|
|
|
+ width:32rem;
|
|
|
+ background-color:#04283C;
|
|
|
+ padding: 10px;
|
|
|
+ padding-top:0 ;
|
|
|
+ min-height: 95vh;
|
|
|
+ z-index:1001;
|
|
|
+ }
|
|
|
+ .app-container{
|
|
|
+ padding:0
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
