|
|
|
@ -22,26 +22,43 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="indicator-selector"> |
|
|
|
<!-- <div class="indicator-selector"> |
|
|
|
<el-select v-model="selectedIndicator" @change="handleIndicatorChange" class="custom-select"> |
|
|
|
<el-select |
|
|
|
|
|
|
|
v-model="selectedIndicator" |
|
|
|
|
|
|
|
@change="handleIndicatorChange" |
|
|
|
|
|
|
|
class="custom-select" |
|
|
|
|
|
|
|
> |
|
|
|
<el-option |
|
|
|
<el-option |
|
|
|
v-for="indicator in indicators" |
|
|
|
v-for="indicator in indicators" |
|
|
|
:key="indicator.value" |
|
|
|
:key="indicator.value" |
|
|
|
:label="indicator.label" |
|
|
|
:label="indicator.label" |
|
|
|
:value="indicator.value" |
|
|
|
:value="indicator.value" |
|
|
|
> |
|
|
|
> |
|
|
|
<span class="option-dot" :style="{ background: indicator.color }"></span> |
|
|
|
<span |
|
|
|
|
|
|
|
class="option-dot" |
|
|
|
|
|
|
|
:style="{ background: indicator.color }" |
|
|
|
|
|
|
|
></span> |
|
|
|
<span class="option-label">{{ indicator.label }}</span> |
|
|
|
<span class="option-label">{{ indicator.label }}</span> |
|
|
|
</el-option> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 月份导航 --> |
|
|
|
<!-- 月份导航 --> |
|
|
|
<div class="month-navigation"> |
|
|
|
<div class="month-navigation"> |
|
|
|
<el-button class="nav-btn" icon="el-icon-arrow-left" @click="prevMonth" size="small"></el-button> |
|
|
|
<el-button |
|
|
|
|
|
|
|
class="nav-btn" |
|
|
|
|
|
|
|
icon="el-icon-arrow-left" |
|
|
|
|
|
|
|
@click="prevMonth" |
|
|
|
|
|
|
|
size="small" |
|
|
|
|
|
|
|
></el-button> |
|
|
|
<div class="current-month">{{ currentYear }}年{{ currentMonth }}月</div> |
|
|
|
<div class="current-month">{{ currentYear }}年{{ currentMonth }}月</div> |
|
|
|
<el-button class="nav-btn" icon="el-icon-arrow-right" @click="nextMonth" size="small"></el-button> |
|
|
|
<el-button |
|
|
|
|
|
|
|
class="nav-btn" |
|
|
|
|
|
|
|
icon="el-icon-arrow-right" |
|
|
|
|
|
|
|
@click="nextMonth" |
|
|
|
|
|
|
|
size="small" |
|
|
|
|
|
|
|
></el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 日历视图 --> |
|
|
|
<!-- 日历视图 --> |
|
|
|
@ -49,19 +66,66 @@ |
|
|
|
<div class="calendar-header"> |
|
|
|
<div class="calendar-header"> |
|
|
|
<div class="weekday" v-for="day in weekDays" :key="day">{{ day }}</div> |
|
|
|
<div class="weekday" v-for="day in weekDays" :key="day">{{ day }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="calendar-body"> |
|
|
|
<div class="calendar-container"> |
|
|
|
<div |
|
|
|
<div class="calendar-header"> |
|
|
|
v-for="(day, index) in calendarDays" |
|
|
|
<div class="weekday" v-for="day in weekDays" :key="day"> |
|
|
|
:key="index" |
|
|
|
{{ day }} |
|
|
|
:class="['calendar-day', { 'other-month': day.isOtherMonth, 'selected': isSelected(day), 'today': isToday(day) }]" |
|
|
|
</div> |
|
|
|
@click="handleDayClick(day)" |
|
|
|
</div> |
|
|
|
> |
|
|
|
<div class="calendar-body"> |
|
|
|
<div class="day-number">{{ day.day }}</div> |
|
|
|
<div |
|
|
|
<div class="day-indicator" v-if="day.hasData"> |
|
|
|
v-for="(day, index) in calendarDays" |
|
|
|
<div class="indicator-value" :style="{ color: getIndicatorColor(day) }"> |
|
|
|
:key="index" |
|
|
|
{{ getIndicatorValue(day) }} |
|
|
|
:class="[ |
|
|
|
|
|
|
|
'calendar-day', |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
'other-month': day.isOtherMonth, |
|
|
|
|
|
|
|
selected: isSelected(day), |
|
|
|
|
|
|
|
today: isToday(day), |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
]" |
|
|
|
|
|
|
|
@click="handleDayClick(day)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div class="day-number">{{ day.day }}</div> |
|
|
|
|
|
|
|
<div class="day-flex" v-if="day.hasData"> |
|
|
|
|
|
|
|
<!-- EER --> |
|
|
|
|
|
|
|
<div class="day-indicator"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="indicator-value" |
|
|
|
|
|
|
|
:style="{ color: getEerColor(day.eer) }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
EER:{{ formatEer(day.eer) }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 用电量 --> |
|
|
|
|
|
|
|
<div class="day-indicator"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="indicator-value" :style="{ color: getEerColor(day.eer) }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
用电量:{{ formatNumber(day.energy) }} |
|
|
|
|
|
|
|
<span class="indicator-unit">kWh</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 供冷量 --> |
|
|
|
|
|
|
|
<div class="day-indicator"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="indicator-value" :style="{ color: getEerColor(day.eer) }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
供冷量:{{ formatNumber(day.cooling) }} |
|
|
|
|
|
|
|
<span class="indicator-unit">kWr</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 供能单价 --> |
|
|
|
|
|
|
|
<div class="day-indicator"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="indicator-value" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
供能单价:{{ day.price }} |
|
|
|
|
|
|
|
<span class="indicator-unit">元</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="indicator-unit">{{ getIndicatorUnit() }}</div> |
|
|
|
<div v-else class="no-data" style="margin-top: 0.1rem;">暂无数据</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -79,10 +143,20 @@ |
|
|
|
<div class="detail-panel" v-if="selectedDateData"> |
|
|
|
<div class="detail-panel" v-if="selectedDateData"> |
|
|
|
<div class="detail-header"> |
|
|
|
<div class="detail-header"> |
|
|
|
<div class="detail-title">日期详情 - {{ selectedDateData.date }}</div> |
|
|
|
<div class="detail-title">日期详情 - {{ selectedDateData.date }}</div> |
|
|
|
<el-button class="close-btn" icon="el-icon-close" @click="closeDetail" size="small" circle></el-button> |
|
|
|
<el-button |
|
|
|
|
|
|
|
class="close-btn" |
|
|
|
|
|
|
|
icon="el-icon-close" |
|
|
|
|
|
|
|
@click="closeDetail" |
|
|
|
|
|
|
|
size="small" |
|
|
|
|
|
|
|
circle |
|
|
|
|
|
|
|
></el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="detail-content"> |
|
|
|
<div class="detail-content"> |
|
|
|
<div class="detail-row" v-for="(item, index) in detailData" :key="index"> |
|
|
|
<div |
|
|
|
|
|
|
|
class="detail-row" |
|
|
|
|
|
|
|
v-for="(item, index) in detailData" |
|
|
|
|
|
|
|
:key="index" |
|
|
|
|
|
|
|
> |
|
|
|
<div class="detail-label"> |
|
|
|
<div class="detail-label"> |
|
|
|
<span class="label-dot" :style="{ background: item.color }"></span> |
|
|
|
<span class="label-dot" :style="{ background: item.color }"></span> |
|
|
|
{{ item.label }} |
|
|
|
{{ item.label }} |
|
|
|
@ -98,7 +172,9 @@ |
|
|
|
<div class="monthly-summary"> |
|
|
|
<div class="monthly-summary"> |
|
|
|
<div class="summary-header"> |
|
|
|
<div class="summary-header"> |
|
|
|
<div class="summary-title">月度汇总</div> |
|
|
|
<div class="summary-title">月度汇总</div> |
|
|
|
<div class="summary-period">{{ currentYear }}年{{ currentMonth }}月</div> |
|
|
|
<div class="summary-period"> |
|
|
|
|
|
|
|
{{ currentYear }}年{{ currentMonth }}月 |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="summary-cards"> |
|
|
|
<div class="summary-cards"> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-card"> |
|
|
|
@ -107,15 +183,21 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-label">总用电量</div> |
|
|
|
<div class="summary-label">总用电量</div> |
|
|
|
<div class="summary-value">{{ monthlySummary.totalEnergy }} <span class="unit">kWh</span></div> |
|
|
|
<div class="summary-value"> |
|
|
|
|
|
|
|
{{ monthlySummary.totalEnergy }} <span class="unit">kWh</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-label">总供冷量</div> |
|
|
|
<div class="summary-label">总供冷量</div> |
|
|
|
<div class="summary-value">{{ monthlySummary.totalCooling }} <span class="unit">RT</span></div> |
|
|
|
<div class="summary-value"> |
|
|
|
|
|
|
|
{{ monthlySummary.totalCooling }} <span class="unit">RT</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-card"> |
|
|
|
<div class="summary-label">平均单价</div> |
|
|
|
<div class="summary-label">平均单价</div> |
|
|
|
<div class="summary-value">¥{{ monthlySummary.avgPrice }} <span class="unit">/kWh</span></div> |
|
|
|
<div class="summary-value"> |
|
|
|
|
|
|
|
¥{{ monthlySummary.avgPrice }} <span class="unit">/kWh</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -141,7 +223,7 @@ export default { |
|
|
|
viewTypes: ["日视图", "月视图"], |
|
|
|
viewTypes: ["日视图", "月视图"], |
|
|
|
activeView: 1, |
|
|
|
activeView: 1, |
|
|
|
// 当前日期 |
|
|
|
// 当前日期 |
|
|
|
currentDate: new Date().toISOString().split('T')[0], |
|
|
|
currentDate: new Date().toISOString().split("T")[0], |
|
|
|
currentYear: new Date().getFullYear(), |
|
|
|
currentYear: new Date().getFullYear(), |
|
|
|
currentMonth: new Date().getMonth() + 1, |
|
|
|
currentMonth: new Date().getMonth() + 1, |
|
|
|
selectedDay: null, |
|
|
|
selectedDay: null, |
|
|
|
@ -153,7 +235,7 @@ export default { |
|
|
|
{ label: "能效值(EER)", value: "eer", color: "#91CC75", unit: "" }, |
|
|
|
{ label: "能效值(EER)", value: "eer", color: "#91CC75", unit: "" }, |
|
|
|
{ label: "用电量", value: "energy", color: "#5470C6", unit: "kWh" }, |
|
|
|
{ label: "用电量", value: "energy", color: "#5470C6", unit: "kWh" }, |
|
|
|
{ label: "供冷量", value: "cooling", color: "#15e1fd", unit: "RT" }, |
|
|
|
{ label: "供冷量", value: "cooling", color: "#15e1fd", unit: "RT" }, |
|
|
|
{ label: "供能单价", value: "price", color: "#FAC858", unit: "元/kWh" } |
|
|
|
{ label: "供能单价", value: "price", color: "#FAC858", unit: "元/kWh" }, |
|
|
|
], |
|
|
|
], |
|
|
|
selectedIndicator: "eer", |
|
|
|
selectedIndicator: "eer", |
|
|
|
// 日历数据 |
|
|
|
// 日历数据 |
|
|
|
@ -163,7 +245,7 @@ export default { |
|
|
|
{ label: "优秀(≥6.5)", color: "#91CC75" }, |
|
|
|
{ label: "优秀(≥6.5)", color: "#91CC75" }, |
|
|
|
{ label: "良好(6.5-5.5)", color: "#4facfe" }, |
|
|
|
{ label: "良好(6.5-5.5)", color: "#4facfe" }, |
|
|
|
{ label: "一般(5.5-4.5)", color: "#FAC858" }, |
|
|
|
{ label: "一般(5.5-4.5)", color: "#FAC858" }, |
|
|
|
{ label: "急需改善(<4.5)", color: "#EE6666" } |
|
|
|
{ label: "急需改善(<4.5)", color: "#EE6666" }, |
|
|
|
], |
|
|
|
], |
|
|
|
// 详情数据配置 |
|
|
|
// 详情数据配置 |
|
|
|
detailData: [ |
|
|
|
detailData: [ |
|
|
|
@ -171,19 +253,19 @@ export default { |
|
|
|
{ label: "用电量", key: "energy", color: "#5470C6", unit: "kWh" }, |
|
|
|
{ label: "用电量", key: "energy", color: "#5470C6", unit: "kWh" }, |
|
|
|
{ label: "供冷量", key: "cooling", color: "#15e1fd", unit: "RT" }, |
|
|
|
{ label: "供冷量", key: "cooling", color: "#15e1fd", unit: "RT" }, |
|
|
|
{ label: "供能单价", key: "price", color: "#FAC858", unit: "元/kWh" }, |
|
|
|
{ label: "供能单价", key: "price", color: "#FAC858", unit: "元/kWh" }, |
|
|
|
{ label: "节电量", key: "saving", color: "#EE6666", unit: "kWh" } |
|
|
|
{ label: "节电量", key: "saving", color: "#EE6666", unit: "kWh" }, |
|
|
|
], |
|
|
|
], |
|
|
|
// 月度汇总 |
|
|
|
// 月度汇总 |
|
|
|
monthlySummary: { |
|
|
|
monthlySummary: { |
|
|
|
avgEer: 6.5, |
|
|
|
avgEer: 6.5, |
|
|
|
totalEnergy: 5620000, |
|
|
|
totalEnergy: 5620000, |
|
|
|
totalCooling: 198500, |
|
|
|
totalCooling: 198500, |
|
|
|
avgPrice: 1.18 |
|
|
|
avgPrice: 1.18, |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 模拟日历数据 |
|
|
|
// 模拟日历数据 |
|
|
|
dailyData: {}, |
|
|
|
dailyData: {}, |
|
|
|
// 图表实例 |
|
|
|
// 图表实例 |
|
|
|
trendChart: null |
|
|
|
trendChart: null, |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
@ -202,12 +284,28 @@ export default { |
|
|
|
const daysInMonth = new Date(year, month, 0).getDate(); |
|
|
|
const daysInMonth = new Date(year, month, 0).getDate(); |
|
|
|
|
|
|
|
|
|
|
|
for (let day = 1; day <= daysInMonth; day++) { |
|
|
|
for (let day = 1; day <= daysInMonth; day++) { |
|
|
|
const date = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`; |
|
|
|
const date = `${year}-${String(month).padStart(2, "0")}-${String( |
|
|
|
const eer = (4 + Math.random() * 4).toFixed(1); |
|
|
|
day |
|
|
|
const energy = Math.floor(150000 + Math.random() * 100000); |
|
|
|
).padStart(2, "0")}`; |
|
|
|
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 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] = { |
|
|
|
this.dailyData[date] = { |
|
|
|
date, |
|
|
|
date, |
|
|
|
@ -216,10 +314,11 @@ export default { |
|
|
|
cooling, |
|
|
|
cooling, |
|
|
|
price: parseFloat(price), |
|
|
|
price: parseFloat(price), |
|
|
|
saving, |
|
|
|
saving, |
|
|
|
hasData: true |
|
|
|
hasData: true, |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 生成日历 |
|
|
|
// 生成日历 |
|
|
|
generateCalendar() { |
|
|
|
generateCalendar() { |
|
|
|
const year = this.currentYear; |
|
|
|
const year = this.currentYear; |
|
|
|
@ -235,17 +334,20 @@ export default { |
|
|
|
days.push({ |
|
|
|
days.push({ |
|
|
|
day: prevMonthDays - i, |
|
|
|
day: prevMonthDays - i, |
|
|
|
isOtherMonth: true, |
|
|
|
isOtherMonth: true, |
|
|
|
hasData: false |
|
|
|
hasData: false, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 当月日期 |
|
|
|
// 当月日期 |
|
|
|
for (let i = 1; i <= daysInMonth; i++) { |
|
|
|
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({ |
|
|
|
days.push({ |
|
|
|
day: i, |
|
|
|
day: i, |
|
|
|
isOtherMonth: false, |
|
|
|
isOtherMonth: false, |
|
|
|
...this.dailyData[date] |
|
|
|
date, |
|
|
|
|
|
|
|
...this.dailyData[date], |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -255,7 +357,7 @@ export default { |
|
|
|
days.push({ |
|
|
|
days.push({ |
|
|
|
day: i, |
|
|
|
day: i, |
|
|
|
isOtherMonth: true, |
|
|
|
isOtherMonth: true, |
|
|
|
hasData: false |
|
|
|
hasData: false, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -316,32 +418,44 @@ export default { |
|
|
|
isToday(day) { |
|
|
|
isToday(day) { |
|
|
|
if (day.isOtherMonth) return false; |
|
|
|
if (day.isOtherMonth) return false; |
|
|
|
const today = new Date(); |
|
|
|
const today = new Date(); |
|
|
|
return day.day === today.getDate() && |
|
|
|
return ( |
|
|
|
this.currentMonth === today.getMonth() + 1 && |
|
|
|
day.day === today.getDate() && |
|
|
|
this.currentYear === today.getFullYear(); |
|
|
|
this.currentMonth === today.getMonth() + 1 && |
|
|
|
|
|
|
|
this.currentYear === today.getFullYear() |
|
|
|
|
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取指标颜色 |
|
|
|
// 格式化数字（添加千分位） |
|
|
|
getIndicatorColor(day) { |
|
|
|
formatNumber(num) { |
|
|
|
if (this.selectedIndicator !== 'eer') { |
|
|
|
if (num === undefined || num === null) return "--"; |
|
|
|
const indicator = this.indicators.find(i => i.value === this.selectedIndicator); |
|
|
|
return num.toLocaleString("zh-CN"); |
|
|
|
return indicator ? indicator.color : '#ffffff'; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 格式化EER |
|
|
|
|
|
|
|
formatEer(eer) { |
|
|
|
|
|
|
|
if (eer === undefined || eer === null) return "--"; |
|
|
|
|
|
|
|
return parseFloat(eer).toFixed(1); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ========== 颜色判断方法 ========== |
|
|
|
|
|
|
|
|
|
|
|
const eer = day.eer; |
|
|
|
// EER颜色：越高越好 |
|
|
|
if (eer >= 6.5) return '#91CC75'; |
|
|
|
getEerColor(eer) { |
|
|
|
if (eer >= 5.5) return '#4facfe'; |
|
|
|
if (eer >= 6.5) return "#91CC75"; // 优秀-绿色 |
|
|
|
if (eer >= 4.5) return '#FAC858'; |
|
|
|
if (eer >= 5.5) return "#4facfe"; // 良好-蓝色 |
|
|
|
return '#EE6666'; |
|
|
|
if (eer >= 4.5) return "#FAC858"; // 一般-橙色 |
|
|
|
|
|
|
|
return "#EE6666"; // 差-红色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取指标值 |
|
|
|
// 获取指标值 |
|
|
|
getIndicatorValue(day) { |
|
|
|
getIndicatorValue(day) { |
|
|
|
const key = this.selectedIndicator; |
|
|
|
const key = this.selectedIndicator; |
|
|
|
return day[key] !== undefined ? day[key] : '-'; |
|
|
|
return day[key] !== undefined ? day[key] : "-"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取指标单位 |
|
|
|
// 获取指标单位 |
|
|
|
getIndicatorUnit() { |
|
|
|
getIndicatorUnit() { |
|
|
|
const indicator = this.indicators.find(i => i.value === this.selectedIndicator); |
|
|
|
const indicator = this.indicators.find( |
|
|
|
return indicator ? indicator.unit : ''; |
|
|
|
(i) => i.value === this.selectedIndicator |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
return indicator ? indicator.unit : ""; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 关闭详情 |
|
|
|
// 关闭详情 |
|
|
|
closeDetail() { |
|
|
|
closeDetail() { |
|
|
|
@ -355,13 +469,20 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 更新趋势图 |
|
|
|
// 更新趋势图 |
|
|
|
updateTrendChart() { |
|
|
|
updateTrendChart() { |
|
|
|
const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate(); |
|
|
|
const daysInMonth = new Date( |
|
|
|
|
|
|
|
this.currentYear, |
|
|
|
|
|
|
|
this.currentMonth, |
|
|
|
|
|
|
|
0 |
|
|
|
|
|
|
|
).getDate(); |
|
|
|
const xData = []; |
|
|
|
const xData = []; |
|
|
|
const eerData = []; |
|
|
|
const eerData = []; |
|
|
|
const energyData = []; |
|
|
|
const energyData = []; |
|
|
|
|
|
|
|
|
|
|
|
for (let day = 1; day <= daysInMonth; day++) { |
|
|
|
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]; |
|
|
|
const data = this.dailyData[date]; |
|
|
|
xData.push(`${day}日`); |
|
|
|
xData.push(`${day}日`); |
|
|
|
eerData.push(data ? data.eer : null); |
|
|
|
eerData.push(data ? data.eer : null); |
|
|
|
@ -372,76 +493,76 @@ export default { |
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
axisPointer: { |
|
|
|
type: "cross" |
|
|
|
type: "cross", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
data: ["能效值(EER)", "用电量"], |
|
|
|
data: ["能效值(EER)", "用电量"], |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: "#ffffff" |
|
|
|
color: "#ffffff", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
grid: { |
|
|
|
left: "3%", |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
right: "4%", |
|
|
|
bottom: "3%", |
|
|
|
bottom: "3%", |
|
|
|
containLabel: true |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
type: "category", |
|
|
|
data: xData, |
|
|
|
data: xData, |
|
|
|
axisLabel: { |
|
|
|
axisLabel: { |
|
|
|
color: "rgba(255, 255, 255, 0.8)" |
|
|
|
color: "rgba(255, 255, 255, 0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#365576" |
|
|
|
color: "#365576", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
type: "value", |
|
|
|
type: "value", |
|
|
|
name: "EER", |
|
|
|
name: "EER", |
|
|
|
nameTextStyle: { |
|
|
|
nameTextStyle: { |
|
|
|
color: "rgba(255, 255, 255, 0.8)" |
|
|
|
color: "rgba(255, 255, 255, 0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
axisLabel: { |
|
|
|
color: "rgba(255, 255, 255, 0.8)" |
|
|
|
color: "rgba(255, 255, 255, 0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#365576" |
|
|
|
color: "#365576", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#1a3d62", |
|
|
|
color: "#1a3d62", |
|
|
|
type: "dashed" |
|
|
|
type: "dashed", |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
type: "value", |
|
|
|
type: "value", |
|
|
|
name: "kWh", |
|
|
|
name: "kWh", |
|
|
|
nameTextStyle: { |
|
|
|
nameTextStyle: { |
|
|
|
color: "rgba(255, 255, 255, 0.8)" |
|
|
|
color: "rgba(255, 255, 255, 0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
axisLabel: { |
|
|
|
color: "rgba(255, 255, 255, 0.8)" |
|
|
|
color: "rgba(255, 255, 255, 0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#365576" |
|
|
|
color: "#365576", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
series: [ |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
@ -450,12 +571,12 @@ export default { |
|
|
|
smooth: true, |
|
|
|
smooth: true, |
|
|
|
data: eerData, |
|
|
|
data: eerData, |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
color: "#91CC75" |
|
|
|
color: "#91CC75", |
|
|
|
}, |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#91CC75", |
|
|
|
color: "#91CC75", |
|
|
|
width: 2 |
|
|
|
width: 2, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: "用电量", |
|
|
|
name: "用电量", |
|
|
|
@ -472,21 +593,21 @@ export default { |
|
|
|
colorStops: [ |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
offset: 0, |
|
|
|
color: "#5470C6" |
|
|
|
color: "#5470C6", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
offset: 1, |
|
|
|
color: "#73C0DE" |
|
|
|
color: "#73C0DE", |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
], |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
], |
|
|
|
}; |
|
|
|
}; |
|
|
|
this.trendChart.setOption(option); |
|
|
|
this.trendChart.setOption(option); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
@ -655,26 +776,44 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
&.today { |
|
|
|
&.today { |
|
|
|
background: rgba(145, 204, 117, 0.2); |
|
|
|
background: rgba(145, 204, 117, 0.2); |
|
|
|
border: 1px solid #91CC75; |
|
|
|
border: 1px solid #91cc75; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.day-number { |
|
|
|
.day-number { |
|
|
|
font-size: 0.16rem; |
|
|
|
font-size: 0.16rem; |
|
|
|
color: #ffffff; |
|
|
|
color: #ffffff; |
|
|
|
margin-bottom: 0.05rem; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
width: 0.16rem; |
|
|
|
.day-indicator { |
|
|
|
height: 0.15rem; |
|
|
|
|
|
|
|
background: #085d68; |
|
|
|
|
|
|
|
padding: 0.2rem; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
.indicator-value { |
|
|
|
flex-direction: column; |
|
|
|
font-size: 0.14rem; |
|
|
|
align-items: center; |
|
|
|
font-weight: bold; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.day-flex { |
|
|
|
.indicator-unit { |
|
|
|
display: flex; |
|
|
|
font-size: 0.1rem; |
|
|
|
flex-direction: column; |
|
|
|
opacity: 0.7; |
|
|
|
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; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
