大屏的基本布局，告警数据模块的数据处理
This commit is contained in:
熊丽君
BIN
src/assets/image/chartbg.png
Normal file
BIN
src/assets/image/chartbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
BIN
src/assets/image/kuang.png
Normal file
BIN
src/assets/image/kuang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
src/assets/image/kuang2.png
Normal file
BIN
src/assets/image/kuang2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
src/assets/image/ltbg.png
Normal file
BIN
src/assets/image/ltbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/assets/image/xiaokuang.png
Normal file
BIN
src/assets/image/xiaokuang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
@ -26,20 +26,22 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 20px 0;
|
||||
/* padding: 0 0 20px 0; */
|
||||
background-image: url("../../assets/image/kuang.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.body {
|
||||
position: relative;
|
||||
width: 99%;
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 100%;
|
||||
background-color: rgba(7, 26, 72, 0.2);
|
||||
border: 0px solid rgba(70, 233, 255, 1);
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
-webkit-box-shadow: #666 0px 0px 10px;
|
||||
-moz-box-shadow: #666 0px 0px 10px;
|
||||
/* background-color: rgba(7, 26, 72, 0.2); */
|
||||
|
||||
/* border: 0px solid rgba(70, 233, 255, 1); */
|
||||
/* border-radius: 3px 3px 3px 3px; */
|
||||
/* box-shadow: #666 0px 0px 10px; */
|
||||
pointer-events: auto;
|
||||
z-index: 10100;
|
||||
@ -47,7 +49,9 @@ export default {
|
||||
}
|
||||
.BoxBoardTit {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: -10px;
|
||||
/* left: 50px;
|
||||
top: -10px; */
|
||||
left: 32px;
|
||||
top: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -18,20 +18,21 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.boxBoardTit {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: transparent;
|
||||
color: rgba(70, 233, 255, 1);
|
||||
/* background-color: transparent; */
|
||||
/* color: rgba(70, 233, 255, 1); */
|
||||
color: #85d8ff;
|
||||
font-weight: bold;
|
||||
border: 0.5px solid rgba(70, 233, 255, 1);
|
||||
border-radius: 10px 1px 10px 1px;
|
||||
text-align: center;
|
||||
/* border: 0.5px solid rgba(70, 233, 255, 1); */
|
||||
/* border-radius: 10px 1px 10px 1px; */
|
||||
vertical-align: middle;
|
||||
z-index: 10100;
|
||||
-webkit-box-shadow: #666 0px 0px 10px;
|
||||
-moz-box-shadow: #666 0px 0px 10px;
|
||||
box-shadow: #666 0px 0px 10px;
|
||||
/* -webkit-box-shadow: #666 0px 0px 10px; */
|
||||
/* -moz-box-shadow: #666 0px 0px 10px; */
|
||||
/* box-shadow: #666 0px 0px 10px; */
|
||||
}
|
||||
</style>
|
||||
37
src/views/chart/components/leftTop.vue
Normal file
37
src/views/chart/components/leftTop.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="content-box">
|
||||
<div><span>电池总数</span><span>748</span></div>
|
||||
<div><span>电池白名单数</span><span>334</span></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
// padding: 10px;
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
height: calc(100% - 20px);
|
||||
div{
|
||||
// border: 1px solid #f00;
|
||||
// box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
|
||||
background-image: url("../../../assets/image/ltbg.png");
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>span:nth-child(2){
|
||||
font-weight:700;
|
||||
font-size: 24px;
|
||||
color: #ff4c4c;
|
||||
}
|
||||
}
|
||||
>div:nth-child(2) span:nth-child(2){
|
||||
color: #35ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,83 +1,85 @@
|
||||
<template>
|
||||
<div style="width: 100vw;height:100vh;position: relative;background-color:#010b34;overflow:hidden">
|
||||
|
||||
<div class="box">
|
||||
<!-- <div ref="bmap" id="main" style="width: 100%;height:100%;"></div> -->
|
||||
<div id="chart">
|
||||
<div style="width: 100vw;height:40px;line-height:40px;position: absolute;padding-top:5px;display: flex;overflow:hidden;justify-content: space-between;">
|
||||
<dv-decoration-10 style="width:33.3%;height:.0625rem;" />
|
||||
<div style="display: flex;flex:1">
|
||||
<!-- <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> -->
|
||||
<dv-decoration-8 :color="['#568aea', '#000000']" style="height:50px;" />
|
||||
<div class="" style="min-width: 200px;font-size:20px">锐能BMS管理系统</div>
|
||||
<dv-decoration-8
|
||||
:reverse="true"
|
||||
:color="['#568aea', '#000000']"
|
||||
style="height:50px;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
|
||||
</div>
|
||||
<div class="center tc">
|
||||
<div class="tit">{{ time }}</div>
|
||||
<!-- <div class="des">锐能在线设备：{{ devCount }}</div> -->
|
||||
<!-- <div class="des">锐能BMS管理系统</div> -->
|
||||
<div class="tit" style="color:#fff">{{time}}</div>
|
||||
<div ref="bmap" id="main" style="width: 100%;height:60%;"></div>
|
||||
<div>
|
||||
<div style="display:flex;color:#fff">
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
</div>
|
||||
<div style="display:flex;color:#fff">
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
<dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
|
||||
<div ref="bmap" id="main" style="width: 100%;height:65%;"></div>
|
||||
<div class="my_cenbottom">
|
||||
<div>产品总数：<span style="color:#4ee7e6">10</span></div>
|
||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
||||
<div>产品总数：<span style="color:#d96dd6">10</span></div>
|
||||
</div>
|
||||
<div class="my_cenbottom">
|
||||
<div>产品总数：<span style="color:#41dd83">10</span></div>
|
||||
<div>产品总数：<span style="color:#edcc1a">10</span></div>
|
||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left column">
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<div style="height:20px"></div>
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<div style="height:20px"></div>
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<!-- <boxBoardBody class="flex">
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardTit slot="tit" tit="总览"></boxBoardTit>
|
||||
<div ref="ticketAll" style="width: 100%;height:100%;"></div>
|
||||
<leftTop></leftTop>
|
||||
</boxBoardBody>
|
||||
<div style="height:20px"></div>
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardTit slot="tit" tit="工单总览"></boxBoardTit>
|
||||
<div ref="ticketAll" style="width: 100%;height:100%;"></div>
|
||||
<div class="my_context">
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="33"
|
||||
:stroke-width="13"
|
||||
color="#13cf5e"
|
||||
stroke-linecap="square"
|
||||
></el-progress>
|
||||
<span>代派单：150</span>
|
||||
</div>
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="22"
|
||||
:stroke-width="13"
|
||||
></el-progress>
|
||||
<span>处理中：100</span>
|
||||
</div>
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="44"
|
||||
:stroke-width="13"
|
||||
color="#ff9494"
|
||||
></el-progress>
|
||||
<span>已关闭：200</span>
|
||||
</div>
|
||||
</div>
|
||||
</boxBoardBody>
|
||||
<div style="height:20px"></div>
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardBody class="flex" style="height:300px">
|
||||
<boxBoardTit slot="tit" tit="设备趋势"></boxBoardTit>
|
||||
<div ref="alarmAll" style="width: 100%;height:100%;"></div>
|
||||
</boxBoardBody> -->
|
||||
|
||||
<div ref="bottomLeftChart" class="bottom_left"></div>
|
||||
</boxBoardBody>
|
||||
</div>
|
||||
<div class="right column">
|
||||
<!-- <div class="flex"></div>
|
||||
<div style="height:20px"></div> -->
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmTrend" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<div style="height:20px"></div>
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<div style="height:20px"></div>
|
||||
<dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmTrend" style="width: 100%;height:100%;"></div></dv-border-box-4>
|
||||
<!-- <boxBoardBody class="flex">
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardTit slot="tit" tit="设备类型"></boxBoardTit>
|
||||
<div ref="alarmTrend" style="width: 100%;height:100%;"></div>
|
||||
<div
|
||||
ref="topLeftChart"
|
||||
style="width: 100%;height:100%;padding:15px"
|
||||
></div>
|
||||
</boxBoardBody>
|
||||
<div style="height:20px"></div>
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardTit slot="tit" tit="告警数据"></boxBoardTit>
|
||||
<div ref="alarmAll" style="width: 100%;height:100%;"></div>
|
||||
<!-- <div ref="alarmAll" style="width: 100%;height:100%;"></div> -->
|
||||
<div ref="centerRight" style="width: 100%;height:100%;"></div>
|
||||
</boxBoardBody>
|
||||
<div style="height:20px"></div>
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardBody class="flex" style="height:300px">
|
||||
<boxBoardTit slot="tit" tit="告警趋势"></boxBoardTit>
|
||||
<div ref="alarmTrend" style="width: 100%;height:100%;"></div>
|
||||
</boxBoardBody> -->
|
||||
</boxBoardBody>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,14 +95,19 @@ import resize from '../dashboard/mixins/resize';
|
||||
|
||||
import boxBoardTit from './boxBoardTit';
|
||||
import boxBoardBody from './boxBoardBody';
|
||||
import { parseTime } from "@/utils/ruoyi";
|
||||
import leftTop from './components/leftTop';
|
||||
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mixins: [resize],
|
||||
components: { boxBoardTit, boxBoardBody },
|
||||
components: { boxBoardTit, boxBoardBody, leftTop },
|
||||
data() {
|
||||
return {
|
||||
bottomChart: null,
|
||||
topChart: null,
|
||||
centerChart: null,
|
||||
bmapChart: null,
|
||||
ticketAllChart: null,
|
||||
alarmAllChart: null,
|
||||
@ -114,33 +121,33 @@ export default {
|
||||
workStatusList: {
|
||||
'1': '待接单',
|
||||
'2': '待回单',
|
||||
'3': '已回单',
|
||||
'3': '已回单'
|
||||
},
|
||||
myStyleJson: [
|
||||
{
|
||||
"featureType": "land",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#f5f6f7ff"
|
||||
featureType: 'land',
|
||||
elementType: 'geometry',
|
||||
stylers: {
|
||||
color: '#f5f6f7ff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
time() {
|
||||
return parseTime(this.date, '{h} : {i} : {s}')
|
||||
return parseTime(this.date, '{h} : {i} : {s}');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let timer = setInterval(() => {
|
||||
this.date = new Date()
|
||||
this.date = new Date();
|
||||
}, 1000);
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
})
|
||||
});
|
||||
|
||||
this.getData().then(({ code, msg, list, work, activity, devCount }) => {
|
||||
if (200 == code) {
|
||||
@ -150,50 +157,51 @@ export default {
|
||||
id: v.id,
|
||||
deviceId: v.deviceId,
|
||||
deviceName: v.deviceName,
|
||||
value: [parseFloat(v.longitude), parseFloat(v.latitude),]
|
||||
})
|
||||
})
|
||||
value: [parseFloat(v.longitude), parseFloat(v.latitude)]
|
||||
});
|
||||
});
|
||||
|
||||
this.spotList = spotList;
|
||||
this.devCount = devCount;
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initBmpChart()
|
||||
this.initTicketAllChart(work)
|
||||
this.initAlarmAllChart(activity)
|
||||
this.initBmpChart();
|
||||
// this.initTicketAllChart(work);
|
||||
// this.initAlarmAllChart(activity);
|
||||
this.initCenterChart(activity);
|
||||
this.initBottomChart();
|
||||
this.initTopChart();
|
||||
this.initAlarmTrendChart();
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
this.initAlarmTrendChart()
|
||||
this.getTicketData().then(({ code, msg, day, month }) => {
|
||||
if (200 == code) {
|
||||
this.alarmTrendDay = day;
|
||||
this.alarmTrendMonth = month;
|
||||
this.$nextTick(() => {
|
||||
this.alarmTrendChartSetDay()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// this.getTicketData().then(({ code, msg, day, month }) => {
|
||||
// if (200 == code) {
|
||||
// this.alarmTrendDay = day;
|
||||
// this.alarmTrendMonth = month;
|
||||
// this.$nextTick(() => {
|
||||
// this.alarmTrendChartSetDay();
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
return request({
|
||||
url: '/system/device/deviceSignal',
|
||||
method: 'get',
|
||||
})
|
||||
method: 'get'
|
||||
});
|
||||
},
|
||||
getTicketData() {
|
||||
return request({
|
||||
url: '/system/warning/warningList',
|
||||
method: 'get',
|
||||
})
|
||||
method: 'get'
|
||||
});
|
||||
},
|
||||
initTicketAllChart(ticketAll) {
|
||||
if (!this.ticketAllChart) {
|
||||
this.ticketAllChart = echarts.init(this.$refs.ticketAll)
|
||||
this.ticketAllChart = echarts.init(this.$refs.ticketAll);
|
||||
}
|
||||
|
||||
let legends = Object.values(this.workStatusList);
|
||||
@ -202,9 +210,9 @@ export default {
|
||||
return {
|
||||
name: this.workStatusList[v.workStatus],
|
||||
value: v.workCount
|
||||
}
|
||||
})
|
||||
console.log(data, ticketAll)
|
||||
};
|
||||
});
|
||||
console.log(data, ticketAll);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
@ -234,7 +242,7 @@ export default {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontSize: '20'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@ -247,139 +255,229 @@ export default {
|
||||
this.ticketAllChart.setOption(option);
|
||||
},
|
||||
initAlarmTrendChart() {
|
||||
if (!this.alarmTrendChart) {
|
||||
this.alarmTrendChart = echarts.init(this.$refs.alarmTrend)
|
||||
this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'01月',
|
||||
'02月',
|
||||
'03月',
|
||||
'04月',
|
||||
'05月',
|
||||
'06月',
|
||||
'07月',
|
||||
'08月',
|
||||
'09月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
this.alarmTrendChart.setOption({
|
||||
visualMap: [{
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0
|
||||
}],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
// myHour: {
|
||||
// show: true,
|
||||
// title: '每小时',
|
||||
// name: '时',
|
||||
// icon: 'path://M113.48438,148.58984H248.25v318.35938h-30.85938v-32.42188h-73.04688v37.10938h-30.85938V148.58984zM217.39062,177.49609h-73.04688v98.82812h73.04688V177.49609zM144.34375,405.62109h73.04688V304.44922h-73.04688V405.62109zM261.14062,197.80859H399.8125v-86.32812h31.25v86.32812h55.46875v28.90625H431.0625v210.15625c0,34.89355-16.66895,52.34375-50,52.34375c-15.10645,0-37.24023-0.39062-66.40625-1.17188c-1.30273-9.375-3.3877-20.3125-6.25-32.8125c27.34375,2.08105,48.69727,3.125,64.0625,3.125c18.22852,0,27.34375-9.24707,27.34375-27.73438V226.71484H261.14062V197.80859zM304.89062,264.21484c20.83105,38.02197,36.58789,68.35938,47.26562,91.01562c-6.77148,3.125-17.1875,8.33398-31.25,15.625c-10.15625-24.7373-24.74023-55.59668-43.75-92.57812L304.89062,264.21484z',
|
||||
// onclick: function () {
|
||||
// console.log('每小时')
|
||||
// }
|
||||
// },
|
||||
myDay: {
|
||||
show: true,
|
||||
title: '每天',
|
||||
name: '天',
|
||||
icon: 'path://M105.46875,450.16797c97.5249-41.53418,154.29688-99.34668,170.3125-173.4375H110.54688v-29.6875h169.33594c1.17188-18.4873,1.75781-50.39062,1.75781-95.70312H132.03125v-29.6875h337.5v29.6875H316.01562c-0.2627,27.21582-0.78125,59.11572-1.5625,95.70312h175v29.6875H319.72656c24.86914,82.55273,83.26758,137.7627,175.19531,165.625c-10.67773,12.75977-19.66211,23.56543-26.95312,32.42188c-84.89648-34.24707-140.75586-90.82031-167.57812-169.72656c-20.5752,73.4375-77.4751,131.70508-170.70312,174.80469C124.21875,472.82422,116.14355,462.92773,105.46875,450.16797z',
|
||||
onclick: () => {
|
||||
this.alarmTrendChartSetDay()
|
||||
}
|
||||
},
|
||||
myMonth: {
|
||||
show: true,
|
||||
title: '每月',
|
||||
name: '月',
|
||||
icon: 'path://M225.19531,349.82422c-5.85938,50.2627-25.45801,95.70312-58.78906,136.32812c-8.33447-8.0752-17.31885-15.8877-26.95312-23.4375c25.25928-27.34375,42.1875-59.89355,50.78125-97.65625c5.9873-27.8623,8.98438-66.40625,8.98438-115.625V114.27734h260.9375v304.6875c0,38.54102-18.35938,57.8125-55.07812,57.8125c-15.36523,0-35.15625-0.2627-59.375-0.78125c-1.30273-9.375-3.25586-20.3125-5.85938-32.8125c23.95605,1.5625,42.83789,2.34375,56.64062,2.34375c21.09375,0,31.64062-10.28711,31.64062-30.85938v-64.84375H225.19531zM228.32031,321.30859H428.125v-75H231.25C231.25,272.35254,230.27344,297.35254,228.32031,321.30859z M231.25,143.57422v74.21875h196.875v-74.21875H231.25z',
|
||||
onclick: () => {
|
||||
this.alarmTrendChartSetMonth()
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
820,
|
||||
932,
|
||||
901,
|
||||
934,
|
||||
1290,
|
||||
1330,
|
||||
1320,
|
||||
820,
|
||||
932,
|
||||
901,
|
||||
934,
|
||||
1290
|
||||
],
|
||||
// 线的颜色
|
||||
lineStyle: {
|
||||
color: '#06ccf9'
|
||||
},
|
||||
// 点的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#06ccf9'
|
||||
}
|
||||
},
|
||||
title: [{
|
||||
left: 'center',
|
||||
text: ''
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b0}<br />告警数: {c0}'
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
xAxis: [{
|
||||
data: [],
|
||||
axisLabel: { show: false }
|
||||
}],
|
||||
yAxis: [{
|
||||
splitLine: { show: false }
|
||||
}],
|
||||
grid: [{
|
||||
containLabel: true,
|
||||
left: '5',
|
||||
right: '5',
|
||||
top: '20%',
|
||||
height: '70%'
|
||||
}],
|
||||
series: [{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: []
|
||||
}]
|
||||
});
|
||||
this.alarmTrendChart.showLoading();
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
};
|
||||
this.alarmTrendChart.setOption(option);
|
||||
// this.alarmTrendChart.showLoading();
|
||||
},
|
||||
alarmTrendChartSetDay() {
|
||||
let dateX = [];
|
||||
let dateY = [];
|
||||
this.alarmTrendDay.forEach(v => {
|
||||
dateX.push(v.datas)
|
||||
dateY.push(v.count)
|
||||
dateX.push(v.datas);
|
||||
dateY.push(v.count);
|
||||
});
|
||||
this.alarmTrendChartSetData(dateX, dateY)
|
||||
this.alarmTrendChartSetData(dateX, dateY);
|
||||
this.alarmTrendChart.hideLoading();
|
||||
},
|
||||
alarmTrendChartSetMonth() {
|
||||
let dateX = [];
|
||||
let dateY = [];
|
||||
this.alarmTrendMonth.forEach(v => {
|
||||
dateX.push(v.datas)
|
||||
dateY.push(v.count)
|
||||
dateX.push(v.datas);
|
||||
dateY.push(v.count);
|
||||
});
|
||||
this.alarmTrendChartSetData(dateX, dateY)
|
||||
this.alarmTrendChartSetData(dateX, dateY);
|
||||
this.alarmTrendChart.hideLoading();
|
||||
},
|
||||
alarmTrendChartSetData(dateX, dateY) {
|
||||
this.alarmTrendChart.setOption({
|
||||
visualMap: [{
|
||||
visualMap: [
|
||||
{
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: Math.min.apply(null, dateY),
|
||||
max: Math.max.apply(null, dateY)
|
||||
}],
|
||||
xAxis: [{
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
data: dateX
|
||||
}],
|
||||
series: [{
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: dateY
|
||||
}]
|
||||
})
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
initCenterChart(alarmAll) {
|
||||
// initCenterChart1(alarmAll) {
|
||||
this.centerChart = echarts.init(this.$refs.centerRight);
|
||||
let snapAlarmAll = [];
|
||||
for (let index = 0; index < 4; index++) {
|
||||
let snap = alarmAll.find(v => v.signalLevel == index + 1);
|
||||
if (snap) {
|
||||
snapAlarmAll.push(snap.warningCount);
|
||||
} else {
|
||||
snapAlarmAll.push(0);
|
||||
}
|
||||
}
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['一级告警', '二级告警', '三级告警', '四级告警'],
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
lineStyle: {
|
||||
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
|
||||
},
|
||||
show: false //隐藏或显示
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [
|
||||
{
|
||||
value: snapAlarmAll[0],
|
||||
itemStyle: {
|
||||
color: '#19f1ec'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: snapAlarmAll[1],
|
||||
itemStyle: {
|
||||
color: '#e070dc'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: snapAlarmAll[2],
|
||||
itemStyle: {
|
||||
color: '#f1d019'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: snapAlarmAll[3],
|
||||
itemStyle: {
|
||||
color: '#ff4c4c'
|
||||
}
|
||||
}
|
||||
], //数据
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: '#709fd9',
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.centerChart.setOption(option);
|
||||
},
|
||||
|
||||
initAlarmAllChart(alarmAll) {
|
||||
if (!this.alarmAllChart) {
|
||||
this.alarmAllChart = echarts.init(this.$refs.alarmAll)
|
||||
}
|
||||
let snapAlarmAll = []
|
||||
// initCenterChart(alarmAll) {
|
||||
// if (!this.alarmAllChart) {
|
||||
// this.alarmAllChart = echarts.init(this.$refs.alarmAll);
|
||||
// }
|
||||
let snapAlarmAll = [];
|
||||
for (let index = 0; index < 4; index++) {
|
||||
let snap = alarmAll.find(v => v.signalLevel == index + 1)
|
||||
let snap = alarmAll.find(v => v.signalLevel == index + 1);
|
||||
if (snap) {
|
||||
snapAlarmAll.push(snap.warningCount)
|
||||
snapAlarmAll.push(snap.warningCount);
|
||||
} else {
|
||||
snapAlarmAll.push(0)
|
||||
snapAlarmAll.push(0);
|
||||
}
|
||||
}
|
||||
let level4 = '四级告警 ' + snapAlarmAll[3]
|
||||
let level3 = '三级告警 ' + snapAlarmAll[2]
|
||||
let level2 = '二级告警 ' + snapAlarmAll[1]
|
||||
let level1 = '一级告警 ' + snapAlarmAll[0]
|
||||
console.log(snapAlarmAll);
|
||||
debugger
|
||||
let level4 = '四级告警 ' + snapAlarmAll[3];
|
||||
let level3 = '三级告警 ' + snapAlarmAll[2];
|
||||
let level2 = '二级告警 ' + snapAlarmAll[1];
|
||||
let level1 = '一级告警 ' + snapAlarmAll[0];
|
||||
let levels = [level1, level2, level3, level4];
|
||||
let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb']
|
||||
let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb'];
|
||||
let freeStyle = {
|
||||
normal: {
|
||||
color: 'rgba(192,192,192,0.2)',
|
||||
@ -412,7 +510,7 @@ export default {
|
||||
}
|
||||
};
|
||||
let maxRadius = this.$refs.alarmAll.offsetHeight / 3;
|
||||
let sum = eval(snapAlarmAll.join("+"));
|
||||
let sum = eval(snapAlarmAll.join('+'));
|
||||
|
||||
let series = [];
|
||||
for (let index = 0; index < snapAlarmAll.length; index++) {
|
||||
@ -421,7 +519,10 @@ export default {
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['70%', '50%'],
|
||||
radius: [maxRadius * (0.85 - index * 0.2), maxRadius * (1 - index * 0.2)],
|
||||
radius: [
|
||||
maxRadius * (0.85 - index * 0.2),
|
||||
maxRadius * (1 - index * 0.2)
|
||||
],
|
||||
itemStyle: dataStyle,
|
||||
data: [
|
||||
{
|
||||
@ -439,15 +540,16 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
value: sum == 0 ? 1 : (sum - snapAlarmAll[index]),
|
||||
value: sum == 0 ? 1 : sum - snapAlarmAll[index],
|
||||
name: 'invisible',
|
||||
itemStyle: freeStyle
|
||||
}
|
||||
]
|
||||
};
|
||||
series.push(snap);
|
||||
}
|
||||
series.push(snap)
|
||||
}
|
||||
this.alarmAllChart.setOption({ //加载数据图表
|
||||
this.alarmAllChart.setOption({
|
||||
//加载数据图表
|
||||
legend: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
@ -464,28 +566,152 @@ export default {
|
||||
series: series
|
||||
});
|
||||
},
|
||||
initBottomChart() {
|
||||
this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'01月',
|
||||
'02月',
|
||||
'03月',
|
||||
'04月',
|
||||
'05月',
|
||||
'06月',
|
||||
'07月',
|
||||
'08月',
|
||||
'09月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
//这是y轴文字颜色
|
||||
lineStyle: {
|
||||
color: '#709fd9'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
lineStyle: {
|
||||
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
|
||||
},
|
||||
show: true //隐藏或显示
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
bottom: 10
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#06B5D7' }, //柱图渐变色
|
||||
{ offset: 0.5, color: '#44C0C1' }, //柱图渐变色
|
||||
{ offset: 1, color: '#71C8B1' } //柱图渐变色
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#71C8B1' }, //柱图高亮渐变色
|
||||
{ offset: 0.7, color: '#44C0C1' }, //柱图高亮渐变色
|
||||
{ offset: 1, color: '#06B5D7' } //柱图高亮渐变色
|
||||
])
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.bottomChart.setOption(option);
|
||||
},
|
||||
initTopChart() {
|
||||
this.topChart = echarts.init(this.$refs.topLeftChart);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series : [{
|
||||
name: '设备详情',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
data:[
|
||||
{ value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
|
||||
{ value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
},
|
||||
normal:{
|
||||
label:{
|
||||
show: true,
|
||||
// formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
labelLine :{show:true}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.topChart.setOption(option);
|
||||
},
|
||||
initBmpChart() {
|
||||
if (!this.bmapChart) {
|
||||
this.bmapChart = echarts.init(this.$refs.bmap)
|
||||
this.bmapChart = echarts.init(this.$refs.bmap);
|
||||
}
|
||||
this.setOptions()
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
let option = {
|
||||
title: { //标题
|
||||
title: {
|
||||
//标题
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
left: 'center' //标题位置，居中
|
||||
left: 'center' //标题位置，居中
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function(params) {
|
||||
return (
|
||||
"设备名: " + params.data.deviceName + "<br>设备sn: " + params.data.deviceId
|
||||
'设备名: ' +
|
||||
params.data.deviceName +
|
||||
'<br>设备sn: ' +
|
||||
params.data.deviceId
|
||||
);
|
||||
}
|
||||
},
|
||||
bmap: { //百度地图的设置
|
||||
bmap: {
|
||||
//百度地图的设置
|
||||
center: [104.114129, 37.550339],
|
||||
zoom: 5,
|
||||
roam: true,
|
||||
@ -512,49 +738,52 @@ export default {
|
||||
rippleEffect: { brushType: 'stroke' },
|
||||
hoverAnimation: true,
|
||||
animation: false,
|
||||
itemStyle: { normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' } },
|
||||
zlevel: 1
|
||||
itemStyle: {
|
||||
normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' }
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
loadBMap("mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6")
|
||||
.then(() => {
|
||||
loadBMap('mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6').then(() => {
|
||||
// 配置option
|
||||
this.bmapChart.setOption(option)
|
||||
let bmap = this.bmapChart.getModel().getComponent('bmap').getBMap();
|
||||
this.bmapChart.setOption(option);
|
||||
let bmap = this.bmapChart
|
||||
.getModel()
|
||||
.getComponent('bmap')
|
||||
.getBMap();
|
||||
bmap.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
|
||||
bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
|
||||
bmap.enableScrollWheelZoom(); //启用滚轮放大缩小
|
||||
// bmap.addControl(new BMap.MapTypeControl());//添加地图类型控件
|
||||
bmap.disable3DBuilding();
|
||||
let zoomdrag = (() => {
|
||||
let bounds = bmap.getBounds()
|
||||
let sw = bounds.getSouthWest()//获取西南角的经纬度(左下端点)
|
||||
let zoomdrag = () => {
|
||||
let bounds = bmap.getBounds();
|
||||
let sw = bounds.getSouthWest(); //获取西南角的经纬度(左下端点)
|
||||
let ne = bounds.getNorthEast(); //获取东北角的经纬度(右上端点)
|
||||
let wn = new BMap.Point(sw.lng, ne.lat); //获取西北角的经纬度(左上端点)
|
||||
let es = new BMap.Point(ne.lng, sw.lat); //获取东南角的经纬度(右下端点)
|
||||
// this.lng = bmap.getCenter().lng//经度
|
||||
// this.lat = bmap.getCenter().lat//纬度
|
||||
// this.lngLatZoom = [Number(this.lng.toFixed(2)), Number(this.lat.toFixed(2)), this.zoom]//经度 纬度 放大级别 用于watch监听
|
||||
this.zoom = bmap.getZoom()//获取缩放级别
|
||||
console.log('zoom', bmap.getZoom())
|
||||
})
|
||||
bmap.addEventListener("zoomend", zoomdrag) //监听地图缩放
|
||||
bmap.addEventListener("dragend", zoomdrag) //监听地图拖拽平移
|
||||
this.zoom = bmap.getZoom(); //获取缩放级别
|
||||
console.log('zoom', bmap.getZoom());
|
||||
};
|
||||
bmap.addEventListener('zoomend', zoomdrag); //监听地图缩放
|
||||
bmap.addEventListener('dragend', zoomdrag); //监听地图拖拽平移
|
||||
|
||||
this.bmapChart.on('click', function(params) {
|
||||
if (params.componentType == "series") {
|
||||
if (params.componentType == 'series') {
|
||||
let { id } = params.data;
|
||||
window.open(`/hardware/device/detail?id=${id}`);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.ec-extension-bmap {
|
||||
background: #a6c2df !important;
|
||||
@ -571,8 +800,14 @@ export default {
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-image: url('../../assets/image/chartbg.png');
|
||||
background-size: cover;
|
||||
}
|
||||
#chart {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
padding: 0px;
|
||||
z-index: 10100;
|
||||
border: 0px;
|
||||
@ -585,21 +820,23 @@ export default {
|
||||
.center,
|
||||
.left,
|
||||
.right {
|
||||
border: 1px solid #f00;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
top: 0;
|
||||
width: 28vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.center {
|
||||
width: 30vw;
|
||||
right: 35vw;
|
||||
// width: 30vw;
|
||||
// right: 35vw;
|
||||
width: 44vw;
|
||||
right: 28vw;
|
||||
display: block;
|
||||
color: black;
|
||||
color: #fff;
|
||||
.tit {
|
||||
padding-top: 20px;
|
||||
padding-top: 105px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@ -610,10 +847,49 @@ export default {
|
||||
}
|
||||
.left {
|
||||
left: 0;
|
||||
padding: 35px 0 35px 35px;
|
||||
padding: 70px 2px 15px 35px;
|
||||
}
|
||||
.right {
|
||||
right: 0;
|
||||
padding: 35px 35px 35px 0;
|
||||
padding: 70px 35px 15px 2px;
|
||||
}
|
||||
.my_context {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.my_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/ svg path:first-child {
|
||||
stroke: #19f1ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom_left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.my_cenbottom{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 23px;
|
||||
div{
|
||||
width: 210px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url('../../assets/image/xiaokuang.png');
|
||||
background-size: cover;
|
||||
span{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user