From d5e5747ad643aec6734b22cbe26bb00e16eb5b0f Mon Sep 17 00:00:00 2001
From: pnoker <pnokers@gmail.com>
Date: Sun, 9 Jan 2022 13:47:12 +0800
Subject: [PATCH] feat(driver): expand driver detail page with richer info and
 list refinements

---
 src/views/device/DeviceDetail.vue        |  12 +-
 src/views/device/DeviceList.vue          |   4 +-
 src/views/driver/DriverCard.vue          |   8 +-
 src/views/driver/DriverDetail.vue        | 176 ++++++++++++++++++-----
 src/views/driver/DriverList.vue          |   4 +-
 src/views/driver/DriverTool.vue          |  10 +-
 src/views/point/PointList.vue            |   4 +-
 src/views/point/value/PointValueList.vue |   4 +-
 src/views/profile/ProfileDetail.vue      |   8 +-
 src/views/profile/ProfileList.vue        |   4 +-
 10 files changed, 184 insertions(+), 50 deletions(-)

diff --git a/src/views/device/DeviceDetail.vue b/src/views/device/DeviceDetail.vue
index 7734d8249..3849455b5 100644
--- a/src/views/device/DeviceDetail.vue
+++ b/src/views/device/DeviceDetail.vue
@@ -19,7 +19,9 @@
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                             <skeleton-card :loading="profileLoading" :footer="true"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listProfileData.length<1" description="暂无包含的模板数据！"></el-empty>
+                        <el-col>
+                            <el-empty v-if="listProfileData.length<1" description="暂无包含的模板数据！"></el-empty>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listProfileData">
                             <profile-card
                                     :data="data"
@@ -34,7 +36,9 @@
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
                             <skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
+                        <el-col>
+                            <el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
                             <point-card
                                     :data="data"
@@ -52,7 +56,9 @@
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                             <skeleton-card :loading="pointValueLoading" :footer="true"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listPointValueData.length<1" description="暂无设备位号数据！"></el-empty>
+                        <el-col>
+                            <el-empty v-if="listPointValueData.length<1" description="暂无设备位号数据！"></el-empty>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-if="data" v-for="data in listPointValueData">
                             <point-value-card
                                     v-if="data"
diff --git a/src/views/device/DeviceList.vue b/src/views/device/DeviceList.vue
index ce8dae50c..5072e6279 100644
--- a/src/views/device/DeviceList.vue
+++ b/src/views/device/DeviceList.vue
@@ -19,7 +19,9 @@
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                     <skeleton-card :loading="loading"></skeleton-card>
                 </el-col>
-                <el-empty v-if="listData.length<1" description="暂无设备数据！"></el-empty>
+                <el-col>
+                    <el-empty v-if="listData.length<1" description="暂无设备数据！"></el-empty>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <device-card
                             :data="data"
diff --git a/src/views/driver/DriverCard.vue b/src/views/driver/DriverCard.vue
index 4846d7ed3..fbc4153e8 100644
--- a/src/views/driver/DriverCard.vue
+++ b/src/views/driver/DriverCard.vue
@@ -28,7 +28,7 @@
                         <p class="nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
                     </div>
                 </div>
-                <div class="things-card__footer">
+                <div v-if="!footer" class="things-card__footer">
                     <div class="things-card-footer-operation">
                         <el-popconfirm title="是否确定停用该驱动？" placement="top" icon="el-icon-remove-outline">
                             <el-button class="operation-tooltip" type="text" slot="reference" disabled>停用</el-button>
