zc

src/views/iotDevice/intelligenceIot/iotClassification/attributePage.vue

@@ -108,101 +108,136 @@
       />
     </div>
     <!--新增弹窗-->
-    <el-dialog class="iotClassification-dialog" :title='dialogTitle' width="540px" append-to-body
+    <el-dialog class="iotClassification-dialog" :title='dialogTitle' width="1100px" append-to-body
                :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
                :close-on-click-modal="false" :close-on-press-escape="false">
       <div class="scrollbar-box" style="height:600px;">
-        <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules" class="addCheckPage-min" label-width="80px">
-          <el-form-item label="名称" prop="name">
-            <el-input v-model="dialogForm.name" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
-          </el-form-item>
-          <el-form-item label="标识" prop="code" v-if="dialogAttrType">
-            <el-select v-model="dialogForm.code" clearable placeholder="请选择" style="width: 320px">
-              <el-option
-                v-for="dict in attrTypeOptions"
-                :key="dict.code"
-                :label="dict.name"
-                :value="dict.code"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="标识" prop="code" v-if="!dialogAttrType">
-            <el-input v-model="dialogForm.code" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
-          </el-form-item>
-          <el-form-item label="属性" prop="attrName">
-            <el-input v-model="dialogForm.attrName" placeholder="请输入属性" maxLength="20" style="width:320px;"/>
-          </el-form-item>
-          <el-form-item label="单位" prop="unit">
-            <el-input v-model="dialogForm.unit" placeholder="请输入单位" maxLength="20" style="width:320px;"/>
-          </el-form-item>
-          <el-form-item label="排序" prop="sort">
-            <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
-          </el-form-item>
-          <el-form-item label="网络组件" prop="networkId">
-            <el-select v-model="dialogForm.networkId"
-                       placeholder="请选网络组件"
-                       clearable style="width:320px;">
-              <el-option
-                v-for="dict in networkOptions"
-                :key="dict.id"
-                :label="dict.moduleName"
-                :value="dict.id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="阈值" prop="threshhold">
-            <el-input-number v-model="dialogForm.threshhold" controls-position="right" :precision="2" :step="0.1" :min="-9999999" :max="9999999" style="width:320px;"></el-input-number>
-          </el-form-item>
-          <el-form-item label="是否波动" prop="isFluctuation">
-            <el-radio-group v-model="dialogForm.isFluctuation">
-              <el-radio :label="true">启用</el-radio>
-              <el-radio :label="false">禁用</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="波动方向" prop="fluctuationDirection" v-if="dialogForm.isFluctuation">
-            <el-radio-group v-model="dialogForm.fluctuationDirection">
-              <el-radio :label="-1">负向</el-radio>
-              <el-radio :label="0">正负双向</el-radio>
-              <el-radio :label="1">正向</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="波动范围" prop="fluctuationRange" v-if="dialogForm.isFluctuation">
-            <el-input v-model="dialogForm.fluctuationRange" placeholder="请输入波动范围" maxLength="4" style="width:320px;"/>
-          </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input placeholder="请输入备注" maxLength='100' type="textarea" style="width:320px;"
-                      resize="none" v-model="dialogForm.remark" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"></el-input>
-          </el-form-item>
-          <el-form-item label="正常icon" prop="icon">
-            <el-upload
-              style="width:150px;"
-              class="iotClassification-dialog-upload"
-              :action="uploadImgUrl"
-              :show-file-list="false"
-              :on-success="(res)=>handleAvatarSuccess(res,'icon')"
-              :headers="headers"
-              :before-upload="(file)=>beforeAvatarUpload(file)">
-              <div class="center-img" style="margin-left:20px;">
-                <img v-if="dialogForm.icon" :src="dialogForm.icon" style="max-width:40px;max-height:40px;">
-                <p v-if="!dialogForm.icon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#0183FA;"></p>
+        <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules"
+                 class="addCheckPage-min" label-width="110px">
+          <div class="iotClassification-dialog-form-box">
+            <div class="iotClassification-dialog-form-left-box">
+              <el-form-item label="名称：" prop="name">
+                <el-input v-model="dialogForm.name" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
+              </el-form-item>
+              <el-form-item label="标识：" prop="code" v-if="dialogAttrType">
+                <el-select v-model="dialogForm.code" clearable placeholder="请选择" style="width: 320px">
+                  <el-option
+                    v-for="dict in attrTypeOptions"
+                    :key="dict.code"
+                    :label="dict.name"
+                    :value="dict.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="标识：" prop="code" v-if="!dialogAttrType">
+                <el-input v-model="dialogForm.code" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
+              </el-form-item>
+              <el-form-item label="属性：" prop="attrName">
+                <el-input v-model="dialogForm.attrName" placeholder="请输入属性" maxLength="20" style="width:320px;"/>
+              </el-form-item>
+              <el-form-item label="单位：" prop="unit">
+                <el-input v-model="dialogForm.unit" placeholder="请输入单位" maxLength="20" style="width:320px;"/>
+              </el-form-item>
+              <el-form-item label="排序：" prop="sort">
+                <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
+              </el-form-item>
+              <el-form-item label="备注：" prop="remark">
+                <el-input placeholder="请输入备注" maxLength='100' type="textarea" style="width:320px;"
+                          resize="none" v-model="dialogForm.remark" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"></el-input>
+              </el-form-item>
+              <div>
+                <el-form-item label="正常icon：" prop="icon">
+                  <el-upload
+                    style="width:100px;"
+                    class="iotClassification-dialog-upload"
+                    :action="uploadImgUrl"
+                    :show-file-list="false"
+                    :on-success="(res)=>handleAvatarSuccess(res,'icon')"
+                    :headers="headers"
+                    :before-upload="(file)=>beforeAvatarUpload(file)">
+                    <div class="center-img" style="margin-left:20px;">
+                      <img v-if="dialogForm.icon" :src="dialogForm.icon" style="max-width:40px;max-height:40px;">
+                      <p v-if="!dialogForm.icon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#0183FA;"></p>
+                    </div>
+                  </el-upload>
+                </el-form-item>
+                <el-form-item label="异常icon：" prop="exceptionIcon">
+                  <el-upload
+                    style="width:100px;"
+                    class="iotClassification-dialog-upload"
+                    :action="uploadImgUrl"
+                    :show-file-list="false"
+                    :on-success="(res)=>handleAvatarSuccess(res,'exceptionIcon')"
+                    :headers="headers"
+                    :before-upload="(file)=>beforeAvatarUpload(file)">
+                    <div class="center-img" style="margin-left:20px;">
+                      <img v-if="dialogForm.exceptionIcon" :src="dialogForm.exceptionIcon" style="max-width:40px;max-height:40px;">
+                      <p v-if="!dialogForm.exceptionIcon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#E65D6E;"></p>
+                    </div>
+                  </el-upload>
+                </el-form-item>
               </div>
