初始化
This commit is contained in:
aixianling
133
project/dv/apps/AppCentralTaskDV.vue
Normal file
133
project/dv/apps/AppCentralTaskDV.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<section class="AppCentralTaskDV">
|
||||
<!-- <ai-dv-background :src="bgImage"/>-->
|
||||
<div class="coreTask">
|
||||
<div class="leftBox">
|
||||
<div class="boxTitle">{{ coreTaskData.titleText }}</div>
|
||||
<dv-scroll-board v-if="refresh" :config="coreTaskData"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {scrollBoard} from '@jiaminghi/data-view'
|
||||
import bgImage from '../assets/centralTask/bg.png'
|
||||
import Vue from "vue";
|
||||
|
||||
Vue.use(scrollBoard)
|
||||
export default {
|
||||
name: "AppCentralTaskDV",
|
||||
label: "数据大屏-重点工作",
|
||||
props: {
|
||||
nav: {default: () => ({})}
|
||||
},
|
||||
inject: {
|
||||
dv: {default: ""}
|
||||
},
|
||||
computed: {
|
||||
coreTaskData() {
|
||||
return {
|
||||
headerHeight: 52,
|
||||
header: ['基层组织建设', "社区治理", "便民服务效能", "城市管理"],
|
||||
headerBGC: 'rgba(0, 113, 255, 0.5)',
|
||||
oddRowBGC: "rgba(5, 65, 139, 0.5)",
|
||||
evenRowBGC: "rgba(5, 65, 139, 0.5)",
|
||||
waitTime: 6000,
|
||||
align: ["center", "start", "center", "center"],
|
||||
rowNum: 5,
|
||||
...this.nav.data,
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {bgImage, refresh: true}
|
||||
},
|
||||
watch: {
|
||||
nav: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.refresh = false
|
||||
this.$nextTick(() => this.refresh = true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppCentralTaskDV {
|
||||
height: 100%;
|
||||
padding: 0 0 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.coreTask {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 53px;
|
||||
margin-top: 56px;
|
||||
|
||||
.leftBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../assets/centralTask/box.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 40px 42px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.boxTitle {
|
||||
height: 68px;
|
||||
width: 534px;
|
||||
background-image: url("../assets/centralTask/titleBox.png");
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #71F8FF;
|
||||
transform: translateY(-32px);
|
||||
line-height: 68px;
|
||||
}
|
||||
|
||||
::v-deep .dv-scroll-board {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
color: #9FDBFB;
|
||||
font-size: 20px;
|
||||
|
||||
.header-item {
|
||||
text-align: center;
|
||||
border: 1px solid #054596;
|
||||
}
|
||||
}
|
||||
|
||||
.row-item {
|
||||
color: #68F0FC;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
.ceil {
|
||||
border: 1px solid #054596;
|
||||
border-top: none;
|
||||
position: relative;
|
||||
line-height: 30px;
|
||||
white-space: normal;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
479
project/dv/apps/AppGovInteractionDV.vue
Normal file
479
project/dv/apps/AppGovInteractionDV.vue
Normal file
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<section class="AppGovInteractionDV">
|
||||
<el-row type="flex" justify="space-between" align="bottom">
|
||||
<div flex class="framePane column top">
|
||||
<div class="titlePane" v-text="'事件内容'"/>
|
||||
<div class="fill">
|
||||
<dv-scroll-board :config="topLeftData"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerTopPane" id="centerTopPane">
|
||||
<b class="title gradientFont">事件统计</b>
|
||||
<el-row type="flex" justify="space-between" align="middle"
|
||||
v-for="(row,i) in topCenterData" :key="i">
|
||||
<div class="dataPane" v-for="(op,j) in row" :key="j">
|
||||
<span class="gradientFont" v-text="op.label"/>
|
||||
<dv-digital-flop class="gradientFont" :config="op.v1"/>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div flex class="framePane column top">
|
||||
<div class="titlePane" v-text="'政务微信群'"/>
|
||||
<div class="totalPane" flex>
|
||||
<div class="dataPanel fill" flex v-for="(op,i) in rightTopData.total" :key="i">
|
||||
<span v-text="op.label"/>
|
||||
<b v-text="op.v1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill">
|
||||
<ai-echart class="chart" :data="rightTopData.list" :ops="rightTopData.ops"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<div flex class="gap fill">
|
||||
<div flex class="framePane fill column" v-for="c in charts" :key="c.id">
|
||||
<div class="titlePane" v-text="c.label"/>
|
||||
<div class="fill">
|
||||
<ai-echart class="chart" :data="chartData[c.id]" :ops="c.ops"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {digitalFlop, scrollBoard} from '@jiaminghi/data-view'
|
||||
import Vue from "vue";
|
||||
|
||||
Vue.use(digitalFlop)
|
||||
Vue.use(scrollBoard)
|
||||
|
||||
export default {
|
||||
name: "AppGovInteractionDV",
|
||||
label: "数据大屏-政民互动",
|
||||
props: {
|
||||
instance: Function
|
||||
},
|
||||
computed: {
|
||||
topCenterData() {
|
||||
let meta = [
|
||||
[{label: "待受理", name: 'pending'}, {label: "累计上报", name: 'total_case'}],
|
||||
[{label: "办理中", name: 'processing'}, {label: "累计受理", name: 'total_accepted'}],
|
||||
[{label: "今日上报", name: "added_today"}, {label: "累计办结", name: 'total_solved'}],
|
||||
[{label: "今日办结", name: 'solved_today'}, {label: "累计办结率", name: 'total_solved_percent'}],
|
||||
]
|
||||
return meta.map(e => e.map(s => {
|
||||
let v1 = {
|
||||
number: [this.meta.residentCategoryReport?.[s.name] || 0],
|
||||
style: {
|
||||
fontFamily: 'dineng',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 40,
|
||||
gradientType: 'linear',
|
||||
gradientColor: ['#fff', '#fff', '#6BC7FF'],
|
||||
gradientParams: [0, 0, 0, 40],
|
||||
gradientWith: 'fill',
|
||||
gradientStops: [0, .18, 1]
|
||||
}
|
||||
}
|
||||
if (s.name == 'total_solved_percent') {
|
||||
v1 = {
|
||||
...v1,
|
||||
number: [v1.number * 100], content: '{nt}%'
|
||||
}
|
||||
}
|
||||
return {...s, v1}
|
||||
}))
|
||||
},
|
||||
topLeftData() {
|
||||
let statusColor = {
|
||||
0: 'doing',
|
||||
1: 'done',
|
||||
2: 'pending',
|
||||
},
|
||||
statusLabel = {
|
||||
0: '处理中',
|
||||
1: '已处理'
|
||||
},
|
||||
list = this.meta.residentOrderList?.map(e => {
|
||||
let status = e.process_list.slice(-1)?.[0]?.status
|
||||
return {
|
||||
...e, status, statusLabel: statusLabel[status]
|
||||
}
|
||||
})
|
||||
return {
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
rowNum: 10,
|
||||
data: list?.map(e => [`
|
||||
<div flex class="eventItem">
|
||||
<span class="tag ${statusColor[e.status]}">${e.statusLabel}</span>
|
||||
<div class="fill">${e.desc}</div>
|
||||
</div>`]) || []
|
||||
}
|
||||
},
|
||||
rightTopData() {
|
||||
let obj = this.meta.groupMap?.list || {},
|
||||
list = Object.keys(obj).map(e => {
|
||||
let {total, increase, decrease} = obj?.[e],
|
||||
time = this.$moment(e).format('MM-DD')
|
||||
return {time, total, increase, decrease}
|
||||
})
|
||||
return {
|
||||
total: [
|
||||
{label: '群聊总数', v1: this.meta.groupMap?.groupSum || 0},
|
||||
{label: '群成员数', v1: this.meta.groupMap?.today?.total || 0},
|
||||
],
|
||||
ops: {
|
||||
color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)', 'rgba(255, 215, 109, 0.2)'],
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
icon: 'rect',
|
||||
itemGap: 40
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category', axisTick: false,
|
||||
nameGap: 20,
|
||||
axisLabel: {color: '#fff'},
|
||||
axisLine: {lineStyle: {color: '#263763'}}
|
||||
},
|
||||
// 声明一个 Y 轴，数值轴。
|
||||
yAxis: {
|
||||
nameGap: 30, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: '#263763'}},
|
||||
axisLabel: {color: 'rgba(255,255,255,.8)'}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line', name: "群成员数", symbol: 'none', lineStyle: {color: '#36A5FF', borderWidth: 1},
|
||||
itemStyle: {borderColor: '#36A5FF', borderWidth: 1},
|
||||
},
|
||||
{
|
||||
type: 'line', name: "新增人数", symbol: 'none', lineStyle: {color: '#1CD444', borderWidth: 1},
|
||||
itemStyle: {borderColor: '#1CD444', borderWidth: 1},
|
||||
},
|
||||
{
|
||||
type: 'line', name: "退群人数", symbol: 'none', lineStyle: {color: '#FFD76D', borderWidth: 1},
|
||||
itemStyle: {borderColor: '#FFD76D', borderWidth: 1},
|
||||
}
|
||||
],
|
||||
grid: {left: 60, bottom: 58, right: 20}
|
||||
},
|
||||
list
|
||||
}
|
||||
},
|
||||
chartData() {
|
||||
return {
|
||||
EventType: this.meta.residentCategoryReportList?.map(e => {
|
||||
let {category_name: name, total_case, total_solved} = e
|
||||
return {name, total_case, total_solved}
|
||||
}) || [],
|
||||
EventSource: this.meta.unitReportList?.map(e => {
|
||||
let {grid_name: name, total_case, total_solved} = e
|
||||
return {name, total_case, total_solved}
|
||||
}) || []
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
charts: [
|
||||
{
|
||||
label: "事件类型", id: "EventType", ops: {
|
||||
color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)'],
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
icon: 'rect',
|
||||
itemGap: 40
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category', nameGap: 20, axisTick: false,
|
||||
axisLabel: {color: '#fff'},
|
||||
axisLine: {lineStyle: {color: '#263763'}}
|
||||
},
|
||||
// 声明一个 Y 轴，数值轴。
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: '#263763'}},
|
||||
axisLabel: {color: 'rgba(255,255,255,.8)'}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
name: "累计受理",
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
itemStyle: {borderColor: '#36A5FF', borderWidth: 1}
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: "累计办结",
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
itemStyle: {borderColor: '#1CD444', borderWidth: 1}
|
||||
}
|
||||
],
|
||||
grid: {left: 40, bottom: 58, right: 20}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "上报来源", id: "EventSource", ops: {
|
||||
color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)'],
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
icon: 'rect',
|
||||
itemGap: 40
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category', axisTick: false,
|
||||
nameGap: 20,
|
||||
axisLabel: {color: '#fff'},
|
||||
axisLine: {lineStyle: {color: '#263763'}}
|
||||
},
|
||||
// 声明一个 Y 轴，数值轴。
|
||||
yAxis: {
|
||||
nameGap: 30, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: '#263763'}},
|
||||
axisLabel: {color: 'rgba(255,255,255,.8)'}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line', name: "事件数", symbol: 'none', lineStyle: {color: '#36A5FF', borderWidth: 1},
|
||||
itemStyle: {borderColor: '#36A5FF', borderWidth: 1, show: false},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x2: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: 'rgba(37, 161, 255, 0.5)'}, {offset: 1, color: 'rgba(37, 161, 255, 0)'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line', name: "办理数", symbol: 'none', lineStyle: {color: '#1CD444', borderWidth: 1},
|
||||
itemStyle: {borderColor: '#1CD444', borderWidth: 1, show: false},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x2: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: 'rgba(37, 206, 55, 0.5)'}, {offset: 1, color: 'rgba(37, 206, 55, 0)'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {left: 40, bottom: 58, right: 20}
|
||||
}
|
||||
},
|
||||
],
|
||||
meta: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.instance.post("/app/statistics/governmentPeople/queryResidentReport").then(res => {
|
||||
if (res?.data) this.meta = res.data
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppGovInteractionDV {
|
||||
height: 100%;
|
||||
padding: 6px 0 10px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
color: #82C5FF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
::v-deep .eventItem {
|
||||
width: 100%;
|
||||
color: #82C5FF;
|
||||
|
||||
& > .fill {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .communityEvent {
|
||||
list-style-type: circle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 1px;
|
||||
color: #82C5FF;
|
||||
}
|
||||
|
||||
::v-deep .tag {
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.doing {
|
||||
background-image: radial-gradient(rgba(#1B1BD6, .4), #208FFF);
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background-image: radial-gradient(rgba(#FF9333, .4), #FFE959);
|
||||
}
|
||||
|
||||
&.done {
|
||||
background-image: radial-gradient(rgba(#1BD622, .4), #2CFF7C);
|
||||
}
|
||||
}
|
||||
|
||||
.centerTopPane {
|
||||
background-image: url("../assets/govInteraction/globe_map.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 540px;
|
||||
width: 940px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding: 30px 50px 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 60px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
::v-deep .gradientFont {
|
||||
background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 18%, #6BC7FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
&:first-of-type, &:last-of-type {
|
||||
margin: 0 110px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .dataPane {
|
||||
width: 122px;
|
||||
height: 114px;
|
||||
background-image: url("../assets/govInteraction/kuaikuai.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 80px;
|
||||
background-position: bottom center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
|
||||
& > b {
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.framePane {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(7, 11, 35, 0.4);
|
||||
border: 1px solid #14345F;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.top {
|
||||
width: 440px;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
& > .fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.titlePane {
|
||||
width: 100%;
|
||||
background-image: url("../assets/govInteraction/title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 309px 100%;
|
||||
height: 60px;
|
||||
padding-left: 30px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.totalPane {
|
||||
width: 100%;
|
||||
|
||||
.dataPanel {
|
||||
height: 60px;
|
||||
background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
margin-left: 20px;
|
||||
|
||||
& > span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > b {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
font-family: Arial-BoldMT, Arial, serif;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
1467
project/dv/apps/AppHomesteadDV.vue
Normal file
1467
project/dv/apps/AppHomesteadDV.vue
Normal file
File diff suppressed because it is too large
Load Diff
1233
project/dv/apps/AppSpecialPeopleDV.vue
Normal file
1233
project/dv/apps/AppSpecialPeopleDV.vue
Normal file
File diff suppressed because it is too large
Load Diff
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