@@ -77,6 +77,12 @@
             icon: {
                 type: String,
                 default: 'images/common/driver.png'
+            },
+            footer: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
             }
         },
         methods: {
diff --git a/src/views/driver/DriverDetail.vue b/src/views/driver/DriverDetail.vue
index 1e4d49754..81a6f45fc 100644
--- a/src/views/driver/DriverDetail.vue
+++ b/src/views/driver/DriverDetail.vue
@@ -1,69 +1,119 @@
 <template>
     <div>
-        <base-card>
-            <el-tabs v-model="active" @tab-click="changeActive">
-                <el-tab-pane label="驱动详情" name="detail">
-                    <detail-card>
-                        <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><i class="el-icon-edit-outline"></i> 修改日期: {{timestamp(data.createTime)}}</li>
-                            <li><i class="el-icon-sunset"></i> 创建日期: {{timestamp(data.updateTime)}}</li>
-                        </ul>
-                    </detail-card>
-                </el-tab-pane>
-                <el-tab-pane label="关联设备" name="device">
+        <el-row>
+            <driver-tool
+                    :page="page"
+                    @search="search"
+                    @reset="reset"
+                    @refresh="refresh"
+                    @sort="sort"
+                    @size-change="sizeChange"
+                    @current-change="currentChange"
+            ></driver-tool>
+        </el-row>
+        <el-row :gutter="3">
+            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+                <blank-card>
                     <el-row>
-                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
-                            <skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
+                        <el-col :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="driverLoading"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
-                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
-                            <device-card
+                        <el-col>
+                            <el-empty v-if="listDriverData.length<1" description="暂无驱动数据！"></el-empty>
+                        </el-col>
+                        <el-col :key="data.id" v-for="data in listDriverData">
+                            <driver-card
                                     :data="data"
-                                    :driverTable="driverTable"
-                                    :profileTable="profileTable"
-                                    :statusTable="statusTable"
-                                    :embedded="true"
-                            ></device-card>
+                                    :statusTable="driverStatusTable"
+                                    :footer="true"
+                            ></driver-card>
                         </el-col>
                     </el-row>
-                </el-tab-pane>
-                <el-tab-pane label="驱动模型" name="model">
-                    <el-empty description="暂无驱动模型数据！"></el-empty>
-                </el-tab-pane>
-                <el-tab-pane label="驱动事件" name="event">
-                    <el-empty description="暂无驱动事件数据！"></el-empty>
-                </el-tab-pane>
-            </el-tabs>
-        </base-card>
+                </blank-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="16" :lg="18" :xl="20">
+                <base-card>
+                    <el-tabs v-model="active" @tab-click="changeActive">
+                        <el-tab-pane label="驱动详情" name="detail">
+                            <detail-card>
+                                <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><i class="el-icon-edit-outline"></i> 修改日期: {{timestamp(data.createTime)}}</li>
+                                    <li><i class="el-icon-sunset"></i> 创建日期: {{timestamp(data.updateTime)}}</li>
+                                </ul>
+                            </detail-card>
+                        </el-tab-pane>
+                        <el-tab-pane label="关联设备" name="device">
+                            <el-row>
+                                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
+                                    <skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
+                                </el-col>
+                                <el-col>
+                                    <el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
+                                </el-col>
+                                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listDeviceData">
+                                    <device-card
+                                            :data="data"
+                                            :driverTable="driverTable"
+                                            :profileTable="profileTable"
+                                            :statusTable="deviceStatusTable"
+                                            :embedded="true"
+                                    ></device-card>
+                                </el-col>
+                            </el-row>
+                        </el-tab-pane>
+                        <el-tab-pane label="驱动模型" name="model">
+                            <el-empty description="暂无驱动模型数据！"></el-empty>
+                        </el-tab-pane>
+                        <el-tab-pane label="驱动事件" name="event">
+                            <el-empty description="暂无驱动事件数据！"></el-empty>
+                        </el-tab-pane>
+                    </el-tabs>
+                </base-card>
+            </el-col>
+        </el-row>
     </div>
 </template>
 <script>
+    import blankCard from '@/components/card/blank-card';
     import baseCard from '@/components/card/base-card';
     import detailCard from '@/components/card/detail-card';
     import skeletonCard from '@/components/card/skeleton-card';
+    import driverTool from './DriverTool';
     import deviceList from '../device/DeviceList';
+    import driverCard from './DriverCard';
     import deviceCard from '../device/DeviceCard';
     import pointCard from '../point/PointCard';
     import {dateFormat, setCopyContent} from "@/util/util";
     import {deviceByDriverId, deviceStatusByDriverId} from "@/api/device";
     import {driverDictionary, profileDictionary} from "@/api/dictionary";
-    import {driverById} from "@/api/driver";
-    import DriverList from "@/views/driver/DriverList";
+    import {driverById, driverList, driverStatus} from "@/api/driver";
 
     export default {
-        components: {DriverList, baseCard, detailCard, skeletonCard, deviceList, deviceCard, pointCard},
+        components: {blankCard, baseCard, detailCard, skeletonCard, driverTool, deviceList, driverCard, deviceCard, pointCard},
         data() {
             return {
                 id: this.$route.query.id,
                 active: this.$route.query.active,
+                driverLoading: true,
                 deviceLoading: true,
                 driverTable: {},
                 profileTable: {},
-                statusTable: {},
+                driverStatusTable: {},
+                deviceStatusTable: {},
                 data: {},
-                listDeviceData: []
+                listDriverData: [],
+                listDeviceData: [],
+                query: {
+                    type: 'driver'
+                },
+                order: false,
+                page: {
+                    total: 0,
+                    size: 12,
+                    current: 1
+                }
             }
         },
         created() {
@@ -71,6 +121,7 @@
             this.device();
             this.drivers();
             this.profiles();
+            this.list();
         },
         methods: {
             driver() {
@@ -88,7 +139,7 @@
                 });
 
                 deviceStatusByDriverId(this.id).then(res => {
-                    this.statusTable = res.data;
+                    this.deviceStatusTable = res.data;
                 }).catch(() => {
                 });
             },
@@ -110,6 +161,55 @@
                 }).catch(() => {
                 });
             },
