V1.0.2版本更新

package.json

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

src/App.vue

@@ -170,9 +170,9 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
           <g id="图层_4"></g>
         </svg>
       </div>
-      <div class="header-menu-body"><Header /></div>
+      <div class="header-menu-body"><Header @onMenuClick="HeaderMenuClick" /></div>
     </div>
-    <div class="menu-body" @mouseenter="showMenu" @mouseleave="hideMenu"><Menu /></div>
+    <div class="menu-body" @mouseenter="showMenu" @mouseleave="hideMenu"><Menu :root="root" /></div>
     <div class="main-body" :class="{ 'show-menu': isShowMenu }">
       <router-view />
     </div>
@@ -191,9 +191,15 @@ export default {
   data() {
     return {
       isShowMenu: false,
+      // 当前子系统
+      root: "",
     };
   },
   methods: {
+    // 切换子系统事件
+    HeaderMenuClick(data) {
+      this.root = data.id;
+    },
     showMenu() {
       this.isShowMenu = true;
     },
@@ -257,7 +263,7 @@ body {
     height: @headerHeight;
     border-bottom: 1px solid #142b29;
     .header-title {
-      line-height: @headerHeight;
+      margin: auto;
       color: #fff;
     }
     .header-menu-body {
@@ -271,11 +277,16 @@ body {
     width: @menuWidth;
     height: calc(100vh - @headerHeight);
     top: @headerHeight;
-    background-color: fade(@darkgray, 20%);
+    background-color: fade(#192a26, 75%);
     z-index: 1;
     opacity: 0;
+    transition: opacity 0.2s;
+    transition-timing-function: ease-in;
+
     &:hover {
       opacity: 1;
+      transition: opacity 0.2s;
+      transition-timing-function: ease-out;
     }
   }
 
@@ -285,10 +296,15 @@ body {
     height: calc(100vh - @headerHeight);
     padding: 1.481vh;
 
-    &.show-menu {
-      flex: 0 0 calc(100vw - @menuWidth);
-      margin-left: @menuWidth;
-    }
+    // transition: flex 0.1s, margin-left 0.1s;
+    // transition-timing-function: ease-in-out;
+
+    // &.show-menu {
+    //   flex: 0 0 calc(100vw - @menuWidth);
+    //   margin-left: @menuWidth;
+    //   transition: flex 0.1s, margin-left 0.1s;
+    //   transition-timing-function: ease-in-out;
+    // }
   }
 }
 </style>

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',
     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: 'tower',
-        component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue')
+      path: 'info',
+      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue'),
+    }, {
+      path: 'tower',
+      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'),
   },
 ]
 
@@ -75,4 +81,8 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  next()
+})
+
 export default router

src/views/LightMatrix/LightMatrix.vue

@@ -24,19 +24,13 @@
             <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"
-                >
+                <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>{{ data.num }}</span>
-                <span
-                  class="svg-icon svg-icon-sm"
-                  :class="'svg-icon-' + data.color"
-                >
+                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
                   <SvgIcon :svgid="data.numIcon"></SvgIcon>
                 </span>
               </div>
@@ -61,60 +55,47 @@
           <div class="panel-title-name">
             <i class="fa fa-send"></i>
             <span>某某某风电场</span>
-            <div
-              class="sub-title-item"
-              v-for="(data, index) of table.subTitleDatas"
-              :key="index"
-            >
+            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
               <span class="sub-count" :class="data.color">{{ data.num }}</span>
             </div>
           </div>
         </div>
         <div class="panel-body">
-          <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">
-                    <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 table.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 == 'black' ? '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="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-A"></SvgIcon>
+                  </i>
+                  <span>{{ col.num1 }}</span>
+                </div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-W"></SvgIcon>
+                  </i>
+                  <span>{{ col.num2 }}</span>
+                </div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-V"></SvgIcon>
+                  </i>
+                  <span>{{ col.num3 }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.datas.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -314,31 +295,12 @@ export default {
               color: "blue",
             },
           ],
