单机监视模块v-for逻辑修改

public/static/config/modeConfig.js

@@ -1,6 +1,6 @@
 
 // 本地联调开关
-const localTest = 1;
+const localTest = 0;
 
 // 服务器地址
 let baseURL = null;

src/views/WindSite/pages/Info/Base-Info.vue

@@ -87,18 +87,13 @@
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <template v-for="(item,index) in fdjmap" :key="index">
-                <tr v-for="i in fdjmap.length / 2" :key="i">
-                  <td v-if="index%2==0" class="text gray">{{ item.name }}</td>
-                  <td v-if="index%2==0" class="value green">{{ item.value }}</td>
-                  <td v-if="index%2==0" class="unit gray">{{ item.unit }}</td>
-                </tr>
-                <tr>
-                  <td v-if="index%2==1" class="text gray">{{ item.name }}</td>
-                  <td v-if="index%2==1" class="value green">{{ item.value }}</td>
-                  <td v-if="index%2==1" class="unit gray">{{ item.unit }}</td>
-                </tr>
-              </template>
+              <tr v-for="(pItem, pIndex) in fdjmap" :key="pIndex">
+                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
+                  <td class="text gray">{{ cItem.name }}</td>
+                  <td class="value green">{{ cItem.value }}</td>
+                  <td class="unit gray">{{ cItem.unit }}</td>
+                </template>
+              </tr>
             </table>
           </div>
         </div>
@@ -214,12 +209,21 @@ export default {
     },
     data: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
   },
-  data() {
+  data () {
     return {
-      sourceMap: {},
+      pageReady: false,
+      sourceMap: {
+        bjmap: {},
+        clxmap: {},
+        fdjmap: {},
+        gxkmap: {},
+        jczbmap: {},
+        phmap: {},
+        yymap: {},
+      },
       fdjmap: [],
       clxmap: [],
       bjmap: [],
@@ -246,20 +250,36 @@ export default {
       ],
     };
   },
-  methods: {},
+  methods: {
+    /**
+     * 清洗数据，将原数据处理成符合布局渲染的格式，其中：
+     * @param { Array } array 传入的原数据
+     * @param { Int } length 每行显示的数量
+    **/
+    rinseData (array = [], length) {
+      let index = 0;
+      let newArray = [];
+
+      while (index < array.length) {
+        newArray.push(array.slice(index, index += length));
+      }
+
+      return newArray;
+    }
+  },
 
-  mounted() {
+  mounted () {
     this.sourceMap = this.data;
   },
 
   watch: {
-    data(value) {
-      this.sourceMap = value
-      this.fdjmap = value.fdjmap.ai
-      this.clxmap = value.clxmap.ai
-      this.bjmap = value.bjmap.ai
-      this.phmap = value.phmap.ai
-      this.yymap = value.yymap.ai
+    data (value) {
+      this.sourceMap = value;
+      this.fdjmap = this.rinseData(value.fdjmap.ai, 2);
+      this.clxmap = value.clxmap.ai;
+      this.bjmap = value.bjmap.ai;
+      this.phmap = value.phmap.ai;
+      this.yymap = value.yymap.ai;
     }
   },
 };