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

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