-          groupDatas: [],
         },
       ],
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function (table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -361,14 +323,13 @@ export default {
         tempData[i].color = "red";
       }
       if (i == 43) {
-        tempData[i].color = "write";
+        tempData[i].color = "black";
       }
       if (i == 44) {
         tempData[i].color = "gray";
       }
     }
     this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
     for (let i = 0; i < 5; i++) {
       this.tables.push(util.copy(this.tables[0]));
     }
@@ -459,7 +420,7 @@ export default {
           border-bottom: 0.093vh solid fade(@darkgray, 40%);
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
-          font-size: @fontsize-s;
+          font-size: @fontsize;
         }
 
         .panel-item-gf-down {
@@ -467,7 +428,7 @@ export default {
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
           font-weight: 600;
-          font-size: @fontsize-s;
+          font-size: @fontsize;
         }
       }
     }
@@ -713,293 +674,308 @@ 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%;
-
-        .card {
-          border: 0.093vh solid;
+      .blank {
+        margin-right: 4px;
+        flex: 1 0 125px;
+      }
 
-          .card-panel {
-            display: flex;
-            flex-grow: row;
+      .card {
+        margin-right: 4px;
+        margin-top: 4px;
+        flex: 1 0 125px;
+      }
 
-            .card-left {
-              width: 40%;
-              border-right: 0.093vh dotted;
-              display: flex;
-              flex-direction: column;
+      .card {
+        border: 1px solid;
 
-              .tag {
-                color: @write;
-                font-size: @fontsize-s;
-                width: 100%;
-                text-align: center;
-              }
+        .card-panel {
+          display: flex;
+          flex-grow: row;
 
-              .icon {
-                flex-grow: 1;
-                display: flex;
-                align-items: center;
-                justify-content: center;
+          .card-left {
+            width: 40%;
+            border-right: 0.093vh dotted;
+            display: flex;
+            flex-direction: column;
 
-                i {
-                  font-size: 14px;
-                }
-              }
+            .tag {
+              color: @write;
+              font-size: @fontsize-s;
+              width: 100%;
+              text-align: center;
             }
 
-            .card-right {
-              width: 60%;
+            .icon {
+              flex-grow: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
 
-              .num {
-                width: 100%;
+              i {
                 font-size: 14px;
-                text-align: left;
-                padding-right: 0.278vh;
-
-                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-right {
+            width: 60%;
+
+            .num {
+              width: 100%;
+              font-size: 14px;
+              text-align: left;
+              padding-right: 0.278vh;
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+
+              i {
+                margin: 0 0.37vh;
+              }
             }
           }
+        }
 
-          &.blue {
-            border-color: @darkBlue;
-            background-color: fade(@darkBlue, 30%);
+        .card-percent {
+          height: 0.926vh;
+          padding: 0.093vh 0.185vh;
+          position: relative;
+          border-top: 1px solid;
+          background-color: transparent;
+
+          .percent {
+            height: 0.648vh;
+            background-color: @green;
+            position: absolute;
+            left: 0.185vh;
+            top: 0.093vh;
+          }
+        }
 
-            .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 {
-                  svg {
-                    use {
-                      fill: @write;
-                    }
-                  }
-                }
+              .tag {
+                background-color: @darkBlue;
               }
 
-              .card-right {
-                .num {
-                  color: @darkBlue;
+              .icon {
+                svg {
+                  use {
+                    fill: @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 {
-                  svg {
-                    use {
-                      fill: @write;
-                    }
-                  }
-                }
+              .tag {
+                background-color: @pink;
               }
 
-              .card-right {
-                .num {
-                  color: @pink;
+              .icon {
+                svg {
+                  use {
+                    fill: @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 {
-                  use {
-                    fill: @write;
-                  }
-                }
+              .tag {
+                background-color: @orange;
               }
 
-              .card-right {
-                .num {
-                  color: @orange;
+              .icon {
+                use {
+                  fill: @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 {
-                  use {
-                    fill: @write;
-                  }
-                }
+              .tag {
+                background-color: @green;
               }
 
-              .card-right {
-                .num {
-                  color: @green;
+              .icon {
+                use {
+                  fill: @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 {
-                  use {
-                    fill: @black;
-                  }
-                }
+              .tag {
+                background-color: @darkgray;
               }
 
-              .card-right {
-                .num {
-                  color: @gray;
+              .icon {
+                use {
+                  fill: @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 {
-                  use {
-                    fill: @write;
-                  }
-                }
+              .tag {
+                background-color: @darkRed;
               }
 
-              .card-right {
-                .num {
-                  color: @write;
+              .icon {
+                use {
+                  fill: @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;
+        &.black {
+          border-color: @write;
 
-              .card-left {
-                border-color: @black;
+          .card-panel {
+            background-color: @write;
 
-                .tag {
-                  background-color: @darkgray;
-                }
+            .card-left {
+              border-color: @black;
 
-                .icon {
-                  .svg-icon {
-                    svg {
-                      use {
-                        fill: @black;
-                      }
+              .tag {
+                background-color: @darkgray;
+              }
+
+              .icon {
+                .svg-icon {
+                  svg {
+                    use {
+                      fill: @black;
                     }
                   }
                 }
               }
+            }
 
-              .card-right {
-                .num {
-                  color: @black;
-                }
+            .card-right {
+              .num {
+                color: @black;
               }
             }
           }

src/views/LightMatrix1/LightMatrix1.vue

@@ -51,17 +51,11 @@
           </div>
         </div>
         <div class="panel-body">
-          <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="(col, j) of table.datas" :key="j" :class="col.color">
+            {{ col.tag }}
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.datas.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -265,31 +259,12 @@ export default {
               color: "blue",
             },
           ],
-          groupDatas: [],
         },
       ],
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function(table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -319,7 +294,6 @@ export default {
       }
     }
     this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
     for (let i = 0; i < 5; i++) {
       this.tables.push(util.copy(this.tables[0]));
     }
@@ -561,56 +535,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;
 
-      table {
-        width: 100%;
+      .blank {
+        margin-right: 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 {
+        margin-right: 4px;
+        margin-top: 4px;
+        flex: 1 0 4.4444vh;
+      }
 
-          &.write {
-            color: @black;
-            border-color: @write;
-            background-color: @write;
-          }
+      .card {
+        border-radius: 0.37vh;
+        padding: 0.185vh 0.3704vh;
+        text-align: center;
+        border: 0.093vh solid;
+        font-size: 14px;
 
-          &.green {
-            color: @green;
-            border-color: @green;
-          }
+        &.write {
+          color: @black;
+          border-color: @write;
+          background-color: @write;
+        }
 
-          &.blue {
-            color: @darkBlue;
-            border-color: @darkBlue;
-          }
+        &.green {
+          color: @green;
+          border-color: @green;
+        }
 
-          &.pink {
-            color: @pink;
-            border-color: @pink;
-          }
+        &.blue {
+          color: @darkBlue;
+          border-color: @darkBlue;
+        }
 
-          &.red {
-            color: @write;
-            border-color: @red;
-            background-color: @red;
-          }
+        &.pink {
+          color: @pink;
+          border-color: @pink;
+        }
 
-          &.orange {
-            color: @orange;
-            border-color: @orange;
-          }
+        &.red {
+          color: @write;
+          border-color: @red;
+          background-color: @red;
+        }
 
-          &.gray {
-            color: @write;
-            border-color: @darkgray;
-            background-color: @darkgray;
-          }
+        &.orange {
+          color: @orange;
+          border-color: @orange;
+        }
+
+        &.gray {
+          color: @write;
+          border-color: @darkgray;
+          background-color: @darkgray;
         }
       }
     }

src/views/LightMatrix2/LightMatrix2.vue

@@ -44,33 +44,27 @@
           </div>
         </div>
         <div class="panel-body">
-          <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">
-                    <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>
-                    </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: ' + col.percent + '%'"></div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="card" v-for="(col, j) of table.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>
+            </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: ' + col.percent + '%'"></div>
+            </div>
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.datas.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -262,31 +256,12 @@ export default {
               color: "blue",
             },
           ],
-          groupDatas: [],
         },
       ],
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function(table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -316,7 +291,6 @@ export default {
       }
     }
     this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
     for (let i = 0; i < 5; i++) {
       this.tables.push(util.copy(this.tables[0]));
     }
@@ -552,221 +526,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%);
+
+          .card-panel {
+            .card-left {
+              border-color: @darkBlue;
             }
 
-            .percent {
-              height: 0.648vh;
-              background-color: @yellow;
-              position: absolute;
-              left: 0.185vh;
-              top: 0.093vh;
+            .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

@@ -62,38 +62,38 @@
           </div>
         </div>
         <div class="panel-body">
-          <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">
-                    <span class="center-icon svg-icon svg-icon-md" :class="col.color == 'write' ? 'svg-icon-black' : 'svg-icon-write'">
-                      <SvgIcon :svgid="mapping[col.color]"></SvgIcon>
-                    </span>
-                    <div class="card-panel">
-                      <div class="card-left">
-                        <div class="tag">{{ col.tag }}</div>
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ col.num1 }}</span>
-                        </div>
-                      </div>
-                      <div class="card-right">
-                        <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 table.datas" :key="j" :class="col.color">
+            <span class="center-icon svg-icon svg-icon-md" :class="col.color == 'black' ? 'svg-icon-black' : 'svg-icon-write'">
+              <SvgIcon :svgid="mapping[col.color]"></SvgIcon>
+            </span>
+            <div class="card-panel">
+              <div class="card-left">
+                <div class="tag">{{ col.tag }}</div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-W"></SvgIcon>
+                  </i>
+                  <div>{{ col.num1 }}</div>
+                </div>
+              </div>
+              <div class="card-right">
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-R"></SvgIcon>
+                  </i>
+                  <div>{{ col.num2 }}</div>
+                </div>
+                <div class="num">
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                    <SvgIcon svgid="svg-P"></SvgIcon>
+                  </i>
+                  <div>{{ col.num3 }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.datas.length" :key="i"></i>
         </div>
       </div>
     </div>
@@ -124,12 +124,12 @@ export default {
         red: "svg-gz-downtime",
         orange: "svg-jx-downtime",
         gray: "svg-offline",
-        write: "svg-intranet-involvement",
+        black: "svg-intranet-involvement",
       },
       panelData: {
         first: {
-          icon: "svg-photovoltaic",
-          text: "接入光伏",
+          icon: "svg-wind-site",
+          text: "接入电机",
           num: 256,
         },
         datas: [
@@ -295,37 +295,18 @@ export default {
           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: [],
         },
       ],
     };
   },
   // 函数
-  methods: {
-    createGroupDatas: function(table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
+  methods: {},
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -348,14 +329,13 @@ export default {
         tempData[i].color = "red";
       }
       if (i == 43) {
-        tempData[i].color = "write";
+        tempData[i].color = "black";
       }
       if (i == 44) {
         tempData[i].color = "gray";
       }
     }
     this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
     for (let i = 0; i < 5; i++) {
       this.tables.push(util.copy(this.tables[0]));
     }
@@ -700,321 +680,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 {
-          border: 0.093vh solid;
+      .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;
+            }
+
+            .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;
+          }
 
-                .tag {
-                  border-color: @darkgray;
-                }
+          .card-panel {
+            background-color: @red;
 
-                .num {
-                  color: @gray;
-                }
+            .card-left {
+              border-color: @darkRed;
+
+              .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);
+      }
     }
   }