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

pc-master #34

Merged
xiaomeng merged 2 commits from pc-master into portal 2023-11-15 02:34:12 +00:00
Conversation 0 Commits 2 Files Changed 8
8 changed files with 11001 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10899
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -11,6 +11,7 @@
"core-js": "^3.8.3",
"echarts": "^5.4.3",
"element-ui": "^2.15.14",
"ezuikit-js": "^7.7.7",
"flv.js": "^1.6.2",
"video.js": "^7.21.5",
"videojs-contrib-hls": "^5.15.0",

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

@ -1564,26 +1564,27 @@
.realTime .page-content .realTime-list .seamless-warp .list-view {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}
.realTime .page-content .realTime-list .seamless-warp .list-view img {
width: 80px;
height: 80px;
width: 60px;
height: 60px;
}
.realTime .page-content .realTime-list .seamless-warp .list-view .text {
text-align: center;
margin: 5px 0;
font-size: 14px;
}
.realTime .page-content .realTime-list .seamless-warp .list-view .number {
width: 106px;
height: 40px;
width: 80px;
height: 30px;
background: url(../image/real-time-text.png) no-repeat center;
background-size: 100% 100%;
font-size: 20px;
font-size: 16px;
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
@ -1599,7 +1600,7 @@
}
.realTime .page-content .realTime-bottom {
height: 440px;
height: 300px;
margin-top: 30px;
}
@ -1607,8 +1608,8 @@
flex-shrink: 0;
}
.realTime .page-content .realTime-bottom .left {
width: 43%;
.realTime .page-content .realTime-bottom .left-view {
width: 35%;
height: 100%;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.35);
@ -1618,18 +1619,18 @@
padding: 10px;
}
.realTime .page-content .realTime-bottom .left > div {
.realTime .page-content .realTime-bottom .left-view > div {
width: 100%;
height: 100%;
}
.realTime .page-content .realTime-bottom .left > div .video-js {
.realTime .page-content .realTime-bottom .left-view > div .video-js {
width: 100%;
height: 100%;
}
.realTime .page-content .realTime-bottom .right {
width: calc(100% - 43%);
width: calc(100% - 35%);
min-width: 230px;
height: 100%;
}

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

@ -1647,26 +1647,28 @@
.list-view {
flex-shrink: 0;
display: flex;
flex-direction: column;
// flex-direction: column;
align-items: center;
margin-right: 20px;
img {
width: 80px;
height: 80px;
width: 60px;
height: 60px;
}
.text {
text-align: center;
margin: 5px 0;
font-size: 14px;
}
.number {
width: 106px;
height: 40px;
width: 80px;
height: 30px;
background: url(../image/real-time-text.png) no-repeat center;
background-size: 100% 100%;
font-size: 20px;
font-size: 16px;
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
@ -1689,15 +1691,15 @@
}
.realTime-bottom {
height: 440px;
height: 300px;
margin-top: 30px;
>div {
flex-shrink: 0;
}
.left {
width: 43%;
.left-view {
width: 35%;
height: 100%;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.35);
@ -1718,7 +1720,7 @@
}
.right {
width: calc(100% - 43%);
width: calc(100% - 35%);
min-width: 230px;
height: 100%;
}

BIN
src/assets/image/header-img8.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

5
src/views/index.vue
View File

@ -71,7 +71,10 @@ export default {
{ name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
//systemManage systemManage
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') }],
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
{ name: '大数据', router: '', routerList: [''], img: require('../assets/image/header-img8.png') }
],
activeNames: [3],
leftList: [
{ name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },

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

@ -1,16 +1,16 @@
<template>
<div class="formula realTime">
<div class="page-content">
<div class="control-view" v-if="deviceName == 10">
<div class="title">气象站:</div>
<vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
<div class="list-view" v-for="item, index in controlList " :key="index">
<img class="icon" :src="item.img" alt="">
{{ item.environmentDataId
}}:{{ getControlData(item) }}
</div>
</vue-seamless>
<vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
<div class="list-view" v-for="item, index in controlList " :key="index">
<img class="icon" :src="item.img" alt="">
{{ item.environmentDataId
}}:{{ getControlData(item) }}
</div>
</vue-seamless>
</div>
<!-- <div class="control-list" >
<div v-for="(item, index) in controlList" :key="index">
@ -23,7 +23,7 @@
<img src="../../assets/image/real-time.png" alt="" />
实时数据
<!-- <div class="tips">种植作物1</div> -->
</div>
<div class="timeNow" v-if="list.length">
<!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
@ -44,16 +44,19 @@
<vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
<div class="list-view" v-for="item, index in list " :key="index">
<img :src="item.img" alt="">
<div class="text">{{ item.name }}</div>
<div class="number">{{ item.num }}</div>
<div>
<div class="text">{{ item.name }}</div>
<div class="number">{{ item.num }}</div>
</div>
</div>
</vue-seamless>
</div>
<div class="flex-list realTime-bottom">
<div class="left">
<div class="monitor" id="monitor">
<video ref="videoPlayer" class="video-js"></video>
<div class="left-view">
<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 class="right" id="realTime-line"></div>
@ -62,11 +65,13 @@
</div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine } from '@/assets/js/charts'
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import vueSeamless from 'vue-seamless-scroll'
export default {
components: { vueSeamless },
computed: {
@ -115,7 +120,15 @@ export default {
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
setTimeout(() => {
if(this.player){
this.player.stop()
that.player.destroy()
that.player=null
}
that.dataInit();
}, 0);
},
},
@ -139,12 +152,33 @@ export default {
const that = this;
// 销毁播放器
if (this.player) {
this.player.dispose();
// this.player.dispose();
this.player.stop()
this.player.destroy()
this.player=null
}
that.timer && clearInterval(that.timer)
this.$bus.$off('refreshTime')
},
methods: {
createVideoNew() {
// 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: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
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
})
console.log(this.player);
},
createVideo() {
// 创建视频播放器
videojs.addLanguage('zh-CN', video_zhCN)
@ -271,7 +305,7 @@ export default {
})
})
} else {
this.$message.error(res.data.msg);
// this.$message.error(res.data.msg);
}
});
var data1 = store.equipmentList[this.indexs - 1].deviceId
@ -281,7 +315,7 @@ export default {
var chartsData = res.data.data
realTimeLine('realTime-line', chartsData)
} else {
this.$message.error(res.data.msg);
// this.$message.error(res.data.msg);
}
})
var nowDevice = store.equipmentList[this.indexs - 1]
@ -295,12 +329,15 @@ export default {
// cameraid: 'L18357958',
// channelid: '1'
// }
this.api.getGethls(data2).then(res => {
if (!this.player) {
this.api.getGethls(data2).then(res => {
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideo()
this.createVideoNew()
}
})
}
} else if (this.deviceName == 10) {
this.api.getControlRtdata(equipmentId).then((res) => {
if (res.data.code == 200) {
@ -348,7 +385,7 @@ export default {
})
})
} else {
this.$message.error(res.data.msg);
// this.$message.error(res.data.msg);
}
});
this.api.getControlRtDatastation(formData).then(res => {
@ -376,7 +413,7 @@ export default {
var chartsData = res.data.data
realTimeLine('realTime-line', chartsData)
} else {
this.$message.error(res.data.msg);
// this.$message.error(res.data.msg);
}
})
var nowDevice = store.equipmentList[this.indexs - 1]
@ -390,13 +427,15 @@ export default {
// cameraid: 'L18357958',
// channelid: '1'
// }
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideo()
}
})
if (!this.player) {
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideoNew()
}
})
}
}
},
@ -411,4 +450,8 @@ export default {
}
</script>
<style lang="scss"></style>
<style lang="scss">
.video-js-select-quality-item {
color: rgba(0, 0, 0, 0.85) !important;
}
</style>