提交物模型可视化操作

src/components/DialogTemplate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container dialog-bit">
-    <el-dialog class="eldialog-wrap-t" :title="title" :visible.sync="visible" :width="width">
+    <el-dialog class="eldialog-wrap-t" @close="close" :title="title" :close-on-click-modal="false" :visible.sync="visible" :width="width">
       <slot name="dialog-center"></slot>
       <div slot="footer" class="dialog-footer">
         <slot name="dialog-footer"></slot>
@@ -16,7 +16,8 @@ export default {
       type: String
     },
     visible: {
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     width: {
       type: String,
@@ -24,7 +25,12 @@ export default {
         return '450px'
       }
     }
-  }
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    }
+  },
 }
 </script>
 <style lang="scss" >

src/store/getters.js

@@ -14,6 +14,8 @@ const getters = {
   permissions: state => state.user.permissions,
   permission_routes: state => state.permission.routes,
   sidebarRouters:state => state.permission.sidebarRouters,
-  userId: state => state.user.userId
+  userId: state => state.user.userId,
+  attributeList: state => state.attribute.attributeList,
+  groupList: state => state.attribute.groupList
 }
 export default getters

src/store/index.js

@@ -6,6 +6,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import attribute from './modules/attribute'
 
 Vue.use(Vuex)
 
