355 lines
9.5 KiB
Vue
355 lines
9.5 KiB
Vue
<template>
|
||
<el-card
|
||
v-loading="loading"
|
||
shadow="always"
|
||
class="sbjk-card-container common-card-container-no-title-bg running-card-container"
|
||
>
|
||
<div slot="header">
|
||
<span class="large-title">单体电池实时数据</span>
|
||
</div>
|
||
<!-- 搜索栏-->
|
||
<el-form :inline="true" class="select-container">
|
||
<el-form-item label="编号">
|
||
<el-input
|
||
v-model="search.batteryId"
|
||
placeholder="请输入"
|
||
clearable
|
||
style="width: 150px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="电池堆">
|
||
<el-select
|
||
v-model="search.stackId"
|
||
placeholder="请选择"
|
||
@change="changeStackId"
|
||
>
|
||
<el-option
|
||
:label="item.deviceName"
|
||
:value="item.id"
|
||
v-for="(item, index) in stackOptions"
|
||
:key="index + 'stackOptions'"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电池簇">
|
||
<el-select
|
||
v-model="search.clusterId"
|
||
:no-data-text="
|
||
!search.stackId && stackOptions.length > 0
|
||
? '请先选择电池堆'
|
||
: '无数据'
|
||
"
|
||
placeholder="请选择"
|
||
:loading="clusterloading"
|
||
loading-text="正在加载数据"
|
||
>
|
||
<el-option
|
||
:label="item.deviceName"
|
||
:value="item.id"
|
||
v-for="(item, index) in clusterOptions"
|
||
:key="index + 'clusterOptions'"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSearch" native-type="button"
|
||
>搜索</el-button
|
||
>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 切换 -->
|
||
<div class="tip-container">
|
||
<div class="color-tip" v-show="activeBtn === 'list'">
|
||
单体信息
|
||
<span class="tip minwd">最低单体温度</span>
|
||
<span class="tip maxwd">最高单体温度</span>
|
||
<span class="tip mindy">单体最低电压</span>
|
||
<span class="tip maxdy">单体最高电压</span>
|
||
</div>
|
||
<el-button-group class="ems-btns-group">
|
||
<el-button
|
||
:class="{ activeBtn: activeBtn === 'table' }"
|
||
@click="changeMenu('table')"
|
||
>图表</el-button
|
||
>
|
||
<el-button
|
||
:class="{ activeBtn: activeBtn === 'list' }"
|
||
@click="changeMenu('list')"
|
||
>图形</el-button
|
||
>
|
||
</el-button-group>
|
||
</div>
|
||
<component
|
||
:is="activeBtn === 'table' ? 'DtdcTable' : 'DtdcList'"
|
||
:tableData="tableData"
|
||
:totalSize="totalSize"
|
||
:pointIdList="pointIdList"
|
||
@chart="chartDetail"
|
||
@pointDetail="pointDetail"
|
||
></component>
|
||
<el-pagination
|
||
v-show="tableData.length > 0"
|
||
background
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNum"
|
||
:page-size="pageSize"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="totalSize"
|
||
style="margin-top: 15px; text-align: center"
|
||
>
|
||
</el-pagination>
|
||
<chart-detail ref="chartDetail" />
|
||
<point-chart ref="pointChart" :site-id="siteId" />
|
||
<point-table ref="pointTable"/>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import BarChart from "./BarChart";
|
||
import {
|
||
getStackNameList,
|
||
getClusterNameList,
|
||
getClusterDataInfoList,
|
||
} from "@/api/ems/dzjk";
|
||
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() {
|
||
let obj = {};
|
||
this.pointData.forEach((item) => {
|
||
const {
|
||
maxCellTempId,
|
||
maxCellVoltageId,
|
||
minCellTempId,
|
||
minCellVoltageId,
|
||
} = item;
|
||
obj[item.clusterId] = [
|
||
parseInt(minCellTempId || 0),
|
||
parseInt(maxCellTempId || 0),
|
||
parseInt(minCellVoltageId || 0),
|
||
parseInt(maxCellVoltageId || 0),
|
||
]; //最低单体温度 最高温度 最低电压 最高电压 todo 这里的顺序需要和图形组件里的顺序保持一致，
|
||
});
|
||
return obj;
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
clusterloading: false,
|
||
search: { stackId: "", clusterId: "", batteryId: "" },
|
||
stackOptions: [], //{id:'',deviceName:''}
|
||
clusterOptions: [], //{id:'',deviceName:''}
|
||
tableData: [],
|
||
pointData: [],
|
||
pageSize: 40, //分页栏当前每个数据总数
|
||
pageNum: 1, //分页栏当前页数
|
||
totalSize: 0, //table表格数据总数
|
||
activeBtn: "table",
|
||
};
|
||
},
|
||
methods: {
|
||
// 查看设备电位表格
|
||
pointDetail(row,dataType){
|
||
const {deviceId,clusterDeviceId} = row
|
||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'BATTERY',parentId:clusterDeviceId},dataType)
|
||
},
|
||
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],
|
||
});
|
||
},
|
||
// 分页
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.$nextTick(() => {
|
||
this.getTableData();
|
||
});
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNum = val;
|
||
this.$nextTick(() => {
|
||
this.getTableData();
|
||
});
|
||
},
|
||
// 搜索
|
||
onSearch() {
|
||
this.pageNum = 1; //每次搜索从1开始搜索
|
||
this.getTableData();
|
||
},
|
||
// 重置
|
||
// 清空搜索栏选中数据
|
||
// 清空电池簇列表，保留电池堆列表
|
||
onReset() {
|
||
this.search = { stackId: "", clusterId: "", batteryId: "" };
|
||
this.clusterOptions = [];
|
||
this.pageNum = 1;
|
||
this.getTableData();
|
||
},
|
||
changeStackId(val) {
|
||
if (val) {
|
||
console.log(
|
||
"选择了电池堆，需要获取对应的电池簇",
|
||
val,
|
||
this.search.stackId
|
||
);
|
||
this.search.clusterId = "";
|
||
this.getClusterList();
|
||
}
|
||
},
|
||
//表格数据
|
||
getTableData() {
|
||
this.loading = true;
|
||
const {
|
||
stackId: stackDeviceId,
|
||
clusterId: clusterDeviceId,
|
||
batteryId,
|
||
} = this.search;
|
||
const { siteId, pageNum, pageSize } = this;
|
||
getClusterDataInfoList({
|
||
stackDeviceId,
|
||
clusterDeviceId,
|
||
siteId,
|
||
batteryId,
|
||
pageNum,
|
||
pageSize,
|
||
})
|
||
.then((response) => {
|
||
this.tableData = response?.rows?.[0]?.batteryList || []; //todo check
|
||
this.pointData = response?.rows?.[0]?.clusterList || []; //todo check
|
||
this.totalSize = response?.total || 0;
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
getStackList() {
|
||
getStackNameList(this.siteId).then((response) => {
|
||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || []));
|
||
});
|
||
},
|
||
getClusterList() {
|
||
this.clusterloading = true;
|
||
getClusterNameList({
|
||
stackDeviceId: this.search.stackId,
|
||
siteId: this.siteId,
|
||
})
|
||
.then((response) => {
|
||
this.clusterOptions = JSON.parse(
|
||
JSON.stringify(response?.data || [])
|
||
);
|
||
})
|
||
.finally(() => {
|
||
this.clusterloading = false;
|
||
});
|
||
},
|
||
init() {
|
||
// 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
|
||
this.search = { stackId: "", clusterId: "", batteryId: "" }; //保证切换站点时，清空选择项
|
||
this.clusterOptions = [];
|
||
this.pageNum = 1;
|
||
this.totalSize = 0;
|
||
this.getStackList();
|
||
this.getTableData();
|
||
},
|
||
},
|
||
mounted() {},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.tip-container {
|
||
text-align: right;
|
||
position: relative;
|
||
.color-tip {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
color: #333;
|
||
.tip {
|
||
padding-left: 30px;
|
||
position: relative;
|
||
&::before {
|
||
display: block;
|
||
content: "";
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
&.minwd {
|
||
color: #3794ff;
|
||
&::before {
|
||
background: #3794ff;
|
||
}
|
||
}
|
||
&.maxwd {
|
||
color: #ff3a3b;
|
||
&::before {
|
||
background: #ff3a3b;
|
||
}
|
||
}
|
||
&.mindy {
|
||
color: #de6902;
|
||
&::before {
|
||
background: #de6902;
|
||
}
|
||
}
|
||
&.maxdy {
|
||
color: #ffb521;
|
||
&::before {
|
||
background: #ffb521;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep {
|
||
.el-button-group.ems-btns-group {
|
||
& > .el-button {
|
||
padding: 5px 30px !important;
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
// padding-left: 50px;
|
||
// padding-right: 50px;
|
||
// font-size: 16px;
|
||
// line-height: 24px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|