{{ deviceOverviewData.deviceSum }}
{{ deviceOverviewData.waterSum }}
@@ -204,7 +244,6 @@ import {
fiveConsumptionStatistics,
monthConsumptionRanking,
peaksValleysConsumption, realTimeAlarm,
- realTimeData
} from "@/api/board";
export default {
name: 'Board',
@@ -214,6 +253,8 @@ export default {
},
data() {
return {
+ selectData: 'year',
+ typeData: "2",
colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
chart1TableOption: {
step: 0.5, // 数值越大速度滚动越快
@@ -246,372 +287,383 @@ export default {
}
},
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',
- fontSize: 10
- },
- barWidth: '50%',
- barMaxWidth: '60px',
- barMinWidth: '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()
- })
+ this.getData()
},
methods: {
+ getData() {
+ deviceOverview().then(res => {
+ this.deviceOverviewData = res.data
+ })
+ monthConsumptionRanking({monitorType: this.typeData}).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',
+ fontSize: 10
+ },
+ barWidth: '50%',
+ barMaxWidth: '60px',
+ barMinWidth: '30px',
+ data: barData.map(v => {
+ return v.data[e] || 0
+ }),
+ itemStyle: {color: this.colors[k]}
+ }
+ })
+ })
+ })
+ fiveConsumptionStatistics().then(res => {
+ this.fiveConsumptionStatisticsData = res.data
+ })
+ energyConsumptionStatistics({monitorType: this.typeData, dateType: this.selectData}).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()
+ })
+ },
+ selectChange(data) {
+ this.selectData = data
+ this.getData()
+ },
+ typeChange(data) {
+ this.typeData = data
+ this.getData()
+ }
}
}
@@ -966,4 +1018,46 @@ export default {
top: 62%;
left: 6.5%;
}
+
+.select {
+ .selectItem {
+ position: absolute;
+ font-size: 0.7vw;
+ color: #fff9;
+ top: 11%;
+ width: 3.7vw;
+ height: 1.58vw;
+ line-height: 1.58vw;
+ text-align: center;
+ cursor: pointer;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ background-image: url("~@/assets/board/未选中按钮.png");
+
+ &.active {
+ color: #fff;
+ background-image: url("~@/assets/board/选中按钮.png");
+ }
+ }
+}
+
+.typeSelect {
+ .selectItem {
+ position: absolute;
+ font-size: 0.7vw;
+ color: #fff9;
+ top: 69.5%;
+ height: 2.1vw;
+ line-height: 2.1vw;
+ text-align: center;
+ cursor: pointer;
+ background-color: #0000;
+
+ &.active {
+ background-color: #0F2E51;
+ color: #4096D7;
+ border-bottom: 2px solid #4096D7;
+ }
+ }
+}
\ No newline at end of file