+            list() {
+                driverList({
+                    page: this.page,
+                    ...this.query
+                }).then(res => {
+                    const data = res.data;
+                    this.page.total = data.total;
+                    this.listDriverData = data.records;
+                }).catch(() => {
+                }).finally(() => {
+                    this.driverLoading = false;
+                });
+
+                driverStatus({
+                    page: this.page,
+                    ...this.query
+                }).then(res => {
+                    this.driverStatusTable = res.data;
+                }).catch(() => {
+                });
+            },
+            search(params) {
+                this.query = {...params, type: 'driver'};
+                this.list();
+            },
+            reset() {
+                this.query = {type: 'driver'};
+                this.list();
+            },
+            refresh() {
+                this.list();
+            },
+            sort() {
+                this.order = !this.order;
+                if (this.order) {
+                    this.page.orders = [{column: 'create_time', asc: true}];
+                } else {
+                    this.page.orders = [{column: 'create_time', asc: false}];
+                }
+                this.list();
+            },
+            sizeChange(size) {
+                this.page.size = size;
+                this.list();
+            },
+            currentChange(current) {
+                this.page.current = current;
+                this.list();
+            },
             deviceName() {
                 return this.listDeviceData.map(device => device.name).join(", ");
             },
diff --git a/src/views/driver/DriverList.vue b/src/views/driver/DriverList.vue
index 574a05a28..7f1a47a89 100644
--- a/src/views/driver/DriverList.vue
+++ b/src/views/driver/DriverList.vue
@@ -17,7 +17,9 @@
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                     <skeleton-card :loading="loading"></skeleton-card>
                 </el-col>
-                <el-empty v-if="listData.length<1" description="暂无驱动数据！"></el-empty>
+                <el-col>
+                    <el-empty v-if="listData.length<1" description="暂无驱动数据！"></el-empty>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <driver-card
                             :data="data"
diff --git a/src/views/driver/DriverTool.vue b/src/views/driver/DriverTool.vue
index 330e8ccfb..6dfdffc03 100644
--- a/src/views/driver/DriverTool.vue
+++ b/src/views/driver/DriverTool.vue
@@ -52,7 +52,9 @@
                     </el-form>
                 </div>
                 <div class="tool-card-content-operation">
-                    <el-button type="success" size="small" icon="el-icon-plus" disabled>新增</el-button>
+                    <div>
+                        <el-button v-if="add" type="success" size="small" icon="el-icon-plus">新增</el-button>
+                    </div>
                     <div class="tool-card-content-operation-page">
                         <el-pagination background layout="total, prev, pager, next, sizes"
                                        :page-sizes="[12, 24, 36, 48]"
@@ -83,6 +85,12 @@
                 default: () => {
                     return {}
                 }
+            },
+            add: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
             }
         },
         data() {
diff --git a/src/views/point/PointList.vue b/src/views/point/PointList.vue
index 6042db16a..d4cb81dff 100644
--- a/src/views/point/PointList.vue
+++ b/src/views/point/PointList.vue
@@ -21,7 +21,9 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
                 <skeleton-card :loading="loading"></skeleton-card>
             </el-col>
-            <el-empty v-if="listData.length<1" description="暂无位号数据！"></el-empty>
+            <el-col>
+                <el-empty v-if="listData.length<1" description="暂无位号数据！"></el-empty>
+            </el-col>
             <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listData">
                 <point-card
                         :data="data"
diff --git a/src/views/point/value/PointValueList.vue b/src/views/point/value/PointValueList.vue
index 19f942ed8..c07e53497 100644
--- a/src/views/point/value/PointValueList.vue
+++ b/src/views/point/value/PointValueList.vue
@@ -18,7 +18,9 @@
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                     <skeleton-card :loading="loading"></skeleton-card>
                 </el-col>
-                <el-empty v-if="listData.length<1" description="暂无数据，请选择设备和位号！"></el-empty>
+                <el-col>
+                    <el-empty v-if="listData.length<1" description="暂无数据，请选择设备和位号！"></el-empty>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <point-value-card
                             :data="data"
diff --git a/src/views/profile/ProfileDetail.vue b/src/views/profile/ProfileDetail.vue
index b4aa6b5bb..f502a2839 100644
--- a/src/views/profile/ProfileDetail.vue
+++ b/src/views/profile/ProfileDetail.vue
@@ -18,7 +18,9 @@
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
                             <skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
+                        <el-col>
+                            <el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
                             <point-card
                                     :data="data"
@@ -33,7 +35,9 @@
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                             <skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
                         </el-col>
-                        <el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
+                        <el-col>
+                            <el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
                             <device-card
                                     :data="data"
diff --git a/src/views/profile/ProfileList.vue b/src/views/profile/ProfileList.vue
index 4389bf4ad..eb658fad9 100644
--- a/src/views/profile/ProfileList.vue
+++ b/src/views/profile/ProfileList.vue
@@ -18,7 +18,9 @@
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
                     <skeleton-card :loading="loading"></skeleton-card>
                 </el-col>
-                <el-empty v-if="listData.length<1" description="暂无模板数据！"></el-empty>
+                <el-col>
+                    <el-empty v-if="listData.length<1" description="暂无模板数据！"></el-empty>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <profile-card
                             :data="data"