充电桩详情页优化,新增刷新列表按钮

This commit is contained in:
2023-03-10 17:04:19 +08:00
parent cb747c0c62
commit afd974bb27

View File

@@ -95,9 +95,12 @@
<!-- 右侧内容 -->
<el-col :span="19" style="margin-left: 15px">
<el-card class="box-card" shadow="hover">
<div style="margin: 12px 0">接口列表</div>
<div style="margin-top: 20px">
<!-- 刷新按钮 -->
<div style="margin: 12px 0">
<span>接口列表</span>
<el-button icon="el-icon-refresh-right" size="mini" @click="refreshPileConnectorList">刷新</el-button>
</div>
<!--<div style="margin-top: 20px">
&lt;!&ndash; 刷新按钮 &ndash;&gt;
<el-button
size="medium"
type="primary"
@@ -105,13 +108,13 @@
>
刷新
</el-button>
</div>
</div>-->
<div class="sideNav" id="app">
<!-- 接口列表表单 -->
<el-table
:data="connectorList"
style="width: 100%"
v-loading="Loading"
v-loading="pileListLoading"
>
<el-table-column
prop="pileConnectorCode"
@@ -198,9 +201,12 @@
</el-table>
</div>
</el-card>
<el-card style="margin-top: 20px">
<div style="margin: 12px 0">充电桩通信日志</div>
<el-table :data="feedList" stripe style="width: 100%">
<el-card style="margin-top: 20px" shadow="hover">
<div style="margin: 12px 0">
<span>充电桩通信日志</span>
<el-button icon="el-icon-refresh-right" size="mini" @click="getFeedList">刷新</el-button>
</div>
<el-table :data="feedList" stripe style="width: 100%" v-loading="feedListLoading">
<el-table-column prop="createTime" label="触发时间" align="center" width="200"/>
<el-table-column prop="description" label="描述" align="center" width="200"/>
<el-table-column prop="originalMsg" label="原始报文" align="center"/>
@@ -241,14 +247,14 @@ export default {
dicts: ["connector_status", "connector_type", "sim_supplier", "sim_operator"],
data() {
return {
Loading: false,
pileListLoading: false,
pileId: this.$route.params.pileId,
// 右侧数据数组
connectorList: [],
stationId: 1,
// 充电桩详情 竖向 表格渲染的数据
pileDetail: { url: "" },
loading: false,
feedListLoading: false,
qrWidth: 60,
flag: true,
// 充电桩通信日志
@@ -340,21 +346,21 @@ export default {
},
// 刷新按钮重新获取数据
refreshPileConnectorList() {
this.Loading = true;
this.pileListLoading = true;
setTimeout(() => {
this.queryPileConnectorList();
this.Loading = false;
this.pileListLoading = false;
}, 1000);
},
/** 查询充电桩通信日志 */
getFeedList() {
this.loading = true;
this.feedListLoading = true;
this.queryParams.pileSn = this.pileSn;
getPileFeedList(this.queryParams).then((response) => {
console.log("查询充电桩通信日志", response);
this.feedList = response.data.list;
this.total = response.data.total;
this.loading = false;
this.feedListLoading = false;
});
// this.feedList = [
// {