设备信息完全更新，新的接口新的展示，加部分页面提示的更新

src/router/index.js

@@ -4,7 +4,6 @@ import store from '../store'
 
 import App from '../App.vue'
 import Login from '../views/Login/Login.vue'
-import LoginMiddle from '../views/LoginMiddle/LoginMiddle.vue'
 import Home from '../views/Home/Home.vue'
 
 
@@ -27,11 +26,6 @@ const routes = [
 		component: Login
 	},
 	{
-		path: '/loginMiddle',
-		name: 'loginMiddle',
-		component: LoginMiddle
-	},
-	{
 		path: '/home',
 		component: Home
 	},

src/views/Home/Home.vue

@@ -11,26 +11,26 @@
             </div>
             <div class="right">
                 <span class="warp">
-                    <el-dropdown>
+                    <el-dropdown @command="onLogOut">
                         <span class="el-dropdown-link">
                             账号管理
                             <i class="el-icon-arrow-down el-icon--right"></i>
                         </span>
                         <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item>退出登录</el-dropdown-item>
-                            <el-dropdown-item>切换账号</el-dropdown-item>
+                            <el-dropdown-item value="1">退出登录</el-dropdown-item>
+                            <el-dropdown-item value="2">切换账号</el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
                 </span>
                 <span>
-                    <el-dropdown>
+                    <el-dropdown  @command="onLogOut">
                         <span class="el-dropdown-link">
                             权限切换
                             <i class="el-icon-arrow-down el-icon--right"></i>
                         </span>
                         <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item disabled>权限一</el-dropdown-item>
-                            <el-dropdown-item divided>权限二</el-dropdown-item>
+                            <el-dropdown-item >权限一</el-dropdown-item>
+                            <el-dropdown-item>权限二</el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
                 </span>
@@ -207,6 +207,9 @@ export default {
                     item.type = "info";
                 }
             });
+        },
+        onLogOut() {
+            this.$router.push('login')
         }
     }
 };

src/views/LoginMiddle/LoginMiddle.vue

