摄像头管理模块全部完成，

src/components/Cascader/Cascader.vue

@@ -7,7 +7,12 @@
             @change="$change"
             style="width:335px;"
             :placeholder="cascaderPlaceholder"
-        ></el-cascader>
+        >
+            <template slot-scope="{ node, data }">
+                <span>{{ data[props.label] }}</span>
+                <span v-if="!node.isLeaf">({{ data[props.children].length }})</span>
+            </template>
+        </el-cascader>
     </div>
 </template>
 
@@ -33,17 +38,17 @@ export default {
     methods: {
         ...mapActions(["fetch"]),
         $expandChange(value) {
-            this.$emit("expand-change",value)
+            this.$emit("expand-change", value);
             this.cascaderPlaceholder = this.findAreaName(value);
-            this.$children[0].presentText= this.cascaderPlaceholder
+            this.$children[0].presentText = this.cascaderPlaceholder;
         },
         $change(value) {
-            this.$emit("change",value)
+            this.$emit("change", value);
         },
 
         // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
         findAreaName(valueArr) {
-            let _this = this
+            let _this = this;
             let i = 0;
             let tmpStr = "";
             find(this.options);

src/views/Home/mencCofig.js

@@ -3,7 +3,7 @@ export const menuData = [
     // 有子菜单 字菜单不分组的
     {
         oneMenuName: "系统配置",
-        iconClassName: "el-icon-monitor",
+        iconClassName: "el-icon-setting",
         index: '0',
         disabled: false, // 是否禁用
         childList: [

src/views/deviceManagement/CameraManagement.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="CameraManagement">
         <el-row :gutter="20">
-            <el-col :span="2">
+            <!-- <el-col :span="2">
                 <span style="line-height:32px;">工具栏:</span>
             </el-col>
             <el-col :span="12">
@@ -14,12 +14,12 @@
                 >
                     <el-button slot="append" icon="el-icon-search" @click="getDeviceList"></el-button>
                 </el-input>
-            </el-col>
+            </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;">
+        <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>
@@ -27,8 +27,7 @@
                 <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="status" label="摄像头状态"></el-table-column>
                 <el-table-column prop="description" label="描述"></el-table-column>
                 <el-table-column label="最后一次">
                     <template slot-scope="scope">
@@ -60,12 +59,17 @@
                 </el-form-item>
 
                 <el-form-item label="设备类型：">
-                    <cascader
+                    <el-cascader
                         :options="cameraInfoTree"
-                        @expand-change="expandChange"
-                        @change="change"
-                        :props="{ children: 'childs', label: 'nodeName' ,value:'id'}"
-                    ></cascader>
+                        :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
+                        v-model="formData.categoryId"
+                        clearable
+                    >
+                        <template slot-scope="{ node, data }">
+                            <span>{{ data.nodeName }}</span>
+                            <span v-if="!node.isLeaf">({{ data.childs.length }})</span>
+                        </template>
+                    </el-cascader>
                 </el-form-item>
 
                 <el-form-item label="设备序列号：" prop="deviceNo">
@@ -162,26 +166,23 @@ const rules = {
 
 export default {
     name: "CameraManagement",
-    components: { rtspPlayer, cascader },
+    components: { rtspPlayer },
     data() {
         return {
             id: "",
             cameraInfoTree: [],
             deviceList: [],
             isShowDialog: false,
-            searchParams: "",
             formData: {
                 name: "",
-                categoryId: "",
+                categoryId: [],
                 deviceNo: "",
                 status: "",
                 sVer: "",
                 hVer: "",
                 description: ""
             },
-            meta: [
-                    { rtsp: "", ws: "" }
-                ],
+            meta: [{ rtsp: "", ws: "" }],
             isShowVideo: false,
             videoData: {
                 title: null,
@@ -202,9 +203,7 @@ export default {
         submitForm(formName) {
             this.$refs[formName].validate(valid => {
                 if (valid) {
-                    
-                    console.log(this.formData);
-                    this.save()
+                    this.save();
                 } else {
                     return false;
                 }
@@ -215,9 +214,9 @@ export default {
             this.fetch({
                 api: "/publics/treenode/getTreeByCode",
                 method: "POST",
-                data: { code }, //目前只有一个组织,其他参数调整钟 
+                data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    this.id = res.id
+                    this.id = res.id;
                     this.getDeviceList(res.id);
                     this.getCameraList(res.id);
                 },
@@ -236,7 +235,7 @@ export default {
         },
         getDeviceList(categoryId) {
             this.fetch({
-                api: "/device/list",
+                api: "/device/device/list",
                 method: "POST",
                 data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
                 success: res => {
@@ -273,16 +272,44 @@ export default {
                 }
             });
         },
-        // 选择改变
-        expandChange(value) {
-            console.log(value);
-            this.formData.categoryId = value[value.length-1];
+        // 编辑的保存按钮
+        save() {
+            this.formData.meta = { channel: JSON.stringify(this.meta) };
+            let categoryId = this.formData.categoryId
+            if( categoryId instanceof Array ){
+                this.formData.categoryId = categoryId[categoryId.length-1]
+            }
+            let api = this.isAdd ? "/device/device/add" : "/device/device/update";
+            this.fetch({
+                api,
+                data: this.formData,
+                success: res => {
+                    this.getDeviceList(this.id); //重新加载
+                    // this.isShowDialog = false;
+                    this.$message.success(this.isAdd?"添加摄像头数据成功！":"修改摄像头数据成功！")
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
         },
-        change(value) {
-            console.log(value);
-            this.formData.categoryId = value[value.length-1];
+        // 请求删除
+        reqDelete(id) {
+            this.fetch({
+                api: "/device/delete",
+                data: { id },
+                success: res => {
+                    this.getDeviceList(this.id); //重新加载
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
         },
-
         add() {
             this.isAdd = true;
             // this.formData = {
@@ -316,31 +343,16 @@ export default {
         edit(row) {
             console.log(row);
             this.isAdd = false;
-            // 判断是为了重复点击不会重复格式化
-            if (typeof row.meta == "object") {
-                row.meta = JSON.stringify(row.meta, null, 4);
-            }
-            // orgId: 1,
-            // name: "",
-            // categoryId: null,
-            // deviceNo: "",
-            // description: "",
-            // meta: ""
-
-            if (this.formData.id) {
-                delete this.formData.id;
-                delete this.formData.name;
-                delete this.formData.categoryId;
-                delete this.formData.deviceNo;
-                delete this.formData.meta;
-                delete this.formData.description;
-            }
-            this.formData = Object.assign({}, this.formData, row);
             this.isShowDialog = true;
+            this.formData = row;
+            this.meta = JSON.parse(row.meta.channel);
+            console.log(row.categoryId)
+            this.createArr(row.categoryId)
         },
         // 删除
         del(row) {
             console.log(row);
+            this.reqDelete(row.id);
         },
         // 子设备管理
         subDeviceAdmin(row) {
@@ -349,34 +361,39 @@ export default {
                 query: row
             });
         },
-        // 编辑的保存按钮
-        save() {
-            this.formData.meta = {channel:JSON.stringify(this.meta)}
-            let api = this.isAdd
-                ? "/device/add"
-                : "/device/update";
-            this.fetch({
-                api,
-                data: this.formData,
-                success: res => {
-                    this.getDeviceList(this.id); //重新加载
-                    // this.isShowDialog = false;
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        },
+
         // 配置项增加
         plus() {
-            this.meta.push({ rtsp: "", ws: "" })
+            this.meta.push({ rtsp: "", ws: "" });
         },
         // 配置项减少
         minus() {
             if (this.meta.length <= 1) return;
-            this.meta.splice(this.meta.length-1,1)
+            this.meta.splice(this.meta.length - 1, 1);
+        },
+        // 传入一个id 生成树（ cameraInfoTree ）的id数组
+        createArr(id) {
+            let tree = this.cameraInfoTree
+            let tmpArr = []
+            
+            recursion(tree)
+            function recursion(tree) {
+                // debugger
+                tree.forEach(item => {
+                    if(item.id == id) {
+                        tmpArr.push(item.id)
+                        return
+                    } else {
+                        if(item.childs && item.childs.length>0) {
+                            tmpArr.push(item.id)
+                            recursion(item.childs)
+                        } else {
+                            tmpArr = []
+                        }
+                    }
+                });
+            }
+            console.log(tmpArr)
         }
     }
 };
@@ -390,5 +407,4 @@ export default {
         }
     }
 }
-
 </style>

src/views/template/Af.vue

@@ -1,6 +1,12 @@
 <template>
     <div class="Ad">
         <h1>Ad666</h1>
+        <el-cascader :options="options" :props="{ checkStrictly: true }" v-model="value" clearable>
+            <template slot-scope="{ node, data }">
+                <span>{{ data.label }}</span>
+                <span v-if="!node.isLeaf">({{ data.children.length }})</span>
+            </template>
+        </el-cascader>
     </div>
 </template>
 
@@ -10,13 +16,282 @@ import { mapActions } from "vuex";
 export default {
     name: "Af",
     data() {
-        return {};
-    },
-    created() {
+        return {
+            value: ["zhinan", "shejiyuanze"],
+            options: [
+                {
+                    value: "zhinan",
+                    label: "指南",
+                    children: [
+                        {
+                            value: "shejiyuanze",
+                            label: "设计原则",
+                            children: [
+                                {
+                                    value: "yizhi",
+                                    label: "一致"
+                                },
+                                {
+                                    value: "fankui",
+                                    label: "反馈"
+                                },
+                                {
+                                    value: "xiaolv",
+                                    label: "效率"
+                                },
+                                {
+                                    value: "kekong",
+                                    label: "可控"
+                                }
+                            ]
+                        },
+                        {
+                            value: "daohang",
+                            label: "导航",
+                            children: [
+                                {
+                                    value: "cexiangdaohang",
+                                    label: "侧向导航"
+                                },
+                                {
+                                    value: "dingbudaohang",
+                                    label: "顶部导航"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    value: "zujian",
+                    label: "组件",
+                    children: [
+                        {
+                            value: "basic",
+                            label: "Basic",
+                            children: [
+                                {
+                                    value: "layout",
+                                    label: "Layout 布局"
+                                },
+                                {
+                                    value: "color",
+                                    label: "Color 色彩"
+                                },
+                                {
+                                    value: "typography",
+                                    label: "Typography 字体"
+                                },
+                                {
+                                    value: "icon",
+                                    label: "Icon 图标"
+                                },
+                                {
+                                    value: "button",
+                                    label: "Button 按钮"
+                                }
+                            ]
+                        },
+                        {
+                            value: "form",
+                            label: "Form",
+                            children: [
+                                {
+                                    value: "radio",
+                                    label: "Radio 单选框"
+                                },
+                                {
+                                    value: "checkbox",
+                                    label: "Checkbox 多选框"
+                                },
+                                {
+                                    value: "input",
+                                    label: "Input 输入框"
+                                },
+                                {
+                                    value: "input-number",
+                                    label: "InputNumber 计数器"
+                                },
+                                {
+                                    value: "select",
+                                    label: "Select 选择器"
+                                },
+                                {
+                                    value: "cascader",
+                                    label: "Cascader 级联选择器"
+                                },
+                                {
+                                    value: "switch",
+                                    label: "Switch 开关"
+                                },
+                                {
+                                    value: "slider",
+                                    label: "Slider 滑块"
+                                },
+                                {
+                                    value: "time-picker",
+                                    label: "TimePicker 时间选择器"
+                                },
+                                {
+                                    value: "date-picker",
+                                    label: "DatePicker 日期选择器"
+                                },
+                                {
+                                    value: "datetime-picker",
+                                    label: "DateTimePicker 日期时间选择器"
+                                },
+                                {
+                                    value: "upload",
+                                    label: "Upload 上传"
+                                },
+                                {
+                                    value: "rate",
+                                    label: "Rate 评分"
+                                },
+                                {
+                                    value: "form",
+                                    label: "Form 表单"
+                                }
+                            ]
+                        },
+                        {
+                            value: "data",
+                            label: "Data",
+                            children: [
+                                {
+                                    value: "table",
+                                    label: "Table 表格"
+                                },
+                                {
+                                    value: "tag",
+                                    label: "Tag 标签"
+                                },
+                                {
+                                    value: "progress",
+                                    label: "Progress 进度条"
+                                },
+                                {
+                                    value: "tree",
+                                    label: "Tree 树形控件"
+                                },
+                                {
+                                    value: "pagination",
+                                    label: "Pagination 分页"
+                                },
+                                {
+                                    value: "badge",
+                                    label: "Badge 标记"
+                                }
+                            ]
+                        },
+                        {
+                            value: "notice",
+                            label: "Notice",
+                            children: [
+                                {
+                                    value: "alert",
+                                    label: "Alert 警告"
+                                },
+                                {
+                                    value: "loading",
+                                    label: "Loading 加载"
+                                },
+                                {
+                                    value: "message",
+                                    label: "Message 消息提示"
+                                },
+                                {
+                                    value: "message-box",
+                                    label: "MessageBox 弹框"
+                                },
+                                {
+                                    value: "notification",
+                                    label: "Notification 通知"
+                                }
+                            ]
+                        },
+                        {
+                            value: "navigation",
+                            label: "Navigation",
+                            children: [
+                                {
+                                    value: "menu",
+                                    label: "NavMenu 导航菜单"
+                                },
+                                {
+                                    value: "tabs",
+                                    label: "Tabs 标签页"
+                                },
+                                {
+                                    value: "breadcrumb",
+                                    label: "Breadcrumb 面包屑"
+                                },
+                                {
+                                    value: "dropdown",
+                                    label: "Dropdown 下拉菜单"
+                                },
+                                {
+                                    value: "steps",
+                                    label: "Steps 步骤条"
+                                }
+                            ]
+                        },
+                        {
+                            value: "others",
+                            label: "Others",
+                            children: [
+                                {
+                                    value: "dialog",
+                                    label: "Dialog 对话框"
+                                },
+                                {
+                                    value: "tooltip",
+                                    label: "Tooltip 文字提示"
+                                },
+                                {
+                                    value: "popover",
+                                    label: "Popover 弹出框"
+                                },
+                                {
+                                    value: "card",
+                                    label: "Card 卡片"
+                                },
+                                {
+                                    value: "carousel",
+                                    label: "Carousel 走马灯"
+                                },
+                                {
+                                    value: "collapse",
+                                    label: "Collapse 折叠面板"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    value: "ziyuan",
+                    label: "资源",
+                    children: [
+                        {
+                            value: "axure",
+                            label: "Axure Components"
+                        },
+                        {
+                            value: "sketch",
+                            label: "Sketch Templates"
+                        },
+                        {
+                            value: "jiaohu",
+                            label: "组件交互文档"
+                        }
+                    ]
+                }
+            ]
+        };
     },
+    created() {},
     methods: {
         ...mapActions(["fetch"]),
-        
+
         get() {
             this.fetch({
                 api: "core/memberInfo/list",
@@ -31,7 +306,7 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
-        },
+        }
     }
 };
 </script>