对讲主机 门禁主机 添加页面代码提交

src/api/iot/deviceInfo.js

@@ -62,3 +62,28 @@ export function alarmHostDeviceInfo(id) {
     method: 'get',
   })
 }
+
+// 新增/编辑报警主机
+export function editNetHostDevice(query) {
+  return request({
+    url: '/iot/deviceInfo/editNetHostDevice',
+    method: 'post',
+    data: query
+  })
+}
+// 报警主机详情
+export function netHostDeviceInfo(id) {
+  return request({
+    url: '/iot/deviceInfo/netHostDeviceInfo/'+id,
+    method: 'get',
+  })
+}
+
+
+// 品牌字典
+export function brandList(type) {
+  return request({
+    url: '/system/dictionary/list/'+type,
+    method: 'get',
+  })
+}

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

@@ -0,0 +1,290 @@
+<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-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%" v-model="formData.deviceType" placeholder="请选择设备类型">
+                  <el-option
+                    v-for="item in deviceTypeList"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.key"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="设备品牌" prop="deviceBrand">
+                <el-select style="width: 100%" v-model="formData.deviceBrand" placeholder="请选择设备品牌">
+                  <el-option
+                    v-for="item in brandList"
+                    :key="item.key"
+                    :label="item.value"
+                    :value="item.key"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <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-row>
+
+          <el-row>
+            <el-col :span="24" 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-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 {
+  addDvrHostDevice, brandList,
+  dvrHostDeviceInfo,
+  editDvrHostDevice, editNetHostDevice,
+  getProductDisplayName, netHostDeviceInfo,
+  updateDvrHostDevice
+} from "@/api/iot/deviceInfo";
+import KSelect from "@/components/common/userselect.vue";
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import {addConfig, updateConfig} from "@/api/system/config";
+import * as iotApi from "@/api/iot/alarmRule";
+import {getCurOrgConnectHost} 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(),
+      deviceTypeList: [],
+      modelList: [],
+      hostConnectList: [],
+      brandList: [],
+      formDataRules: {
+        deviceName: [{required: true, message: "请输入设备名称", trigger: 'blur'}],
+        deviceType: [{required: true, message: "请选择设备类型", trigger: 'blur'}],
+        iotCode: [{required: true, message: "请选择所属主机", trigger: 'blur'}],
+        deviceBrand: [{required: true, message: "请选择设备品牌", trigger: 'blur'}],
+        serverIp: [
+          {required: true, message: '请输入主机Ip', trigger: 'blur'},
+          {validator: this.validateIp, trigger: 'blur'}
+        ],
+      },
+    };
+  },
+  dicts: [],
+  props: {},
+  watch: {},
+
+  created() {
+
+  },
+
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(["loginUser", "org"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    reset(other = {}) {
+      return {
+        id: null,
+        orgId: null,
+        iotCode: null,
+        deviceName: null,
+        deviceType: null,
+        serverIp: "",
+        enable: 0,
+
+      };
+    },
+    async refresh(id, other) {
+      if (!id) {
+        this.reset(other);
+      }else {
+        netHostDeviceInfo( id).then((response) => {
+          this.formData =response.data;
+        })
+      }
+
+    },
+    async show(id,orgId, name, other = {}) {
+      this.formData = this.reset(other);
+      this.formData.orgId = orgId;
+      this.title = '新增' + name;
+      this.initData();
+      if (id){
+        this.title = '编辑' + name;
+        this.formData.id = id;
+        await this.refresh(id, other);
+      }
+      /*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) {
+          editNetHostDevice(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;
+    },
+    getConnectHostOrg() {
+      if (!this.formData.orgId) {
+        return
+      }
+      iotApi.getCurOrgConnectHost(this.formData.orgId).then((response) => {
+        this.hostConnectList = response.data;
+      });
+    },
+    initBrand() {
+      brandList("BrandModelType").then((response) => {
+        this.brandList = response.data;
+      });
+    },
+    initDeviceType(){
+      this.deviceTypeList=[];
+      this.deviceTypeList.push({key:'24',label:'门禁主机'});
+    },
+    initData(){
+      this.getConnectHostOrg();
+      this.initBrand();
+      this.initDeviceType();
+    },
+
+
+    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();
+      }
+    },
+  },
+
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+.k-textarea{
+  .el-textarea {
+    .el-textarea__inner  {
+      font-size: 15px !important;
+    }
+  }
+}
+</style> -->

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

@@ -0,0 +1,290 @@
+<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-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%" v-model="formData.deviceType" placeholder="请选择设备类型">
+                  <el-option
+                    v-for="item in deviceTypeList"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.key"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="设备品牌" prop="deviceBrand">
+                <el-select style="width: 100%" v-model="formData.deviceBrand" placeholder="请选择设备品牌">
+                  <el-option
+                    v-for="item in brandList"
+                    :key="item.key"
+                    :label="item.value"
+                    :value="item.key"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <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-row>
+
+          <el-row>
+            <el-col :span="24" 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-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 {
+  addDvrHostDevice, brandList,
+  dvrHostDeviceInfo,
+  editDvrHostDevice, editNetHostDevice,
+  getProductDisplayName, netHostDeviceInfo,
+  updateDvrHostDevice
+} from "@/api/iot/deviceInfo";
+import KSelect from "@/components/common/userselect.vue";
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import {addConfig, updateConfig} from "@/api/system/config";
+import * as iotApi from "@/api/iot/alarmRule";
+import {getCurOrgConnectHost} 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(),
+      deviceTypeList: [],
+      modelList: [],
+      hostConnectList: [],
+      brandList: [],
+      formDataRules: {
+        deviceName: [{required: true, message: "请输入设备名称", trigger: 'blur'}],
+        deviceType: [{required: true, message: "请选择设备类型", trigger: 'blur'}],
+        iotCode: [{required: true, message: "请选择所属主机", trigger: 'blur'}],
+        deviceBrand: [{required: true, message: "请选择设备品牌", trigger: 'blur'}],
+        serverIp: [
+          {required: true, message: '请输入主机Ip', trigger: 'blur'},
+          {validator: this.validateIp, trigger: 'blur'}
+        ],
+      },
+    };
+  },
+  dicts: [],
+  props: {},
+  watch: {},
+
+  created() {
+
+  },
+
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(["loginUser", "org"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    reset(other = {}) {
+      return {
+        id: null,
+        orgId: null,
+        iotCode: null,
+        deviceName: null,
+        deviceType: null,
+        serverIp: "",
+        enable: 0,
+
+      };
+    },
+    async refresh(id, other) {
+      if (!id) {
+        this.reset(other);
+      }else {
+        netHostDeviceInfo( id).then((response) => {
+          this.formData =response.data;
+        })
+      }
+
+    },
+    async show(id,orgId, name, other = {}) {
+      this.formData = this.reset(other);
+      this.formData.orgId = orgId;
+      this.title = '新增' + name;
+      this.initData();
+      if (id){
+        this.title = '编辑' + name;
+        this.formData.id = id;
+        await this.refresh(id, other);
+      }
+      /*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) {
+          editNetHostDevice(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;
+    },
+    getConnectHostOrg() {
+      if (!this.formData.orgId) {
+        return
+      }
+      iotApi.getCurOrgConnectHost(this.formData.orgId).then((response) => {
+        this.hostConnectList = response.data;
+      });
+    },
+    initBrand() {
+      brandList("BrandModelType").then((response) => {
+        this.brandList = response.data;
+      });
+    },
+    initDeviceType(){
+      this.deviceTypeList=[];
+      this.deviceTypeList.push({key:'23',label:'对讲主机'});
+    },
+    initData(){
+      this.getConnectHostOrg();
+      this.initBrand();
+      this.initDeviceType();
+    },
+
+
+    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();
+      }
+    },
+  },
+
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+.k-textarea{
+  .el-textarea {
+    .el-textarea__inner  {
+      font-size: 15px !important;
+    }
+  }
+}
+</style> -->

src/views/iot/deviceInfo/index.vue

@@ -135,6 +135,8 @@
     <detail-info-page ref="detailInfo"></detail-info-page>
     <add-dvr-host ref="addDvrHostDialog"></add-dvr-host>
     <add-alarm-host ref="addAlarmHostDialog"></add-alarm-host>
+    <add-talk-host ref="addTalkHostDialog"></add-talk-host>
+    <add-door-host ref="addDoorHostDialog"></add-door-host>
   </div>
 </template>
 
@@ -143,12 +145,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 addTalkHost from "./dialog.addTalkHost.vue"
+import addDoorHost from "./dialog.addDoorHost.vue"
 import {deptTreeSelect} from "@/api/system/public";
 import {list,} from "@/api/iot/deviceInfo";
 
 export default {
   name: "IotDeviceInfo",
-  components: {OrgTree, detailInfoPage, addDvrHost, addAlarmHost},
+  components: {OrgTree, detailInfoPage, addDvrHost, addAlarmHost,addTalkHost,addDoorHost},
   data() {
     return {
       checkList: [],
@@ -393,6 +397,14 @@ export default {
       if (this.activeName == 'alarmHost') {
         this.$refs.addAlarmHostDialog.show(row.id,row.orgId, '报警主机', other = {});
       }
+      if (this.activeName == 'talkDevice' || this.activeName == 'doorDevice') {
+        let str = this.activeName == 'talkDevice'?'对讲主机':'门禁主机';
+        this.$refs.addTalkHostDialog.show(row.id,row.orgId, str, other = {});
+      }
+      if (this.activeName == 'talkDevice' || this.activeName == 'doorDevice') {
+        let str = this.activeName == 'talkDevice'?'对讲主机':'门禁主机';
+        this.$refs.addDoorHostDialog.show(row.id,row.orgId, str, other = {});
+      }
     },
     addHost(other = {}) {
       if (this.activeName == 'dvs') {
@@ -401,7 +413,12 @@ export default {
       if (this.activeName == 'alarmHost') {
         this.$refs.addAlarmHostDialog.show(null,this.queryParams.orgId, '报警主机', other = {});
       }
-
+      if (this.activeName == 'talkDevice') {
+        this.$refs.addTalkHostDialog.show(null,this.queryParams.orgId, '对讲主机', other = {});
+      }
+      if (this.activeName == 'doorDevice') {
+        this.$refs.addDoorHostDialog.show(null,this.queryParams.orgId, '门禁主机', other = {});
+      }
     }
   },
 };