优化

src/views/web/camera/index.vue

@@ -14,6 +14,10 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd"
+                   v-hasPermi="['web:camera:add']">新增</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
           v-hasPermi="['web:camera:remove']">删除</el-button>
@@ -42,6 +46,18 @@
       <el-table-column label="首次注册时间" align="center" prop="firstTime" />
       <el-table-column label="心跳时间" align="center" prop="updateTime" />
       <el-table-column label="4G强度" align="center" prop="rssiLevel" />
+      <el-table-column label="接入方式" align="center" prop="accessType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.camera_access_type" :value="scope.row.accessType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="摄像机品牌" align="center" prop="brand">
+        <template slot-scope="scope">
+          <div v-for="item in brandList">
+            {{(scope.row.brand == item.id)?item.name:''}}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <span v-if="scope.row.status == 1">
@@ -115,14 +131,46 @@
       @pagination="getList" />
 
     <!-- 添加或修改摄像机对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="序列号" prop="devsn">
-          <el-input v-model="form.devsn" placeholder="" :disabled="true" />
-        </el-form-item>
+    <el-dialog  :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="设备名" prop="name">
           <el-input v-model="form.name" placeholder="请输入设备名" />
         </el-form-item>
+        <el-form-item label="设备ip" prop="ip">
+          <el-input v-model="form.ip" placeholder="请输入设备ip" />
+        </el-form-item>
+        <el-form-item label="设备端口" prop="port">
+          <el-input v-model="form.port" placeholder="请输入设备端口" />
+        </el-form-item>
+        <el-form-item label="设备登录账号" prop="username">
+          <el-input v-model="form.username" placeholder="请输入设备登录账号" />
+        </el-form-item>
+        <el-form-item label="设备登录密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入设备登录密码" />
+        </el-form-item>
+        <el-form-item label="设备序列号" prop="devsn">
+          <el-input v-model="form.devsn" placeholder="请输入设备序列号" />
+        </el-form-item>
+        <el-form-item label="接入方式" prop="accessType">
+          <el-select v-model="form.accessType" placeholder="请选择接入方式">
+            <el-option
+              v-for="dict in dict.type.camera_access_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="摄像机品牌" prop="brand">
+          <el-select v-model="form.brand" placeholder="请选择摄像机品牌">
+            <el-option
+              v-for="dict in brandList"
+              :key="dict.id"
+              :label="dict.name"
+              :value="parseInt(dict.id)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -353,6 +401,7 @@ import "videojs-contrib-hls";
 
 export default {
   name: "Camera",
+  dicts: ['camera_access_type'],
   data() {
     return {
       videoHtml: '',
@@ -406,7 +455,9 @@ export default {
           password: '',
           pathRule: '',
           isEnable: '',
-          devsn: ''
+          devsn: '',
+          accessType: null,
+          brand: null
         },
 
 
@@ -484,6 +535,8 @@ export default {
         value: '6',
         label: '星期六'
       }],
+      // 摄像机品牌列表
+      brandList: [],
       timeStage: [],
       num: Date.now(),
       // 设置可选择的时间段，*** 必须在 data 返回数据 ***
@@ -517,6 +570,7 @@ export default {
   },
   created() {
     this.getList();
+    this.geBrandList();
   },
   mounted() {
     this.$nextTick(() => {
@@ -524,6 +578,14 @@ export default {
     })
   },
   methods: {
+    /** 查询brand列表 */
+    async geBrandList() {
+      let res = await this.$axiosGet('/web/brand/brands');
+      if(res.code === 0){
+        this.brandList = res.data;
+      }
+    },
+
     /** 查询摄像机列表 */
     async getList() {
       this.loading = true;
@@ -549,7 +611,9 @@ export default {
         username: null,
         password: null,
         devsn: null,
-        status: "0"
+        status: "0",
+        accessType: null,
+        brand: null
       };
       this.resetForm("form");
     },