单体电池点位接口参数更新
This commit is contained in:
白菜
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-card
|
||||
v-loading="loading"
|
||||
shadow="always"
|
||||
class="sbjk-card-container common-card-container-no-title-bg running-card-container"
|
||||
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>
|
||||
@ -11,49 +11,50 @@
|
||||
<el-form :inline="true" class="select-container">
|
||||
<el-form-item label="编号">
|
||||
<el-input
|
||||
v-model="search.batteryId"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
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"
|
||||
v-model="search.stackId"
|
||||
placeholder="请选择"
|
||||
@change="changeStackId"
|
||||
>
|
||||
<el-option
|
||||
:label="item.deviceName"
|
||||
:value="item.id"
|
||||
v-for="(item, index) in stackOptions"
|
||||
:key="index + 'stackOptions'"
|
||||
: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="
|
||||
v-model="search.clusterId"
|
||||
:no-data-text="
|
||||
!search.stackId && stackOptions.length > 0
|
||||
? '请先选择电池堆'
|
||||
: '无数据'
|
||||
"
|
||||
placeholder="请选择"
|
||||
:loading="clusterloading"
|
||||
loading-text="正在加载数据"
|
||||
placeholder="请选择"
|
||||
:loading="clusterloading"
|
||||
loading-text="正在加载数据"
|
||||
>
|
||||
<el-option
|
||||
:label="item.deviceName"
|
||||
:value="item.id"
|
||||
v-for="(item, index) in clusterOptions"
|
||||
:key="index + 'clusterOptions'"
|
||||
: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-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -71,57 +72,56 @@
|
||||
</div>
|
||||
<el-button-group class="ems-btns-group">
|
||||
<el-button
|
||||
:class="{ activeBtn: activeBtn === 'table' }"
|
||||
@click="changeMenu('table')"
|
||||
>图表</el-button
|
||||
:class="{ activeBtn: activeBtn === 'table' }"
|
||||
@click="changeMenu('table')"
|
||||
>图表
|
||||
</el-button
|
||||
>
|
||||
<el-button
|
||||
:class="{ activeBtn: activeBtn === 'list' }"
|
||||
@click="changeMenu('list')"
|
||||
>图形</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"
|
||||
: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"
|
||||
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" />
|
||||
<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 {getClusterDataInfoList, getClusterNameList, getStackNameList,} 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],
|
||||
@ -157,7 +157,7 @@ export default {
|
||||
return {
|
||||
loading: false,
|
||||
clusterloading: false,
|
||||
search: { stackId: "", clusterId: "", batteryId: "" },
|
||||
search: {stackId: "", clusterId: "", batteryId: ""},
|
||||
stackOptions: [], //{id:'',deviceName:''}
|
||||
clusterOptions: [], //{id:'',deviceName:''}
|
||||
tableData: [],
|
||||
@ -170,23 +170,28 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
const {deviceId,clusterDeviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'BATTERY',parentId:clusterDeviceId},dataType)
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId, clusterDeviceId} = row
|
||||
this.$refs.pointTable.showTable({
|
||||
siteId: this.siteId,
|
||||
deviceId: deviceId + clusterDeviceId,
|
||||
deviceCategory: 'BATTERY',
|
||||
parentId: clusterDeviceId
|
||||
}, dataType)
|
||||
},
|
||||
changeMenu(menu) {
|
||||
const { activeBtn } = this;
|
||||
const {activeBtn} = this;
|
||||
activeBtn !== menu && (this.activeBtn = menu);
|
||||
},
|
||||
//查看表格行图表
|
||||
chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
|
||||
chartDetail({deviceId, clusterDeviceId, dataType = ""}) {
|
||||
dataType &&
|
||||
this.$refs.pointChart.showChart({
|
||||
pointName: dataType,
|
||||
deviceCategory:'BATTERY',
|
||||
deviceId: clusterDeviceId,
|
||||
child: [deviceId],
|
||||
});
|
||||
this.$refs.pointChart.showChart({
|
||||
pointName: dataType,
|
||||
deviceCategory: 'BATTERY',
|
||||
deviceId: clusterDeviceId,
|
||||
child: [deviceId],
|
||||
});
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
@ -210,7 +215,7 @@ export default {
|
||||
// 清空搜索栏选中数据
|
||||
// 清空电池簇列表，保留电池堆列表
|
||||
onReset() {
|
||||
this.search = { stackId: "", clusterId: "", batteryId: "" };
|
||||
this.search = {stackId: "", clusterId: "", batteryId: ""};
|
||||
this.clusterOptions = [];
|
||||
this.pageNum = 1;
|
||||
this.getTableData();
|
||||
@ -218,9 +223,9 @@ export default {
|
||||
changeStackId(val) {
|
||||
if (val) {
|
||||
console.log(
|
||||
"选择了电池堆，需要获取对应的电池簇",
|
||||
val,
|
||||
this.search.stackId
|
||||
"选择了电池堆，需要获取对应的电池簇",
|
||||
val,
|
||||
this.search.stackId
|
||||
);
|
||||
this.search.clusterId = "";
|
||||
this.getClusterList();
|
||||
@ -234,7 +239,7 @@ export default {
|
||||
clusterId: clusterDeviceId,
|
||||
batteryId,
|
||||
} = this.search;
|
||||
const { siteId, pageNum, pageSize } = this;
|
||||
const {siteId, pageNum, pageSize} = this;
|
||||
getClusterDataInfoList({
|
||||
stackDeviceId,
|
||||
clusterDeviceId,
|
||||
@ -243,14 +248,14 @@ export default {
|
||||
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;
|
||||
});
|
||||
.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) => {
|
||||
@ -263,18 +268,18 @@ export default {
|
||||
stackDeviceId: this.search.stackId,
|
||||
siteId: this.siteId,
|
||||
})
|
||||
.then((response) => {
|
||||
this.clusterOptions = JSON.parse(
|
||||
JSON.stringify(response?.data || [])
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.clusterloading = false;
|
||||
});
|
||||
.then((response) => {
|
||||
this.clusterOptions = JSON.parse(
|
||||
JSON.stringify(response?.data || [])
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.clusterloading = false;
|
||||
});
|
||||
},
|
||||
init() {
|
||||
// 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
|
||||
this.search = { stackId: "", clusterId: "", batteryId: "" }; //保证切换站点时，清空选择项
|
||||
this.search = {stackId: "", clusterId: "", batteryId: ""}; //保证切换站点时，清空选择项
|
||||
this.clusterOptions = [];
|
||||
this.pageNum = 1;
|
||||
this.totalSize = 0;
|
||||
@ -282,13 +287,13 @@ export default {
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tip-container {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
|
||||
.color-tip {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -297,9 +302,11 @@ export default {
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
color: #333;
|
||||
|
||||
.tip {
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
@ -311,32 +318,41 @@ export default {
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user