摄像头管理完成90% 2020年7月16日10:20:50

src/views/deviceManagement/CameraManagement.vue

@@ -10,9 +10,9 @@
                     placeholder="请输入内容"
                     v-model="searchParams"
                     class="input-with-select"
-                    @keyup.enter.native="doSearch"
+                    @keyup.enter.native="getDeviceList"
                 >
-                    <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
+                    <el-button slot="append" icon="el-icon-search" @click="getDeviceList"></el-button>
                 </el-input>
             </el-col>
             <el-col :span="8">
@@ -77,27 +77,27 @@
                         justify="space-between"
                         :gutter="20"
                         style="margin-bottom:10px"
-                        v-for="item in configItems"
-                        :key="item"
+                        v-for="(item,index) in meta"
+                        :key="index"
                     >
-                        <el-col :span="3" style="text-align:right">rtsp：{{item}}</el-col>
+                        <el-col :span="3" style="text-align:right">rtsp：</el-col>
                         <el-col :span="7">
-                            <el-input placeholder="请输入内容"></el-input>
+                            <el-input placeholder="请输入内容" v-model="item.rtsp"></el-input>
                         </el-col>
                         <el-col :span="3" style="text-align:right">ws：</el-col>
                         <el-col :span="7">
-                            <el-input placeholder="请输入内容"></el-input>
+                            <el-input placeholder="请输入内容" v-model="item.ws"></el-input>
                         </el-col>
                         <el-col :span="4">
                             <el-button
-                                v-show="item==configItems"
+                                v-show="index==meta.length-1"
                                 @click="plus"
                                 type="primary"
                                 icon="el-icon-plus"
                                 circle
                             ></el-button>
                             <el-button
-                                v-show="item==configItems&configItems>1"
+                                v-show="index==meta.length-1&meta.length>1"
                                 @click="minus"
                                 type="primary"
                                 icon="el-icon-minus"
@@ -111,8 +111,8 @@
                     <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="1"></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>
 
@@ -153,7 +153,9 @@ import cascader from "../../components/Cascader/Cascader";
 // 表单验证规则
 const rules = {
     name: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
-    categoryId: [{required: true,message: "请输入消息点描述",trigger: "blur"}],
+    categoryId: [
+        { required: true, message: "请输入消息点描述", trigger: "blur" }
+    ],
     deviceNo: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
 };
 
@@ -162,6 +164,7 @@ export default {
     components: { rtspPlayer, cascader },
     data() {
         return {
+            id: "",
             cameraInfoTree: [],
             deviceList: [],
             isShowDialog: false,
@@ -170,11 +173,14 @@ export default {
                 name: "",
                 categoryId: "",
                 deviceNo: "",
+                status: "",
                 sVer: "",
                 hVer: "",
-                description: "",
-                meta: ""
+                description: ""
             },
+            meta: [
+                    { rtsp: "", ws: "" }
+                ],
             isShowVideo: false,
             videoData: {
                 title: null,
@@ -189,14 +195,15 @@ export default {
     created() {
         // 获取摄像头 树
         this.getTreeByCode("ip-cam");
-        // this.doSearch();
     },
     methods: {
         ...mapActions(["fetch"]),
         submitForm(formName) {
             this.$refs[formName].validate(valid => {
                 if (valid) {
-                    console.log(this.dyForm);
+                    
+                    console.log(this.formData);
+                    this.save()
                 } else {
                     return false;
                 }
@@ -207,9 +214,10 @@ export default {
             this.fetch({
                 api: "/publics/treenode/getTreeByCode",
                 method: "POST",
-                data: { code }, //目前只有一个组织,其他参数调整钟
+                data: { code }, //目前只有一个组织,其他参数调整钟 
                 success: res => {
-                    this.doSearch(res.id);
+                    this.id = res.id
+                    this.getDeviceList(res.id);
                     this.getCameraList(res.id);
                 },
                 fail: err => {
@@ -225,7 +233,7 @@ export default {
                 }
             });
         },
-        doSearch(categoryId) {
+        getDeviceList(categoryId) {
             this.fetch({
                 api: "/device/list",
                 method: "POST",
@@ -267,22 +275,25 @@ export default {
         // 选择改变
         expandChange(value) {
             console.log(value);
-            this.formData.categoryId = value[value.length];
+            this.formData.categoryId = value[value.length-1];
         },
         change(value) {
             console.log(value);
+            this.formData.categoryId = value[value.length-1];
         },
 
         add() {
             this.isAdd = true;
-            this.formData = {
-                orgId: 1,
-                name: "",
-                categoryId: null,
-                deviceNo: "",
-                description: "",
-                meta: ""
-            };
+            // this.formData = {
+            //     name: "",
+            //     categoryId: "",
+            //     deviceNo: "",
+            //     status: "",
+            //     sVer: "",
+            //     hVer: "",
+            //     description: ""
+            // };
+            // this.meta = [{ rtsp: "", ws: "" }]
             if (this.formData.id) delete this.formData.id;
             this.isShowDialog = true;
         },
@@ -339,17 +350,16 @@ export default {
         },
         // 编辑的保存按钮
         save() {
+            this.formData.meta = {channel:JSON.stringify(this.meta)}
             let api = this.isAdd
-                ? "/device/device/add"
-                : "/device/device/update";
-            this.formData.meta = JSON.parse(this.formData.meta);
+                ? "/device/add"
+                : "/device/update";
             this.fetch({
                 api,
                 data: this.formData,
                 success: res => {
-                    console.log(res);
-                    this.doSearch(); //重新加载
-                    this.isShowDialog = false;
+                    this.getDeviceList(this.id); //重新加载
+                    // this.isShowDialog = false;
                 },
                 fail: err => {
                     console.log(err);
@@ -360,12 +370,12 @@ export default {
         },
         // 配置项增加
         plus() {
-            this.configItems++;
+            this.meta.push({ rtsp: "", ws: "" })
         },
         // 配置项减少
         minus() {
-            if (this.configItems <= 1) return;
-            this.configItems--;
+            if (this.meta.length <= 1) return;
+            this.meta.splice(this.meta.length-1,1)
         }
     }
 };