代码提交
This commit is contained in:
parent
c4cdef7b3d
commit
7dc413a6dc
|
|
@ -10,6 +10,7 @@
|
||||||
"amfe-flexible": "^2.2.1",
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.1.3",
|
"axios": "^1.1.3",
|
||||||
"core-js": "^2.6.5",
|
"core-js": "^2.6.5",
|
||||||
|
"easy-player": "^2.2.7",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
"echarts-gl": "^2.0.5",
|
"echarts-gl": "^2.0.5",
|
||||||
"element-ui": "^2.15.6",
|
"element-ui": "^2.15.6",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,124 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.video .iconfont .icon-snapshot {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
video::-internal-media-controls-download-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
video::-webkit-media-controls-enclosure {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
video::-webkit-media-controls-panel {
|
||||||
|
width: calc(100% + 1.875rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
video /deep/ .xl-chrome-ext-bar {
|
||||||
|
display: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.video-js .vjs-fullscreen-control{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.iconfont .icon-snapshot{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.iconfont{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.vjs-has-started .vjs-control-bar{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src="EasyPlayer-element.min.js"></script>
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<div class="video" id="appc">
|
||||||
|
<easy-player id="player" live="true" stretch show-custom-button="false"></easy-player>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/*
|
||||||
|
访问页面示例：http://127.0.0.1:5500/video.html?src=http://10.16.56.21:83/openUrl/G6oxla8/live.m3u8
|
||||||
|
页面会自动解析src后内容并播放视频
|
||||||
|
*/
|
||||||
|
function getQueryString(name) {
|
||||||
|
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
|
||||||
|
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||||
|
var r = window.location.search.substr(1).match(reg);
|
||||||
|
if (r != null) return unescape(r[2]); return null;
|
||||||
|
}
|
||||||
|
// var videoBack = 'ws://192.168.105.213:9999/play?stream=rtsp://10.16.56.21:554/openUrl/EKndeuY?beginTime=20220709T141558&endTime=20220710T141558'
|
||||||
|
// $('#player').attr('video-url',videoBack);
|
||||||
|
$('#player').attr('video-url',getQueryString('src'));
|
||||||
|
// $('#player').attr('video-url',"video.mp4");
|
||||||
|
// 截图
|
||||||
|
// function snapshot(){
|
||||||
|
// if(document.getElementsByClassName("easy-video-player-inner")[0]){
|
||||||
|
// var dom = document.getElementsByClassName("easy-video-player-inner")[0].firstChild.firstChild
|
||||||
|
// var canvas = window.canvas = document.createElement('canvas')
|
||||||
|
// canvas.width = dom.offsetWidth
|
||||||
|
// canvas.height = dom.offsetHeight
|
||||||
|
// canvas.getContext('2d')?.drawImage(dom,0,0,canvas.width,canvas.height);
|
||||||
|
// strDataUrl = canvas.toDataURL('image/png')
|
||||||
|
// downloadpic(strDataUrl)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
// function downloadpic(url){
|
||||||
|
// var a = document.createElement("a"); // 生成一个a元素
|
||||||
|
// var event = new MouseEvent("click"); // 创建一个单击事件
|
||||||
|
// a.download = "监控快照_"+new Date().toJSON()+".png"; // 设置图片名称
|
||||||
|
// a.href = url; // 将生成的URL设置为a.href属性
|
||||||
|
// a.dispatchEvent(event); // 触发a的单击事件
|
||||||
|
// }
|
||||||
|
//点击事件
|
||||||
|
$('#appc').click(function(){
|
||||||
|
let val = getQueryString('src')
|
||||||
|
window.parent.postMessage({
|
||||||
|
val
|
||||||
|
}, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -216,7 +216,7 @@ import {getData} from './api/index.js'
|
||||||
#app {
|
#app {
|
||||||
// width: 6144px;
|
// width: 6144px;
|
||||||
// height: 1920px;
|
// height: 1920px;
|
||||||
background: rgba(1, 1, 7, 1);
|
background: rgba(1, 1, 7, 0.6);
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
.header {
|
.header {
|
||||||
height: 11%;
|
height: 11%;
|
||||||
|
|
@ -248,7 +248,6 @@ import {getData} from './api/index.js'
|
||||||
.right {
|
.right {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.quit {
|
.quit {
|
||||||
height: 38%;
|
height: 38%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -16,8 +16,8 @@ class mqttHandle {
|
||||||
host: '138.227.111.141',
|
host: '138.227.111.141',
|
||||||
port: '8083',
|
port: '8083',
|
||||||
// 认证信息
|
// 认证信息
|
||||||
// clientId: Number(new Date()).toString(),
|
clientId: Number(new Date()).toString(),
|
||||||
clientId: 'JBFY',
|
// clientId: 'JBFY',
|
||||||
username: "admin",
|
username: "admin",
|
||||||
password: "123456",
|
password: "123456",
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
设备用能统计数据
|
设备用能统计数据
|
||||||
<img src="../assets/images/moreBg.png" @click="equipmentMore" />
|
<img src="../assets/images/moreBg.png" @click="equipmentMore" />
|
||||||
</div>
|
</div>
|
||||||
<div class="equipment">
|
<!-- <div
|
||||||
<div
|
|
||||||
class="equipmentEnergy"
|
class="equipmentEnergy"
|
||||||
v-for="(item, index) in equipmentList"
|
v-for="(item, index) in equipmentList"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
|
@ -21,8 +20,27 @@
|
||||||
<div class="equipmentName">
|
<div class="equipmentName">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<el-carousel class="equipment" :autoplay="true" trigger="click" :interval="10000">
|
||||||
|
<el-carousel-item
|
||||||
|
v-for="(item, index) in equipmentList1"
|
||||||
|
:key="index"
|
||||||
|
class="equipmentEnergy"
|
||||||
|
>
|
||||||
|
<div v-for="(i,k) in item" :key="k" class="equipmentEnergyChild">
|
||||||
|
<div class="equipmentList">
|
||||||
|
<span>{{ i.count }}</span>
|
||||||
|
<span style="color: rgb(225, 177, 25); font-size: 0.4rem"
|
||||||
|
>KWH</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="equipmentName">
|
||||||
|
{{ i.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
</div>
|
</div>
|
||||||
<div class="leftTwo">
|
<div class="leftTwo">
|
||||||
<div class="title" style="height: 8%">设备预警信息列表</div>
|
<div class="title" style="height: 8%">设备预警信息列表</div>
|
||||||
|
|
@ -171,42 +189,99 @@ export default {
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组2",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组3",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组4",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组5",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组6",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组7",
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组8",
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组9",
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
|
count: "28.4",
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热回收机组1",
|
||||||
count: "28.4",
|
count: "28.4",
|
||||||
value: "",
|
value: "",
|
||||||
},
|
},
|
||||||
|
|
@ -298,12 +373,19 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
equipmentShow: false,
|
equipmentShow: false,
|
||||||
|
equipmentList1:[],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
for (let i = 0; i < this.equipmentList.length; i+=8) {
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.equipmentList1.push(this.equipmentList.slice(i,i+8))
|
||||||
|
})
|
||||||
|
}
|
||||||
this.calculateEcharts();
|
this.calculateEcharts();
|
||||||
this.calculateEchartsTwo();
|
this.calculateEchartsTwo();
|
||||||
window.createMqtt = this.createMqtt();
|
window.createMqtt = this.createMqtt();
|
||||||
|
console.log(this.equipmentList1,'================');
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//mqtt订阅数据
|
//mqtt订阅数据
|
||||||
|
|
@ -324,11 +406,11 @@ export default {
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||||
console.log("msg", msg);
|
console.log("msg", msg);
|
||||||
// if ( msg.params.设备运行状态 == 1) {
|
if (msg.params.设备运行状态 == 1) {
|
||||||
// msg.params.设备运行状态 = '正常'
|
msg.params.设备运行状态 = "正常";
|
||||||
// }else{
|
} else {
|
||||||
// msg.params.设备运行状态 = '异常'
|
msg.params.设备运行状态 = "异常";
|
||||||
// }
|
}
|
||||||
that.sunList[0].count = msg.params.光伏逆变器日发电量;
|
that.sunList[0].count = msg.params.光伏逆变器日发电量;
|
||||||
that.sunList[1].count = msg.params.光伏逆变器总发电量;
|
that.sunList[1].count = msg.params.光伏逆变器总发电量;
|
||||||
that.sunList[2].count = msg.params.有功功率;
|
that.sunList[2].count = msg.params.有功功率;
|
||||||
|
|
@ -797,14 +879,25 @@ export default {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
/deep/ .el-carousel__container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/deep/ .el-carousel__indicators--horizontal{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.equipmentEnergy {
|
.equipmentEnergy {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// white-space: nowrap;
|
||||||
|
// animation: 10s wordsLoop linear infinite normal;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.equipmentEnergyChild{
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
display: inline-block;
|
|
||||||
white-space: nowrap;
|
|
||||||
animation: 10s wordsLoop linear infinite normal;
|
|
||||||
.equipmentList {
|
.equipmentList {
|
||||||
width: 100%%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
background: url("../assets/images/jieNengImg/energyBack.png")
|
background: url("../assets/images/jieNengImg/energyBack.png")
|
||||||
no-repeat;
|
no-repeat;
|
||||||
|
|
@ -822,31 +915,33 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes wordsLoop {
|
// @keyframes wordsLoop {
|
||||||
0% {
|
// 0% {
|
||||||
transform: translateY(100%);
|
// transform: translateY(100%);
|
||||||
-webkit-transform: translateY(100%);
|
// -webkit-transform: translateY(100%);
|
||||||
}
|
// }
|
||||||
100% {
|
// 100% {
|
||||||
transform: translateY(-100%);
|
// transform: translateY(-100%);
|
||||||
-webkit-transform: translateY(-100%);
|
// -webkit-transform: translateY(-100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
@-webkit-keyframes wordsLoop {
|
// @-webkit-keyframes wordsLoop {
|
||||||
0% {
|
// 0% {
|
||||||
transform: translateY(100%);
|
// transform: translateY(100%);
|
||||||
-webkit-transform: translateY(100%);
|
// -webkit-transform: translateY(100%);
|
||||||
}
|
// }
|
||||||
100% {
|
// 100% {
|
||||||
transform: translateY(-100%);
|
// transform: translateY(-100%);
|
||||||
-webkit-transform: translateY(-100%);
|
// -webkit-transform: translateY(-100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.leftTwo {
|
.leftTwo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 35%);
|
height: calc(100% - 35%);
|
||||||
|
|
@ -1007,6 +1102,7 @@ export default {
|
||||||
width: 47.4%;
|
width: 47.4%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
border: 5px solid #01b0ca;
|
border: 5px solid #01b0ca;
|
||||||
|
background: rgba(1, 1, 7, 0.5);
|
||||||
.equipContent {
|
.equipContent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
|
|
@ -1060,7 +1156,7 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1%;
|
top: 1%;
|
||||||
right: 1%;
|
right: 1%;
|
||||||
background: url("../assets/images/quit.png") no-repeat;
|
background: url("../assets/images/close.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -205,16 +205,37 @@
|
||||||
class="cameraList"
|
class="cameraList"
|
||||||
v-for="(item, index) in cameraList"
|
v-for="(item, index) in cameraList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="changeCamera(item.icon)"
|
@click="changeCamera(item.video)"
|
||||||
>
|
>
|
||||||
<img :src="item.icon" style="width: 100%; height: 100%" />
|
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
|
||||||
|
<iframe
|
||||||
|
:src="item.video+'video.mp4'"
|
||||||
|
ref="iframeRef"
|
||||||
|
frameborder="0"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="camersBig" v-show="cameraBigShow">
|
<div class="camersBig" v-show="cameraBigShow">
|
||||||
<img :src="cameraBig" style="width:100%;height:100%"/>
|
<!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
|
||||||
|
<iframe
|
||||||
|
:src="cameraBig"
|
||||||
|
ref="iframeRef"
|
||||||
|
frameborder="0"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
></iframe>
|
||||||
<div class="close" @click="closeCamer"></div>
|
<div class="close" @click="closeCamer"></div>
|
||||||
|
<div class="remoteControl">
|
||||||
|
<img src="../assets/images/add.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
|
||||||
|
<img src="../assets/images/reduce.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
|
||||||
|
</div>
|
||||||
|
<div class="remoteControl1">
|
||||||
|
<img src="../assets/images/leftBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
|
||||||
|
<img src="../assets/images/rightBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -317,15 +338,19 @@ export default {
|
||||||
cameraList: [
|
cameraList: [
|
||||||
{
|
{
|
||||||
icon: require("../assets/images/camera.png"),
|
icon: require("../assets/images/camera.png"),
|
||||||
|
video:'video/video.html?src='
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: require("../assets/images/camera.png"),
|
icon: require("../assets/images/camera.png"),
|
||||||
|
video:'video/video.html?src='
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: require("../assets/images/camera.png"),
|
icon: require("../assets/images/camera.png"),
|
||||||
|
video:'video/video.html?src='
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: require("../assets/images/camera.png"),
|
icon: require("../assets/images/camera.png"),
|
||||||
|
video:'video/video.html?src='
|
||||||
},
|
},
|
||||||
], //摄像
|
], //摄像
|
||||||
cameraBig:'',
|
cameraBig:'',
|
||||||
|
|
@ -333,12 +358,19 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
let that = this
|
||||||
this.warningOne();
|
this.warningOne();
|
||||||
this.warningTwo();
|
this.warningTwo();
|
||||||
this.maintenanceLeft();
|
this.maintenanceLeft();
|
||||||
this.maintenanceRight();
|
this.maintenanceRight();
|
||||||
this.energyEcharts();
|
this.energyEcharts();
|
||||||
window.createMqtt = this.createMqtt();
|
window.createMqtt = this.createMqtt();
|
||||||
|
window.addEventListener("message", function (e){
|
||||||
|
let val = e.data.val
|
||||||
|
if (val != null) {
|
||||||
|
that.changeCamera('video/video.html?src='+e.data.val)
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//选中图片
|
//选中图片
|
||||||
|
|
@ -1403,16 +1435,40 @@ export default {
|
||||||
height: 50%;
|
height: 50%;
|
||||||
border: 5px solid #01b0ca;
|
border: 5px solid #01b0ca;
|
||||||
.close{
|
.close{
|
||||||
width: 3%;
|
width: 4%;
|
||||||
height: 5%;
|
height: 8%;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:1%;
|
top:1%;
|
||||||
right:1%;
|
right:1%;
|
||||||
background: url("../assets/images/quit.png") no-repeat;
|
background: url("../assets/images/close.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.remoteControl{
|
||||||
|
width: 15%;
|
||||||
|
height: 27%;
|
||||||
|
position:absolute;
|
||||||
|
bottom: 2%;
|
||||||
|
right: 2%;
|
||||||
|
background: url("../assets/images/control.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.remoteControl1{
|
||||||
|
width: 15%;
|
||||||
|
height: 27%;
|
||||||
|
position:absolute;
|
||||||
|
bottom: 2%;
|
||||||
|
right: 2%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue