404 lines
9.2 KiB
Vue
404 lines
9.2 KiB
Vue
<template>
|
||
<view class="home-container">
|
||
<view class="site-sections-list">
|
||
<view class="site-title">站点选择</view>
|
||
<checkbox-group class="site-radio" @change="onSiteChange">
|
||
<label v-for="item in siteOptions" :key="item.value" class="radio-item"
|
||
:class="{ active: selectedSiteIds.includes(item.value), disabled: item.disable }">
|
||
<checkbox class="radio" :value="item.value" :disabled="item.disable"
|
||
:checked="selectedSiteIds.includes(item.value)" color="#547ef4" />
|
||
<text class="radio-text">{{ item.text }}</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
<view class="base-info">
|
||
<view class="total-card">
|
||
<view class="total-header">
|
||
<view class="title">总累计运行数据</view>
|
||
<view class="total-revenue">
|
||
<text class="label">总收入</text>
|
||
<text class="value">{{ format2(runningInfo.totalRevenue) }}</text>
|
||
<text class="unit">元</text>
|
||
</view>
|
||
</view>
|
||
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||
<uni-grid-item v-for="(item, index) in sjglData" :key="index + 'sjglData'">
|
||
<view class="grid-item-box">
|
||
<view class="title">{{ item.title }}</view>
|
||
<view class="text" :style="{ color: item.color }">
|
||
{{ format2(runningInfo[item.attr]) }}
|
||
</view>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
|
||
<uni-section title="收入曲线" type="line" class="sections-list">
|
||
<view style="width:100%;height: 220px;">
|
||
<qiun-data-charts type="line" :chartData="revenueChartData" :optsWatch='false'
|
||
:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="revenueOptions" :ontouch="true" />
|
||
</view>
|
||
</uni-section>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters
|
||
} from 'vuex'
|
||
import {
|
||
formatDate
|
||
} from '@/utils/filters'
|
||
import {
|
||
getAllSites,
|
||
getDzjkHomeView,
|
||
getAmmeterRevenueData
|
||
} from '@/api/ems/site.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageScrollTop: 0,
|
||
siteOptions: [],
|
||
selectedSiteIds: [],
|
||
runningInfo: {},
|
||
revenueChartData: {},
|
||
revenueOptions: {
|
||
padding: [10, 5, 0, 10],
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
xAxis: {
|
||
scrollShow: false,
|
||
itemCount: 5,
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
disabled: false,
|
||
splitNumber: 4
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "curve",
|
||
width: 2
|
||
},
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
gradient: true
|
||
}
|
||
}
|
||
},
|
||
sjglData: [{
|
||
title: "今日充电量（kWh）",
|
||
attr: "dayChargedCap",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "今日放电量（kWh）",
|
||
attr: "dayDisChargedCap",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "总充电量（kWh）",
|
||
attr: "totalChargedCap",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "今日实时收入（元）",
|
||
attr: "dayRevenue",
|
||
color: '#f67438'
|
||
},
|
||
{
|
||
title: "昨日充电量（kWh）",
|
||
attr: "yesterdayChargedCap",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "昨日放电量（kWh）",
|
||
attr: "yesterdayDisChargedCap",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "总放电量（kWh）",
|
||
attr: "totalDischargedCap",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "昨日实时收入（元）",
|
||
attr: "yesterdayRevenue",
|
||
color: '#f67438'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['belongSite'])
|
||
},
|
||
methods: {
|
||
format2(value) {
|
||
const num = Number(value || 0)
|
||
return Number.isFinite(num) ? num.toFixed(2) : '0.00'
|
||
},
|
||
getLastDaysRange(days = 7) {
|
||
const end = new Date()
|
||
const start = new Date(end.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||
return [formatDate(start), formatDate(end)]
|
||
},
|
||
buildDateList(start, end) {
|
||
const list = []
|
||
const startTime = new Date(start).getTime()
|
||
const endTime = new Date(end).getTime()
|
||
const dayMs = 24 * 60 * 60 * 1000
|
||
for (let t = startTime; t <= endTime; t += dayMs) {
|
||
list.push(formatDate(t))
|
||
}
|
||
return list
|
||
},
|
||
onSiteChange(e) {
|
||
const values = e.detail.value || []
|
||
this.selectedSiteIds = values
|
||
this.updateSiteInfo()
|
||
},
|
||
updateSiteInfo() {
|
||
if (!this.selectedSiteIds || this.selectedSiteIds.length === 0) {
|
||
this.runningInfo = {}
|
||
this.revenueChartData = {}
|
||
return
|
||
}
|
||
this.getRunningInfo()
|
||
this.getRevenueChartData()
|
||
},
|
||
getSiteList() {
|
||
getAllSites().then(response => {
|
||
const data = response?.data || []
|
||
this.siteOptions = data.map(item => {
|
||
return {
|
||
text: item.siteName,
|
||
value: item.siteId,
|
||
disable: !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all') ? false : !this
|
||
.belongSite.includes(item.siteId)
|
||
}
|
||
})
|
||
const defaultSite = this.siteOptions.find(item => !item.disable)?.value || ''
|
||
this.selectedSiteIds = defaultSite ? [defaultSite] : []
|
||
this.selectedSiteIds.length > 0 && this.updateSiteInfo()
|
||
})
|
||
},
|
||
getRunningInfo() {
|
||
const sumFields = ['totalRevenue', ...this.sjglData.map(item => item.attr)]
|
||
const requests = this.selectedSiteIds.map(siteId => getDzjkHomeView({
|
||
siteId
|
||
}).then(response => response?.data || {}))
|
||
Promise.all(requests).then(list => {
|
||
const result = {}
|
||
sumFields.forEach(key => {
|
||
result[key] = list.reduce((sum, item) => {
|
||
const value = Number(item?.[key] || 0)
|
||
return sum + (Number.isFinite(value) ? value : 0)
|
||
}, 0)
|
||
})
|
||
this.runningInfo = result
|
||
})
|
||
},
|
||
getRevenueChartData() {
|
||
const [startTime, endTime] = this.getLastDaysRange(7)
|
||
const dateList = this.buildDateList(startTime, endTime)
|
||
const requests = this.selectedSiteIds.map(siteId => getAmmeterRevenueData({
|
||
siteId,
|
||
startTime,
|
||
endTime,
|
||
pageSize: 200,
|
||
pageNum: 1
|
||
}).then(response => ({
|
||
siteId,
|
||
rows: response?.rows || []
|
||
})))
|
||
Promise.all(requests).then(list => {
|
||
const categories = dateList.map(day => day.slice(5))
|
||
const series = list.map(item => {
|
||
const sumMap = {}
|
||
dateList.forEach(day => {
|
||
sumMap[day] = 0
|
||
})
|
||
item.rows.forEach(row => {
|
||
const day = row.dataTime || row.statisDate || row.date
|
||
if (!day) return
|
||
if (!Object.prototype.hasOwnProperty.call(sumMap, day)) {
|
||
sumMap[day] = 0
|
||
}
|
||
const value = Number(row.actualRevenue || row.revenue || 0)
|
||
sumMap[day] += Number.isFinite(value) ? value : 0
|
||
})
|
||
const name = this.siteOptions.find(opt => opt.value === item.siteId)?.text || item.siteId
|
||
return {
|
||
name,
|
||
data: dateList.map(day => Number((sumMap[day] || 0).toFixed(2)))
|
||
}
|
||
})
|
||
this.revenueChartData = JSON.parse(JSON.stringify({
|
||
categories,
|
||
series
|
||
}))
|
||
})
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.$nextTick(() => {
|
||
this.getSiteList()
|
||
})
|
||
},
|
||
onPageScroll(e) {
|
||
this.pageScrollTop = e.scrollTop
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
font-size: 26rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
view {
|
||
line-height: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.home-container {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.site-sections-list {
|
||
background: linear-gradient(to right, #547ef4, #679ff5);
|
||
padding: 30rpx 30rpx 100rpx;
|
||
color: #fff;
|
||
|
||
.site-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.site-radio {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx 20rpx;
|
||
border-radius: 28rpx;
|
||
background: rgba(0, 0, 0, 0.18);
|
||
color: rgba(255, 255, 255, 0.75);
|
||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
background: #ffffff;
|
||
color: #233157;
|
||
box-shadow: 0 12rpx 22rpx rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.radio {
|
||
display: none;
|
||
}
|
||
|
||
.radio-text {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.base-info {
|
||
margin-top: -80rpx;
|
||
border-radius: 80rpx 80rpx 0 0;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
|
||
.total-card {
|
||
margin-top: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
padding: 20rpx;
|
||
|
||
.total-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.total-revenue {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6rpx;
|
||
font-size: 22rpx;
|
||
color: #19242d;
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #f67438;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grid-item-box {
|
||
padding-top: 6rpx;
|
||
padding-bottom: 6rpx;
|
||
text-align: left;
|
||
|
||
.title {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sections-list {
|
||
margin-bottom: 10rpx;
|
||
|
||
::v-deep &>.uni-section-header {
|
||
font-weight: 700;
|
||
font-size: 26rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.sections-list:not(:first-child) {
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
</style>
|