解决冲突

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@arcgis/core": "^4.19.3",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "echarts": "^5.1.1",

src/assets/icon/svg/letter/A.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M113.7,81.2V48.7h-65v32.5H113.7z M0,0v162.4h162.4V0H0z M146.1,146.1h-32.5v-32.5h-65v32.5H16.2V48.7h32.5
+			V16.2h65v32.5h32.5V146.1z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/letter/P.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M113.7,48.7h-65v32.5h65V48.7z M0,0v162.4h162.4V0H0z M146.1,113.7H48.7v32.5H16.2V16.2h129.9V113.7z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/letter/R.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M48.7,48.7v32.5h65V48.7H48.7z M0,0v162.4h162.4V0H0z M146.1,81.2h-32.5v32.5h32.5v32.5h-32.5v-32.5h-65v32.5
+			H16.2V16.2h97.4v32.5h32.5V81.2z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/letter/V.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M0,0v162.4h162.4V0H0z M113.7,113.7H97.4v32.5H65v-32.5H48.7L16.2,16.2h32.5l32.5,97.4l32.5-97.4h32.5
+			L113.7,113.7z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/letter/W.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M0,0v162.4h162.4V0H0z M146.1,113.7h-16.2v32.5H97.4v-32.5H65v32.5H32.5v-32.5H16.2V16.2h32.5v65H65V65h32.5
+			v16.2h16.2v-65h32.5V113.7z"/>
+	</g>
+</g>
+</svg>

src/assets/styles/color.less

@@ -14,6 +14,10 @@
   background: @blue;
 }
 
+.bg-pink {
+    background: @pink;
+}
+
 .blue {
   color: @blue;
 }

src/assets/styles/common/color.less

@@ -7,6 +7,7 @@
 @gray-l: #b2bdc0;
 @black: #000000;
 @write: #ffffff;
+@ligntRed: #ff7a7f;
 @red: #bd3338;
 @darkRed: #710f14;
 @purple: #4b55ae;

src/assets/styles/svg.less

@@ -129,4 +129,12 @@
       }
     }
   }
+
+  &.svg-icon-red {
+    svg {
+      use {
+        fill: @ligntRed;
+      }
+    }
+  }
 }

src/components/chart/line/multiple-line-chart.vue