@@ -13,6 +14,7 @@ const store = new Vuex.Store({
   modules: {
     app,
     user,
+    attribute,
     tagsView,
     permission,
     settings

src/store/modules/attribute.js

@@ -0,0 +1,100 @@
+
+import { Notification, MessageBox, Message } from 'element-ui'
+
+const attribute = {
+  state: {
+    attributeList: [],
+    groupList: []
+  },
+
+  mutations: {
+    SET_ATTRIBUTE_LIST: (state, list) => {
+      state.attributeList = list
+    },
+    SET_GROUP_LIST: (state, list) => {
+      state.groupList = list
+    },
+    PUSH_ATTRIBUTE: (state, item) => {
+      state.attributeList.push(item)
+    },
+    PUSH_GROUP: (state, item) => {
+      state.groupList.push(item)
+    },
+    UPDATE_ATTRIBUTE: (state, {item, idx}) => {
+      state.attributeList[idx] = item
+    },
+    UPDATE_GROUP: (state, {item, idx}) => {
+      state.groupList[idx] = item
+    },
+    DELETE_ATTRIBUTE: (state, idx) => {
+      state.attributeList.splice(idx,1);
+    },
+    DELETE_GROUP: (state, idx) => {
+      state.groupList.splice(idx,1);
+    },
+    GET_ATTRIBUTE_ITEM: (state, idx) => {
+      return state.attributeList[idx]
+    },
+    GET_GROUP_ITEM: (state, idx) => {
+      return state.groupList[idx]
+    }
+  },
+
+  actions: {
+    // 初始化 属性和分组数据
+    InitAttributeAndGroup({ commit, state }, data) {
+      commit('SET_ATTRIBUTE_LIST', data.attrList)
+      commit('SET_GROUP_LIST', data.groupList)
+      console.log('res:', state)
+    },
+    // 新增 属性
+    AddAttribute({ commit, state }, attr) {
+      commit('PUSH_ATTRIBUTE', attr)
+    },
+    // 新增 分组
+    AddGroup({ commit, state }, data) {
+      commit('PUSH_GROUP', data)
+    },
+    // 获取 属性 单个信息
+    GetAttributeItem({ commit, state }, idx) {
+      return new Promise((resolve, reject) => {
+        resolve(state.attributeList[idx])
+      })
+    },
+     // 获取 分组 单个信息
+    GetGroupItem({ commit, state }, idx) {
+      return new Promise((resolve, reject) => {
+        resolve(state.groupList[idx])
+      })
+    },
+    // 修改 属性
+    EditAttribute({ commit, state }, param) {
+      commit('UPDATE_ATTRIBUTE', param)
+    },
+    // 修改 属性
+    EditGroup({ commit, state }, param) {
+      commit('UPDATE_GROUP', param)
+    },
+    // 删除分组 删除分组 判断分组是否有属性，有属性就不能删除
+    DeleteGroup({ commit, state }, idx) {
+      let groupItem = state.groupList[idx];
+      let result = state.attributeList.filter(v => {
+        if (v['cmdKey'] === groupItem['cmdKey']) {
+          return true
+        }
+      })
+      if (!result) {
+        commit('DELETE_GROUP', idx)
+      } else {
+        Message.error('当前分组已关联参数，无法删除！');
+      }
+    },
+    // 删除属性
+    DeleteAttribute({ commit, state }, idx) {
+      commit('DELETE_ATTRIBUTE', idx)
+    }
+
+  }
+}
+
+export default attribute

src/utils/validate.js

@@ -15,6 +15,16 @@ export function validUsername(str) {
   return valid_map.indexOf(str.trim()) >= 0
 }
 
+
+/**
+ * @param {string} strAndNumber 50字符
+ * @returns {Boolean}
+ */
+ export function strAndNumber(str) {
+  const reg = /^[A-Za-z0-9]{1,50}$/
+  return reg.test(str)
+}
+
 /**
  * @param {string} url
  * @returns {Boolean}

src/views/iot/model/index.vue

@@ -27,7 +27,13 @@
       </el-form-item>
 
       <el-form-item label="协议类型" prop="protocolType">
-        <el-select v-model="queryParams.protocolType" @change="handleQuery" placeholder="请选择协议类型" clearable size="small">
+        <el-select
+          v-model="queryParams.protocolType"
+          @change="handleQuery"
+          placeholder="请选择协议类型"
+          clearable
+          size="small"
+        >
           <el-option
             :label="keys"
             :value="vals"
@@ -37,8 +43,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -51,38 +65,80 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['iot:model:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table
       v-loading="loading"
       :data="modelList"
-      :default-sort="{prop: 'createTime', order: 'descending'}"
+      :default-sort="{ prop: 'createTime', order: 'descending' }"
       @sort-change="sortChange"
     >
-      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
+      <el-table-column
-      <el-table-column label="型号名称" align="left" width="200px" prop="modelName" />
+        type="index"
-      <el-table-column label="厂商名称" align="left" width="200px" prop="vendorName" />
+        label="序号"
-      <el-table-column label="产品PK" align="left" width="200px" prop="prodKey" />
+        align="center"
+        :index="indexFormatter"
+        width="80px"
+      ></el-table-column>
+      <el-table-column
+        label="型号名称"
+        align="left"
+        width="200px"
+        prop="modelName"
+      />
+      <el-table-column
+        label="厂商名称"
+        align="left"
+        width="200px"
+        prop="vendorName"
+      />
+      <el-table-column
+        label="产品PK"
+        align="left"
+        width="200px"
+        prop="prodKey"
+      />
       <el-table-column label="产品密钥" align="left" prop="prodSecret" />
 
-      <el-table-column label="设备类型" align="center" prop="deviceType" width="120px">
+      <el-table-column
+        label="设备类型"
+        align="center"
+        prop="deviceType"
+        width="120px"
+      >
         <template slot-scope="scope">
           <span v-text="deviceTypeList[scope.row.deviceType]"></span>
         </template>
       </el-table-column>
 
-      <el-table-column label="协议类型" align="center" prop="protocolType" width="120px">
+      <el-table-column
+        label="协议类型"
+        align="center"
+        prop="protocolType"
+        width="120px"
+      >
         <template slot-scope="scope">
           <span v-text="protocolTypeOpt[scope.row.protocolType]"></span>
         </template>
       </el-table-column>
 
-      <el-table-column label="设备状态" align="center" prop="modelStatus" width="100px">
+      <el-table-column
+        label="设备状态"
+        align="center"
+        prop="modelStatus"
+        width="100px"
+      >
         <template slot-scope="scope">
-          <el-tag type="success" v-if="scope.row.modelStatus === '0'">启用</el-tag>
+          <el-tag type="success" v-if="scope.row.modelStatus === '0'"
+            >启用</el-tag
+          >
           <el-tag type="danger" v-else>禁用</el-tag>
         </template>
       </el-table-column>
@@ -107,14 +163,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['iot:model:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['iot:model:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -128,81 +186,115 @@
     />
 
     <!-- 添加或修改型号对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
+    <el-dialog
+      class="eldialog-wrap"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="厂商：" prop="vendorId">
+        <el-row>
-          <el-input
+          <el-col :span="12">
-            v-model="form.vendorName"
+            <el-form-item label="厂商：" prop="vendorId">
-            placeholder="点击选择厂商"
+              <el-input
-            @focus="openTableSelectDialog()"
+                v-model="form.vendorName"
-          />
+                placeholder="点击选择厂商"
-        </el-form-item>
+                @focus="openTableSelectDialog()"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="协议类型：" prop="protocolType">
+              <el-select
+                v-model="form.protocolType"
+                style="width: 100%"
+                placeholder="请选择协议类型"
+                size="small"
+              >
+                <el-option
+                  :label="keys"
+                  :value="vals"
+                  v-for="(keys, vals) in protocolTypeOpt"
+                  :key="vals"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="产品PK：" prop="prodKey">
+              <el-input
+                v-if="form.protocolType === 'OFFICIAL'"
+                placeholder="请填写产品PK"
+                v-model="form.prodKey"
+              ></el-input>
+              <el-input
+                v-else
+                v-model="form.prodKey"
+                placeholder="点击选择产品"
+                @focus="openProductTableSelectDialog()"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="型号名称：" prop="modelName">
+              <el-input v-model="form.modelName" placeholder="请输入型号名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="产品json："
+              prop="prodJson"
+              v-if="form.protocolType === 'OFFICIAL'"
+            >
+              <attribute-view
+                v-if="open"
+                :arttributeList="form.prodJson"
+                :groupList="form.remark"
+                @handleEvent="handleViewEvent"
+                ref="attributeref"
+              ></attribute-view>
+            </el-form-item>
+          </el-col>
 
-      <el-form-item label="协议类型：" prop="protocolType">
+          <el-col :span="24">
-          <el-select
+            <el-form-item label="设备类型：" prop="deviceType">
-            v-model="form.protocolType"
+              <el-select
-            style="width: 100%;"
+                v-model="form.deviceType"
-            placeholder="请选择协议类型"
+                style="width: 100%"
-            size="small"
+                placeholder="请选择设备类型"
-          >
+                clearable
-            <el-option
+                size="small"
-              :label="keys"
+              >
-              :value="vals"
+                <el-option
-              v-for="(keys, vals) in protocolTypeOpt"
+                  :label="keys"
-              :key="vals"
+                  :value="vals"
-            />
+                  v-for="(keys, vals) in deviceTypeList"
-          </el-select>
+                  :key="vals"
-        </el-form-item>
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
 
-        <el-form-item label="产品PK：" prop="prodKey">
+          <el-col :span="24">
-          <el-input v-if="form.protocolType === 'OFFICIAL'" placeholder="请填写产品PK" v-model="form.prodKey" ></el-input>
+            <el-form-item label="参数设置：" v-show="form.deviceType">
-          <el-input
+              <span style="color: red; font-size: 12px"
-            v-else
+                >*注意：锁定即参数不可修改；未锁则可以修改。</span
-            v-model="form.prodKey"
+              >
-            placeholder="点击选择产品"
+              <div class="form-params-wrap">
-            @focus="openProductTableSelectDialog()"
+                <param-wrap
-          />
+                  ref="paramWrap"
-        </el-form-item>
+                  :typeKeys="form.deviceType"
-
+                ></param-wrap>
-        <el-form-item label="型号名称：" prop="modelName">
+              </div>
-          <el-input v-model="form.modelName" placeholder="请输入型号名称" />
+            </el-form-item>
-        </el-form-item>
+          </el-col>
-
+        </el-row>
-        <el-form-item label="产品json：" prop="prodJson" v-if="form.protocolType === 'OFFICIAL'">
-          <el-input v-model="form.prodJson" type="textarea" :rows="5" placeholder="请输入产品json" />
-        </el-form-item>
-
-        <el-form-item label="分组json：" prop="remark" v-if="form.protocolType === 'OFFICIAL'">
-          <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入分组json" />
-        </el-form-item>
-
-
-        <el-form-item label="设备类型：" prop="deviceType">
-          <el-select
-            v-model="form.deviceType"
-            style="width: 100%;"
-            placeholder="请选择设备类型"
-            clearable
-            size="small"
-          >
-            <el-option
-              :label="keys"
-              :value="vals"
-              v-for="(keys, vals) in deviceTypeList"
-              :key="vals"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="参数设置：" v-show="form.deviceType">
-          <span style="color: red; font-size: 12px;">*注意：锁定即参数不可修改；未锁则可以修改。</span>
-          <div class="form-params-wrap">
-            <param-wrap ref="paramWrap" :typeKeys="form.deviceType"></param-wrap>
-          </div>
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
+        <el-button type="primary" size="mini" @click="submitForm"
+          >确 定</el-button
+        >
         <el-button @click="cancel" size="mini">取 消</el-button>
       </div>
     </el-dialog>
@@ -226,10 +318,46 @@
       />
 
       <div slot="footer" class="dialog-footer">
-        <el-button size="mini" type="primary" @click="resuleClick">确 定</el-button>
+        <el-button size="mini" type="primary" @click="resuleClick"
-        <el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
+          >确 定</el-button
+        >
+        <el-button
+          size="mini"
+          @click="
+            () => {
+              selectTableShow = false;
+            }
+          "
+          >取 消</el-button
+        >
       </div>
     </el-dialog>
+
+    <dialog-template :title="componentTitle" @close="() => {AttributeViewShow = false}" :visible="AttributeViewShow" width="750px">
+
+        <component
+          v-if="AttributeViewShow"
+          :is="componectVal"
+          :tempType="childOpt.type"
+          :paramIdx="childOpt.paramIdx"
+          :other="{
+            action: '',
+            prodPK: form.prodKey,
+            cmdKey: '',
+          }"
+          :paramsList="functionList"
+          ref="componentref"
+          @ok="compEventOk"
+          slot="dialog-center"
+        ></component>
+
+        <div slot="dialog-footer">
+          <el-button type="primary" size="mini" @click="submitAttribute"
+            >确 定</el-button
+          >
+          <el-button size="mini" @click="() => {AttributeViewShow = false}">取 消</el-button>
+        </div>
+      </dialog-template>
   </div>
 </template>
 
@@ -242,16 +370,23 @@ import {
   updateModel,
   exportModel,
   listProductList,
-  listModelType
+  listModelType,
 } from "@/api/iot/model";
 import { listVendor } from "@/api/iot/vendor";
 import { listDeviceTypeList } from "@/api/iot/device";
 import SelectTableWrap from "@/components/SelectTable/index";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
+import AttributeView from "@/views/profile/attribute/index";
+
+import DialogTemplate from "@/components/DialogTemplate";
+
+import attributeForm from "@/views/profile/attribute/attributeForm";
+import groupForm from "@/views/profile/attribute/groupForm";
+import paramsJson from "@/views/profile/attribute/paramsJson"
 
 const deviceStartsOpt = {
   0: "禁用",
-  1: "启用"
+  1: "启用",
 };
 
 // const protocolTypeOpt = {
@@ -262,11 +397,23 @@ export default {
   name: "Model",
   components: {
     SelectTableWrap,
-    ParamWrap
+    ParamWrap,
+    AttributeView,
+    DialogTemplate,
+    attributeForm,
+    groupForm,
+    paramsJson
   },
   data() {
     return {
+      componectVal: 'attributeForm',
+      childOpt: {
+        type: 'add',
+        paramIdx: 0
+      },
       protocolTypeOpt: [],
+      AttributeViewShow: false,
+      AttributeFormViewShow: false,
       selectTableShow: false,
       tableSelectOption: {},
       selectResult: {},
@@ -300,26 +447,27 @@ export default {
         prodSecret: null,
         protocolType: null,
         orderByColumn: "createTime",
-        isAsc: "desc"
+        isAsc: "desc",
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         vendorId: [
-          { required: true, message: "厂商不能为空", trigger: "blur" }
+          { required: true, message: "厂商不能为空", trigger: "blur" },
         ],
         prodKey: [
-          { required: true, message: "产品PK不能为空", trigger: "blur" }
+          { required: true, message: "产品PK不能为空", trigger: "blur" },
         ],
         modelName: [
-          { required: true, message: "型号名称不能为空", trigger: "blur" }
+          { required: true, message: "型号名称不能为空", trigger: "blur" },
         ],
         deviceType: [
-          { required: true, message: "设备类型不能为空", trigger: "blur" }
+          { required: true, message: "设备类型不能为空", trigger: "blur" },
-        ]
+        ],
       },
-      deviceTypeList: {}
+      functionList: [],
+      deviceTypeList: {},
     };
   },
   created() {
@@ -328,15 +476,39 @@ export default {
     this.getList();
   },
   methods: {
+    handleViewEvent(data) {
+      console.log(data)
+      this.componentTitle = data.title
+      this.childOpt.type = data.type,
+      this.childOpt.paramIdx = data.paramIdx
+      this.AttributeViewShow = true
+      this.functionList = JSON.parse(JSON.stringify(this.$store.getters.attributeList))
+      this.componectVal = data.component;
+    },
+    submitAttribute() {
+      if (this.childOpt.type === 'param') {
+        this.AttributeViewShow = false
+        return
+      }
+      if (this.$refs.componentref) {
+        this.$refs.componentref.submitForm()
+      }
+    },
+    compEventOk() {
+      //执行
+      this.AttributeViewShow = false
+      this.$forceUpdate()
+      this.$refs.attributeref.forceUpdate(this.componectVal)
+    },
     getModelTypeList() {
-      listModelType().then(res => {
+      listModelType().then((res) => {
-        this.protocolTypeOpt = res.data
+        this.protocolTypeOpt = res.data;
-      })
+      });
     },
     sortChange(column) {
       const sort = {
         isAsc: column.order === "descending" ? "desc" : "asc",
-        orderByColumn: column.prop
+        orderByColumn: column.prop,
       };
       this.queryParams = Object.assign(this.queryParams, sort);
       this.handleQuery();
@@ -348,7 +520,7 @@ export default {
     },
     // 查询设备类型列表
     getDeviceTypeList() {
-      listDeviceTypeList().then(response => {
+      listDeviceTypeList().then((response) => {
         this.deviceTypeList = response.data;
       });
     },
@@ -356,32 +528,22 @@ export default {
       this.selectResult = {};
       this.tableSelectOption = {
         otherOption: {
-          tableType: "product"
+          tableType: "product",
         },
         queryOpt: {
           disable: false,
           labelWidth: "68px",
           params: {
-            protocolType: this.form.protocolType
+            protocolType: this.form.protocolType,
           },
           page: {
             pageSize: 10,
             pageNum: 1,
-            total: 0
+            total: 0,
           },
           inline: true,
           queryChilds: [
-            // {
+          ],
-            //   style: "",
-            //   placeholder: "产品名称",
-            //   clearable: true,
-            //   label: "产品名称",
-            //   type: "input",
-            //   key: "prodName",
-            //   size: "small",
-            //   value: ""
-            // }
-          ]
         },
         tableOpt: {
           loading: false,
@@ -397,7 +559,7 @@ export default {
               align: "left",
               width: "",
               "show-overflow-tooltip": false,
-              tempType: "span"
+              tempType: "span",
             },
             {
               style: "",
@@ -407,34 +569,14 @@ export default {
               align: "left",
               width: "",
               "show-overflow-tooltip": false,
-              tempType: "span"
+              tempType: "span",
             },
-            // {
-            //   style: "",
-            //   label: "ProdSecret",
-            //   type: "",
-            //   prop: "prodSecret",
-            //   align: "left",
-            //   width: "",
-            //   "show-overflow-tooltip": false,
-            //   tempType: "span"
-            // },
-            // {
-            //   style: "",
-            //   label: "节点类型",
-            //   type: "",
-            //   prop: "prodNodeTypeName",
-            //   align: "left",
-            //   width: "",
-            //   "show-overflow-tooltip": false,
-            //   tempType: "span"
-            // }
           ],
           tableList: {
-            type: Array
+            type: Array,
-          }
+          },
         },
-        tableList: []
+        tableList: [],
       };
       this.selectTableShow = true;
     },
@@ -443,7 +585,7 @@ export default {
       this.selectResult = {};
       this.tableSelectOption = {
         otherOption: {
-          tableType: "vendor"
+          tableType: "vendor",
         },
         queryOpt: {
           disable: false,
@@ -451,12 +593,12 @@ export default {
           params: {
             vendorName: "",
             vendorAddress: "",
-            vendorContact: ""
+            vendorContact: "",
           },
           page: {
             pageSize: 10,
             pageNum: 1,
-            total: 0
+            total: 0,
           },
           inline: true,
           queryChilds: [
@@ -468,7 +610,7 @@ export default {
               type: "input",
               key: "vendorName",
               size: "small",
-              value: ""
+              value: "",
             },
             {
               style: "",
@@ -478,7 +620,7 @@ export default {
               type: "input",
               key: "vendorAddress",
               size: "small",
-              value: ""
+              value: "",
             },
             {
               style: "",
@@ -488,9 +630,9 @@ export default {
               type: "input",
               key: "vendorContact",
               size: "small",
-              value: ""
+              value: "",
-            }
+            },
-          ]
+          ],
         },
         tableOpt: {
           loading: false,
@@ -506,7 +648,7 @@ export default {
               align: "left",
               width: "",
               "show-overflow-tooltip": false,
-              tempType: "span"
+              tempType: "span",
             },
             {
               style: "",
@@ -516,7 +658,7 @@ export default {
               align: "left",
               width: "",
               "show-overflow-tooltip": false,
-              tempType: "span"
+              tempType: "span",
             },
             {
               style: "",
@@ -526,14 +668,14 @@ export default {
               align: "left",
               width: "",
               "show-overflow-tooltip": false,
-              tempType: "span"
+              tempType: "span",
-            }
+            },
           ],
           tableList: {
-            type: Array
+            type: Array,
-          }
+          },
         },
-        tableList: []
+        tableList: [],
       };
       this.selectTableShow = true;
     },
@@ -548,14 +690,14 @@ export default {
     productChildList(data) {
       listProductList(
         Object.assign(data.page, data.param, { selected: 1 })
-      ).then(response => {
+      ).then((response) => {
         this.tableSelectOption.tableList = response.data;
         // this.tableSelectOption.queryOpt.page.total = Number(response.total);
       });
     },
     vendorChildList(data) {
       listVendor(Object.assign(data.page, data.param, { selected: 1 })).then(
-        response => {
+        (response) => {
           this.tableSelectOption.tableList = response.rows;
           this.tableSelectOption.queryOpt.page.total = Number(response.total);
         }
@@ -598,7 +740,7 @@ export default {
     /** 查询型号列表 */
     getList() {
       this.loading = true;
-      listModel(this.queryParams).then(response => {
+      listModel(this.queryParams).then((response) => {
         this.modelList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -618,8 +760,8 @@ export default {
         prodKey: "",
         deviceType: "",
         paramList: [],
-        protocolType: 'IOTOS',
+        protocolType: "IOTOS",
-        prodJson: ''
+        prodJson: "",
       };
       this.resetForm("form");
     },
@@ -635,7 +777,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.modelId);
+      this.ids = selection.map((item) => item.modelId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
@@ -650,7 +792,7 @@ export default {
       this.reset();
       const modelId = row.modelId || this.ids;
       const _this = this;
-      getModel(modelId).then(response => {
+      getModel(modelId).then((response) => {
         _this.form = response.data;
         _this.open = true;
         _this.title = "修改型号";
@@ -661,17 +803,32 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
+          if(this.form.protocolType === 'OFFICIAL') {
+            let attrList = this.$store.getters.attributeList.map(v => {
+              v['sourceId'] = this.form.prodKey
+              return v
+            });
+
+            let groupList = this.$store.getters.groupList.map(v => {
+              v['sourceId'] = this.form.prodKey
+              return v
+            });
+            console.log(groupList, attrList)
+            this.form.prodJson = JSON.stringify(attrList) || null;
+            this.form.remark = JSON.stringify(groupList) || null;
+          }
+
           this.form.paramList = this.$refs.paramWrap.getResult();
           if (this.form.modelId != null) {
-            updateModel(this.form).then(response => {
+            updateModel(this.form).then((response) => {
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addModel(this.form).then(response => {
+            addModel(this.form).then((response) => {
               this.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -686,9 +843,9 @@ export default {
       this.$confirm("是否删除该选项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
-        .then(function() {
+        .then(function () {
           return delModel(modelIds);
         })
         .then(() => {
@@ -702,16 +859,16 @@ export default {
       this.$confirm("是否确认导出所有型号数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
-        .then(function() {
+        .then(function () {
           return exportModel(queryParams);
         })
-        .then(response => {
+        .then((response) => {
           this.download(response.msg);
         });
-    }
+    },
-  }
+  },
 };
 </script>
 <style lang="scss">

src/views/profile/attribute/attributeForm.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="attribute-form-view">
+    <el-form
+      ref="form"
+      style="padding: 20px 20px 0px 20px"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="参数名称:" prop="funName">
+        <el-input v-model="form.funName" placeholder="请输入参数名称" />
+      </el-form-item>
+      <el-form-item label="标识符:" prop="funKey">
+        <el-input
+          v-model="form.funKey"
+          @input="inputChange"
+          :disabled="tempType === 'update'"
+          placeholder="请输入标识符"
+        />
+      </el-form-item>
+      <el-form-item label="数据类型:" prop="funDataType">
+        <el-select
+          v-model="form.funDataType"
+          @change="funDataTypeChange"
+          placeholder="请选择数据类型"
+        >
+          <el-option
+            v-for="(dice, value) in funDataTypeOption"
+            :value="value"
+            :key="value"
+            :label="dice"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分组:" prop="cmdKey">
+        <el-select v-model="form.cmdKey" placeholder="请选分组">
+          <el-option
+            v-for="(item, idx) in groupList"
+            :value="item.cmdKey"
+            :key="idx"
+            :label="item.cmdName"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="保留小数位:"
+        v-if="form.funDataType === 'FLOAT'"
+        prop="funValAcc"
+      >
+        <el-input
+          onkeyup="value=value.replace(/[^\d]/g,'')"
+          @input="inputChange"
+          v-model="form.funValAcc"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="传输类型:" prop="funRwType">
+        <el-select v-model="form.funRwType" placeholder="请选择传输类型">
+          <el-option
+            v-for="(dice, value) in funRwTypeOption"
+            :value="value"
+            :key="value"
+            :label="dice"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="计量单位:" prop="unitName">
+        <el-input v-model="form.unitName" @input="inputChange" placeholder="请输入计量单位" />
+      </el-form-item>
+
+      <div class="item-title-wrap">数据校验</div>
+      <div class="custom-wrap">
+        <el-button
+          size="mini"
+          :style="`position: absolute; top: ${ form.funDataType === 'FLOAT' ? '585px ' : '530px' }; left: 40px`"
+          v-if="form.funValidType === 'ENUM'"
+          @click="addJsonObj"
+          >添加数值</el-button
+        >
+        <el-form-item
+          label="校验方式:"
+          :style="form.funValidType === 'ENUM' ? 'height: 80px;' : ''"
+          prop="funValidType"
+        >
+          <el-select
+            v-model="form.funValidType"
+            @change="funValidTypeChange"
+            placeholder="请选择校验方式"
+          >
+            <el-option
+              v-for="(dice, value) in funValidTypeOption"
+              v-show="
+                !(
+                  (form.funDataType === 'TEXT' && value === 'RANGE') ||
+                  (form.funDataType !== 'TEXT' && value === 'LENGTH') ||
+                  (form.funDataType === 'BOOL' && value === 'RANGE') ||
+                  (form.funDataType === 'BOOL' && value === 'LENGTH')
+                )
+              "
+              :value="value"
+              :key="value"
+              :label="dice"
+            />
+          </el-select>
+        </el-form-item>
+
+        <div class="enumTypeDiv" v-if="form.funValidType === 'ENUM'">
+          <div class="enum-item">
+            <json-editor
+              ref="jsonEditors"
+              :jsonString="form.funObj"
+              @event="jsonEvent"
+            />
+          </div>
+        </div>
+
+        <el-row
+          :gutter="10"
+          class="max-min-row"
+          v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
+        >
+          <el-col :span="12">
+            <el-form-item label prop="funValMin">
+              <el-input v-model="form.funValMin" @input="inputChange" placeholder="最小值" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-input disabled placeholder="最小值" />
+          </el-col>
+        </el-row>
+
+        <el-row
+          :gutter="10"
+          class="max-min-row"
+          v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
+        >
+          <el-col :span="12">
+            <el-form-item label prop="funValMax">
+              <el-input v-model="form.funValMax" @input="inputChange" placeholder="最大值" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-input disabled placeholder="最大值" />
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters, mapState } from "vuex";
+import JsonEditor from "./jsonEditor";
+const funDataTypeOption = {
+  INT32: "整数型",
+  FLOAT: "浮点型",
+  TEXT: "字符串",
+  BOOL: "布尔型",
+};
+const funRwTypeOption = {
+  READWRITE: "可上报可下发",
+  READ: "只上报",
+  WRITE: "只下发",
+};
+
+const funValidTypeOption = {
+  ENUM: "枚举",
+  RANGE: "范围",
+  LENGTH: "长度",
+  NOT: "不校验",
+};
+
+export default {
+  name: "AttributeForm",
+  components: { JsonEditor },
+  props: {
+    paramIdx: {
+      type: Number,
+      default: 0,
+    },
+    tempType: {
+      type: String,
+      default: "add",
+    },
+  },
+  computed: {
+    ...mapGetters(["groupList"]),
+  },
+  data() {
+    return {
+      funDataTypeOption,
+      funRwTypeOption,
+      funValidTypeOption,
+      form: {},
+      // 表单校验
+      rules: {
+        funName: [
+          { required: true, message: "参数名称不能为空", trigger: "blur" },
+        ],
+        cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
+        funKey: [
+          { required: true, message: "标识符不能为空", trigger: "blur" },
+        ],
+        funDataType: [
+          { required: true, message: "数据类型不能为空", trigger: "blur" },
+        ],
+        funRwType: [
+          { required: true, message: "传输类型不能为空", trigger: "blur" },
+        ],
+        funValidType: [
+          { required: true, message: "校验方式不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    if (this.tempType !== "add" && this.paramIdx >= 0) {
+      this.getParamIten(this.paramIdx);
+    }
+  },
+  methods: {
+    inputChange() {
+      this.$forceUpdate()
+    },
+    cmdChange(val) {
+      let newArr = this.groupList.filter((v) => {
+        if (v["cmdKey"] === val) {
+          return v["cmdType"];
+        }
+      });
+      this.form.funRwType = newArr[0] || this.form.funRwType;
+    },
+    getParamIten(idx) {
+      this.$store.dispatch("GetAttributeItem", idx).then((res) => {
+        console.log(res);
+        this.form = JSON.parse(JSON.stringify(res));
+      });
+    },
+    /** 提交验证 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          // 新增和修改操作
+          if (this.tempType === "add") {
+            this.$store.dispatch("AddAttribute", this.form);
+          } else if (this.tempType === "update") {
+            this.$store.dispatch("EditAttribute", {
+              item: this.form,
+              idx: this.paramIdx,
+            });
+          }
+          this.$emit("ok");
+        }
+      });
+    },
+    // 回调 ok
+    //数据类型值变化出发方法
+    funDataTypeChange(val) {
+      this.form.funValAcc = null;
+      this.form.funValidType = "";
+    },
+    addJsonObj() {
+      this.$refs["jsonEditors"].addHandel();
+    },
+    jsonEvent(data) {
+      this.form.funObj = data;
+    },
+    // 校验方式发生变化的方法
+    funValidTypeChange(val) {
+      this.form.funValidType = val;
+      this.form.funValMax = "";
+      this.form.funValMin = "";
+      this.form.funObj = "";
+      if (val === "ENUM") {
+        this.form.funObj = '{"0":""}';
+      }
+      this.$forceUpdate()
+    },
+  },
+};
+</script>
+<style lang="scss">
+.attribute-form-view {
+  .item-title-wrap {
+    font-size: 15px;
+    font-weight: 600;
+    height: 30px;
+  }
+  .custom-wrap {
+    border: 1px solid #d8d7d7;
+    padding-top: 20px;
+    background: #f0f0f0;
+    padding-right: 10px;
+    .el-form-item {
+      border-bottom: 1px dashed #bdbdbd;
+      padding-bottom: 12px;
+      margin-bottom: 10px;
+      margin-left: 10px;
+    }
+    .el-form-item--medium .el-form-item__label {
+      width: 90px !important;
+    }
+    .el-form-item--medium .el-form-item__content {
+      margin-left: 90px !important;
+    }
+    .enumTypeDiv {
+      display: flex;
+      justify-content: flex-end;
+      max-height: 200px;
+      overflow: auto;
+      .enum-item {
+        width: 90%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+      }
+    }
+    .max-min-row {
+      width: 90%;
+      padding: 0;
+      margin-left: 5% !important;
+      margin-right: 0 !important;
+      .el-form-item {
+        border: 0;
+        margin-left: 0;
+      }
+      .el-form-item--medium .el-form-item__content {
+        margin-left: 0px !important;
+      }
+    }
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-input-number {
+    width: 100%;
+  }
+  .enumTypeDiv {
+    display: flex;
+    justify-content: flex-end;
+    max-height: 200px;
+    overflow: auto;
+    .enum-item {
+      width: 90%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+  }
+  .max-min-row {
+    width: 90%;
+    padding: 0;
+    margin-left: 5% !important;
+    margin-right: 0 !important;
+    .el-form-item {
+      border: 0;
+      margin-left: 0;
+    }
+    .el-form-item--medium .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+</style>
+
+

src/views/profile/attribute/attributeView.vue

@@ -0,0 +1,553 @@
+<template>
+  <div class="app-container product-customparams-wrap">
+    <el-row :gutter="10" class="mb8" v-show="isOption">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-s-platform"
+          size="mini"
+          @click="handleParams"
+          >物模型参数</el-button
+        >
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="functionList" height="300px">
+      <el-table-column type="index" width="75" align="center" label="序号" />
+      <el-table-column label="参数名称" align="left" prop="funName" />
+      <el-table-column label="标识符" align="left" prop="funKey" />
+      <el-table-column label="数据类型" align="left" prop="funDataType" >
+         <template slot-scope="scope">
+           <span>{{ funDataTypeOption[scope.row.funDataType] }}</span>
+         </template>
+      </el-table-column>
+      <el-table-column label="所属分组" align="left" prop="funDataType" >
+         <template slot-scope="scope">
+           <span>{{ scope.row.cmdKey }}</span>
+         </template>
+      </el-table-column>
+      <el-table-column label="传输类型" align="left" prop="funRwType" >
+        <template slot-scope="scope">
+           <span>{{ funRwTypeOption[scope.row.funRwType] }}</span>
+         </template>
+      </el-table-column>
+
+      <!-- <el-table-column label="属性" align="left" prop="funObj" /> -->
+      <el-table-column
+        v-if="isOption"
+        label="操作"
+        width="100px"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row, scope.$index, 'update')"
+            >修改</el-button
+          >
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row, scope.$index)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改功能定义对话框 -->
+    <el-dialog class="eldialog-wrap" :title="title" :visible.sync="attributeopen" width="550px">
+      <el-form
+        ref="form"
+        style="padding: 20px 20px 0px 20px"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="参数名称:" prop="funName">
+          <el-input v-model="form.funName" placeholder="请输入参数名称" />
+        </el-form-item>
+        <el-form-item label="标识符:" prop="funKey">
+          <el-input
+            v-model="form.funKey"
+            :disabled="tempType === 'update'"
+            placeholder="请输入标识符"
+          />
+        </el-form-item>
+        <el-form-item label="数据类型:" prop="funDataType">
+          <el-select
+            v-model="form.funDataType"
+            @change="funDataTypeChange"
+            placeholder="请选择数据类型"
+          >
+            <el-option
+              v-for="(dice, value) in funDataTypeOption"
+              :value="value"
+              :key="value"
+              :label="dice"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="保留小数位:"
+          v-if="form.funDataType === 'FLOAT'"
+          prop="funValAcc"
+        >
+          <el-input
+            onkeyup="value=value.replace(/[^\d]/g,'')"
+            v-model="form.funValAcc"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="传输类型:" prop="funRwType">
+          <el-select v-model="form.funRwType" placeholder="请选择传输类型">
+            <el-option
+              v-for="(dice, value) in funRwTypeOption"
+              :value="value"
+              :key="value"
+              :label="dice"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="计量单位:" prop="unitName">
+          <el-input v-model="form.unitName" placeholder="请输入计量单位" />
+        </el-form-item>
+
+        <div class="item-title-wrap">数据校验</div>
+        <div class="custom-wrap">
+          <el-button
+            size="mini"
+            style="position: absolute; top: 460px; left: 40px"
+            v-if="form.funValidType === 'ENUM'"
+            @click="addJsonObj"
+            >添加数值</el-button
+          >
+          <el-form-item
+            label="校验方式:"
+            :style="form.funValidType === 'ENUM' ? 'height: 80px;' : ''"
+            prop="funValidType"
+          >
+            <el-select
+              v-model="form.funValidType"
+              @change="funValidTypeChange"
+              placeholder="请选择校验方式"
+            >
+              <el-option
+                v-for="(dice, value) in funValidTypeOption"
+                v-show="
+                  !(
+                    (form.funDataType === 'TEXT' && value === 'RANGE') ||
+                    (form.funDataType !== 'TEXT' && value === 'LENGTH') ||
+                    (form.funDataType === 'BOOL' && value === 'RANGE') ||
+                    (form.funDataType === 'BOOL' && value === 'LENGTH')
+                  )
+                "
+                :value="value"
+                :key="value"
+                :label="dice"
+              />
+            </el-select>
+          </el-form-item>
+
+          <div class="enumTypeDiv" v-if="form.funValidType === 'ENUM'">
+            <div class="enum-item">
+              <json-editor
+                ref="jsonEditors"
+                :jsonString="form.funObj"
+                @event="jsonEvent"
+              />
+            </div>
+          </div>
+
+          <el-row
+            :gutter="10"
+            class="max-min-row"
+            v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
+          >
+            <el-col :span="12">
+              <el-form-item label prop="funValMin">
+                <el-input v-model="form.funValMin" placeholder="最小值" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-input disabled placeholder="最小值" />
+            </el-col>
+          </el-row>
+
+          <el-row
+            :gutter="10"
+            class="max-min-row"
+            v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
+          >
+            <el-col :span="12">
+              <el-form-item label prop="funValMax">
+                <el-input v-model="form.funValMax" placeholder="最大值" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-input disabled placeholder="最大值" />
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+
+      <div class="form-button-div">
+        <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
+        <el-button size="mini" @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      class="params-eldialog"
+      title="物模型参数"
+      top="5vh"
+      :visible.sync="paramsOpen"
+      width="800px"
+    >
+      <params-json-wrap
+        v-if="paramsOpen === true"
+        :other="{
+          action: '',
+          prodPK: sourceId,
+          cmdKey: '',
+        }"
+        :paramsList="functionList"
+      ></params-json-wrap>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import JsonEditor from "./jsonEditor.vue";
+import ParamsJsonWrap from "./paramsJson";
+const funDataTypeOption = {
+  INT32: "整数型",
+  FLOAT: "浮点型",
+  TEXT: "字符串",
+  BOOL: "布尔型",
+};
+const funRwTypeOption = {
+  READWRITE: "可上报可下发",
+  READ: "只上报",
+  WRITE: "只下发",
+};
+
+const funValidTypeOption = {
+  ENUM: "枚举",
+  RANGE: "范围",
+  LENGTH: "长度",
+  NOT: "不校验",
+};
+
+export default {
+  name: "CustomParams",
+  components: {
+    JsonEditor,
+    ParamsJsonWrap,
+  },
+  props: {
+    sourceId: {
+      type: [Number, String],
+      default: "",
+    },
+    isOption: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      funDataTypeOption,
+      funRwTypeOption,
+      funValidTypeOption,
+      paramsOpen: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 功能定义表格数据
+      functionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      attributeopen: false,
+      // 查询参数
+      queryParams: {},
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        funName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+        funKey: [{ required: true, message: "标识符不能为空", trigger: "blur" }],
+        funDataType: [{ required: true, message: "数据类型不能为空", trigger: "blur" }],
+        funRwType: [{ required: true, message: "传输类型不能为空", trigger: "blur" }],
+        funValidType: [{ required: true, message: "校验方式不能为空", trigger: "blur" }],
+      },
+      baseModelId: "",
+      tempType: "",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    //数据类型值变化出发方法
+    funDataTypeChange(val) {
+      this.form.funValAcc = null;
+      this.form.funValidType = "";
+    },
+    addJsonObj() {
+      this.$refs["jsonEditors"].addHandel();
+    },
+    jsonEvent(data) {
+      this.form.funObj = data;
+    },
+    // 校验方式发生变化的方法
+    funValidTypeChange(val) {
+      this.form.funValMax = "";
+      this.form.funValMin = "";
+      this.form.funObj = "";
+      if (val === "ENUM") {
+        this.form.funObj = '{"0":""}';
+      }
+    },
+    /** 查询功能定义列表 */
+    getList() {
+      this.loading = true
+      this.functionList = []
+      setTimeout(() => {
+        this.functionList = this.$store.getters.attributeList
+        this.$forceUpdate()
+        this.loading = false
+      }, 50)
+    },
+    // 取消按钮
+    cancel() {
+      this.attributeopen = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        sourceId: this.sourceId,
+        mainId: undefined,
+        funName: undefined,
+        funKey: undefined,
+        funDataType: undefined,
+        funValAcc: undefined,
+        funRwType: undefined,
+        funValidType: undefined,
+        funValMin: undefined,
+        funValMax: undefined,
+        funObj: {},
+        unitName: "",
+      };
+      this.resetForm("form");
+    },
+    handleParams() {
+       this.$emit('handleClick', { type: 'param', idx: 0 })
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$emit('handleClick', { type: 'add', idx: 0 })
+    },
+    handleCope(row) {
+      this.reset();
+      const funId = row.funId
+      this.tempType = "create";
+      this.title = "复制自定义参数";
+      this.form = row;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row, idx, type) {
+      this.$emit('handleClick', { 'type': type, 'idx': idx })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          // 新增和修改操作
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row, idx) {
+      var that = this
+      this.$confirm(
+        // '是否确认删除功能定义编号为"' + funIds + '"的数据项?',
+        "是否删除该选项",
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 执行删除数据
+          that.$store.dispatch('DeleteAttribute', idx)
+          that.$emit('handleClick', { 'type': 'list' })
+        })
+    },
+  },
+};
+</script>
+<style lang="scss">
+.product-customparams-wrap {
+  .nl-dialog .el-dialog:not(.is-fullscreen) {
+    margin-top: 3vh !important;
+  }
+  .eldialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #bdbdbd;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .form-button-div {
+      margin-top: 20px;
+      height: 60px;
+      border-top: 1px solid #bdbdbd;
+      text-align: right;
+      width: 100%;
+      padding-top: 15px;
+
+      .el-button + .el-button {
+        margin-right: 10px;
+      }
+      .el-button {
+        padding-top: 8px;
+      }
+    }
+    .el-select {
+      width: 100%;
+    }
+    .el-input-number {
+      width: 100%;
+    }
+    .item-title-wrap {
+      font-size: 15px;
+      font-weight: 600;
+      height: 30px;
+    }
+    .custom-wrap {
+      border: 1px solid #d8d7d7;
+      padding-top: 20px;
+      background: #f0f0f0;
+      padding-right: 10px;
+      .el-form-item {
+        border-bottom: 1px dashed #bdbdbd;
+        padding-bottom: 12px;
+        margin-bottom: 10px;
+        margin-left: 10px;
+      }
+      .el-form-item--medium .el-form-item__label {
+        width: 90px !important;
+      }
+      .el-form-item--medium .el-form-item__content {
+        margin-left: 90px !important;
+      }
+      .enumTypeDiv {
+        display: flex;
+        justify-content: flex-end;
+        max-height: 200px;
+        overflow: auto;
+        .enum-item {
+          width: 90%;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+      }
+      .max-min-row {
+        width: 90%;
+        padding: 0;
+        margin-left: 5% !important;
+        margin-right: 0 !important;
+        .el-form-item {
+          border: 0;
+          margin-left: 0;
+        }
+        .el-form-item--medium .el-form-item__content {
+          margin-left: 0px !important;
+        }
+      }
+    }
+  }
+  .params-eldialog {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      height: 100%;
+      max-height: calc(100vh - 200px);
+      overflow: auto;
+      padding: 20px 5px;
+    }
+  }
+}
+.enumTypeDiv .enumTypeDiv::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 3px;
+}
+.enumTypeDiv::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #9e9d9d;
+  background: #ffffff;
+}
+.enumTypeDiv::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #c4c4c4;
+  background: #dededea6;
+}
+.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+.product-customparams-wrap .nl-dialog .form-button-div {
+  margin-top: 0;
+}
+</style>

src/views/profile/attribute/groupForm.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="分组名称:" prop="cmdName">
+        <el-input v-model="form.cmdName" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="标识符:" prop="cmdKey">
+        <el-input
+          v-model="form.cmdKey"
+          :disabled="form.cmdId"
+          placeholder="请输入标识符"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+const cmdTypeOption = {
+  UP: "上报",
+  DOWN: "下发"
+};
+export default {
+  name: "GroupForm",
+  props: {
+    paramIdx: {
+      type: Number,
+      default: 0
+    },
+    tempType: {
+      type: String,
+      default: 'add'
+    }
+  },
+  data() {
+    return {
+      cmdTypeOption,
+      form: {},
+      // 表单校验
+      rules: {
+        cmdName: [
+          { required: true, message: "分组名称不能为空", trigger: "blur" },
+        ],
+        cmdKey: [
+          { required: true, message: "标识符不能为空", trigger: "blur" },
+        ],
+        cmdType: [
+          { required: true, message: "分组类型不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    if (this.tempType !== 'add' && this.paramIdx >= 0) {
+      this.getParamIten(this.paramIdx)
+    }
+  },
+  methods: {
+    getParamIten(idx) {
+      var that = this
+       this.$store.dispatch("GetGroupItem", idx).then(res => {
+        console.log(res)
+        that.form = JSON.parse(JSON.stringify(res));
+      })
+    },
+    /** 提交验证 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          // 新增和修改操作
+          if (this.tempType === 'add') {
+            this.$store.dispatch("AddGroup", this.form)
+          } else if (this.tempType === 'update') {
+            this.$store.dispatch('EditGroup', { 'item':　this.form, 'idx': this.paramIdx })
+          }
+          this.$emit('ok')
+        }
+      });
+    },
+  },
+};
+</script>

src/views/profile/attribute/groupView.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="app-container prodcut-cmd-wrap">
+    <el-row :gutter="10" class="mb8" v-if="isOption">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">创建分组</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="cmdList" height="300px">
+      <el-table-column type="index" width="55" align="center" label="序号" />
+      <el-table-column label="名称" align="center" prop="cmdName" />
+      <el-table-column label="标识符" align="center" prop="cmdKey" />
+      <!-- <el-table-column label="类型" align="center" width prop="cmdType">
+        <template slot-scope="scope">
+          <span v-text="cmdTypeOption[scope.row.cmdType]"></span>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="示例" v-if="isOption" align="center" width>
+        <template slot-scope="scope">
+          <el-button type="text" @click="getCmdById(scope.row)">查看</el-button>
+        </template>
+      </el-table-column> -->
+      <el-table-column label="操作" align="center" width="200" v-if="isOption" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'update')">修改</el-button>
+          <!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'cope')">复制</el-button> -->
+          <el-button size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改分组集对话框 -->
+    <div class="eldialog-wrap">
+      <el-dialog :title="title" :visible.sync="open" width="650px">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="分组名称:" prop="cmdName">
+            <el-input v-model="form.cmdName" placeholder="请输入名称" />
+          </el-form-item>
+          <el-form-item label="标识符:" prop="cmdKey">
+            <el-input v-model="form.cmdKey" :disabled="form.cmdId" placeholder="请输入标识符" />
+          </el-form-item>
+          <el-form-item label="分组类型:" prop="cmdType">
+            <el-select
+              style="width: 100%;"
+              v-model="form.cmdType"
+              @change="cmdTypeChange"
+              placeholder="请选择分组类型"
+            >
+              <el-option
+                :label="doce"
+                v-for="(doce, value) in cmdTypeOption"
+                :key="value"
+                :value="value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <div class="st" style="display: flex; justify-content: flex-end;">
+            <el-transfer
+              style="text-align: left; display: inline-block"
+              v-model="value"
+              filterable
+              :props="{
+								key: 'funId',
+								label: 'funName'
+							}"
+              :titles="['全选', '全选']"
+              :format="{
+								noChecked: '${total}',
+								hasChecked: '${checked}/${total}'
+							}"
+              :data="transferData"
+            ></el-transfer>
+          </div>
+        </el-form>
+        <div slot="footer" class="form-button-div">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <el-dialog
+      class="params-eldialog"
+      :title="cmdParamTitle"
+      :visible.sync="paramsOpen"
+      width="800px"
+    >
+      <params-json-wrap
+        v-if="paramsOpen === true"
+        :other="{
+        action: '',
+        prodPK: sourceId,
+        cmdKey: selectCmdInfo.cmdKey
+      }"
+        :paramsList="paramsList"
+      ></params-json-wrap>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ParamsJsonWrap from "./paramsJson";
+import { mapGetters, mapState } from "vuex";
+
+const cmdTypeOption = {
+  UP: "上报",
+  DOWN: "下发"
+};
+
+export default {
+  name: "Cmd",
+  props: {
+    sourceId: {
+      type: [Number, String],
+      default: ""
+    },
+    isOption: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    ParamsJsonWrap
+  },
+  computed: {
+    ...mapGetters(["groupList"]),
+  },
+  data() {
+    return {
+      transferData: [],
+      value: [],
+      renderFunc(h, option) {
+        return (
+          <span>
+            {option.funId} - {option.funName}
+          </span>
+        );
+      },
+      paramsOpen: false,
+      cmdTypeOption,
+      // 遮罩层
+      loading: false,
+      cmdParamTitle: "",
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 分组集表格数据
+      cmdList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      // queryParams: {
+      //   cmdName: undefined,
+      //   cmdKey: undefined,
+      //   sourceId: undefined
+      // },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        cmdName: [
+          { required: true, message: "分组名称不能为空", trigger: "blur" }
+        ],
+        cmdKey: [
+          { required: true, message: "标识符不能为空", trigger: "blur" }
+        ],
+        cmdType: [
+          { required: true, message: "分组类型不能为空", trigger: "blur" }
+        ]
+      },
+      paramsList: [],
+      selectCmdInfo: {}
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 查询分组参数列表
+    getCmdById(row) {
+      // getCmdFun({
+      //   cmdId: row.cmdId,
+      //   sourceId: this.sourceId
+      // }).then(res => {
+      //   this.selectCmdInfo = row;
+      //   this.paramsList = res.data;
+      //   this.cmdParamTitle = `${row.cmdName}--示例`;
+      //   this.paramsOpen = true;
+      // });
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.getList();
+    },
+    cmdTypeChange(val) {
+      this.transferData = [];
+      this.value = [];
+      // 做属性 数据赛选
+    },
+    /** 查询分组集列表 */
+    getList() {
+      this.loading = true
+      this.cmdList = []
+      setTimeout(() => {
+        this.cmdList = this.$store.getters.groupList
+        this.$forceUpdate()
+        this.loading = false
+      }, 50)
+
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        cmdId: undefined,
+        cmdName: undefined,
+        cmdKey: undefined,
+        cmdType: undefined,
+        sourceId: this.sourceId,
+        mainId: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$emit('handleClick', { type: 'add', idx: 0 })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row, idx, type) {
+      this.$emit('handleClick', { 'type': type, 'idx': idx })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.sdFunIds = this.value;
+          // 新增或者修改都将数据添加到现有list 中
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row, idx) {
+      var that = this
+      this.$confirm(
+        // '是否确认删除分组集编号为"' + cmdIds + '"的数据项?',
+        "是否删除该选项",
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(function() {
+          // 执行删除数据
+          that.$store.dispatch('DeleteGroup', idx)
+          that.$emit('handleClick', { 'type': 'list' })
+        })
+    },
+  }
+};
+</script>
+<style lang="scss">
+.prodcut-cmd-wrap {
+  .eldialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+    .el-form {
+      padding: 20px;
+    }
+    .el-dialog__footer {
+      padding: 0;
+    }
+    .form-button-div {
+      // margin-top: 20px;
+      height: 60px;
+      border-top: 1px solid #747373;
+      text-align: right;
+      width: 100%;
+      padding-top: 15px;
+
+      .el-button + .el-button {
+        margin-right: 10px;
+      }
+      .el-button {
+        padding-top: 8px;
+      }
+    }
+  }
+  .params-eldialog {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      height: 100%;
+      max-height: calc(100vh - 200px);
+      overflow: auto;
+      padding: 20px 5px;
+    }
+  }
+}
+.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #c4c4c4;
+  background: #dededea6;
+}
+.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>

src/views/profile/attribute/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="自定义参数" name="attribute">
+        <div class="tabs-body">
+          <attribute-view
+            v-if="activeName === 'attribute'"
+            ref="attributeref"
+            @handleClick="attributeEvent"
+            :sourceId="sourceId"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="分组" name="group">
+        <div class="tabs-body">
+          <group-view
+            v-if="activeName === 'group'"
+            ref="groupref"
+            @handleClick="groupEvent"
+            :sourceId="sourceId"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import attributeView from "./attributeView";
+import groupView from "./groupView";
+// this.$store.state.tagsView.visitedViews
+// this.$store.dispatch("Login", this.loginForm)
+export default {
+  components: { attributeView, groupView },
+  props: {
+    groupList: {
+      type: String,
+      default: "[]",
+    },
+    arttributeList: {
+      type: String,
+      default: "[]",
+    },
+    sourceId: {
+      type: String,
+      default: "",
+    },
+  },
+  name: "attribute",
+  created() {
+    // 处理数据
+    this.handleInitData();
+  },
+  data() {
+    return {
+      activeName: "attribute",
+    };
+  },
+  methods: {
+    attributeEvent(data) {
+      switch (data.type) {
+        case "add":
+          // 执行add
+          this.$emit("handleEvent", {
+            type: data.type,
+            title: "新增参数",
+            component: "attributeForm",
+            paramIdx: null,
+          });
+          break;
+
+        case "update":
+          this.$emit("handleEvent", {
+            type: data.type,
+            title: "修改参数",
+            component: "attributeForm",
+            paramIdx: data.idx,
+          });
+          break;
+
+        case "list":
+          this.$refs.attributeref.getList();
+          break;
+
+        case "param":
+          this.$emit("handleEvent", {
+            type: data.type,
+            title: "物模型参数",
+            component: "paramsJson",
+            paramIdx: null,
+          });
+          break;
+      }
+    },
+    groupEvent(data) {
+      switch (data.type) {
+        case "add":
+          // 执行add
+          this.$emit("handleEvent", {
+            type: data.type,
+            title: "新增分组",
+            component: "groupForm",
+            paramIdx: null,
+          });
+          break;
+
+        case "update":
+          this.$emit("handleEvent", {
+            type: data.type,
+            title: "修改分组",
+            component: "groupForm",
+            paramIdx: data.idx,
+          });
+          break;
+
+        case "list":
+          this.$refs.groupref.getList();
+          break;
+      }
+    },
+    forceUpdate(component) {
+      if (component === "groupForm") {
+        this.$refs.groupref.getList();
+      } else if (component === "attributeForm") {
+        this.$refs.attributeref.getList();
+      }
+    },
+    handleInitData() {
+      try {
+        this.$store.dispatch("InitAttributeAndGroup", {
+          attrList: JSON.parse(this.arttributeList),
+          groupList: JSON.parse(this.groupList),
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>

src/views/profile/attribute/jsonEditor.vue

@@ -0,0 +1,161 @@
+<!-- 聂黎：
+	json 键值对编辑工具
+	 传入一个字符串，input 框编辑key 和value两个字段，实现返回一个json对象字符串。
+ -->
+<template>
+  <div style="width: 100%;">
+    <!-- <div class="title-block">
+      <span>
+        参数值:
+        <el-tooltip placement="top-start" effect="light">
+          <div slot="content">
+            支持整型，取值范围：
+            <br />-2147483648 ~ 2147483647
+          </div>
+          <el-button type="text" class="question-button" icon="el-icon-question"></el-button>
+        </el-tooltip>
+      </span>
+      <span>
+        参数描述:
+        <el-tooltip placement="top-start" effect="light">
+          <div slot="content">
+            支持中文、英文大小写、数字下划线和短划线，必
+            <br />须以中文、英文或数字开头，不超过20个字符
+          </div>
+          <el-button type="text" class="question-button" icon="el-icon-question"></el-button>
+        </el-tooltip>
+      </span>
+    </div> -->
+    <div v-for="(item, index) in josnList" :key="item.key" class="item-info-block">
+      <el-input
+        :disabled="disabled"
+        v-model="item.keys"
+        :maxlength="option.leftMaxlength"
+        :size="option.size"
+        placeholder="编号如'0'"
+        @change="inputChangeKeys"
+      ></el-input>
+      <span>~</span>
+      <el-input
+        :disabled="disabled"
+        v-model="item.value"
+        :maxlength="option.rightMaxlength"
+        :size="option.size"
+        placeholder="对该枚举选项的描述"
+        @change="inputChange"
+      ></el-input>
+      <el-button
+        type="text"
+        style="font-size: 20px; margin-left: 5px;padding-top: 2px; color: #f56c6c;"
+        icon="el-icon-delete"
+        :disabled="disabled"
+        @click="delHandel(item.key, index)"
+      ></el-button>
+    </div>
+    <!-- <el-button type="text" @click="addHandel" icon="el-icon-plus" :disabled="disabled">添加枚举项</el-button> -->
+  </div>
+</template>
+<script>
+import { strAndNumber } from "@/utils/validate";
+export default {
+  name: "JsonEditor",
+  props: {
+    jsonString: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      option: {
+        placeholder: "请输入...",
+        leftMaxlength: "20",
+        rightMaxlength: "30",
+        size: "mini"
+      },
+      funKey: "",
+      json: {},
+      josnList: []
+    };
+  },
+  created() {
+    this.paramsToList(this.jsonString);
+  },
+  methods: {
+    inputChangeKeys(val) {
+      if (strAndNumber(val)) {
+        this.listToParams(this.josnList);
+      } else {
+        this.$message.error("参数值不能为空，只能输入英文大小写和数字组合。");
+      }
+    },
+    inputChange() {
+      this.listToParams(this.josnList);
+    },
+    addHandel() {
+      this.josnList.push({
+        keys: this.josnList.length,
+        value: ""
+      });
+    },
+    delHandel(keys, index) {
+      this.josnList.splice(index, 1);
+    },
+    paramsToList(val) {
+      if (!val) {
+        return;
+      }
+      var json = JSON.parse(val.replace(/\\\"/g, '"'));
+      this.josnList = [];
+      for (let keys in json) {
+        const obj = {
+          keys: keys,
+          value: json[keys]
+        };
+        this.josnList.push(obj);
+      }
+    },
+    listToParams(list) {
+      const json = {};
+      list.forEach(v => {
+        if (v.keys) {
+          json[v.keys] = v.value;
+        }
+      });
+      this.$emit("event", JSON.stringify(json).replace(/\"/g, '\\"'));
+    }
+  },
+  watch: {
+    josnList(val) {
+      this.listToParams(this.josnList);
+    },
+    jsonString(val, old) {
+      this.paramsToList(val);
+    }
+  }
+};
+</script>
+<style lang="scss">
+.title-block {
+  display: flex;
+  span {
+    display: block;
+    width: 50%;
+  }
+}
+.item-info-block {
+  display: flex;
+  .el-input {
+    width: calc((100% - 45px) / 2);
+  }
+  span {
+    display: block;
+    width: 40px;
+    text-align: center;
+  }
+}
+</style>

src/views/profile/attribute/paramsJson.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="prod-params-json">
+    <div class="left-cmds">
+      <el-form :model="form.data.params" v-if="paramsList && paramsList.length > 0" ref="loginForm" label-width="120px">
+        <!--" 不校验的判断　-->
+        <el-form-item
+          v-for="paramsItem in paramsList"
+          :key="paramsItem.funId"
+          :label="paramsItem.funName +　'：'"
+          :prop="paramsItem.funKey"
+        >
+          <!-- :rules="retrunRules(paramsItem)"  验证 -->
+          <el-select
+            style="width: 85%;"
+            v-model="form.data.params[paramsItem.funKey]"
+            v-if="paramsItem.funValidType === 'ENUM'"
+            clearable
+          >
+            <el-option
+              v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
+              :key="valus"
+              :label="keys"
+              :value="valus"
+            ></el-option>
+          </el-select>
+          <el-input-number
+            style="width: 85%;"
+            v-model="form.data.params[paramsItem.funKey]"
+            v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
+            :max="Number(paramsItem.funValMax) || 0"
+            :min="Number(paramsItem.funValMin) || 0"
+            clearable
+          ></el-input-number>
+
+          <el-input-number
+            style="width: 85%;"
+            clearable
+            v-model="form.data.params[paramsItem.funKey]"
+            v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
+          ></el-input-number>
+          <el-input
+            clearable
+            style="width: 85%;"
+            v-else-if="paramsItem.funDataType === 'TEXT'"
+            v-model="form.data.params[paramsItem.funKey]"
+          />
+        </el-form-item>
+      </el-form>
+      <span v-else>暂无数据</span>
+    </div>
+    <div class="right-json">
+      <div class="option-wrap">
+        <el-button type="text" @click="copeText">复制</el-button>
+      </div>
+      <pre>{{form}}</pre>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ParamsJson",
+  props: {
+    other: {
+      type: Object,
+      default: {
+        action: '',
+        prodPK: '',
+        cmdKey: ''
+      }
+    },
+    paramsList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      form: {
+        action: "",
+        msgId: "1",
+        pk: "",
+        devId: "devId",
+        data: {
+          cmd: "cmd1",
+          params: {}
+        }
+      }
+    };
+  },
+  created() {
+    if (this.paramsList) {
+      this.form.action = this.other.action;
+      this.form.pk = this.other.prodPK;
+      this.form.data.cmd = this.other.cmdKey;
+      this.handelList();
+    }
+  },
+  methods: {
+    copeText() {
+      this.copeFu(JSON.stringify(this.form), this);
+    },
+    strtoJson(str) {
+      return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
+    },
+    handelList() {
+      var result = {};
+      this.paramsList.forEach(v => {
+        if (!result[v.funKey]) {
+          result[v.funKey] = "";
+        }
+      });
+      this.form.data.params = result;
+      this.$forceUpdate();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.prod-params-json {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .left-cmds {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+  }
+  .right-json {
+    width: 50%;
+    display: flex;
+    flex-wrap: wrap;
+    .option-wrap {
+      width: 100%;
+      height: 25px;
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 50px;
+    }
+    > pre {
+      height: calc(100% - 30px);
+    }
+  }
+}
+</style>