xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pc-master #36

Merged
xiaomeng merged 4 commits from pc-master into portal 2023-11-16 03:10:46 +00:00
Conversation 0 Commits 4 Files Changed 6 +136 -62
6 changed files with 136 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/assets/css/main.css
View File

@ -1717,10 +1717,33 @@
margin: 10px 8px 0 !important;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div.off span {
color: #00C0F7;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > span {
margin-left: 5px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
width: 16px;
height: 16px;
margin-right: 5px;
margin-right: 0px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img.fan-img {
animation: rotate 5s linear infinite;
/* 持续时间为 5 秒，线性缓动，无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
src/assets/css/main.scss
View File

@ -1814,10 +1814,30 @@
font-size: 14px;
height: 30px;
margin: 10px 8px 0 !important;
&.off{
span{
color: #00C0F7;
}
}
>span{
margin-left: 5px;
}
>img{
width: 16px;
height:16px;
margin-right: 5px;
margin-right: 0px;
&.fan-img{
animation: rotate 5s linear infinite; /* 持续时间为 5 秒，线性缓动，无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
}

BIN
src/assets/img/fan-on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

30
src/views/page/largeScreen.vue
View File

@ -96,11 +96,11 @@
<div class="liveVideo"></div>
<div class="liveVideo_content">
<div class="swiper-container mySwiper_video">
<div class="swiper-container mySwiper_video" >
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
<div class="monitor" ref="monitor" id="monitor">
<div ref="videoPlayer" class="video-js" id="video-js"></div>
<div class="monitor" :id="'monitor'+item.number">
<div ref="videoPlayer" class="video-js" :id="'video-js'+item.number"></div>
</div>
<div class="c_bottom">{{ item.deviceTypeName }}</div>
</div>
@ -335,12 +335,12 @@ export default {
},
// 获取摄像头得地址 Copy
getVideoData(cameraid, channelid) {
getVideoData(cameraid, channelid,index) {
this.api.camera_gethls(cameraid, channelid).then(res => {
// console.log('获取摄像头得地址 Copy',res);
if (res.data.code == 200) {
// this.url = res.data.data.ezopen
// this.createVideoNew(res.data.data.accessToken)
this.createVideoNew(res.data.data.accesstoken,res.data.data.ezopen,index )
// this.createVideo()
}
})
@ -351,10 +351,11 @@ export default {
this.api.sel_eqbyid(userId).then(res => {
// console.log('根据用户id查询对应的设备数据 Copy',res);
res.data.data.forEach(item => {
if (item.equipmentName == 10 && item.cameraSerialNumber != null) {
this.get_sel_eqbyid_list.push(item)
this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber)
res.data.data.forEach((item,index) => {
if ( item.cameraSerialNumber != null) {
this.get_sel_eqbyid_list.push({...item,number:index})
this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber,index)
// this.getVideoData("L18357958", "5")
}
})
@ -393,14 +394,15 @@ export default {
this.get_sel_eqbyid(userInfo.userid)
},
createVideoNew(accessToken) {
createVideoNew(accessToken,url,index) {
console.log(accessToken,url,index,111);
// divW和divH是获取了父级宽高 使播放容器能铺满div
let divW = this.$refs.monitor.clientWidth
let divH = this.$refs.monitor.clientHeight
let divW = document.getElementById('monitor'+index).clientWidth
let divH = document.getElementById('monitor'+index).clientHeight
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // 视频容器ID
id: 'video-js'+index, // 视频容器ID
accessToken: accessToken,
url: this.url,
url: url,
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
template: 'security',

119
src/views/page/realTime.vue
View File

@ -107,25 +107,30 @@
</div>
<div class="status-fan">
<div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
<img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png"
alt="">
<img v-else src="../../assets/img/fan-off.png" alt="">
1#风机
<span>1#风机</span>
</div>
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
<img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png"
alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
</div>
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
<img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png"
alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
</div>
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
<img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png"
alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
</div>
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
<img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png"
alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
</div>
</div>
</div>
@ -177,7 +182,7 @@
<div :id="'statusCharts' + index"></div>
</div>
<div class="status-true-text">
<div class="status-true-text-left">静止状态</div>
<div class="status-true-text-left">{{ getNumberStatus(item.index) }}</div>
<div class="status-true-text-right">{{ item.progress }}%</div>
</div>
</div>
@ -243,6 +248,8 @@ export default {
timer: null,
deviceName: 1,
controlList: [],
statusInterval: null,//status状态的Interval
statusTime: 3,//status状态的秒数
}
},
watch: {
@ -251,6 +258,7 @@ export default {
const store = this.$store.state
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
clearInterval(this.statusInterval) && this.statusInterval
setTimeout(() => {
if (this.player) {
@ -289,6 +297,7 @@ export default {
this.player.destroy()
this.player = null
}
clearInterval(this.statusInterval) && this.statusInterval
that.timer && clearInterval(that.timer)
this.$bus.$off('refreshTime')
},
@ -314,7 +323,19 @@ export default {
})
console.log(this.player);
},
getNumberStatus(index) {
if (index == 0) {
return '静止状态'
} else if (index == 1) {
return '正向打开中'
} else if (index == 2) {
return '反向关闭中'
} else {
return ''
}
},
createVideo() {
// 创建视频播放器
videojs.addLanguage('zh-CN', video_zhCN)
this.player = videojs(this.$refs.videoPlayer, {
@ -541,39 +562,13 @@ export default {
// console.log(this.controlList);
})
var TargetValue = {
deviceId: store.equipmentList[this.indexs - 1].deviceId
}
this.api.getControlGetState(TargetValue).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, 123123);
this.fanStatus.open = res.data.data['1023']
this.fanStatus.status = []
var num = res.data.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
this.statusList.push(statusData)
}
this.$forceUpdate();
setTimeout(() => {
this.statusList.forEach((el,index)=>{
if(el.open!=0){
statusCharts(`statusCharts${index}`,el.progress)
}
})
}, 10);
} else {
// this.$message.error(res.data.msg);
this.getStatus()
clearInterval(this.statusInterval) && this.statusInterval
this.statusInterval = setInterval(() => {
if (this.deviceName == 10) {
this.getStatus()
}
})
}, this.statusTime * 1000);
var data1 = store.equipmentList[this.indexs - 1].deviceId
this.api.getControlFsdata(data1).then(res => {
@ -607,6 +602,41 @@ export default {
}
},
getStatus() {
var store = this.$store.state
var TargetValue = {
deviceId: store.equipmentList[this.indexs - 1].deviceId
}
this.api.getControlGetState(TargetValue).then(res => {
if (res.data.code == 200) {
this.fanStatus.open = res.data.data['1023']
this.fanStatus.status = []
var num = res.data.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
this.statusList.push(statusData)
}
this.$forceUpdate();
setTimeout(() => {
this.statusList.forEach((el, index) => {
if (el.open != 0) {
statusCharts(`statusCharts${index}`, el.progress)
}
})
}, 10);
} else {
// this.$message.error(res.data.msg);
}
})
},
getTime() {
this.time = getnowtime()
const that = this
@ -657,5 +687,4 @@ export default {
border: 1px solid #dcdfe6;
color: #606266;
font-size: 14px;
}
</style>
}</style>