-            </el-upload>
-          </el-form-item>
-          <el-form-item label="异常icon" prop="exceptionIcon">
-            <el-upload
-              style="width:150px;"
-              class="iotClassification-dialog-upload"
-              :action="uploadImgUrl"
-              :show-file-list="false"
-              :on-success="(res)=>handleAvatarSuccess(res,'exceptionIcon')"
-              :headers="headers"
-              :before-upload="(file)=>beforeAvatarUpload(file)">
-              <div class="center-img" style="margin-left:20px;">
-                <img v-if="dialogForm.exceptionIcon" :src="dialogForm.exceptionIcon" style="max-width:40px;max-height:40px;">
-                <p v-if="!dialogForm.exceptionIcon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#E65D6E;"></p>
+            </div>
+            <div class="iotClassification-dialog-form-right-box">
+              <el-form-item label="网络组件：" prop="networkId">
+                <el-select v-model="dialogForm.networkId"
+                           placeholder="请选网络组件"
+                           clearable style="width:320px;">
+                  <el-option
+                    v-for="dict in networkOptions"
+                    :key="dict.id"
+                    :label="dict.moduleName"
+                    :value="dict.id"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="阈值：" prop="threshhold">
+                <el-input-number v-model="dialogForm.threshhold" controls-position="right" :precision="2" :step="0.1" :min="-9999999" :max="9999999" style="width:320px;"></el-input-number>
+              </el-form-item>
+              <el-form-item label="是否波动：" prop="isFluctuation">
+                <el-radio-group v-model="dialogForm.isFluctuation">
+                  <el-radio :label="true">启用</el-radio>
+                  <el-radio :label="false">禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="波动方向：" prop="fluctuationDirection" v-if="dialogForm.isFluctuation">
+                <el-radio-group v-model="dialogForm.fluctuationDirection">
+                  <el-radio :label="-1">负向</el-radio>
+                  <el-radio :label="0">正负双向</el-radio>
+                  <el-radio :label="1">正向</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="波动范围：" prop="fluctuationRange" v-if="dialogForm.isFluctuation">
+                <el-input v-model="dialogForm.fluctuationRange" placeholder="请输入波动范围" maxLength="4" style="width:320px;"/>
+              </el-form-item>
+              <div class="for-params-max-box">
+                <p class="for-params-title-p">自定义参数：</p>
+                <div class="for-params-big-box">
+                  <div class='for-params-box' v-for="(item,index) in dialogForm.params">
+                    <el-form-item label="" :prop="'params.'+index+'.key'" :rules="dialogRules.key">
+                      <el-input
+                        v-model="item.key"
+                        maxLength="30"
+                        placeholder="请输入键"
+                        style="width:155px;"
+                      />
+                    </el-form-item>
+                    <el-form-item label="" :prop="'params.'+index+'.value'" :rules="dialogRules.value">
+                      <el-input
+                        v-model="item.value"
+                        maxLength="30"
+                        placeholder="请输入值"
+                        style="width:155px;"
+                      />
+                    </el-form-item>
+                    <span class="el-icon-remove del-span" @click="delItem(index)"></span>
+                  </div>
+                </div>
+                <span class="null-span" v-if="!dialogForm.params[0]">未配置</span>
+                <span class="el-icon-circle-plus add-span" @click="addItem" v-if="!dialogForm.params[4]"></span>
               </div>
