|
|
<template>
|
|
|
<div>
|
|
|
<div class="bg">
|
|
|
<div class="title">正道能源监控系统</div>
|
|
|
<div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
|
|
|
<div class="subTitle" style="top: 42.3%;left: 6%">本月用电排行</div>
|
|
|
<div class="subTitle" style="top: 71.2%;left: 6%">本月用电分项统计</div>
|
|
|
<div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
|
|
|
<div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
|
|
|
<div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
|
|
|
<div class="sbzl">
|
|
|
<div class="num" style="top: 22%;left: 7%;">{{ deviceOverviewData.deviceSum }}</div>
|
|
|
<div class="num" style="top: 22%;left: 14.3%">{{ deviceOverviewData.waterSum }}</div>
|
|
|
<div class="num" style="top: 22%;left: 21.7%">{{ deviceOverviewData.dnbSum }}</div>
|
|
|
<div class="num" style="top: 31%;left: 7%">{{ deviceOverviewData.airSum }}</div>
|
|
|
<div class="num" style="top: 31%;left: 14.3%">{{ deviceOverviewData.steamSum }}</div>
|
|
|
<div class="num" style="top: 31%;left: 21.7%">{{ deviceOverviewData.nitrogenSum }}</div>
|
|
|
<div class="text" style="top: 22.2%;left: 7%">网关总数</div>
|
|
|
<div class="text" style="top: 22.2%;left: 14.3%">水表总数</div>
|
|
|
<div class="text" style="top: 22.2%;left: 21.7%">电表总数</div>
|
|
|
<div class="text" style="top: 31.2%;left: 7%">压缩空气表总数</div>
|
|
|
<div class="text" style="top: 31.2%;left: 14.3%">蒸汽表总数</div>
|
|
|
<div class="text" style="top: 31.2%;left: 21.7%">氮气表总数</div>
|
|
|
</div>
|
|
|
<div class="zxnr">
|
|
|
<div class="text" style="top: 18.5%;left: 45%;">用电量(kwh)</div>
|
|
|
<div class="text" style="top: 18.5%;left: 57%;">用水量(m³)</div>
|
|
|
<div class="text" style="top: 30%;left: 38.5%;">用压缩空气量(m³)</div>
|
|
|
<div class="text" style="top: 31.5%;left: 51.5%;">用蒸汽量(m³)</div>
|
|
|
<div class="text" style="top: 30%;left: 65%;">用氮气量(m³)</div>
|
|
|
<div class="num" style="top: 20.3%;left: 45%">{{ fiveConsumptionStatisticsData.dnbSum }}</div>
|
|
|
<div class="num" style="top: 20.3%;left: 57%;">{{ fiveConsumptionStatisticsData.waterSum }}</div>
|
|
|
<div class="num" style="top: 31.8%;left: 38.5%">{{ fiveConsumptionStatisticsData.airSum }}</div>
|
|
|
<div class="num" style="top: 33.3%;left: 51.5%">{{ fiveConsumptionStatisticsData.steamSum }}</div>
|
|
|
<div class="num" style="top: 31.8%;left: 65%">{{ fiveConsumptionStatisticsData.nitrogenSum }}</div>
|
|
|
<div class="qs" style="top: 23.3%;left: 45%">
|
|
|
<span>{{
|
|
|
fiveConsumptionStatisticsData.dnbRate > 0 ? '上升' : '下降'
|
|
|
}}{{ Math.abs(fiveConsumptionStatisticsData.dnbRate) }}%</span>
|
|
|
<div :class="fiveConsumptionStatisticsData.dnbRate > 0 ? 'img':'img1'"></div>
|
|
|
</div>
|
|
|
<div class="qs" style="top: 23.3%;left: 57%;">
|
|
|
<span>{{
|
|
|
fiveConsumptionStatisticsData.waterRate > 0 ? '上升' : '下降'
|
|
|
}}{{ Math.abs(fiveConsumptionStatisticsData.waterRate) }}%</span>
|
|
|
<div :class="fiveConsumptionStatisticsData.waterRate > 0 ? 'img':'img1'"></div>
|
|
|
</div>
|
|
|
<div class="qs" style="top: 34.8%;left: 38.5%">
|
|
|
<span>{{
|
|
|
fiveConsumptionStatisticsData.airRate > 0 ? '上升' : '下降'
|
|
|
}}{{ Math.abs(fiveConsumptionStatisticsData.airRate) }}%</span>
|
|
|
<div :class="fiveConsumptionStatisticsData.airRate > 0 ? 'img':'img1'"></div>
|
|
|
</div>
|
|
|
<div class="qs" style="top: 36.3%;left: 51.5%">
|
|
|
<span>{{
|
|
|
fiveConsumptionStatisticsData.steamRate > 0 ? '上升' : '下降'
|
|
|
}}{{ Math.abs(fiveConsumptionStatisticsData.steamRate) }}%</span>
|
|
|
<div :class="fiveConsumptionStatisticsData.steamRate > 0 ? 'img':'img1'"></div>
|
|
|
</div>
|
|
|
<div class="qs" style="top: 34.8%;left: 65%">
|
|
|
<span>{{
|
|
|
fiveConsumptionStatisticsData.nitrogenRate > 0 ? '上升' : '下降'
|
|
|
}}{{ Math.abs(fiveConsumptionStatisticsData.nitrogenRate) }}%</span>
|
|
|
<div :class="fiveConsumptionStatisticsData.nitrogenRate > 0 ? 'img':'img1'"></div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="table1">
|
|
|
<div class="h1">
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
A区
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
A区
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
A区
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
A区
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(100% / 6);">
|
|
|
合计
|
|
|
</div>
|
|
|
</div>
|
|
|
<vue-seamless-scroll
|
|
|
:class-option="{...chart1TableOption,limitMoveNum:10}"
|
|
|
:data="table1Data"
|
|
|
class="case-item"
|
|
|
style="height: 84%;overflow: hidden;"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(item, index) in table1Data"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="T1">
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(100% / 6);">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<div class="table2">
|
|
|
<div class="h2">
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(33% - 60px);">
|
|
|
区域
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(66% - 120px);">
|
|
|
设备
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;width: calc(180px);">
|
|
|
报警时间
|
|
|
</div>
|
|
|
</div>
|
|
|
<vue-seamless-scroll
|
|
|
:class-option="{...chart1TableOption,limitMoveNum:10}"
|
|
|
:data="realTimeAlarmData"
|
|
|
:key="scrollKey2"
|
|
|
class="case-item"
|
|
|
style="height: 84%;overflow: hidden;"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(item, index) in realTimeAlarmData"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="T2">
|
|
|
<div class="scrollTable" style="width: calc(33% - 60px);font-size: 0.7vw">
|
|
|
{{ item.deviceName }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: calc(66% - 120px);font-size: 0.7vw">
|
|
|
<span style="color:red">{{ item.monitorName }}</span>:{{ item.alarmData }}
|
|
|
</div>
|
|
|
<div class="scrollTable" style="width: 180px; font-size: 0.7vw">
|
|
|
{{ item.collectTime }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<Chart class="jfpgtjBar" ref="jfpgtjBar"></Chart>
|
|
|
<Chart class="nhtjBar" ref="nhtjBar"></Chart>
|
|
|
<Chart class="jfpgtjPie" ref="jfpgtjPie"></Chart>
|
|
|
<Chart class="ydfxtjPie" ref="ydfxtjPie"></Chart>
|
|
|
<div class="jfpgtjInfo">
|
|
|
<div style="width: 100%"></div>
|
|
|
<div style="white-space: nowrap" v-for="(i,k) in peaksValleysConsumptionData">
|
|
|
<div class="market" :style="`background-color:${colors[k]}`"></div>
|
|
|
<div class="text">
|
|
|
{{ i[0] }}段用电
|
|
|
</div>
|
|
|
<div class="num">
|
|
|
<span :style="`color:${colors[k]};font-weight: bold;font-size:0.9vw`">
|
|
|
{{ i[2] }}
|
|
|
</span>%
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 100%"></div>
|
|
|
</div>
|
|
|
<div class="ydph">
|
|
|
<template v-for="(i,k) in rankingData.splice(0,5)">
|
|
|
<div class="icon" :class="`icon${k+1}`">
|
|
|
<div class="img"></div>
|
|
|
</div>
|
|
|
<div class="ph" :class="`ph${k+1}`">
|
|
|
<div class="text">{{ i.workUnitName }}</div>
|
|
|
<div class="num">
|
|
|
<span style="color: #25B89A">{{ i.expend }}</span>
|
|
|
<span>kwh</span>
|
|
|
</div>
|
|
|
<div class="schedule">
|
|
|
<div class="schedule1" :style="`width:${i.expend}%`"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
import Chart from "@/components/Charts/Chart.vue";
|
|
|
import * as echarts from 'echarts'
|
|
|
import {
|
|
|
deviceOverview, energyConsumptionStatistics,
|
|
|
fiveConsumptionStatistics,
|
|
|
monthConsumptionRanking,
|
|
|
peaksValleysConsumption, realTimeAlarm,
|
|
|
realTimeData
|
|
|
} from "@/api/board";
|
|
|
export default {
|
|
|
name: 'Board',
|
|
|
components: {
|
|
|
vueSeamlessScroll,
|
|
|
Chart
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
|
|
|
chart1TableOption: {
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
waitTime: 0,
|
|
|
autoPlay: false,
|
|
|
navigation: false
|
|
|
},
|
|
|
table1Data: [
|
|
|
{
|
|
|
no: 1
|
|
|
},
|
|
|
{
|
|
|
no: 1
|
|
|
},
|
|
|
],
|
|
|
scrollKey1: '',
|
|
|
scrollKey2: '',
|
|
|
deviceOverviewData: {},
|
|
|
rankingData: [],
|
|
|
statisticsData: [],
|
|
|
peaksValleysConsumptionData: [],
|
|
|
fiveConsumptionStatisticsData: {},
|
|
|
realTimeAlarmData: []
|
|
|
}
|
|
|
},
|
|
|
async mounted() {
|
|
|
deviceOverview().then(res => {
|
|
|
this.deviceOverviewData = res.data
|
|
|
})
|
|
|
monthConsumptionRanking({monitorType: 2}).then(res => {
|
|
|
this.rankingData = res.data.ranking
|
|
|
this.statisticsData = res.data.statistics
|
|
|
this.$refs.ydfxtjPie.setData({
|
|
|
graphic: [
|
|
|
{
|
|
|
type: 'text',
|
|
|
left: 'center',
|
|
|
top: 'center',
|
|
|
style: {
|
|
|
text: '能耗\n占比',
|
|
|
textAlign: 'center',
|
|
|
fill: '#4FB8FF', // 数字颜色
|
|
|
fontSize: 20,
|
|
|
fontWeight: 'bold',
|
|
|
lineHeight: 30
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
radius: ['55%', '70%'],
|
|
|
tooltip: {
|
|
|
show: false
|
|
|
},
|
|
|
label: {
|
|
|
formatter: params => {
|
|
|
return `${params.name}\n${params.value}`
|
|
|
},
|
|
|
color: '#fff'
|
|
|
|
|
|
},
|
|
|
labelLine: {
|
|
|
length: 10,
|
|
|
length2: 10,
|
|
|
},
|
|
|
data: res.data.statistics.map((e, k) => {
|
|
|
return {
|
|
|
value: e.expend,
|
|
|
name: e.workUnitName,
|
|
|
itemStyle: {
|
|
|
color: this.colors[k] + '99',
|
|
|
shadowColor: this.colors[k] + 'cc',
|
|
|
shadowBlur: 20,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowOffsetY: 0
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
]
|
|
|
})
|
|
|
})
|
|
|
peaksValleysConsumption().then(async res => {
|
|
|
let oriData = res.data?.reportList?.reduce((acc, item) => {
|
|
|
if (!acc[item.priceType]) {
|
|
|
acc[item.priceType] = 0;
|
|
|
}
|
|
|
acc[item.priceType] += item.expend;
|
|
|
return acc;
|
|
|
}, {})
|
|
|
let all = Object.values(oriData).reduce((acc, item) => {
|
|
|
return acc + item
|
|
|
}, 0)
|
|
|
let chartData = Object.keys(oriData).map((e) => {
|
|
|
return [e, oriData[e], (oriData[e] / all * 100).toFixed(2)]
|
|
|
})
|
|
|
this.peaksValleysConsumptionData = chartData
|
|
|
let seriesData = []
|
|
|
chartData.forEach(e => {
|
|
|
seriesData.push({
|
|
|
value: all / 100 / chartData.length, name: '',
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: '#0000'
|
|
|
}
|
|
|
})
|
|
|
seriesData.push({
|
|
|
value: e[1], name: e[0] + '段用电', percentage: e[2]
|
|
|
})
|
|
|
})
|
|
|
|
|
|
this.$refs.jfpgtjPie.setData({
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: (params) => {
|
|
|
return `${params.marker}${params.name}：${params.data.percentage}%`
|
|
|
}
|
|
|
},
|
|
|
graphic: [
|
|
|
{
|
|
|
type: 'text',
|
|
|
left: 'center',
|
|
|
top: 'center',
|
|
|
style: {
|
|
|
text: '{num|1111}\n{unit|kwh}',
|
|
|
textAlign: 'center',
|
|
|
rich: {
|
|
|
num: {
|
|
|
fill: '#4FB8FF', // 数字颜色
|
|
|
fontSize: 20,
|
|
|
fontWeight: 'bold',
|
|
|
lineHeight: 30
|
|
|
},
|
|
|
unit: {
|
|
|
fill: '#4FB8FF', // 字母颜色
|
|
|
fontSize: 16,
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: 'pie1',
|
|
|
type: 'pie',
|
|
|
radius: ['62%', '70%'],
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false
|
|
|
},
|
|
|
data: seriesData
|
|
|
|
|
|
},
|
|
|
{
|
|
|
name: 'pie2',
|
|
|
type: 'pie',
|
|
|
radius: ['45%', '62%'],
|
|
|
itemStyle: {
|
|
|
|
|
|
opacity: 0.6,
|
|
|
},
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
data: seriesData
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
await this.$nextTick()
|
|
|
const chart = this.$refs.jfpgtjPie.getChart()
|
|
|
chart.on('mouseover', (params) => {
|
|
|
if (params.seriesType === 'pie') {
|
|
|
const other = params.seriesName === 'pie1' ? 'pie2' : 'pie1'
|
|
|
chart.dispatchAction({
|
|
|
type: 'highlight',
|
|
|
seriesName: other,
|
|
|
name: params.name
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
chart.on('mouseout', (params) => {
|
|
|
if (params.seriesType === 'pie') {
|
|
|
const other = params.seriesName === 'pie1' ? 'pie2' : 'pie1'
|
|
|
chart.dispatchAction({
|
|
|
type: 'downplay',
|
|
|
seriesName: other,
|
|
|
name: params.name
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
function groupByDate(data) {
|
|
|
const result = {};
|
|
|
const types = new Set();
|
|
|
|
|
|
data.forEach(item => {
|
|
|
if (!result[item.date]) {
|
|
|
result[item.date] = {date: item.date, data: {}};
|
|
|
}
|
|
|
result[item.date].data[item.priceType] = item.expend;
|
|
|
types.add(item.priceType);
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
grouped: Object.values(result),
|
|
|
types: Array.from(types),
|
|
|
typeCount: types.size
|
|
|
};
|
|
|
}
|
|
|
|
|
|
let barData = groupByDate(res.data?.reportList)?.grouped
|
|
|
let types = groupByDate(res.data?.reportList)?.types
|
|
|
this.$refs.jfpgtjBar.setData({
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {type: 'shadow'}
|
|
|
},
|
|
|
legend: {
|
|
|
show: false
|
|
|
},
|
|
|
grid: {
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
bottom: '5%',
|
|
|
top: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
name: '单位(kwh)',
|
|
|
max: function (value) {
|
|
|
return value.max * 1.2;
|
|
|
},
|
|
|
nameTextStyle: {color: '#ccc'},
|
|
|
axisLabel: {color: '#ccc'},
|
|
|
axisLine: {
|
|
|
show: true
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255,255, 0.3)',
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: barData.map(e => e.date),
|
|
|
axisLabel: {color: '#ccc'},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255,255, 0.3)',
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: types.map((e, k) => {
|
|
|
return {
|
|
|
name: e + '段用电',
|
|
|
type: 'bar',
|
|
|
stack: 'total',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'inside',
|
|
|
color: '#000'
|
|
|
},
|
|
|
barWidth: '30px',
|
|
|
data: barData.map(v => {
|
|
|
return v.data[e] || 0
|
|
|
}),
|
|
|
itemStyle: {color: this.colors[k]}
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
fiveConsumptionStatistics().then(res => {
|
|
|
this.fiveConsumptionStatisticsData = res.data
|
|
|
})
|
|
|
energyConsumptionStatistics({monitorType: 2, dateType: 'year'}).then(res => {
|
|
|
this.$refs.nhtjBar.setData({
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {type: 'shadow'}
|
|
|
},
|
|
|
legend: {
|
|
|
show: false
|
|
|
},
|
|
|
grid: {
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
bottom: '0',
|
|
|
top: '35',
|
|
|
containLabel: true
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
name: '单位(kwh)',
|
|
|
max: function (value) {
|
|
|
return value.max * 1.2;
|
|
|
},
|
|
|
nameTextStyle: {color: '#ccc'},
|
|
|
axisLabel: {color: '#ccc'},
|
|
|
axisLine: {
|
|
|
show: true
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255,255, 0.3)',
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res.data.reportList.map(v => v.date),
|
|
|
axisLabel: {color: '#ccc'},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255,255, 0.3)',
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '红',
|
|
|
type: 'bar',
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: '30px',
|
|
|
data: res.data.reportList.map(v => v.expend),
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0, 0, 0, 1, // 从顶部到底部
|
|
|
[
|
|
|
{offset: 0, color: '#1FA7F4'}, // 顶部颜色
|
|
|
{offset: 1, color: '#3351B4'} // 底部颜色
|
|
|
]
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'line',
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: '30px',
|
|
|
data: res.data.reportList.map(v => v.expend),
|
|
|
itemStyle: {color: '#fff'},
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0, 0, 0, 1, // x0,y0 → x1,y1 (垂直渐变)
|
|
|
[
|
|
|
{offset: 0, color: 'rgba(255,255,255,0.53)'}, // #fff8
|
|
|
{offset: 1, color: 'rgba(255,255,255,0)'} // #fff0
|
|
|
]
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
]
|
|
|
})
|
|
|
})
|
|
|
realTimeAlarm().then(res => {
|
|
|
this.realTimeAlarmData = JSON.parse(JSON.stringify(res.data.alarmDataList))
|
|
|
this.scrollKey2 = new Date().getTime()
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
.scrollTable {
|
|
|
color: rgb(185, 186, 192);
|
|
|
margin: auto 0px;
|
|
|
padding: 4px 0;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
width: 25%;
|
|
|
}
|
|
|
|
|
|
.table1 {
|
|
|
position: absolute;
|
|
|
top: 44%;
|
|
|
left: 28%;
|
|
|
width: 44%;
|
|
|
height: 21%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.h1 {
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url('~@/assets/board/T1bg.png')
|
|
|
}
|
|
|
|
|
|
.T1 {
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url('~@/assets/board/h1bg.png');
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
|
|
|
.table2 {
|
|
|
position: absolute;
|
|
|
top: 74%;
|
|
|
left: 75%;
|
|
|
width: 22%;
|
|
|
height: 21%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.h2 {
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url('~@/assets/board/T1-1bg.png')
|
|
|
}
|
|
|
|
|
|
.T2 {
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url('~@/assets/board/h1-1bg.png');
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
|
|
|
.bg {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url('~@/assets/board/bg.jpg');
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 2%;
|
|
|
left: 50.8%;
|
|
|
color: #eee;
|
|
|
font-size: 2vw;
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 0.5vw;
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
.subTitle {
|
|
|
position: absolute;
|
|
|
font-size: 1vw;
|
|
|
color: #eee;
|
|
|
font-weight: 600;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.sbzl {
|
|
|
.num {
|
|
|
position: absolute;
|
|
|
font-size: 1.2vw;
|
|
|
color: #66D49E;
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
position: absolute;
|
|
|
font-size: 0.6vw;
|
|
|
color: #fff;
|
|
|
width: 3vw;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.zxnr {
|
|
|
.text {
|
|
|
position: absolute;
|
|
|
font-size: 0.6vw;
|
|
|
color: #fff;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.num {
|
|
|
position: absolute;
|
|
|
font-size: 1.2vw;
|
|
|
color: #4EACF3;
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 0.2vw;
|
|
|
}
|
|
|
|
|
|
.qs {
|
|
|
position: absolute;
|
|
|
font-size: 0.6vw;
|
|
|
color: #fff;
|
|
|
text-align: left;
|
|
|
|
|
|
.img {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
width: 1vw;
|
|
|
height: 1vw;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url('~@/assets/board/向上箭头.png');
|
|
|
}
|
|
|
|
|
|
.img1 {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
width: 1vw;
|
|
|
height: 1vw;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url('~@/assets/board/向下箭头.png');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.jfpgtjBar {
|
|
|
position: absolute;
|
|
|
top: 39%;
|
|
|
left: 75%;
|
|
|
width: 22%;
|
|
|
height: 27%;
|
|
|
}
|
|
|
|
|
|
.nhtjBar {
|
|
|
position: absolute;
|
|
|
top: 74%;
|
|
|
left: 27.5%;
|
|
|
width: 45%;
|
|
|
height: 20.5%;
|
|
|
}
|
|
|
|
|
|
|
|
|
.jfpgtjPie {
|
|
|
position: absolute;
|
|
|
top: 17%;
|
|
|
left: 75%;
|
|
|
width: 12.5%;
|
|
|
height: 20%;
|
|
|
}
|
|
|
|
|
|
.ydfxtjPie {
|
|
|
position: absolute;
|
|
|
top: 74%;
|
|
|
left: 3%;
|
|
|
width: 22%;
|
|
|
height: 20%;
|
|
|
}
|
|
|
|
|
|
.jfpgtjInfo {
|
|
|
position: absolute;
|
|
|
top: 17%;
|
|
|
left: 87.5%;
|
|
|
width: 8.5%;
|
|
|
height: 20%;
|
|
|
color: #fff;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
.market {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
width: 0.8vw;
|
|
|
height: 0.8vw;
|
|
|
margin-right: 0.8vw;
|
|
|
background-color: #28A7FC;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
display: inline-block;
|
|
|
font-size: 0.8vw;
|
|
|
width: calc(100% - 1.6vw - 2.5vw);
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.num {
|
|
|
display: inline-block;
|
|
|
font-size: 0.8vw;
|
|
|
width: 2.5vw;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
position: absolute;
|
|
|
width: 2vw;
|
|
|
height: 2vw;
|
|
|
background-color: #fff1;
|
|
|
|
|
|
.img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 60%;
|
|
|
height: 60%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon1 {
|
|
|
top: 46%;
|
|
|
left: 4%;
|
|
|
|
|
|
.img {
|
|
|
background-image: url('~@/assets/board/jz1.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon2 {
|
|
|
top: 50%;
|
|
|
left: 4%;
|
|
|
|
|
|
.img {
|
|
|
background-image: url('~@/assets/board/jz2.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon3 {
|
|
|
top: 54%;
|
|
|
left: 4%;
|
|
|
|
|
|
.img {
|
|
|
background-image: url('~@/assets/board/jz3.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon4 {
|
|
|
top: 58%;
|
|
|
left: 4%;
|
|
|
|
|
|
.img {
|
|
|
background-image: url('~@/assets/board/jz4.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon5 {
|
|
|
top: 62%;
|
|
|
left: 4%;
|
|
|
|
|
|
.img {
|
|
|
background-image: url('~@/assets/board/jz5.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ph {
|
|
|
position: absolute;
|
|
|
width: 19vw;
|
|
|
height: 2vw;
|
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0.067), rgba(255, 255, 255, 0));
|
|
|
|
|
|
.text {
|
|
|
position: absolute;
|
|
|
font-size: 0.8vw;
|
|
|
color: #fff;
|
|
|
top: 70%;
|
|
|
transform: translateY(-100%);
|
|
|
left: 1vw;
|
|
|
}
|
|
|
|
|
|
.num {
|
|
|
position: absolute;
|
|
|
font-size: 0.8vw;
|
|
|
text-align: right;
|
|
|
color: #fff;
|
|
|
top: 70%;
|
|
|
transform: translateY(-100%);
|
|
|
right: 1vw;
|
|
|
}
|
|
|
|
|
|
.schedule {
|
|
|
position: absolute;
|
|
|
top: 80%;
|
|
|
left: 1vw;
|
|
|
width: calc(100% - 2vw);
|
|
|
height: 3px;
|
|
|
background-color: #fff2;
|
|
|
|
|
|
.schedule1 {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(to right, #249CE3, #2FE1E0);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ph1 {
|
|
|
top: 46%;
|
|
|
left: 6.5%;
|
|
|
}
|
|
|
|
|
|
.ph2 {
|
|
|
top: 50%;
|
|
|
left: 6.5%;
|
|
|
}
|
|
|
|
|
|
.ph3 {
|
|
|
top: 54%;
|
|
|
left: 6.5%;
|
|
|
}
|
|
|
|
|
|
.ph4 {
|
|
|
top: 58%;
|
|
|
left: 6.5%;
|
|
|
}
|
|
|
|
|
|
.ph5 {
|
|
|
top: 62%;
|
|
|
left: 6.5%;
|
|
|
}
|
|
|
</style> |