报警主机添加页面代码提交

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

@@ -0,0 +1,396 @@
+<template>
+  <div class="edu-training-edit">
+    <DialogCom :title="title" @close="onHide" :visible.sync="isShow" width="960px">
+      <div class="page-body">
+        <el-form :model="formData" :rules="formDataRules" size="small" ref="form" label-position="right"
+                 label-width="120px" label-prefix=":">
+          <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-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-input v-model="formData.hostDeviceType" 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-form>
+
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+        <el-button @click="onHide">取 消</el-button>
+        <!--        <el-button type="primary" @click="onSave">保存</el-button>-->
+
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import {mapMutations, mapState} from "vuex";
+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";
+
+export default {
+  components: {KSelect, OrgTree},
+  data() {
+    const params = this.$route.params;
+    return {
+      id: params ? params.id : null,
+      isShow: false,
+      title: '',
+      formData: this.reset(),
+      productList: [],
+      modelList: [],
+      hostConnectList: [],
+      formDataRules: {
+        deviceName: [{required: true, message: "请输入设备名称"}],
+        deviceProduct: [{required: true, message: "请选择产品类型"}],
+        serverIp: [
+          {required: true, message: '请输入主机Ip', trigger: 'blur'},
+          {validator: this.validateIp, trigger: 'blur'}
+        ],
+        serverPort: [
+          {required: true, message: '请输入主机端口', trigger: 'blur'},
+          {validator: this.validatePort, trigger: 'blur'}
+        ],
+        userName: [{required: true, message: "请输入用户名"}],
+        password: [{required: true, message: "请输入密码"}],
+        models: [{required: true, message: "请选择产品型号"}],
+      },
+    };
+  },
+  dicts: [],
+  props: {},
+  watch: {
+    'formData.deviceProduct': function(newVal) {
+      this.$forceUpdate();
+    }
+  },
+
+  created() {
+
+  },
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(["loginUser", "org"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    reset(other = {}) {
+      return {
+        id: null,
+        orgId: "",
+        iotCode: "",
+        deviceName: "",
+        deviceProduct: "",
+        serverIp: "",
+        serverPort: "",
+        userName: "",
+        password: "",
+        listenAddress: "",
+        listenPort: "",
+        deviceMac: "",
+        deviceUserCode: "",
+        iotAddress: "",
+        models: "",
+        enable: 0,
+        ...other,
+      };
+    },
+    async refresh(id, other) {
+      if (!id) {
+        this.reset(other);
+      }
+
+    },
+    async show(orgId, name, other = {}) {
+      this.formData = this.reset(other);
+      this.formData.orgId = orgId;
+      this.title = '新增' + name;
+      this.initData();
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 确保在 DOM 更新之后清除表单验证状态
+      });
+      this.isShow = true;
+    },
+
+    // 事件
+    onHide() {
+      this.isShow = false;
+      this.formData = this.reset();
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 确保在 DOM 更新之后清除表单验证状态
+      });
+    },
+    async onSubmit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          editDvrHostDevice(this.formData).then(r => {
+            if (!this.formData.id) {
+              this.$modal.msgSuccess("新增成功");
+            } else {
+              this.$modal.msgSuccess("修改成功");
+            }
+            this.onHide();
+          })
+        }
+      });
+    },
+    getDefaultOrg(org) {
+      this.orgName = org.name;
+      this.formData.orgId = org.id;
+    },
+    getDefaultKey(key) {
+      this.formData.orgId = key;
+    },
+    // 节点单击事件
+    clickTreeNode(data) {
+      if (!data) {
+        return;
+      }
+      this.formData.orgId = data.id;
+    },
+    initData() {
+      getProductDisplayName('AlarmHost').then((response) => {
+        this.productList = response.data;
+      })
+      this.getConnectHostOrg();
+    },
+    getConnectHostOrg() {
+      if (!this.formData.orgId) {
+        return
+      }
+      iotApi.getConnectHostOrg(this.formData.orgId).then((response) => {
+        this.hostConnectList = response.data;
+      });
+    },
+    productChange(item) {
+      // 找到选中的产品类型
+      let selectedProduct = this.productList.find(s => s.name === item);
+      if (selectedProduct) {
+        // 提取models字段并转换为数组
+        const models = JSON.parse(selectedProduct.models);
+        // 将提取的models数组赋值给modelList
+        this.modelList = models;
+        this.formData.models = this.modelList[0];
+      }
+    },
+
+    validateIp(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('请输入服务Ip'));
+      }
+      const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+      if (!ipRegex.test(value)) {
+        callback(new Error('服务Ip格式不正确'));
+      } else {
+        callback();
+      }
+    },
+    validatePort(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('请输入服务端口'));
+      }
+      const port = parseInt(value, 10);
+      if (isNaN(port)) {
+        callback(new Error('服务端口必须是一个数字'));
+      } else if (port < 1 || port > 65535) {
+        callback(new Error('服务端口必须在1到65535之间'));
+      } else {
+        callback();
+      }
+    },
+    showListenAddress(){
+      let arr = [ 'InAnter_BM1600NTSmall'];
+      return  arr.includes(this.formData.deviceProduct) ;
+    },
+
+    showUserName(){
+      let arr = [
+        'DaHuaAlarmHost',
+        'BOSCH_CMS',
+        'Hik_DS19A',
+        'HengTong_CKWU01C',
+      ];
+      return  arr.includes(this.formData.deviceProduct) ;
+    },
+    showMacAddress(){
+      let arr = [
+        'HoneywellOCX_IPM',
+        'HikModule',
+      ];
+      return arr.includes(this.formData.deviceProduct) ;
+    }
+
+
+
+  },
+
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+.k-textarea{
+  .el-textarea {
+    .el-textarea__inner  {
+      font-size: 15px !important;
+    }
+  }
+}
+</style> -->

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

@@ -252,7 +252,7 @@ export default {
       this.formData.orgId = data.id;
     },
     initData() {
-      getProductDisplayName('VGS').then((response) => {
+      getProductDisplayName('DVS').then((response) => {
         this.productList = response.data;
       })
       this.getConnectHostOrg();

src/views/iot/deviceInfo/index.vue

@@ -130,6 +130,7 @@
       </div>
     <detail-info-page ref="detailInfo"></detail-info-page>
     <add-dvr-host ref="addDvrHostDialog"></add-dvr-host>
+    <add-alarm-host ref="addAlarmHostDialog"></add-alarm-host>
   </div>
 </template>
 
@@ -137,13 +138,14 @@
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import detailInfoPage from "./detailDialog.vue"
 import addDvrHost from "./dialog.addDvrHost.vue"
+import addAlarmHost from "./dialog.addAlarmHost.vue"
 import { deptTreeSelect } from "@/api/system/public";
 import {
   list,
 } from "@/api/iot/deviceInfo";
 export default {
   name: "IotDeviceInfo",
-  components: { OrgTree, detailInfoPage,addDvrHost},
+  components: { OrgTree, detailInfoPage,addDvrHost,addAlarmHost},
   data() {
     return {
       checkList: [],
@@ -385,6 +387,9 @@ export default {
       if (this.activeName=='dvs'){
         this.$refs.addDvrHostDialog.show(this.queryParams.orgId,'监控主机',other = {});
       }
+      if (this.activeName=='alarmHost'){
+        this.$refs.addAlarmHostDialog.show(this.queryParams.orgId,'报警主机',other = {});
+      }
 
     }
   },