多层v-for bug修复

src/views/LightMatrix/LightMatrix.vue

@@ -7,53 +7,53 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-          <div class="panel-item-gf">
-            <div class="panel-item-gf-left">
-              <span class="svg-icon svg-icon-write svg-icon-md">
-                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
+        <div class="panel-item-gf">
+          <div class="panel-item-gf-left">
+            <span class="svg-icon svg-icon-write svg-icon-md">
+              <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
+            </span>
+          </div>
+          <div class="panel-item-gf-right">
+            <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
+            <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
+          </div>
+        </div>
+        </Col>
+        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
+        <div class="panel-item" :class="data.color">
+          <div class="panel-item-left">
+            <div class="panel-item-li">
+              <span>{{ data.name }}</span>
+              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-gf-right">
-              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
+            <div class="panel-item-li">
+              <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
+              <span v-else>{{ sourceMap[data.key] || "---" }}</span>
+              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                <SvgIcon :svgid="data.numIcon"></SvgIcon>
+              </span>
             </div>
           </div>
-        </Col>
-        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-          <div class="panel-item" :class="data.color">
-            <div class="panel-item-left">
-              <div class="panel-item-li">
-                <span>{{ data.name }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
-                </span>
-              </div>
-              <div class="panel-item-li">
-                <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
-                <span v-else>{{ sourceMap[data.key] || "---" }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
-                </span>
-              </div>
+          <div class="panel-item-right">
+            <div class="panel-item-ri">
+              <span>{{ data.text1 }}</span>
+              <span>{{ sourceMap[data.key1] || "---" }}</span>
             </div>
-            <div class="panel-item-right">
-              <div class="panel-item-ri">
-                <span>{{ data.text1 }}</span>
-                <span>{{ sourceMap[data.key1] || "---" }}</span>
-              </div>
-              <div class="panel-item-ri">
-                <span>{{ data.text2 }}</span>
-                <span>{{ sourceMap[data.key2] || "---" }}</span>
-              </div>
+            <div class="panel-item-ri">
+              <span>{{ data.text2 }}</span>
+              <span>{{ sourceMap[data.key2] || "---" }}</span>
             </div>
           </div>
+        </div>
         </Col>
       </Row>
     </div>
     <div class="panel-box">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
-          <div v-for="(cItem, cIndex) in pItem" :key="cIndex" class="panel-title-name">
+          <div class="panel-title-name">
             <i class="fa fa-send"></i>
             <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
             <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
@@ -68,26 +68,26 @@
               <div class="card-left">
                 <div class="tag">{{ cItem.wtnum }}</div>
                 <div class="icon">
-                  <span class="svg-icon svg-icon-sm" :class="col.color == 'black' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                  <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
                     <SvgIcon :svgid="cItem.icon"></SvgIcon>
                   </span>
                 </div>
               </div>
               <div class="card-right">
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
                     <SvgIcon svgid="svg-A"></SvgIcon>
                   </i>
                   <span>{{ cItem.fdl }}</span>
                 </div>
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
                     <SvgIcon svgid="svg-W"></SvgIcon>
                   </i>
                   <span>{{ cItem.gl }}</span>
                 </div>
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
                     <SvgIcon svgid="svg-V"></SvgIcon>
                   </i>
                   <span>{{ cItem.fs }}</span>
@@ -123,7 +123,7 @@ export default {
   },
 
   // 数据
-  data() {
+  data () {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
@@ -311,7 +311,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor(fjzt) {
+    getColor (fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -337,28 +337,28 @@ export default {
       }
     },
 
-    calcGfStr(calcStr) {
+    calcGfStr (calcStr) {
       return parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]]) + "";
     },
 
     // 请求服务
-    requestData(showLoading) {
+    requestData (showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixDetialGfPush",
-        success(res) {
+        success (res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
-              if (key !== "fczbmap" && key !== "fjmap") {
-                sourceMap[key] += "";
-              } else if (key === "fjmap") {
-                sourceMap[key].forEach((pItem) => {
-                  pItem.forEach((cItem) => {
+              if (key !== 'fczbmap' && key !== 'fjmap') {
+                sourceMap[key] += '';
+              } else if (key === 'fjmap') {
+                sourceMap[key].forEach(pItem => {
+                  pItem.forEach(cItem => {
                     cItem.color = that.getColor(cItem.fjzt);
-                    cItem.isShow = that;
+                    cItem.isShow = true;
                   });
                 });
               }
@@ -372,7 +372,7 @@ export default {
     },
   },
 
-  created() {
+  created () {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -382,9 +382,9 @@ export default {
     });
   },
 
-  mounted() {},
+  mounted () { },
 
-  unmounted() {
+  unmounted () {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -677,7 +677,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: "Bicubik";
+            font-family: 'Bicubik';
             font-weight: 500;
 
             &.write {