平台设备维护:报警主机新增 代码提交

src/views/iot/deviceInfo/dialog.addAlarmHost.vue

@@ -5,171 +5,210 @@
         <el-form :model="formData" :rules="formDataRules" size="small" ref="form" label-position="right"
                  label-width="120px" label-prefix=":">
           <el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="机构名称">
+                  <org-tree
+                    v-model="formData.orgId"
+                    @defaultKey="getDefaultKey"
+                    @defaultOrg="getDefaultOrg"
+                    @click="clickTreeNode"
+                    :defaultCheckSub="false"
+                    :showCheckSub="false"
+                    wholeTree
+                    ref="orgTree"
+                  ></org-tree>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="iotCode" label="所属主机">
+                  <el-select
+                    prop="iotCode"
+                    label="检查人员"
+                    v-model="formData.iotCode"
+                    placeholder="请选择所属主机"
+                  >
+                    <el-option
+                      v-for="dict in hostConnectList"
+                      :key="dict.value"
+                      :label="dict.key"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <!-- 设备名称 -->
+              <el-col :span="12">
+                <el-form-item prop="deviceName" label="设备名称">
+                  <el-input
+                    v-model="formData.deviceName"
+                    :maxlength="32"
+                    placeholder="请输入设备名称"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <!-- 设备产品 -->
+              <el-col :span="12">
+                <el-form-item label="产品类型" prop="deviceProduct">
+                  <el-select style="width: 100%" @change="productChange(formData.deviceProduct)"
+                             v-model="formData.deviceProduct" placeholder="请选择产品类型">
+                    <el-option
+                      v-for="item in productList"
+                      :key="item.id"
+                      :label="item.displayName"
+                      :value="item.name"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <!-- 产品型号 -->
+            <el-col :span="12">
+              <el-form-item label="产品型号" prop="models">
+                <el-select style="width: 100%" v-model="formData.models" placeholder="请选择产品型号">
+                  <el-option
+                    v-for="item in modelList"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- 主机Ip -->
+            <el-col :span="12">
+              <el-form-item label="主机Ip" prop="serverIp">
+                <el-input v-model="formData.serverIp" placeholder="请输入主机Ip"/>
+              </el-form-item>
+            </el-col>
+            <!-- 监听地址 -->
+            <el-col :span="12">
+              <el-form-item label="监听地址" prop="listenAddress" v-show="this.showListenAddress()">
+                <el-input v-model="formData.listenAddress" placeholder="请输入监听地址"/>
+              </el-form-item>
+            </el-col>
+            <!-- 监听端口 -->
+            <el-col :span="12">
+              <el-form-item label="监听端口" prop="listenPort" v-show="this.showListenAddress()">
+                <el-input v-model="formData.listenPort" maxlength="50" placeholder="请输入监听端口"/>
+              </el-form-item>
+            </el-col>
+            <!-- 用户名 -->
+            <el-col :span="12">
+              <el-form-item label="用户名" prop="userName" v-if="this.showUserName()">
+                <el-input v-model="formData.userName" maxlength="50" placeholder="请输入用户名"/>
+              </el-form-item>
+            </el-col>
+            <!-- 密码 -->
             <el-col :span="12">
-              <el-form-item label="机构名称">
-                <org-tree
-                  v-model="formData.orgId"
-                  @defaultKey="getDefaultKey"
-                  @defaultOrg="getDefaultOrg"
-                  @click="clickTreeNode"
-                  :defaultCheckSub="false"
-                  :showCheckSub="false"
-                  wholeTree
-                  ref="orgTree"
-                ></org-tree>
+              <el-form-item label="密码" prop="password" v-if="this.showUserName()">
+                <el-input v-model="formData.password" show-password maxlength="50" placeholder="请输入密码"/>
               </el-form-item>
             </el-col>
+            <!-- 主机类型 -->
             <el-col :span="12">
-              <el-form-item prop="iotCode" label="所属主机">
-                <el-select
-                  prop="iotCode"
-                  label="检查人员"
-                  v-model="formData.iotCode"
-                  placeholder="请选择所属主机"
-                >
+              <el-form-item label="主机类型" prop="hostDeviceType" v-show="formData.deviceProduct=='BOSCH_CMS'">
+                <el-select style="width: 100%" v-model="formData.hostDeviceType" placeholder="请输入主机类型">
                   <el-option