@@ -219,7 +219,7 @@ export default {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
     };
   },
   computed: {

src/components/coms/btn/btn-group-double.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="btn-group-with-icon">
     <div class="btn-group-with-icon-list" v-for="(group, i) of btnGroups" :key="group">
-      <i v-if="group.icon == '' ? false : true" :class="group.icon"></i>
+      <i v-if="group.icon != '' && group.icon.indexOf('fa fa') >= 0" :class="group.icon"></i>
+      <span v-if="group.icon != '' && group.icon.indexOf('svg-') >= 0" class="svg-icon svg-icon-gray svg-icon-md">
+        <SvgIcon :svgid="group.icon"></SvgIcon>
+      </span>
       <a href="javascript:;" v-for="(btn, index) of group.btns" :key="btn" @click="click(i, index)" :class="{ active: activeIndex == index && activeRow == i }">
         {{ btn.text }}
       </a>
@@ -10,9 +13,14 @@
 </template>
 
 <script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
   // 名称
   name: "BtnGroup2",
+  // 组件
+  components: {
+    SvgIcon,
+  },
   // 传入参数
   props: {
     /**
@@ -95,12 +103,14 @@ export default {
     display: flex;
     flex-direction: row;
     margin-left: 1.481vh;
+    align-items: center;
 
     &:first-child {
       margin-left: 0;
     }
 
-    i {
+    i,
+    span {
       color: @gray;
       margin-right: 0.556vh;
       font-size: @fontsize-l;

src/router/index.js

@@ -5,22 +5,22 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
   },
   {
     path: '/about',
     name: 'About',
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
     path: '/status', // 状态监视
     name: 'Status',
-    component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue')
+    component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue'),
   },
   {
     path: '/agc', // AGC 监视
     name: 'Agc',
-    component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue')
+    component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
   },
   {
     path: '/windsite',
@@ -28,45 +28,51 @@ const routes = [
     component: () => import(/* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
     children: [{
       path: 'home',
-      component: () => import(/* webpackChunkName: "windsitehome" */ '../views/WindSite/pages/Home/Home.vue')
+      component: () => import(/* webpackChunkName: "windsitehome" */ '../views/WindSite/pages/Home/Home.vue'),
     }, {
       path: 'draughtfanlist',
-      component: () => import(/* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue')
+      component: () => import(/* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue'),
     }, {
       path: 'matrix',
-      component: () => import(/* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue')
+      component: () => import(/* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue'),
     }, {
       path: 'lightmatrix',
-      component: () => import(/* webpackChunkName: "windsitelightmatrix" */ '../views/WindSite/pages/LightMatrix.vue')
+      component: () => import(/* webpackChunkName: "windsitelightmatrix" */ '../views/WindSite/pages/LightMatrix.vue'),
     }, {
       path: 'box',
-      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue')
+      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
     }, {
-      path: 'Info',
-      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue')
+      path: 'info',
+      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue'),
     }, {
       path: 'tower',
-      component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue')
+      component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue'),
+    }, {
+      path: 'inverter-info',
+      component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Inverter-Info.vue'),
+    }, {
+      path: 'map',
+      component: () => import(/* webpackChunkName: "windsitemap" */ '../views/WindSite/pages/Map.vue'),
     }]
   },
   {
     path: '/lightmatrix', // 光伏明细矩阵
     name: 'LightMatrix',
-    component: () => import(/* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue')
+    component: () => import(/* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue'),
   },
   {
     path: '/lightmatrix1', // 基础矩阵
     name: 'LightMatrix1',
-    component: () => import(/* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue')
+    component: () => import(/* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue'),
   },
   {
     path: '/lightmatrix2', // 欠发矩阵
     name: 'LightMatrix2',
-    component: () => import(/* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue')
+    component: () => import(/* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue'),
   }, {
     path: '/lightmatrix3', // 明细矩阵
     name: 'LightMatrix3',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue')
+    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
   },
 ]
 
@@ -76,4 +82,8 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  next()
+})
+
 export default router

src/views/LightMatrix1/LightMatrix1.vue

@@ -2,124 +2,116 @@
   <div class="light-matrix">
     <Row class="panel-2" type="">
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item">
-          <div class="loop"></div>
-          <span class="svg-icon svg-icon-gray svg-icon-md">
-            <SvgIcon svgid="svg-wind-site"></SvgIcon>
-          </span>
-        </div>
-        <div class="item write" @click="changeShow('jrfj_FDC')">
-          <div>接入风机</div>
-          <div>{{sourceMap.fcjrnum || '---'}}</div>
-        </div>
-        <div class="item blue" @click="changeShow('yx_FDC', 1)">
-          <div>· 运行</div>
-          <div>{{sourceMap.fcyxnum || '---'}}</div>
-        </div>
-        <div class="item green" @click="changeShow('dj_FDC', 0)">
-          <div>· 待机</div>
-          <div>{{sourceMap.fcdjnum || '---'}}</div>
-        </div>
-        <div class="item purple" @click="changeShow('xd_FDC', 5)">
-          <div>· 限电</div>
-          <div>{{sourceMap.fcxdnum || '---'}}</div>
-        </div>
-        <div class="item red" @click="changeShow('gz_FDC', 2)">
-          <div>· 故障</div>
-          <div>{{sourceMap.fcgznum || '---'}}</div>
-        </div>
-        <div class="item orange" @click="changeShow('jx_FDC', 4)">
-          <div>· 检修</div>
-          <div>{{sourceMap.fcwhnum || '---'}}</div>
-        </div>
-        <div class="item write" @click="changeShow('sl_FDC', 6)">
-          <div>· 受累</div>
-          <div>{{sourceMap.fcslnum || '---'}}</div>
-        </div>
-        <div class="item gray" @click="changeShow('lx_FDC', 3)">
-          <div>· 离线</div>
-          <div>{{sourceMap.fclxnum || '---'}}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="item write" @click="changeShow('jrfj_FDC')">
+            <div>接入风机</div>
+            <div>{{ sourceMap.fcjrnum || "---" }}</div>
+          </div>
+          <div class="item blue" @click="changeShow('yx_FDC', 1)">
+            <div>· 运行</div>
+            <div>{{ sourceMap.fcyxnum || "---" }}</div>
+          </div>
+          <div class="item green" @click="changeShow('dj_FDC', 0)">
+            <div>· 待机</div>
+            <div>{{ sourceMap.fcdjnum || "---" }}</div>
+          </div>
+          <div class="item purple" @click="changeShow('xd_FDC', 5)">
+            <div>· 限电</div>
+            <div>{{ sourceMap.fcxdnum || "---" }}</div>
+          </div>
+          <div class="item red" @click="changeShow('gz_FDC', 2)">
+            <div>· 故障</div>
+            <div>{{ sourceMap.fcgznum || "---" }}</div>
+          </div>
+          <div class="item orange" @click="changeShow('jx_FDC', 4)">
+            <div>· 检修</div>
+            <div>{{ sourceMap.fcwhnum || "---" }}</div>
+          </div>
+          <div class="item write" @click="changeShow('sl_FDC', 6)">
+            <div>· 受累</div>
+            <div>{{ sourceMap.fcslnum || "---" }}</div>
+          </div>
+          <div class="item gray" @click="changeShow('lx_FDC', 3)">
+            <div>· 离线</div>
+            <div>{{ sourceMap.fclxnum || "---" }}</div>
+          </div>
         </div>
-      </div>
       </Col>
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item">
-          <div class="loop"></div>
-          <span class="svg-icon svg-icon-gray svg-icon-md">
-            <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
-          </span>
-        </div>
-        <div class="item write" @click="changeShow('jrfj1_GDC')">
-          <div>接入风机</div>
-          <div>{{sourceMap.gfjrnum || '---'}}</div>
-        </div>
-        <div class="item blue" @click="changeShow('yx1_GDC', 1)">
-          <div>· 运行</div>
-          <div>{{sourceMap.gfyxnum || '---'}}</div>
-        </div>
-        <div class="item green" @click="changeShow('dj1_GDC', 0)">
-          <div>· 待机</div>
-          <div>{{sourceMap.gfdjnum || '---'}}</div>
-        </div>
-        <div class="item purple" @click="changeShow('xd1_GDC', 5)">
-          <div>· 限电</div>
-          <div>{{sourceMap.gfxdnum || '---'}}</div>
-        </div>
-        <div class="item red" @click="changeShow('gz1_GDC', 2)">
-          <div>· 故障</div>
-          <div>{{sourceMap.gfgznum || '---'}}</div>
-        </div>
-        <div class="item orange" @click="changeShow('jx1_GDC', 4)">
-          <div>· 检修</div>
-          <div>{{sourceMap.gfwhnum || '---'}}</div>
-        </div>
-        <div class="item write" @click="changeShow('sl1_GDC', 6)">
-          <div>· 受累</div>
-          <div>{{sourceMap.gfslnum || '---'}}</div>
-        </div>
-        <div class="item gray" @click="changeShow('lx1_GDC', 3)">
-          <div>· 离线</div>
-          <div>{{sourceMap.gflxnum || '---'}}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
+            </span>
+          </div>
+          <div class="item write" @click="changeShow('jrfj1_GDC')">
+            <div>接入风机</div>
+            <div>{{ sourceMap.gfjrnum || "---" }}</div>
+          </div>
+          <div class="item blue" @click="changeShow('yx1_GDC', 1)">
+            <div>· 运行</div>
+            <div>{{ sourceMap.gfyxnum || "---" }}</div>
+          </div>
+          <div class="item green" @click="changeShow('dj1_GDC', 0)">
+            <div>· 待机</div>
+            <div>{{ sourceMap.gfdjnum || "---" }}</div>
+          </div>
+          <div class="item purple" @click="changeShow('xd1_GDC', 5)">
+            <div>· 限电</div>
+            <div>{{ sourceMap.gfxdnum || "---" }}</div>
+          </div>
+          <div class="item red" @click="changeShow('gz1_GDC', 2)">
+            <div>· 故障</div>
+            <div>{{ sourceMap.gfgznum || "---" }}</div>
+          </div>
+          <div class="item orange" @click="changeShow('jx1_GDC', 4)">
+            <div>· 检修</div>
+            <div>{{ sourceMap.gfwhnum || "---" }}</div>
+          </div>
+          <div class="item write" @click="changeShow('sl1_GDC', 6)">
+            <div>· 受累</div>
+            <div>{{ sourceMap.gfslnum || "---" }}</div>
+          </div>
+          <div class="item gray" @click="changeShow('lx1_GDC', 3)">
+            <div>· 离线</div>
+            <div>{{ sourceMap.gflxnum || "---" }}</div>
+          </div>
         </div>
-      </div>
       </Col>
     </Row>
     <div class="panel-box">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
-        <div>
-          <div class="panel-title">
-            <div class="panel-title-name">
-              <i class="fa fa-send"></i>
-              <span>{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || '------'}}</span>
-              <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
-                <span class="sub-title">{{fcItem.text}}</span>
-                <span class="sub-count" :class="fcItem.color">{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]}}</span>
-              </div>
+        <div class="panel-title">
+          <div class="panel-title-name">
+            <i class="fa fa-send"></i>
+            <span>{{ sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || "------" }}</span>
+            <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
+              <span class="sub-title">{{ fcItem.text }}</span>
+              <span class="sub-count" :class="fcItem.color">{{ sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key] }}</span>
             </div>
           </div>
-          <div class="panel-body">
-            <table>
-              <tbody>
-                <tr>
-                  <td v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow">
-                    <div class="card" :class="cItem.color">
-                      {{cItem.wtnum}}
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+        </div>
+        <div class="panel-body">
+          <div class="card" v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow" :class="cItem.color">
+            {{ cItem.wtnum }}
           </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -129,12 +121,12 @@
 <script>
 import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
-import SvgIcon from '@com/coms/icon/svg-icon.vue';
-import util from '@/helper/util.js';
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import util from "@/helper/util.js";
 
 import store from "@store/index.js";
-import { isNumber } from 'util';
-import { setInterval, clearInterval } from 'timers';
+import { isNumber } from "util";
+import { setInterval, clearInterval } from "timers";
 
 export default {
   // 名称
@@ -143,111 +135,127 @@ export default {
   components: {
     Row,
     Col,
-    SvgIcon
+    SvgIcon,
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
-      fcStateArray: [{
-        text: "接入台数",
-        color: "write",
-        key: "jrts"
-      }, {
-        text: "待机台数",
-        color: "green",
-        key: "djts"
-      }, {
-        text: "并网台数",
-        color: "blue",
-        key: "yxts"
-      }, {
-        text: "限电台数",
-        color: "purple",
-        key: "xdts"
-      }, {
-        text: "故障台数",
-        color: "red",
-        key: "gzts"
-      }, {
-        text: "检修台数",
-        color: "orange",
-        key: "whts"
-      }, {
-        text: "受累台数",
-        color: "write",
-        key: "slts"
-      }, {
-        text: "离线台数",
-        color: "gray",
-        key: "lxts"
-      }, {
-        text: "风速",
-        color: "gray",
-        key: "ssfs"
-      }, {
-        text: "预测功率",
-        color: "gray",
-        key: "ycgl"
-      }, {
-        text: "保证功率",
-        color: "gray",
-        key: "bzgl"
-      }, {
-        text: "应发功率",
-        color: "gray",
-        key: "yfgl"
-      }, {
-        text: "实际功率",
-        color: "gray",
-        key: "sjgl"
-      }, {
-        text: "AGC指令",
-        color: "gray",
-        key: "agcygsd"
-      }, {
-        text: "出线功率",
-        color: "gray",
-        key: "agccxyg"
-      }]
-    }
+      fcStateArray: [
+        {
+          text: "接入台数",
+          color: "write",
+          key: "jrts",
+        },
+        {
+          text: "待机台数",
+          color: "green",
+          key: "djts",
+        },
+        {
+          text: "并网台数",
+          color: "blue",
+          key: "yxts",
+        },
+        {
+          text: "限电台数",
+          color: "purple",
+          key: "xdts",
+        },
+        {
+          text: "故障台数",
+          color: "red",
+          key: "gzts",
+        },
+        {
+          text: "检修台数",
+          color: "orange",
+          key: "whts",
+        },
+        {
+          text: "受累台数",
+          color: "write",
+          key: "slts",
+        },
+        {
+          text: "离线台数",
+          color: "gray",
+          key: "lxts",
+        },
+        {
+          text: "风速",
+          color: "gray",
+          key: "ssfs",
+        },
+        {
+          text: "预测功率",
+          color: "gray",
+          key: "ycgl",
+        },
+        {
+          text: "保证功率",
+          color: "gray",
+          key: "bzgl",
+        },
+        {
+          text: "应发功率",
+          color: "gray",
+          key: "yfgl",
+        },
+        {
+          text: "实际功率",
+          color: "gray",
+          key: "sjgl",
+        },
+        {
+          text: "AGC指令",
+          color: "gray",
+          key: "agcygsd",
+        },
+        {
+          text: "出线功率",
+          color: "gray",
+          key: "agccxyg",
+        },
+      ],
+    };
   },
 
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
-          return 'green';
+          return "green";
           break;
         case 1:
-          return 'blue';
+          return "blue";
           break;
         case 2:
-          return 'red';
+          return "red";
           break;
         case 3:
-          return 'gray';
+          return "gray";
           break;
         case 4:
-          return 'orange';
+          return "orange";
           break;
         case 5:
-          return 'purple';
+          return "purple";
           break;
         case 6:
-          return 'write';
+          return "write";
           break;
       }
     },
 
     // 切换显示种类
-    changeShow (category, fjzt, skipFill) {
+    changeShow(category, fjzt, skipFill) {
       if (!skipFill) {
         if (this.fillCategory === category) {
           this.fillCategory = null;
@@ -260,12 +268,12 @@ export default {
 
       let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
 
-      fjmap.forEach(pEle => {
-        pEle.forEach(cEle => {
+      fjmap.forEach((pEle) => {
+        pEle.forEach((cEle) => {
           cEle.isShow = true;
           if (!this.fillCategory) {
             cEle.isShow = true;
-          } else if (cEle.wpId.indexOf(category.split('_')[1]) !== -1) {
+          } else if (cEle.wpId.indexOf(category.split("_")[1]) !== -1) {
             if (isNumber(fjzt)) {
               cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
             } else {
@@ -280,22 +288,22 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixPush",
-        success (res) {
+        success(res) {
           if (res) {
             let sourceMap = res.data;
             let fjmap = [];
             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 = true;
                   });
@@ -309,13 +317,12 @@ export default {
           } else {
             that.sourceMap = {};
           }
-
-        }
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -325,11 +332,11 @@ export default {
     });
   },
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
-  }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -437,7 +444,7 @@ export default {
         }
         &:last-child {
           font-size: @fontsize;
-          font-family: 'Bicubik';
+          font-family: "Bicubik";
         }
       }
     }
@@ -467,7 +474,7 @@ export default {
         position: relative;
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -515,7 +522,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -554,56 +561,67 @@ export default {
       height: calc(100% - 7.407vh);
       background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
-      overflow: auto;
       margin-bottom: 1.481vh;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .blank {
+        margin-right: 4px;
+        flex: 1 0 4.4444vh;
+      }
 
-      table {
-        width: 100%;
+      .card {
+        margin-right: 4px;
+        margin-top: 4px;
+        flex: 1 0 4.4444vh;
+      }
 
-        .card {
-          border-radius: 0.37vh;
-          padding: 0.185vh 0;
-          text-align: center;
-          border: 0.093vh solid;
-          font-size: 14px;
+      .card {
+        border-radius: 0.37vh;
+        padding: 0.185vh 0.3704vh;
+        text-align: center;
+        border: 0.093vh solid;
+        font-size: 14px;
 
-          &.write {
-            color: @black;
-            border-color: @write;
-            background-color: @write;
-          }
+        &.write {
+          color: @black;
+          border-color: @write;
+          background-color: @write;
+        }
 
-          &.green {
-            color: @green;
-            border-color: @green;
-          }
+        &.green {
+          color: @green;
+          border-color: @green;
+        }
 
-          &.blue {
-            color: @darkBlue;
-            border-color: @darkBlue;
-          }
+        &.blue {
+          color: @darkBlue;
+          border-color: @darkBlue;
+        }
 
-          &.pink {
-            color: @pink;
-            border-color: @pink;
-          }
+        &.pink {
+          color: @pink;
+          border-color: @pink;
+        }
 
-          &.red {
-            color: @write;
-            border-color: @red;
-            background-color: @red;
-          }
+        &.red {
+          color: @write;
+          border-color: @red;
+          background-color: @red;
+        }
 
-          &.orange {
-            color: @orange;
-            border-color: @orange;
-          }
+        &.orange {
+          color: @orange;
+          border-color: @orange;
+        }
 
-          &.gray {
-            color: @write;
-            border-color: @darkgray;
-            background-color: @darkgray;
-          }
+        &.gray {
+          color: @write;
+          border-color: @darkgray;
+          background-color: @darkgray;
         }
       }
     }

src/views/LightMatrix2/LightMatrix2.vue

@@ -2,77 +2,69 @@
   <div class="light-matrix">
     <Row class="panel-2" type="">
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item">
-          <i :class="panel1Data.first.icon"></i>
-        </div>
-        <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
-          <div>{{ data.test }}</div>
-          <div>{{ sourceMap[data.key] }}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <i :class="panel1Data.first.icon"></i>
+          </div>
+          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
+            <div>{{ data.test }}</div>
+            <div>{{ sourceMap[data.key] }}</div>
+          </div>
         </div>
-      </div>
       </Col>
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
-          <div class="name">{{ data.test }}</div>
-          <div class="num2">{{ sourceMap[data.key] }}</div>
-          <!-- <div class="num1">×{{ data.num1 }}</div> -->
-          <div class="num3">{{ data.num3 }}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
+            <div class="name">{{ data.test }}</div>
+            <div class="num2">{{ sourceMap[data.key] }}</div>
+            <!-- <div class="num1">×{{ data.num1 }}</div> -->
+            <div class="num3">{{ data.num3 }}</div>
+          </div>
         </div>
-      </div>
       </Col>
     </Row>
     <div class="panel-box">
       <div v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
-        <div>
-          <div class="panel-title">
-            <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">
-                <span class="sub-title">{{ data.text }}</span>
-                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
-              </div>
+        <div class="panel-title">
+          <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">
+              <span class="sub-title">{{ data.text }}</span>
+              <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
             </div>
           </div>
-          <div class="panel-body">
-            <table>
-              <tbody>
-                <tr>
-                  <td v-for="(cItem, cIndex) in pItem" :key="cIndex">
-                    <div class="card" :class="cItem.color">
-                      <div class="card-panel">
-                        <div class="card-left">
-                          <div class="tag">{{ cItem.wtnum }}</div>
-                        </div>
-                        <div class="card-right">
-                          <div class="num">{{ cItem.gl }}</div>
-                          <div class="num">{{ cItem.fs }}</div>
-                        </div>
-                      </div>
-                      <div class="card-percent">
-                        <div class="split-item"></div>
-                        <div class="split-item"></div>
-                        <div class="split-item"></div>
-                        <div class="split-item"></div>
-                        <div class="split-item"></div>
-                        <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+        </div>
+        <div class="panel-body">
+          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
+            <div class="card-panel">
+              <div class="card-left">
+                <div class="tag">{{ cItem.wtnum }}</div>
+              </div>
+              <div class="card-right">
+                <div class="num">{{ cItem.gl }}</div>
+                <div class="num">{{ cItem.fs }}</div>
+              </div>
+            </div>
+            <div class="card-percent">
+              <div class="split-item"></div>
+              <div class="split-item"></div>
+              <div class="split-item"></div>
+              <div class="split-item"></div>
+              <div class="split-item"></div>
+              <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
+            </div>
           </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -95,7 +87,7 @@ export default {
     Col,
   },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
@@ -107,42 +99,42 @@ export default {
           {
             color: "write",
             test: "接入风机",
-            key: "fcjrnum"
+            key: "fcjrnum",
           },
           {
             color: "blue",
             test: "· 运行",
-            key: "fcyxnum"
+            key: "fcyxnum",
           },
           {
             color: "green",
             test: "· 待机",
-            key: "fcdjnum"
+            key: "fcdjnum",
           },
           {
             color: "pink",
             test: "· 限电",
-            key: "fcxdnum"
+            key: "fcxdnum",
           },
           {
             color: "red",
             test: "· 故障",
-            key: "fcgznum"
+            key: "fcgznum",
           },
           {
             color: "orange",
             test: "· 检修",
-            key: "fcwhnum"
+            key: "fcwhnum",
           },
           {
             color: "write",
             test: "· 受累",
-            key: "fcslnum"
+            key: "fcslnum",
           },
           {
             color: "gray",
             test: "· 离线",
-            key: "fclxnum"
+            key: "fclxnum",
           },
         ],
       },
@@ -187,12 +179,12 @@ export default {
             {
               text: "接入台数",
               color: "write",
-              key: "jrts"
+              key: "jrts",
             },
             {
               text: "待机台数",
               color: "green",
-              key: "djts"
+              key: "djts",
             },
             {
               text: "并网台数",
@@ -202,62 +194,62 @@ export default {
             {
               text: "限电台数",
               color: "pink",
-              key: "xdts"
+              key: "xdts",
             },
             {
               text: "故障台数",
               color: "red",
-              key: "gzts"
+              key: "gzts",
             },
             {
               text: "检修台数",
               color: "orange",
-              key: "whts"
+              key: "whts",
             },
             {
               text: "受累台数",
               color: "write",
-              key: "slts"
+              key: "slts",
             },
             {
               text: "离线台数",
               color: "gray",
-              key: "lxts"
+              key: "lxts",
             },
             {
               text: "风速",
               color: "gray",
-              key: "ssfs"
+              key: "ssfs",
             },
             {
               text: "预测功率",
               color: "gray",
-              key: "ycgl"
+              key: "ycgl",
             },
             {
               text: "保证功率",
               color: "gray",
-              key: "bzgl"
+              key: "bzgl",
             },
             {
               text: "应发功率",
               color: "gray",
-              key: "yfgl"
+              key: "yfgl",
             },
             {
               text: "实际功率",
               color: "gray",
-              key: "sjgl"
+              key: "sjgl",
             },
             {
               text: "AGC指令",
               color: "gray",
-              key: "agcygsd"
+              key: "agcygsd",
             },
             {
               text: "出线功率",
               color: "gray",
-              key: "agccxyg"
+              key: "agccxyg",
             },
           ],
           datas: [
@@ -269,59 +261,58 @@ export default {
               color: "blue",
             },
           ],
-          groupDatas: [],
         },
       ],
     };
   },
   // 函数
   methods: {
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
-          return 'green';
+          return "green";
           break;
         case 1:
-          return 'blue';
+          return "blue";
           break;
         case 2:
-          return 'red';
+          return "red";
           break;
         case 3:
-          return 'gray';
+          return "gray";
           break;
         case 4:
-          return 'orange';
+          return "orange";
           break;
         case 5:
-          return 'purple';
+          return "purple";
           break;
         case 6:
-          return 'write';
+          return "write";
           break;
       }
     },
 
-    calcGfStr (calcStr) {
-      return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
+    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/matrixQfPush",
-        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 = true;
                   });
@@ -332,12 +323,12 @@ export default {
           } else {
             that.sourceMap = {};
           }
-        }
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -347,14 +338,12 @@ export default {
     });
   },
 
-  mounted () {
-
-  },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
-  }
+  },
 };
 </script>
 
@@ -457,7 +446,7 @@ export default {
 
         &:last-child {
           font-size: @fontsize;
-          font-family: 'Bicubik';
+          font-family: "Bicubik";
         }
       }
     }
@@ -487,7 +476,7 @@ export default {
         position: relative;
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -535,7 +524,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -574,221 +563,230 @@ export default {
       height: calc(100% - 7.407vh);
       background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
-      overflow: auto;
       margin-bottom: 1.481vh;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
 
-      table {
-        width: 100%;
+      .blank {
+        margin-right: 4px;
+        flex: 1 0 13vh;
+      }
+      .card {
+        margin-right: 4px;
+        margin-top: 4px;
+        flex: 1 0 13vh;
+      }
 
-        .card {
-          border: 0.093vh solid;
+      .card {
+        border: 0.093vh solid;
 
-          .card-panel {
-            display: flex;
-            flex-grow: row;
+        .card-panel {
+          display: flex;
 
-            .card-left {
-              width: 40%;
-              border-right: 0.093vh dotted;
+          .card-left {
+            width: 40%;
+            border-right: 0.093vh dotted;
 
-              .tag {
-                color: @write;
-                font-size: 14px;
-                width: 100%;
-                text-align: center;
-              }
+            .tag {
+              color: @write;
+              font-size: 14px;
+              width: 100%;
+              text-align: center;
             }
+          }
 
-            .card-right {
-              width: 60%;
+          .card-right {
+            width: 60%;
 
-              .num {
-                width: 100%;
-                font-size: 13px;
-                text-align: right;
-                padding-right: 0.278vh;
-              }
+            .num {
+              width: 100%;
+              font-size: 13px;
+              text-align: right;
+              padding-right: 0.278vh;
             }
           }
+        }
 
-          .card-percent {
-            height: 0.926vh;
-            padding: 0.093vh 0.185vh;
-            position: relative;
-            border-top: 0.093vh solid;
-            background-color: transparent;
-            display: flex;
-
-            .split-item {
-              flex: 1;
-              border-right: 0.093vh solid @black;
-              z-index: 1;
-
-              &:last-child {
-                border: none;
-              }
+        .card-percent {
+          height: 0.926vh;
+          padding: 0.093vh 0.185vh;
+          position: relative;
+          border-top: 0.093vh solid;
+          background-color: transparent;
+          display: flex;
+
+          .split-item {
+            flex: 1;
+            border-right: 0.093vh solid @black;
+            z-index: 1;
+
+            &:last-child {
+              border: none;
             }
+          }
+
+          .percent {
+            height: 0.648vh;
+            background-color: @yellow;
+            position: absolute;
+            left: 0.185vh;
+            top: 0.093vh;
+          }
+        }
+
+        &.blue {
+          border-color: @darkBlue;
+          background-color: fade(@darkBlue, 30%);
 
-            .percent {
-              height: 0.648vh;
-              background-color: @yellow;
-              position: absolute;
-              left: 0.185vh;
-              top: 0.093vh;
+          .card-panel {
+            .card-left {
+              border-color: @darkBlue;
+            }
+
+            .card-right {
+              .num {
+                color: @darkBlue;
+              }
             }
           }
 
-          &.blue {
+          .card-percent {
             border-color: @darkBlue;
-            background-color: fade(@darkBlue, 30%);
+          }
+        }
 
-            .card-panel {
-              .card-left {
-                border-color: @darkBlue;
-              }
+        &.pink {
+          border-color: @pink;
+          background-color: fade(@pink, 30%);
 
-              .card-right {
-                .num {
-                  color: @darkBlue;
-                }
-              }
+          .card-panel {
+            .card-left {
+              border-color: @pink;
             }
 
-            .card-percent {
-              border-color: @darkBlue;
+            .card-right {
+              .num {
+                color: @pink;
+              }
             }
           }
 
-          &.pink {
+          .card-percent {
             border-color: @pink;
-            background-color: fade(@pink, 30%);
+          }
+        }
 
-            .card-panel {
-              .card-left {
-                border-color: @pink;
-              }
+        &.orange {
+          border-color: @orange;
+          background-color: fade(@orange, 30%);
 
-              .card-right {
-                .num {
-                  color: @pink;
-                }
-              }
+          .card-panel {
+            .card-left {
+              border-color: @orange;
             }
 
-            .card-percent {
-              border-color: @pink;
+            .card-right {
+              .num {
+                color: @orange;
+              }
             }
           }
 
-          &.orange {
+          .card-percent {
             border-color: @orange;
-            background-color: fade(@orange, 30%);
+          }
+        }
 
-            .card-panel {
-              .card-left {
-                border-color: @orange;
-              }
+        &.green {
+          border-color: @green;
+          background-color: fade(@green, 30%);
 
-              .card-right {
-                .num {
-                  color: @orange;
-                }
-              }
+          .card-panel {
+            .card-left {
+              border-color: @green;
             }
 
-            .card-percent {
-              border-color: @orange;
+            .card-right {
+              .num {
+                color: @green;
+              }
             }
           }
 
-          &.green {
+          .card-percent {
             border-color: @green;
-            background-color: fade(@green, 30%);
+          }
+        }
 
-            .card-panel {
-              .card-left {
-                border-color: @green;
-              }
+        &.gray {
+          border-color: @darkgray;
+          background-color: fade(@darkgray, 30%);
 
-              .card-right {
-                .num {
-                  color: @green;
-                }
-              }
+          .card-panel {
+            .card-left {
+              border-color: @darkgray;
             }
 
-            .card-percent {
-              border-color: @green;
+            .card-right {
+              .num {
+                color: @gray;
+              }
             }
           }
 
-          &.gray {
+          .card-percent {
             border-color: @darkgray;
-            background-color: fade(@darkgray, 30%);
-
-            .card-panel {
-              .card-left {
-                border-color: @darkgray;
-              }
-
-              .card-right {
-                .num {
-                  color: @gray;
-                }
-              }
-            }
-
-            .card-percent {
-              border-color: @darkgray;
-            }
           }
+        }
 
-          &.red {
-            border-color: @red;
+        &.red {
+          border-color: @red;
 
-            .card-panel {
-              background-color: @red;
+          .card-panel {
+            background-color: @red;
 
-              .card-left {
-                border-color: @darkRed;
-              }
+            .card-left {
+              border-color: @darkRed;
+            }
 
-              .card-right {
-                .num {
-                  color: @write;
-                }
+            .card-right {
+              .num {
+                color: @write;
               }
             }
+          }
 
-            .card-percent {
-              border-color: @red;
-            }
+          .card-percent {
+            border-color: @red;
           }
+        }
 
-          &.write {
-            border-color: @write;
+        &.write {
+          border-color: @write;
 
-            .card-panel {
-              background-color: @write;
+          .card-panel {
+            background-color: @write;
 
-              .card-left {
-                border-color: @black;
+            .card-left {
+              border-color: @black;
 
-                .tag {
-                  color: @black;
-                }
+              .tag {
+                color: @black;
               }
+            }
 
-              .card-right {
-                .num {
-                  color: @black;
-                }
+            .card-right {
+              .num {
+                color: @black;
               }
             }
+          }
 
-            .card-percent {
-              border-color: @write;
-            }
+          .card-percent {
+            border-color: @write;
           }
         }
       }

src/views/LightMatrix3/LightMatrix3.vue

@@ -7,46 +7,46 @@
       <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>
-            </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>
+          <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-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 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>
-          <div class="panel-item-right">
-            <div class="panel-item-ri">
-              <span>{{ data.text1 }}</span>
-              <span>{{ sourceMap[data.key1] || '---' }}</span>
+        </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>
-            <div class="panel-item-ri">
-              <span>{{ data.text2 }}</span>
-              <span>{{ sourceMap[data.key2] || '---' }}</span>
+            <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>
           </div>
-        </div>
         </Col>
       </Row>
     </div>
@@ -55,7 +55,7 @@
         <div class="panel-title">
           <div class="panel-title-name">
             <i class="fa fa-send"></i>
-            <span>{{sourceMap.fczbmap[pItem[pIndex].wpId].name}}</span>
+            <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
             <div class="sub-title-item" v-for="(data, index) of tables[0].subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
               <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
@@ -63,38 +63,38 @@
           </div>
         </div>
         <div class="panel-body">
-          <table>
-            <tbody>
-              <tr>
-                <td v-for="(cItem, cIndex) in pItem" :key="cIndex">
-                  <div class="card" :class="cItem.color">
-                    <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'write' ? 'svg-icon-black' : 'svg-icon-write'">
-                      <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
-                    </span>
-                    <div class="card-panel">
-                      <div class="card-left">
-                        <div class="tag">{{ cItem.wtnum }}</div>
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ cItem.fdl }}</span>
-                        </div>
-                      </div>
-                      <div class="card-right">
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ cItem.gl }}</span>
-                        </div>
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ cItem.fs }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
+            <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'black' ? 'svg-icon-black' : 'svg-icon-write'">
+              <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
+            </span>
+            <div class="card-panel">
+              <div class="card-left">
+                <div class="tag">{{ cItem.wtnum }}</div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                    <SvgIcon svgid="svg-W"></SvgIcon>
+                  </i>
+                  <div>{{ cItem.fdl }}</div>
+                </div>
+              </div>
+              <div class="card-right">
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                    <SvgIcon svgid="svg-R"></SvgIcon>
+                  </i>
+                  <div>{{ cItem.gl }}</div>
+                </div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                    <SvgIcon svgid="svg-P"></SvgIcon>
+                  </i>
+                  <div>{{ cItem.fs }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -120,7 +120,7 @@ export default {
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
@@ -131,7 +131,7 @@ export default {
         red: "svg-gz-downtime",
         orange: "svg-jx-downtime",
         gray: "svg-offline",
-        write: "svg-intranet-involvement",
+        black: "svg-intranet-involvement",
       },
       panelData: {
         first: {
@@ -216,7 +216,7 @@ export default {
             key1: "fclxnum",
             text2: "未知",
             key2: "fcwznum",
-          }
+          },
         ],
       },
       tables: [
@@ -226,12 +226,12 @@ export default {
             {
               text: "接入台数",
               color: "write",
-              key: "jrts"
+              key: "jrts",
             },
             {
               text: "待机台数",
               color: "green",
-              key: "djts"
+              key: "djts",
             },
             {
               text: "并网台数",
@@ -241,74 +241,73 @@ export default {
             {
               text: "限电台数",
               color: "pink",
-              key: "xdts"
+              key: "xdts",
             },
             {
               text: "故障台数",
               color: "red",
-              key: "gzts"
+              key: "gzts",
             },
             {
               text: "检修台数",
               color: "orange",
-              key: "whts"
+              key: "whts",
             },
             {
               text: "受累台数",
               color: "write",
-              key: "slts"
+              key: "slts",
             },
             {
               text: "离线台数",
               color: "gray",
-              key: "lxts"
+              key: "lxts",
             },
             {
               text: "风速",
               color: "gray",
-              key: "ssfs"
+              key: "ssfs",
             },
             {
               text: "预测功率",
               color: "gray",
-              key: "ycgl"
+              key: "ycgl",
             },
             {
               text: "保证功率",
               color: "gray",
-              key: "bzgl"
+              key: "bzgl",
             },
             {
               text: "应发功率",
               color: "gray",
-              key: "yfgl"
+              key: "yfgl",
             },
             {
               text: "实际功率",
               color: "gray",
-              key: "sjgl"
+              key: "sjgl",
             },
             {
               text: "AGC指令",
               color: "gray",
-              key: "agcygsd"
+              key: "agcygsd",
             },
             {
               text: "出线功率",
               color: "gray",
-              key: "agccxyg"
+              key: "agccxyg",
             },
           ],
           datas: [
             {
               tag: "A-11",
-              num1: 12.6,
-              num2: 12.6,
-              num3: 12.6,
+              num1: 1234.56,
+              num2: 1234.56,
+              num3: 1234.56,
               color: "blue",
             },
           ],
-          groupDatas: [],
         },
       ],
     };
@@ -317,52 +316,52 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
-          return 'green';
+          return "green";
           break;
         case 1:
-          return 'blue';
+          return "blue";
           break;
         case 2:
-          return 'red';
+          return "red";
           break;
         case 3:
-          return 'gray';
+          return "gray";
           break;
         case 4:
-          return 'orange';
+          return "orange";
           break;
         case 5:
-          return 'purple';
+          return "purple";
           break;
         case 6:
-          return 'write';
+          return "black";
           break;
       }
     },
 
-    calcGfStr (calcStr) {
-      return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
+    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/matrixDetialPush",
-        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 = true;
                   });
@@ -373,12 +372,12 @@ export default {
           } else {
             that.sourceMap = {};
           }
-        }
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -388,14 +387,12 @@ export default {
     });
   },
 
-  mounted () {
+  mounted() {},
 
-  },
-
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
-  }
+  },
 };
 </script>
 
@@ -685,7 +682,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -724,321 +721,350 @@ export default {
       background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
       margin-bottom: 1.481vh;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
 
-      table {
-        width: 100%;
+      .blank {
+        margin-right: 4px;
+        flex: 1 0 15vh;
+      }
+
+      .card {
+        margin-right: 4px;
+        margin-top: 4px;
+        flex: 1 0 15vh;
+      }
+
+      .card {
+        border: 0.093vh solid;
+        position: relative;
+
+        .center-icon {
+          font-size: 2.222vh;
+          position: absolute;
+          left: calc(50% - 1.111vh);
+          top: calc(50% - 1.111vh);
+        }
+
+        .card-panel {
+          display: flex;
+
+          .card-left {
+            flex: 1 0 auto;
+            border-right: 0.093vh solid;
+
+            .tag {
+              color: @write;
+              font-size: 14px;
+              width: 100%;
+              text-align: center;
+              border-bottom: 0.093vh solid;
+              padding: 0.37vh 0;
+            }
 
-        .card {
-          border: 0.093vh solid;
+            .num {
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+              width: 100%;
+              font-size: 14px;
+              text-align: left;
+              padding: 0.37vh 0;
+
+              div {
+                min-width: 5.463vh;
+                display: inline-block;
+                margin-right: 0.3704vh;
+              }
+
+              i {
+                margin-top: 0.2778vh;
+                margin-left: 0.7407vh;
+              }
+            }
+          }
+
+          .card-right {
+            flex: 1 0 auto;
+
+            .num {
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+              width: 100%;
+              font-size: 14px;
+              text-align: left;
+              padding: 0.37vh 0;
+
+              &:first-child {
+                border-bottom: 0.093vh solid;
+              }
+
+              div {
+                min-width: 5.463vh;
+                display: inline-block;
+                margin-right: 0.3704vh;
+              }
+
+              i {
+                margin-top: 0.2778vh;
+                margin-left: 0.7407vh;
+              }
+            }
+          }
+        }
+
+        .card-percent {
+          height: 0.926vh;
+          padding: 0.093vh 0.185vh;
           position: relative;
+          border-top: 0.093vh solid;
+          background-color: transparent;
 
-          .center-icon {
-            font-size: 2.222vh;
+          .percent {
+            height: 0.648vh;
+            background-color: @green;
             position: absolute;
-            left: calc(50% - 1.111vh);
-            top: calc(50% - 1.111vh);
+            left: 0.185vh;
+            top: 0.093vh;
           }
+        }
 
-          .card-panel {
-            display: flex;
-            flex-grow: row;
+        &.blue {
+          border-color: @darkBlue;
+          background-color: fade(@darkBlue, 30%);
+
+          .center-icon {
+            color: @write;
+          }
 
+          .card-panel {
             .card-left {
-              width: 50%;
-              border-right: 0.093vh solid;
+              border-color: @darkBlue;
 
               .tag {
-                color: @write;
-                font-size: 14px;
-                width: 100%;
-                text-align: center;
-                border-bottom: 0.093vh solid;
-                padding: 0.37vh 0;
+                border-color: @darkBlue;
               }
 
               .num {
-                width: 100%;
-                font-size: 14px;
-                text-align: left;
-                padding-right: 0.278vh;
-                padding: 0.37vh 0;
-
-                i {
-                  margin: 0 0.37vh;
-                }
+                color: @darkBlue;
               }
             }
 
             .card-right {
-              width: 50%;
-
               .num {
-                width: 100%;
-                font-size: 14px;
-                text-align: left;
-                padding-right: 0.278vh;
-                padding: 0.37vh 0;
-
-                &:first-child {
-                  border-bottom: 0.093vh solid;
-                }
-
-                i {
-                  margin: 0 0.37vh;
-                }
+                color: @darkBlue;
+                border-color: @darkBlue;
               }
             }
           }
 
           .card-percent {
-            height: 0.926vh;
-            padding: 0.093vh 0.185vh;
-            position: relative;
-            border-top: 0.093vh solid;
-            background-color: transparent;
-
-            .percent {
-              height: 0.648vh;
-              background-color: @green;
-              position: absolute;
-              left: 0.185vh;
-              top: 0.093vh;
-            }
-          }
-
-          &.blue {
             border-color: @darkBlue;
-            background-color: fade(@darkBlue, 30%);
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.pink {
+          border-color: @pink;
+          background-color: fade(@pink, 30%);
 
-            .card-panel {
-              .card-left {
-                border-color: @darkBlue;
+          .center-icon {
+            color: @write;
+          }
 
-                .tag {
-                  border-color: @darkBlue;
-                }
+          .card-panel {
+            .card-left {
+              border-color: @pink;
 
-                .num {
-                  color: @darkBlue;
-                }
+              .tag {
+                border-color: @pink;
               }
 
-              .card-right {
-                .num {
-                  color: @darkBlue;
-                  border-color: @darkBlue;
-                }
+              .num {
+                color: @pink;
               }
             }
 
-            .card-percent {
-              border-color: @darkBlue;
+            .card-right {
+              .num {
+                color: @pink;
+                border-color: @pink;
+              }
             }
           }
 
-          &.pink {
+          .card-percent {
             border-color: @pink;
-            background-color: fade(@pink, 30%);
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.orange {
+          border-color: @orange;
+          background-color: fade(@orange, 30%);
 
-            .card-panel {
-              .card-left {
-                border-color: @pink;
+          .center-icon {
+            color: @write;
+          }
 
-                .tag {
-                  border-color: @pink;
-                }
+          .card-panel {
+            .card-left {
+              border-color: @orange;
 
-                .num {
-                  color: @pink;
-                }
+              .tag {
+                border-color: @orange;
               }
 
-              .card-right {
-                .num {
-                  color: @pink;
-                  border-color: @pink;
-                }
+              .num {
+                color: @orange;
               }
             }
 
-            .card-percent {
-              border-color: @pink;
+            .card-right {
+              .num {
+                color: @orange;
+                border-color: @orange;
+              }
             }
           }
 
-          &.orange {
+          .card-percent {
             border-color: @orange;
-            background-color: fade(@orange, 30%);
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.green {
+          border-color: @green;
+          background-color: fade(@green, 30%);
 
-            .card-panel {
-              .card-left {
-                border-color: @orange;
+          .center-icon {
+            color: @write;
+          }
 
-                .tag {
-                  border-color: @orange;
-                }
+          .card-panel {
+            .card-left {
+              border-color: @green;
 
-                .num {
-                  color: @orange;
-                }
+              .tag {
+                border-color: @green;
               }
 
-              .card-right {
-                .num {
-                  color: @orange;
-                  border-color: @orange;
-                }
+              .num {
+                color: @green;
               }
             }
 
-            .card-percent {
-              border-color: @orange;
+            .card-right {
+              .num {
+                color: @green;
+                border-color: @green;
+              }
             }
           }
 
-          &.green {
+          .card-percent {
             border-color: @green;
-            background-color: fade(@green, 30%);
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.gray {
+          border-color: @darkgray;
+          background-color: fade(@darkgray, 30%);
 
-            .card-panel {
-              .card-left {
-                border-color: @green;
+          .center-icon {
+            color: @write;
+          }
 
-                .tag {
-                  border-color: @green;
-                }
+          .card-panel {
+            .card-left {
+              border-color: @darkgray;
 
-                .num {
-                  color: @green;
-                }
+              .tag {
+                border-color: @darkgray;
               }
 
-              .card-right {
-                .num {
-                  color: @green;
-                  border-color: @green;
-                }
+              .num {
+                color: @gray;
               }
             }
 
-            .card-percent {
-              border-color: @green;
+            .card-right {
+              .num {
+                color: @gray;
+                border-color: @darkgray;
+              }
             }
           }
 
-          &.gray {
+          .card-percent {
             border-color: @darkgray;
-            background-color: fade(@darkgray, 30%);
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.red {
+          border-color: @red;
 
-            .card-panel {
-              .card-left {
-                border-color: @darkgray;
+          .center-icon {
+            color: @write;
+          }
+
+          .card-panel {
+            background-color: @red;
 
-                .tag {
-                  border-color: @darkgray;
-                }
+            .card-left {
+              border-color: @darkRed;
 
-                .num {
-                  color: @gray;
-                }
+              .tag {
+                border-color: @darkRed;
               }
 
-              .card-right {
-                .num {
-                  color: @gray;
-                  border-color: @darkgray;
-                }
+              .num {
+                color: @write;
               }
             }
 
-            .card-percent {
-              border-color: @darkgray;
+            .card-right {
+              .num {
+                color: @write;
+                border-color: @darkRed;
+              }
             }
           }
 
-          &.red {
+          .card-percent {
             border-color: @red;
+          }
+        }
 
-            .center-icon {
-              color: @write;
-            }
+        &.black {
+          border-color: @write;
 
-            .card-panel {
-              background-color: @red;
+          .center-icon {
+            color: @black;
+          }
 
-              .card-left {
-                border-color: @darkRed;
+          .card-panel {
+            background-color: @write;
 
-                .tag {
-                  border-color: @darkRed;
-                }
+            .card-left {
+              border-color: @black;
 
-                .num {
-                  color: @write;
-                }
+              .tag {
+                color: @black;
+                border-color: @black;
               }
 
-              .card-right {
-                .num {
-                  color: @write;
-                  border-color: @darkRed;
-                }
+              .num {
+                color: @black;
               }
             }
 
-            .card-percent {
-              border-color: @red;
-            }
-          }
-
-          &.write {
-            border-color: @write;
-
-            .center-icon {
-              color: @black;
-            }
-
-            .card-panel {
-              background-color: @write;
-
-              .card-left {
+            .card-right {
+              .num {
+                color: @black;
                 border-color: @black;
-
-                .tag {
-                  color: @black;
-                  border-color: @black;
-                }
-
-                .num {
-                  color: @black;
-                }
-              }
-
-              .card-right {
-                .num {
-                  color: @black;
-                  border-color: @black;
-                }
               }
             }
           }

src/views/WindSite/WindSite.vue

@@ -65,6 +65,14 @@ export default {
           icon: "svg-easy-compass",
           path: "/windsite/tower",
         },
+        {
+          icon: "svg-easy-compass",
+          path: "/windsite/Inverter-Info",
+        },
+        {
+          icon: "svg-easy-compass",
+          path: "/windsite/map",
+        },
       ],
     };
   },
@@ -105,6 +113,7 @@ export default {
 
     .page-common-body-router {
       overflow: auto;
+      overflow-x: hidden;
       height: calc(100vh - 7.037vh);
       flex: 1 1 auto;
     }
@@ -121,8 +130,8 @@ export default {
 
         .page-common-body-menu-border {
           position: absolute;
-          width: 0.370vh;
-          height: 0.370vh;
+          width: 0.37vh;
+          height: 0.37vh;
           background-color: @write;
           border-radius: 50%;
 
@@ -168,11 +177,11 @@ export default {
 
             &::after {
               content: "";
-              width: calc(100% - 0.370vh);
-              height: calc(100% - 0.370vh);
+              width: calc(100% - 0.37vh);
+              height: calc(100% - 0.37vh);
               position: absolute;
               border: 0.093vh solid @yellow;
-              box-shadow: 0 0 0.370vh @yellow;
+              box-shadow: 0 0 0.37vh @yellow;
               top: 0.093vh;
               left: 0.093vh;
             }

src/views/WindSite/pages/Home/light-matrix.vue

@@ -1,16 +1,10 @@
 <template>
   <div class="light-matrix-small">
-    <table>
-      <tbody>
-        <tr v-for="(row, i) of table.groupDatas" :key="i">
-          <td v-for="(col, j) of row" :key="j">
-            <div class="card" :class="col.color">
-              {{ col.tag }}
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="card" v-for="(item, i) of list" :key="i" :class="item.color">
+      {{ item.tag }}
+    </div>
+    <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+    <i class="blank" v-for="i in list.length" :key="i"></i>
   </div>
 </template>
 
@@ -24,283 +18,261 @@ export default {
   // 数据
   data() {
     return {
-      table: {
-        col: 42,
-        datas: [
-          {
-            tag: "A01",
-            color: "gray",
-          },
-        ],
-        groupDatas: [
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "red",
-            },
-            {
-              tag: "A01",
-              color: "red",
-            },
-            {
-              tag: "A01",
-              color: "orange",
-            },
-            {
-              tag: "A01",
-              color: "orange",
-            },
-            {
-              tag: "A01",
-              color: "green",
-            },
-            {
-              tag: "A01",
-              color: "yellow",
-            },
-            {
-              tag: "A01",
-              color: "yellow",
-            },
-            {
-              tag: "A01",
-              color: "blue",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-          [
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-            {
-              tag: "A01",
-              color: "gray",
-            },
-          ],
-        ],
-      },
+      // 数据结构
+      list: [
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+        {
+          tag: "A01",
+          color: "gray",
+        },
+      ],
     };
   },
   // 函数
@@ -332,14 +304,28 @@ export default {
 @titleHeight: 3.704vh;
 
 .light-matrix-small {
-  display: flex;
-  flex-direction: column;
   padding: 8px;
   background: fade(@gray, 20);
 
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .blank {
+    margin-right: 4px;
+    flex: 1 0 4.4444vh;
+  }
+
+  .card {
+    margin-right: 4px;
+    margin-top: 4px;
+    flex: 1 0 4.4444vh;
+  }
+
   .card {
     border-radius: 0.37vh;
-    padding: 0.185vh 0;
+    padding: 0.185vh 0.3704vh;
     text-align: center;
     border: 0.093vh solid;
     font-size: 14px;
@@ -377,9 +363,9 @@ export default {
     }
 
     &.gray {
-      color: @gray;
-      border-color: @gray;
-      background-color: transparent;
+      color: @write;
+      border-color: @darkgray;
+      background-color: @darkgray;
     }
   }
 }

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

@@ -0,0 +1,288 @@
+<template>
+  <div class="Inverter-Info">
+    <div class="btn-group-tabs">
+      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
+    </div>
+    <div class="box-main">
+      <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List>
+      <div class="Inverter-Info-body">
+        <div class="Inverter-Info-title">
+          <div class="title">逆变室编号:28#</div>
+          <div class="title-tools">
+            <div class="previous">上一页</div>
+            <div class="next">上一页</div>
+            <div class="return">返回</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import List from "@com/coms/list/list.vue";
+import util from "@/helper/util.js";
+export default {
+  // 名称
+  name: "Box",
+  // 使用组件
+  components: {
+    BtnGroup2,
+    List,
+  },
+  // 数据
+  data() {
+    return {
+      btnGroups: [
+        {
+          icon: "fa fa-fire",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmfdc1",
+            },
+            {
+              text: "某某风场",
+              code: "mhsfc",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc2",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc3",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc4",
+            },
+          ],
+        },
+        {
+          icon: "fa fa-fire-extinguisher",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmgf1",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf2",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf3",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf4",
+            },
+          ],
+        },
+      ],
+      list: {
+        title: "逆变器列表",
+        datas: [
+          {
+            text: "1#逆变室",
+            color: "blue",
+          },
+        ],
+      },
+      grid: {
+        title: {
+          show: true,
+          icon: "fa fa-fire",
+          text: "第一号小室",
+        },
+        subTitle: {
+          show: true,
+          text: "3#逆变室",
+          subText: "逆变器型号：GBL-2000",
+        },
+        start: 0,
+        limit: 20,
+        column: [{ name: "汇流箱编号", field: "no", is_num: false, is_light: false }],
+        data: {
+          list: [],
+          total: 160,
+        },
+      },
+    };
+  },
+  // 函数
+  methods: {
+    selectList: function(item) {
+      console.log(item);
+    },
+    select: function(item) {
+      console.log(item);
+    },
+    onReturn: function() {
+      console.log("return");
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    for (let i = 2; i <= 16; i++) {
+      let t = {
+        text: i + "#逆变室",
+      };
+      if (i <= 5) {
+        t.color = "blue";
+      } else if (i <= 6) {
+        t.color = "green";
+      } else if (i <= 8) {
+        t.color = "red";
+      } else {
+        t.color = "yellow";
+      }
+      this.list.datas.push(t);
+    }
+    for (let i = 1; i <= 28; i++) {
+      let temp = { name: i + "#", field: "n" + i, is_num: false, is_light: false };
+      if (i == 11) {
+        temp.is_light = true;
+      }
+      this.grid.column.push(temp);
+    }
+    for (let i = 1; i <= 12; i++) {
+      let temp = {
+        no: "第" + i + "支电流",
+        is_light: false,
+      };
+      for (let i = 1; i <= 28; i++) {
+        temp["n" + i] = 5.9;
+      }
+      this.grid.data.list.push(temp);
+    }
+    let temp = {
+      no: "总路数",
+      is_light: true,
+    };
+    for (let i = 1; i <= 28; i++) {
+      temp["n" + i] = 8.0;
+    }
+    this.grid.data.list.push(temp);
+    temp = {
+      no: "总电流",
+      is_light: false,
+    };
+    for (let i = 1; i <= 28; i++) {
+      temp["n" + i] = 5.9;
+    }
+    this.grid.data.list.push(temp);
+    temp = {
+      no: "电压",
+      is_light: false,
+    };
+    for (let i = 1; i <= 28; i++) {
+      temp["n" + i] = 162.0;
+    }
+    this.grid.data.list.push(temp);
+    temp = {
+      no: "内部温度",
+      is_light: false,
+    };
+    for (let i = 1; i <= 28; i++) {
+      temp["n" + i] = 0.0;
+    }
+    this.grid.data.list.push(temp);
+    temp = {
+      no: "避雷信号",
+      is_light: false,
+    };
+    for (let i = 1; i <= 28; i++) {
+      temp["n" + i] = 0.0;
+    }
+    this.grid.data.list.push(temp);
+    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
+    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
+    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
+    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
+    this.grid.data.total = this.grid.data.list.length;
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.state-green {
+  width: 0.741vh;
+  height: 0.741vh;
+  background-color: @green;
+}
+
+.Inverter-Info {
+  width: 100%;
+  height: 100%;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+
+    .photovoltaic {
+      margin-left: 1.481vh;
+    }
+  }
+
+  .box-main {
+    width: 100%;
+    height: calc(100vh - 12.963vh);
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.481vh;
+
+    .list {
+      margin-right: 1.481vh;
+      flex: 0 0 auto;
+    }
+
+    .Inverter-Info-body {
+      flex: 1 0 auto;
+
+      .Inverter-Info-title {
+        position: relative;
+        background: fade(@darkgray, 40);
+        padding: 16px 20px;
+        .title {
+          font-size: @fontsize;
+          color: @green;
+        }
+
+        .title-tools {
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: flex;
+
+          & > div {
+            padding: 16px;
+          }
+
+          .return {
+            padding-left: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/WindSite/pages/LightMatrix.vue

@@ -60,40 +60,34 @@
       </div>
     </div>
     <div class="panel-body">
-      <table>
-        <tbody>
-          <tr v-for="(row, i) of groupDatas" :key="i">
-            <td v-for="(col, j) of row" :key="j">
-              <div class="card" :class="col.color">
-                <div class="card-panel">
-                  <div class="card-left">
-                    <div class="tag">{{ col.tag }}</div>
-                    <div class="icon">
-                      <span class="svg-icon svg-icon-sm" :class="col.color == 'write' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
-                        <SvgIcon :svgid="col.icon"></SvgIcon>
-                      </span>
-                    </div>
-                  </div>
-                  <div class="card-right">
-                    <div class="num">
-                      <i class="fa fa-user"></i>
-                      <span>{{ col.num1 }}</span>
-                    </div>
-                    <div class="num">
-                      <i class="fa fa-user"></i>
-                      <span>{{ col.num2 }}</span>
-                    </div>
-                    <div class="num">
-                      <i class="fa fa-user"></i>
-                      <span>{{ col.num3 }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="card" v-for="(col, j) of datas" :key="j" :class="col.color">
+        <div class="card-panel">
+          <div class="card-left">
+            <div class="tag">{{ col.tag }}</div>
+            <div class="icon">
+              <span class="svg-icon svg-icon-sm" :class="col.color == 'write' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                <SvgIcon :svgid="col.icon"></SvgIcon>
+              </span>
+            </div>
+          </div>
+          <div class="card-right">
+            <div class="num">
+              <i class="fa fa-user"></i>
+              <span>{{ col.num1 }}</span>
+            </div>
+            <div class="num">
+              <i class="fa fa-user"></i>
+              <span>{{ col.num2 }}</span>
+            </div>
+            <div class="num">
+              <i class="fa fa-user"></i>
+              <span>{{ col.num3 }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+      <i class="blank" v-for="i in datas.length" :key="i"></i>
     </div>
   </div>
 </template>
@@ -289,29 +283,10 @@ export default {
           color: "blue",
         },
       ],
-      groupDatas: [],
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function() {
-      this.groupDatas = [];
-      let tempDatas = [];
-      this.datas.forEach((data, index) => {
-        if (index % this.col == 0) {
-          if (tempDatas.length > 0) {
-            this.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        this.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -341,7 +316,6 @@ export default {
       }
     }
     this.datas = util.copy(tempData);
-    this.createGroupDatas();
   },
   beforeMount() {
     // 渲染前
@@ -679,287 +653,298 @@ export default {
     background-color: fade(@darkgray, 20%);
     padding: 0.741vh;
     overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .blank {
+      margin-right: 4px;
+      flex: 1 0 125px;
+    }
 
-    table {
-      width: 100%;
+    .card {
+      margin-right: 4px;
+      margin-top: 4px;
+      flex: 1 0 125px;
+    }
 
-      .card {
-        border: 0.093vh solid;
+    .card {
+      border: 0.093vh solid;
 
-        .card-panel {
-          display: flex;
-          flex-grow: row;
+      .card-panel {
+        display: flex;
 
-          .card-left {
-            width: 40%;
-            border-right: 0.093vh dotted;
-            display: flex;
-            flex-direction: column;
+        .card-left {
+          width: 40%;
+          border-right: 0.093vh dotted;
+          display: flex;
+          flex-direction: column;
 
-            .tag {
-              color: @write;
-              font-size: 14px;
-              width: 100%;
-              text-align: center;
-            }
+          .tag {
+            color: @write;
+            font-size: 14px;
+            width: 100%;
+            text-align: center;
+          }
 
-            .icon {
-              flex-grow: 1;
-              display: flex;
-              align-items: center;
-              justify-content: center;
+          .icon {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-              i {
-                font-size: 1.667vh;
-              }
+            i {
+              font-size: 1.667vh;
             }
           }
+        }
 
-          .card-right {
-            width: 60%;
+        .card-right {
+          width: 60%;
 
-            .num {
-              width: 100%;
-              font-size: 14px;
-              text-align: left;
-              padding-right: 0.278vh;
+          .num {
+            width: 100%;
+            font-size: 14px;
+            text-align: left;
+            padding-right: 0.278vh;
 
-              i {
-                margin: 0 0.37vh;
-              }
+            i {
+              margin: 0 0.37vh;
             }
           }
         }
+      }
 
-        .card-percent {
-          height: 0.926vh;
-          padding: 0.093vh 0.185vh;
-          position: relative;
-          border-top: 0.093vh solid;
-          background-color: transparent;
-
-          .percent {
-            height: 0.648vh;
-            background-color: @green;
-            position: absolute;
-            left: 0.185vh;
-            top: 0.093vh;
-          }
+      .card-percent {
+        height: 0.926vh;
+        padding: 0.093vh 0.185vh;
+        position: relative;
+        border-top: 0.093vh solid;
+        background-color: transparent;
+
+        .percent {
+          height: 0.648vh;
+          background-color: @green;
+          position: absolute;
+          left: 0.185vh;
+          top: 0.093vh;
         }
+      }
 
-        &.blue {
-          border-color: @darkBlue;
-          background-color: fade(@darkBlue, 30%);
-
-          .card-panel {
-            .card-left {
-              border-color: @darkBlue;
+      &.blue {
+        border-color: @darkBlue;
+        background-color: fade(@darkBlue, 30%);
 
-              .tag {
-                background-color: @darkBlue;
-              }
+        .card-panel {
+          .card-left {
+            border-color: @darkBlue;
 
-              .icon {
-                i {
-                  color: @write;
-                }
-              }
+            .tag {
+              background-color: @darkBlue;
             }
 
-            .card-right {
-              .num {
-                color: @darkBlue;
+            .icon {
+              i {
+                color: @write;
               }
             }
           }
 
-          .card-percent {
-            border-color: @darkBlue;
+          .card-right {
+            .num {
+              color: @darkBlue;
+            }
           }
         }
 
-        &.pink {
-          border-color: @pink;
-          background-color: fade(@pink, 30%);
+        .card-percent {
+          border-color: @darkBlue;
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @pink;
+      &.pink {
+        border-color: @pink;
+        background-color: fade(@pink, 30%);
 
-              .tag {
-                background-color: @pink;
-              }
+        .card-panel {
+          .card-left {
+            border-color: @pink;
 
-              .icon {
-                i {
-                  color: @write;
-                }
-              }
+            .tag {
+              background-color: @pink;
             }
 
-            .card-right {
-              .num {
-                color: @pink;
+            .icon {
+              i {
+                color: @write;
               }
             }
           }
 
-          .card-percent {
-            border-color: @pink;
+          .card-right {
+            .num {
+              color: @pink;
+            }
           }
         }
 
-        &.orange {
-          border-color: @orange;
-          background-color: fade(@orange, 30%);
+        .card-percent {
+          border-color: @pink;
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @orange;
+      &.orange {
+        border-color: @orange;
+        background-color: fade(@orange, 30%);
 
-              .tag {
-                background-color: @orange;
-              }
+        .card-panel {
+          .card-left {
+            border-color: @orange;
 
-              .icon {
-                i {
-                  color: @write;
-                }
-              }
+            .tag {
+              background-color: @orange;
             }
 
-            .card-right {
-              .num {
-                color: @orange;
+            .icon {
+              i {
+                color: @write;
               }
             }
           }
 
-          .card-percent {
-            border-color: @orange;
+          .card-right {
+            .num {
+              color: @orange;
+            }
           }
         }
 
-        &.green {
-          border-color: @green;
-          background-color: fade(@green, 30%);
+        .card-percent {
+          border-color: @orange;
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @green;
+      &.green {
+        border-color: @green;
+        background-color: fade(@green, 30%);
 
-              .tag {
-                background-color: @green;
-              }
+        .card-panel {
+          .card-left {
+            border-color: @green;
 
-              .icon {
-                i {
-                  color: @write;
-                }
-              }
+            .tag {
+              background-color: @green;
             }
 
-            .card-right {
-              .num {
-                color: @green;
+            .icon {
+              i {
+                color: @write;
               }
             }
           }
 
-          .card-percent {
-            border-color: @green;
+          .card-right {
+            .num {
+              color: @green;
+            }
           }
         }
 
-        &.gray {
-          border-color: @darkgray;
-          background-color: fade(@darkgray, 30%);
+        .card-percent {
+          border-color: @green;
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @darkgray;
+      &.gray {
+        border-color: @darkgray;
+        background-color: fade(@darkgray, 30%);
 
-              .tag {
-                background-color: @darkgray;
-              }
+        .card-panel {
+          .card-left {
+            border-color: @darkgray;
 
-              .icon {
-                i {
-                  color: @black;
-                }
-              }
+            .tag {
+              background-color: @darkgray;
             }
 
-            .card-right {
-              .num {
-                color: @gray;
+            .icon {
+              i {
+                color: @black;
               }
             }
           }
 
-          .card-percent {
-            border-color: @darkgray;
+          .card-right {
+            .num {
+              color: @gray;
+            }
           }
         }
 
-        &.red {
-          border-color: @red;
+        .card-percent {
+          border-color: @darkgray;
+        }
+      }
 
-          .card-panel {
-            background-color: @red;
+      &.red {
+        border-color: @red;
 
-            .card-left {
-              border-color: @darkRed;
+        .card-panel {
+          background-color: @red;
 
-              .tag {
-                background-color: @darkRed;
-              }
+          .card-left {
+            border-color: @darkRed;
 
-              .icon {
-                i {
-                  color: @write;
-                }
-              }
+            .tag {
+              background-color: @darkRed;
             }
 
-            .card-right {
-              .num {
+            .icon {
+              i {
                 color: @write;
               }
             }
           }
 
-          .card-percent {
-            border-color: @red;
+          .card-right {
+            .num {
+              color: @write;
+            }
           }
         }
 
-        &.write {
-          border-color: @write;
+        .card-percent {
+          border-color: @red;
+        }
+      }
 
-          .card-panel {
-            background-color: @write;
+      &.write {
+        border-color: @write;
 
-            .card-left {
-              border-color: @black;
+        .card-panel {
+          background-color: @write;
 
-              .tag {
-                background-color: @darkgray;
-              }
+          .card-left {
+            border-color: @black;
 
-              .icon {
-                i {
-                  color: @black;
-                }
-              }
+            .tag {
+              background-color: @darkgray;
             }
 
-            .card-right {
-              .num {
+            .icon {
+              i {
                 color: @black;
               }
             }
           }
+
+          .card-right {
+            .num {
+              color: @black;
+            }
+          }
         }
       }
     }

src/views/WindSite/pages/Map.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="map-1">
+        <div class="btn-group-tabs">
+            <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
+        </div>
+        <div class="panel-title">
+            <div class="panel-title-name">
+                <span class="svg-icon svg-icon-green svg-icon-sm">
+                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
+                </span>
+                <span class="green">某某某风电场</span>
+                <div class="sub-title-item green">
+                    <span class="sub-title">aaaa</span>
+                    <span class="sub-count">56</span>
+                </div>
+            </div>
+        </div>
+        <div class="panel-body">
+            <div id="map-1" dojotype="dijit.layout.ContentPane" region="center"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Map from "@arcgis/core/Map";
+    import MapView from "@arcgis/core/views/MapView";
+    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
+    import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+    import SvgIcon from "@com/coms/icon/svg-icon.vue";
+    import '@arcgis/core/assets/esri/themes/light/main.css';
+
+    export default {
+        // 名称
+        name: "Map",
+        // 使用组件
+        components: {
+            BtnGroup2,
+            SvgIcon,
+        },
+        // 数据
+        data() {
+            return {
+                btnGroups: [{
+                        icon: "svg-wind-site",
+                        btns: [{
+                                text: "某某风场",
+                                code: "mmfdc1",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mhsfc",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmfdc2",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmfdc3",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmfdc4",
+                            },
+                        ],
+                    },
+                    {
+                        icon: "svg-photovoltaic",
+                        btns: [{
+                                text: "某某风场",
+                                code: "mmgf1",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmgf2",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmgf3",
+                            },
+                            {
+                                text: "某某风场",
+                                code: "mmgf4",
+                            },
+                        ],
+                    },
+                ],
+            }
+        },
+        // 函数
+        methods: {},
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            const map = new Map();
+            const layer = new MapImageLayer({
+                url: "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_14/MapServer"
+            });
+            map.add(layer);
+            const view = new MapView({
+                map: map,
+                center: [106.230909, 38.487193],
+                container: this.$el.querySelector("#map-1")
+            });
+            view.scale = 128000;
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less" scoped>
+    @titleHeight: 3.704vh;
+
+    .map-1 {
+        width: 100%;
+        height: calc(100vh - 90px);
+        display: flex;
+        flex-direction: column;
+
+        .btn-group-tabs {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .panel-title {
+            width: 100%;
+            height: @titleHeight;
+            line-height: @titleHeight;
+            background-color: fade(@darkgray, 40%);
+            margin-top: 1.481vh;
+
+            .panel-title-name {
+                font-size: 13px;
+                color: @green;
+                display: flex;
+                align-items: center;
+
+                i,
+                span {
+                    margin: 0 0 0 1.481vh;
+                }
+            }
+
+            .sub-title-item {
+                .sub-title {
+                    font-size: 13px;
+                    margin: 0 0 0 1.481vh;
+                }
+
+                .sub-count {
+                    font-size: 13px;
+                    font-family: "Bicubik";
+                    font-weight: 500;
+                }
+            }
+        }
+
+        .panel-body {
+            flex-grow: 1;
+            background-color: fade(@darkgray, 20%);
+            padding: 0.741vh;
+            overflow: auto;
+
+            #map-1 {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+</style>

src/views/WindSite/pages/Matrix.vue

@@ -12,29 +12,23 @@
       </div>
     </div>
     <div class="panel-body">
-      <table>
-        <tbody>
-          <tr v-for="(row, i) of groupDatas" :key="i">
-            <td v-for="(col, j) of row" :key="j">
-              <div class="card" :class="col.color">
-                <div class="card-panel">
-                  <div class="card-left">
-                    <div class="tag">{{ col.tag }}</div>
-                  </div>
-                  <div class="card-right">
-                    <div class="num">{{ col.num1 }}</div>
-                    <div class="num">{{ col.num2 }}</div>
-                    <div class="num">{{ col.num3 }}</div>
-                  </div>
-                </div>
-                <div class="card-percent">
-                  <div class="percent" :style="'width: ' + col.percent + '%'"></div>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="card" v-for="(col, j) of datas" :key="j" :class="col.color">
+        <div class="card-panel">
+          <div class="card-left">
+            <div class="tag">{{ col.tag }}</div>
+          </div>
+          <div class="card-right">
+            <div class="num">{{ col.num1 }}</div>
+            <div class="num">{{ col.num2 }}</div>
+            <div class="num">{{ col.num3 }}</div>
+          </div>
+        </div>
+        <div class="card-percent">
+          <div class="percent" :style="'width: ' + col.percent + '%'"></div>
+        </div>
+      </div>
+      <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+      <i class="blank" v-for="i in datas.length" :key="i"></i>
     </div>
   </div>
 </template>
@@ -63,7 +57,6 @@ export default {
           color: "blue",
         },
       ],
-      groupDatas: [],
       btnGroups: [
         {
           icon: "fa fa-fire",
@@ -115,25 +108,7 @@ export default {
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function() {
-      this.groupDatas = [];
-      let tempDatas = [];
-      this.datas.forEach((data, index) => {
-        if (index % this.col == 0) {
-          if (tempDatas.length > 0) {
-            this.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        this.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -160,7 +135,6 @@ export default {
       }
     }
     this.datas = util.copy(tempData);
-    this.createGroupDatas();
   },
   beforeMount() {
     // 渲染前
@@ -227,207 +201,218 @@ export default {
     background-color: fade(@darkgray, 20%);
     padding: 0.741vh;
     overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .blank {
+      margin-right: 4px;
+      flex: 1 0 125px;
+    }
+    .card {
+      margin-right: 4px;
+      margin-top: 4px;
+      flex: 1 0 125px;
+    }
 
-    table {
-      width: 100%;
+    .card {
+      border: 0.093vh solid;
 
-      .card {
-        border: 0.093vh solid;
+      .card-panel {
+        display: flex;
+        flex-grow: row;
 
-        .card-panel {
-          display: flex;
-          flex-grow: row;
+        .card-left {
+          width: 40%;
+          border-right: 0.093vh dotted;
 
+          .tag {
+            color: @write;
+            font-size: 14px;
+            width: 100%;
+            text-align: center;
+          }
+        }
+
+        .card-right {
+          width: 60%;
+
+          .num {
+            width: 100%;
+            font-size: 13px;
+            text-align: right;
+            padding-right: 0.278vh;
+          }
+        }
+      }
+
+      .card-percent {
+        height: 0.926vh;
+        padding: 0.093vh 0.185vh;
+        position: relative;
+        border-top: 0.093vh solid;
+        background-color: transparent;
+
+        .percent {
+          height: 0.648vh;
+          background-color: @green;
+          position: absolute;
+          left: 0.185vh;
+          top: 0.211vh;
+        }
+      }
+
+      &.blue {
+        border-color: @darkBlue;
+        background-color: fade(@darkBlue, 30%);
+
+        .card-panel {
           .card-left {
-            width: 40%;
-            border-right: 0.093vh dotted;
+            border-color: @darkBlue;
 
             .tag {
-              color: @write;
-              font-size: 14px;
-              width: 100%;
-              text-align: center;
+              background-color: @darkBlue;
             }
           }
 
           .card-right {
-            width: 60%;
-
             .num {
-              width: 100%;
-              font-size: 13px;
-              text-align: right;
-              padding-right: 0.278vh;
+              color: @darkBlue;
             }
           }
         }
 
         .card-percent {
-          height: 0.926vh;
-          padding: 0.093vh 0.185vh;
-          position: relative;
-          border-top: 0.093vh solid;
-          background-color: transparent;
-
-          .percent {
-            height: 0.648vh;
-            background-color: @green;
-            position: absolute;
-            left: 0.185vh;
-            top: 0.093vh;
-          }
-        }
-
-        &.blue {
           border-color: @darkBlue;
-          background-color: fade(@darkBlue, 30%);
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @darkBlue;
+      &.pink {
+        border-color: @pink;
+        background-color: fade(@pink, 30%);
 
-              .tag {
-                background-color: @darkBlue;
-              }
-            }
+        .card-panel {
+          .card-left {
+            border-color: @pink;
 
-            .card-right {
-              .num {
-                color: @darkBlue;
-              }
+            .tag {
+              background-color: @pink;
             }
           }
 
-          .card-percent {
-            border-color: @darkBlue;
+          .card-right {
+            .num {
+              color: @pink;
+            }
           }
         }
 
-        &.pink {
+        .card-percent {
           border-color: @pink;
-          background-color: fade(@pink, 30%);
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @pink;
+      &.orange {
+        border-color: @orange;
+        background-color: fade(@orange, 30%);
 
-              .tag {
-                background-color: @pink;
-              }
-            }
+        .card-panel {
+          .card-left {
+            border-color: @orange;
 
-            .card-right {
-              .num {
-                color: @pink;
-              }
+            .tag {
+              background-color: @orange;
             }
           }
 
-          .card-percent {
-            border-color: @pink;
+          .card-right {
+            .num {
+              color: @orange;
+            }
           }
         }
 
-        &.orange {
+        .card-percent {
           border-color: @orange;
-          background-color: fade(@orange, 30%);
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @orange;
+      &.gray {
+        border-color: @darkgray;
+        background-color: fade(@darkgray, 30%);
 
-              .tag {
-                background-color: @orange;
-              }
-            }
+        .card-panel {
+          .card-left {
+            border-color: @darkgray;
 
-            .card-right {
-              .num {
-                color: @orange;
-              }
+            .tag {
+              background-color: @darkgray;
             }
           }
 
-          .card-percent {
-            border-color: @orange;
+          .card-right {
+            .num {
+              color: @gray;
+            }
           }
         }
 
-        &.gray {
+        .card-percent {
           border-color: @darkgray;
-          background-color: fade(@darkgray, 30%);
+        }
+      }
 
-          .card-panel {
-            .card-left {
-              border-color: @darkgray;
+      &.red {
+        border-color: @red;
 
-              .tag {
-                background-color: @darkgray;
-              }
-            }
+        .card-panel {
+          background-color: @red;
+
+          .card-left {
+            border-color: @darkRed;
 
-            .card-right {
-              .num {
-                color: @gray;
-              }
+            .tag {
+              background-color: @darkRed;
             }
           }
 
-          .card-percent {
-            border-color: @darkgray;
+          .card-right {
+            .num {
+              color: @write;
+            }
           }
         }
 
-        &.red {
+        .card-percent {
           border-color: @red;
+        }
+      }
 
-          .card-panel {
-            background-color: @red;
+      &.write {
+        border-color: @write;
 
-            .card-left {
-              border-color: @darkRed;
+        .card-panel {
+          background-color: @write;
 
-              .tag {
-                background-color: @darkRed;
-              }
-            }
+          .card-left {
+            border-color: @black;
 
-            .card-right {
-              .num {
-                color: @write;
-              }
+            .tag {
+              background-color: @darkgray;
             }
           }
 
-          .card-percent {
-            border-color: @red;
+          .card-right {
+            .num {
+              color: @black;
+            }
           }
         }
 
-        &.write {
+        .card-percent {
           border-color: @write;
-
-          .card-panel {
-            background-color: @write;
-
-            .card-left {
-              border-color: @black;
-
-              .tag {
-                background-color: @darkgray;
-              }
-            }
-
-            .card-right {
-              .num {
-                color: @black;
-              }
-            }
-          }
-
-          .card-percent {
-            border-color: @write;
-          }
         }
       }
     }

src/views/WindSite/pages/Tower.vue

@@ -6,34 +6,39 @@
     <Windmill class="windmill-3"></Windmill>
     <Windmill class="windmill-4"></Windmill>
     <Windmill class="windmill-5"></Windmill>
+    <WindTower></WindTower>
     <toolbar-panel class="rose-chart" title="日发电量">
       <template v-slot:tools>
         <div class="tools">
           <div class="tool-block">
             <div class="legend bg-green"></div>
-            <div class="legend-text">日发电量(单位:万KWh)</div>
+            <div class="legend-text">风速</div>
           </div>
           <div class="tool-block">
             <div class="legend bg-purple"></div>
-            <div class="legend-text">上网电量（单位：万KWh）</div>
+            <div class="legend-text">实际功率</div>
           </div>
           <div class="tool-block">
             <div class="legend bg-orange"></div>
-            <div class="legend-text">购网电量（单位：万KWh）</div>
+            <div class="legend-text">理论功率</div>
           </div>
           <div class="tool-block">
             <div class="legend bg-yellow"></div>
-            <div class="legend-text">风速</div>
+            <div class="legend-text">保证功率</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-blue"></div>
+            <div class="legend-text">预测功率4小时</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-pink"></div>
+            <div class="legend-text">预测功率72小时</div>
           </div>
         </div>
       </template>
       <template v-slot:default>
         <!-- 日发电量 -->
-        <multiple-bar-chart
-          :list="DayPower.value"
-          :units="DayPower.units"
-          height="21.852vh"
-        />
+        <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" />
       </template>
     </toolbar-panel>
   </div>
@@ -43,7 +48,8 @@
 import Wave from "@com/three/wave.vue";
 import Windmill from "../components/Windmill.vue";
 import ToolbarPanel from "@com/coms/panel/toolbar-panel.vue";
-import MultipleBarChart from "@com/chart/bar/multiple-bar-chart.vue";
+import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
+import WindTower from "./Tower/WindTower.vue";
 export default {
   // 名称
   name: "Tower",
@@ -52,7 +58,8 @@ export default {
     Wave,
     Windmill,
     ToolbarPanel,
-    MultipleBarChart,
+    MultipleLineChart,
+    WindTower,
   },
   // 传入参数
   props: {},
@@ -62,12 +69,12 @@ export default {
   data() {
     return {
       // 日发电量
-      DayPower: {
+      Powertrend: {
         // 图表所用单位
-        units: ["(万KWh)", "(风速)"],
+        units: ["(风速)", "(万KWh)", "(万KWh)", "(万KWh)", "(万KWh)", "(万KWh)"],
         value: [
           {
-            title: "日发电量",
+            title: "风速",
             yAxisIndex: 0, // 使用单位
             value: [
               {
@@ -76,32 +83,32 @@ export default {
               },
               {
                 text: "2日",
-                value: 1,
+                value: 10,
               },
               {
                 text: "3日",
-                value: 1,
+                value: 60,
               },
               {
                 text: "4日",
-                value: 1,
+                value: 50,
               },
               {
                 text: "5日",
-                value: 1,
+                value: 55,
               },
               {
                 text: "6日",
-                value: 1,
+                value: 40,
               },
               {
                 text: "7日",
-                value: 1,
+                value: 20,
               },
             ],
           },
           {
-            title: "上网电量",
+            title: "实际功率",
             yAxisIndex: 0,
             value: [
               {
@@ -110,32 +117,32 @@ export default {
               },
               {
                 text: "2日",
-                value: 2,
+                value: 22,
               },
               {
                 text: "3日",
-                value: 2,
+                value: 32,
               },
               {
                 text: "4日",
-                value: 2,
+                value: 24,
               },
               {
                 text: "5日",
-                value: 2,
+                value: 56,
               },
               {
                 text: "6日",
-                value: 2,
+                value: 70,
               },
               {
                 text: "7日",
-                value: 2,
+                value: 65,
               },
             ],
           },
           {
-            title: "购网电量",
+            title: "理论功率",
             yAxisIndex: 0,
             value: [
               {
@@ -144,61 +151,129 @@ export default {
               },
               {
                 text: "2日",
-                value: 3,
+                value: 33,
               },
               {
                 text: "3日",
-                value: 3,
+                value: 23,
               },
               {
                 text: "4日",
-                value: 3,
+                value: 56,
               },
               {
                 text: "5日",
-                value: 3,
+                value: 43,
               },
               {
                 text: "6日",
-                value: 3,
+                value: 25,
               },
               {
                 text: "7日",
-                value: 3,
+                value: 30,
               },
             ],
           },
           {
-            title: "风速",
+            title: "保证功率",
+            yAxisIndex: 1,
+            value: [
+              {
+                text: "1日",
+                value: 43,
+              },
+              {
+                text: "2日",
+                value: 14,
+              },
+              {
+                text: "3日",
+                value: 24,
+              },
+              {
+                text: "4日",
+                value: 44,
+              },
+              {
+                text: "5日",
+                value: 34,
+              },
+              {
+                text: "6日",
+                value: 64,
+              },
+              {
+                text: "7日",
+                value: 54,
+              },
+            ],
+          },
+          {
+            title: "预测功率4小时",
+            yAxisIndex: 1,
+            value: [
+              {
+                text: "1日",
+                value: 45,
+              },
+              {
+                text: "2日",
+                value: 55,
+              },
+              {
+                text: "3日",
+                value: 64,
+              },
+              {
+                text: "4日",
+                value: 24,
+              },
+              {
+                text: "5日",
+                value: 34,
+              },
+              {
+                text: "6日",
+                value: 42,
+              },
+              {
+                text: "7日",
+                value: 14,
+              },
+            ],
+          },
+          {
+            title: "预测功率72小时",
             yAxisIndex: 1,
             value: [
               {
                 text: "1日",
-                value: 4,
+                value: 46,
               },
               {
                 text: "2日",
-                value: 4,
+                value: 64,
               },
               {
                 text: "3日",
-                value: 4,
+                value: 44,
               },
               {
                 text: "4日",
-                value: 4,
+                value: 24,
               },
               {
                 text: "5日",
-                value: 4,
+                value: 54,
               },
               {
                 text: "6日",
-                value: 4,
+                value: 14,
               },
               {
                 text: "7日",
-                value: 4,
+                value: 34,
               },
             ],
           },
@@ -271,37 +346,37 @@ export default {
   }
 
   .rose-chart {
-      position: absolute;
-      left: 0;
-      bottom: 1.852vh;
-      height: 26.481vh;
-      width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 1.852vh;
+    height: 31.481vh;
+    width: 100%;
   }
 
   .tools {
-  display: flex;
-
-  .tool-block {
     display: flex;
-    align-items: center;
-    margin-left: 0.741vh;
 
-    .legend {
-      flex: auto;
-      width: 0.741vh;
-      height: 0.741vh;
-      margin-right: 0.741vh;
+    .tool-block {
+      display: flex;
+      align-items: center;
+      margin-left: 0.741vh;
+
+      .legend {
+        flex: auto;
+        width: 0.741vh;
+        height: 0.741vh;
+        margin-right: 0.741vh;
 
-      &.long {
-        width: 2.963vh;
-        height: 0.37vh;
+        &.long {
+          width: 2.963vh;
+          height: 0.37vh;
+        }
       }
-    }
 
-    .legend-text {
-      color: #ffffff4d;
+      .legend-text {
+        color: #ffffff4d;
+      }
     }
   }
 }
-}
 </style>

src/views/layout/Header.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="header-menu">
     <ul class="header-menu-list">
-      <li class="header-menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }">
+      <li class="header-menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index, menu)" :class="{ active: activeIndex == index }">
         {{ menu.text }}
-        <router-link :to="menu.path"></router-link>
       </li>
     </ul>
     <ul class="header-menu-dropdown" :class="{ dropdown: dropdown }">
@@ -25,36 +24,43 @@ export default {
     return {
       menus: [
         {
+          id: "monitor",
           text: "状态监视",
           path: "/",
           isActive: true,
         },
         {
+          id: "datacenter",
           text: "数据管理",
           path: "/",
           isActive: false,
         },
         {
+          id: "statistic",
           text: "统计分析",
           path: "/",
           isActive: false,
         },
         {
+          id: "health",
           text: "健康管理",
           path: "/",
           isActive: false,
         },
         {
+          id: "decision",
           text: "决策支持",
           path: "/",
           isActive: false,
         },
         {
+          id: "knowledge",
           text: "知识管理",
           path: "/",
           isActive: false,
         },
         {
+          id: "report",
           text: "智能报表",
           path: "/",
           isActive: false,
@@ -78,10 +84,13 @@ export default {
       dropdown: false,
     };
   },
+  emits: {
+    onMenuClick: null,
+  },
   methods: {
-    click(index) {
-      console.log(index);
+    click(index, data) {
       this.activeIndex = index;
+      this.$emit("onMenuClick", { id: data.id });
     },
     clickSubMenu(index, code) {
       console.log(index, code);
@@ -95,6 +104,19 @@ export default {
       return data.isActive ? "active" : "";
     },
   },
+  watch: {
+    $route: {
+      handler: function(val, oldVal) {
+        this.menus.some((t, index) => {
+          if (t.id == val.query.root) {
+            this.activeIndex = index;
+          }
+        });
+      },
+      //深度观察监听
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -123,11 +145,13 @@ export default {
       height: 100%;
       color: @gray;
       cursor: pointer;
+      transition: color 0.2s ease-in-out;
 
       &.active {
         color: @green;
         position: relative;
-        background-image: @greenLinearTop;
+        background: @greenLinearTop;
+        transition: color 0.2s ease-in-out;
 
         &::after {
           content: "";

src/views/layout/Menu.vue

@@ -1,98 +1,238 @@
 <template>
   <div class="menu">
     <ul class="menu-list">
-      <li class="menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }">
+      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
+        <router-link v-if="!menu.children" :to="{ path: menu.path, query: { root: currRoot } }">
+          <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
+            <SvgIcon :svgid="menu.icon"></SvgIcon>
+          </div>
+        </router-link>
+        <div v-if="menu.children" class="sub-menu-item">
+          <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
+            <SvgIcon :svgid="menu.icon"></SvgIcon>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="sub-menu" v-show="isShowSubMenu">
+    <ul class="menu-list">
+      <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
         <router-link :to="menu.path">
-            <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
-                <SvgIcon :svgid="menu.icon"></SvgIcon>
-            </span>
+          <div class="menu-icon svg-icon">
+            <SvgIcon :svgid="menu.icon"></SvgIcon>
+          </div>
+          <div class="sub-menu-text" :class="subIndex == index ? 'green' : 'gray'">{{ menu.text }}</div>
         </router-link>
       </li>
     </ul>
   </div>
 </template>
 <script>
-    import SvgIcon from '@com/coms/icon/svg-icon.vue';
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-    components: {
-        SvgIcon
-    },
+  components: {
+    SvgIcon,
+  },
+  props: {
+    root: { type: String, default: "monitor" },
+  },
   data() {
     return {
-      menus: [
-        {
-          text: "领导驾驶舱",
-          icon: "svg-lead-cockpit",
-          path: "/",
-        },
-        {
-          text: "矩阵",
-          icon: "svg-matrix",
-          path: "/lightmatrix",
-        },
-        {
-          text: "矩阵",
-          icon: "svg-matrix",
-          path: "/lightmatrix1",
-        },
-        {
-          text: "矩阵",
-          icon: "svg-matrix",
-          path: "/lightmatrix2",
-        },
-        {
-          text: "矩阵",
-          icon: "svg-matrix",
-          path: "/lightmatrix3",
-        },
+      currRoot: "monitor",
+      menuData: [
         {
-          text: "Agc",
-          icon: "svg-agc",
-          path: "/agc",
+          id: "monitor",
+          text: "状态监视",
+          data: [
+            {
+              text: "领导驾驶舱",
+              icon: "svg-lead-cockpit",
+              path: "/",
+            },
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix",
+            },
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix1",
+            },
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix2",
+            },
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix3",
+            },
+            {
+              text: "Agc",
+              icon: "svg-agc",
+              path: "/agc",
+            },
+            {
+              text: "链路",
+              icon: "svg-periodic-line",
+              path: "/status",
+            },
+            {
+              text: "网络",
+              icon: "svg-agc",
+              path: "/",
+              children: [
+                {
+                  text: "矩阵2",
+                  icon: "svg-matrix",
+                  path: "/lightmatrix2",
+                },
+                {
+                  text: "矩阵3",
+                  icon: "svg-matrix",
+                  path: "/lightmatrix3",
+                },
+              ],
+            },
+            {
+              text: "温度点",
+              icon: "svg-temperature",
+              path: "/",
+            },
+            {
+              text: "天气",
+              icon: "svg-weather",
+              path: "/",
+            },
+            {
+              text: "风场",
+              icon: "svg-wind-site",
+              path: "/windsite/home",
+            },
+            {
+              text: "关于",
+              icon: "svg-agc",
+              path: "/about",
+            },
+          ],
         },
         {
-          text: "链路",
-          icon: "svg-periodic-line",
-          path: "/status",
+          id: "datacenter",
+          text: "数据管理",
+          data: [
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix",
+            },
+            {
+              text: "矩阵",
+              icon: "svg-matrix",
+              path: "/lightmatrix1",
+            },
+          ],
         },
         {
-          text: "网络",
-          icon: "svg-agc",
-          path: "/",
+          id: "statistic",
+          text: "统计分析",
+          data: [],
         },
         {
-          text: "温度点",
-          icon: "svg-temperature",
-          path: "/",
+          id: "health",
+          text: "健康管理",
+          data: [],
         },
         {
-          text: "天气",
-          icon: "svg-weather",
-          path: "/",
+          id: "decision",
+          text: "决策支持",
+          data: [],
         },
         {
-          text: "风场",
-          icon: "svg-wind-site",
-          path: "/windsite/home",
+          id: "knowledge",
+          text: "知识管理",
+          data: [],
         },
         {
-          text: "关于",
-          icon: "svg-agc",
-          path: "/about",
+          id: "report",
+          text: "智能报表",
+          data: [],
         },
       ],
       activeIndex: 0,
+      isShowSubMenu: false,
+      parentIndex: null,
+      subMenu: [],
+      subIndex: null,
     };
   },
   methods: {
     click(index) {
-      console.log(index);
       this.activeIndex = index;
+      this.subIndex = null;
+    },
+    subMenuShow(children, index) {
+      if (children) {
+        this.isShowSubMenu = true;
+        this.parentIndex = index;
+      } else {
+        this.isShowSubMenu = false;
+        this.parentIndex = null;
+      }
+      this.subMenu = children;
+    },
+    subclick(index) {
+      this.activeIndex = this.parentIndex;
+      this.subIndex = index;
     },
   },
   computed: {
-    activeClass(data) {
-      return data.isActive ? "active" : "";
+    currentMenu() {
+      let data = this.menuData.filter((t) => {
+        return t.id == this.currRoot;
+      })[0].data;
+
+      return data;
+    },
+  },
+  watch: {
+    //监听路由
+    $route: {
+      handler: function(val, oldVal) {
+        if (val.query.root) this.currRoot = val.query.root;
+
+        this.currentMenu.some((element, index) => {
+          if (element.path == val.path) {
+            this.activeIndex = index;
+            return true;
+          }
+        });
+      },
+      //深度观察监听
+      deep: true,
+    },
+    root: {
+      handler: function(val, oldVal) {
+        this.currRoot = val;
+      },
+    },
+    currentMenu: {
+      handler: function(val, oldVal) {
+        if (val && val.length > 0) {
+          // 基于 root 和 currRoot 为一致
+          // 进行页面刷新
+          // 防止 刷新页面也同步执行切换页面逻辑
+          if (this.root == this.currRoot) {
+            this.activeIndex = 0;
+            this.$router.push({
+              path: val[0].path,
+              query: { root: this.currRoot },
+            });
+          }
+        }
+      },
     },
   },
 };
@@ -108,12 +248,90 @@ export default {
     list-style: none;
 
     .menu-item {
+      padding: 1.481vh 0;
+      text-align: center;
+
+      .menu-icon {
+        display: flex;
+        justify-content: center;
+      }
+
       &.active i {
         color: #05bb4c;
+        transition: color 1s;
       }
-      padding: 1.481vh 0;
+    }
+  }
+
+  i {
+    font-size: 2.222vh;
+    color: rgba(255, 255, 255, 50%);
+  }
+}
+
+.sub-menu {
+  position: absolute;
+  top: 0;
+  left: 5.3704vh;
+  width: 138px;
+  height: 100%;
+  padding-top: 1.481vh;
+  background: fade(#192a26, 75);
+  border-right: 1px solid fade(@green, 50);
+  box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);
+
+  .menu-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    .menu-item {
+      display: flex;
       text-align: center;
       line-height: 1.5;
+      padding: 8px 0;
+      background: #121d1c;
+
+      a {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.4815vh;
+        font-size: @fontsize-s;
+        text-decoration: unset;
+
+        .menu-icon {
+          display: flex;
+          align-items: center;
+          svg {
+            width: 14px;
+            height: 14px;
+            use {
+              fill: fade(@green, 75);
+            }
+          }
+        }
+      }
+
+      &.active {
+        background: #323e70;
+
+        .menu-icon {
+          display: flex;
+          svg use {
+            fill: fade(@white, 75);
+          }
+        }
+      }
+
+      .sub-menu-text {
+        margin-left: 1.1111vh;
+        color: @gray;
+      }
+
+      & + .menu-item {
+        border-top: 1px solid fade(@darkgray, 40);
+      }
     }
   }
 

vue.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 const resolve = (dir) => path.join(__dirname, dir);
 // const SVGSpriteLoaderPlugin = require("svg-sprite-loader/plugin");
 
-function extendDefaultPlugins (arr) {
+function extendDefaultPlugins(arr) {
   let plug = [
     'removeDoctype',
     'removeXMLProcInst',
@@ -43,7 +43,7 @@ function extendDefaultPlugins (arr) {
 }
 
 // 添加less继承
-function addStyleResource (rule) {
+function addStyleResource(rule) {
   rule.use('style-resource')
     .loader('style-resources-loader')
     .options({