|
|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
- <div class="full">
|
|
|
+ <div class="full" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''">
|
|
|
<!-- 左视图 -->
|
|
|
- <div
|
|
|
+ <div
|
|
|
style="position: absolute;bottom: 0;left: 0;width: 22%;height: 88%;display: flex;flex-direction: column;justify-content: flex-end;">
|
|
|
<div class="animate__animated animate__backInUp animate__faster center" style="height: 7%;margin-bottom: 1%;">
|
|
|
<time-bar></time-bar>
|
|
|
</div>
|
|
|
|
|
|
- <dv-border-box-11 style="height: 30%" class="animate__animated animate__backInLeft animate__faster" title="通知公告"
|
|
|
+ <dv-border-box-11 style="height: 30%" class="animate__animated animate__backInLeft animate__faster" title="通知公告"
|
|
|
ref="border3" :color="color" :backgroundColor="backgroundColor">
|
|
|
<div style="height: 10%;"></div>
|
|
|
<dv-border-box-1 style="height: 90%;width: 99%;">
|
|
|
@@ -20,16 +20,30 @@
|
|
|
</dv-border-box-1>
|
|
|
</dv-border-box-11>
|
|
|
|
|
|
- <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster"
|
|
|
+ <dv-border-box-11 style="height: 32%" class="animate__animated animate__backInLeft animate__faster"
|
|
|
+ :title="grid.gridName" ref="border3" :color="color" :backgroundColor="backgroundColor">
|
|
|
+ <div style="height: 10%;"></div>
|
|
|
+ <dv-border-box-1 style="height: 90%;width: 99%;">
|
|
|
+ <div class="full center" style="flex-direction: column;z-index: 1;">
|
|
|
+ <div style="height: 5%;"></div>
|
|
|
+ <div id="grid" class="full animate__faster">
|
|
|
+ <div id="gridOption" style="width: 95%;height: 95%;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-1>
|
|
|
+ </dv-border-box-11>
|
|
|
+
|
|
|
+ <!-- <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster"
|
|
|
style="height: 32%;overflow: hidden;" :color="color" :backgroundColor="backgroundColor">
|
|
|
<dv-border-box-1 ref="border2">
|
|
|
<div style="padding-top: 15px;">
|
|
|
<div style="display: flex;justify-content: space-around;">
|
|
|
- <img class="grid-btn" @click="changeGridIndex(0,'left')" src="../../../../public/data/left.png" />
|
|
|
+ <img class="grid-btn" @click="changeGridIndex(-1)" src="../../../../public/data/left.png" />
|
|
|
<div id="gridName" class="animate__faster" style="font-size: 22px;color: #FFFFFF;">
|
|
|
- {{'网格1:'+userInfo.grid[0].gridName}}
|
|
|
+ {{'网格1:'+selectGrid.gridName}}
|
|
|
</div>
|
|
|
- <img class="grid-btn" @click="changeGridIndex(0,'right')" src="../../../../public/data/right.png" />
|
|
|
+ <img class="grid-btn" @click="changeGridIndex(1)" src="../../../../public/data/right.png" />
|
|
|
</div>
|
|
|
|
|
|
<div id="grid" class="full animate__faster" style="padding: 20px;">
|
|
|
@@ -38,12 +52,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</dv-border-box-1>
|
|
|
- </dv-border-box-12>
|
|
|
+ </dv-border-box-12> -->
|
|
|
|
|
|
- <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
|
|
|
+ <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
|
|
|
:color="color" :backgroundColor="backgroundColor">
|
|
|
<dv-border-box-1>
|
|
|
- <div style="width: 100%;height: 100%;">
|
|
|
+ <div class="center full" style="flex-direction: column;padding-top: 15px;">
|
|
|
+ <div style="font-size: 20px;font-weight: 800;margin-bottom: -20px;" :style="{color:fontColor}">重点人员比例</div>
|
|
|
<div id="communityOption" style="height: 100%;width: 95%;"></div>
|
|
|
</div>
|
|
|
</dv-border-box-1>
|
|
|
@@ -106,7 +121,13 @@
|
|
|
<div class="full center" style="flex-direction: column">
|
|
|
<div style="width: 90%;height: 15%;color: white;font-size: 20px;font-weight: 800;"
|
|
|
:style="{color:fontColor}" class="center">告警信息列表</div>
|
|
|
- <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 85%;width: 94%"
|
|
|
+
|
|
|
+ <div v-if="config.data.length>0" style="width: 94%;color: #FFFFFF;margin-top: 10px;display: flex; justify-content: space-around;background-color: #ee6666;padding: 10px 0;">
|
|
|
+ <div>告警类型</div>
|
|
|
+ <div>设备地点</div>
|
|
|
+ <div>告警时间</div>
|
|
|
+ </div>
|
|
|
+ <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
|
|
|
:config="config" />
|
|
|
<div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
|
|
|
</div>
|
|
|
@@ -130,7 +151,7 @@
|
|
|
<dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
|
|
|
style="height: 100%;width:calc(44% + 20px);margin:0 -10px;">
|
|
|
<div class="full center" style="margin-top: 15px;flex-direction: column;">
|
|
|
- <div style="font-size: 20px;margin-bottom: -30px;" :style="{color:fontColor}">数据统计</div>
|
|
|
+ <div style="font-size: 20px;margin-bottom: -30px;font-weight: 800;" :style="{color:fontColor}">数据统计</div>
|
|
|
<div id="dataOption" style="width:100%;height:320px"></div>
|
|
|
</div>
|
|
|
</dv-border-box-1>
|
|
|
@@ -188,27 +209,12 @@
|
|
|
Map3D
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log("我是数据大屏");
|
|
|
- },
|
|
|
- beforeCreate() {
|
|
|
- console.log("我是数据大屏");
|
|
|
- },
|
|
|
- created() {
|
|
|
let _this = this
|
|
|
- console.log("我是数据大屏");
|
|
|
- // this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
|
|
- // window.onresize = () => {
|
|
|
- // return (() => {
|
|
|
- // _this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
|
|
- // })()
|
|
|
- // }
|
|
|
this.getOptionData()
|
|
|
},
|
|
|
watch: {
|
|
|
$route() {
|
|
|
if (this.$route.path == '/grid/dataPage') {
|
|
|
- this.resize()
|
|
|
- this.map.resize()
|
|
|
this.$store.commit('SET_TAG_INDEX', 0);
|
|
|
}
|
|
|
if (this.$route.query.refresh) {
|
|
|
@@ -222,18 +228,15 @@
|
|
|
.length
|
|
|
]
|
|
|
},
|
|
|
- // screenWidth: {
|
|
|
- // handler() {
|
|
|
- // this.getOptionData()
|
|
|
- // },
|
|
|
- // immediate: true
|
|
|
- // },
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(["userInfo", "currentGrid","tagIndex"]),
|
|
|
+ ...mapGetters(["userInfo", "currentGrid", "tagIndex"]),
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ grids: [],
|
|
|
+ selectGrid: {},
|
|
|
+ selectGridIndex: 0,
|
|
|
|
|
|
dialogShow: false,
|
|
|
maskShow: false,
|
|
|
@@ -258,7 +261,7 @@
|
|
|
},
|
|
|
fontColor: "#00f9cf",
|
|
|
backgroundColor: "rgba(15, 33, 70, 0.6)",
|
|
|
- color: ['#1a3776', '#3f6a9a'],
|
|
|
+ color: ['#42599d', '#3a4e8a'],
|
|
|
gridList: [{
|
|
|
icon: '/grid/wangge.png',
|
|
|
name: '网格',
|
|
|
@@ -340,10 +343,6 @@
|
|
|
this.fetchData(this.$route.query['id']);
|
|
|
let _this = this
|
|
|
setTimeout(() => {
|
|
|
- _this.getCommunityOption()
|
|
|
- _this.initCharts('charts1', 'round1');
|
|
|
- _this.initCharts('charts4', 'round2');
|
|
|
- _this.initCharts('charts2', 'tendency');
|
|
|
// 获取数据统计
|
|
|
_this.getDataOption()
|
|
|
//获取人员分布
|
|
|
@@ -353,13 +352,27 @@
|
|
|
_this.getGridOption()
|
|
|
}, 500)
|
|
|
},
|
|
|
- changeGridIndex(inedx, type) {
|
|
|
+ changeGridIndex(type) {
|
|
|
this.$animateCss('#gridName', 'animate__fadeInDown')
|
|
|
- if (type == 'left') {
|
|
|
+ let length = this.grids.length
|
|
|
+ if (type == -1) {
|
|
|
+ //左滑
|
|
|
+ if (this.selectGridIndex == 0) {
|
|
|
+ this.selectGridIndex = length
|
|
|
+ } else {
|
|
|
+ this.selectGridIndex += type
|
|
|
+ }
|
|
|
this.$animateCss('#grid', 'animate__backInLeft')
|
|
|
} else {
|
|
|
+ //右滑
|
|
|
+ if (this.selectGridIndex == length) {
|
|
|
+ this.selectGridIndex == 0
|
|
|
+ } else {
|
|
|
+ this.selectGridIndex += type
|
|
|
+ }
|
|
|
this.$animateCss('#grid', 'animate__backInRight')
|
|
|
}
|
|
|
+ this.grid = this.grids[this.selectGridIndex]
|
|
|
},
|
|
|
close() {
|
|
|
let _this = this
|
|
|
@@ -374,7 +387,9 @@
|
|
|
},
|
|
|
getGridOption() {
|
|
|
var myChart = this.$echarts.init(document.getElementById('gridOption'));
|
|
|
-
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
var option = {
|
|
|
textStyle: {
|
|
|
color: "#fff"
|
|
|
@@ -387,10 +402,10 @@
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '1%',
|
|
|
+ left: '4%',
|
|
|
right: '4%',
|
|
|
- top: '-2%',
|
|
|
- bottom: '20%',
|
|
|
+ top: '5%',
|
|
|
+ bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
@@ -410,7 +425,9 @@
|
|
|
},
|
|
|
getPersonnelDistribution() {
|
|
|
var myChart = this.$echarts.init(document.getElementById('personnelDistribution'));
|
|
|
-
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
@@ -450,9 +467,17 @@
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
- getCommunityOption() {
|
|
|
+ getCommunityOption(data) {
|
|
|
var myChart = this.$echarts.init(document.getElementById('communityOption'));
|
|
|
-
|
|
|
+ let nameList = [];
|
|
|
+ let valueList = [];
|
|
|
+ data.forEach(item => {
|
|
|
+ nameList.push(item.agencyName);
|
|
|
+ valueList.push(item.personNum);
|
|
|
+ })
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
@@ -462,29 +487,31 @@
|
|
|
color: '#fff'
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '4%',
|
|
|
- right: '4%',
|
|
|
+ left: '3%',
|
|
|
+ right: '2%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ data: nameList
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ data: valueList,
|
|
|
type: 'line',
|
|
|
+ smooth: true
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
getAgeDistribution() {
|
|
|
var myChart = this.$echarts.init(document.getElementById('ageDistribution'));
|
|
|
-
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
@@ -520,6 +547,9 @@
|
|
|
getDataOption() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = this.$echarts.init(document.getElementById('dataOption'));
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
@@ -577,16 +607,10 @@
|
|
|
this.data = (await getStaticData({
|
|
|
id
|
|
|
})).data.data;
|
|
|
- this.chartConfig = {
|
|
|
- data: this.data.communityCounts,
|
|
|
- colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
|
|
|
- showValue: true
|
|
|
- };
|
|
|
-
|
|
|
this.device = this.data['deviceType'][this.currentDeviceIndex % this.data['deviceType'].length]
|
|
|
await this.getDeviceStatic();
|
|
|
this.setConfig(this.data['deviceJobList']);
|
|
|
- this.setTendencyOption(this.data['agencyPerson']);
|
|
|
+ this.getCommunityOption(this.data['agencyPerson'])
|
|
|
},
|
|
|
async getDeviceStatic() {
|
|
|
this.deviceData = (await smartDeviceStatic({
|
|
|
@@ -601,80 +625,6 @@
|
|
|
this.$animateCss('#deviceName', 'animate__fadeInDown')
|
|
|
this.$animateCss('#deviceList', 'animate__fadeInUp')
|
|
|
},
|
|
|
- setRound(list1, list2) {
|
|
|
- this.round1.setOption({
|
|
|
- title: {
|
|
|
- show: true,
|
|
|
- text: '人员分布',
|
|
|
- offset: [40, -40],
|
|
|
- style: {
|
|
|
- fill: this.fontColor,
|
|
|
- fontSize: 17,
|
|
|
- fontWeight: 'bold',
|
|
|
- textAlign: 'center',
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '5%',
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- radius: ['20%', '70%'],
|
|
|
- insideLabel: {
|
|
|
- show: true,
|
|
|
- style: {
|
|
|
- fontSize: 10,
|
|
|
- fill: '#fff',
|
|
|
- textAlign: 'center',
|
|
|
- textBaseline: 'middle'
|
|
|
- }
|
|
|
- },
|
|
|
- outsideLabel: {
|
|
|
- show: true,
|
|
|
- labelLineEndLength: 15
|
|
|
- },
|
|
|
- animationFrame: 60,
|
|
|
-
|
|
|
- }]
|
|
|
- });
|
|
|
- this.type.setOption({
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- data: [{
|
|
|
- name: '前科人员',
|
|
|
- value: 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- name: '博士',
|
|
|
- value: 0.3
|
|
|
- },
|
|
|
- {
|
|
|
- name: '本科',
|
|
|
- value: 0.17
|
|
|
- },
|
|
|
- {
|
|
|
- name: '专科',
|
|
|
- value: 0.03
|
|
|
- },
|
|
|
- ],
|
|
|
- insideLabel: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- outsideLabel: {
|
|
|
- style: {
|
|
|
- fontSize: 17,
|
|
|
- fontWeight: 'bold',
|
|
|
- textAlign: 'center',
|
|
|
- textBaseline: 'bottom'
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- });
|
|
|
- },
|
|
|
setTendencyOption(list) {
|
|
|
const _this = this;
|
|
|
let nameList = [];
|
|
|
@@ -742,9 +692,9 @@
|
|
|
oddRowBGC: 'rgba(9, 215, 183, 0.1)',
|
|
|
evenRowBGC: 'rgba(58, 104, 182, 0.3)',
|
|
|
waitTime: 2000,
|
|
|
- headerHeight: 40,
|
|
|
- header: ['告警类型', '设备地点', '告警时间'],
|
|
|
- headerBGC: '#ee6666',
|
|
|
+ // headerH/eight: 40,
|
|
|
+ // header: ['告警类型', '设备地点', '告警时间'],
|
|
|
+ // headerBGC: '#ee6666',
|
|
|
data: [],
|
|
|
align: ['center', 'center', 'center'],
|
|
|
};
|
|
|
@@ -752,7 +702,10 @@
|
|
|
data.data.push([item.alarmContent, item.alarmPosition, item.alarmTime])
|
|
|
});
|
|
|
this.config = data
|
|
|
-
|
|
|
+ let _this=this
|
|
|
+ window.addEventListener('resize', function() { //执行
|
|
|
+ _this.config.resize();
|
|
|
+ })
|
|
|
},
|
|
|
resize() {
|
|
|
this.tendency.resize();
|
|
|
@@ -766,19 +719,14 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- initCharts(id, ele) {
|
|
|
- const container = document.getElementById(id)
|
|
|
- let myChart = new Charts(container);
|
|
|
- this[ele] = myChart;
|
|
|
- },
|
|
|
async fetchData(id) {
|
|
|
- changeDefaultConfig('color', ['rgb(208,200,21)', '#348d07', '#6e6138', 'rgba(70,103,83,0.59)', '#674a2c',
|
|
|
- '#621752'
|
|
|
- ]);
|
|
|
let grids = (await getList(1, 100, {
|
|
|
userCode: this.userInfo['user_id']
|
|
|
})).data.data.records;
|
|
|
this.userInfo.grid = grids;
|
|
|
+ this.grids = grids
|
|
|
+ this.selectGridIndex = 0
|
|
|
+
|
|
|
const grid = typeof id == 'undefined' ? this.userInfo.grid[this.currentGridIndex] : (await getDetail({
|
|
|
"id": id
|
|
|
})).data.data;
|