-                    v-for="dict in hostConnectList"
-                    :key="dict.value"
-                    :label="dict.key"
-                    :value="dict.value"
+                    v-for="item in hostDeviceTypeList"
+                    :key="item.id"
+                    :label="item.label"
+                    :value="item.id"
                   />
                 </el-select>
               </el-form-item>
             </el-col>
-          </el-row>
-          <!-- 设备名称 -->
-          <el-col :span="12">
-            <el-form-item prop="deviceName" label="设备名称">
-              <el-input
-                v-model="formData.deviceName"
-                :maxlength="32"
-                placeholder="请输入设备名称"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 设备产品 -->
-          <el-col :span="12">
-            <el-form-item label="产品类型" prop="deviceProduct">
-              <el-select style="width: 100%" @change="productChange(formData.deviceProduct)"
-                         v-model="formData.deviceProduct" placeholder="请选择产品类型">
-                <el-option
-                  v-for="item in productList"
-                  :key="item.id"
-                  :label="item.displayName"
-                  :value="item.name"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <!-- 产品型号 -->
-          <el-col :span="12">
-            <el-form-item label="产品型号" prop="models">
-              <el-select style="width: 100%" v-model="formData.models" placeholder="请选择产品型号">
-                <el-option
-                  v-for="item in modelList"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <!-- 主机Ip -->
-          <el-col :span="12">
-            <el-form-item label="主机Ip" prop="serverIp">
-              <el-input v-model="formData.serverIp" placeholder="请输入主机Ip"/>
-            </el-form-item>
-          </el-col>
-          <!-- 监听地址 -->
-          <el-col :span="12">
-            <el-form-item label="监听地址" prop="listenAddress" v-show="this.showListenAddress()">
-              <el-input v-model="formData.listenAddress" placeholder="请输入监听地址"/>
-            </el-form-item>
-          </el-col>
-          <!-- 监听端口 -->
-          <el-col :span="12">
-            <el-form-item label="监听端口" prop="listenPort" v-show="this.showListenAddress()">
-              <el-input v-model="formData.listenPort" maxlength="50" placeholder="请输入监听端口"/>
-            </el-form-item>
-          </el-col>
-          <!-- 用户名 -->
-          <el-col :span="12">
-            <el-form-item label="用户名" prop="userName" v-if="this.showUserName()">
-              <el-input v-model="formData.userName" maxlength="50" placeholder="请输入用户名"/>
-            </el-form-item>
-          </el-col>
-          <!-- 密码 -->
-          <el-col :span="12">
-            <el-form-item label="密码" prop="password" v-if="this.showUserName()">
-              <el-input v-model="formData.password" show-password maxlength="50" placeholder="请输入密码"/>
-            </el-form-item>
-          </el-col>
-          <!-- 主机类型 -->
-          <el-col :span="12">
-            <el-form-item label="主机类型" prop="hostDeviceType" v-show="formData.deviceProduct=='BOSCH_CMS'">
-              <el-select style="width: 100%" v-model="formData.hostDeviceType" placeholder="请输入主机类型">
-                <el-option
-                  v-for="item in hostDeviceTypeList"
-                  :key="item.id"
-                  :label="item.label"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <!-- 主机端口 -->
-          <el-col :span="12">
-            <el-form-item label="主机端口" prop="serverPort" v-if="this.showUserName()">
-              <el-input v-model="formData.serverPort" placeholder="请输入主机端口"/>
-            </el-form-item>
-          </el-col>
-          <!-- 控制地址 -->
-          <el-col :span="12">
-            <el-form-item label="控制地址" prop="iotAddress"  v-show="formData.deviceProduct=='BOSCH_CMS'">
-              <el-input v-model="formData.iotAddress" placeholder="请输入主机端口"/>
-            </el-form-item>
-          </el-col>
-          <!-- 用户代码 -->
-          <el-col :span="12">
-            <el-form-item label="用户代码" prop="deviceUserCode"  v-show="formData.deviceProduct=='HengTong_CKWU01C'">
-              <el-input v-model="formData.deviceUserCode" placeholder="请输入主机端口"/>
-            </el-form-item>
-          </el-col>
-          <!-- MAC地址 -->
-          <el-col :span="12">
-            <el-form-item label="MAC地址" prop="deviceMac"  v-if="this.showMacAddress()">
-              <el-input v-model="formData.deviceMac" placeholder="请输入MAC地址"/>
-            </el-form-item>
-          </el-col>
-          <!-- 主机操作码 -->
-          <el-col :span="12">
-            <el-form-item label="主机操作码" prop="deviceUserCode"  v-if="this.showMacAddress()">
-              <el-input v-model="formData.deviceUserCode" placeholder="请输入主机操作码"/>
-            </el-form-item>
-          </el-col>
-          <!-- 主机端口 -->
-          <el-col :span="12">
-            <el-form-item label="主机端口" prop="serverPort" v-if="this.showMacAddress()">
-              <el-input v-model="formData.serverPort" placeholder="请输入主机端口"/>
-            </el-form-item>
-          </el-col>
-          <!-- 监听端口 -->
-          <el-col :span="12">
-            <el-form-item label="监听端口" prop="listenPort" v-show="formData.deviceProduct=='FengYe_H402'">
-              <el-input v-model="formData.listenPort" maxlength="50" placeholder="请输入监听端口"/>
-            </el-form-item>
-          </el-col>
+            <!-- 主机端口 -->
+            <el-col :span="12">
+              <el-form-item label="主机端口" prop="serverPort" v-if="this.showUserName()">
+                <el-input v-model="formData.serverPort" placeholder="请输入主机端口"/>
+              </el-form-item>
+            </el-col>
+            <!-- 控制地址 -->
+            <el-col :span="12">
+              <el-form-item label="控制地址" prop="iotAddress" v-show="formData.deviceProduct=='BOSCH_CMS'">
+                <el-input v-model="formData.iotAddress" placeholder="请输入主机端口"/>
+              </el-form-item>
+            </el-col>
+            <!-- 用户代码 -->
+            <el-col :span="12">
+              <el-form-item label="用户代码" prop="deviceUserCode" v-show="formData.deviceProduct=='HengTong_CKWU01C'">
+                <el-input v-model="formData.deviceUserCode" placeholder="请输入主机端口"/>
+              </el-form-item>
+            </el-col>
+            <!-- MAC地址 -->
+            <el-col :span="12">
+              <el-form-item label="MAC地址" prop="deviceMac" v-if="this.showMacAddress()">
+                <el-input v-model="formData.deviceMac" placeholder="请输入MAC地址"/>
+              </el-form-item>
+            </el-col>
+            <!-- 主机操作码 -->
+            <el-col :span="12">
+              <el-form-item label="主机操作码" prop="deviceUserCode" v-if="this.showMacAddress()">
+                <el-input v-model="formData.deviceUserCode" placeholder="请输入主机操作码"/>
+              </el-form-item>
+            </el-col>
+            <!-- 主机端口 -->
+            <el-col :span="12">
+              <el-form-item label="主机端口" prop="serverPort" v-if="this.showMacAddress()">
+                <el-input v-model="formData.serverPort" placeholder="请输入主机端口"/>
+              </el-form-item>
+            </el-col>
+            <!-- 监听端口 -->
+            <el-col :span="12">
+              <el-form-item label="监听端口" prop="listenPort" v-show="formData.deviceProduct=='FengYe_H402'">
+                <el-input v-model="formData.listenPort" maxlength="50" placeholder="请输入监听端口"/>
+              </el-form-item>
+            </el-col>
 
