From eaaa09d6d50c9175a409f2b29899a9812c1fe6f2 Mon Sep 17 00:00:00 2001
From: pnoker <pnokers@gmail.com>
Date: Sun, 9 Jan 2022 22:55:37 +0800
Subject: [PATCH] feat(ui): improve layout and detail display across all entity
 card views

---
 src/components/layout/Layout.vue          |  4 +-
 src/views/application/ApplicationCard.vue |  4 +-
 src/views/dashboard/DashboardCard.vue     |  4 +-
 src/views/device/DeviceCard.vue           |  8 +++-
 src/views/device/DeviceDetail.vue         |  4 +-
 src/views/device/DeviceEdit.vue           |  8 +++-
 src/views/driver/DriverCard.vue           | 47 +++++++++++++++--------
 src/views/driver/DriverDetail.vue         | 24 +++++++++++-
 src/views/gateway/GatewayCard.vue         |  4 +-
 src/views/gateway/GatewayDetail.vue       |  4 +-
 src/views/point/PointCard.vue             |  8 +++-
 src/views/point/PointDetail.vue           |  4 +-
 src/views/point/PointEdit.vue             |  8 +++-
 src/views/point/info/PointInfoCard.vue    |  2 +-
 src/views/profile/ProfileCard.vue         |  8 +++-
 src/views/profile/ProfileDetail.vue       |  4 +-
 src/views/profile/ProfileEdit.vue         |  8 +++-
 17 files changed, 116 insertions(+), 37 deletions(-)

diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
index cf9dfcde0..da4013e04 100644
--- a/src/components/layout/Layout.vue
+++ b/src/components/layout/Layout.vue
@@ -71,7 +71,9 @@
             },
             handleCommand(command) {
                 if (command === 'logout') {
-                    this.$store.dispatch('ClearToken').then(() => this.$router.push('/login'));
+                    this.$store.dispatch('ClearToken').then(() => this.$router.push('/login'))
+                        .catch(() => {
+                        });
                 } else if (command === 'help') {
                     window.open('https://doc.dc3.site');
                 }
diff --git a/src/views/application/ApplicationCard.vue b/src/views/application/ApplicationCard.vue
index 034061a92..451399d9c 100644
--- a/src/views/application/ApplicationCard.vue
+++ b/src/views/application/ApplicationCard.vue
@@ -41,7 +41,9 @@
         methods: {
             show() {
                 if (this.url) {
-                    this.$router.push({name: 'application', query: {id: encode(this.url)}});
+                    this.$router.push({name: 'application', query: {id: encode(this.url)}})
+                        .catch(() => {
+                        });
                 }
             }
         }
diff --git a/src/views/dashboard/DashboardCard.vue b/src/views/dashboard/DashboardCard.vue
index b47c193f7..71264c39d 100644
--- a/src/views/dashboard/DashboardCard.vue
+++ b/src/views/dashboard/DashboardCard.vue
@@ -41,7 +41,9 @@
         methods: {
             show() {
                 if (this.url) {
-                    this.$router.push({name: 'dashboard', query: {id: encode(this.url)}});
+                    this.$router.push({name: 'dashboard', query: {id: encode(this.url)}})
+                        .catch(() => {
+                        });
                 }
             }
         }
diff --git a/src/views/device/DeviceCard.vue b/src/views/device/DeviceCard.vue
index 1f00cf862..bdbf1b7d4 100644
--- a/src/views/device/DeviceCard.vue
+++ b/src/views/device/DeviceCard.vue
@@ -120,10 +120,14 @@
                 });
             },
             edit(id, driverId) {
-                this.$router.push({name: 'deviceEdit', query: {id, driverId, active: '0'}});
+                this.$router.push({name: 'deviceEdit', query: {id, driverId, active: '0'}})
+                    .catch(() => {
+                    });
             },
             detail(id, driverId) {
-                this.$router.push({name: 'deviceDetail', query: {id, driverId, active: 'detail'}});
+                this.$router.push({name: 'deviceDetail', query: {id, driverId, active: 'detail'}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '设备ID');
diff --git a/src/views/device/DeviceDetail.vue b/src/views/device/DeviceDetail.vue
index 3849455b5..cdb6086b4 100644
--- a/src/views/device/DeviceDetail.vue
+++ b/src/views/device/DeviceDetail.vue
@@ -280,7 +280,9 @@
             },
             changeActive(tab) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: tab.name}});
