重构
This commit is contained in:
@ -74,8 +74,12 @@
|
||||
<div slot="header">
|
||||
<span class="card-title">总累计运行数据</span>
|
||||
<div class="total-count">
|
||||
<span class="title">总收入</span>
|
||||
<span class="value">
|
||||
<span class="title pointer-field" @click="handleTotalRevenueClick">总收入</span>
|
||||
<span
|
||||
class="value pointer-field"
|
||||
:class="{ 'field-disabled': !hasPointId(totalRevenueDisplayItem) }"
|
||||
@click="handleTotalRevenueClick"
|
||||
>
|
||||
<i v-if="isRunningInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ totalRevenueDisplayValue | formatNumber }}</span>
|
||||
</span>
|
||||
@ -92,7 +96,11 @@
|
||||
:key="index + 'sjglData'"
|
||||
class="sjgl-col"
|
||||
>
|
||||
<div class="sjgl-wrapper">
|
||||
<div
|
||||
class="sjgl-wrapper pointer-field"
|
||||
:class="{ 'field-disabled': !hasPointId(item.raw) }"
|
||||
@click="handleRunningFieldClick(item)"
|
||||
>
|
||||
<div class="sjgl-title">{{ item.title }}</div>
|
||||
<div class="sjgl-value" :style="{color:item.color}">
|
||||
<i v-if="item.loading" class="el-icon-loading"></i>
|
||||
@ -111,12 +119,40 @@
|
||||
<active-chart ref="activeChart" :display-data="runningDisplayData"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="curveDialogVisible"
|
||||
:title="curveDialogTitle"
|
||||
width="1000px"
|
||||
append-to-body
|
||||
class="ems-dialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@opened="handleCurveDialogOpened"
|
||||
@closed="handleCurveDialogClosed"
|
||||
>
|
||||
<div class="curve-tools">
|
||||
<el-date-picker
|
||||
v-model="curveCustomRange"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
style="width: 440px"
|
||||
/>
|
||||
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
|
||||
</div>
|
||||
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import {getSingleSiteBaseInfo} from "@/api/ems/zddt";
|
||||
import {getDzjkHomeView, getProjectDisplayData} from "@/api/ems/dzjk";
|
||||
import {getPointConfigCurve} from "@/api/ems/site";
|
||||
import WeekChart from "./WeekChart.vue";
|
||||
import ActiveChart from "./ActiveChart.vue";
|
||||
import AlarmTable from "./AlarmTable.vue";
|
||||
@ -135,6 +171,19 @@ export default {
|
||||
runningInfoLoading: false,
|
||||
runningUpdateSpinning: false,
|
||||
runningUpdateTimer: null,
|
||||
curveDialogVisible: false,
|
||||
curveDialogTitle: "点位曲线",
|
||||
curveChart: null,
|
||||
curveLoading: false,
|
||||
curveCustomRange: [],
|
||||
curveQuery: {
|
||||
siteId: "",
|
||||
pointId: "",
|
||||
pointType: "data",
|
||||
rangeType: "custom",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
},
|
||||
fallbackSjglData: [
|
||||
{
|
||||
title: "今日充电量（kWh）",
|
||||
@ -218,6 +267,7 @@ export default {
|
||||
value: item.fieldValue,
|
||||
color: this.getCardColor(index),
|
||||
loading: this.isRunningInfoLoading,
|
||||
raw: item,
|
||||
}));
|
||||
}
|
||||
return this.fallbackSjglData.map(item => ({
|
||||
@ -225,6 +275,7 @@ export default {
|
||||
value: this.runningInfo[item.attr],
|
||||
color: item.color,
|
||||
loading: this.isRunningInfoLoading,
|
||||
raw: item,
|
||||
}));
|
||||
},
|
||||
},
|
||||
@ -233,8 +284,172 @@ export default {
|
||||
clearTimeout(this.runningUpdateTimer);
|
||||
this.runningUpdateTimer = null;
|
||||
}
|
||||
if (this.curveChart) {
|
||||
this.curveChart.dispose();
|
||||
this.curveChart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasPointId(item) {
|
||||
return !!String(item?.dataPoint || "").trim();
|
||||
},
|
||||
handleTotalRevenueClick() {
|
||||
const item = this.totalRevenueDisplayItem;
|
||||
const pointId = String(item?.dataPoint || "").trim();
|
||||
if (!pointId) {
|
||||
this.$message.warning("该字段未配置点位，无法查询曲线");
|
||||
return;
|
||||
}
|
||||
this.openCurveDialog({
|
||||
pointId,
|
||||
title: item?.fieldName || "总收入",
|
||||
});
|
||||
},
|
||||
handleRunningFieldClick(card) {
|
||||
const item = card?.raw || {};
|
||||
const pointId = String(item?.dataPoint || "").trim();
|
||||
if (!pointId) {
|
||||
this.$message.warning("该字段未配置点位，无法查询曲线");
|
||||
return;
|
||||
}
|
||||
this.openCurveDialog({
|
||||
pointId,
|
||||
title: card?.title || item?.fieldName || item?.fieldCode || pointId,
|
||||
});
|
||||
},
|
||||
openCurveDialog({pointId, title}) {
|
||||
const range = this.getDefaultCurveRange();
|
||||
this.curveCustomRange = range;
|
||||
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
|
||||
this.curveQuery = {
|
||||
siteId: this.siteId,
|
||||
pointId,
|
||||
pointType: "data",
|
||||
rangeType: "custom",
|
||||
startTime: range[0],
|
||||
endTime: range[1],
|
||||
};
|
||||
this.curveDialogVisible = true;
|
||||
},
|
||||
handleCurveDialogOpened() {
|
||||
if (!this.curveChart && this.$refs.curveChartRef) {
|
||||
this.curveChart = echarts.init(this.$refs.curveChartRef);
|
||||
}
|
||||
this.loadCurveData();
|
||||
},
|
||||
handleCurveDialogClosed() {
|
||||
if (this.curveChart) {
|
||||
this.curveChart.dispose();
|
||||
this.curveChart = null;
|
||||
}
|
||||
this.curveLoading = false;
|
||||
},
|
||||
getDefaultCurveRange() {
|
||||
const end = new Date();
|
||||
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
|
||||
return [this.formatDateTime(start), this.formatDateTime(end)];
|
||||
},
|
||||
formatDateTime(date) {
|
||||
const d = new Date(date);
|
||||
const pad = (num) => String(num).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
||||
},
|
||||
formatCurveTime(value) {
|
||||
if (value === undefined || value === null || value === "") {
|
||||
return "";
|
||||
}
|
||||
const raw = String(value).trim();
|
||||
const normalized = raw
|
||||
.replace("T", " ")
|
||||
.replace(/\.\d+/, "")
|
||||
.replace(/Z$/, "")
|
||||
.replace(/([+-]\d{2}:?\d{2})$/, "")
|
||||
.trim();
|
||||
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
|
||||
if (matched) {
|
||||
return `${matched[1]} ${matched[2]}`;
|
||||
}
|
||||
return normalized.slice(0, 16);
|
||||
},
|
||||
loadCurveData() {
|
||||
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
|
||||
this.$message.warning("点位信息不完整，无法查询曲线");
|
||||
return;
|
||||
}
|
||||
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
|
||||
this.$message.warning("请选择查询时间范围");
|
||||
return;
|
||||
}
|
||||
this.curveQuery.startTime = this.curveCustomRange[0];
|
||||
this.curveQuery.endTime = this.curveCustomRange[1];
|
||||
const query = {
|
||||
siteId: this.curveQuery.siteId,
|
||||
pointId: this.curveQuery.pointId,
|
||||
pointType: "data",
|
||||
rangeType: "custom",
|
||||
startTime: this.curveQuery.startTime,
|
||||
endTime: this.curveQuery.endTime,
|
||||
};
|
||||
this.curveLoading = true;
|
||||
getPointConfigCurve(query).then((response) => {
|
||||
const rows = response?.data || [];
|
||||
this.renderCurveChart(rows);
|
||||
}).catch(() => {
|
||||
this.renderCurveChart([]);
|
||||
}).finally(() => {
|
||||
this.curveLoading = false;
|
||||
});
|
||||
},
|
||||
renderCurveChart(rows = []) {
|
||||
if (!this.curveChart) return;
|
||||
const xData = rows.map(item => this.formatCurveTime(item.dataTime));
|
||||
const yData = rows.map(item => item.pointValue);
|
||||
this.curveChart.clear();
|
||||
this.curveChart.setOption({
|
||||
legend: {},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: this.curveDialogTitle,
|
||||
type: "line",
|
||||
data: yData,
|
||||
connectNulls: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
if (!rows.length) {
|
||||
this.$message.warning("当前时间范围暂无曲线数据");
|
||||
}
|
||||
},
|
||||
setBaseInfoLoading(loading) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.$data, "baseInfoLoading")) {
|
||||
this.baseInfoLoading = loading;
|
||||
@ -407,6 +622,22 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.pointer-field {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.curve-tools {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.row-container {
|
||||
& > .el-col {
|
||||
margin-bottom: 20px;
|
||||
|
||||
Reference in New Issue
Block a user