feat(iot): 新增产品物模型查看功能

- 在模型和模型系列页面添加物模型按钮和对话框 - 调整对接系列和型号代码 - 优化属性和函数的展示方式 - 添加 JSON 查看器组件vue-json-viewer用于展示物模型数据
2025-05-19 14:45:11 +08:00 · 2025-05-19 14:45:11 +08:00 · bae4c40a65
parent 868fd9b46f
commit bae4c40a65
9 changed files with 202 additions and 111 deletions
--- a/package.json
+++ b/package.json
@ -78,6 +78,7 @@
    "vue-count-to": "1.0.13",
    "vue-cron-editor-buefy": "^0.2.17",
    "vue-cropper": "0.5.5",
+    "vue-json-viewer": "^2.2.22",
    "vue-router": "3.4.9",
    "vue-seamless-scroll": "^1.1.23",
    "vuedraggable": "2.24.3",
--- a/src/store/modules/attribute.js
+++ b/src/store/modules/attribute.js
@ -92,7 +92,7 @@ const attribute = {
    InitAttributeAndGroup({ commit, state }, data) {
      commit('SET_ATTRIBUTE_LIST', data.attrList)
      commit('SET_GROUP_LIST', data.groupList)
-      commit('SET_FUNCTIon_LIST', data.functionList)
+      commit('SET_FUNCTION_LIST', data.functionList)
      console.log('res:', state, data)
    },
    // 新增 属性
--- a/src/views/iot/model/index.vue
+++ b/src/views/iot/model/index.vue
@ -258,7 +258,8 @@
              position: relative;
              top: -10px;"
            >
-            <el-button icon="el-icon-menu" style="width: 200px; height: 40px;" type="primary" @click="openTableSelectScriesDialog">选择型号系列</el-button>
+            <el-button icon="el-icon-s-platform" style="height: 40px;" type="primary" @click="openModelDialog">物模型</el-button>
+            <el-button icon="el-icon-menu" style="height: 40px;" type="primary" @click="openTableSelectScriesDialog">选择型号系列</el-button>
          </el-col>

          <el-col :span="24">
@ -394,6 +395,24 @@
        >
      </div>
    </dialog-template>
+
+    <el-dialog
+      :visible.sync="modelOpen"
+      class="params-eldialog"
+      title="物模型"
+      top="5vh"
+      width="800px"
+    >
+      <params-json-wrap
+        v-if="modelOpen === true"
+        :other="{
+          action: '',
+          prodPK: this.form.prodKey,
+          cmdKey: '',
+        }"
+        :paramsList="modelValue"
+      ></params-json-wrap>
+    </el-dialog>
  </div>
 </template>

@ -420,6 +439,7 @@ import attributeForm from "@/views/profile/attribute/attributeForm";
 import groupForm from "@/views/profile/attribute/groupForm";
 import paramsJson from "@/views/profile/attribute/paramsJson";
 import { listModelSeries, getModelSeries } from "@/api/iot/modelSeries";
