物联监测-设备管理页面代码提交

src/api/iot/deviceInfo.js

@@ -21,3 +21,10 @@ export function getAlarmHostDetailById(id) {
     method: 'get',
   })
 }
+
+export function getProductDisplayName(type) {
+  return request({
+    url: '/iot/deviceInfo/getProductDisplayName/'+type,
+    method: 'get',
+  })
+}

src/components/K-FileUpload/index.vue

@@ -115,7 +115,6 @@ export default {
           // this.fileList=val;
           // 首先将值转为数组
           const list = Array.isArray(val) ? val : this.value.split(',');
-          console.log("watch fileList", list)
           if (list.length > this.limit) {
             this.handleExceed();
             return;
@@ -221,14 +220,14 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res, file, fileList) {
-      console.log("handleUploadSuccess", res, file, fileList);
+      //console.log("handleUploadSuccess", res, file, fileList);
       this.fileList = fileList;
       this.$emit("input", this.listToTagObj(this.fileValueList));
     },
     // 删除文件
     handleDelete(item) {
       if (item && item.status === "success") {
-        console.log("handleDelete index", item)
+        //console.log("handleDelete index", item)
         //this.fileList.splice(item, 1);
         // console.log("handleDelete",item,this.fileValueList)
 
@@ -238,7 +237,7 @@ export default {
           this.fileValueList.splice(index, 1);
         }
         //this.fileValueList.splice(item, 1);
-        console.log("handleDelete deleted", this.fileValueList)
+        //console.log("handleDelete deleted", this.fileValueList)
         this.fileList = this.listToTagObj(this.fileValueList);
         this.$emit("input", this.listToTagObj(this.fileValueList));
       }
@@ -265,7 +264,7 @@ export default {
     uploadFile(fileObj) {
       let formData = new FormData();
       formData.append('file', fileObj.file);
-      console.log("this.fileValueList.length", this.fileValueList.length)
+      //console.log("this.fileValueList.length", this.fileValueList.length)
       if (this.fileValueList.length <= this.limit) {
         upload(formData).then(res => {
           /*上传成功*/
@@ -303,11 +302,11 @@ export default {
         // console.log("listToString2 i",i);
         tempArry.push(JSON.stringify({url: list[i].url, name: list[i].name, fileCode: list[i].fileCode}));
       }
-      console.log("listToString2", tempArry);
+      //console.log("listToString2", tempArry);
       return tempArry;
     },
     onPreview(file) {
-      console.log(file);
+      //console.log(file);
       var name = file.name;
       let index = this.fileValueList.findIndex(x => x.name == file.name);
       this.fileValueList[index]

src/components/common/userselect.vue

@@ -47,7 +47,6 @@ export default {
     },
     params(n, o) {
       if (JSON.stringify(n) == JSON.stringify(o)) return;
-      console.log("params refresh",n,o)
       this.refresh();
     },
     // 当数值变化后, 但是不在数据源里面, 刷新数据源

src/components/orgTree/orgQuerySelector.vue

@@ -114,13 +114,6 @@ export default {
           return;
         });
       } else {
-        console.log(
-          "getDeptTree",
-          this.hangsheTree,
-          this.businessTree,
-          this.wholeTree
-        );
-
         let treeList=null;
         if (this.hangsheTree) {
           treeList = this.$store.getters.depTree;
@@ -160,7 +153,7 @@ export default {
         }
 
         if (defaultSelectedNode) {
-          
+
           // console.trace();
           this.$emit("defaultKey", defaultSelectedNode.id);
           this.$emit("defaultOrg", { ...defaultSelectedNode });

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

@@ -0,0 +1,326 @@
+<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="checkRole"
+                  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-row>
+            <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="serverPort">
+                <el-input v-model="formData.serverPort" placeholder="请输入主机端口"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户名" prop="userName">
+                <el-input v-model="formData.userName" maxlength="50" placeholder="请输入用户名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="formData.password" show-password maxlength="50" placeholder="请输入密码"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <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>
+
+            <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-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 {getProductDisplayName} 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";
+
+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: {},
+
+  created() {
+
+  },
+
+  mounted() {
+
+  },
+  computed: {
+    ...mapState(["loginUser", "org"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    reset(other = {}) {
+      return {
+        id: null,
+        deviceName: null,
+        deviceProduct: null,
+        serverIp: "",
+        serverPort: "",
+        userName: "",
+        password: "",
+        models: "",
+        enable: 0,
+        ...other,
+      };
+    },
+    async refresh(id, other) {
+      if (!id) {
+        this.reset(other);
+      }
+
+    },
+    async show(id, orgId, name,other = {}) {
+      if (id) {
+        this.title = '编辑' + name;
+        this.formData = await this.refresh(id);
+      } else {
+        this.formData.orgId = orgId;
+        console.log("this.formData.orgId",this.formData.orgId)
+        this.title = '新增' + name;
+        this.initData();
+        this.formData = this.reset(other);
+      }
+      this.isShow = true;
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 确保在 DOM 更新之后清除表单验证状态
+      });
+    },
+
+    // 事件
+    onHide() {
+      this.isShow = false;
+      this.formData = this.reset();
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(); // 确保在 DOM 更新之后清除表单验证状态
+      });
+    },
+    async onSubmit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.formData.id != undefined) {
+            updateConfig(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addConfig(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    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('VGS').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();
+      }
+    },
+  },
+
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+.k-textarea{
+  .el-textarea {
+    .el-textarea__inner  {
+      font-size: 15px !important;
+    }
+  }
+}
+</style> -->

src/views/iot/deviceInfo/index.vue

@@ -58,8 +58,16 @@
                 size="mini"
                 @click="resetQuery"
 
-              >重置</el-button
-              >
+              >重置</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                icon="el-icon-refresh"
+                size="mini"
+                @click="addHost"
+                v-if="activeName !='fsu'"
+              >新增设备</el-button>
             </el-col>
             <right-toolbar
               :showSearch.sync="showSearch"
@@ -121,19 +129,21 @@
         />
       </div>
     <detail-info-page ref="detailInfo"></detail-info-page>
+    <add-dvr-host ref="addDvrHostDialog"></add-dvr-host>
   </div>
 </template>
 
 <script>
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import detailInfoPage from "./detailDialog.vue"
+import addDvrHost from "./dialog.addDvrHost.vue"
 import { deptTreeSelect } from "@/api/system/public";
 import {
   list,
 } from "@/api/iot/deviceInfo";
 export default {
   name: "IotDeviceInfo",
-  components: { OrgTree, detailInfoPage },
+  components: { OrgTree, detailInfoPage,addDvrHost},
   data() {
     return {
       checkList: [],
@@ -316,9 +326,6 @@ export default {
     },
     /** 查询【请填写功能名称】列表 */
     getList() {
-      console.log(this.queryParams)
-      console.log(this.queryParams.deviceType)
-      console.log(this.queryParams.deviceTypeList)
       this.loading = true;
       list(this.queryParams).then((response) => {
         this.deviceInfoList = response.rows;
@@ -374,6 +381,12 @@ export default {
     showDetail(row){
       this.$refs.detailInfo.show(row.id,row.deviceType);
     },
+    addHost(other = {}){
+      if (this.activeName=='dvs'){
+        this.$refs.addDvrHostDialog.show(null,this.queryParams.orgId,'监控主机',other = {});
+      }
+
+    }
   },
 };
 </script>