pc-master #107
@ -1798,6 +1798,10 @@
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom.videoMonitoring-monitor {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom > div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
2
src/assets/css/main.min.css
vendored
2
src/assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1899,7 +1899,9 @@
|
||||
.realTime-bottom {
|
||||
height: 350px;
|
||||
margin-top: 30px;
|
||||
|
||||
&.videoMonitoring-monitor{
|
||||
justify-content: space-between;
|
||||
}
|
||||
>div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -46,6 +46,10 @@ const routes = [
|
||||
path: '/formula',
|
||||
name: 'formula',
|
||||
component: () => import('../views/page/formula.vue')
|
||||
},{
|
||||
path: '/videoMonitoring',
|
||||
name: 'videoMonitoring',
|
||||
component: () => import('../views/page/videoMonitoring.vue')
|
||||
},{
|
||||
path: '/irrigateSet',
|
||||
name: 'irrigateSet',
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
// { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
|
||||
{ name: '设定值参数', router: 'status', index: 1, routerList: ['status','exitSettings', 'skylight','systemSet-con', 'fan', 'upload-con', 'sensorSet-con','alarmSettings', 'synthesis-con','waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval',"targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
|
||||
{ name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
|
||||
{ name: '视频监控', router: '', routerList: [], img: require('../assets/image/header-img2.png') },
|
||||
{ name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
|
||||
// history history
|
||||
{ name: '历史数据', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img3.png') },
|
||||
//dataAnalysis dataAnalysis
|
||||
@ -79,9 +79,9 @@ export default {
|
||||
activeNames: [3],
|
||||
leftList: [
|
||||
{ name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
|
||||
{ name: '温室', routerList: ['realTime','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] },
|
||||
{ name: '温室', routerList: ['realTime','exitSettings','videoMonitoring', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] },
|
||||
// { name: '二号温室', img: require('../assets/image/left-img1.png'), list: [] },
|
||||
{ name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
|
||||
{ name: '施肥机', routerList: ['formula', 'irrigateSet','videoMonitoring', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
|
||||
{ name: '生态气象站', routerList: ['realTime','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img3.png'), list: [] },
|
||||
],
|
||||
|
||||
@ -291,7 +291,7 @@ export default {
|
||||
} else if (item.router == 'dataAnalysis' && this.$route.query.index != item.index) {
|
||||
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
|
||||
|
||||
} else if (this.routerNow == 'realTime' && item.router == 'status' && (this.deviceName == '10'||this.deviceName == '30')) {
|
||||
} else if (item.router == 'status' && (this.deviceName == '10'||this.deviceName == '30')) {
|
||||
this.$router.push({ path: `/control` })
|
||||
} else if (item.router == 'realTime') {
|
||||
|
||||
|
||||
123
src/views/page/videoMonitoring.vue
Normal file
123
src/views/page/videoMonitoring.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="formula realTime videoMonitoring">
|
||||
<div class="page-content new-data">
|
||||
<div class="table-title">
|
||||
<img src="../../assets/image/real-time.png" alt="" />
|
||||
{{deviceTypeName}}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
|
||||
</div>
|
||||
<div class="flex-list realTime-bottom videoMonitoring-monitor">
|
||||
<div class="left-view" v-if="deviceName != 30">
|
||||
<div ref="monitor" class="monitor" id="monitor">
|
||||
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
|
||||
<div ref="videoPlayer" class="video-js" id="video-js"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EZUIKit from 'ezuikit-js';
|
||||
import videojs from 'video.js';
|
||||
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
deviceTypeName:'',
|
||||
deviceName:'',
|
||||
deviceState:1,
|
||||
statusInterval: null,//status状态的Interval
|
||||
player: null,
|
||||
url: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(newVal, oldVal) {
|
||||
const that = this;
|
||||
const store = this.$store.state
|
||||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||||
clearInterval(this.statusInterval) && this.statusInterval
|
||||
setTimeout(() => {
|
||||
|
||||
if (this.player) {
|
||||
this.player.stop()
|
||||
that.player.destroy()
|
||||
that.player = null
|
||||
}
|
||||
that.dataInit();
|
||||
|
||||
|
||||
}, 0);
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
const that = this;
|
||||
// 销毁播放器
|
||||
if (this.player) {
|
||||
// this.player.dispose();
|
||||
this.player.stop()
|
||||
this.player.destroy()
|
||||
this.player = null
|
||||
}
|
||||
clearInterval(this.statusInterval) && this.statusInterval
|
||||
},
|
||||
mounted(){
|
||||
const that = this;
|
||||
const store = this.$store.state
|
||||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||||
setTimeout(() => {
|
||||
that.dataInit();
|
||||
}, 0);
|
||||
},
|
||||
methods:{
|
||||
createVideoNew(accessToken) {
|
||||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||||
let divW = this.$refs.monitor.clientWidth
|
||||
let divH = this.$refs.monitor.clientHeight
|
||||
this.player = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-js', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: this.url,
|
||||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||
template: 'security',
|
||||
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||||
})
|
||||
},
|
||||
dataInit(){
|
||||
const store = this.$store.state
|
||||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||||
var data2 = {
|
||||
cameraid: nowDevice.cameraSerialNumber,
|
||||
channelid: nowDevice.cameraChannelNumber
|
||||
}
|
||||
if (!this.player) {
|
||||
this.api.getGethls(data2).then(res => {
|
||||
// console.log(res.data, 11);
|
||||
if (res.data.code == 200) {
|
||||
this.url = res.data.data.ezopen
|
||||
this.createVideoNew(res.data.data.accesstoken)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user