Quellcode durchsuchen

Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

yangxiao vor 3 Jahren
Ursprung
Commit
eaeb5f9d64

+ 33 - 46
src/views/WindSite/pages/Info/Base-Info.vue

@@ -107,16 +107,13 @@
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <template v-for="(item,index) in clxmap" :key="index" :v-if="index%2==0">
-                <tr>
-                  <td class="text gray">{{ item.name }}</td>
-                  <td class="value green">{{ item.value }}</td>
-                  <td class="unit gray">{{ item.unit }}</td>
-                  <td class="text gray" v-if="index+1<clxmap.length">{{clxmap[index+1].name}}</td>
-                  <td class="value green" v-if="index+1<clxmap.length">{{clxmap[index+1].value}}</td>
-                  <td class="unit gray" v-if="index+1<clxmap.length">{{clxmap[index+1].unit}}</td>
-                </tr>
-              </template>
+              <tr v-for="(pItem, pIndex) in clxmap" :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>
@@ -130,16 +127,13 @@
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <template v-for="(item,index) in bjmap" :key="index" :v-if="index%2==0">
-                <tr>
-                  <td class="text gray">{{ item.name }}</td>
-                  <td class="value green">{{ item.value }}</td>
-                  <td class="unit gray">{{ item.unit }}</td>
-                  <td class="text gray" v-if="index+1<bjmap.length">{{bjmap[index+1].name}}</td>
-                  <td class="value green" v-if="index+1<bjmap.length">{{bjmap[index+1].value}}</td>
-                  <td class="unit gray" v-if="index+1<bjmap.length">{{bjmap[index+1].unit}}</td>
-                </tr>
-              </template>
+              <tr v-for="(pItem, pIndex) in bjmap" :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>
@@ -155,16 +149,13 @@
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <template v-for="(item,index) in phmap" :key="index" :v-if="index%2==0">
-                <tr>
-                  <td class="text gray">{{ item.name }}</td>
-                  <td class="value green">{{ item.value }}</td>
-                  <td class="unit gray">{{ item.unit }}</td>
-                  <td class="text gray" v-if="index+1<phmap.length">{{phmap[index+1].name}}</td>
-                  <td class="value green" v-if="index+1<phmap.length">{{phmap[index+1].value}}</td>
-                  <td class="unit gray" v-if="index+1<phmap.length">{{phmap[index+1].unit}}</td>
-                </tr>
-              </template>
+              <tr v-for="(pItem, pIndex) in phmap" :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>
@@ -178,16 +169,13 @@
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <template v-for="(item,index) in yymap" :key="index" :v-if="index%2==0">
-                <tr>
-                  <td class="text gray">{{ item.name }}</td>
-                  <td class="value green">{{ item.value }}</td>
-                  <td class="unit gray">{{ item.unit }}</td>
-                  <td class="text gray" v-if="index+1<yymap.length">{{yymap[index+1].name}}</td>
-                  <td class="value green" v-if="index+1<yymap.length">{{yymap[index+1].value}}</td>
-                  <td class="unit gray" v-if="index+1<yymap.length">{{yymap[index+1].unit}}</td>
-                </tr>
-              </template>
+              <tr v-for="(pItem, pIndex) in yymap" :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>
@@ -274,12 +262,11 @@ export default {
 
   watch: {
     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;
+      this.clxmap = this.rinseData(value.clxmap.ai, 2);
+      this.bjmap = this.rinseData(value.bjmap.ai, 2);
+      this.phmap = this.rinseData(value.phmap.ai, 2);
+      this.yymap = this.rinseData(value.yymap.ai, 2);
     }
   },
 };
@@ -365,7 +352,7 @@ export default {
         }
       }
       .value {
-        margin: 32px 0;
+        margin: 38px 0;
         align-items: center;
         flex: 1 0 auto;
         font-size: 12px;

+ 4 - 4
src/views/WindSite/pages/Info/Info.vue

@@ -85,10 +85,10 @@ export default {
             id: "cabin-info",
             text: "机舱信息",
           },
-          {
-            id: "principal-axis",
-            text: "主轴",
-          },
+          // {
+          //   id: "principal-axis",
+          //   text: "主轴",
+          // },
         ],
       },
     };

+ 46 - 24
src/views/WindSite/pages/Info/pages/generator.vue

@@ -6,33 +6,27 @@
       </div>
       <div class="panel-body">
         <table class="table-form">
-          <template v-for="(item,index) in sourceMapAI" :key="index" :v-if="index%2==0">
-            <tr>
-              <td class="text gray">{{ item.name }}</td>
-              <td class="value green">{{ item.value }}</td>
-              <td class="unit gray">{{ item.unit }}</td>
-              <td class="text gray" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].name}}</td>
-              <td class="value green" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].value}}</td>
-              <td class="unit gray" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].unit}}</td>
-            </tr>
-          </template>
+          <tr v-for="(pItem, pIndex) in sourceMapAI" :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>
     <div class="info-panel base-info">
       <div class="panel-title gary-l">
-        <div class="title">遥值</div>
+        <div class="title">遥值</div>
       </div>
       <div class="panel-body">
         <table class="table-form">
-          <template v-for="index in sourceMapDI" :key="index" :v-if="index%4==0">
-            <tr v-if="index < sourceMapDI.length">
-              <td class="dot" :class="sourceMapDI[index].value>0?'red':''">{{ sourceMapDI[index].name }}</td>
-              <td class="dot" :class="sourceMapDI[index+1].value>0?'red':''" v-if="index+1<sourceMapDI.length">{{sourceMapDI[index+1].name}}</td>
-              <td class="dot" :class="sourceMapDI[index+2].value>0?'red':''" v-if="index+2<sourceMapDI.length">{{sourceMapDI[index+2].name}}</td>
-              <td class="dot" :class="sourceMapDI[index+3].value>0?'red':''" v-if="index+3<sourceMapDI.length">{{sourceMapDI[index+3].name}}</td>
-            </tr>
-          </template>
+          <tr class="location-tr" v-for="(pItem, pIndex) in sourceMapDI" :key="pIndex">
+            <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
+              <td class="dot location-td" :class="cItem.value>0?'red':''">{{ cItem.name }}</td>
+            </template>
+          </tr>
         </table>
       </div>
     </div>
@@ -66,7 +60,23 @@ 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;
+    }
+  },
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -89,13 +99,17 @@ export default {
   watch: {
     index(value) {
       this.activeIndex = value;
-      this.sourceMapAI = this.datamap[this.widgetIndex[this.activeIndex - 1]].ai;
-      this.sourceMapDI = this.datamap[this.widgetIndex[this.activeIndex - 1]].di;
+      if(this.activeIndex != 0){
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
+      }
     },
     data(value) {
        this.datamap = value;
-       this.sourceMapAI = this.datamap[this.widgetIndex[this.activeIndex - 1]].ai;
-       this.sourceMapDI = this.datamap[this.widgetIndex[this.activeIndex - 1]].di;
+       if(this.activeIndex != 0){
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
+      }
     },
   },
 };
@@ -157,6 +171,14 @@ export default {
           border-radius: 50%;
         }
       }
+      .location-tr{
+        width: 100%;
+      }
+      .location-td{
+        width: 20%;
+        padding-left: 7%;
+        text-align: left;
+      }
     }
   }
 }