From ce416c1fff68d999e9120c2f0a553795c418489b Mon Sep 17 00:00:00 2001
From: Vicky Yang <vicky-yang@icloud.com>
Date: Sat, 20 Jun 2020 23:20:59 +0800
Subject: [PATCH] add driver & device status

---
 src/api/manager.js          | 10 ++++++++++
 src/router/common/index.js  |  2 +-
 src/views/device/Device.vue | 31 ++++++++++++++++++++++++++++---
 src/views/driver/Driver.vue | 31 ++++++++++++++++++++++++++-----
 src/views/login/Login.vue   |  3 ++-
 5 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/src/api/manager.js b/src/api/manager.js
index 583cb96..784e036 100644
--- a/src/api/manager.js
+++ b/src/api/manager.js
@@ -9,6 +9,11 @@ export const driverApi = {
         url: '/manager_api/manager/driver/list',
         method: 'post',
         data: driver
+    }),
+    status: (driver) => request({
+        url: '/manager_api/manager/driver/status',
+        method: 'post',
+        data: driver
     })
 };
 
@@ -163,6 +168,11 @@ export const deviceApi = {
         url: '/manager_api/manager/device/list',
         method: 'post',
         data: device
+    }),
+    status: (device) => request({
+        url: '/manager_api/manager/device/status',
+        method: 'post',
+        data: device
     })
 };
 
diff --git a/src/router/common/index.js b/src/router/common/index.js
index c73c33a..f2c4f29 100644
--- a/src/router/common/index.js
+++ b/src/router/common/index.js
@@ -8,7 +8,7 @@ export default [
         path: '/login',
         meta: {
             isAuth: false,
-            title: 'DC3 Web UI Login'
+            title: 'DC3 物联万物,智控未来!'
         },
         component: () => import('@/views/login/Login')
     },
diff --git a/src/views/device/Device.vue b/src/views/device/Device.vue
index b823ab5..56420cc 100644
--- a/src/views/device/Device.vue
+++ b/src/views/device/Device.vue
@@ -17,6 +17,12 @@
                        @size-change="sizeChange"
                        @current-change="currentChange"
             >
+                <template slot="status" slot-scope="scope">
+                    <el-tag v-if="scope.row.status==='ONLINE'" type="success" effect="plain">在线</el-tag>
+                    <el-tag v-else-if="scope.row.status==='MAINTAIN'" type="warning" effect="plain">维护</el-tag>
+                    <el-tag v-else-if="scope.row.status==='FAULT'" type="danger" effect="plain">故障</el-tag>
+                    <el-tag v-else type="info" effect="plain">离线</el-tag>
+                </template>
             </avue-crud>
         </base-card>
     </el-col>
@@ -65,6 +71,7 @@
                         }, {
                             label: '所属模板',
                             prop: 'profileId',
+                            span: 8,
                             search: true,
                             searchSpan: 8,
                             type: 'tree',
@@ -81,6 +88,7 @@
                             label: '所属分组',
                             prop: 'groupId',
                             width: 180,
+                            span: 8,
                             search: true,
                             searchSpan: 8,
                             type: 'select',
@@ -94,6 +102,13 @@
                                     trigger: 'click'
                                 }
                             ]
+                        }, {
+                            label: '状态',
+                            prop: 'status',
+                            width: 100,
+                            span: 8,
+                            disabled: true,
+                            slot: true
                         }, {
                             label: '备注',
                             prop: 'description',
@@ -150,10 +165,20 @@
                             current: page.currentPage,
                             size: page.pageSize
                         }
-                    }, this.query)).then(res => {
-                        const data = res.data;
+                    }, this.query)).then(list => {
+                        const data = list.data;
                         this.page.total = data.total;
-                        this.listData = data.records;
+                        deviceApi.status(Object.assign({
+                            page: {
+                                current: page.currentPage,
+                                size: page.pageSize
+                            }
+                        }, this.query)).then(statuses => {
+                            this.listData = data.records.map(d => {
+                                d.status = statuses.data[d.id] || "OFFLINE";
+                                return d;
+                            });
+                        });
                     }).catch(() => {
                     }).finally(() => {
                         this.loading = false;
diff --git a/src/views/driver/Driver.vue b/src/views/driver/Driver.vue
index 2fb6733..f8905c8 100644
--- a/src/views/driver/Driver.vue
+++ b/src/views/driver/Driver.vue
@@ -16,6 +16,10 @@
                        @size-change="sizeChange"
                        @current-change="currentChange"
             >
+                <template slot="status" slot-scope="scope">
+                    <el-tag v-if="scope.row.status" type="success" effect="plain">在线</el-tag>
+                    <el-tag v-else type="info" effect="plain">离线</el-tag>
+                </template>
             </avue-crud>
         </base-card>
     </el-col>
@@ -46,15 +50,22 @@
                         {
                             label: '名称',
                             prop: 'name',
-                            span: 12,
+                            span: 8,
                             search: true,
                             searchSpan: 6
                         }, {
                             label: '服务',
                             prop: 'serviceName',
-                            span: 12,
+                            span: 8,
                             search: true,
                             searchSpan: 6
+                        }, {
+                            label: '状态',
+                            prop: 'status',
+                            width: 100,
+                            span: 8,
+                            disabled: true,
+                            slot: true
                         }, {
                             label: '主机',
                             prop: 'host',
@@ -121,10 +132,20 @@
                             current: page.currentPage,
                             size: page.pageSize
                         }
-                    }, this.query)).then(res => {
-                        const data = res.data;
+                    }, this.query)).then(list => {
+                        const data = list.data;
                         this.page.total = data.total;
-                        this.listData = data.records;
+                        driverApi.status(Object.assign({
+                            page: {
+                                current: page.currentPage,
+                                size: page.pageSize
+                            }
+                        }, this.query)).then(statuses => {
+                            this.listData = data.records.map(d => {
+                                d.status = statuses.data[d.serviceName] === true;
+                                return d;
+                            });
+                        });
                     }).catch(() => {
                     }).finally(() => {
                         this.loading = false;
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 1da55d1..13cdc84 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -10,8 +10,9 @@
             <div class="login-border">
                 <div class="login-main">
                     <h4 class="login-title">
-                        Web UI
+                        Demo Application
                     </h4>
+                    <p style="text-align: center;">基于 DC3 接口开发的 demo 应用，仅供演示使用<br> 使用 Vue，ElementUi，Avue 开发</p>
                     <el-form class="login-form"
                              status-icon
                              :rules="loginRules"