You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1613 lines
53 KiB
1613 lines
53 KiB
<template>
|
|
<v-scale-screen width="1920" height="1080">
|
|
<div id="ty">
|
|
|
|
<div class="main">
|
|
<div class="left">
|
|
<div class="tiyuBla">
|
|
<div style="position: absolute; right: 32%; top: 52%">体育</div>
|
|
<span style="position: absolute; right: 12%; top: 72%;font-size: 16px;" class="wh_small">体育场 |
|
|
体育馆 | 游泳场馆</span>
|
|
</div>
|
|
|
|
<div class="tongji">
|
|
<span class="institle">总计进馆人数</span>
|
|
<!-- 今日进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/td_ins.png" />
|
|
<span id="insv" class="insv">234,098</span>
|
|
<span class="inst">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tm_ins.png" />
|
|
<span id="insv2" class="insv">234,098</span>
|
|
<span class="inst">本月进馆人数</span>
|
|
</div>
|
|
<!-- 本年进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tyear_ins.png" />
|
|
<span id="insv3" class="insv">234,098</span>
|
|
<span class="inst">本年进馆人数</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dinszone">
|
|
<span class="dins_title">24小时总进馆人流趋势</span>
|
|
<!-- 柱状统计图 -->
|
|
<div class="dins_chart" id="dinschart" style="height: 22vh; width: 100%"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="center">
|
|
<!-- v-for=" item in videoData" :key="item.key" -->
|
|
<!-- <div class="item" v-for=" item in videoData" :key="item.key">
|
|
<video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" :id="item.key" autoplay></video>
|
|
</div> -->
|
|
<div class="item" style="position: relative;">
|
|
<video style="width: 68%;height: 70%;position: absolute;top: 0.3rem;left: 0.3rem;" id="camera0" autoplay></video>
|
|
</div>
|
|
<div class="item">
|
|
<video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera1" autoplay></video>
|
|
</div>
|
|
<div class="item">
|
|
<video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera2" autoplay></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<!-- <div class="item"></div> -->
|
|
<div class="pcgrliu">
|
|
<span class="pcg_title">各场馆人次占比</span>
|
|
<div class="venue_proportion_box" style="width: 100%; height: 290px">
|
|
<div class="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<span>体育场</span>
|
|
</div>
|
|
</div>
|
|
<div class="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<span>体育馆</span>
|
|
</div>
|
|
</div>
|
|
<div class="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<span>游泳场馆</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> -->
|
|
</div>
|
|
<!-- 各场馆人流趋势 -->
|
|
<div class="pcgrliu">
|
|
<span class="pcg_title">各场馆人流趋势</span>
|
|
<div id="pcgchart2" style="width: 100%; height: 290px"></div>
|
|
</div>
|
|
<!-- <div class="item"></div> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
import flvjs from "flv.js";
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
|
|
// import LivePlayer from '@liveqing/liveplayer'
|
|
import $ from "jquery";
|
|
|
|
// import Video from '../../components/btgym/Video.vue'
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
player: '',
|
|
videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa/',
|
|
initCount: 0,
|
|
pubKey0: '',
|
|
pubKey1: '',
|
|
pubKey2: '',
|
|
oWebControl0: '',
|
|
oWebControl1: '',
|
|
oWebControl2: '',
|
|
videoData: []
|
|
|
|
};
|
|
},
|
|
created() {
|
|
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
|
|
this.$nextTick(() => {
|
|
this.initPlugin();
|
|
this.initPlugin2();
|
|
this.initPlugin3();
|
|
// setTimeout(this.initPlugin2(), 1000);
|
|
// setTimeout(this.initPlugin3(), 1000);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
mounted() {
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
if (cc.className.indexOf('ty_bg') > -1) {
|
|
cc.className = "btgym";
|
|
} else {
|
|
cc.classList.add("ty_bg");
|
|
}
|
|
this.ty_bar1()
|
|
// this.ty_bar2()
|
|
this.ty_bar3()
|
|
this.addNumber(0, 234098, 'insv')
|
|
this.addNumber(0, 234098, 'insv2')
|
|
this.addNumber(0, 234098, 'insv3')
|
|
this.getVideo()
|
|
|
|
|
|
// if (flvjs.isSupported()) {
|
|
// let video = this.$refs.player
|
|
|
|
// if (video) {
|
|
// this.player = flvjs.createPlayer({
|
|
// type: "flv",
|
|
// isLive: true,
|
|
// url: `rtmp://58.200.131.2:1935/livetv/hunantv`
|
|
// });
|
|
// this.player.attachMediaElement(video);
|
|
// try {
|
|
// this.player.load();
|
|
// this.player.play();
|
|
// } catch (error) {
|
|
// console.log(error);
|
|
// }
|
|
// }
|
|
// }
|
|
},
|
|
methods: {
|
|
ty_bar1() {
|
|
var chartDom = document.getElementById("dinschart");
|
|
var myChart = echarts.init(chartDom);
|
|
// var option;
|
|
// var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
|
|
|
|
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
|
|
// var data = [Math.random() * 300]
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + "</br>" + params[0].value
|
|
}
|
|
},
|
|
// legend: {
|
|
// data: ['厂用电量']
|
|
// },
|
|
grid: {
|
|
left: 0,
|
|
right: 0,
|
|
bottom: '3%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
data: [
|
|
'08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
|
|
],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// interval: 0,
|
|
// rotate: 0
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
// name: ' 今日发电量( KWh )',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: '#027eff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
}
|
|
}],
|
|
series: [{
|
|
// name: '厂用电量',
|
|
type: 'bar',
|
|
barGap: '5%',
|
|
barWidth: '10%',
|
|
barCategoryGap: '60%',
|
|
stack: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00EAFF'
|
|
},
|
|
// {
|
|
// offset: 0.5,
|
|
// color: '#00feff'
|
|
// },
|
|
{
|
|
offset: 1,
|
|
color: '#001AFF'
|
|
}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: [
|
|
14000,
|
|
11000,
|
|
10000,
|
|
9000,
|
|
8000,
|
|
7000,
|
|
5000,
|
|
4000,
|
|
3000,
|
|
],
|
|
zlevel: 11
|
|
},
|
|
{
|
|
// name: '厂用电量',
|
|
type: 'scatter',
|
|
stack: 1,
|
|
xAxisIndex: 0,
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
symbolSize: 13,
|
|
zlevel: 10,
|
|
z: 2,
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: '10%',
|
|
barGap: '-100%',
|
|
data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#004298',
|
|
barBorderRadius: 30,
|
|
// backgroundColor:'#091C24'
|
|
// borderColor:'#00D1F0'
|
|
}
|
|
},
|
|
z: 1,
|
|
},
|
|
]
|
|
}
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
ty_bar2() {
|
|
var chartDom = document.getElementById("pcgchart1");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
// var xData = function() {
|
|
// var data = [];
|
|
// for (var i = 2011; i < 2017; i++) {
|
|
// data.push(i + "年");
|
|
// }
|
|
// return data;
|
|
// }();
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = ['图书馆', '文化馆', '博物馆']
|
|
var data = [
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150],
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100],
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
var series = [];
|
|
for (var i = 0; i < 6; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
top: 0,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: name
|
|
},
|
|
title: {
|
|
// text: "负面言论分领域趋势",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '22',
|
|
fontWeight: 'normal',
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: '16',
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 240,
|
|
bottom: 240,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
ty_bar3() {
|
|
var chartDom = document.getElementById("pcgchart2");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
// var xData = function() {
|
|
// var data = [];
|
|
// for (var i = 2011; i < 2017; i++) {
|
|
// data.push(i + "年");
|
|
// }
|
|
// return data;
|
|
// }();
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = ['体育场', '体育馆', '游泳场馆']
|
|
var data = [
|
|
[0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790],
|
|
[0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350],
|
|
[0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
var series = [];
|
|
for (var i = 0; i < 6; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{
|
|
name: '最大值',
|
|
type: 'max'
|
|
}
|
|
]
|
|
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
top: 270,
|
|
right: 0,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: name
|
|
},
|
|
title: {
|
|
// text: "负面言论分领域趋势",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '22',
|
|
fontWeight: 'normal',
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: '16',
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 230,
|
|
bottom: 240,
|
|
right: 20,
|
|
left: 36,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
splitNumber: 10,
|
|
// interval:4.10,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
addNumber(start, end, id) {
|
|
var o = document.getElementById(id);
|
|
var i = start;
|
|
var Interval;
|
|
if (i < end) {
|
|
Interval = setInterval(function () {
|
|
i += 4000; // 设置每次增加的动态数字，可调整
|
|
if (i > end) {
|
|
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
|
|
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
|
|
i = 0;
|
|
} else {
|
|
o.innerHTML = i.toLocaleString();
|
|
}
|
|
}, 10); // 数据跳转的速度控制
|
|
}
|
|
},
|
|
getVideo() {
|
|
let that = this
|
|
console.log(that);
|
|
homeApi.allGetVideo().then(res => {
|
|
// get allTimeData
|
|
console.log(res);
|
|
const tmpdata = res.data.videoData
|
|
console.log(tmpdata);
|
|
this.decode(tmpdata)
|
|
console.log(this.decode(tmpdata));
|
|
let baseviode = this.decode(tmpdata)
|
|
this.decode(baseviode)
|
|
console.log(this.decode(baseviode));
|
|
let baseviodejson = this.decode2(baseviode)
|
|
var jsonParseJson = JSON.parse(baseviodejson);
|
|
console.log(jsonParseJson);
|
|
this.videoData = jsonParseJson
|
|
// this.day_num = tmpdata.day.noRepeatInNum
|
|
// this.week_num_num = tmpdata.week.noRepeatInNum
|
|
// this.mon_num = tmpdata.month.noRepeatInNum
|
|
// this.year_num = tmpdata.year.noRepeatInNum
|
|
|
|
// let btdata = new Array();
|
|
// let bvdata = new Array();
|
|
// tmpdata.foreach(function(item,index){
|
|
// console.log(item);
|
|
// console.log(index);
|
|
// });
|
|
|
|
});
|
|
},
|
|
decode(str) {
|
|
if (str === undefined || str === "" || str === null) {
|
|
return str;
|
|
}
|
|
// Going backwards: from bytestream, to percent-encoding, to original string.
|
|
return decodeURIComponent(atob(str).split('').map(function (c) {
|
|
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
|
}).slice(0, -2).join(''));
|
|
},
|
|
decode2(str) {
|
|
if (str === undefined || str === "" || str === null) {
|
|
return str;
|
|
}
|
|
// Going backwards: from bytestream, to percent-encoding, to original string.
|
|
return decodeURIComponent(atob(str).split('').map(function (c) {
|
|
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
|
}).join(''));
|
|
},
|
|
|
|
// 创建播放实例
|
|
initPlugin() {
|
|
let _that = this;
|
|
const oWebControl0 = new window.WebControl({
|
|
szPluginContainer: 'camera0', // 指定容器id
|
|
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
|
iServicePortEnd: 15900,
|
|
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
|
|
cbConnectSuccess() {
|
|
console.log('创建WebControl实例成功');
|
|
oWebControl0.JS_StartService('window', {
|
|
// WebControl实例创建成功后需要启动服务
|
|
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
|
|
})
|
|
.then(
|
|
() => {
|
|
// // 启动插件服务成功
|
|
// oWebControl0.JS_SetWindowControlCallback({
|
|
// // 设置消息回调
|
|
// cbIntegrationCallBack: _that.cbIntegrationCallBack,
|
|
// });
|
|
oWebControl0.JS_CreateWnd('camera0').then(() => {
|
|
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
|
_that.init(); // 创建播放实例成功后初始化
|
|
console.log('111111111');
|
|
|
|
});
|
|
},
|
|
() => {
|
|
// 启动插件服务失败
|
|
console.log('启动插件服务失败');
|
|
}
|
|
)
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
cbConnectError() {
|
|
// 创建WebControl实例失败
|
|
console.log('xxx');
|
|
oWebControl0 = null;
|
|
$('#camera0').html('插件未启动，正在尝试启动，请稍候...');
|
|
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
|
|
this.initCount++;
|
|
if (this.initCount < 3) {
|
|
setTimeout(function () {
|
|
this.initPlugin();
|
|
}, 3000);
|
|
} else {
|
|
$('#camera0').html('插件启动失败，请检查插件是否安装！');
|
|
}
|
|
},
|
|
cbConnectClose(bNormalClose) {
|
|
// 异常断开：bNormalClose = false
|
|
// JS_Disconnect正常断开：bNormalClose = true
|
|
console.log('cbConnectClose');
|
|
oWebControl0 = null;
|
|
},
|
|
});
|
|
this.oWebControl0 = oWebControl0;
|
|
},
|
|
initPlugin2() {
|
|
let _that = this;
|
|
const oWebControl1 = new window.WebControl({
|
|
szPluginContainer: 'camera1', // 指定容器id
|
|
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
|
iServicePortEnd: 15900,
|
|
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
|
|
cbConnectSuccess() {
|
|
console.log('创建WebControl实例成功');
|
|
oWebControl1.JS_StartService('window', {
|
|
// WebControl实例创建成功后需要启动服务
|
|
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
|
|
})
|
|
.then(
|
|
() => {
|
|
// // 启动插件服务成功
|
|
// oWebControl1.JS_SetWindowControlCallback({
|
|
// // 设置消息回调
|
|
// cbIntegrationCallBack: _that.cbIntegrationCallBack,
|
|
// });
|
|
oWebControl1.JS_CreateWnd('camera1').then(() => {
|
|
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
|
_that.init2(); // 创建播放实例成功后初始化
|
|
console.log('22222222222');
|
|
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
});;
|
|
},
|
|
() => {
|
|
// 启动插件服务失败
|
|
console.log('启动插件服务失败');
|
|
}
|
|
)
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
cbConnectError() {
|
|
// 创建WebControl实例失败
|
|
console.log('xxx');
|
|
oWebControl1 = null;
|
|
$('#camera1').html('插件未启动，正在尝试启动，请稍候...');
|
|
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
|
|
this.initCount++;
|
|
if (this.initCount < 3) {
|
|
setTimeout(function () {
|
|
this.initPlugin2();
|
|
}, 3000);
|
|
} else {
|
|
$('#camera1').html('插件启动失败，请检查插件是否安装！');
|
|
}
|
|
},
|
|
cbConnectClose(bNormalClose) {
|
|
// 异常断开：bNormalClose = false
|
|
// JS_Disconnect正常断开：bNormalClose = true
|
|
console.log('cbConnectClose');
|
|
oWebControl1 = null;
|
|
},
|
|
});
|
|
this.oWebControl1 = oWebControl1;
|
|
},
|
|
initPlugin3() {
|
|
let _that = this;
|
|
const oWebControl2 = new window.WebControl({
|
|
szPluginContainer: 'camera2', // 指定容器id
|
|
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
|
iServicePortEnd: 15900,
|
|
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
|
|
cbConnectSuccess() {
|
|
console.log('创建WebControl实例成功');
|
|
oWebControl2.JS_StartService('window', {
|
|
// WebControl实例创建成功后需要启动服务
|
|
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
|
|
})
|
|
.then(
|
|
() => {
|
|
// // 启动插件服务成功
|
|
// oWebControl2.JS_SetWindowControlCallback({
|
|
// // 设置消息回调
|
|
// cbIntegrationCallBack: _that.cbIntegrationCallBack,
|
|
// });
|
|
oWebControl2.JS_CreateWnd('camera2').then(() => {
|
|
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
|
_that.init3(); // 创建播放实例成功后初始化
|
|
console.log('3333333333');
|
|
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
});;
|
|
},
|
|
() => {
|
|
// 启动插件服务失败
|
|
console.log('启动插件服务失败');
|
|
}
|
|
)
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
cbConnectError() {
|
|
// 创建WebControl实例失败
|
|
console.log('xxx');
|
|
oWebControl2 = null;
|
|
$('#camera2').html('插件未启动，正在尝试启动，请稍候...');
|
|
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
|
|
this.initCount++;
|
|
if (this.initCount < 3) {
|
|
setTimeout(function () {
|
|
this.initPlugin3();
|
|
}, 3000);
|
|
} else {
|
|
$('#camera2').html('插件启动失败，请检查插件是否安装！');
|
|
}
|
|
},
|
|
cbConnectClose(bNormalClose) {
|
|
// 异常断开：bNormalClose = false
|
|
// JS_Disconnect正常断开：bNormalClose = true
|
|
console.log('cbConnectClose');
|
|
oWebControl2 = null;
|
|
},
|
|
});
|
|
this.oWebControl2 = oWebControl2;
|
|
},
|
|
//初始化
|
|
init() {
|
|
let _that = this;
|
|
_that.getPubKey(function () {
|
|
// 请自行修改以下变量值
|
|
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
|
|
var secret = _that.setEncrypt("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
|
|
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
|
|
var playMode = 0; //初始播放模式：0-预览，1-回放
|
|
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
|
// var snapDir = ""; //抓图存储路径
|
|
// var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
|
var layout = "1x1"; //playMode指定模式的布局
|
|
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
|
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
|
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
|
|
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
|
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
|
// 请自行修改以上变量值
|
|
_that.oWebControl0.JS_RequestInterface({
|
|
funcName: "init",
|
|
argument: JSON.stringify({
|
|
appkey: appkey, //API网关提供的appkey
|
|
secret: secret, //API网关提供的secret
|
|
ip: ip, //API网关IP地址
|
|
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
|
port: port, //端口
|
|
// snapDir: snapDir, //抓图存储路径
|
|
// videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
|
layout: layout, //布局
|
|
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
|
encryptedFields: encryptedFields, //加密字段
|
|
showToolbar: showToolbar, //是否显示工具栏
|
|
showSmart: showSmart, //是否显示智能信息
|
|
buttonIDs: buttonIDs, //自定义工具条按钮
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
let width = document.querySelector("#camera0").offsetWidth;
|
|
let height = document.querySelector("#camera0").offsetHeight;
|
|
_that.oWebControl0.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
|
|
console.log(oData);
|
|
console.log(width,height);
|
|
_that.getVideoFun('05edddc148b141c5930301af43154942')
|
|
});
|
|
});
|
|
},
|
|
init2() {
|
|
let _that = this;
|
|
this.getPubKey2(function () {
|
|
// 请自行修改以下变量值
|
|
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
|
|
var secret = _that.setEncrypt2("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
|
|
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
|
|
var playMode = 0; //初始播放模式：0-预览，1-回放
|
|
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
|
// var snapDir = ""; //抓图存储路径
|
|
// var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
|
var layout = "1x1"; //playMode指定模式的布局
|
|
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
|
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
|
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
|
|
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
|
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
|
// 请自行修改以上变量值
|
|
_that.oWebControl1.JS_RequestInterface({
|
|
funcName: "init",
|
|
argument: JSON.stringify({
|
|
appkey: appkey, //API网关提供的appkey
|
|
secret: secret, //API网关提供的secret
|
|
ip: ip, //API网关IP地址
|
|
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
|
port: port, //端口
|
|
// snapDir: snapDir, //抓图存储路径
|
|
// videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
|
layout: layout, //布局
|
|
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
|
encryptedFields: encryptedFields, //加密字段
|
|
showToolbar: showToolbar, //是否显示工具栏
|
|
showSmart: showSmart, //是否显示智能信息
|
|
buttonIDs: buttonIDs, //自定义工具条按钮
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
let width2 = document.querySelector("#camera1").offsetWidth;
|
|
let height2 = document.querySelector("#camera1").offsetHeight;
|
|
_that.oWebControl1.JS_Resize(width2, height2); // 初始化后resize一次，能和盒子大小一致。
|
|
console.log(oData);
|
|
console.log(width2,height2);
|
|
_that.getVideoFun2('05edddc148b141c5930301af43154942')
|
|
});
|
|
});
|
|
},
|
|
init3() {
|
|
let _that = this;
|
|
this.getPubKey3(function () {
|
|
// 请自行修改以下变量值
|
|
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
|
|
var secret = _that.setEncrypt3("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
|
|
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
|
|
var playMode = 0; //初始播放模式：0-预览，1-回放
|
|
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
|
// var snapDir = ""; //抓图存储路径
|
|
// var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
|
var layout = "1x1"; //playMode指定模式的布局
|
|
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
|
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
|
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
|
|
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
|
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
|
// 请自行修改以上变量值
|
|
_that.oWebControl2.JS_RequestInterface({
|
|
funcName: "init",
|
|
argument: JSON.stringify({
|
|
appkey: appkey, //API网关提供的appkey
|
|
secret: secret, //API网关提供的secret
|
|
ip: ip, //API网关IP地址
|
|
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
|
port: port, //端口
|
|
// snapDir: snapDir, //抓图存储路径
|
|
// videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
|
layout: layout, //布局
|
|
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
|
encryptedFields: encryptedFields, //加密字段
|
|
showToolbar: showToolbar, //是否显示工具栏
|
|
showSmart: showSmart, //是否显示智能信息
|
|
buttonIDs: buttonIDs, //自定义工具条按钮
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
let width3 = document.querySelector("#camera2").offsetWidth;
|
|
let height3 = document.querySelector("#camera2").offsetHeight;
|
|
_that.oWebControl2.JS_Resize(width3, height3); // 初始化后resize一次，能和盒子大小一致。
|
|
console.log(oData);
|
|
console.log(width3,height3);
|
|
_that.getVideoFun3('05edddc148b141c5930301af43154942')
|
|
});
|
|
});
|
|
},
|
|
// 设置窗口控制回调
|
|
setCallbacks() {
|
|
console.log(this.oWebControl);
|
|
this.oWebControl.JS_SetWindowControlCallback({
|
|
cbIntegrationCallBack: this.cbIntegrationCallBack,
|
|
});
|
|
},
|
|
// 推送消息
|
|
cbIntegrationCallBack(oData) {
|
|
//操作抓图录像时可以打印信息
|
|
console.log(oData);
|
|
},
|
|
//获取公钥
|
|
getPubKey(callback) {
|
|
this.oWebControl0.JS_RequestInterface({
|
|
funcName: "getRSAPubKey",
|
|
argument: JSON.stringify({
|
|
keyLength: 1024,
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
if (oData.responseMsg.data) {
|
|
this.pubKey0 = oData.responseMsg.data;
|
|
console.log(this.pubKey0);
|
|
callback();
|
|
}
|
|
});
|
|
},
|
|
getPubKey2(callback) {
|
|
this.oWebControl1.JS_RequestInterface({
|
|
funcName: "getRSAPubKey",
|
|
argument: JSON.stringify({
|
|
keyLength: 1024,
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
if (oData.responseMsg.data) {
|
|
this.pubKey1 = oData.responseMsg.data;
|
|
console.log(this.pubKey1);
|
|
callback();
|
|
}
|
|
});
|
|
},
|
|
getPubKey3(callback) {
|
|
this.oWebControl2.JS_RequestInterface({
|
|
funcName: "getRSAPubKey",
|
|
argument: JSON.stringify({
|
|
keyLength: 1024,
|
|
}),
|
|
})
|
|
.then((oData) => {
|
|
if (oData.responseMsg.data) {
|
|
this.pubKey2 = oData.responseMsg.data;
|
|
console.log(this.pubKey2);
|
|
callback();
|
|
}
|
|
});
|
|
},
|
|
//RSA加密
|
|
setEncrypt(value) {
|
|
var encrypt = new window.JSEncrypt();
|
|
encrypt.setPublicKey(this.pubKey0);
|
|
return encrypt.encrypt(value);
|
|
},
|
|
setEncrypt2(value) {
|
|
var encrypt2 = new window.JSEncrypt();
|
|
encrypt2.setPublicKey(this.pubKey1);
|
|
return encrypt2.encrypt(value);
|
|
},
|
|
setEncrypt3(value) {
|
|
var encrypt3 = new window.JSEncrypt();
|
|
encrypt3.setPublicKey(this.pubKey2);
|
|
return encrypt3.encrypt(value);
|
|
},
|
|
//视频预览功能
|
|
getVideoFun(Code) {
|
|
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
|
|
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
|
|
var streamMode = 1; //主子码流标识：0-主码流，1-子码流
|
|
var transMode = 1; //传输协议：0-UDP，1-TCP
|
|
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
|
|
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
|
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
|
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
|
console.log(cameraIndexCode);
|
|
this.oWebControl0.JS_RequestInterface({
|
|
funcName: "startPreview",
|
|
argument: JSON.stringify({
|
|
cameraIndexCode: cameraIndexCode, //监控点编号
|
|
streamMode: streamMode, //主子码流标识
|
|
transMode: transMode, //传输协议
|
|
gpuMode: gpuMode, //是否开启GPU硬解
|
|
wndId: wndId, //可指定播放窗口
|
|
}),
|
|
})
|
|
.then((res) => {
|
|
// 播放成功回调
|
|
console.log('播放成功')
|
|
console.log(res);
|
|
},
|
|
err => {
|
|
console.log('播放失败')
|
|
console.log(preUrl);
|
|
// console.info('JS_Play failed:', err)
|
|
console.info(err)
|
|
});
|
|
},
|
|
getVideoFun2(Code) {
|
|
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
|
|
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
|
|
var streamMode = 1; //主子码流标识：0-主码流，1-子码流
|
|
var transMode = 1; //传输协议：0-UDP，1-TCP
|
|
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
|
|
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
|
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
|
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
|
console.log(cameraIndexCode);
|
|
this.oWebControl1.JS_RequestInterface({
|
|
funcName: "startPreview",
|
|
argument: JSON.stringify({
|
|
cameraIndexCode: cameraIndexCode, //监控点编号
|
|
streamMode: streamMode, //主子码流标识
|
|
transMode: transMode, //传输协议
|
|
gpuMode: gpuMode, //是否开启GPU硬解
|
|
wndId: wndId, //可指定播放窗口
|
|
}),
|
|
})
|
|
.then((res) => {
|
|
// 播放成功回调
|
|
console.log('播放成功111111111')
|
|
console.log(res);
|
|
},
|
|
err => {
|
|
console.log('播放失败')
|
|
console.log(preUrl);
|
|
// console.info('JS_Play failed:', err)
|
|
console.info(err)
|
|
});
|
|
},
|
|
getVideoFun3(Code) {
|
|
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
|
|
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
|
|
var streamMode = 1; //主子码流标识：0-主码流，1-子码流
|
|
var transMode = 1; //传输协议：0-UDP，1-TCP
|
|
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
|
|
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
|
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
|
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
|
console.log(cameraIndexCode);
|
|
this.oWebControl2.JS_RequestInterface({
|
|
funcName: "startPreview",
|
|
argument: JSON.stringify({
|
|
cameraIndexCode: cameraIndexCode, //监控点编号
|
|
streamMode: streamMode, //主子码流标识
|
|
transMode: transMode, //传输协议
|
|
gpuMode: gpuMode, //是否开启GPU硬解
|
|
wndId: wndId, //可指定播放窗口
|
|
}),
|
|
})
|
|
.then((res) => {
|
|
// 播放成功回调
|
|
console.log('播放成功22222222222')
|
|
console.log(res);
|
|
},
|
|
err => {
|
|
console.log('播放失败')
|
|
console.log(preUrl);
|
|
// console.info('JS_Play failed:', err)
|
|
console.info(err)
|
|
});
|
|
},
|
|
//停止全部预览
|
|
stopVideoFun() {
|
|
this.oWebControl0.JS_RequestInterface({
|
|
funcName: "stopAllPreview",
|
|
});
|
|
},
|
|
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
|
|
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
|
|
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
|
|
destroyVideoDiv() {
|
|
this.oWebControl2.JS_DestroyWnd()
|
|
.then((data) => {
|
|
console.log("销毁窗口成功");
|
|
})
|
|
.catch((err) => {
|
|
console.log("销毁窗口失败");
|
|
});
|
|
},
|
|
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
|
|
zhuaPicFun() {
|
|
this.oWebControl2.JS_RequestInterface({
|
|
funcName: "snapShot",
|
|
argument: {
|
|
name: "D:\test.jpg", // 窗口布局
|
|
},
|
|
});
|
|
},
|
|
|
|
},
|
|
// beforeDestroy() {
|
|
// this.player.destory();
|
|
// }
|
|
|
|
// },
|
|
};
|
|
</script>
|
|
<style>
|
|
.ty_bg {
|
|
clear: both;
|
|
background-image: url("../../assets/ty/tybg.jpg") !important;
|
|
}
|
|
|
|
.screen-box {
|
|
background: none !important;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
|
|
.left {
|
|
width: 33%;
|
|
height: 75vh;
|
|
// height: 100%;
|
|
// border: 1px solid red;
|
|
// margin-left: 2%;
|
|
margin-top: -4%;
|
|
|
|
.tiyuBla {
|
|
width: 100%;
|
|
height: 40%;
|
|
background-image: url("../../assets/ty/ins_title_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
color: white;
|
|
font-size: 38px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
.wh_small {
|
|
padding-top: 12px;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
color: white;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
}
|
|
}
|
|
|
|
.tongji {
|
|
width: 100%;
|
|
// float: left;
|
|
height: 2.4rem;
|
|
background-image: url("../../assets/wh/ins_count.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 0.48rem;
|
|
|
|
.institle {
|
|
color: #00c6ff;
|
|
padding-left: 0.9rem;
|
|
line-height: 0.38rem;
|
|
height: 0.38rem;
|
|
display: block;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.insval {
|
|
width: 30%;
|
|
height: 1.68rem;
|
|
float: left;
|
|
margin-left: 0.16rem;
|
|
}
|
|
|
|
.insval:first {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.insval img {
|
|
padding-top: 0.268rem;
|
|
display: block;
|
|
text-align: center;
|
|
height: 0.78rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.insval span {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.insval .insv {
|
|
height: 0.48rem;
|
|
line-height: 0.18rem;
|
|
font-size: 22px;
|
|
color: white;
|
|
}
|
|
|
|
.insval .inst {
|
|
color: #6a6c7c;
|
|
font-size: 12px;
|
|
height: 0.12rem;
|
|
line-height: 0.12rem;
|
|
}
|
|
}
|
|
|
|
.dinszone {
|
|
margin-top: 0.22rem;
|
|
width: 100%;
|
|
height: 0.48rem;
|
|
float: left;
|
|
}
|
|
|
|
.dinszone .dins_title {
|
|
display: block;
|
|
height: 0.58rem;
|
|
line-height: 0.44rem;
|
|
color: #fff;
|
|
font-size: 0.2rem;
|
|
background-image: url('../../assets/wh/dins_title_bg.png');
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
padding-left: 0.96rem;
|
|
}
|
|
|
|
.bfb {
|
|
width: 100%;
|
|
height: 25%;
|
|
background-image: url("../../assets/ty/pins_bh.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.renshu {
|
|
span {
|
|
margin-right: 5px;
|
|
|
|
img {
|
|
width: 10px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 10%;
|
|
color: #8199bd;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.num {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 6%;
|
|
}
|
|
|
|
.cntTxt {
|
|
width: 20%;
|
|
height: 60%;
|
|
// border: 1px solid red;
|
|
position: absolute;
|
|
top: -5%;
|
|
left: 30.5%;
|
|
text-align: center;
|
|
padding-top: 2.5%;
|
|
}
|
|
|
|
.rsType {
|
|
width: 30%;
|
|
height: 35%;
|
|
// border: 1px solid red;
|
|
position: absolute;
|
|
top: 30%;
|
|
right: 4%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.typeItem {
|
|
width: 30%;
|
|
height: 95%;
|
|
text-align: center;
|
|
color: #687c9e;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.center {
|
|
margin-top: 3%;
|
|
width: 30%;
|
|
height: 72vh;
|
|
// border: 1px solid #019ade;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
background-image: url("../../assets/ty/vbig_bg.png");
|
|
background-size: 100% 90%;
|
|
background-repeat: no-repeat;
|
|
|
|
.item {
|
|
width: 70%;
|
|
height: 34%;
|
|
|
|
background-image: url("../../assets/ty/vsmall_bg.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
|
|
&:nth-child(1) {
|
|
margin-top: -65px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-top: 3%;
|
|
width: 33%;
|
|
height: 76vh;
|
|
|
|
.pcgrliu {
|
|
width: 100%;
|
|
// width: 634px;
|
|
// height: 290px;
|
|
flex: 1;
|
|
|
|
.venue_proportion_box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: #00A7FF;
|
|
font-size: 13px;
|
|
|
|
.venue_proportion {
|
|
flex: 1;
|
|
// text-align: center;
|
|
|
|
|
|
.venue_proportion_top {
|
|
text-align: center;
|
|
width: 75%;
|
|
height: 9vh;
|
|
line-height: 9vh;
|
|
margin: 0 auto;
|
|
background-image: url('../../assets/ty/右1-4.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.venue_proportion_box_num {
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: block;
|
|
width: 60%;
|
|
height: 9vh;
|
|
line-height: 9vh;
|
|
margin: 0 auto;
|
|
background-image: url('../../assets/ty/右1-3.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.venue_proportion_bo {
|
|
|
|
text-align: center;
|
|
width: 50%;
|
|
height: 3vh;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
background-image: url('../../assets/ty/右1-5.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
span {
|
|
line-height: 3vh;
|
|
}
|
|
|
|
// img {
|
|
// margin-left: 48px;
|
|
// }
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.pcg_title {
|
|
display: block;
|
|
height: 4vh;
|
|
line-height: 3vh;
|
|
background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 center;
|
|
padding-left: 0.98rem;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.charts {
|
|
width: 225px;
|
|
height: 150px;
|
|
}
|
|
|
|
.charts1 {
|
|
width: 550px;
|
|
height: 250px;
|
|
}
|
|
|
|
}
|
|
</style>
|