+                this.$router.push({query: {...query, active: tab.name}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '设备ID');
diff --git a/src/views/device/DeviceEdit.vue b/src/views/device/DeviceEdit.vue
index a6eba2072..ea434aafb 100644
--- a/src/views/device/DeviceEdit.vue
+++ b/src/views/device/DeviceEdit.vue
@@ -523,7 +523,9 @@
                 }
                 this.active += step;
                 if (this.active > 2) {
-                    this.$router.push({name: 'device'});
+                    this.$router.push({name: 'device'})
+                        .catch(() => {
+                        });
                 } else {
                     this.changeActive(this.active);
                 }
@@ -539,7 +541,9 @@
             },
             changeActive(step) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: step}});
+                this.$router.push({query: {...query, active: step}})
+                    .catch(() => {
+                    });
             }
         }
     };
diff --git a/src/views/driver/DriverCard.vue b/src/views/driver/DriverCard.vue
index fbc4153e8..c433d1b1f 100644
--- a/src/views/driver/DriverCard.vue
+++ b/src/views/driver/DriverCard.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="things-card">
-        <el-card shadow="hover">
+    <div class="things-card" @click="select(data)">
+        <el-card :shadow="data.active?'always':'hover'" v-bind:class="{'active':data.active}">
             <div class="things-card-content">
                 <div class="things-card__header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
                     <div class="things-card-header-icon"><img :src="icon" :alt="data.name"></div>
                     <div class="things-card-header-name nowrap-name" @click="copyId(data.id)">{{data.name}}</div>
-                    <div title="状态" class="things-card-header-status">
+                    <div title="状态" class="things-card-header-status" v-bind:class="{'active':data.active}">
                         <el-tag v-if="status(data.id)==='ONLINE'" type="success" effect="plain">在线</el-tag>
                         <el-tag v-else-if="status(data.id)==='MAINTAIN'" type="warning" effect="plain">维护</el-tag>
                         <el-tag v-else-if="status(data.id)==='FAULT'" type="danger" effect="plain">故障</el-tag>
@@ -24,7 +24,7 @@
                             <li class="nowrap-item"><span><i class="el-icon-sunset"/> 创建日期: </span>{{timestamp(data.createTime)}}</li>
                         </ul>
                     </div>
-                    <div title="驱动描述信息" class="things-card-body-content">
+                    <div :title="data.description?data.description:'驱动描述信息'" class="things-card-body-content">
                         <p class="nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
                     </div>
                 </div>
@@ -53,6 +53,16 @@
     export default {
         name: "driver-card",
         props: {
+            icon: {
+                type: String,
+                default: 'images/common/driver.png'
+            },
+            statusTable: {
+                type: Object,
+                default: () => {
+                    return {};
+                }
+            },
             data: {
                 type: Object,
                 default: () => {
@@ -68,16 +78,6 @@
                     };
                 }
             },
-            statusTable: {
-                type: Object,
-                default: () => {
-                    return {};
-                }
-            },
-            icon: {
-                type: String,
-                default: 'images/common/driver.png'
-            },
             footer: {
                 type: Boolean,
                 default: () => {
@@ -90,7 +90,12 @@
                 return this.statusTable[id];
             },
             detail(id) {
-                this.$router.push({name: 'driverDetail', query: {id, active: 'detail'}});
+                this.$router.push({name: 'driverDetail', query: {id, active: 'detail'}})
+                    .catch(() => {
+                    });
+            },
+            select(data) {
+                this.$emit('select-change', data);
             },
             copyId(content) {
                 setCopyContent(content, true, '驱动ID');
@@ -104,4 +109,16 @@
 
 <style lang="scss">
     @import "~@/components/card/styles/things-card.scss";
+
+    .things-card-header-status.active {
+        background: transparent;
+    }
+
+    .active {
+        background: #ecf5ff;
+
+        .el-tag.el-tag--plain {
+            background: #ecf5ff;
+        }
+    }
 </style>
diff --git a/src/views/driver/DriverDetail.vue b/src/views/driver/DriverDetail.vue
index 81a6f45fc..48812b156 100644
--- a/src/views/driver/DriverDetail.vue
+++ b/src/views/driver/DriverDetail.vue
@@ -26,6 +26,7 @@
                                     :data="data"
                                     :statusTable="driverStatusTable"
                                     :footer="true"
+                                    @select-change="selectChange"
                             ></driver-card>
                         </el-col>
                     </el-row>
@@ -39,6 +40,9 @@
                                 <ul>
                                     <li><i class="el-icon-data-line"></i> 驱动名称: {{data.name}}</li>
                                     <li><i class="el-icon-collection-tag"></i> 关联设备 [{{listDeviceData.length||0}} 个]: {{deviceName()}}</li>
+                                    <li class="nowrap-item"><span><i class="el-icon-connection"/> 端口: </span>{{data.port}}</li>
+                                    <li class="nowrap-item"><span><i class="el-icon-monitor"/> 主机: </span>{{data.host}}</li>
+                                    <li class="nowrap-item"><span><i class="el-icon-s-promotion"/> 驱动服务: </span>{{data.serviceName}}</li>
                                     <li><i class="el-icon-edit-outline"></i> 修改日期: {{timestamp(data.createTime)}}</li>
                                     <li><i class="el-icon-sunset"></i> 创建日期: {{timestamp(data.updateTime)}}</li>
                                 </ul>
@@ -134,6 +138,7 @@
                 deviceByDriverId(this.id).then(res => {
                     this.listDeviceData = res.data;
                 }).catch(() => {
+                    this.listDeviceData = [];
                 }).finally(() => {
                     this.deviceLoading = false;
                 });
@@ -141,6 +146,7 @@
                 deviceStatusByDriverId(this.id).then(res => {
                     this.deviceStatusTable = res.data;
                 }).catch(() => {
+                    this.deviceStatusTable = {};
                 });
             },
             drivers() {
@@ -168,6 +174,7 @@
                 }).then(res => {
                     const data = res.data;
                     this.page.total = data.total;
+                    data.records.forEach(driver => driver.active = this.id === driver.id);
                     this.listDriverData = data.records;
                 }).catch(() => {
                 }).finally(() => {
@@ -214,8 +221,23 @@
                 return this.listDeviceData.map(device => device.name).join(", ");
             },
             changeActive(tab) {
+                this.active = tab.name;
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: tab.name}});
+                this.$router.push({query: {...query, active: tab.name}})
+                    .catch(() => {
+                    });
+            },
+            selectChange(data) {
+                this.listDriverData.forEach(driver => driver.active = data.id === driver.id);
+                this.listDriverData = JSON.parse(JSON.stringify(this.listDriverData));
+
+                this.id = data.id;
+                let query = this.$route.query;
+                this.$router.push({query: {...query, id: data.id}}).then(() => {
+                    this.driver();
+                    this.device();
+                }).catch(() => {
+                });
             },
             copyId(content) {
                 setCopyContent(content, true, '驱动ID');
diff --git a/src/views/gateway/GatewayCard.vue b/src/views/gateway/GatewayCard.vue
index 1bfb4f37b..ba0094f96 100644
--- a/src/views/gateway/GatewayCard.vue
+++ b/src/views/gateway/GatewayCard.vue
@@ -84,7 +84,9 @@
                 return this.statusTable[id];
             },
             detail(id) {
-                this.$router.push({name: 'gatewayDetail', query: {id, active: 'detail'}});
+                this.$router.push({name: 'gatewayDetail', query: {id, active: 'detail'}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '网关ID');
diff --git a/src/views/gateway/GatewayDetail.vue b/src/views/gateway/GatewayDetail.vue
index 1ef5e881f..c73b0ca26 100644
--- a/src/views/gateway/GatewayDetail.vue
+++ b/src/views/gateway/GatewayDetail.vue
@@ -99,7 +99,9 @@
             },
             changeActive(tab) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: tab.name}});
+                this.$router.push({query: {...query, active: tab.name}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '网关ID');
diff --git a/src/views/point/PointCard.vue b/src/views/point/PointCard.vue
index 475a00e2e..05229fc07 100644
--- a/src/views/point/PointCard.vue
+++ b/src/views/point/PointCard.vue
@@ -123,10 +123,14 @@
                 });
             },
             edit(id) {
-                this.$router.push({name: 'pointEdit', query: {id, profileId: this.data.profileId, active: '0'}});
+                this.$router.push({name: 'pointEdit', query: {id, profileId: this.data.profileId, active: '0'}})
+                    .catch(() => {
+                    });
             },
             detail(id) {
-                this.$router.push({name: 'pointDetail', query: {id, active: 'detail'}});
+                this.$router.push({name: 'pointDetail', query: {id, active: 'detail'}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '位号ID');
diff --git a/src/views/point/PointDetail.vue b/src/views/point/PointDetail.vue
index c3f6a6e2e..623145346 100644
--- a/src/views/point/PointDetail.vue
+++ b/src/views/point/PointDetail.vue
@@ -99,7 +99,9 @@
             },
             changeActive(tab) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: tab.name}});
