Merge branch 'master' of http://123.132.248.154:10000/xujingliang/Lin_Ye_Fang_Huo
commit
8e4467d688
|
|
@ -21,6 +21,7 @@
|
|||
"echarts-gl": "^2.0.2",
|
||||
"electron-builder": "^22.11.7",
|
||||
"element-ui": "^2.10.1",
|
||||
"flv.js": "^1.6.2",
|
||||
"highcharts-vue": "^1.3.5",
|
||||
"jquery": "^3.6.0",
|
||||
"js-cookie": "2.2.0",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,4 @@
|
|||
var q=function(d){function e(a){a=-32768==a?-32767:a;var c=~a>>8&128;c||(a*=-1);32635<a&&(a=32635);if(256<=a){var b=k[a>>8&127];a=b<<4|a>>b+3&15}else a>>=4;return a^c^85}function f(a){var c=0;a^=85;a&128&&(a&=-129,c=-1);var b=((a&240)>>4)+4;a=4!=b?1<<b|(a&15)<<b-4|1<<b-5:a<<1|1;return-8*(0===c?a:-a)}function g(a){var c=a>>8&128;0!=c&&(a=-a);32635<a&&(a=32635);a+=132;var b=l[a>>7&255];return~(c|b<<4|a>>b+3&15)}function h(a){a=~a;var c=a>>4&7;c=m[c]+((a&15)<<c+3);0!=(a&128)&&(c=-c);return c}var k=[1,
|
||||
1,2,2,3,3,3,3,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],n=Object.freeze({encodeSample:e,decodeSample:f,encode:function(a){for(var c=new Uint8Array(a.length),b=0;b<a.length;b++)c[b]=e(a[b]);return c},decode:function(a){for(var c=new Int16Array(a.length),b=0;b<a.length;b++)c[b]=f(a[b]);return c}}),l=[0,
|
||||
0,1,1,2,2,2,2,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,
|
||||
7,7,7,7],m=[0,132,396,924,1980,4092,8316,16764],p=Object.freeze({encodeSample:g,decodeSample:h,encode:function(a){for(var c=new Uint8Array(a.length),b=0;b<a.length;b++)c[b]=g(a[b]);return c},decode:function(a){for(var c=new Int16Array(a.length),b=0;b<a.length;b++)c[b]=h(a[b]);return c}});d.alaw=n;d.mulaw=p;return d}({});window.alawmulaw=q;
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
(function(window) {
|
||||
//兼容
|
||||
window.URL = window.URL || window.webkitURL;
|
||||
//请求麦克风
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||
|
||||
var recorder = {};
|
||||
var dtcWs = {};
|
||||
var cb = {};
|
||||
|
||||
var Recorder = function(stream, config, name) {
|
||||
|
||||
config = config || {};
|
||||
config.sampleBits = config.sampleBits || 16; //输出采样数位 8, 16
|
||||
config.sampleRate = config.sampleRate || (8000); //输出采样率(1/6 48000)
|
||||
|
||||
// 音频上下文对象，可创建不同的AudioNode
|
||||
var context = new AudioContext();
|
||||
|
||||
//将声音输入这个对像
|
||||
var audioInput = context.createMediaStreamSource(stream);
|
||||
|
||||
//设置音量节点
|
||||
// var volume = context.createGain();
|
||||
// audioInput.connect(volume);
|
||||
|
||||
var recorder = context.createScriptProcessor(4096, 1, 1);
|
||||
|
||||
var audioData = {
|
||||
size: 0 //录音文件长度
|
||||
,
|
||||
buffer: [] //录音缓存
|
||||
,
|
||||
inputSampleRate: context.sampleRate //输入采样率
|
||||
,
|
||||
inputSampleBits: 16 //输入采样数位 8, 16
|
||||
,
|
||||
outputSampleRate: config.sampleRate,
|
||||
oututSampleBits: config.sampleBits,
|
||||
clear: function() {
|
||||
this.buffer = [];
|
||||
this.size = 0;
|
||||
}
|
||||
/**
|
||||
* @param {!Float32Array} data
|
||||
*/
|
||||
,
|
||||
input: function(data) {
|
||||
this.buffer.push(new Float32Array(data));
|
||||
this.size += data.length;
|
||||
},
|
||||
compress: function() { //合并压缩
|
||||
//合并
|
||||
var data = new Float32Array(this.size);
|
||||
var offset = 0;
|
||||
for (var i = 0; i < this.buffer.length; i++) {
|
||||
data.set(this.buffer[i], offset);
|
||||
offset += this.buffer[i].length;
|
||||
}
|
||||
//压缩
|
||||
var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
|
||||
var length = data.length / compression;
|
||||
var result = new Float32Array(length);
|
||||
var index = 0,
|
||||
j = 0;
|
||||
while (index < length) {
|
||||
result[index] = data[j];
|
||||
j += compression;
|
||||
index++;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
floatTo16BitPCM: function(input, output) {
|
||||
for (var i = 0; i < input.length; i++) {
|
||||
var s = Math.max(-1, Math.min(1, input[i]));
|
||||
output[i] = (s < 0 ? s * 0x8000 : s * 0x7FFF);
|
||||
}
|
||||
},
|
||||
convertBuffer: function() {
|
||||
var bytes = this.compress();
|
||||
//console.log(bytes);
|
||||
var data = new Float32Array(bytes);
|
||||
var out = new Int16Array(bytes.length);
|
||||
this.floatTo16BitPCM(data, out);
|
||||
return out;
|
||||
},
|
||||
encodePCM: function() {
|
||||
// PCM
|
||||
var bytes = this.convertBuffer();
|
||||
var data = new DataView(bytes.buffer);
|
||||
return data;
|
||||
},
|
||||
encodeG711A: function() { //转G711A
|
||||
// G711A
|
||||
var smaples = this.convertBuffer();
|
||||
var g7111aBuf = alawmulaw.alaw.encode(smaples);
|
||||
return g7111aBuf;
|
||||
},
|
||||
encodeG711aBuffer: function() {
|
||||
// DataView
|
||||
var smaples = this.convertBuffer();
|
||||
var g7111aBuf = alawmulaw.alaw.encode(smaples);
|
||||
var data = new DataView(g7111aBuf.buffer);
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
//开始录音
|
||||
this.start = function() {
|
||||
audioInput.connect(recorder);
|
||||
recorder.connect(context.destination);
|
||||
};
|
||||
|
||||
//停止
|
||||
this.stop = function() {
|
||||
audioInput.disconnect();
|
||||
recorder.disconnect();
|
||||
};
|
||||
|
||||
this.getData = function() {
|
||||
return audioData.encodeG711A();
|
||||
};
|
||||
|
||||
//回放
|
||||
this.play = function(audio) {
|
||||
audio.src = window.URL.createObjectURL(this.getBlob());
|
||||
};
|
||||
|
||||
//获取音频文件
|
||||
this.getBuffer = function() {
|
||||
//return audioData.encodePCM();
|
||||
return audioData.encodeG711aBuffer();
|
||||
};
|
||||
//清空缓存
|
||||
this.clear = function() {
|
||||
audioData.clear();
|
||||
};
|
||||
|
||||
//音频采集
|
||||
var that = this;
|
||||
recorder.onaudioprocess = function(e) {
|
||||
audioData.input(e.inputBuffer.getChannelData(0));
|
||||
var data = that.getData();
|
||||
// getG711A(data);
|
||||
if (dtcWs[name]) {
|
||||
dtcWs[name].send(data);
|
||||
};
|
||||
that.clear();
|
||||
};
|
||||
};
|
||||
//抛出异常
|
||||
Recorder.throwError = function(message) {
|
||||
throw new function() { this.toString = function() { console.log(message) }; };
|
||||
};
|
||||
//是否支持录音
|
||||
Recorder.canRecording = (navigator.getUserMedia != null);
|
||||
//获取录音机
|
||||
Recorder.get = function(callback, config, name) {
|
||||
if (callback) {
|
||||
if (navigator.getUserMedia) {
|
||||
navigator.getUserMedia({ audio: true } //只启用音频
|
||||
,
|
||||
function(stream) {
|
||||
var rec = new Recorder(stream, config, name);
|
||||
callback(rec);
|
||||
},
|
||||
function(error) {
|
||||
switch (error.code || error.name) {
|
||||
case 'PERMISSION_DENIED':
|
||||
case 'PermissionDeniedError':
|
||||
STRecorder.throwErr('用户拒绝提供信息。');
|
||||
break;
|
||||
case 'NOT_SUPPORTED_ERROR':
|
||||
case 'NotSupportedError':
|
||||
STRecorder.throwErr('浏览器不支持硬件设备。');
|
||||
break;
|
||||
case 'MANDATORY_UNSATISFIED_ERROR':
|
||||
case 'MandatoryUnsatisfiedError':
|
||||
STRecorder.throwErr('无法发现指定的硬件设备。');
|
||||
break;
|
||||
default:
|
||||
console.log('无法打开麦克风。异常信息:', error);
|
||||
STRecorder.throwErr('无法打开麦克风。异常信息:' + (error.code || error.name));
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
return;
|
||||
} else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({
|
||||
audio: true
|
||||
})
|
||||
.then(function(stream) {
|
||||
var rec = new Recorder(stream, config, name);
|
||||
callback(rec);
|
||||
}).catch(function(error) {
|
||||
switch (error.code || error.name) {
|
||||
case 'PERMISSION_DENIED':
|
||||
case 'PermissionDeniedError':
|
||||
Recorder.throwError('用户拒绝提供信息。');
|
||||
break;
|
||||
case 'NOT_SUPPORTED_ERROR':
|
||||
case 'NotSupportedError':
|
||||
Recorder.throwError('浏览器不支持硬件设备。');
|
||||
break;
|
||||
case 'MANDATORY_UNSATISFIED_ERROR':
|
||||
case 'MandatoryUnsatisfiedError':
|
||||
Recorder.throwError('无法发现指定的硬件设备。');
|
||||
break;
|
||||
default:
|
||||
Recorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
|
||||
break;
|
||||
}
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
Recorder.throwError('当前浏览器不支持录音功能。');
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function dtcWebsocket(websocket_url, IP, Port, Token, queryToken, name) { // 连接websocket
|
||||
|
||||
var ws = new WebSocket(websocket_url + '?token=' + queryToken + '&IP=' + IP + '&Port=' + Port + '&Token=' + Token + '&dtc=true');
|
||||
console.log(ws)
|
||||
ws.onopen = function(evt) {
|
||||
var message = {
|
||||
type: "websocket_success",
|
||||
msg: "dtc websocket连接成功"
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
Recorder.get(function(rec) {
|
||||
recorder[name] = rec;
|
||||
recorder[name].start();
|
||||
}, {}, name);
|
||||
};
|
||||
ws.onmessage = function(data) {};
|
||||
|
||||
ws.onclose = function(evt) {
|
||||
var message = {
|
||||
type: "websocket_close",
|
||||
msg: "dtc websocket连接断开"
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
recorder[name].stop(); //关闭采集数据
|
||||
recorder[name].clear(); //清空采集数据缓存
|
||||
recorder[name] = null;
|
||||
dtcWs[name] = null; //清空websocket
|
||||
cb[name] = null;
|
||||
};
|
||||
|
||||
ws.onerror = function(evt) {
|
||||
var message = {
|
||||
type: "websocket_error",
|
||||
msg: evt
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
recorder[name].stop();
|
||||
recorder[name].clear();
|
||||
recorder[name] = null;
|
||||
dtcWs[name] = null; //清空websocket
|
||||
cb[name] = null;
|
||||
};
|
||||
return ws;
|
||||
}
|
||||
window.Recorder = Recorder;
|
||||
|
||||
window.startCall = function(q2http_url, websocket_url, token, puid, idx, name, callback) { //开启对讲,每开启一个对讲就开启一个websocket,关闭对讲就要关闭websocket
|
||||
if (callback) {
|
||||
cb[name] = callback;
|
||||
}
|
||||
|
||||
var params = {
|
||||
puid: puid,
|
||||
idx: idx
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: q2http_url + "audio/startCall?token=" + token,
|
||||
data: params,
|
||||
traditional: true,
|
||||
dataType: 'json',
|
||||
async: false,
|
||||
complete: function(rv) {
|
||||
console.log(rv)
|
||||
var res = rv.responseJSON;
|
||||
console.log(res)
|
||||
if (res.hasOwnProperty('errcode')) {
|
||||
var message = {
|
||||
type: "startTalk_error",
|
||||
msg: res.data.message
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
return;
|
||||
} else {
|
||||
console.log(name)
|
||||
dtcWs[name] = dtcWebsocket(websocket_url, res.IP, res.Port, res.Token, token, name);
|
||||
var message = {
|
||||
type: "startTalk_success",
|
||||
msg: "打开喊话成功"
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
return;
|
||||
};
|
||||
},
|
||||
error: function(err) {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
window.stopCall = function(name) {
|
||||
if (recorder[name]) {
|
||||
dtcWs[name].close(); //关闭websocket
|
||||
var message = {
|
||||
type: "stopTalk_success",
|
||||
msg: "关闭喊话成功"
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
return;
|
||||
} else {
|
||||
var message = {
|
||||
type: "stopTalk_error",
|
||||
msg: "未找到喊话无法停止喊话"
|
||||
};
|
||||
if (cb[name]) {
|
||||
cb[name](message)
|
||||
};
|
||||
return;
|
||||
};
|
||||
};
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"ver": "debug",
|
||||
"q2http_url": "https://fx.hopetrytech.com:7004/icvs2/",
|
||||
"websocket_url": "wss://fx.hopetrytech.com:7004/wss",
|
||||
"connParams": {
|
||||
"address": "60.168.132.97",
|
||||
"port": "49988",
|
||||
"user": "py",
|
||||
"password": "Py123456",
|
||||
"epid": "system",
|
||||
"bfix": 1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,964 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
width="75%"
|
||||
height="70%"
|
||||
top=" calc(50vh - 440px)"
|
||||
class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog
|
||||
custom-class="no-header-dialog"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:visible="visible"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="c-header">
|
||||
<div style="width: 80px"></div>
|
||||
<div class="header-title">查播视频和云平台功能</div>
|
||||
<div class="header-close">
|
||||
<img
|
||||
src="/img/monitoringList/close.png"
|
||||
style="cursor: pointer"
|
||||
@click="closeVisible"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-body">
|
||||
<div class="body-left">
|
||||
<div class="b-l-top">视频分组</div>
|
||||
<div class="b-l-search">
|
||||
<input />
|
||||
<div>
|
||||
<i class="el-icon-search"> </i>
|
||||
<span style="margin-left: 5px">搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-tree
|
||||
:data="list"
|
||||
:lazy="true"
|
||||
:props="props"
|
||||
style="border: 1px solid white; width: 90%; margin-top: 10px"
|
||||
:load="treeExpand"
|
||||
@node-click="treeClick"
|
||||
></el-tree>
|
||||
</div>
|
||||
<div class="body-video">
|
||||
<div
|
||||
class="video-item"
|
||||
v-for="(item, index) in videoList"
|
||||
:key="index"
|
||||
:style="{
|
||||
border:
|
||||
index == nowSelectVideo
|
||||
? '1px solid rgba(255, 217, 0, 0.651)'
|
||||
: '1px solid rgba(204, 204, 204, 0.479)',
|
||||
}"
|
||||
@click="checkVideo(item, index)"
|
||||
>
|
||||
<video
|
||||
:id="'video' + index"
|
||||
class="video"
|
||||
ref="videoPlay"
|
||||
@ontimeupdate="progress"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right">
|
||||
<div class="body-item">
|
||||
<div class="item-title">
|
||||
<div>云视频操作平台</div>
|
||||
<img src="/img/monitoringList/fz.png" />
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="line">
|
||||
<div class="line-item" @click="connect">连接平台</div>
|
||||
<div class="line-item" @click="pausevideo">停止视频</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line-item" @click="startcall">开始喊话</div>
|
||||
<div class="line-item" @click="stopcall">停止喊话</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="zoomcontrol('zoomin')"
|
||||
@mouseup="zoomcontrol('stop')"
|
||||
>
|
||||
放大图像
|
||||
</div>
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="zoomcontrol('zoomout')"
|
||||
@mouseup="zoomcontrol('stop')"
|
||||
>
|
||||
缩小图像
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="focuscontrol('near')"
|
||||
@mouseup="focuscontrol('stop')"
|
||||
>
|
||||
拉近焦距
|
||||
</div>
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="focuscontrol('faraway')"
|
||||
@mouseup="focuscontrol('stop')"
|
||||
>
|
||||
推远焦距
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="aperture('augment')"
|
||||
@mouseup="aperture('stop')"
|
||||
>
|
||||
增大光圈
|
||||
</div>
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="aperture('minish')"
|
||||
@mouseup="aperture('stop')"
|
||||
>
|
||||
减小光圈
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-item">
|
||||
<div class="item-title">
|
||||
<div>设置预置位</div>
|
||||
<img src="/img/monitoringList/fz.png" />
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="line">
|
||||
<div class="line-item">连接平台</div>
|
||||
<div class="line-item">停止视频</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line-item">开始喊话</div>
|
||||
<div class="line-item">停止喊话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-item">
|
||||
<div class="item-title">
|
||||
<div>旋转云平台</div>
|
||||
<img src="/img/monitoringList/fz.png" />
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="turncontrol('up')"
|
||||
@mouseup="turncontrol('stop')"
|
||||
>
|
||||
上
|
||||
</div>
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="turncontrol('down')"
|
||||
@mouseup="turncontrol('stop')"
|
||||
>
|
||||
下
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="turncontrol('left')"
|
||||
@mouseup="turncontrol('stop')"
|
||||
>
|
||||
左
|
||||
</div>
|
||||
<div
|
||||
class="line-item"
|
||||
@mousedown="turncontrol('right')"
|
||||
@mouseup="turncontrol('stop')"
|
||||
>
|
||||
右
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-item">
|
||||
<div class="item-title">
|
||||
<div>云存储操作</div>
|
||||
<img src="/img/monitoringList/fz.png" />
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="line">
|
||||
<div class="line-item" @click="startmanual">开始云抓拍</div>
|
||||
<div class="line-item" @click="stopmanual(yzpId)">
|
||||
停止云抓拍
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line-item" @click="startstorage">开始云录像</div>
|
||||
<div class="line-item" @click="stopmanual(ylxId)">
|
||||
停止云录像
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postMethodCommon } from "@/api/common.js";
|
||||
import appConfig from "../../../../public/config/app.json";
|
||||
import axios from "axios";
|
||||
import videoConfig from "../lib/videoConfig.json";
|
||||
import flvjs from "flv.js";
|
||||
import talk from "../lib/talk.js";
|
||||
import alawmulaw from "../lib/alawmulaw.min.js";
|
||||
export default {
|
||||
name: "monitoringList",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
token: "",
|
||||
list: [],
|
||||
|
||||
props: {
|
||||
isLeaf: "leaf",
|
||||
},
|
||||
flvPlayer: null,
|
||||
nowSelect: null,
|
||||
videoList: [null, null, null, null],
|
||||
videoDataList: [null, null, null, null],
|
||||
nowSelectVideo: 0,
|
||||
visible: false,
|
||||
yzpId: "",
|
||||
ylxId: "",
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
created() {},
|
||||
methods: {
|
||||
// 云抓拍
|
||||
startmanual() {
|
||||
if (!this.nowSelect) return;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}CSS/C_CSS_StartManualSnapshot`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
stream: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
this.yzpId = res.data.ID;
|
||||
});
|
||||
},
|
||||
// 云录像
|
||||
startstorage() {
|
||||
if (!this.nowSelect) return;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}CSS/C_CSS_StartManualStorage`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
duration: 5,
|
||||
reserveDay: 30,
|
||||
fileLength: 15,
|
||||
type: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
this.ylxId = res.data.Param.ID;
|
||||
});
|
||||
},
|
||||
// 停止抓拍、云录像
|
||||
stopmanual(id) {
|
||||
if (!this.nowSelect) return;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}CSS/C_CSS_StopManualStorage`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
id: id,
|
||||
},
|
||||
}).then((res) => {
|
||||
this.ylxId = res.data.Param.ID;
|
||||
});
|
||||
},
|
||||
showVisible() {
|
||||
this.connect();
|
||||
this.visible = true;
|
||||
},
|
||||
closeVisible() {
|
||||
this.stopcall();
|
||||
this.visible = false;
|
||||
},
|
||||
loadVideoAndShow(e) {
|
||||
this.showVisible();
|
||||
this.$nextTick(() => {
|
||||
let that = this;
|
||||
console.log(e);
|
||||
let url = `${videoConfig.q2http_url}stream.flv?puid=${e.PUID}&idx=${e.Idx}&stream=0&token=${e.token}`;
|
||||
// 提前结束通话通道
|
||||
this.stopcall();
|
||||
this.nowSelect = e;
|
||||
if (flvjs.isSupported()) {
|
||||
that.videoDataList[that.nowSelectVideo] = e;
|
||||
if (that.videoList[that.nowSelectVideo]) {
|
||||
that.videoList[that.nowSelectVideo].pause();
|
||||
that.videoList[that.nowSelectVideo].unload();
|
||||
that.videoList[that.nowSelectVideo].detachMediaElement();
|
||||
that.videoList[that.nowSelectVideo].destroy();
|
||||
}
|
||||
let videoElement = document.getElementById(
|
||||
"video" + that.nowSelectVideo
|
||||
);
|
||||
console.log(videoElement);
|
||||
that.videoList[that.nowSelectVideo] = flvjs.createPlayer(
|
||||
{
|
||||
type: "flv",
|
||||
url: url,
|
||||
isLive: true,
|
||||
hasAudio: false,
|
||||
},
|
||||
{
|
||||
cors: true,
|
||||
enableWorker: false,
|
||||
autoCleanupSourceBuffer: true, //清理缓冲区
|
||||
enableStashBuffer: false,
|
||||
stashInitialSize: 128, // 减少首桢显示等待时长
|
||||
statisticsInfoReportInterval: 600,
|
||||
}
|
||||
);
|
||||
that.videoList[that.nowSelectVideo].attachMediaElement(videoElement);
|
||||
that.videoList[that.nowSelectVideo].load();
|
||||
that.videoList[that.nowSelectVideo].play();
|
||||
that.videoList[that.nowSelectVideo].on(
|
||||
flvjs.Events.ERROR,
|
||||
(errType, errDetail) => {
|
||||
console.log(errType);
|
||||
console.log(errDetail);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 云台上下
|
||||
turncontrol(option) {
|
||||
if (!this.nowSelect) return;
|
||||
if (option == "up") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
motion: "up",
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("上返回", res.data);
|
||||
});
|
||||
} else if (option == "down") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
motion: "down",
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("下返回", res.data);
|
||||
});
|
||||
} else if (option == "left") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
motion: "left",
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("左返回", res.data);
|
||||
});
|
||||
} else if (option == "right") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
motion: "right",
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("右返回", res.data);
|
||||
});
|
||||
} else {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
|
||||
params: { token: this.token },
|
||||
data: {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
motion: "stop",
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("下返回", res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 光圈
|
||||
aperture(option) {
|
||||
if (!this.nowSelect) return;
|
||||
if (option == "augment") {
|
||||
let xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<M Type="ComReq">
|
||||
<C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
|
||||
<Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
|
||||
</C>
|
||||
</M>`;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}RawRequest`,
|
||||
params: {
|
||||
token: this.token,
|
||||
dstType: "201",
|
||||
dstID: this.nowSelect.puid,
|
||||
},
|
||||
data: { xml: xml },
|
||||
}).then((res) => {
|
||||
console.log("光圈放大返回", res.data);
|
||||
});
|
||||
} else if (option == "minish") {
|
||||
let xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<M Type="ComReq">
|
||||
<C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
|
||||
<Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
|
||||
</C>
|
||||
</M>`;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}RawRequest`,
|
||||
params: {
|
||||
token: this.token,
|
||||
dstType: "201",
|
||||
dstID: this.nowSelect.puid,
|
||||
},
|
||||
data: { xml: xml },
|
||||
}).then((res) => {
|
||||
console.log("光圈缩小返回", res.data);
|
||||
});
|
||||
} else {
|
||||
let xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<M Type="ComReq">
|
||||
<C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
|
||||
<Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
|
||||
</C>
|
||||
</M>`;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}RawRequest`,
|
||||
params: {
|
||||
token: this.token,
|
||||
dstType: "201",
|
||||
dstID: this.nowSelect.puid,
|
||||
},
|
||||
data: { xml: xml },
|
||||
}).then((res) => {
|
||||
console.log("光圈停止返回", res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 拉进推远焦点
|
||||
focuscontrol(option) {
|
||||
if (!this.nowSelect) return;
|
||||
let params = {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
};
|
||||
if (option == "near") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_MakeFocusNear`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("拉进返回", res.data);
|
||||
});
|
||||
} else if (option == "faraway") {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_MakeFocusFar`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("推远返回", res.data);
|
||||
});
|
||||
} else {
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_StopFocusMove`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("停止返回", res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 缩放放大功能
|
||||
zoomcontrol(option) {
|
||||
if (!this.nowSelect) return;
|
||||
let params = {
|
||||
puid: this.nowSelect.puid,
|
||||
idx: this.nowSelect.Idx,
|
||||
};
|
||||
if (option == "stop") {
|
||||
// 停止缩放
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_StopPictureZoom`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("停止返回", res.data);
|
||||
});
|
||||
} else if (option == "zoomin") {
|
||||
// 放大图像
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_ZoomInPicture`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("放大返回", res.data);
|
||||
});
|
||||
} else {
|
||||
// 缩小图像
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}PTZ/C_PTZ_ZoomOutPicture`,
|
||||
params: { token: this.token },
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
console.log("缩小返回", res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 开始喊话
|
||||
startcall() {
|
||||
if (!this.nowSelect) {
|
||||
return;
|
||||
}
|
||||
let data = this.nowSelect;
|
||||
var puid = data.puid;
|
||||
var idx = data.Idx;
|
||||
var name = puid + "_" + idx;
|
||||
console.log(name);
|
||||
startCall(
|
||||
videoConfig.q2http_url,
|
||||
videoConfig.websocket_url,
|
||||
this.token,
|
||||
puid,
|
||||
idx,
|
||||
name,
|
||||
(res) => {
|
||||
console.log("喊话回调", res);
|
||||
}
|
||||
);
|
||||
},
|
||||
// 结束喊话
|
||||
stopcall() {
|
||||
if (!this.nowSelect) {
|
||||
return;
|
||||
}
|
||||
let data = this.nowSelect;
|
||||
var puid = data.puid;
|
||||
var idx = data.Idx;
|
||||
var name = puid + "_" + idx;
|
||||
console.log(name);
|
||||
stopCall(name);
|
||||
},
|
||||
// 停止视频
|
||||
pausevideo() {
|
||||
if (this.videoList[this.nowSelectVideo]) {
|
||||
if (flvjs.isSupported) {
|
||||
this.videoList[this.nowSelectVideo].pause();
|
||||
this.videoList[this.nowSelectVideo].unload();
|
||||
this.videoList[this.nowSelectVideo].detachMediaElement();
|
||||
this.videoList[this.nowSelectVideo].destroy();
|
||||
this.videoList[this.nowSelectVideo] = null;
|
||||
}
|
||||
this.videoDataList[this.nowSelectVideo] = null;
|
||||
}
|
||||
},
|
||||
progress(e) {
|
||||
console.log("progress");
|
||||
var bf = e.srcElement.buffered;
|
||||
var currentTime = e.srcElement.currentTime;
|
||||
if (bf.length > 0) {
|
||||
let end = bf.end(0);
|
||||
if (end - currentTime > 1.5) {
|
||||
e.srcElement.currentTime = end - 0.1;
|
||||
}
|
||||
}
|
||||
},
|
||||
connect() {
|
||||
let params = {
|
||||
address: videoConfig.connParams.address,
|
||||
port: videoConfig.connParams.port,
|
||||
user: videoConfig.connParams.user,
|
||||
password: videoConfig.connParams.password,
|
||||
epid: videoConfig.connParams.epid,
|
||||
fixaddr: videoConfig.connParams.bfix,
|
||||
};
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}login`,
|
||||
data: params,
|
||||
}).then((res) => {
|
||||
let data = res.data;
|
||||
this.token = data.token;
|
||||
this.getFacilityList(0, 200);
|
||||
});
|
||||
},
|
||||
getFacilityList(offset, count) {
|
||||
let that = this;
|
||||
axios({
|
||||
method: "get",
|
||||
url: `${videoConfig.q2http_url}CAS/C_CAS_QueryPUIDSets`,
|
||||
params: {
|
||||
offset: offset,
|
||||
count: count,
|
||||
token: that.token,
|
||||
},
|
||||
}).then((res) => {
|
||||
let data = res.data;
|
||||
data.map((item) => {
|
||||
item.id = item.$;
|
||||
item.label = item.Name;
|
||||
});
|
||||
this.list = data;
|
||||
});
|
||||
},
|
||||
treeExpand(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return;
|
||||
}
|
||||
let that = this;
|
||||
axios({
|
||||
method: "post",
|
||||
url: `${videoConfig.q2http_url}C_CAS_QueryPUIDRes`,
|
||||
params: {
|
||||
token: that.token,
|
||||
},
|
||||
data: {
|
||||
puid: node.data.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let data = res.data["Res"];
|
||||
let list = [];
|
||||
data.map((item) => {
|
||||
if (item.Type == "IV") {
|
||||
item.label = item.Name;
|
||||
item.id = item.Name;
|
||||
item.leaf = true;
|
||||
item.puid = node.data.id;
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
resolve(list);
|
||||
});
|
||||
},
|
||||
treeClick(data, a, b) {
|
||||
let that = this;
|
||||
// 判断的是否是叶节点
|
||||
if (data.leaf) {
|
||||
console.log(data);
|
||||
let url = `${videoConfig.q2http_url}stream.flv?puid=${data.puid}&idx=${data.Idx}&stream=0&token=${this.token}`;
|
||||
// 提前结束通话通道
|
||||
this.stopcall();
|
||||
this.nowSelect = data;
|
||||
if (flvjs.isSupported()) {
|
||||
that.videoDataList[that.nowSelectVideo] = data;
|
||||
if (that.videoList[that.nowSelectVideo]) {
|
||||
that.videoList[that.nowSelectVideo].pause();
|
||||
that.videoList[that.nowSelectVideo].unload();
|
||||
that.videoList[that.nowSelectVideo].detachMediaElement();
|
||||
that.videoList[that.nowSelectVideo].destroy();
|
||||
}
|
||||
let videoElement = document.getElementById(
|
||||
"video" + that.nowSelectVideo
|
||||
);
|
||||
console.log(videoElement);
|
||||
that.videoList[that.nowSelectVideo] = flvjs.createPlayer(
|
||||
{
|
||||
type: "flv",
|
||||
url: url,
|
||||
isLive: true,
|
||||
hasAudio: false,
|
||||
},
|
||||
{
|
||||
cors: true,
|
||||
enableWorker: false,
|
||||
autoCleanupSourceBuffer: true, //清理缓冲区
|
||||
enableStashBuffer: false,
|
||||
stashInitialSize: 128, // 减少首桢显示等待时长
|
||||
statisticsInfoReportInterval: 600,
|
||||
}
|
||||
);
|
||||
that.videoList[that.nowSelectVideo].attachMediaElement(videoElement);
|
||||
that.videoList[that.nowSelectVideo].load();
|
||||
that.videoList[that.nowSelectVideo].play();
|
||||
that.videoList[that.nowSelectVideo].on(
|
||||
flvjs.Events.ERROR,
|
||||
(errType, errDetail) => {
|
||||
console.log(errType);
|
||||
console.log(errDetail);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
checkVideo(e, a) {
|
||||
this.nowSelectVideo = a;
|
||||
this.nowSelect = this.videoDataList[a];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .no-header-dialog .el-dialog__header {
|
||||
display: none !important;
|
||||
}
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
::v-deep .sticky {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .dialog-mini .el-dialog__header {
|
||||
background: rgba(10, 39, 78, 1);
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__body {
|
||||
background: rgba(0, 9, 34, 1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions-item__label.is-bordered-label {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
background-color: #ffffff00;
|
||||
|
||||
background-image: url("/img/monitoringList/background.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.content {
|
||||
height: 82vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
.c-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-title {
|
||||
color: white;
|
||||
font-size: 33px;
|
||||
}
|
||||
.header-close {
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
.c-body {
|
||||
flex: 1;
|
||||
width: 96%;
|
||||
margin-top: 1%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.body-left {
|
||||
width: 21%;
|
||||
border: 1px solid #0e4391;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.b-l-top {
|
||||
background: linear-gradient(to left, #091729 0%, #1968db 100%);
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 1px solid black;
|
||||
font-size: 28px;
|
||||
padding-left: 17px;
|
||||
line-height: 60px;
|
||||
color: white;
|
||||
}
|
||||
.b-l-search {
|
||||
width: 94%;
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
input {
|
||||
width: 69%;
|
||||
color: white;
|
||||
background-color: #009fe900;
|
||||
border-left: 1px solid #0e4391;
|
||||
border-top: 1px solid #0e4391;
|
||||
border-bottom: 1px solid #0e4391;
|
||||
border-right: 0px;
|
||||
height: 43px;
|
||||
}
|
||||
div {
|
||||
width: 30%;
|
||||
background-color: #1970ee;
|
||||
height: 43px;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.body-video {
|
||||
width: 55%;
|
||||
border: 1px solid #0e4391;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.video-item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 1px solid rgba(255, 217, 0, 0.651);
|
||||
position: relative;
|
||||
}
|
||||
.video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: fill;
|
||||
position: absolute;
|
||||
}
|
||||
.body-right {
|
||||
width: 21%;
|
||||
}
|
||||
.body-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.item-title {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
img {
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
div {
|
||||
height: 45px;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
font-size: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.item-body {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.line-item {
|
||||
margin-left: 30px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #1551aa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #1a6ce5;
|
||||
cursor: pointer;
|
||||
}
|
||||
::v-deep.el-tree {
|
||||
background-color: #ffffff00 !important;
|
||||
border: none !important;
|
||||
}
|
||||
::v-deep .el-tree-node__content:hover,
|
||||
.el-upload-list__item:hover {
|
||||
background-color: #ffffff00 !important;
|
||||
}
|
||||
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #ffffff00 !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue