chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-04-18 16:07:03 +08:00
parent c4cdef7b3d
commit 7dc413a6dc
17 changed files with 428 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -10,6 +10,7 @@
"amfe-flexible": "^2.2.1",
"axios": "^1.1.3",
"core-js": "^2.6.5",
"easy-player": "^2.2.7",
"echarts": "^5.4.0",
"echarts-gl": "^2.0.5",
"element-ui": "^2.15.6",

40
public/video/EasyPlayer-element.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
public/video/EasyPlayer.wasm Normal file
View File

Binary file not shown.

6
public/video/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

124
public/video/video.html Normal file
View File

@ -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>

BIN
public/video/video.mp4 Normal file
View File

Binary file not shown.

BIN
public/video/video1.mp4 Normal file
View File

Binary file not shown.

3
src/App.vue
View File

@ -216,7 +216,7 @@ import {getData} from './api/index.js'
#app {
// width: 6144px;
// height: 1920px;
background: rgba(1, 1, 7, 1);
background: rgba(1, 1, 7, 0.6);
// overflow: hidden;
.header {
height: 11%;
@ -248,7 +248,6 @@ import {getData} from './api/index.js'
.right {
width: 25%;
height: 100%;
.quit {
height: 38%;
display: flex;

BIN
src/assets/images/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/images/control.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/images/leftBtn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/images/reduce.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/images/rightBtn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

4
src/utils/mqttConfig.js
View File

@ -16,8 +16,8 @@ class mqttHandle {
host: '138.227.111.141',
port: '8083',
// 认证信息
// clientId: Number(new Date()).toString(),
clientId: 'JBFY',
clientId: Number(new Date()).toString(),
// clientId: 'JBFY',
username: "admin",
password: "123456",
}

288
src/views/energySaving.vue
View File

@ -6,8 +6,7 @@
设备用能统计数据
<img src="../assets/images/moreBg.png" @click="equipmentMore" />
</div>
<div class="equipment">
<div
<!-- <div
class="equipmentEnergy"
v-for="(item, index) in equipmentList"
:key="index"
@ -21,8 +20,27 @@
<div class="equipmentName">
{{ item.name }}
</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>
</el-carousel-item>
</el-carousel>
</div>
<div class="leftTwo">
<div class="title" style="height: 8%">设备预警信息列表</div>
@ -165,51 +183,108 @@ export default {
data() {
return {
equipmentList: [
{
name: "热回收机组1",
count: "28.4",
value: "",
},
{
name: "热回收机组2",
count: "28.4",
value: "",
},
{
name: "热回收机组3",
count: "28.4",
value: "",
},
{
name: "热回收机组4",
count: "28.4",
value: "",
},
{
name: "热回收机组5",
count: "28.4",
value: "",
},
{
name: "热回收机组6",
count: "28.4",
value: "",
},
{
name: "热回收机组7",
count: "28.4",
value: "",
},
{
name: "热回收机组8",
count: "28.4",
value: "",
},
{
name: "热回收机组9",
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",
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",
value: "",
},
], //设备用能数据
equipmentBtnList: [
{
@ -298,12 +373,19 @@ export default {
},
],
equipmentShow: false,
equipmentList1:[],
};
},
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.calculateEchartsTwo();
window.createMqtt = this.createMqtt();
console.log(this.equipmentList1,'================');
},
methods: {
//mqtt订阅数据
@ -324,11 +406,11 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
// if ( msg.params.设备运行状态 == 1) {
// msg.params.设备运行状态 = '正常'
// }else{
// msg.params.设备运行状态 = '异常'
// }
if (msg.params.设备运行状态 == 1) {
msg.params.设备运行状态 = "正常";
} else {
msg.params.设备运行状态 = "异常";
}
that.sunList[0].count = msg.params.光伏逆变器日发电量;
that.sunList[1].count = msg.params.光伏逆变器总发电量;
that.sunList[2].count = msg.params.有功功率;
@ -797,56 +879,69 @@ export default {
flex-wrap: wrap;
overflow: auto;
position: relative;
/deep/ .el-carousel__container {
height: 100%;
width: 100%;
}
/deep/ .el-carousel__indicators--horizontal{
display: none;
}
.equipmentEnergy {
width: 25%;
height: 50%;
display: inline-block;
white-space: nowrap;
animation: 10s wordsLoop linear infinite normal;
.equipmentList {
width: 100%%;
height: 80%;
background: url("../assets/images/jieNengImg/energyBack.png")
no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
}
.equipmentName {
height: calc(100% - 80%);
width: 100%;
color: #fff;
width: 100%;
height: 100%;
// white-space: nowrap;
// animation: 10s wordsLoop linear infinite normal;
display: flex;
flex-wrap: wrap;
.equipmentEnergyChild{
width: 25%;
height: 50%;
.equipmentList {
width: 100%;
height: 80%;
background: url("../assets/images/jieNengImg/energyBack.png")
no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
}
.equipmentName {
height: calc(100% - 80%);
width: 100%;
color: #fff;
}
}
}
}
::-webkit-scrollbar {
display: none;
}
}
@keyframes wordsLoop {
0% {
transform: translateY(100%);
-webkit-transform: translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateY(100%);
-webkit-transform: translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
}
// @keyframes wordsLoop {
// 0% {
// transform: translateY(100%);
// -webkit-transform: translateY(100%);
// }
// 100% {
// transform: translateY(-100%);
// -webkit-transform: translateY(-100%);
// }
// }
// @-webkit-keyframes wordsLoop {
// 0% {
// transform: translateY(100%);
// -webkit-transform: translateY(100%);
// }
// 100% {
// transform: translateY(-100%);
// -webkit-transform: translateY(-100%);
// }
// }
.leftTwo {
width: 100%;
height: calc(100% - 35%);
@ -1007,6 +1102,7 @@ export default {
width: 47.4%;
height: 60%;
border: 5px solid #01b0ca;
background: rgba(1, 1, 7, 0.5);
.equipContent {
width: 100%;
height: 90%;
@ -1060,7 +1156,7 @@ export default {
position: absolute;
top: 1%;
right: 1%;
background: url("../assets/images/quit.png") no-repeat;
background: url("../assets/images/close.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}

68
src/views/index.vue
View File

@ -205,16 +205,37 @@
class="cameraList"
v-for="(item, index) in cameraList"
: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 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="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>
</template>
@ -317,15 +338,19 @@ export default {
cameraList: [
{
icon: require("../assets/images/camera.png"),
video:'video/video.html?src='
},
{
icon: require("../assets/images/camera.png"),
video:'video/video.html?src='
},
{
icon: require("../assets/images/camera.png"),
video:'video/video.html?src='
},
{
icon: require("../assets/images/camera.png"),
video:'video/video.html?src='
},
], //摄像
cameraBig:'',
@ -333,12 +358,19 @@ export default {
};
},
mounted() {
let that = this
this.warningOne();
this.warningTwo();
this.maintenanceLeft();
this.maintenanceRight();
this.energyEcharts();
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: {
//选中图片
@ -1403,16 +1435,40 @@ export default {
height: 50%;
border: 5px solid #01b0ca;
.close{
width: 3%;
height: 5%;
width: 4%;
height: 8%;
z-index: 999;
position: absolute;
top:1%;
right:1%;
background: url("../assets/images/quit.png") no-repeat;
background: url("../assets/images/close.png") no-repeat;
background-size: 100% 100%;
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>