+                this.$router.push({query: {...query, active: tab.name}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '位号ID');
diff --git a/src/views/point/PointEdit.vue b/src/views/point/PointEdit.vue
index c4b5f028a..5f11dc6af 100644
--- a/src/views/point/PointEdit.vue
+++ b/src/views/point/PointEdit.vue
@@ -215,7 +215,9 @@
             next() {
                 this.active++;
                 if (this.active > 0) {
-                    this.$router.push({name: 'profileEdit', query: {id: this.$route.query.profileId, active: '1'}});
+                    this.$router.push({name: 'profileEdit', query: {id: this.$route.query.profileId, active: '1'}})
+                        .catch(() => {
+                        });
                 } else {
                     this.changeActive(this.active);
                 }
@@ -225,7 +227,9 @@
             },
             changeActive(step) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: step}});
+                this.$router.push({query: {...query, active: step}})
+                    .catch(() => {
+                    });
             }
         }
     };
diff --git a/src/views/point/info/PointInfoCard.vue b/src/views/point/info/PointInfoCard.vue
index 2d60b0790..18e4d0600 100644
--- a/src/views/point/info/PointInfoCard.vue
+++ b/src/views/point/info/PointInfoCard.vue
@@ -4,7 +4,7 @@
             <div class="things-card-content">
                 <div class="things-card__header" v-bind:class="{'header-enable':isConfig,'header-disable':!isConfig}">
                     <div class="things-card-header-icon"><img :src="isSelect" :alt="data.name"></div>
-                    <div class="things-card-header-name nowrap-name" @click="copyId(data.id)">{{data.name}}</div>
+                    <div class="things-card-header-name nowrap-name">{{data.name}}</div>
                 </div>
                 <div class="things-card__body">
                     <div class="things-card-body-content">
diff --git a/src/views/profile/ProfileCard.vue b/src/views/profile/ProfileCard.vue
index 3ae00b680..047f7b0b0 100644
--- a/src/views/profile/ProfileCard.vue
+++ b/src/views/profile/ProfileCard.vue
@@ -90,10 +90,14 @@
                 });
             },
             edit(id) {
-                this.$router.push({name: 'profileEdit', query: {id, active: '0'}});
+                this.$router.push({name: 'profileEdit', query: {id, active: '0'}})
+                    .catch(() => {
+                    });
             },
             detail(id) {
-                this.$router.push({name: 'profileDetail', query: {id, active: 'detail'}});
+                this.$router.push({name: 'profileDetail', query: {id, active: 'detail'}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '模板ID');
diff --git a/src/views/profile/ProfileDetail.vue b/src/views/profile/ProfileDetail.vue
index f502a2839..155f631be 100644
--- a/src/views/profile/ProfileDetail.vue
+++ b/src/views/profile/ProfileDetail.vue
@@ -145,7 +145,9 @@
             },
             changeActive(tab) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: tab.name}});
+                this.$router.push({query: {...query, active: tab.name}})
+                    .catch(() => {
+                    });
             },
             copyId(content) {
                 setCopyContent(content, true, '模板ID');
diff --git a/src/views/profile/ProfileEdit.vue b/src/views/profile/ProfileEdit.vue
index 9f5932c72..bb5d29452 100644
--- a/src/views/profile/ProfileEdit.vue
+++ b/src/views/profile/ProfileEdit.vue
@@ -143,7 +143,9 @@
             next() {
                 this.active++;
                 if (this.active > 1) {
-                    this.$router.push({name: 'profile'});
+                    this.$router.push({name: 'profile'})
+                        .catch(() => {
+                        });
                 } else {
                     this.changeActive(this.active);
                 }
@@ -153,7 +155,9 @@
             },
             changeActive(step) {
                 let query = this.$route.query;
-                this.$router.push({query: {...query, active: step}});
+                this.$router.push({query: {...query, active: step}})
+                    .catch(() => {
+                    });
             }
         }
     };