+import ParamsJsonWrap from "@/views/profile/attribute/paramsJson";

 const deviceStartsOpt = {
  0: "禁用",
@ -436,9 +456,12 @@ export default {
    attributeForm,
    groupForm,
    paramsJson,
+    ParamsJsonWrap
  },
  data() {
    return {
+      modelOpen: false,
+      modelValue: "",
      componectVal: "attributeForm",
      childOpt: {
        type: "add",
@ -618,6 +641,15 @@ export default {
      };
      this.selectTableShow = true;
    },
+    openModelDialog() {
+      this.modelOpen=true;
+      this.modelValue = JSON.parse(
+        JSON.stringify({
+          properties:this.$store.getters.attributeList,
+          functions:this.$store.getters.functionList,
+        })
+      );
+    },
    openTableSelectScriesDialog() {
      this.selectResult = {};
      this.tableSelectOption = {
@ -914,6 +946,7 @@ export default {
    },
    // 点击确定按钮
    resuleClick() {
+      debugger
      switch(this.selectResult.tableType) {
        case 'vendor':
          this.form.vendorId = this.selectResult.vendorId;
@ -936,6 +969,7 @@ export default {
            _this.$refs.attributeref.handleInitData();
            _this.$refs.attributeref.forceUpdateList('groupForm');
            _this.$refs.attributeref.forceUpdateList('attributeForm');
+            _this.$refs.attributeref.forceUpdateList('functionForm');
          }, 100);

        break;
--- a/src/views/iot/modelScries/index.vue
+++ b/src/views/iot/modelScries/index.vue
@ -178,11 +178,21 @@
            <el-form-item label="产品PK：" prop="prodKey">
              <el-input
                v-model="form.prodKey"
-                :disabled="form.seriesId || form.seriesId === 0"
+                :disabled="form.seriesId !== undefined && form.seriesId !== null && form.seriesId !== ''"
                placeholder="请填写产品PK"
              ></el-input>
            </el-form-item>
          </el-col>
+          <el-col :span="24" style="
+              display: flex;
+              justify-content: flex-end;
+              height: 0;
+              z-index: 99;
+              position: relative;
+              top: -10px;"
+          >
+            <el-button icon="el-icon-s-platform" style="height: 40px;" type="primary" @click="openModelDialog">物模型</el-button>
+          </el-col>

          <el-col :span="24">
            <el-form-item
@ -284,6 +294,23 @@
        >
      </div>
    </dialog-template>
+    <el-dialog
+      :visible.sync="modelOpen"
+      class="params-eldialog"
+      title="物模型"
+      top="5vh"
+      width="800px"
+    >
+      <params-json-wrap
+        v-if="modelOpen === true"
+        :other="{
+          action: '',
+          prodPK: this.form.prodKey,
+          cmdKey: '',
+        }"
+        :paramsList="modelValue"
+      ></params-json-wrap>
+    </el-dialog>

  </div>
 </template>
@ -297,6 +324,7 @@ import groupForm from "@/views/profile/attribute/groupForm";
 import paramsJson from "@/views/profile/attribute/paramsJson";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
 import AttributeView from "@/views/profile/attribute/index";
+import ParamsJsonWrap from "@/views/profile/attribute/paramsJson";

 export default {
  name: "ModelSeries",
@ -307,9 +335,12 @@ export default {
    paramsJson,
    AttributeView,
    ParamWrap,
+    ParamsJsonWrap
  },
  data() {
    return {
+      modelOpen: false,
+      modelValue: "",
      // 遮罩层
      loading: true,
      // 选中数组
@ -380,6 +411,15 @@ export default {
    this.getList();
  },
  methods: {
+    openModelDialog() {
+      this.modelOpen=true;
+      this.modelValue = JSON.parse(
+        JSON.stringify({
+          properties:this.$store.getters.attributeList,
+          functions:this.$store.getters.functionList,
+        })
+      );
+    },
    indexFormatter(val) {
      return (
        val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
@ -392,7 +432,10 @@ export default {
        (this.childOpt.paramIdx = data.paramIdx);
      this.AttributeViewShow = true;
      this.functionList = JSON.parse(
-        JSON.stringify(this.$store.getters.attributeList)
+        JSON.stringify({
+          properties:this.$store.getters.attributeList,
+          functions:this.$store.getters.groupList,
+        })
      );
      this.componectVal = data.component;
    },
--- a/src/views/profile/attribute/attributeForm.vue
+++ b/src/views/profile/attribute/attributeForm.vue
@ -32,8 +32,8 @@
          />
        </el-select>
      </el-form-item>
-      <el-form-item label="分组:" prop="cmdKey">
-        <el-select v-model="form.cmdKey" placeholder="请选分组">
+      <el-form-item label="参数分组:" prop="cmdKey">
+        <el-select v-model="form.cmdKey" placeholder="请选参数分组">
          <el-option
            v-for="(item, idx) in groupList"
            :key="idx"
@ -240,10 +240,13 @@ export default {
      funValidTypeOption,
      dataFormatTypeOption,
      form: {
-        show: true,
+        funDataType: 'INT32',
+        funRwType: 'READWRITE',
        sort: 100,
+        show: true,
+        funValidType:'NOT',
        dataFormat: {
-          type: null,
+          type: 'null',
          list: ""
        }
      },
@ -252,7 +255,7 @@ export default {
        funName: [
          { required: true, message: "参数名称不能为空", trigger: "blur" },
        ],
-        cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
+        // cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
        funKey: [
          { required: true, message: "标识符不能为空", trigger: "blur" },
        ],
--- a/src/views/profile/attribute/attributeView.vue
+++ b/src/views/profile/attribute/attributeView.vue
@ -6,15 +6,15 @@
          >新增</el-button
        >
      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          icon="el-icon-s-platform"
-          size="mini"
-          type="primary"
-          @click="handleParams"
-          >物模型参数</el-button
-        >
-      </el-col>
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          icon="el-icon-s-platform"-->
+<!--          size="mini"-->
+<!--          type="primary"-->
+<!--          @click="handleParams"-->
+<!--          >物模型</el-button-->
+<!--        >-->
+<!--      </el-col>-->
    </el-row>

    <el-table v-loading="loading" :data="functionList" height="300px">
@ -221,23 +221,23 @@
      </div>
    </el-dialog>

-    <el-dialog
-      :visible.sync="paramsOpen"
-      class="params-eldialog"
-      title="物模型参数"
-      top="5vh"
-      width="800px"
-    >
-      <params-json-wrap
-        v-if="paramsOpen === true"
-        :other="{
-          action: '',
-          prodPK: sourceId,
-          cmdKey: '',
-        }"
-        :paramsList="functionList"
-      ></params-json-wrap>
-    </el-dialog>
+<!--    <el-dialog-->
+<!--      :visible.sync="paramsOpen"-->
+<!--      class="params-eldialog"-->
+<!--      title="物模型"-->
+<!--      top="5vh"-->
+<!--      width="800px"-->
+<!--    >-->
+<!--      <params-json-wrap-->
+<!--        v-if="paramsOpen === true"-->
+<!--        :other="{-->
+<!--          action: '',-->
+<!--          prodPK: sourceId,-->
+<!--          cmdKey: '',-->
+<!--        }"-->
+<!--        :paramsList="functionList"-->
+<!--      ></params-json-wrap>-->
+<!--    </el-dialog>-->

  </div>
 </template>
@ -352,11 +352,12 @@ export default {
          console.log('666', res)
          this.functionList = res
          this.$forceUpdate()
-        this.loading = false
+          this.loading = false
        });
      }, 50)
    },
    setList(list) {
+      debugger
      this.loading = true
      this.functionList = []
      setTimeout(() => {
--- a/src/views/profile/attribute/functionFormModel.vue
+++ b/src/views/profile/attribute/functionFormModel.vue
@ -124,22 +124,22 @@
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.value"
-                    :class="{ 'is-error': scope.row.valueError }"
+                    :class="{ 'is-error': scope.row.value }"
                    placeholder="请输入值"
                    @blur="validateEnumItem(scope.row, 'value', scope.$index)"
                  ></el-input>
-                  <div v-if="scope.row.valueError" class="el-form-item__error">值不能为空</div>
+                  <div v-if="scope.row.value" class="el-form-item__error">值不能为空</div>
                </template>
              </el-table-column>
              <el-table-column label="描述" prop="text">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.text"
-                    :class="{ 'is-error': scope.row.textError }"
+                    :class="{ 'is-error': scope.row.text }"
                    placeholder="请输入描述"
                    @blur="validateEnumItem(scope.row, 'text', scope.$index)"
                  ></el-input>
-                  <div v-if="scope.row.textError" class="el-form-item__error">描述不能为空</div>
+                  <div v-if="scope.row.text" class="el-form-item__error">描述不能为空</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="80">
@ -433,18 +433,18 @@ export default {

      // 添加一个新的枚举项
      const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm));
-      newEnumItem.valueError = false;
-      newEnumItem.textError = false;
+      newEnumItem.value = false;
+      newEnumItem.text = false;
      this.inputFormObj.form.valueType.elements.push(newEnumItem);
    },

    validateEnumItem(item, field, index) {
      if (field === 'value') {
-        item.valueError = !item.value;
+        item.value = !item.value;
      } else if (field === 'text') {
-        item.textError = !item.text;
+        item.text = !item.text;
      }
-      return !item.valueError && !item.textError;
+      return !item.value && !item.text;
    },

    // 修改提交方法，增加枚举项验证
@ -465,9 +465,9 @@ export default {
            let hasError = false;
            for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
              const item = this.inputFormObj.form.valueType.elements[i];
-              item.valueError = !item.value;
-              item.textError = !item.text;
-              if (item.valueError || item.textError) {
+              item.value = !item.value;
+              item.text = !item.text;
+              if (item.value || item.text) {
                hasError = true;
              }
            }
--- a/src/views/profile/attribute/index.vue
+++ b/src/views/profile/attribute/index.vue
@ -11,7 +11,7 @@
          />
        </div>
      </el-tab-pane>
-      <el-tab-pane label="分组" name="group">
+      <el-tab-pane label="参数分组" name="group">
        <div class="tabs-body">
          <group-view
            v-if="activeName === 'group'"
@ -96,7 +96,7 @@ export default {
        case "param":
          this.$emit("handleEvent", {
            type: data.type,
-            title: "物模型参数",
+            title: "物模型",
            component: "paramsJson",
            paramIdx: null,
          });
@ -158,7 +158,7 @@ export default {
        case "param":
          this.$emit("handleEvent", {
            type: data.type,
-            title: "物模型参数",
+            title: "物模型",
            component: "paramsJson",
            paramIdx: null,
          });
@ -190,7 +190,9 @@ export default {
      if (component === "groupForm") {
        this.$refs.groupref && this.$refs.groupref.setList(groupList);
      } else if (component === "attributeForm") {
-        this.$refs.attributeref && this.$refs.attributeref.setList(arttributeList);
+        this.$refs.attributeref && this.$refs.attributeref.setList(arttributeList.properties);
+      } else if (component === "functionForm") {
+        this.$refs.functionref && this.$refs.functionref.setList(arttributeList.functions);
      }
    },
    handleInitData() {
@ -205,7 +207,7 @@ export default {
          functionList = json.functions;
        }else{
          arttributeList = json;
-          arttributeList = [];
+          functionList = json.functions;
        }
      } catch (error) {
        arttributeList = [];
--- a/src/views/profile/attribute/paramsJson.vue
+++ b/src/views/profile/attribute/paramsJson.vue
@ -1,62 +1,69 @@
 <template>
  <div class="prod-params-json">
-    <div class="left-cmds">
-      <el-form v-if="paramsList.properties && paramsList.properties.length > 0" ref="loginForm" :model="form.data.params" label-width="120px">
-        <!--" 不校验的判断　-->
-        <el-form-item
-          v-for="paramsItem in paramsList.properties"
-          :key="paramsItem.funId"
-          :label="paramsItem.funName +　'：'"
-          :prop="paramsItem.funKey"
-        >
-          <!-- :rules="retrunRules(paramsItem)"  验证 -->
-          <el-select
-            v-if="paramsItem.funValidType === 'ENUM'"
-            v-model="form.data.params[paramsItem.funKey]"
-            clearable
-            style="width: 85%;"
-          >
-            <el-option
-              v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
-              :key="valus"
-              :label="keys"
-              :value="valus"
-            ></el-option>
-          </el-select>
-          <el-input-number
-            v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
-            v-model="form.data.params[paramsItem.funKey]"
-            :max="Number(paramsItem.funValMax) || 0"
-            :min="Number(paramsItem.funValMin) || 0"
-            clearable
-            style="width: 85%;"
-          ></el-input-number>
+<!--    <div class="left-cmds">-->
+<!--      <el-form v-if="paramsList.properties && paramsList.properties.length > 0" ref="loginForm" :model="form.data.params" label-width="120px">-->
+<!--        &lt;!&ndash;" 不校验的判断　&ndash;&gt;-->
+<!--        <el-form-item-->
+<!--          v-for="paramsItem in paramsList.properties"-->
+<!--          :key="paramsItem.funId"-->
+<!--          :label="paramsItem.funName +　'：'"-->
+<!--          :prop="paramsItem.funKey"-->
+<!--        >-->
+<!--          &lt;!&ndash; :rules="retrunRules(paramsItem)"  验证 &ndash;&gt;-->
+<!--          <el-select-->
+<!--            v-if="paramsItem.funValidType === 'ENUM'"-->
+<!--            v-model="form.data.params[paramsItem.funKey]"-->
+<!--            clearable-->
+<!--            style="width: 85%;"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="(keys, valus) in strtoJson(paramsItem.funObj)"-->
+<!--              :key="valus"-->
+<!--              :label="keys"-->
+<!--              :value="valus"-->
+<!--            ></el-option>-->
+<!--          </el-select>-->
+<!--          <el-input-number-->
+<!--            v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"-->
+<!--            v-model="form.data.params[paramsItem.funKey]"-->
+<!--            :max="Number(paramsItem.funValMax) || 0"-->
+<!--            :min="Number(paramsItem.funValMin) || 0"-->
+<!--            clearable-->
+<!--            style="width: 85%;"-->
+<!--          ></el-input-number>-->

-          <el-input-number
-            v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
-            v-model="form.data.params[paramsItem.funKey]"
-            clearable
-            style="width: 85%;"
-          ></el-input-number>
-          <el-input
-            v-else-if="paramsItem.funDataType === 'TEXT'"
-            v-model="form.data.params[paramsItem.funKey]"
-            clearable
-            style="width: 85%;"
-          />
-        </el-form-item>
-      </el-form>
-      <span v-else>暂无数据</span>
-    </div>
+<!--          <el-input-number-->
+<!--            v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"-->
+<!--            v-model="form.data.params[paramsItem.funKey]"-->
+<!--            clearable-->
+<!--            style="width: 85%;"-->
+<!--          ></el-input-number>-->
+<!--          <el-input-->
+<!--            v-else-if="paramsItem.funDataType === 'TEXT'"-->
+<!--            v-model="form.data.params[paramsItem.funKey]"-->
+<!--            clearable-->
+<!--            style="width: 85%;"-->
+<!--          />-->
+<!--        </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 style="border: 1px solid #ccc; margin-top: -15px;width: 100%; height: 600px; overflow: scroll">
+        <json-viewer :expand-depth="10" :value="paramsList" copyable>
+          <template v-slot:copy>复制</template>
+        </json-viewer>
      </div>
-      <pre>{{paramsList}}</pre>
+<!--      <div class="option-wrap">-->
+<!--        <el-button type="text" @click="copeText">复制</el-button>-->
+<!--      </div>-->
+<!--      <pre>{{paramsList}}</pre>-->
    </div>
  </div>
 </template>
 <script>
+import JsonViewer from 'vue-json-viewer';
+import 'vue-json-viewer/style.css';
 export default {
  name: "ParamsJson",
  props: {
@ -90,6 +97,7 @@ export default {
      }
    };
  },
+  components:{ JsonViewer },
  created() {
    if (this.paramsList) {
      this.form.action = this.other.action;
@ -106,7 +114,6 @@ export default {
      return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
    },
    handelList() {
-
      var result = {};
      console.log("this.paramsList.properties",this.paramsList)
      this.paramsList.properties.forEach(v => {
@ -125,13 +132,13 @@ export default {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
-  .left-cmds {
-    width: 50%;
-    display: flex;
-    justify-content: center;
-  }
+  //.left-cmds {
+  //  width: 50%;
+  //  display: flex;
+  //  justify-content: center;
+  //}
  .right-json {
-    width: 50%;
+    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .option-wrap {