yinq
/
HKZD-EMS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改界面数据类型切换

Browse Source
master
夜笙歌 3 months ago
parent e11bc43c20
commit 0af843e1ad
1 changed files with 459 additions and 365 deletions
Show Stats Download Patch File Download Diff File

824
src/views/board/index.vue
Unescape Escape View File

@ -8,6 +8,46 @@
<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="select">
<div class="selectItem" style="left: 57%" :class="{'active': selectData === 'day'}"
@click="selectChange('day')">
本 日
</div>
<div class="selectItem" style="left: calc(57% + 4vw)" :class="{'active': selectData === 'month'}"
@click="selectChange('month')">
本 月
</div>
<!-- <div class="selectItem" style="left: calc(57% + 8vw)" :class="{'active': selectData === '3'}"-->
<!-- @click="selectChange('3')">-->
<!-- 本季度-->
<!-- </div>-->
<div class="selectItem" style="left: calc(57% + 8vw)" :class="{'active': selectData === 'year'}"
@click="selectChange('year')">
本年度
</div>
</div>
<div class="typeSelect">
<div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '2'}"
@click="typeChange('2')">
电
</div>
<div class="selectItem" style="width:2.4vw;left: calc(57% + 2.4vw)" :class="{'active': typeData === '3'}"
@click="typeChange('3')">
水
</div>
<div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '4'}"
@click="typeChange('4')">
压缩空气
</div>
<div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '5'}"
@click="typeChange('5')">
蒸汽
</div>
<div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '6'}"
@click="typeChange('6')">
氮气
</div>
</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>
@ -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()
}
}
}
</script>
@ -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;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save