-            </el-upload>
-          </el-form-item>
+            </div>
+          </div>
         </el-form>
       </div>
       <div slot="footer" class="dialog-footer dialog-footer-box">
@@ -223,6 +258,20 @@
   export default {
     name: 'attributePage',
     data(){
+      const doubleCheck = (rule, value, callback) => {
+        let self = this;
+        let num = 0;
+        for(let i=0;i<self.dialogForm.params.length;i++){
+          if(value == self.dialogForm.params[i].key){
+            num++
+          }
+        }
+        if(num > 1){
+          return callback(new Error('参数重复'));
+        }else{
+          callback();
+        }
+      };
       return{
         //上传相关
         uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
@@ -250,16 +299,7 @@
         dialogType:false,
         //标识状态(列表或者输入)
         dialogAttrType:true,
-        dialogForm:{
-          name:"",
-          code:"",
-          attrName:"",
-          unit:"",
-          icon:"",
-          exceptionIcon:"",
-          sort:1,
-          state:true,
-        },
+        dialogForm:{},
         dialogRules:{
           name: [
             { required: true, message: "请输入名称", trigger: "blur" },
@@ -281,6 +321,15 @@
             { required: true, message: "请输入排序", trigger: "blur" },
             { required: true, message: "请输入排序", validator: this.spaceJudgment, trigger: "blur" }
           ],
+          key: [
+            { required: true, message: "请输入键", trigger: "blur" },
+            { required: true, message: "请输入键", validator: this.spaceJudgment, trigger: "blur" },
+            { required: true, message: "参数重复", validator: doubleCheck, trigger: "blur" }
+          ],
+          value: [
+            { required: true, message: "请输入值", trigger: "blur" },
+            { required: true, message: "请输入值", validator: this.spaceJudgment, trigger: "blur" }
+          ],
         },
       }
     },
@@ -293,6 +342,14 @@
       this.iotAttributeAttrType();
     },
     methods:{
+      //添加自定义项
+      addItem(){
+        this.dialogForm.params.push({key:'',value:''})
+      },
+      //删除自定义项
+      delItem(index){
+        this.dialogForm.params.splice(index,1);
+      },
       //获取网络组件列表
       iotNetworkInfo(){
         iotNetworkInfo({isList:true}).then(response => {
@@ -354,6 +411,7 @@
           sort:1,
           networkId:'',
           state:true,
+          params:[],
         });
       },
       //dialog提交按钮
@@ -377,6 +435,13 @@
               icon:this.dialogForm.icon,
               exceptionIcon:this.dialogForm.exceptionIcon,
             }
+            //自定义参数
+            let minObj = {};
+            for(let i=0;i<this.dialogForm.params.length;i++){
+              minObj[this.dialogForm.params[i].key] = this.dialogForm.params[i].value
+            }
+            obj.params = this.dialogForm.params[0]?JSON.stringify(minObj):'';
+
             if(this.dialogForm.id){
               obj.id = this.dialogForm.id;
               iotAttributeUpdate(obj).then(response => {
@@ -438,6 +503,21 @@
             this.$set(this,'dialogAttrType',false);
             this.$set(this,'attrTypeOptions',[]);
           }
+          //自定义参数
+          if(row.params){
+            let minObj = row.params?JSON.parse(row.params):{};
+            let list = [];
+            Object.keys(minObj).forEach((key) => {
+              const value = minObj[key];
+              list.push({
+                key:key,
+                value:value
+              })
+            });
+            obj.params = list[0]?list:[];
+          }else{
+            obj.params = [];
+          }
           this.$set(this,'dialogForm',obj);
           this.$set(this,'dialogTitle','编辑');
           this.$set(this,'dialogType',true);
@@ -553,3 +633,53 @@
     }
   }
 </style>
+<style lang="scss">
+  .iotClassification-dialog{
+    .iotClassification-dialog-form-box{
+      display: flex;
+      .iotClassification-dialog-form-left-box{
+        flex: 1;
+      }
+      .iotClassification-dialog-form-right-box{
+        flex: 1;
+      }
+    }
+    .for-params-max-box{
+      display: flex;
+      .for-params-title-p{
+        line-height:40px;
+        text-align: right;
+        font-size:14px;
+        color:#333;
+        width:98px;
+        margin:0 12px 20px 0;
+      }
+      .for-params-big-box{
+        .for-params-box{
+          .del-span{
+            font-size:18px;
+            color:#FF6666;
+            line-height:40px;
+            width:30px;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+      }
+      .add-span{
+        font-size:18px;
+        color:#0183FA;
+        line-height:40px;
+        height:40px;
+        width:30px;
+        text-align: center;
+        cursor: pointer;
+      }
+      .null-span{
+        font-size:14px;
+        line-height:40px;
+        height:40px;
+      }
+    }
+  }
+</style>