|
|
@@ -26,13 +26,14 @@
|
|
|
</CusModule>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import CusModule from '../components/CusModule.vue';
|
|
|
import BaseChart from '@/components/BaseChart/index.vue'
|
|
|
import {copyObj, numToStr} from '@/utils';
|
|
|
import {mapState} from 'vuex';
|
|
|
import * as echarts from 'echarts'
|
|
|
-import {pgSupplyDayTotalPv, pgSupplyHourTotalPv, pgSupplyTotalPv} from "@/api/screen";
|
|
|
+import {pgSupplyHourList, pgSupplyHourTotalPv} from "@/api/screen";
|
|
|
import {DateTool} from "@/utils/DateTool";
|
|
|
|
|
|
const option = {
|
|
|
@@ -64,11 +65,12 @@ const option = {
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
+
|
|
|
export default {
|
|
|
name: 'SourceLeft',
|
|
|
data() {
|
|
|
return {
|
|
|
- todayEnergy: '321',
|
|
|
+ todayEnergy: '0',
|
|
|
elecList: [
|
|
|
{
|
|
|
name: "本月发电量",
|
|
|
@@ -89,28 +91,6 @@ export default {
|
|
|
image: require("@/assets/images/source/l1-item3.png"),
|
|
|
},
|
|
|
],
|
|
|
- elecIndexList: [
|
|
|
- {
|
|
|
- name: "逆变器输入电量",
|
|
|
- value: 120,
|
|
|
- unit: "kW",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "逆变器转换效率",
|
|
|
- value: 86.3,
|
|
|
- unit: "%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "光电转换效率",
|
|
|
- value: 82.1,
|
|
|
- unit: "%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "电站性能比",
|
|
|
- value: 78.09,
|
|
|
- unit: "",
|
|
|
- },
|
|
|
- ],
|
|
|
lineData: [],
|
|
|
realtimeLineData: []
|
|
|
};
|
|
|
@@ -142,7 +122,7 @@ export default {
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
- color: "#80DBE1", // 线条颜色
|
|
|
+ color: "#80DBE1",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
@@ -150,9 +130,8 @@ export default {
|
|
|
borderColor: "#fff",
|
|
|
borderWidth: 3
|
|
|
},
|
|
|
- areaStyle: { //区域填充样式
|
|
|
+ areaStyle: {
|
|
|
normal: {
|
|
|
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
color: "rgba(81, 139, 152,0.8)"
|
|
|
@@ -162,8 +141,8 @@ export default {
|
|
|
color: "rgba(81, 139, 152, 0)"
|
|
|
}
|
|
|
], false),
|
|
|
- shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
|
|
|
- shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ shadowColor: 'rgba(81, 139, 152, 0.5)',
|
|
|
+ shadowBlur: 20
|
|
|
}
|
|
|
},
|
|
|
data: this.lineData.map(item => item.yData),
|
|
|
@@ -192,7 +171,7 @@ export default {
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
- color: "#80DBE1", // 线条颜色
|
|
|
+ color: "#80DBE1",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
@@ -200,9 +179,8 @@ export default {
|
|
|
borderColor: "#fff",
|
|
|
borderWidth: 3
|
|
|
},
|
|
|
- areaStyle: { //区域填充样式
|
|
|
+ areaStyle: {
|
|
|
normal: {
|
|
|
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
color: "rgba(81, 139, 152,0.8)"
|
|
|
@@ -212,8 +190,8 @@ export default {
|
|
|
color: "rgba(81, 139, 152, 0)"
|
|
|
}
|
|
|
], false),
|
|
|
- shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
|
|
|
- shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ shadowColor: 'rgba(81, 139, 152, 0.5)',
|
|
|
+ shadowBlur: 20
|
|
|
}
|
|
|
},
|
|
|
data: this.realtimeLineData.map(item => item.yData),
|
|
|
@@ -243,89 +221,182 @@ export default {
|
|
|
this.getPgPvRealTimeSupply()
|
|
|
this.getHisPgPvSupply()
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取光伏汇总数据（今日、本月、今年、累计）
|
|
|
+ */
|
|
|
async getPgSupply() {
|
|
|
- const {data: pgPvSupplyTotalPv} = await pgSupplyTotalPv({
|
|
|
- areaCode: this.areaType
|
|
|
- })
|
|
|
- if (!pgPvSupplyTotalPv) {
|
|
|
- return
|
|
|
+ try {
|
|
|
+ const todayStr = DateTool.now(DateTool.DateFormat.YYYY_MM_DD)
|
|
|
+ const monthStart = DateTool.now(DateTool.DateFormat.YYYY_MM) + '-01'
|
|
|
+ const yearStart = DateTool.now(DateTool.DateFormat.YYYY) + '-01-01'
|
|
|
+
|
|
|
+ // 并发请求所有汇总数据
|
|
|
+ const [todayRes, monthRes, yearRes, totalRes] = await Promise.all([
|
|
|
+ // 今日发电量
|
|
|
+ pgSupplyHourTotalPv({
|
|
|
+ areaCode: this.areaType,
|
|
|
+ date: todayStr
|
|
|
+ }),
|
|
|
+ // 本月发电量
|
|
|
+ pgSupplyHourTotalPv({
|
|
|
+ areaCode: this.areaType,
|
|
|
+ startRecTime: monthStart,
|
|
|
+ endRecTime: todayStr
|
|
|
+ }),
|
|
|
+ // 今年发电量
|
|
|
+ pgSupplyHourTotalPv({
|
|
|
+ areaCode: this.areaType,
|
|
|
+ startRecTime: yearStart,
|
|
|
+ endRecTime: todayStr
|
|
|
+ }),
|
|
|
+ // 累计发电量
|
|
|
+ pgSupplyHourTotalPv({
|
|
|
+ areaCode: this.areaType
|
|
|
+ })
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 更新今日发电量
|
|
|
+ if (todayRes?.data) {
|
|
|
+ this.todayEnergy = numToStr(todayRes.data.genElecQuantity || 0)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新统计卡片
|
|
|
+ const [monthPv, yearPv, totalPv] = this.elecList
|
|
|
+ monthPv.value = numToStr(monthRes?.data?.genElecQuantity || 0)
|
|
|
+ yearPv.value = numToStr(yearRes?.data?.genElecQuantity || 0)
|
|
|
+ totalPv.value = numToStr(totalRes?.data?.genElecQuantity || 0)
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取光伏汇总数据失败:', error)
|
|
|
}
|
|
|
- const {
|
|
|
- thisDay,
|
|
|
- thisMonth,
|
|
|
- thisYear,
|
|
|
- total
|
|
|
- } = pgPvSupplyTotalPv
|
|
|
- const [monthPv, yearPv, totalPv] = this.elecList
|
|
|
- this.todayEnergy = numToStr(thisDay.genElecQuantity)
|
|
|
- monthPv.value = numToStr(thisMonth.genElecQuantity)
|
|
|
- yearPv.value = numToStr(thisYear.genElecQuantity)
|
|
|
- totalPv.value = numToStr(total.genElecQuantity)
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取今日实时小时数据
|
|
|
+ */
|
|
|
async getPgPvRealTimeSupply() {
|
|
|
- const {data: pgPvRealtimeSupply} = await pgSupplyHourTotalPv({
|
|
|
- areaCode: this.areaType,
|
|
|
- date: DateTool.now(DateTool.DateFormat.YYYY_MM_DD)
|
|
|
- })
|
|
|
- if (!pgPvRealtimeSupply) {
|
|
|
- return
|
|
|
- }
|
|
|
- const timeIndex = DateTool.getTime(60);
|
|
|
- const timeIndexMap = {}
|
|
|
- pgPvRealtimeSupply.forEach(item => {
|
|
|
- timeIndexMap[item.timeIndex] = item
|
|
|
- })
|
|
|
- const lineData = []
|
|
|
- timeIndex.forEach((item, index) => {
|
|
|
- if (timeIndexMap[index + 1]) {
|
|
|
- lineData.push({
|
|
|
- xData: item,
|
|
|
- yData: timeIndexMap[index + 1].genElecQuantity
|
|
|
- })
|
|
|
- } else {
|
|
|
+ try {
|
|
|
+ const {data, rows} = await pgSupplyHourList({
|
|
|
+ areaCode: this.areaType,
|
|
|
+ date: DateTool.now(DateTool.DateFormat.YYYY_MM_DD),
|
|
|
+ timeDimension: 'hour', // 关键参数：按小时维度查询
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 24, // 一天24小时
|
|
|
+ orderFlag: 'asc' // 升序排列
|
|
|
+ })
|
|
|
+
|
|
|
+ // 兼容两种返回格式
|
|
|
+ const hourlyData = rows || data || []
|
|
|
+
|
|
|
+ if (!Array.isArray(hourlyData) || hourlyData.length === 0) {
|
|
|
+ console.warn('实时小时数据为空')
|
|
|
+ this.realtimeLineData = this.getEmptyHourData()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 构建小时索引映射
|
|
|
+ const timeIndexMap = {}
|
|
|
+ hourlyData.forEach(item => {
|
|
|
+ if (item.timeIndex) {
|
|
|
+ timeIndexMap[item.timeIndex] = item
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 生成24小时完整数据
|
|
|
+ const timeLabels = DateTool.getTime(60) // 获取24小时的时间标签
|
|
|
+ const lineData = []
|
|
|
+
|
|
|
+ timeLabels.forEach((timeLabel, index) => {
|
|
|
+ const hourIndex = index + 1 // timeIndex 从1开始
|
|
|
+ const hourData = timeIndexMap[hourIndex]
|
|
|
+
|
|
|
lineData.push({
|
|
|
- xData: item,
|
|
|
- yData: 0
|
|
|
+ xData: timeLabel,
|
|
|
+ yData: hourData ? (hourData.genElecQuantity || 0) : 0
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
- this.realtimeLineData = lineData
|
|
|
+ })
|
|
|
+
|
|
|
+ this.realtimeLineData = lineData
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取实时发电数据失败:', error)
|
|
|
+ this.realtimeLineData = this.getEmptyHourData()
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取历史发电量（最近30天）
|
|
|
+ */
|
|
|
async getHisPgPvSupply() {
|
|
|
- const {data: pgPvHisSupply} = await pgSupplyDayTotalPv({
|
|
|
- areaCode: this.areaType,
|
|
|
- startRecTime: DateTool.lastXDay(30),
|
|
|
- endRecTime: DateTool.now(),
|
|
|
- })
|
|
|
- if (!pgPvHisSupply) {
|
|
|
- return
|
|
|
- }
|
|
|
+ try {
|
|
|
+ const startDate = DateTool.lastXDay(30)
|
|
|
+ const endDate = DateTool.now()
|
|
|
|
|
|
- const dateTips = DateTool.getDayOfRange(DateTool.lastXDay(30), DateTool.now());
|
|
|
- const dateIndexMap = {}
|
|
|
- pgPvHisSupply.forEach(item => {
|
|
|
- dateIndexMap[item.date] = item
|
|
|
- })
|
|
|
- const lineData = []
|
|
|
- dateTips.forEach((item, index) => {
|
|
|
- if (dateIndexMap[item]) {
|
|
|
- lineData.push({
|
|
|
- xData: item,
|
|
|
- yData: dateIndexMap[item].genElecQuantity
|
|
|
- })
|
|
|
- } else {
|
|
|
+ const {data, rows} = await pgSupplyHourList({
|
|
|
+ areaCode: this.areaType,
|
|
|
+ startRecTime: startDate,
|
|
|
+ endRecTime: endDate,
|
|
|
+ timeDimension: 'day', // 按日维度查询
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 31, // 最多31天
|
|
|
+ orderFlag: 'asc'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 兼容两种返回格式
|
|
|
+ const dailyData = rows || data || []
|
|
|
+
|
|
|
+ if (!Array.isArray(dailyData)) {
|
|
|
+ console.warn('历史发电数据格式错误')
|
|
|
+ this.lineData = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成日期范围
|
|
|
+ const dateTips = DateTool.getDayOfRange(startDate, endDate)
|
|
|
+
|
|
|
+ // 构建日期索引映射
|
|
|
+ const dateIndexMap = {}
|
|
|
+ dailyData.forEach(item => {
|
|
|
+ if (item.statisticDate) {
|
|
|
+ // 格式化日期为 YYYY-MM-DD
|
|
|
+ const dateStr = item.statisticDate.split(' ')[0]
|
|
|
+ dateIndexMap[dateStr] = item
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 生成完整的30天数据
|
|
|
+ const lineData = []
|
|
|
+ dateTips.forEach(date => {
|
|
|
+ const dayData = dateIndexMap[date]
|
|
|
lineData.push({
|
|
|
- xData: item,
|
|
|
- yData: 0
|
|
|
+ xData: date,
|
|
|
+ yData: dayData ? (dayData.genElecQuantity || 0) : 0
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
- this.lineData = lineData
|
|
|
+ })
|
|
|
+
|
|
|
+ this.lineData = lineData
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取历史发电数据失败:', error)
|
|
|
+ this.lineData = []
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * 获取空的24小时数据（用于异常情况）
|
|
|
+ */
|
|
|
+ getEmptyHourData() {
|
|
|
+ const timeLabels = DateTool.getTime(60)
|
|
|
+ return timeLabels.map(timeLabel => ({
|
|
|
+ xData: timeLabel,
|
|
|
+ yData: 0
|
|
|
+ }))
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<style lang='scss' scoped>
|
|
|
@import url("../index.scss");
|
|
|
|
|
|
@@ -349,7 +420,6 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #06E3F9;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -385,48 +455,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.elec-index {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10px 0 0;
|
|
|
-
|
|
|
- .panel-content {
|
|
|
- margin-top: 12px;
|
|
|
- flex-basis: 48%;
|
|
|
- height: 75px;
|
|
|
- color: #B3E3E8;
|
|
|
- background: url('~@/assets/images/home/l2_item_bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .whitespace-pre {
|
|
|
- margin-top: 15px;
|
|
|
- margin-left: 10px;
|
|
|
-
|
|
|
- span.value {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- margin-top: 5px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .image-container {
|
|
|
- width: 60px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- img {
|
|
|
- height: 24px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
