add 子设备管理页面

src/router/routes.js

@@ -4,7 +4,7 @@ import Home from '../views/Home/Home.vue'
 import DeviceType from '../views/deviceManagement/DeviceType.vue'
 // 设备信息
 import DeviceInfo from '../views/deviceManagement/DeviceInfo.vue'
-import Ac from '../views/deviceManagement/Ac.vue'
+import SubDeviceAdmin from '../views/deviceManagement/SubDeviceAdmin.vue'
 import Ad from '../views/deviceManagement/Ad.vue'
 export default [
   {
@@ -28,9 +28,9 @@ export default [
 				component: DeviceInfo
 			},
 			{
-				path: '/home1_3',
-				name: 'home1_3',
-				component: Ac
+				path: '/subDeviceAdmin',
+				name: 'subDeviceAdmin',
+				component: SubDeviceAdmin
 			},
 			{
 				path: '/home1_4',

src/views/Home/Home.vue

@@ -85,7 +85,9 @@
                 </div>
                 <div class="col2">
                     <div class="warp">
-                        <router-view />
+                        <keep-alive>
+                            <router-view />
+                        </keep-alive>
                     </div>
                 </div>
             </div>
@@ -165,7 +167,7 @@ export default {
             }
         }
         .right {
-            .warp{
+            .warp {
                 margin-right: 20px;
             }
         }

src/views/deviceManagement/Ac.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="Ac">
-    <h1>Ac ccccccccccccccccccccc</h1>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Ac'
-}
-</script>
-

src/views/deviceManagement/DeviceInfo.vue

@@ -1,3 +1,4 @@
+
 <template>
     <div>
         <el-row :gutter="20">
@@ -11,7 +12,12 @@
                     class="input-with-select"
                     @keyup.enter.native="doSearch"
                 >
-                    <el-select v-model="searchParams.hardTypeId" class="input-with-select-select" slot="prepend" placeholder="请选择">
+                    <el-select
+                        v-model="searchParams.hardTypeId"
+                        class="input-with-select-select"
+                        slot="prepend"
+                        placeholder="请选择"
+                    >
                         <el-option
                             v-for="(type,key) in typeList"
                             :label="type.name"
@@ -49,7 +55,10 @@
                             v-if="isCamera(scope.row.hardTypeId)"
                         >播放</el-button>
                         <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
-                        <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
+                        <!-- <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button> -->
+                        <el-popconfirm title="是否删除此设备的信息？" @onConfirm="handleDel(scope.row)">
+                            <el-button slot="reference" type="text" size="small">删除</el-button>
+                        </el-popconfirm>
                         <el-button @click="subDeviceAdmin(scope.row)" type="text" size="small">子设备管理</el-button>
                     </template>
                 </el-table-column>
@@ -109,11 +118,6 @@
         <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
             <rtsp-player :rtspData="videoData"></rtsp-player>
         </el-dialog>
-
-        <el-dialog title="子设备管理" :visible.sync="isShowSubDeviceAdmin">
-            <div></div>
-        </el-dialog>
-        <!-- 子设备管理 -->
     </div>
 </template>
 
@@ -149,8 +153,7 @@ export default {
                 title: null,
                 rtsp: null,
                 ws: null
-            },
-            isShowSubDeviceAdmin: false
+            }
         };
     },
     created() {
@@ -197,7 +200,7 @@ export default {
                         this.typeList = res;
                         this.typeTree.push(this.typeList);
                     } else {
-						console.log('222')
+                        console.log("222");
                         if (res.length > 0)
                             this.typeTree.splice(
                                 this.position + 1,
@@ -215,7 +218,7 @@ export default {
                         );
                     }
                 }
-			});
+            });
         },
         isCamera(hid) {
             if (hid === 4 || hid === 5 || hid === 6) return true;
@@ -234,7 +237,7 @@ export default {
         // 编辑
         handleEdit(row) {
             console.log(row);
-            row.meta = JSON.stringify(row.meta)
+            row.meta = JSON.stringify(row.meta);
             if (this.formData.id) {
                 delete this.formData.id;
                 delete this.formData.name;
@@ -244,17 +247,21 @@ export default {
                 delete this.formData.description;
             }
             this.formData = Object.assign({}, this.formData, row);
-            this.isShowDialog = true
+            this.isShowDialog = true;
         },
         // 删除
         handleDel(row) {
             console.log(row);
-            this.isShowVideo = true
+            this.isShowVideo = true;
         },
         // 子设备管理
         subDeviceAdmin(row) {
-            console.log(row)
-            this.isShowSubDeviceAdmin = true
+            console.log(row);
+            // SubDeviceAdmin
+            this.$router.push({
+                name: "subDeviceAdmin",
+                query: row
+            });
         },
         // 编辑的保存按钮
         handleSave() {
@@ -265,7 +272,7 @@ export default {
             let api = isNew
                 ? "/device/device-communication/add"
                 : "/device/device/device-communication/update";
-            this.formData.meta = JSON.parse(this.formData.meta)
+            this.formData.meta = JSON.parse(this.formData.meta);
             this.fetch({
                 api,
                 data: this.formData,
@@ -286,7 +293,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.input-with-select-select{
-	width: 180px;
+.input-with-select-select {
+    width: 180px;
 }
 </style>

src/views/deviceManagement/SubDeviceAdmin.vue

@@ -0,0 +1,135 @@
+
+<template>
+    <!-- 子设备管理页 -->
+    <div class="SubDeviceAdmin">
+        <header id="header">
+            <el-page-header @back="goBack" :content="mainDeviceInfo.name" />
+            <el-button @click="showAddSubDevice=true" type="primary" icon="el-icon-document-add">添加</el-button>
+        </header>
+
+        <el-table :data="subDeviceList" style="width: 100%">
+            <el-table-column prop="id" label="序号"></el-table-column>
+            <el-table-column prop="communicationId" label="通讯序号"></el-table-column>
+            <el-table-column prop="deviceNo" label="型号"></el-table-column>
+            <el-table-column prop="channelNo" label="通道"></el-table-column>
+            <el-table-column label="最后一次">
+                <template slot-scope="scope">
+                    <span>{{ new Date(scope.row.updated).toLocaleDateString() }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="200">
+                <template slot-scope="scope">
+                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                    <!-- <el-button @click="del(scope.row)">删除</el-button> -->
+                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                        <el-button slot="reference" type="text" size="small">删除</el-button>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 添加子设备信息 -->
+        <el-dialog title="添加/编辑子设备信息" :visible.sync="showAddSubDevice">
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="设备型号">
+                    <el-input v-model="form.deviceNo"></el-input>
+                </el-form-item>
+                <el-form-item label="通讯序号">
+                    <el-input v-model="form.communicationId"></el-input>
+                </el-form-item>
+                <el-form-item label="通道">
+                    <el-input v-model="form.channelNo"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="硬件型号">
+                    <el-input v-model="form.hardTypeId"></el-input>
+                </el-form-item> -->
+                <el-form-item label="硬件型号">
+                    <el-select v-model="form.hardTypeId" placeholder="请选择活动区域">
+                        <el-option label="区域一" value="shanghai"></el-option>
+                        <el-option label="区域二" value="beijing"></el-option>
+                    </el-select>
+                </el-form-item>
+                
+                <el-form-item label="设备是否可用">
+                    <el-input v-model="form.enable"></el-input>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button type="primary" @click="addSubDevice">立即创建</el-button>
+                    <el-button>取消</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "SubDeviceAdmin",
+    data() {
+        return {
+            mainDeviceInfo: {},
+            subDeviceList: [], // 子设备信息列表
+            showAddSubDevice: false,
+            form: {
+                deviceNo: "",
+				communicationId: null,
+				channelNo: "",
+				hardTypeId: null,
+				enable: 0
+            }
+        };
+    },
+    created() {
+        this.mainDeviceInfo = this.$route.query;
+        console.log(this.$route.query);
+    },
+    mounted() {
+        // 获取子设备信息列表
+        this.doSubDeviceList();
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        // 获取子设备信息列表
+        doSubDeviceList() {
+            this.fetch({
+                api: "/device/device-slave/list",
+                method: "GET",
+                data: {
+                    communicationId: this.mainDeviceInfo.id
+                },
+                success: res => {
+                    this.subDeviceList = res;
+                }
+            });
+        },
+        // 编辑
+        edit(row) {
+            console.log("编辑", row);
+            this.showAddSubDevice = true;
+        },
+        // 删除
+        del(row) {
+            console.log("删除 未完成", row);
+        },
+        // 保存 添加子设备信息
+        addSubDevice() {
+            console.log("保存 添加子设备信息", this.form);
+        },
+
+        goBack() {
+            this.$router.back();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.SubDeviceAdmin {
+    #header {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>