初始化
This commit is contained in:
aixianling
522
project/dv/apps/AppVideoMonitoringDV.vue
Normal file
522
project/dv/apps/AppVideoMonitoringDV.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<section class="AppVideoMonitoringDV">
|
||||
<el-row type="flex" justify="space-between" class="body">
|
||||
<div class="left-wrap column" flex>
|
||||
<div class="left-top fill">
|
||||
<label class="label">设备统计</label>
|
||||
<dv-scroll-board :header="config.header" :config="config" class="table"/>
|
||||
</div>
|
||||
<div class="left-bottom">
|
||||
<label class="label">电子地图</label>
|
||||
<ai-map :areaId="user.info.areaId"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-wrap column" flex>
|
||||
<div flex style="width: 100%">
|
||||
<div :span="6" class="card fill" v-for="(item,index) in cardList" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-bottom fill">
|
||||
<label class="label">视频监控</label>
|
||||
<div class="video-wrap">
|
||||
<div class="item" v-for="(item,index) in videoData.slice(0,2)"
|
||||
:key="index">
|
||||
<template v-if="flag">
|
||||
<iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
|
||||
allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="video"></div>
|
||||
</template>
|
||||
<div class="info">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-wrap">
|
||||
<div class="item" v-for="(item,index) in videoData.slice(2,4)"
|
||||
:key="index">
|
||||
<template v-if="flag">
|
||||
<iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
|
||||
allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="video"></div>
|
||||
</template>
|
||||
<div class="info">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wrap column" flex>
|
||||
<div class="right-top fill">
|
||||
<label class="label">人员统计</label>
|
||||
<label class="total">人员总数
|
||||
<span>0</span>
|
||||
<span>人</span>
|
||||
</label>
|
||||
<dv-scroll-board :config="config1" class="total-table"/>
|
||||
</div>
|
||||
<div class="right-middle">
|
||||
<label class="label">动作告警统计</label>
|
||||
<div class="tag">
|
||||
<span></span>
|
||||
</div>
|
||||
<ai-echart :ops="getOpt()"/>
|
||||
<div class="info">
|
||||
今日
|
||||
<span>0</span>
|
||||
<span>次</span>
|
||||
本月
|
||||
<span>0</span>
|
||||
<span>次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-bottom">
|
||||
<label class="label">声音告警统计</label>
|
||||
<div class="tag">
|
||||
<span></span>
|
||||
</div>
|
||||
<ai-echart :ops="getOpt('1')"/>
|
||||
<div class="info">
|
||||
今日
|
||||
<span style="color:#00FFDF">0</span>
|
||||
<span>次</span>
|
||||
本月
|
||||
<span style="color:#00FFDF">0</span>
|
||||
<span>次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import Vue from "vue";
|
||||
import {scrollBoard} from "@jiaminghi/data-view";
|
||||
|
||||
Vue.use(scrollBoard)
|
||||
export default {
|
||||
name: "AppVideoMonitoringDV",
|
||||
label: "数据大屏-平安小区",
|
||||
inject: {
|
||||
dv: {default: ""}
|
||||
},
|
||||
props: {
|
||||
instance: Function
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
cardList() {
|
||||
return [
|
||||
{label: "总设备数", value: "0"},
|
||||
{label: "在线设备", value: "0"},
|
||||
{label: "离线设备", value: "0"},
|
||||
{label: "设备在线率", value: "0%"},
|
||||
]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
meta: {},
|
||||
config: {
|
||||
data: [
|
||||
],
|
||||
columnWidth: [60, 140],
|
||||
header: ["机构", "设备在线率"],
|
||||
headerBGC: '',
|
||||
headerHeight: 41,
|
||||
oddRowBGC: "",
|
||||
evenRowBGC: "",
|
||||
align: ["center", "center", "center"],
|
||||
rowNum: 10,
|
||||
index: true,
|
||||
indexHeader: "排名"
|
||||
},
|
||||
config1: {
|
||||
data: [
|
||||
['普通用户', '-'],
|
||||
['村级管理员', '-'],
|
||||
['超级管理员', '-'],
|
||||
['测试', '-'],
|
||||
],
|
||||
headerHeight: 41,
|
||||
oddRowBGC: "",
|
||||
evenRowBGC: "",
|
||||
align: ["left", "left", "right"],
|
||||
index: true,
|
||||
rowNum: 6,
|
||||
columnWidth: [50]
|
||||
},
|
||||
start: 0,
|
||||
end: 40,
|
||||
start1: 0,
|
||||
end1: 40,
|
||||
interval: null,
|
||||
videoData: [],
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jsonObj(val) {
|
||||
return JSON.parse(val || "{}")?.url
|
||||
},
|
||||
getOpt(type = "0") {
|
||||
let opt = {
|
||||
"0": {
|
||||
xData: ['2020/7/1', "2020/7/2", "2020/7/3", "2020/7/4", "2020/7/5", "2020/7/6", "2020/7/7", "2020/7/8", "2020/7/9", "2020/7/10", "2020/7/11"],
|
||||
yData: Array(11).fill(0),
|
||||
color: "#FFEA2F",
|
||||
areaStyle: 'rgba(255,234,47,0.2)',
|
||||
unit: '',
|
||||
},
|
||||
"1": {
|
||||
xData: ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00"],
|
||||
yData: Array(10).fill(0),
|
||||
color: "#13B5B1",
|
||||
areaStyle: 'rgba(255,234,47,0.2)',
|
||||
unit: '次',
|
||||
},
|
||||
}
|
||||
return {
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "16%",
|
||||
right: "3%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
boundaryGap: false,
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#5E9CEA",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: opt[type]["xData"]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ['#103066'],
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: (val) => `${val}${opt[type]["unit"]}`,
|
||||
textStyle: {
|
||||
color: "#5E9CEA",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
symbol: "none",
|
||||
data: opt[type]["yData"],
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: opt[type]["color"],
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x2: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: opt[type]["areaStyle"]}, {offset: 1, color: '#000000'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
getWebSdkUrlForScreen() {
|
||||
this.instance.post(`/app/appzyvideoequipment/getWebSdkUrlForTianQiaoScreen`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.videoData = res.data
|
||||
this.flag = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.interval && clearInterval(this.interval);
|
||||
},
|
||||
mounted() {
|
||||
// this.getWebSdkUrlForScreen()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppVideoMonitoringDV {
|
||||
height: 100%;
|
||||
padding: 6px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.body {
|
||||
height: 100%;
|
||||
|
||||
.left-wrap {
|
||||
width: 307px;
|
||||
height: 100%;
|
||||
|
||||
.left-top {
|
||||
width: 100%;
|
||||
background-image: url("../assets/videoMonitor/box1.png");
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.table {
|
||||
box-sizing: border-box;
|
||||
padding: 63px 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
width: 100%;
|
||||
height: 311px;
|
||||
background-image: url("../assets/videoMonitor/box2.png");
|
||||
background-size: 100% 100%;
|
||||
margin-top: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.AiMap {
|
||||
width: 274px;
|
||||
height: 247px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-wrap {
|
||||
width: 1183px;
|
||||
height: 100%;
|
||||
|
||||
.card {
|
||||
height: 93.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("../assets/videoMonitor/card.png");
|
||||
background-size: 100% 100%;
|
||||
margin-right: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 38px;
|
||||
font-family: dineng, serif;
|
||||
font-weight: bold;
|
||||
color: #00EDFF;
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.center-bottom {
|
||||
width: 100%;
|
||||
height: 789px;
|
||||
background-image: url("../assets/videoMonitor/middlebox.png");
|
||||
background-size: 100% 100%;
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 61px;
|
||||
|
||||
.video-wrap {
|
||||
width: 100%;
|
||||
height: 344px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.item {
|
||||
.video {
|
||||
width: 522px;
|
||||
height: 296px;
|
||||
object-fit: fill;
|
||||
vertical-align: bottom;
|
||||
border: 2px solid #122C7D;
|
||||
}
|
||||
|
||||
.info {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
background-color: #071153;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-wrap {
|
||||
width: 297px;
|
||||
height: 100%;
|
||||
|
||||
.right-top {
|
||||
width: 100%;
|
||||
height: 333px;
|
||||
background-image: url("../assets/videoMonitor/box3.png");
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.total {
|
||||
font-size: 16px;
|
||||
color: #979AB7;
|
||||
display: inline-block;
|
||||
margin: 65px 0 16px 23px;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-size: 28px;
|
||||
font-family: dineng, serif;
|
||||
font-weight: bold;
|
||||
color: #01CAFF;
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #01CAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.total-table {
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-middle, .right-bottom {
|
||||
width: 100%;
|
||||
height: 276px;
|
||||
background-image: url("../assets/videoMonitor/box4.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 19px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.tag {
|
||||
margin: 28px 18px 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 12px;
|
||||
color: #5E9CEA;
|
||||
|
||||
& > span {
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 17px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiEchart {
|
||||
width: 251px;
|
||||
height: 175px;
|
||||
margin: 11px auto 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 19px 0;
|
||||
|
||||
& > span:nth-child(2n+1) {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: #FFE930;
|
||||
}
|
||||
|
||||
& > span:nth-child(2n) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #FFE930;
|
||||
line-height: 24px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 23px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
::v-deep .index {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .header {
|
||||
background: url("../assets/videoMonitor/titlebox.png");
|
||||
}
|
||||
|
||||
::v-deep .row-item div:nth-child(3) {
|
||||
font-size: 13px;
|
||||
color: #00CDFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user