@@ -1,53 +0,0 @@
-<template>
-    <div class="LoginMiddle">
-        <article class="article">
-            <el-select v-model="optionValue" placeholder="请选择活动区域">
-                <el-option label="选项一" value="1"></el-option>
-                <el-option label="选项二" value="2"></el-option>
-                <el-option label="选项三" value="3"></el-option>
-                <el-option label="选项四" value="4"></el-option>
-            </el-select>
-            <el-button type="primary" @click="OnConfirm">确定</el-button>
-        </article>
-    </div>
-</template>
-<script>
-export default {
-    name: "LoginMiddle",
-    data() {
-        return {
-            optionValue: '1'
-        }
-    },
-    methods: {
-        OnConfirm() {
-            console.log(this.optionValue)
-            this.$router.push({
-                path: "/home"
-            });
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.LoginMiddle {
-    width: 100%;
-    height: 100vh;
-    background-color: rgba($color: #000000, $alpha: 0.6);
-    display: flex;
-    justify-content: center;
-    .article {
-        width: 400px;
-        height: 150px;
-        padding: 20px 0;
-        background-color: #fff;
-        border-radius: 20px;
-        margin-top: 10%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-        align-items: center;
-    }
-}
-</style>

src/views/areaManagement/AreaInfo.vue

@@ -41,7 +41,7 @@
                                 v-model="form.meta"
                                 type="textarea"
                                 placeholder="请输入内容,JSON格式"
-                                autosize
+                                :autosize="{ minRows: 4 }"
                             ></el-input>
                         </el-form-item>
                         <el-form-item :label="title.code" prop="code">
@@ -96,7 +96,7 @@ export default {
     },
     created() {
         // 获取区域管理 树
-        this.getTreeByCode("AreaInfo");
+        this.getTreeByCode("area-info");
     },
     methods: {
         ...mapActions(["fetch"]),
@@ -139,8 +139,6 @@ export default {
                 },
                 fail: err => {
                     console.log(err);
-                    this.$message.error("请重新登录");
-
                     if (err.errCode == "request_not_authorize") {
                         this.$message({
                             message: "请重新登录",
@@ -159,8 +157,7 @@ export default {
                 data: this.form,
                 success: res => {
                     this.getSubNodeList(this.id);
-                    this.$message.success("编辑节点成功！");
-                    // this.showDialog = false;
+                    this.$message.success(this.title.title+"成功！");
                 },
                 fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);

src/views/common/rtsp-player/index.vue

@@ -105,7 +105,7 @@ export default {
             this.player.connect();
         },
         close() {
-            player.close();
+            this.player.close();
         }
     }
 };

src/views/deviceManagement/CameraManagement.vue

@@ -24,7 +24,7 @@
             <el-table :data="deviceList">
                 <el-table-column prop="id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="name" label="名称"></el-table-column>
-                <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
+                <el-table-column prop="deviceNo" label="设备序列号"></el-table-column>
                 <el-table-column prop="status" label="摄像头状态"></el-table-column>
                 <el-table-column prop="description" label="描述"></el-table-column>
                 <el-table-column label="最后一次">
@@ -55,7 +55,7 @@
                     <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
 
-                <el-form-item label="设备类型：">
+                <el-form-item label="摄像头类型：">
                     <el-cascader
                         :options="cameraInfoTree"
                         :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
@@ -133,8 +133,8 @@
             </div>
         </el-dialog>
         <!-- 摄像头播放 -->
-        <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
-            <rtsp-player :rtspData="videoData"></rtsp-player>
+        <el-dialog :title="videoData.title" @close="handleStop" :visible.sync="isShowVideo">
+            <rtsp-player ref="rtspPlayer" :rtspData="videoData"></rtsp-player>
         </el-dialog>
     </div>
 </template>
@@ -208,8 +208,6 @@ export default {
                 },
                 fail: err => {
                     console.log(err);
-                    this.$message.error("请重新登录");
-
                     if (err.errCode == "request_not_authorize") {
                         this.$message({
                             message: "请重新登录",
@@ -317,18 +315,28 @@ export default {
             this.isShowDialog = true;
         },
         isCamera(hid) {
-            if (hid === 4 || hid === 5 || hid === 6) return true;
-            else return false;
+            return true;
         },
         // 播放
         handlePlay(row) {
             console.log(row);
-            this.videoData = {
-                rtsp: row.meta.rtsp,
-                ws: row.meta.ws,
-                title: row.name
-            };
-            this.isShowVideo = true;
+            if (row.meta.channel && row.meta.channel.length > 0) {
+                let channals = JSON.parse(row.meta.channel);
+                let rtsp = channals[0].rtsp;
+                let ws = channals[0].ws;
+                console.log("rtsp==>>  " + rtsp);
+                console.log("ws==>>  " + ws);
+                this.videoData = {
+                    rtsp,
+                    ws,
+                    title: row.name
+                };
+                this.isShowVideo = true;
+            } else this.$message.info("配置信息不正确");
+        },
+        handleStop(done) {
+            console.log(this.$refs.rtspPlayer)
+            // if (this.$refs.rtspPlayer) this.$refs.rtspPlayer.close();
         },
         // 编辑
         edit(row) {
@@ -355,7 +363,7 @@ export default {
             this.meta.splice(this.meta.length - 1, 1);
         },
         show() {
-            this.deviceList.forEach
+            this.deviceList.forEach;
         }
         // 传入一个id 生成树（ cameraInfoTree ）的id数组  "732971850158313472"  "732997784550772736"
         /* createArr(id) {

src/views/deviceManagement/DeviceInfo.vue

@@ -5,43 +5,32 @@
             <el-col :span="2">
                 <span style="line-height:32px;">工具栏:</span>
             </el-col>
-            <el-col :span="12">
-                <el-input
-                    placeholder="请输入内容"
-                    v-model="searchParams.keywords"
-                    class="input-with-select"
-                    @keyup.enter.native="doSearch"
+            <el-col :span="4">
+                <el-cascader
+                    :options="deviceTypeTree"
+                    :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
+                    v-model="formData.categoryId"
+                    @change="cascaderChange"
+                    clearable
+                    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"
-                            :value="type.id"
-                            :key="key"
-                        ></el-option>
-                    </el-select>
-                    <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
-                </el-input>
+                    <template slot-scope="{ node, data }">
+                        <span>{{ data.nodeName }}</span>
+                        <!-- <span v-if="!node.isLeaf">({{ data.childs.length }})</span> -->
+                    </template>
+                </el-cascader>
             </el-col>
             <el-col :span="8">
-                <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
+                <el-button @click="add" type="primary" icon="el-icon-document-add">新增</el-button>
             </el-col>
         </el-row>
-        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
         <el-row>
-            <el-table :data="deviceList">
+            <el-table :data="deviceList" empty-text="请在上面选择要查看的类型">
                 <el-table-column prop="id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="name" label="名称"></el-table-column>
-                <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
-                <el-table-column prop="sVer" label="软件版本"></el-table-column>
-                <el-table-column prop="hVer" label="硬件版本"></el-table-column>
-                <el-table-column prop="meta.period" label="数据频率"></el-table-column>
-                <el-table-column prop="status" label="在线状态"></el-table-column>
+                <el-table-column prop="deviceNo" label="设备序列号"></el-table-column>
+                <el-table-column prop="status" label="设备状态"></el-table-column>
                 <el-table-column prop="description" label="描述"></el-table-column>
                 <el-table-column label="最后一次">
                     <template slot-scope="scope">
@@ -50,62 +39,49 @@
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="200">
                     <template slot-scope="scope">
-                        <el-button
-                            @click="handlePlay(scope.row)"
-                            type="text"
-                            v-if="isCamera(scope.row.hardTypeId)"
-                        >播放</el-button>
                         <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                         <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(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>
             </el-table>
         </el-row>
 
         <!-- 设备信息新建、编辑 -->
-        <el-dialog :title="isAdd?'新建设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
-            <el-form :model="formData" label-width="100px">
-                <el-form-item label="名称：">
+        <el-dialog :title="isAdd?'新增设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" ref="cameraForm" :rules="rules" label-width="120px">
+                <el-form-item label="名称：" prop="name">
                     <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
-                <el-form-item label="设备类型：">
-                    <el-select
-                        v-for="(arrItem,key) in typeTree"
-                        :key="key"
-                        v-model="selectArr[key]"
-                        filterable
-                        placeholder="请选择"
-                        value-key="id"
-                        @change="selectedEvt"
-                        @focus="position=key"
-                    >
-                        <el-option
-                            v-for="item in arrItem"
-                            :key="item.id"
-                            :value="item.id"
-                            :label="item.name"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="MAC/SN：">
-                    <el-input v-model="formData.deviceNo" placeholder="MAC或者SN"></el-input>
+
+                <el-form-item label="设备序列号：" prop="deviceNo">
+                    <el-input v-model="formData.deviceNo" placeholder="设备序列号"></el-input>
                 </el-form-item>
+
                 <el-form-item label="配置信息：">
                     <el-input
-                        type="textarea"
-                        autosize
-                        :rows="2"
                         v-model="formData.meta"
-                        placeholder="先用json做配置，后期可不同类型不同编辑框"
+                        placeholder="请输入JSON格式的配置信息"
+                        type="textarea"
+                        :rows="3"
+                        :autosize="{ minRows: 4 }"
                     ></el-input>
                 </el-form-item>
+
+                <el-form-item label="状态：">
+                    <el-select v-model="formData.status" placeholder="请选择">
+                        <el-option label="链接中" :value="0"></el-option>
+                        <el-option label="链接中" :value="1"></el-option>
+                        <el-option label="链接中" :value="2"></el-option>
+                        <el-option label="链接中" :value="3"></el-option>
+                    </el-select>
+                </el-form-item>
+
                 <el-form-item label="描述：">
                     <el-input
                         type="textarea"
-                        :rows="4"
+                        :rows="2"
                         v-model="formData.description"
                         placeholder="输入描述"
                     ></el-input>
@@ -113,199 +89,144 @@
             </el-form>
             <div slot="footer">
                 <el-button @click="isShowDialog=false">取 消</el-button>
-                <el-button type="primary" @click="save">保 存</el-button>
+                <el-button type="primary" @click="submitForm('cameraForm')">保 存</el-button>
             </div>
         </el-dialog>
-        <!-- 摄像头播放 -->
-        <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
-            <rtsp-player :rtspData="videoData"></rtsp-player>
-        </el-dialog>
     </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
-import rtspPlayer from "../common/rtsp-player/index";
+
+// 表单验证规则
+const rules = {
+    name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
+    deviceNo: [{ required: true, message: "请输入设备序列号", trigger: "blur" }]
+};
+
+const formDataInit = {
+    name: "",
+    categoryId: null,
+    deviceNo: "",
+    meta: "",
+    status: "",
+    description: ""
+};
 
 export default {
     name: "DeviceInfo",
-    components: { rtspPlayer },
     data() {
         return {
-            typeList: [],
-            typeTree: [],
+            id: "",
+            deviceTypeTree: [],
             deviceList: [],
-            position: null,
-            selectArr: [],
             isShowDialog: false,
-            searchParams: {
-                hardTypeId: null,
-                keywords: ""
-            },
-            formData: {
-                name: "",
-                hardTypeId: null,
-                deviceNo: "",
-                description: "",
-                meta: ""
-            },
-            isShowVideo: false,
-            videoData: {
-                title: null,
-                rtsp: null,
-                ws: null
-            },
-            isAdd: true
+            formData: formDataInit,
+            configItems: 2, // 配置项的通道配置项数
+            isAdd: true,
+            rules
         };
     },
     created() {
-        this.loadTypeList();
-        this.doSearch();
+        // 获取设备信息 树
+        this.getTreeByCode("device-type");
     },
     methods: {
         ...mapActions(["fetch"]),
-        doSearch() {
-            if (this.searchParams.hardTypeId < 0) {
-                this.$message.info("请先选择分类");
-                return;
-            }
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    this.save();
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 通过code获取树
+        getTreeByCode(code) {
             this.fetch({
-                api: "/device/device-communication/list",
-                method: "GET",
-                data: {
-                    orgId: 1,
-                    hardTypeId: this.searchParams.hardTypeId,
-                    keywords: this.searchParams.keywords
-                }, //目前只有一个组织,其他参数调整钟
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    this.deviceList = res;
+                    this.id = res.id;
+                    // this.getDeviceList(res.id);
+
+                    this.getDeviceTree(res.id);
                 },
                 fail: err => {
-                    console.log("555");
+                    console.log(err);
                     if (err.errCode == "request_not_authorize") {
                         this.$message({
                             message: "请重新登录",
                             type: "warning"
                         });
                     }
-                    console.log(err);
                 }
             });
         },
-        // 设备信息新建、编辑里的 选择设备类型
-        selectedEvt(item) {
-            //获取下一级列表
-            this.loadTypeList(item);
-        },
-        add() {
-            this.isAdd = true
-            this.formData = {
-                orgId: 1,
-                name: "",
-                hardTypeId: null,
-                deviceNo: "",
-                description: "",
-                meta: ""
-            }
-            if (this.formData.id) delete this.formData.id;
-            this.isShowDialog = true;
-        },
-        loadTypeList(pid = -1) {
+        // 获取设备列表
+        getDeviceList(categoryId) {
             this.fetch({
-                api: "/device/device-type/list-parent",
-                method: "GET",
-                data: { parentId: pid }, // 动态加载
+                api: "/device/device/list",
+                method: "POST",
+                data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
                 success: res => {
-                    if (pid < 0) {
-                        this.typeList = res;
-                        this.typeTree.push(this.typeList);
-                    } else {
-                        console.log("222");
-                        if (res.length > 0)
-                            this.typeTree.splice(
-                                this.position + 1,
-                                this.typeTree.length,
-                                res
-                            );
-                        else
-                            this.typeTree.splice(
-                                this.position + 1,
-                                this.typeTree.length
-                            );
-                        this.selectArr.splice(
-                            this.position + 1,
-                            this.selectArr.length
-                        );
+                    this.deviceList = res;
+                },
+                fail: err => {
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
                     }
+                    console.log(err);
                 }
             });
         },
-        isCamera(hid) {
-            if (hid === 4 || hid === 5 || hid === 6) return true;
-            else return false;
-        },
-        // 播放
-        handlePlay(row) {
-            console.log(row);
-            this.videoData = {
-                rtsp: row.meta.rtsp,
-                ws: row.meta.ws,
-                title: row.name
-            };
-            this.isShowVideo = true;
-        },
-        // 编辑
-        edit(row) {
-            console.log(row);
-            this.isAdd = false
-            // 判断是为了重复点击不会重复格式化
-            if(typeof row.meta == "object"){
-                row.meta = JSON.stringify(row.meta, null, 4);
-            }
-                // orgId: 1,
-                // name: "",
-                // hardTypeId: null,
-                // deviceNo: "",
-                // description: "",
-                // meta: ""
-            
-            if (this.formData.id) {
-                delete this.formData.id;
-                delete this.formData.name;
-                delete this.formData.hardTypeId;
-                delete this.formData.deviceNo;
-                delete this.formData.meta;
-                delete this.formData.description;
-            }
-            this.formData = Object.assign({}, this.formData, row);
-            this.isShowDialog = true;
-        },
-        // 删除
-        del(row) {
-            console.log(row);
-        },
-        // 子设备管理
-        subDeviceAdmin(row) {
-            this.$router.push({
-                path: "/subDeviceAdmin",
-                query: row
+
+        // 请求 拿到摄像头列表
+        getDeviceTree(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.deviceTypeTree = res;
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
             });
         },
         // 编辑的保存按钮
         save() {
-            this.formData.hardTypeId = this.selectArr[
-                this.selectArr.length - 1
-            ];
+            if (this.formData.meta instanceof Object) {
+                this.formData.meta = JSON.stringify(this.formData.meta);
+            }
+            let categoryId = this.formData.categoryId;
+            if (categoryId instanceof Array && categoryId.length >= 0) {
+                this.formData.categoryId = categoryId[categoryId.length - 1];
+            }
             let api = this.isAdd
-                ? "/device/device-communication/add"
-                : "/device/device/device-communication/update";
-            this.formData.meta = JSON.parse(this.formData.meta);
+                ? "/device/device/add"
+                : "/device/device/update";
             this.fetch({
                 api,
                 data: this.formData,
                 success: res => {
-                    console.log(res);
-                    this.doSearch(); //重新加载
+                    this.getDeviceList(this.id); //重新加载
+                    // this.isShowDialog = false;
+                    this.$message.success(
+                        this.isAdd
+                            ? "添加摄像头数据成功！"
+                            : "修改摄像头数据成功！"
+                    );
                     this.isShowDialog = false;
                 },
                 fail: err => {
@@ -314,15 +235,62 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
+        },
+        // 请求删除
+        reqDelete(id) {
+            this.fetch({
+                api: "/device/delete",
+                data: { id },
+                success: res => {
+                    let temp = this.formData.categoryId;
+                    this.getDeviceList(temp[temp.length - 1]); //重新加载
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        add() {
+            // 没选中设备类型 就 return
+            if (!this.formData.categoryId) {
+                this.$message.warning("请选择要为某个类型添加设备！");
+                return;
+            }
+            this.isAdd = true;
+            if (this.formData.id) delete this.formData.id;
+            this.isShowDialog = true;
+        },
+        // 级联选择器选中 时
+        cascaderChange(value) {
+            console.log(value);
+            this.getDeviceList(value[value.length - 1]);
+        },
+
+        // 编辑
+        edit(row) {
+            this.isAdd = false;
+            this.isShowDialog = true;
+            this.formData = row;
+            if (this.formData.meta instanceof Object) {
+                this.formData.meta = JSON.stringify(row.meta);
+            }
+        },
+        // 删除
+        del(row) {
+            this.reqDelete(row.id);
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-
-
-.input-with-select-select {
-    width: 180px;
+.DeviceInfo {
+    .dialog {
+        .item_row {
+            display: flex;
+        }
+    }
 }
 </style>

src/views/deviceManagement/DeviceType.vue

@@ -41,7 +41,7 @@
                                 v-model="form.meta"
                                 type="textarea"
                                 placeholder="请输入内容,JSON格式"
-                                autosize
+                                :autosize="{ minRows: 4 }"
                             ></el-input>
                         </el-form-item>
                         <el-form-item :label="title.code" prop="code">
@@ -69,6 +69,12 @@ const rules = {
 };
 // tree组件 配置
 const defaultProps = { children: "childs", label: "nodeName" };
+const formDataInit = {
+                nodeName: "",
+                meta: "",
+                code: ""
+            }
+
 export default {
     name: "DeviceType",
     data() {
@@ -78,11 +84,7 @@ export default {
             dataTree: [],
             defaultProps,
             showDialog: false,
-            form: {
-                nodeName: "",
-                meta: "",
-                code: ""
-            },
+            form: formDataInit,
             /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 6:添加目录} */
             dialogStatus: null,
             addOrEditThis: {}, // 保存被点击的 this
@@ -96,7 +98,7 @@ export default {
     },
     created() {
         // 获取区域管理 树
-        this.getTreeByCode("DeviceType");
+        this.getTreeByCode("device-type");
     },
     methods: {
         ...mapActions(["fetch"]),
@@ -139,8 +141,6 @@ export default {
                 },
                 fail: err => {
                     console.log(err);
-                    this.$message.error("请重新登录");
-
                     if (err.errCode == "request_not_authorize") {
                         this.$message({
                             message: "请重新登录",

src/views/messageManagement/MessageServicMer.vue

@@ -38,7 +38,7 @@
                                 v-model="dyForm.info"
                                 type="textarea"
                                 placeholder="请输入内容,JSON格式"
-                                autosize
+                                :autosize="{ minRows: 4 }"
                             ></el-input>
                         </el-form-item>
                         <el-form-item label="发送方式">

src/views/template/Aa.vue

@@ -25,7 +25,7 @@
             </el-table-column>
         </el-table>
 
-        <el-dialog :title="isAdd?'添加消息点':'编辑消息点'" :visible.sync="showDialog">
+        <el-dialog :title="isAdd?'添加消息点':'编辑消息点'" @close="dialogClose" :visible.sync="showDialog">
             <el-row type="flex">
                 <el-col :span="14">
                     <el-form ref="dyForm" :model="dyForm" :rules="rules" label-width="140px">
@@ -184,6 +184,10 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
+        },
+        dialogClose(done) {
+            console.log("ccccccc")
+            console.log(done)
         }
     }
 };

src/views/template/Ac.vue

@@ -1,325 +1,312 @@
-<template>
-    <div class="MessageBind">
-        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
-        <el-table :data="tableData" border>
-            <el-table-column prop="id" label="序号" width="120"></el-table-column>
-
-            <el-table-column label="发送方式" width="100">
-                <template slot-scope="scope">
-                    <span v-for="item in sendMethodList" :key="item.code">
-                        <el-tag
-                            size="small"
-                            type="warning"
-                            v-if="scope.row.methodCode == item.code"
-                        >{{item.description}}</el-tag>
-                    </span>
-                </template>
-            </el-table-column>
-
-            <el-table-column label="消息点">
-                <template slot-scope="scope">
-                    <span v-for="item in messagePointList" :key="item.code">
-                        <el-tag
-                            size="small"
-                            type="info"
-                            v-if="scope.row.pointCode == item.code"
-                        >{{item.description}}</el-tag>
-                    </span>
-                </template>
-            </el-table-column>
-
-            <el-table-column label="模板">
-                <template slot-scope="scope">
-                    <span v-for="item in messageTemplateList" :key="item.code">
-                        <el-tag
-                            size="small"
-                            type="info"
-                            v-if="scope.row.templateCode == item.code"
-                        >{{item.description}}</el-tag>
-                    </span>
-                </template>
-            </el-table-column>
-
-            <el-table-column label="服务商">
-                <template slot-scope="scope">
-                    <span v-for="item in messageServicMerList" :key="item.code">
-                        <el-tag
-                            size="small"
-                            type="success"
-                            v-if="scope.row.providerId == item.id"
-                        >{{item.name}}</el-tag>
-                    </span>
-                </template>
-            </el-table-column>
-
-            <el-table-column fixed="right" label="操作" width="150">
-                <template slot-scope="scope">
-                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</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="isAdd?'新增消息绑定':'编辑消息绑定'" :visible.sync="showDialog">
-            <el-row type="flex">
-                <el-col :span="14">
-                    <el-form ref="dyForm" :model="dyForm" label-width="140px">
-                        <!-- <el-form-item label="消息点编码:" prop="point">
-                            <el-input v-model="dyForm.code"></el-input>
-                        </el-form-item>-->
-
-                        <el-form-item label="发送方式">
-                            <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
-                                <el-option
-                                    v-for="item in sendMethodList"
-                                    :label="item.description"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
-
-                        <el-form-item label="消息点">
-                            <el-select v-model="dyForm.pointCode" placeholder="请选择发送方式">
-                                <el-option
-                                    v-for="item in messagePointList"
-                                    :label="item.description"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
-
-                        <el-form-item label="模板">
-                            <el-select v-model="dyForm.templateCode" placeholder="请选择发送方式">
-                                <el-option
-                                    v-for="item in messageTemplateList"
-                                    :label="item.description+'(' + comparisonTable[item.methodCode]+')'"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
 
-                        <el-form-item label="服务商">
-                            <el-select v-model="dyForm.providerId" placeholder="请选择发送方式">
-                                <el-option
-                                    v-for="item in messageServicMerList"
-                                    :label="item.name+'(' + comparisonTable[item.methodCode]+')'"
-                                    :value="item.id"
-                                    :key="item.id"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
+<template>
+    <div class="DeviceInfo">
+        <el-row :gutter="20">
+            <el-col :span="2">
+                <span style="line-height:32px;">工具栏:</span>
+            </el-col>
+            <el-col :span="12">
+                <el-input
+                    placeholder="请输入内容"
+                    v-model="searchParams.keywords"
+                    class="input-with-select"
+                    @keyup.enter.native="doSearch"
+                >
+                    <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"
+                            :value="type.id"
+                            :key="key"
+                        ></el-option>
+                    </el-select>
+                    <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
+                </el-input>
+            </el-col>
+            <el-col :span="8">
+                <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
+            </el-col>
+        </el-row>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
+        <el-row>
+            <el-table :data="deviceList">
+                <el-table-column prop="id" label="序号" width="120px"></el-table-column>
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
+                <el-table-column prop="sVer" label="软件版本"></el-table-column>
+                <el-table-column prop="hVer" label="硬件版本"></el-table-column>
+                <el-table-column prop="meta.period" label="数据频率"></el-table-column>
+                <el-table-column prop="status" label="在线状态"></el-table-column>
+                <el-table-column prop="description" 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="handlePlay(scope.row)"
+                            type="text"
+                            v-if="isCamera(scope.row.hardTypeId)"
+                        >播放</el-button>
+                        <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                        <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(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>
+            </el-table>
+        </el-row>
 
-                        <el-form-item>
-                            <el-button @click="showDialog=false">取 消</el-button>
-                            <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
+        <!-- 设备信息新建、编辑 -->
+        <el-dialog :title="isAdd?'新建设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="名称：">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="设备类型：">
+                    <el-select
+                        v-for="(arrItem,key) in typeTree"
+                        :key="key"
+                        v-model="selectArr[key]"
+                        filterable
+                        placeholder="请选择"
+                        value-key="id"
+                        @change="selectedEvt"
+                        @focus="position=key"
+                    >
+                        <el-option
+                            v-for="item in arrItem"
+                            :key="item.id"
+                            :value="item.id"
+                            :label="item.name"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="MAC/SN：">
+                    <el-input v-model="formData.deviceNo" placeholder="MAC或者SN"></el-input>
+                </el-form-item>
+                <el-form-item label="配置信息：">
+                    <el-input
+                        type="textarea"
+                        autosize
+                        :rows="2"
+                        v-model="formData.meta"
+                        placeholder="先用json做配置，后期可不同类型不同编辑框"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="描述：">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.description"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="save">保 存</el-button>
+            </div>
+        </el-dialog>
+        <!-- 摄像头播放 -->
+        <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
+            <rtsp-player :rtspData="videoData"></rtsp-player>
         </el-dialog>
     </div>
 </template>
+
 <script>
 import { mapActions } from "vuex";
-const rules = {
-    // code: [{ required: true, message: "请输入消息模板编码", trigger: "blur" }],
-    // description: [
-    //     { required: true, message: "请输入消息点描述", trigger: "blur" }
-    // ]
-};
+import rtspPlayer from "../common/rtsp-player/index";
 
 export default {
-    name: "MessageBind",
+    name: "DeviceInfo",
+    components: { rtspPlayer },
     data() {
         return {
-            tableData: [],
-            showDialog: false,
-            dyForm: {
-                methodCode: null,
-                pointCode: null,
-                templateCode: null,
-                providerId: null
+            typeList: [],
+            typeTree: [],
+            deviceList: [],
+            position: null,
+            selectArr: [],
+            isShowDialog: false,
+            searchParams: {
+                hardTypeId: null,
+                keywords: ""
+            },
+            formData: {
+                name: "",
+                hardTypeId: null,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            },
+            isShowVideo: false,
+            videoData: {
+                title: null,
+                rtsp: null,
+                ws: null
             },
-            sendMethodList: [],
-            messagePointList: [],
-            messageTemplateList: [],
-            messageServicMerList: [],
-            // 发送方式的 code 与 name对照表
-            comparisonTable: {},
-            rules,
             isAdd: true
         };
     },
-    mounted() {
-        // 获取消息绑定 列表
-        this.getMessageBind();
-        // 获取发送方式 列表
-        this.getSendMethodList();
-        // 获取消息点 列表
-        this.getMessagePoint();
-        // 获取消息模板 列表
-        this.getMessageTemplate();
-        // 获取服务商 列表
-        this.getMessageServicMer();
+    created() {
+        this.loadTypeList();
+        this.doSearch();
     },
-    
     methods: {
         ...mapActions(["fetch"]),
-        // 获取消息绑定 列表
-        getMessageBind() {
+        doSearch() {
+            if (this.searchParams.hardTypeId < 0) {
+                this.$message.info("请先选择分类");
+                return;
+            }
             this.fetch({
-                api: "/message/bind/list",
+                api: "/device/device-communication/list",
                 method: "GET",
-                data: {},
+                data: {
+                    orgId: 1,
+                    hardTypeId: this.searchParams.hardTypeId,
+                    keywords: this.searchParams.keywords
+                }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    this.tableData = res;
-                    
+                    this.deviceList = res;
                 },
                 fail: err => {
+                    console.log("555");
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
                     console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
                 }
             });
         },
-
-        // 获取发送方式 列表
-        getSendMethodList() {
-            this.fetch({
-                api: "/message/method/list",
-                method: "GET",
-                data: {},
-                success: res => {
-                    this.sendMethodList = res;
-                    this.dyForm.methodCode = res[0].code;
-
-                    let comparisonTable = {}
-                    res.forEach(item => {
-                        comparisonTable[item.code] = item.description
-                    });
-                    this.comparisonTable = comparisonTable;
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
+        // 设备信息新建、编辑里的 选择设备类型
+        selectedEvt(item) {
+            //获取下一级列表
+            this.loadTypeList(item);
         },
-        // 获取消息点 列表
-        getMessagePoint() {
-            this.fetch({
-                api: "/message/point/list",
-                method: "GET",
-                data: {},
-                success: res => {
-                    console.log(res);
-                    this.messagePointList = res;
-                    this.dyForm.pointCode = res[0].code;
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
+        add() {
+            this.isAdd = true
+            this.formData = {
+                orgId: 1,
+                name: "",
+                hardTypeId: null,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            }
+            if (this.formData.id) delete this.formData.id;
+            this.isShowDialog = true;
         },
-        // 获取消息模板 列表
-        getMessageTemplate() {
+        loadTypeList(pid = -1) {
             this.fetch({
-                api: "/message/template/list",
+                api: "/device/device-type/list-parent",
                 method: "GET",
-                data: {},
+                data: { parentId: pid }, // 动态加载
                 success: res => {
-                    this.messageTemplateList = res;
-                    this.dyForm.templateCode = res[0].code;
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
+                    if (pid < 0) {
+                        this.typeList = res;
+                        this.typeTree.push(this.typeList);
+                    } else {
+                        console.log("222");
+                        if (res.length > 0)
+                            this.typeTree.splice(
+                                this.position + 1,
+                                this.typeTree.length,
+                                res
+                            );
+                        else
+                            this.typeTree.splice(
+                                this.position + 1,
+                                this.typeTree.length
+                            );
+                        this.selectArr.splice(
+                            this.position + 1,
+                            this.selectArr.length
+                        );
+                    }
                 }
             });
         },
-        // 获取服务商 列表
-        getMessageServicMer() {
-            this.fetch({
-                api: "/message/provider/list",
-                method: "GET",
-                data: {},
-                success: res => {
-                    console.log(res);
-                    this.messageServicMerList = res;
-                    this.dyForm.providerId = res[0].name;
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
+        isCamera(hid) {
+            if (hid === 4 || hid === 5 || hid === 6) return true;
+            else return false;
         },
-        add() {
-            this.isAdd = true;
-            this.showDialog = true;
-            // this.dyForm = {
-            //     methodCode: this.sendMethodList[0].code,
-            //     pointCode: this.messagePointList[0].code,
-            //     templateCode: this.messageTemplateList[0].code,
-            //     providerId: this.messageServicMerList[0].id,
-            // };
+        // 播放
+        handlePlay(row) {
+            console.log(row);
+            this.videoData = {
+                rtsp: row.meta.rtsp,
+                ws: row.meta.ws,
+                title: row.name
+            };
+            this.isShowVideo = true;
         },
+        // 编辑
         edit(row) {
             console.log(row);
-            this.isAdd = false;
-            this.showDialog = true;
-            this.dyForm = row;
+            this.isAdd = false
+            // 判断是为了重复点击不会重复格式化
+            if(typeof row.meta == "object"){
+                row.meta = JSON.stringify(row.meta, null, 4);
+            }
+                // orgId: 1,
+                // name: "",
+                // hardTypeId: null,
+                // deviceNo: "",
+                // description: "",
+                // meta: ""
+            
+            if (this.formData.id) {
+                delete this.formData.id;
+                delete this.formData.name;
+                delete this.formData.hardTypeId;
+                delete this.formData.deviceNo;
+                delete this.formData.meta;
+                delete this.formData.description;
+            }
+            this.formData = Object.assign({}, this.formData, row);
+            this.isShowDialog = true;
         },
+        // 删除
         del(row) {
-            this.fetch({
-                api: "/message/bind/delete",
-                method: "POST",
-                data: { id: row.id },
-                success: res => {
-                    console.log(res);
-                    this.getMessageBind();
-                    this.$message, success("删除成功！");
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
+            console.log(row);
         },
-        submitForm(formName) {
-            this.$refs[formName].validate(valid => {
-                if (valid) {
-                    console.log(this.dyForm);
-                    this.isAdd
-                        ? this.reqSave("/message/bind/add")
-                        : this.reqSave("/message/bind/update");
-                } else {
-                    return false;
-                }
+        // 子设备管理
+        subDeviceAdmin(row) {
+            this.$router.push({
+                path: "/subDeviceAdmin",
+                query: row
             });
         },
-        // 请求 保存 （添加 和 更新）
-        reqSave(api) {
+        // 编辑的保存按钮
+        save() {
+            this.formData.hardTypeId = this.selectArr[
+                this.selectArr.length - 1
+            ];
+            let api = this.isAdd
+                ? "/device/device-communication/add"
+                : "/device/device/device-communication/update";
+            this.formData.meta = JSON.parse(this.formData.meta);
             this.fetch({
                 api,
-                method: "POST",
-                data: this.dyForm,
+                data: this.formData,
                 success: res => {
                     console.log(res);
-                    this.getMessageBind();
-                    this.$message.success("添加消息模板成功！");
-                    this.showDialog = false;
+                    this.doSearch(); //重新加载
+                    this.isShowDialog = false;
                 },
                 fail: err => {
                     console.log(err);
@@ -327,13 +314,15 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
-        },
-        // 
-        findSendMethodName(methodCode) {
-           
         }
     }
 };
-
 </script>
 
+<style lang="scss" scoped>
+
+
+.input-with-select-select {
+    width: 180px;
+}
+</style>

src/views/template/DeviceInfo老.vue

@@ -0,0 +1,328 @@
+
+<template>
+    <div class="DeviceInfo">
+        <el-row :gutter="20">
+            <el-col :span="2">
+                <span style="line-height:32px;">工具栏:</span>
+            </el-col>
+            <el-col :span="12">
+                <el-input
+                    placeholder="请输入内容"
+                    v-model="searchParams.keywords"
+                    class="input-with-select"
+                    @keyup.enter.native="doSearch"
+                >
+                    <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"
+                            :value="type.id"
+                            :key="key"
+                        ></el-option>
+                    </el-select>
+                    <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
+                </el-input>
+            </el-col>
+            <el-col :span="8">
+                <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
+            </el-col>
+        </el-row>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
+        <el-row>
+            <el-table :data="deviceList">
+                <el-table-column prop="id" label="序号" width="120px"></el-table-column>
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
+                <el-table-column prop="sVer" label="软件版本"></el-table-column>
+                <el-table-column prop="hVer" label="硬件版本"></el-table-column>
+                <el-table-column prop="meta.period" label="数据频率"></el-table-column>
+                <el-table-column prop="status" label="在线状态"></el-table-column>
+                <el-table-column prop="description" 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="handlePlay(scope.row)"
+                            type="text"
+                            v-if="isCamera(scope.row.hardTypeId)"
+                        >播放</el-button>
+                        <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                        <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(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>
+            </el-table>
+        </el-row>
+
+        <!-- 设备信息新建、编辑 -->
+        <el-dialog :title="isAdd?'新建设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="名称：">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="设备类型：">
+                    <el-select
+                        v-for="(arrItem,key) in typeTree"
+                        :key="key"
+                        v-model="selectArr[key]"
+                        filterable
+                        placeholder="请选择"
+                        value-key="id"
+                        @change="selectedEvt"
+                        @focus="position=key"
+                    >
+                        <el-option
+                            v-for="item in arrItem"
+                            :key="item.id"
+                            :value="item.id"
+                            :label="item.name"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="MAC/SN：">
+                    <el-input v-model="formData.deviceNo" placeholder="MAC或者SN"></el-input>
+                </el-form-item>
+                <el-form-item label="配置信息：">
+                    <el-input
+                        type="textarea"
+                        autosize
+                        :rows="2"
+                        v-model="formData.meta"
+                        placeholder="先用json做配置，后期可不同类型不同编辑框"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="描述：">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.description"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="save">保 存</el-button>
+            </div>
+        </el-dialog>
+        <!-- 摄像头播放 -->
+        <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
+            <rtsp-player :rtspData="videoData"></rtsp-player>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import rtspPlayer from "../common/rtsp-player/index";
+
+export default {
+    name: "DeviceInfo",
+    components: { rtspPlayer },
+    data() {
+        return {
+            typeList: [],
+            typeTree: [],
+            deviceList: [],
+            position: null,
+            selectArr: [],
+            isShowDialog: false,
+            searchParams: {
+                hardTypeId: null,
+                keywords: ""
+            },
+            formData: {
+                name: "",
+                hardTypeId: null,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            },
+            isShowVideo: false,
+            videoData: {
+                title: null,
+                rtsp: null,
+                ws: null
+            },
+            isAdd: true
+        };
+    },
+    created() {
+        this.loadTypeList();
+        this.doSearch();
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        doSearch() {
+            if (this.searchParams.hardTypeId < 0) {
+                this.$message.info("请先选择分类");
+                return;
+            }
+            this.fetch({
+                api: "/device/device-communication/list",
+                method: "GET",
+                data: {
+                    orgId: 1,
+                    hardTypeId: this.searchParams.hardTypeId,
+                    keywords: this.searchParams.keywords
+                }, //目前只有一个组织,其他参数调整钟
+                success: res => {
+                    this.deviceList = res;
+                },
+                fail: err => {
+                    console.log("555");
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                    console.log(err);
+                }
+            });
+        },
+        // 设备信息新建、编辑里的 选择设备类型
+        selectedEvt(item) {
+            //获取下一级列表
+            this.loadTypeList(item);
+        },
+        add() {
+            this.isAdd = true
+            this.formData = {
+                orgId: 1,
+                name: "",
+                hardTypeId: null,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            }
+            if (this.formData.id) delete this.formData.id;
+            this.isShowDialog = true;
+        },
+        loadTypeList(pid = -1) {
+            this.fetch({
+                api: "/device/device-type/list-parent",
+                method: "GET",
+                data: { parentId: pid }, // 动态加载
+                success: res => {
+                    if (pid < 0) {
+                        this.typeList = res;
+                        this.typeTree.push(this.typeList);
+                    } else {
+                        console.log("222");
+                        if (res.length > 0)
+                            this.typeTree.splice(
+                                this.position + 1,
+                                this.typeTree.length,
+                                res
+                            );
+                        else
+                            this.typeTree.splice(
+                                this.position + 1,
+                                this.typeTree.length
+                            );
+                        this.selectArr.splice(
+                            this.position + 1,
+                            this.selectArr.length
+                        );
+                    }
+                }
+            });
+        },
+        isCamera(hid) {
+            if (hid === 4 || hid === 5 || hid === 6) return true;
+            else return false;
+        },
+        // 播放
+        handlePlay(row) {
+            console.log(row);
+            this.videoData = {
+                rtsp: row.meta.rtsp,
+                ws: row.meta.ws,
+                title: row.name
+            };
+            this.isShowVideo = true;
+        },
+        // 编辑
+        edit(row) {
+            console.log(row);
+            this.isAdd = false
+            // 判断是为了重复点击不会重复格式化
+            if(typeof row.meta == "object"){
+                row.meta = JSON.stringify(row.meta, null, 4);
+            }
+                // orgId: 1,
+                // name: "",
+                // hardTypeId: null,
+                // deviceNo: "",
+                // description: "",
+                // meta: ""
+            
+            if (this.formData.id) {
+                delete this.formData.id;
+                delete this.formData.name;
+                delete this.formData.hardTypeId;
+                delete this.formData.deviceNo;
+                delete this.formData.meta;
+                delete this.formData.description;
+            }
+            this.formData = Object.assign({}, this.formData, row);
+            this.isShowDialog = true;
+        },
+        // 删除
+        del(row) {
+            console.log(row);
+        },
+        // 子设备管理
+        subDeviceAdmin(row) {
+            this.$router.push({
+                path: "/subDeviceAdmin",
+                query: row
+            });
+        },
+        // 编辑的保存按钮
+        save() {
+            this.formData.hardTypeId = this.selectArr[
+                this.selectArr.length - 1
+            ];
+            let api = this.isAdd
+                ? "/device/device-communication/add"
+                : "/device/device/device-communication/update";
+            this.formData.meta = JSON.parse(this.formData.meta);
+            this.fetch({
+                api,
+                data: this.formData,
+                success: res => {
+                    console.log(res);
+                    this.doSearch(); //重新加载
+                    this.isShowDialog = false;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+.input-with-select-select {
+    width: 180px;
+}
+</style>

src/views/treeStructure/TreeManagement.vue

@@ -12,9 +12,6 @@
                 </el-select>
                 <el-button @click="add_kind" type="primary" class="add_kind">添加分类</el-button>
                 <el-button @click="edit_kind" type="primary">编辑分类</el-button>
-                <!-- <el-popconfirm title="是否删除选中的树？" @onConfirm="del_kind">
-                    <el-button type="primary">删除根</el-button>
-                </el-popconfirm>-->
                 <el-button @click="del_kind" type="danger">删除分类</el-button>
             </el-row>
         </header>
@@ -62,7 +59,7 @@
                                 v-model="form.meta"
                                 type="textarea"
                                 placeholder="请输入内容,JSON格式"
-                                autosize
+                                :autosize="{ minRows: 4 }"
                             ></el-input>
                         </el-form-item>
                         <el-form-item :label="title.code" prop="code">
@@ -162,7 +159,7 @@ export default {
                 success: res => {
                     this.getSubNodeList(this.id);
                     this.getSubNodeList("-1");
-                    this.$message.success("编辑节点成功！");
+                    this.$message.success(this.title.title + "成功！");
                     // this.showDialog = false;
                 },
                 fail: err => {
@@ -212,6 +209,12 @@ export default {
             }
             this.showDialog = true;
             this.dialogStatus = 4;
+            let findItem = this.options.find(item => item.id == this.id)
+            if(findItem.meta instanceof Object) {
+                findItem.meta = JSON.stringify(findItem.meta, null, 2 )
+            }
+            
+            this.form = findItem
             this.title = {
                 title: "编辑分类",
                 nodeName: "节点名称",