{{ item.label }}
@@ -98,7 +172,9 @@
@@ -107,15 +183,21 @@
总用电量
-
{{ monthlySummary.totalEnergy }} kWh
+
+ {{ monthlySummary.totalEnergy }} kWh
+
总供冷量
-
{{ monthlySummary.totalCooling }} RT
+
+ {{ monthlySummary.totalCooling }} RT
+
平均单价
-
¥{{ monthlySummary.avgPrice }} /kWh
+
+ ¥{{ monthlySummary.avgPrice }} /kWh
+
@@ -141,7 +223,7 @@ export default {
viewTypes: ["日视图", "月视图"],
activeView: 1,
// 当前日期
- currentDate: new Date().toISOString().split('T')[0],
+ currentDate: new Date().toISOString().split("T")[0],
currentYear: new Date().getFullYear(),
currentMonth: new Date().getMonth() + 1,
selectedDay: null,
@@ -153,7 +235,7 @@ export default {
{ label: "能效值(EER)", value: "eer", color: "#91CC75", unit: "" },
{ label: "用电量", value: "energy", color: "#5470C6", unit: "kWh" },
{ label: "供冷量", value: "cooling", color: "#15e1fd", unit: "RT" },
- { label: "供能单价", value: "price", color: "#FAC858", unit: "元/kWh" }
+ { label: "供能单价", value: "price", color: "#FAC858", unit: "元/kWh" },
],
selectedIndicator: "eer",
// 日历数据
@@ -163,7 +245,7 @@ export default {
{ label: "优秀(≥6.5)", color: "#91CC75" },
{ label: "良好(6.5-5.5)", color: "#4facfe" },
{ label: "一般(5.5-4.5)", color: "#FAC858" },
- { label: "急需改善(<4.5)", color: "#EE6666" }
+ { label: "急需改善(<4.5)", color: "#EE6666" },
],
// 详情数据配置
detailData: [
@@ -171,19 +253,19 @@ export default {
{ label: "用电量", key: "energy", color: "#5470C6", unit: "kWh" },
{ label: "供冷量", key: "cooling", color: "#15e1fd", unit: "RT" },
{ label: "供能单价", key: "price", color: "#FAC858", unit: "元/kWh" },
- { label: "节电量", key: "saving", color: "#EE6666", unit: "kWh" }
+ { label: "节电量", key: "saving", color: "#EE6666", unit: "kWh" },
],
// 月度汇总
monthlySummary: {
avgEer: 6.5,
totalEnergy: 5620000,
totalCooling: 198500,
- avgPrice: 1.18
+ avgPrice: 1.18,
},
// 模拟日历数据
dailyData: {},
// 图表实例
- trendChart: null
+ trendChart: null,
};
},
mounted() {
@@ -202,12 +284,28 @@ export default {
const daysInMonth = new Date(year, month, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
- const date = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
- const eer = (4 + Math.random() * 4).toFixed(1);
- const energy = Math.floor(150000 + Math.random() * 100000);
- const cooling = Math.floor(energy / 25 + Math.random() * 10);
- const price = (1.1 + Math.random() * 0.2).toFixed(2);
- const saving = Math.floor(energy * 0.25 + Math.random() * 10000);
+ const date = `${year}-${String(month).padStart(2, "0")}-${String(
+ day
+ ).padStart(2, "0")}`;
+
+ // 模拟数据：根据日期生成有规律的变化数据
+ const baseEer = 4 + (day % 10) / 10; // 4.0-5.0 之间变化
+ const eer = (baseEer + Math.random() * 3).toFixed(1);
+
+ // 用电量：工作日高，周末低
+ const dayOfWeek = new Date(year, month - 1, day).getDay();
+ const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+ const baseEnergy = isWeekend ? 100000 : 180000;
+ const energy = Math.floor(baseEnergy + Math.random() * 80000);
+
+ // 供冷量：与用电量相关
+ const cooling = Math.floor(energy / 25 + Math.random() * 5000);
+
+ // 单价
+ const price = (1.05 + Math.random() * 0.25).toFixed(2);
+
+ // 节能费用
+ const saving = Math.floor(energy * 0.15 + Math.random() * 5000);
this.dailyData[date] = {
date,
@@ -216,10 +314,11 @@ export default {
cooling,
price: parseFloat(price),
saving,
- hasData: true
+ hasData: true,
};
}
},
+
// 生成日历
generateCalendar() {
const year = this.currentYear;
@@ -235,17 +334,20 @@ export default {
days.push({
day: prevMonthDays - i,
isOtherMonth: true,
- hasData: false
+ hasData: false,
});
}
// 当月日期
for (let i = 1; i <= daysInMonth; i++) {
- const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
+ const date = `${year}-${String(month + 1).padStart(2, "0")}-${String(
+ i
+ ).padStart(2, "0")}`;
days.push({
day: i,
isOtherMonth: false,
- ...this.dailyData[date]
+ date,
+ ...this.dailyData[date],
});
}
@@ -255,7 +357,7 @@ export default {
days.push({
day: i,
isOtherMonth: true,
- hasData: false
+ hasData: false,
});
}
@@ -316,32 +418,44 @@ export default {
isToday(day) {
if (day.isOtherMonth) return false;
const today = new Date();
- return day.day === today.getDate() &&
- this.currentMonth === today.getMonth() + 1 &&
- this.currentYear === today.getFullYear();
+ return (
+ day.day === today.getDate() &&
+ this.currentMonth === today.getMonth() + 1 &&
+ this.currentYear === today.getFullYear()
+ );
},
- // 获取指标颜色
- getIndicatorColor(day) {
- if (this.selectedIndicator !== 'eer') {
- const indicator = this.indicators.find(i => i.value === this.selectedIndicator);
- return indicator ? indicator.color : '#ffffff';
- }
+ // 格式化数字（添加千分位）
+ formatNumber(num) {
+ if (num === undefined || num === null) return "--";
+ return num.toLocaleString("zh-CN");
+ },
+
+ // 格式化EER
+ formatEer(eer) {
+ if (eer === undefined || eer === null) return "--";
+ return parseFloat(eer).toFixed(1);
+ },
+
+ // ========== 颜色判断方法 ==========
- const eer = day.eer;
- if (eer >= 6.5) return '#91CC75';
- if (eer >= 5.5) return '#4facfe';
- if (eer >= 4.5) return '#FAC858';
- return '#EE6666';
+ // EER颜色：越高越好
+ getEerColor(eer) {
+ if (eer >= 6.5) return "#91CC75"; // 优秀-绿色
+ if (eer >= 5.5) return "#4facfe"; // 良好-蓝色
+ if (eer >= 4.5) return "#FAC858"; // 一般-橙色
+ return "#EE6666"; // 差-红色
},
// 获取指标值
getIndicatorValue(day) {
const key = this.selectedIndicator;
- return day[key] !== undefined ? day[key] : '-';
+ return day[key] !== undefined ? day[key] : "-";
},
// 获取指标单位
getIndicatorUnit() {
- const indicator = this.indicators.find(i => i.value === this.selectedIndicator);
- return indicator ? indicator.unit : '';
+ const indicator = this.indicators.find(
+ (i) => i.value === this.selectedIndicator
+ );
+ return indicator ? indicator.unit : "";
},
// 关闭详情
closeDetail() {
@@ -355,13 +469,20 @@ export default {
},
// 更新趋势图
updateTrendChart() {
- const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();
+ const daysInMonth = new Date(
+ this.currentYear,
+ this.currentMonth,
+ 0
+ ).getDate();
const xData = [];
const eerData = [];
const energyData = [];
for (let day = 1; day <= daysInMonth; day++) {
- const date = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+ const date = `${this.currentYear}-${String(this.currentMonth).padStart(
+ 2,
+ "0"
+ )}-${String(day).padStart(2, "0")}`;
const data = this.dailyData[date];
xData.push(`${day}日`);
eerData.push(data ? data.eer : null);
@@ -372,76 +493,76 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
- type: "cross"
- }
+ type: "cross",
+ },
},
legend: {
data: ["能效值(EER)", "用电量"],
textStyle: {
- color: "#ffffff"
- }
+ color: "#ffffff",
+ },
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
- containLabel: true
+ containLabel: true,
},
xAxis: {
type: "category",
data: xData,
axisLabel: {
- color: "rgba(255, 255, 255, 0.8)"
+ color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
- color: "#365576"
- }
+ color: "#365576",
+ },
},
axisTick: {
- show: false
- }
+ show: false,
+ },
},
yAxis: [
{
type: "value",
name: "EER",
nameTextStyle: {
- color: "rgba(255, 255, 255, 0.8)"
+ color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
- color: "rgba(255, 255, 255, 0.8)"
+ color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
- color: "#365576"
- }
+ color: "#365576",
+ },
},
splitLine: {
lineStyle: {
color: "#1a3d62",
- type: "dashed"
- }
- }
+ type: "dashed",
+ },
+ },
},
{
type: "value",
name: "kWh",
nameTextStyle: {
- color: "rgba(255, 255, 255, 0.8)"
+ color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
- color: "rgba(255, 255, 255, 0.8)"
+ color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
- color: "#365576"
- }
+ color: "#365576",
+ },
},
splitLine: {
- show: false
- }
- }
+ show: false,
+ },
+ },
],
series: [
{
@@ -450,12 +571,12 @@ export default {
smooth: true,
data: eerData,
itemStyle: {
- color: "#91CC75"
+ color: "#91CC75",
},
lineStyle: {
color: "#91CC75",
- width: 2
- }
+ width: 2,
+ },
},
{
name: "用电量",
@@ -472,21 +593,21 @@ export default {
colorStops: [
{
offset: 0,
- color: "#5470C6"
+ color: "#5470C6",
},
{
offset: 1,
- color: "#73C0DE"
- }
- ]
- }
- }
- }
- ]
+ color: "#73C0DE",
+ },
+ ],
+ },
+ },
+ },
+ ],
};
this.trendChart.setOption(option);
- }
- }
+ },
+ },
};
@@ -655,26 +776,44 @@ export default {
&.today {
background: rgba(145, 204, 117, 0.2);
- border: 1px solid #91CC75;
+ border: 1px solid #91cc75;
}
.day-number {
font-size: 0.16rem;
color: #ffffff;
- margin-bottom: 0.05rem;
- }
-
- .day-indicator {
+ font-weight: bold;
+ border-radius: 50%;
+ width: 0.16rem;
+ height: 0.15rem;
+ background: #085d68;
+ padding: 0.2rem;
text-align: center;
-
- .indicator-value {
- font-size: 0.14rem;
- font-weight: bold;
- }
-
- .indicator-unit {
- font-size: 0.1rem;
- opacity: 0.7;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ .day-flex {
+ display: flex;
+ flex-direction: column;
+ margin-top: 0.4rem;
+ .day-indicator {
+ text-align: left;
+
+ .indicator-value {
+ font-size: 0.14rem;
+ font-weight: bold;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ .indicator-unit {
+ font-size: 0.1rem;
+ opacity: 0.7;
+ color: #ffffff;
+ margin-left: 0.1rem;
+ }
+ }
}
}
}
diff --git a/src/views/newLifeWater/energyManage/energyWater/index.vue b/src/views/newLifeWater/energyManage/energyWater/index.vue
index 97a2139..84db0c8 100644
--- a/src/views/newLifeWater/energyManage/energyWater/index.vue
+++ b/src/views/newLifeWater/energyManage/energyWater/index.vue
@@ -53,7 +53,7 @@
class="custom-input-number"
/>