|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
- <div class="card-container">
|
|
|
- <div class="card-content" v-loading="loading">
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="card-content" v-if="false">
|
|
|
<el-form
|
|
|
:model="form"
|
|
|
:rules="rule"
|
|
|
@@ -11,21 +11,25 @@
|
|
|
label="Site Name:">
|
|
|
<el-input
|
|
|
class="add-text"
|
|
|
- v-model="form.siteName"
|
|
|
+ v-model="table.list[0].siteName"
|
|
|
placeholder="Add text"
|
|
|
maxlength="100"
|
|
|
- readonly/>
|
|
|
+ readonly
|
|
|
+ v-if="table.total"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
label="Station ID:">
|
|
|
- <el-input
|
|
|
- class="add-text"
|
|
|
- v-model="form.chargeBoxId"
|
|
|
- placeholder="Add text"
|
|
|
- maxlength="100"
|
|
|
- readonly/>
|
|
|
+ <div class="flexcwr">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ v-model="params.pageVo.chargeBoxId"
|
|
|
+ style="margin-bottom: 10px;"
|
|
|
+ placeholder="Add text"
|
|
|
+ maxlength="100"
|
|
|
+ readonly/>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
+ <!--el-form-item
|
|
|
label="Connector: ">
|
|
|
<div class="flexcwr">
|
|
|
<el-input
|
|
|
@@ -42,48 +46,56 @@
|
|
|
Export
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item-->
|
|
|
</el-form>
|
|
|
- <el-table
|
|
|
- class="info-table"
|
|
|
- :data="tableList">
|
|
|
- <el-table-column
|
|
|
- label="Timestamp"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="Notification"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="Connector ID"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="Connector Status"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="Error Code"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="Active Transaction"
|
|
|
- align="center"
|
|
|
- prop="abf">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="filter-container right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="onExport">
|
|
|
+ Export
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ class="info-table"
|
|
|
+ :data="table.list">
|
|
|
+ <el-table-column
|
|
|
+ label="Site Name"
|
|
|
+ align="center"
|
|
|
+ prop="siteName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="Station ID"
|
|
|
+ align="center"
|
|
|
+ prop="chargeBoxId">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="Notification"
|
|
|
+ align="center"
|
|
|
+ prop="notification">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="Timestamp"
|
|
|
+ align="center"
|
|
|
+ prop="timestamp">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="right">
|
|
|
+ <pagination
|
|
|
+ v-show="table.total > 0"
|
|
|
+ :total="table.total"
|
|
|
+ :page.sync="params.pageNo"
|
|
|
+ :limit.sync="params.pageSize"
|
|
|
+ @pagination="getDetail" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import error from '@/http/api/error'
|
|
|
+import api from '@/http/api/incident'
|
|
|
+import { Base64 } from 'js-base64';
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -94,18 +106,83 @@ export default {
|
|
|
rule: {
|
|
|
|
|
|
},
|
|
|
- tableList: []
|
|
|
+ params: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageVo: {
|
|
|
+ sitePk: "",
|
|
|
+ chargeBoxId: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
+ components: { Pagination },
|
|
|
created() {
|
|
|
- this.getDetail();
|
|
|
+ if (this.$route.params.id) {
|
|
|
+ const params = JSON.parse(Base64.decode(this.$route.params.id));
|
|
|
+ this.params.pageVo = params;
|
|
|
+ this.getDetail();
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
getDetail() {
|
|
|
-
|
|
|
+ this.table.loading = true;
|
|
|
+ api.viewConnectivityInfo(this.params).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.table.list = res.data
|
|
|
+ this.table.total = res.total
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: err
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.table.loading = false
|
|
|
+ })
|
|
|
},
|
|
|
onExport() {
|
|
|
-
|
|
|
+ this.loading = true;
|
|
|
+ api.exportConnectivity(this.params.pageVo).then(res => {
|
|
|
+ if (res && res.size > 0) {
|
|
|
+ const name = 'Export-' + this.params.pageVo.chargeBoxId + '-' + new Date().getTime() + '.xls'
|
|
|
+ this.downloadFile(res, name);
|
|
|
+ } else {
|
|
|
+ this.$message.error('Empty files');
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: err
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ downloadFile(res, fileName) {
|
|
|
+ const blob = new Blob([res], {
|
|
|
+ type: 'application/pdf;charset=utf-8'
|
|
|
+ })
|
|
|
+ // let href = window.URL.createObjectURL(blob)
|
|
|
+ if ('download' in document.createElement('a')) {
|
|
|
+ // 非IE下载
|
|
|
+ const elink = document.createElement('a')
|
|
|
+ elink.download = fileName
|
|
|
+ elink.style.display = 'none'
|
|
|
+ elink.href = URL.createObjectURL(blob)
|
|
|
+ document.body.appendChild(elink)
|
|
|
+ elink.click()
|
|
|
+ URL.revokeObjectURL(elink.href) // 释放URL 对象
|
|
|
+ document.body.removeChild(elink)
|
|
|
+ } else {
|
|
|
+ // IE10+下载
|
|
|
+ navigator.msSaveBlob(blob, fileName)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -139,7 +216,7 @@ export default {
|
|
|
}
|
|
|
.info-table {
|
|
|
width: 100%;
|
|
|
- min-height: 60vh;
|
|
|
+ min-height: 65vh;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|