重构
This commit is contained in:
@ -15,10 +15,10 @@
|
||||
{{ item.clusterDeviceId }}
|
||||
</div>
|
||||
<div>#{{ item.deviceId }}</div>
|
||||
<div class="dy pointer" @click="chartDetail(item, '电压 (V)')">
|
||||
<div class="dy pointer" @click="chartDetail(item, 'voltage')">
|
||||
{{ item.voltage }}V
|
||||
</div>
|
||||
<div class="wd pointer" @click="chartDetail(item, '温度 (℃)')">
|
||||
<div class="wd pointer" @click="chartDetail(item, 'temperature')">
|
||||
{{ item.temperature }}℃
|
||||
</div>
|
||||
</div>
|
||||
@ -102,9 +102,8 @@ export default {
|
||||
return className;
|
||||
},
|
||||
//查看表格行图表
|
||||
chartDetail(row, dataType = "") {
|
||||
const { clusterDeviceId, deviceId } = row;
|
||||
this.$emit("chart", { ...row, dataType });
|
||||
chartDetail(row, fieldKey = "") {
|
||||
this.$emit("chart", { ...row, fieldKey });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<el-table-column prop="voltage" label="电压 (V)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, '电压 (V)')"
|
||||
@click="chartDetail(scope.row, 'voltage')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -22,7 +22,7 @@
|
||||
<el-table-column prop="temperature" label="温度 (℃)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, '温度 (℃)')"
|
||||
@click="chartDetail(scope.row, 'temperature')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -33,7 +33,7 @@
|
||||
<el-table-column prop="soc" label="SOC (%)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'SOC (%)')"
|
||||
@click="chartDetail(scope.row, 'soc')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -44,7 +44,7 @@
|
||||
<el-table-column prop="soh" label="SOH (%)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'SOH (%)')"
|
||||
@click="chartDetail(scope.row, 'soh')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -52,16 +52,6 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="$emit('pointDetail',scope.row,'point')" type="text" size="small">
|
||||
详细
|
||||
</el-button>
|
||||
<el-button @click="$emit('pointDetail',scope.row,'alarmPoint')" type="text" size="small">
|
||||
报警点位详细
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-pagination
|
||||
v-show="tableData.length > 0"
|
||||
@ -117,8 +107,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
//查看表格行图表
|
||||
chartDetail(row, dataType = "") {
|
||||
this.$emit("chart", {...row, dataType});
|
||||
chartDetail(row, fieldKey = "") {
|
||||
this.$emit("chart", {...row, fieldKey});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -88,7 +88,6 @@
|
||||
:totalSize="totalSize"
|
||||
:pointIdList="pointIdList"
|
||||
@chart="chartDetail"
|
||||
@pointDetail="pointDetail"
|
||||
></component>
|
||||
<el-pagination
|
||||
v-show="tableData.length > 0"
|
||||
@ -104,34 +103,55 @@
|
||||
>
|
||||
</el-pagination>
|
||||
<chart-detail ref="chartDetail" />
|
||||
<point-chart ref="pointChart" :site-id="siteId" />
|
||||
<point-table ref="pointTable"/>
|
||||
<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>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import BarChart from "./BarChart";
|
||||
import {
|
||||
getStackNameList,
|
||||
getClusterNameList,
|
||||
getClusterDataInfoList,
|
||||
getClusterNameList,
|
||||
getStackNameList,
|
||||
} from "@/api/ems/dzjk";
|
||||
import { getPointConfigCurve } from "@/api/ems/site";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import ChartDetail from "./ChartDetail.vue";
|
||||
import Table from "./Table.vue";
|
||||
import List from "./List.vue";
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
export default {
|
||||
name: "DzjkSbjkDtdc",
|
||||
mixins: [getQuerySiteId],
|
||||
components: {
|
||||
PointTable,
|
||||
BarChart,
|
||||
ChartDetail,
|
||||
DtdcTable: Table,
|
||||
DtdcList: List,
|
||||
pointChart,
|
||||
},
|
||||
computed: {
|
||||
pointIdList() {
|
||||
@ -166,27 +186,190 @@ export default {
|
||||
pageNum: 1, //分页栏当前页数
|
||||
totalSize: 0, //table表格数据总数
|
||||
activeBtn: "table",
|
||||
curveDialogVisible: false,
|
||||
curveDialogTitle: "点位曲线",
|
||||
curveChart: null,
|
||||
curveLoading: false,
|
||||
curveCustomRange: [],
|
||||
curveQuery: {
|
||||
siteId: "",
|
||||
pointId: "",
|
||||
pointType: "data",
|
||||
rangeType: "custom",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.curveChart) {
|
||||
this.curveChart.dispose();
|
||||
this.curveChart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
const {deviceId,clusterDeviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'BATTERY',parentId:clusterDeviceId},dataType)
|
||||
getFieldPointConfig(fieldKey) {
|
||||
const pointMap = {
|
||||
voltage: { pointIdKey: "voltagePointId", title: "电压 (V)" },
|
||||
temperature: { pointIdKey: "temperaturePointId", title: "温度 (℃)" },
|
||||
soc: { pointIdKey: "socPointId", title: "SOC (%)" },
|
||||
soh: { pointIdKey: "sohPointId", title: "SOH (%)" },
|
||||
};
|
||||
return pointMap[String(fieldKey || "").trim()] || null;
|
||||
},
|
||||
openCurveDialogByPointId(pointId, title) {
|
||||
const normalizedPointId = String(pointId || "").trim();
|
||||
if (!normalizedPointId) {
|
||||
this.$message.warning("该字段未配置点位，无法查询曲线");
|
||||
return;
|
||||
}
|
||||
const range = this.getDefaultCurveRange();
|
||||
this.curveCustomRange = range;
|
||||
this.curveDialogTitle = `点位曲线 - ${title || normalizedPointId}`;
|
||||
this.curveQuery = {
|
||||
siteId: this.siteId,
|
||||
pointId: normalizedPointId,
|
||||
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 p = (n) => String(n).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
|
||||
d.getHours()
|
||||
)}:${p(d.getMinutes())}:${p(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("当前时间范围暂无曲线数据");
|
||||
}
|
||||
},
|
||||
changeMenu(menu) {
|
||||
const { activeBtn } = this;
|
||||
activeBtn !== menu && (this.activeBtn = menu);
|
||||
},
|
||||
//查看表格行图表
|
||||
chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
|
||||
dataType &&
|
||||
this.$refs.pointChart.showChart({
|
||||
pointName: dataType,
|
||||
deviceCategory:'BATTERY',
|
||||
deviceId: clusterDeviceId,
|
||||
child: [deviceId],
|
||||
});
|
||||
chartDetail(row = {}) {
|
||||
const config = this.getFieldPointConfig(row.fieldKey);
|
||||
if (!config) return;
|
||||
const pointId = row[config.pointIdKey];
|
||||
this.openCurveDialogByPointId(pointId, config.title);
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
@ -224,6 +407,9 @@ export default {
|
||||
);
|
||||
this.search.clusterId = "";
|
||||
this.getClusterList();
|
||||
} else {
|
||||
this.search.clusterId = "";
|
||||
this.clusterOptions = [];
|
||||
}
|
||||
},
|
||||
//表格数据
|
||||
@ -254,19 +440,26 @@ export default {
|
||||
},
|
||||
getStackList() {
|
||||
getStackNameList(this.siteId).then((response) => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || []));
|
||||
const list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
this.stackOptions = list;
|
||||
});
|
||||
},
|
||||
getClusterList() {
|
||||
const { stackId } = this.search;
|
||||
if (!stackId) {
|
||||
this.clusterOptions = [];
|
||||
return Promise.resolve();
|
||||
}
|
||||
this.clusterloading = true;
|
||||
getClusterNameList({
|
||||
stackDeviceId: this.search.stackId,
|
||||
const currentStackId = String(stackId);
|
||||
return getClusterNameList({
|
||||
stackDeviceId: stackId,
|
||||
siteId: this.siteId,
|
||||
})
|
||||
.then((response) => {
|
||||
this.clusterOptions = JSON.parse(
|
||||
JSON.stringify(response?.data || [])
|
||||
);
|
||||
// 避免用户快速切换电池堆时旧请求覆盖新数据
|
||||
if (String(this.search.stackId || "") !== currentStackId) return;
|
||||
this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []));
|
||||
})
|
||||
.finally(() => {
|
||||
this.clusterloading = false;
|
||||
|
||||
Reference in New Issue
Block a user