-          <el-col :span="12" prop="enable">
-            <el-form-item label="启用">
-              <el-radio-group v-model="formData.enable">
-                <el-radio :label="0">启用</el-radio>
-                <el-radio :label="1">禁用</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
+            <el-col :span="12" prop="enable">
+              <el-form-item label="启用">
+                <el-radio-group v-model="formData.enable">
+                  <el-radio :label="0">启用</el-radio>
+                  <el-radio :label="1">禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-divider class="custom-divider"></el-divider>
+          <el-row :gutter="48" style="margin-top: 1px">
+            <el-col :span='12' style='text-align: left'> 子系统</el-col>
+            <el-col :span='12' style='text-align: right'>
+              <span>子系统数量 :</span>
+              <el-input-number style="margin-left: 15px" @change="subSystemNumsChange" v-model="formData.subSystemNums" :min="1"
+                               :max="16" label="描述文字" size="small"></el-input-number>
+            </el-col>
+          </el-row>
+          <el-table class="w-auto" height="350" border :data="formData.subSystemList">
+            <el-table-column label="子系统号" width="120" align="center">
+              <template slot-scope="r">
+                <el-input v-model="r.row.subSystemIndex" maxlength="50" placeholder=""/>
+              </template>
+            </el-table-column>
 
+            <el-table-column label="子系统名称" align="center">
+              <template slot-scope="r">
+                <el-input v-model="r.row.subSystemName" maxlength="50" placeholder=""/>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否启用" width="160" align="center">
+              <template slot-scope="r">
+                <el-radio-group v-model="r.row.enable">
+                  <el-radio :label="0">启用</el-radio>
+                  <el-radio :label="1">禁用</el-radio>
+                </el-radio-group>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作列表" width="140" align="center">
+              <template slot-scope="r">
+                <btn-tip type="text" v-if="showSubSystemDeleted(r.row)" @click="deleteSunSystem(r.row, r.$index)">删除
+                </btn-tip>
+              </template>
+            </el-table-column>
+          </el-table>
         </el-form>
       </div>
 
@@ -187,9 +226,10 @@ import {editDvrHostDevice, getProductDisplayName} from "@/api/iot/deviceInfo";
 import KSelect from "@/components/common/userselect.vue";
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import * as iotApi from "@/api/iot/alarmRule";
+import BtnTip from "@/components/btnTip/index.vue";
 
 export default {
-  components: {KSelect, OrgTree},
+  components: {BtnTip, KSelect, OrgTree},
   data() {
     const params = this.$route.params;
     return {
@@ -201,17 +241,17 @@ export default {
       modelList: [],
       hostConnectList: [],
       hostDeviceTypeList: [
-        {id:17,label:'ICP_CMS6_CHI_V1_00'},
-        {id:18,label:'AMAX2000'},
-        {id:19,label:'ICP_CMS6_CHI_V1_10'},
-        {id:20,label:'ICP_CMS8_CHI_V1_10'},
-        {id:21,label:'ICP_CMS40_CHI_V1_00'},
-        {id:22,label:'ICP_CMS6_CHI_V1_20'},
-        {id:23,label:'ICP_CMS8_CHI_V1_20'},
-        {id:25,label:'ICP_CMS40_CHI_V2_10'},
-        {id:29,label:'ICP_CMS40_CHI_V2_20'},
-        {id:43,label:'ICP_CMS40_CHI_V2_30'},
-        {id:50,label:'ICP_CMS40_CHI_V2_40'}
+        {id: 17, label: 'ICP_CMS6_CHI_V1_00'},
+        {id: 18, label: 'AMAX2000'},
+        {id: 19, label: 'ICP_CMS6_CHI_V1_10'},
+        {id: 20, label: 'ICP_CMS8_CHI_V1_10'},
+        {id: 21, label: 'ICP_CMS40_CHI_V1_00'},
+        {id: 22, label: 'ICP_CMS6_CHI_V1_20'},
+        {id: 23, label: 'ICP_CMS8_CHI_V1_20'},
+        {id: 25, label: 'ICP_CMS40_CHI_V2_10'},
+        {id: 29, label: 'ICP_CMS40_CHI_V2_20'},
+        {id: 43, label: 'ICP_CMS40_CHI_V2_30'},
+        {id: 50, label: 'ICP_CMS40_CHI_V2_40'}
       ],
       formDataRules: {
         deviceName: [{required: true, message: "请输入设备名称"}],
@@ -270,6 +310,12 @@ export default {
         models: "",
         hostDeviceType: "",
         enable: 0,
+        subSystemList: [{
+          subSystemIndex: 0,
+          subSystemName: '111',
+          enable: 0
+        }],
+        subSystemNums: 1,
         ...other,
       };
     },
@@ -373,70 +419,94 @@ export default {
         callback();
       }
     },
-    showListenAddress(){
-      let arr = [ 'InAnter_BM1600NTSmall'];
-      return  arr.includes(this.formData.deviceProduct) ;
+    showListenAddress() {
+      let arr = ['InAnter_BM1600NTSmall'];
+      return arr.includes(this.formData.deviceProduct);
     },
-    showUserName(){
+    showUserName() {
       let arr = [
         'DaHuaAlarmHost',
         'BOSCH_CMS',
         'Hik_DS19A',
         'HengTong_CKWU01C',
       ];
-      return  arr.includes(this.formData.deviceProduct) ;
+      return arr.includes(this.formData.deviceProduct);
     },
-    showMacAddress(){
+    showMacAddress() {
       let arr = [
         'HoneywellOCX_IPM',
         'HikModule',
       ];
-      return arr.includes(this.formData.deviceProduct) ;
+      return arr.includes(this.formData.deviceProduct);
     },
-    productChangeAndInitDta(){
+    productChangeAndInitDta() {
       let deviceProduct = this.formData.deviceProduct;
-      if (deviceProduct === "DaHua" || deviceProduct === "DaHuaAlarmHost"){
+      if (deviceProduct === "DaHua" || deviceProduct === "DaHuaAlarmHost") {
         this.formData.serverPort = "37777";
         this.formData.userName = "admin";
         this.formData.password = "admin123";
-      }else if (deviceProduct === "BOSCH_CMS"){
+      } else if (deviceProduct === "BOSCH_CMS") {
         this.formData.serverPort = "7700";
         this.formData.userName = "00001";
         this.formData.password = "1234";
         this.formData.hostDeviceType = "50";
-      }else if (deviceProduct === "Hik_DS19A"){
+      } else if (deviceProduct === "Hik_DS19A") {
         this.formData.serverPort = "8000";
         this.formData.userName = "admin";
         this.formData.password = "";
-      }else if (deviceProduct === "HoneywellOCX_IPM"){
+      } else if (deviceProduct === "HoneywellOCX_IPM") {
         this.formData.serverPort = "8000";
         this.formData.deviceUserCode = "1234";
         this.formData.deviceMac = "00-00-00-00-00-00";
-      }else if (deviceProduct === "HikModule"){
+      } else if (deviceProduct === "HikModule") {
         this.formData.serverPort = "4001";
         this.formData.deviceUserCode = "1234";
         this.formData.deviceMac = "00-00-00-00-00-00";
-      }else if (deviceProduct === "FengYe_H402"){
+      } else if (deviceProduct === "FengYe_H402") {
         this.formData.listenPort = "9100";
-      }else if (deviceProduct === "HengTong_CKWU01C"){
-      this.formData.serverPort = "4001";
-      this.formData.userName = "admin";
-      this.formData.password = "12345678";
-      this.formData.deviceUserCode = "1234"  ;
-      }else if (deviceProduct === "InAnter_BM1600NTSmall"){
+      } else if (deviceProduct === "HengTong_CKWU01C") {
+        this.formData.serverPort = "4001";
+        this.formData.userName = "admin";
+        this.formData.password = "12345678";
+        this.formData.deviceUserCode = "1234";
+      } else if (deviceProduct === "InAnter_BM1600NTSmall") {
         this.formData.listenPort = "502";
       }
+    },
+    deleteSunSystem(row, index) {
+      if (this.formData.subSystemList.length === 1) {
+        return;
+      }
+      this.formData.subSystemList.splice(index, 1);
+      this.formData.subSystemNums = this.formData.subSystemList.length;
+    },
+    showSubSystemDeleted(row) {
+      //如果当前元素在this.formData.subSystemList第一个的位置 不显示删除按钮
+      return this.formData.subSystemList.indexOf(row) != 0;
+
+    },
+    subSystemNumsChange(nums) {
+      while (this.formData.subSystemList.length < nums) {
+        let end=this.formData.subSystemList[this.formData.subSystemList.length-1];
+
+        this.formData.subSystemList.push({
+          subSystemIndex: end.subSystemIndex+1,
+          subSystemName: '',
+          enable: 0
+        });
+      }
+
+      while (this.formData.subSystemList.length > nums) {
+        this.formData.subSystemList.pop();
+      }
+      this.formData.subSystemNums = this.formData.subSystemList.length;
     }
   },
 };
 </script>
 
-<!-- <style lang="scss" scoped>
-.k-textarea{
-  .el-textarea {
-    .el-textarea__inner  {
-      font-size: 15px !important;
-    }
-  }
+<style lang="scss" scoped>
+.custom-divider {
+  margin-top: 1px;
 }
-</style> -->
+</style>