冲突处理

.gitignore

@@ -5,4 +5,6 @@ webpack.config.js
 .vscode/
 .vs
 .vs/
-package-lock.json
+package-lock.json
+.py
+.py/

package.json

@@ -16,6 +16,7 @@
     "element-plus": "^1.0.2-beta.46",
     "font-awesome": "^4.7.0",
     "stompjs": "^2.3.3",
+    "three": "^0.129.0",
     "vivus": "^0.4.6",
     "vue": "^3.0.0",
     "vue-axios": "^3.2.4",
@@ -37,6 +38,8 @@
     "eslint-plugin-vue": "^7.0.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.4",
     "style-resources-loader": "^1.4.1",
     "svg-sprite-loader": "^6.0.7",
     "svgo-loader": "^3.0.0"

src/App.vue

@@ -110,7 +110,8 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
     <div class="menu-body">
       <Menu />
     </div>
-    <div class="main-body">
+    <div class="menu-body" @mouseenter="showMenu" @mouseleave="hideMenu"><Menu /></div>
+    <div class="main-body" :class="{ 'show-menu': isShowMenu }">
       <router-view />
     </div>
   </div>
@@ -163,8 +164,21 @@ export default {
   },
   methods: {
     ...mapMutations("user", ["SET_TOKEN"])
-  }
+  },data() {
+    return {
+      isShowMenu: false,
+    };
+  },
+  methods: {
+    showMenu() {
+      this.isShowMenu = true;
+    },
+    hideMenu() {
+      this.isShowMenu = false;
+    },
+  },
 };
+
 </script>
 
 <style lang="less">
@@ -229,17 +243,29 @@ body {
   }
 
   .menu-body {
+    position: absolute;
     flex: 0 0 @menuWidth;
     width: @menuWidth;
     height: calc(100vh - @headerHeight);
-    background-color: fade(@gray, 20%);
+    top: @headerHeight;
+    background-color: fade(@darkgray, 20%);
+    z-index: 1;
+    opacity: 0;
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .main-body {
-    flex: 0 0 calc(100vw - @menuWidth);
-    padding: 1.481vh;
+    flex: 0 0 calc(100vw);
+    max-width: calc(100vw);
     height: calc(100vh - @headerHeight);
-    max-width: calc(100vw - @menuWidth);
+    padding: 1.481vh;
+
+    &.show-menu {
+      flex: 0 0 calc(100vw - @menuWidth);
+      margin-left: @menuWidth;
+    }
   }
 }
 </style>

src/assets/styles/app.less

@@ -0,0 +1,81 @@
+.background {
+  background: fade(@darkgray, 20);
+}
+
+.pd-8 {
+  padding: 0.741vh;
+}
+
+.pd-t-8 {
+  padding-top: 0.741vh;
+}
+
+.pd-b-8 {
+  padding-bottom: 0.741vh;
+}
+
+.pd-l-8 {
+  padding-left: 0.741vh;
+}
+
+.pd-r-8 {
+  padding-right: 0.741vh;
+}
+
+.pd-16 {
+  padding: 1.481vh;
+}
+.pd-t-16 {
+  padding-top: 1.481vh;
+}
+
+.pd-b-16 {
+  padding-bottom: 1.481vh;
+}
+
+.pd-l-16 {
+  padding-left: 1.481vh;
+}
+
+.pd-r-16 {
+  padding-right: 1.481vh;
+}
+
+.mg-8 {
+  margin: 0.741vh;
+}
+
+.mg-t-8 {
+  margin-top: 0.741vh;
+}
+
+.mg-b-8 {
+  margin-bottom: 0.741vh;
+}
+
+.mg-l-8 {
+  margin-left: 0.741vh;
+}
+
+.mg-r-8 {
+  margin-right: 0.741vh;
+}
+
+.mg-16 {
+  margin: 1.481vh;
+}
+.mg-t-16 {
+  margin-top: 1.481vh;
+}
+
+.mg-b-16 {
+  margin-bottom: 1.481vh;
+}
+
+.mg-l-16 {
+  margin-left: 1.481vh;
+}
+
+.mg-r-16 {
+  margin-right: 1.481vh;
+}

src/assets/styles/color.less

@@ -10,6 +10,14 @@
   background: @yellow;
 }
 
+.bg-blue {
+  background: @blue;
+}
+
+.blue {
+  color: @blue;
+}
+
 .yellow {
   color: @yellow;
 }
@@ -33,3 +41,15 @@
 .bg-orange {
   background: @orange;
 }
+
+.red {
+  color: @red;
+}
+
+.bg-red {
+  background: @red;
+}
+
+.gary-l {
+  color: @gray-l;
+}

src/assets/styles/common/color.less

@@ -1,14 +1,18 @@
 @green: #05bb4c;
-@yellow: #EDBF03;
-@blue: #1A93CF;
+@yellow: #edbf03;
+@blue: #1a93cf;
 @darkBlue: #4b55ae;
-@gray: #606769;
+@darkgray: #606769;
+@gray: #b2bdc0;
+@gray-l: #b2bdc0;
 @black: #000000;
 @write: #ffffff;
-@red: #BD3338;
+@red: #bd3338;
 @darkRed: #710f14;
-@purple: #c631c9;
+@purple: #4b55ae;
 @orange: #e17e23;
+@white: #ffffff;
+@pink: #c531c7;
 
 @greenLinearTop: linear-gradient(to top, fade(@green, 50%), fade(@green, 0));
 @greenLinearRight: linear-gradient(to right, fade(@green, 50%), fade(@green, 0));

src/assets/styles/common/font.less

@@ -1,3 +1,7 @@
-@fontsize: 1.296vh;
-@fontsize-l: 1.481vh;
-@fontsize-s: 1.111vh;
+// @fontsize: 14px;
+// @fontsize-l: 16px;
+// @fontsize-s: 12px;
+
+@fontsize: 1.481vh;
+@fontsize-l: 1.667vh;
+@fontsize-s: 1.296vh;

src/assets/styles/main.less

@@ -5,3 +5,5 @@
 @import "./font.less";
 
 @import "./svg.less";
+
+@import "./table-form.less";

src/assets/styles/svg.less

@@ -1,5 +1,4 @@
 .svg-icon {
-
   svg {
     width: 2.222vh;
     height: 2.222vh;
@@ -10,8 +9,8 @@
 
   &.svg-icon-sm {
     line-height: 0;
-      width: 1.481vh;
-      height: 1.481vh;
+    width: 1.481vh;
+    height: 1.481vh;
     svg {
       width: 1.481vh;
       height: 1.481vh;
@@ -20,8 +19,8 @@
 
   &.svg-icon-md {
     line-height: 0;
-      width: 2.222vh;
-      height: 2.222vh;
+    width: 2.222vh;
+    height: 2.222vh;
     svg {
       width: 2.222vh;
       height: 2.222vh;
@@ -30,8 +29,8 @@
 
   &.svg-icon-lg {
     line-height: 0;
-      width: 3.333vh;
-      height: 3.333vh;
+    width: 3.333vh;
+    height: 3.333vh;
     svg {
       width: 3.333vh;
       height: 3.333vh;
@@ -40,8 +39,8 @@
 
   &.svg-icon-llg {
     line-height: 0;
-      width: 4.444vh;
-      height: 4.444vh;
+    width: 4.444vh;
+    height: 4.444vh;
     svg {
       width: 4.444vh;
       height: 4.444vh;
@@ -55,6 +54,13 @@
       }
     }
   }
+  &.svg-icon-gray-l {
+    svg {
+      use {
+        fill: @gray-l;
+      }
+    }
+  }
   &.svg-icon-green {
     svg {
       use {
@@ -72,7 +78,7 @@
   &.svg-icon-blue {
     svg {
       use {
-        fill: @blue;
+        fill: @darkBlue;
       }
     }
   }
@@ -84,7 +90,7 @@
       }
     }
   }
-  
+
   &.svg-icon-orange {
     svg {
       use {
@@ -92,7 +98,7 @@
       }
     }
   }
-  
+
   &.svg-icon-purple {
     svg {
       use {
@@ -100,7 +106,7 @@
       }
     }
   }
-  
+
   &.svg-icon-write {
     svg {
       use {
@@ -108,7 +114,7 @@
       }
     }
   }
-  
+
   &.svg-icon-black {
     svg {
       use {
@@ -116,4 +122,11 @@
       }
     }
   }
+  &.svg-icon-pink {
+    svg {
+      use {
+        fill: @pink;
+      }
+    }
+  }
 }

src/assets/styles/table-form.less

@@ -0,0 +1,30 @@
+.table-form {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    background: transparent;
+
+    &:nth-child(2n) {
+      background: fade(@darkgray, 20);
+    }
+    td {
+      padding: 0.741vh;
+      border: 0px;
+      font-size: @fontsize-s;
+      font-weight: 600;
+      text-align: center;
+
+      &.text {
+        min-width: 11.111vh;
+      }
+
+      &.value {
+        min-width: 7.407vh;
+      }
+      &.unit {
+        min-width: 4.63vh;
+      }
+    }
+  }
+}

src/components/chart/bar/hover-bar-chart.vue

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "150px",
+      default: "13.889vh",
     },
     // 传入数据
     list: {
@@ -185,7 +185,7 @@ export default {
           },
           formatter: function(param) {
             console.log(param);
-            let marker = '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' + partten.getColor("green") + ';"></span>';
+            let marker = '<span style="display:inline-block;margin-right:0.370vh;border-radius:0.926vh;width:0.926vh;height:0.926vh;background-color:' + partten.getColor("green") + ';"></span>';
             return param.name + "<br >" + marker + param.seriesName + "：" + param.value;
           },
         },
@@ -201,7 +201,7 @@ export default {
             type: "category",
             data: this.xdata,
             axisLabel: {
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
             },
           },
         ],
@@ -217,7 +217,7 @@ export default {
               },
             },
             axisLabel: {
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
             },
           },
         ],

src/components/chart/bar/list-bar-chart.vue

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "200px",
+      default: "18.519vh",
     },
     //  传入数据
     list: {
@@ -174,12 +174,11 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: [0, util.vh("-24")],
+                position: [0, util.vh("-20")],
                 formatter: "{b}",
                 textStyle: {
                   color: partten.getColor("gray"),
                   fontSize: util.vh("14"),
-                  fontWeight: 600,
                 },
               },
             },

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

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "150px",
+      default: "13.889vh",
     },
     // 传入数据
     list: {
@@ -195,7 +195,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value} ",
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
             },
             //分格线
             splitLine: {
@@ -211,7 +211,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
             },
             //分格线
             splitLine: {
@@ -257,7 +257,7 @@ export default {
           },
         },
         grid: {
-          top: util.vh(28),
+          top: util.vh(32),
           left: util.vh(40),
           right: this.ydata.length > 1 ? util.vh(40) : util.vh(16),
           bottom: util.vh(24),
@@ -270,7 +270,7 @@ export default {
               type: "shadow",
             },
             axisLabel: {
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
             },
           },
         ],

src/components/chart/bar/percent-bar.vue

@@ -13,11 +13,11 @@ export default {
   props: {
     width: {
       type: String,
-      default: "80px",
+      default: "7.407vh",
     },
     height: {
       type: String,
-      default: "80px",
+      default: "7.407vh",
     },
     // 传入数据
     value: {

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

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "150px",
+      default: "13.889vh",
     },
     // 传入数据
     list: {
@@ -165,7 +165,7 @@ export default {
         name: this.unit,
         axisLabel: {
           formatter: "{value}",
-          fontSize: util.vh(12),
+          fontSize: util.vh(14),
         },
         boundaryGap: false,
         //分格线
@@ -214,7 +214,7 @@ export default {
               formatter: "{value}",
               textStyle: {
                 color: "#333",
-                fontSize: util.vh(12),
+                fontSize: util.vh(14),
               },
             },
             data: this.xdata,

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

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "150px",
+      default: "13.889vh",
     },
     // 数据
     list: {
@@ -288,7 +288,7 @@ export default {
           name: value,
           axisLabel: {
             formatter: "{value}",
-            fontSize: util.vh(12),
+            fontSize: util.vh(14),
           },
           //分格线
           splitLine: {
@@ -339,7 +339,7 @@ export default {
             boundaryGap: false,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
               textStyle: {
                 color: "#333",
               },

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

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "150px",
+      default: "13.889vh",
     },
     // 数据
     list: {
@@ -144,7 +144,7 @@ export default {
           name: value,
           axisLabel: {
             formatter: "{value}",
-            fontSize: util.vh(12),
+            fontSize: util.vh(14),
           },
           //分格线
           splitLine: {
@@ -218,7 +218,7 @@ export default {
             boundaryGap: false,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(12),
+              fontSize: util.vh(14),
               textStyle: {
                 color: partten.getColor("gray"),
               },

src/components/chart/pie/dash-pie-chart.vue

@@ -11,15 +11,15 @@ export default {
   name: "dsah-pie",
   componentName: "dsah-pie",
   props: {
-    // 宽度 默认105px
+    // 宽度 默认9.722vh
     width: {
       type: String,
       default: "70%",
     },
-    // 高度 默认105px
+    // 高度 默认9.722vh
     height: {
       type: String,
-      default: "105px",
+      default: "7.4074vh",
     },
     // 标题
     title: {
@@ -54,13 +54,13 @@ export default {
         title: {
           show: true,
           text: this.title,
-          x: "47%",
+          x: "45%",
           y: "80%",
           z: 8,
           textAlign: "center",
           textStyle: {
             color: partten.getColor("gray"),
-            fontSize: util.vh(12),
+            fontSize: util.vh(14),
             fontWeight: "normal",
           },
         },

src/components/chart/pie/dual-pie-chart.vue

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "200px",
+      default: "18.519vh",
     },
     // 内部饼图数据
     innerData: {
@@ -120,7 +120,7 @@ export default {
           itemGap: 12, //图例item间距
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(12),
+            fontSize: util.vh(14),
           },
           data: legend1,
         },
@@ -163,7 +163,7 @@ export default {
             },
             itemStyle: {
               normal: {
-                borderWidth: util.vh(12),
+                borderWidth: util.vh(14),
                 borderColor: "#071812",
               },
             },
@@ -176,7 +176,7 @@ export default {
                 rich: {
                   color: "#fff",
                   percent: {
-                    fontSize: util.vh(12),
+                    fontSize: util.vh(14),
                     color: "#fff",
                   },
                 },

src/components/chart/pie/percent-pie-chart.vue

@@ -13,11 +13,11 @@ export default {
   props: {
     width: {
       type: String,
-      default: "200px",
+      default: "18.519vh",
     },
     height: {
       type: String,
-      default: "200px",
+      default: "18.519vh",
     },
     // 百分比值
     value: {

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

@@ -1,22 +1,21 @@
 <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>
-            <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>
-        </div>
+  <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>
+      <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>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "BtnGroup2",
-        // 传入参数
-        props: {
-            /**
+export default {
+  // 名称
+  name: "BtnGroup2",
+  // 传入参数
+  props: {
+    /**
              * {
                     icon: "fa fa-fire",
                     btns: [{
@@ -32,101 +31,104 @@
                     }]
                 }
              */
-            btnGroups: Array,
-            // 默认选择第几组
-            rowIndex: {
-                type: Number,
-                default: 0
-            },
-            // 默认选中第几个
-            index: {
-                type: Number,
-                default: 0
-            }
-        },
-        // 自定义事件
-        emits: {
-            select: null
-        },
-        // 数据
-        data() {
-            return {
-                activeRow: 0,
-                activeIndex: 0,
-            }
-        },
-        // 函数
-        methods: {
-            click: function(i, index) {
-                this.activeRow = i;
-                this.activeIndex = index;
-                this.$emit('select', this.btnGroups[i].btns[index]);
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-            this.activeRow = this.rowIndex;
-            this.activeIndex = this.index;
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+    btnGroups: Array,
+    // 默认选择第几组
+    rowIndex: {
+      type: Number,
+      default: 0,
+    },
+    // 默认选中第几个
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  // 自定义事件
+  emits: {
+    select: null,
+  },
+  // 数据
+  data() {
+    return {
+      activeRow: 0,
+      activeIndex: 0,
+    };
+  },
+  // 函数
+  methods: {
+    click: function(i, index) {
+      this.activeRow = i;
+      this.activeIndex = index;
+      this.$emit("select", this.btnGroups[i].btns[index]);
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.activeRow = this.rowIndex;
+    this.activeIndex = this.index;
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less">
-    .btn-group-with-icon {
-        display: flex;
-        flex-direction: row;
-        
-        .btn-group-with-icon-list {
-            display: flex;
-            flex-direction: row;
-            margin-left: 1.481vh;
-            
-            &:first-child {
-                margin-left: 0;
-            }
-            
-            i {
-                color: @gray;
-                margin-right: 0.556vh;
-            }
-            
-            a {
-                text-decoration: none;
-                color: @gray;
-                margin-right: 0.278vh;
-                border: 1px solid @gray;
-                border-radius: 2px;
-                width: 9.815vh;
-                height: 2.13vh;
-                line-height: 2.13vh;
-                text-align: center;
-                font-size: 1.111vh;
-            
-                &:last-child {
-                    margin-right: 0;
-                }
-            
-                &.active {
-                    color: @write;
-                    background-color: @darkBlue;
-                }
-            }
-        }
+.btn-group-with-icon {
+  display: flex;
+  flex-direction: row;
+
+  .btn-group-with-icon-list {
+    display: flex;
+    flex-direction: row;
+    margin-left: 1.481vh;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    i {
+      color: @gray;
+      margin-right: 0.556vh;
+      font-size: @fontsize-l;
+      line-height: 1.5;
+    }
+
+    a {
+      text-decoration: none;
+      color: @gray;
+      margin-right: 0.278vh;
+      border: 0.093vh solid @darkgray;
+      border-radius: 0.185vh;
+      width: 9.815vh;
+      // height: 2.13vh;
+      // line-height: 2.13vh;
+      padding: 0.3704vh 0;
+      text-align: center;
+      font-size: @fontsize-s;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        color: @write;
+        background-color: @darkBlue;
+      }
     }
+  }
+}
 </style>

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

@@ -90,8 +90,8 @@
             text-decoration: none;
             color: @gray;
             margin-right: 0.278vh;
-            border: 1px solid @gray;
-            border-radius: 2px;
+            border: 0.093vh solid @darkgray;
+            border-radius: 0.185vh;
             width: 9.815vh;
             height: 2.13vh;
             line-height: 2.13vh;

src/components/coms/cards/card-1.vue

@@ -67,8 +67,8 @@ export default {
   display: flex;
 
   .card-icon svg {
-    width: 3.333vh;
-    height: 3.333vh;
+    width: 2.963vh;
+    height: 2.963vh;
   }
 
   .card-info {

src/components/coms/cards/percent-card-2.vue

@@ -71,19 +71,19 @@ export default {
     text-align: center;
     width: 100%;
     margin-top: 1.481vh;
-    font-size: 1.111vh;
+    font-size: @fontsize-s;
   }
 
   .card-info {
     flex: auto;
     align-self: center;
     margin-left: 0.741vh;
-    margin-top: -2.593vh;
+    margin-top: -2.2222vh;
 
     .card-value {
       font-size: @fontsize-s;
       font-weight: 600;
-      margin-bottom: 1.111vh;
+      margin-bottom: 1.1111vh;
 
       .value-text {
         margin-right: 0.741vh;

src/components/coms/collapse/collapse-list.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="com-collapse">
+    <div class="collapse-box" v-for="(menu, i) in list" :key="menu" :class="{ active: menuIndex == i }">
+      <div class="box-text" @click="menuClick(i)">
+        {{ menu.text }}
+      </div>
+      <div class="collapse-items">
+        <div class="item" v-for="(item, j) in menu.children" :key="item" @click="itemClick(j)" :class="{ active: itemIndex == j }">
+          <span class="dot" :class="'bg-' + item.color"></span>
+          <span class="value"> {{ item.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "List",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    // 标题 ""不显示
+    title: {
+      type: String,
+      default: "",
+    },
+    // 列表面板高度 fill auto 27.778vh
+    height: {
+      type: String,
+      default: "fill",
+    },
+    /**
+     {
+       id:'',
+        text: "某某风电场",
+        children: [{
+          id:'',
+          text:'2E01',
+          color:'green'
+        }]
+      }
+    */
+    list: {
+      type: Array,
+      default: () => [
+        {
+          id: "1",
+          text: "某某风电场",
+          children: [
+            {
+              id: "1",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "2",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "3",
+              text: "2E01",
+              color: "green",
+            },
+          ],
+        },
+        {
+          id: "2",
+          text: "某某风电场",
+          children: [
+            {
+              id: "1",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "2",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "3",
+              text: "2E01",
+              color: "green",
+            },
+          ],
+        },
+      ],
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 选中事件
+    select: null,
+  },
+  computed: {},
+  // 数据
+  data() {
+    return {
+      menuIndex: 0,
+      itemIndex: 0,
+    };
+  },
+  // 函数
+  methods: {
+    menuClick: function(index) {
+      this.menuIndex = index;
+      this.itemIndex = 0;
+    },
+    itemClick(index) {
+      this.itemIndex = index;
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {},
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less">
+.com-collapse {
+  .collapse-box {
+    cursor: pointer;
+
+    .box-text {
+      padding: 0.741vh 1.481vh;
+      background: fade(@white, 10);
+
+      &:hover {
+        color: #fff;
+        background: fade(@purple, 60);
+      }
+    }
+
+    .collapse-items {
+      display: none;
+
+      .item {
+        padding: 0.741vh 1.481vh;
+        display: flex;
+        align-items: center;
+
+        .dot {
+          display: inline-block;
+          width: 0.741vh;
+          height: 0.741vh;
+          margin-right: 1.111vh;
+        }
+
+        .value {
+          flex: auto;
+        }
+
+        &.active {
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &.active {
+      .box-text {
+        color: @white;
+        background: fade(@purple, 60);
+      }
+      & > .collapse-items {
+        display: block;
+      }
+    }
+  }
+}
+</style>

src/components/coms/list/list.vue

@@ -1,192 +1,189 @@
 <template>
-    <div class="com-list-box" :class="{'fill' : height == 'fill', 'auto' : height == 'auto'}">
-        <div class="com-list-title" v-if="title != ''">{{title}}</div>
-        <div class="com-list-body">
-            <div class="con-list-item" v-for="(data, index) of list" :key="index" @click="select(index)"
-                :class="data.color + ' ' + (activeIndex == index ? 'active' : '')">{{data.text}}
-            </div>
-        </div>
+  <div class="com-list-box" :class="{ fill: height == 'fill', auto: height == 'auto' }">
+    <div class="com-list-title" v-if="title != ''">{{ title }}</div>
+    <div class="com-list-body">
+      <div class="con-list-item" v-for="(data, index) of list" :key="index" @click="select(index)" :class="data.color + ' ' + (activeIndex == index ? 'active' : '')">{{ data.text }}</div>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "List",
-        // 使用组件
-        components: {},
-        // 传入参数
-        props: {
-            // 标题 ""不显示
-            title: {
-                type: String,
-                default: ""
-            },
-            // 列表面板高度 fill auto 300px
-            height: {
-                type: String,
-                default: "fill"
-            },
-            // 默认选中第几个
-            index: {
-                type: Number,
-                default: 0
-            },
-            /**
+export default {
+  // 名称
+  name: "List",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    // 标题 ""不显示
+    title: {
+      type: String,
+      default: "",
+    },
+    // 列表面板高度 fill auto 27.778vh
+    height: {
+      type: String,
+      default: "fill",
+    },
+    // 默认选中第几个
+    index: {
+      type: Number,
+      default: 0,
+    },
+    /**
              * {
                     text: "1#逆变室",
                     color: "blue"
                 }
              */
-            list: Array
-        },
-        // 自定义事件
-        emits: {
-            // 选中事件
-            select: null
-        },
-        // 数据
-        data() {
-            return {
-                activeIndex: 0
-            }
-        },
-        // 函数
-        methods: {
-            select: function (index) {
-                this.activeIndex = index;
-                this.$emit('select', this.list[index]);
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-            this.activeIndex = this.index;
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-            if (this.height != 'fill' && this.height != 'auto') {
-                this.$el.style.height = this.height;
-            }
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
+    list: Array,
+  },
+  // 自定义事件
+  emits: {
+    // 选中事件
+    select: null,
+  },
+  // 数据
+  data() {
+    return {
+      activeIndex: 0,
+    };
+  },
+  // 函数
+  methods: {
+    select: function(index) {
+      this.activeIndex = index;
+      this.$emit("select", this.list[index]);
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    this.activeIndex = this.index;
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    if (this.height != "fill" && this.height != "auto") {
+      this.$el.style.height = this.height;
     }
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less">
-    .com-list-box {
-        display: flex;
-        flex-direction: column;
-
-        &.auto {
-            height: auto;
+.com-list-box {
+  display: flex;
+  flex-direction: column;
+
+  &.auto {
+    height: auto;
+  }
+
+  &.fill {
+    height: 100%;
+  }
+
+  .com-list-title {
+    font-size: @fontsize-l;
+    color: @write;
+    background-color: fade(@darkgray, 50%);
+    padding: 1.481vh 1.852vh;
+  }
+
+  .com-list-body {
+    background-color: fade(@darkgray, 20%);
+    flex-grow: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .con-list-item {
+      color: @gray;
+      position: relative;
+      font-size: @fontsize;
+      text-align: center;
+      padding: 0.37vh 0;
+      border-bottom: 0.093vh solid @darkgray;
+      cursor: pointer;
+
+      &:hover {
+        background-color: fade(@darkgray, 30%);
+      }
+
+      &.active {
+        color: @write;
+        background-color: fade(@blue, 60%);
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 0.741vh;
+        height: 0.741vh;
+        left: 1.111vh;
+        top: calc(50% - 0.37vh);
+      }
+
+      &.write {
+        &::after {
+          background-color: @write;
         }
+      }
 
-        &.fill {
-            height: 100%;
+      &.green {
+        &::after {
+          background-color: @green;
         }
+      }
 
-        .com-list-title {
-            font-size: @fontsize-l;
-            color: @write;
-            background-color: fade(@gray, 50%);
-            padding: 16px 20px;
+      &.blue {
+        &::after {
+          background-color: @blue;
         }
+      }
 
-        .com-list-body {
-            background-color: fade(@gray, 20%);
-            flex-grow: 1;
-            overflow: auto;
-            display: flex;
-            flex-direction: column;
-
-            .con-list-item {
-                color: @gray;
-                position: relative;
-                font-size: @fontsize;
-                text-align: center;
-                padding: 4px 0;
-                border-bottom: 1px solid @gray;
-                cursor: pointer;
-
-                &:hover {
-                    background-color: fade(@gray, 30%);
-                }
-
-                &.active {
-                    color: @write;
-                    background-color: fade(@blue, 60%);
-                }
-
-                &::after {
-                    content: '';
-                    position: absolute;
-                    width: 8px;
-                    height: 8px;
-                    left: 12px;
-                    top: calc(50% - 4px);
-                }
-
-                &.write {
-                    &::after {
-                        background-color: @write;
-                    }
-                }
-
-                &.green {
-                    &::after {
-                        background-color: @green;
-                    }
-                }
-
-                &.blue {
-                    &::after {
-                        background-color: @blue;
-                    }
-                }
-
-                &.purple {
-                    &::after {
-                        background-color: @purple;
-                    }
-                }
-
-                &.red {
-                    &::after {
-                        background-color: @red;
-                    }
-                }
+      &.purple {
+        &::after {
+          background-color: @purple;
+        }
+      }
 
-                &.orange {
-                    &::after {
-                        background-color: @orange;
-                    }
-                }
+      &.red {
+        &::after {
+          background-color: @red;
+        }
+      }
 
-                &.gray {
-                    &::after {
-                        background-color: @gray;
-                    }
-                }
+      &.orange {
+        &::after {
+          background-color: @orange;
+        }
+      }
 
-                &.yellow {
-                    &::after {
-                        background-color: @yellow;
-                    }
-                }
+      &.gray {
+        &::after {
+          background-color: @darkgray;
+        }
+      }
 
-            }
+      &.yellow {
+        &::after {
+          background-color: @yellow;
         }
+      }
     }
+  }
+}
 </style>

src/components/coms/panel/panel-no-title.vue

@@ -32,11 +32,12 @@ export default {
       return false;
     },
   },
-};s
+};
+s;
 </script>
 <style lang="less" scoped>
 .com-panel {
-  border-left: 2px solid rgba(255, 255, 255, 50%);
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
 
   &:before {
     content: " ";
@@ -48,7 +49,7 @@ export default {
   }
 
   &.no-title {
-    border-left: 0px;
+    border-left: 0vh;
   }
 
   &.no-title::before {
@@ -57,8 +58,8 @@ export default {
 
   .panel-header {
     display: flex;
-    font-size: 1.296vh;
-    padding-left: 1.111vh;
+    font-size: @fontsize;
+    padding-left: 1.4815vh;
     background: rgba(255, 255, 255, 10%);
     line-height: 2.963vh;
     margin-bottom: 1.481vh;
@@ -76,7 +77,7 @@ export default {
       color: #fff;
       opacity: 0.3;
       padding: 0 0.741vh;
-      font-size: 1.111vh;
+      font-size: @fontsize-s;
       letter-spacing: 0.093vh;
     }
   }
@@ -87,7 +88,7 @@ export default {
   }
 
   &.no-title .panel-body {
-    padding-left: 0px;
+    padding-left: 0vh;
   }
 }
 </style>

src/components/coms/panel/panel.vue

@@ -42,19 +42,19 @@ export default {
 </script>
 <style lang="less">
 .com-panel {
-  border-left: 2px solid rgba(255, 255, 255, 50%);
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
 
   &:before {
     content: " ";
-    width: 4px;
-    height: 4px;
+    width: 0.37vh;
+    height: 0.37vh;
     float: left;
     background: #fff;
-    margin: 2px 6px 0px 2px;
+    margin: 0.185vh 0.556vh 0vh 0.185vh;
   }
 
   &.no-title {
-    border-left: 0px;
+    border-left: 0vh;
   }
 
   &.no-title::before {
@@ -64,7 +64,7 @@ export default {
   .panel-header {
     display: flex;
     font-size: @fontsize;
-    padding-left: 12px;
+    padding-left: 1.185vh;
     background: rgba(255, 255, 255, 10%);
     line-height: 2.593vh;
     margin-bottom: 1.481vh;
@@ -73,26 +73,26 @@ export default {
       color: rgba(255, 255, 255, 0.8);
       flex: 1 1 auto;
       .panel-icon {
-        margin-right: 8px;
+        margin-right: 0.741vh;
       }
     }
 
     .panel-tools {
       flex: 0 0 auto;
       color: #ffffff4d;
-      padding: 0 8px;
+      padding: 0 0.741vh;
       font-size: @fontsize-s;
-      letter-spacing: 1px;
+      letter-spacing: 0.093vh;
     }
   }
 
   .panel-body {
-    padding-left: 12px;
+    padding-left: 1.185vh;
     color: rgba(255, 255, 255, 0.8);
   }
 
   &.no-title .panel-body {
-    padding-left: 0px;
+    padding-left: 0vh;
   }
 }
 </style>

src/components/coms/panel/panel2.vue

@@ -37,30 +37,30 @@ export default {
 </script>
 <style lang="less">
 .com-panel2 {
-  border-left: 2px solid rgba(255, 255, 255, 50%);
-  padding-left: 12px;
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+  padding-left: 1.185vh;
   position: relative;
 
   &:before,
   &:after {
     content: " ";
-    width: 4px;
-    height: 4px;
+    width: 0.37vh;
+    height: 0.37vh;
     background: @write;
     position: absolute;
-    left: 2px;
+    left: 0.185vh;
   }
 
   &:before {
-    top: 2px;
+    top: 0.185vh;
   }
 
   &:after {
-    bottom: 2px;
+    bottom: 0.185vh;
   }
 
   &.no-title {
-    border-left: 0px;
+    border-left: 0vh;
   }
 
   &.no-title::before {
@@ -95,8 +95,8 @@ export default {
 
   .panel-header2 {
     display: flex;
-    font-size: 16px;
-    padding-left: 12px;
+    font-size: @fontsize;
+    padding-left: 1.185vh;
     background: rgba(255, 255, 255, 10%);
     line-height: 2.963vh;
     margin-bottom: 1.111vh;
@@ -107,7 +107,7 @@ export default {
       position: absolute;
       left: 0;
       top: 0;
-      width: 40px;
+      width: 40vh;
       height: 100%;
     }
 
@@ -115,14 +115,14 @@ export default {
       color: @write;
 
       .panel-icon2 {
-        margin-right: 8px;
+        margin-right: 0.741vh;
       }
     }
 
     .panel-tools2 {
       color: #fff;
       opacity: 0.3;
-      padding: 0 8px;
+      padding: 0 0.741vh;
     }
   }
 
@@ -131,7 +131,7 @@ export default {
   }
 
   &.no-title .panel-body2 {
-    padding-left: 0px;
+    padding-left: 0vh;
   }
 }
 </style>

src/components/coms/panel/panel3.vue

@@ -20,32 +20,32 @@ export default {
   background: rgba(255, 255, 255, 0.1);
   padding: 0.741vh;
   display: inline-block;
-  border: 1px solid #536268;
+  border: 0.093vh solid #536268;
 
   .dot {
     position: absolute;
-    width: 4px;
-    height: 4px;
+    width: 0.370vh;
+    height: 0.370vh;
     background: #fff;
 
     &.top-left {
-      top: 6px;
-      left: 6px;
+      top: 0.556vh;
+      left: 0.556vh;
     }
 
     &.bottom-left {
-      bottom: 6px;
-      left: 6px;
+      bottom: 0.556vh;
+      left: 0.556vh;
     }
 
     &.top-rignt {
-      top: 6px;
-      right: 6px;
+      top: 0.556vh;
+      right: 0.556vh;
     }
 
     &.bottom-right {
-      bottom: 6px;
-      right: 6px;
+      bottom: 0.556vh;
+      right: 0.556vh;
     }
   }
 }

src/components/coms/table/table-page.vue

@@ -183,7 +183,7 @@
         flex-direction: column;
         
         .toolbar {
-            background-color: fade(@gray, 40%);
+            background-color: fade(@darkgray, 40%);
             display: flex;
 
             .title {
@@ -204,7 +204,7 @@
                 align-items: center;
 
                 span {
-                    border-radius: 4px;
+                    border-radius: 0.370vh;
                     padding: 0.185vh 0.278vh;
                     margin-right: 0.556vh;
 
@@ -223,7 +223,7 @@
                     font-weight: 600;
                     width: 2.315vh;
                     text-align: center;
-                    border: 1px solid @gray;
+                    border: 0.093vh solid @darkgray;
 
                     &.active {
                         color: @green;
@@ -261,7 +261,7 @@
         }
 
         .sub-title {
-            background-color: fade(@gray, 40%);
+            background-color: fade(@darkgray, 40%);
             display: flex;
             padding: 0.741vh 2.222vh;
             font-size: @fontsize;

src/components/coms/table/table-span.vue

@@ -1,144 +1,139 @@
 <template>
-    <table class="com-table">
-        <thead>
-            <tr>
-                <th v-for="(col, index) of data.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}<br
-                        v-if="col.unit != ''">{{col.unit}}
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(row, index) of data.data" :key="index">
-                <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i"
-                    :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num, 'remove': row[col.field] == '' }">
-                    {{row[col.field]}}
-                </td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, index) of data.data" :key="index">
+        <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
+          {{ row[col.field] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "ComTable",
-        // 使用组件
-        components: {},
-        // 传入参数
-        props: {
-            data: Object
-        },
-        // 自定义事件
-        emits: {},
-        // 数据
-        data() {
-            return {}
-        },
-        computed: {
-
-        },
-        // 函数
-        methods: {
-            rowspan: function(row, col) {
-                if (row.row_span.length == 0) {
-                    return 1;
-                } else {
-                    let row_span = row.row_span.find(t => t[0] == col.field);
-                    if (row_span) {
-                        return row_span[1];
-                    } else {
-                        return 1;
-                    }
-                }
-            },
-            colspan: function(row, col) {
-                if (row.col_span.length == 0) {
-                    return 1;
-                } else {
-                    let col_span = row.col_span.find(t => t[0] == col.field);
-                    if (col_span) {
-                        return col_span[1];
-                    } else {
-                        return 1;
-                    }
-                }
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    data: Object,
+  },
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {};
+  },
+  computed: {},
+  // 函数
+  methods: {
+    rowspan: function(row, col) {
+      if (row.row_span.length == 0) {
+        return 1;
+      } else {
+        let row_span = row.row_span.find((t) => t[0] == col.field);
+        if (row_span) {
+          return row_span[1];
+        } else {
+          return 1;
+        }
+      }
+    },
+    colspan: function(row, col) {
+      if (row.col_span.length == 0) {
+        return 1;
+      } else {
+        let col_span = row.col_span.find((t) => t[0] == col.field);
+        if (col_span) {
+          return col_span[1];
+        } else {
+          return 1;
+        }
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less">
-    @titleGray: #9CA5A8;
-    @rowGray: #606769;
-    @darkBack: #536268;
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
 
-    .com-table {
-        width: 100%;
-        border-collapse: collapse;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
 
-        thead {
-            tr {
-                th {
-                    background-color: fade(@darkBack, 60%);
-                    padding: 0.741vh 0;
-                    color: @titleGray;
-                    font-weight: 400;
-                    font-size: @fontsize-s;
-                    position: sticky;
-                    top: 0;
+  thead {
+    tr {
+      th {
+        background-color: fade(@darkBack, 60%);
+        padding: 0.741vh 0;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
 
-                    &.light {
-                        color: @green;
-                    }
-                }
-            }
+        &.light {
+          color: @green;
         }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
 
-        tbody {
-            tr {
-                &:nth-child(2n) {
-                    background-color: fade(@rowGray, 20%);
-                }
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
 
-                td {
-                    padding: 0.556vh 0;
-                    color: @rowGray;
-                    text-align: center;
-                    font-size: @fontsize-s;
+        &.light {
+          color: @green;
+        }
 
-                    &.light {
-                        color: @green;
-                    }
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
 
-                    &.num {
-                        font-family: "Bicubik";
-                        font-weight: 400;
-                    }
-                    
-                    &.remove {
-                        display: none;
-                    }
-                }
-            }
+        &.remove {
+          display: none;
         }
+      }
     }
+  }
+}
 </style>

src/components/coms/table/table.vue

@@ -1,35 +1,34 @@
 <template>
-    <table class="com-table">
-        <thead>
-            <tr>
-                <th v-for="(col, index) of data.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(row, index) of data.data" :key="index">
-                <td v-for="(col, i) of data.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
-                    {{row[col.field]}}</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, index) of data.data" :key="index">
+        <td v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num }" v-html="template(col, row[col.field])"></td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "ComTable",
-        // 使用组件
-        components: {},
-        // 传入参数
-        props: {
-            /**
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
              * {
                     column: [{
                         name: "风机名称",
                         field: "name",
                         is_num: false, // 是否为数字
-                        is_light: false // 是否高亮
+                        is_light: false, // 是否高亮
+                        template:function(){ }
                     },{
                         name: "冷却风温度",
                         field: "lqf",
@@ -43,86 +42,91 @@
                     }]
                 }
              */
-            data: Object
-        },
-        // 自定义事件
-        emits: {},
-        // 数据
-        data() {
-            return {}
-        },
-        // 函数
-        methods: {},
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+    data: Object,
+  },
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {};
+  },
+  // 函数
+  methods: {
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less">
-    @titleGray: #9CA5A8;
-    @rowGray: #606769;
-    @darkBack: #536268;
-    .com-table {
-        width: 100%;
-        border-collapse: collapse;
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
 
-        thead {
-            tr {
-                th {
-                    background-color: fade(@darkBack, 60%);
-                    padding: 1.481vh 0;
-                    color: @titleGray;
-                    font-weight: 400;
-                    font-size: @fontsize-s;
-                    position: sticky;
-                    top: 0;
-                    
-                    &.light {
-                        color: @green;
-                    }
-                }
-            }
+  thead {
+    tr {
+      th {
+        background-color: fade(@darkBack, 60%);
+        padding: 1.481vh 0;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+
+        &.light {
+          color: @green;
         }
+      }
+    }
+  }
 
-        tbody {
-            tr {
-                &:nth-child(2n) {
-                    background-color: fade(@rowGray, 20%);
-                }
+  tbody {
+    tr {
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
 
-                td {
-                    padding: 0.556vh 0;
-                    color: @rowGray;
-                    text-align: center;
-                    font-size: @fontsize-s;
-                    
-                    &.light {
-                        color: @green;
-                    }
-                    
-                    &.num {
-                        font-family: "Bicubik";
-                        font-weight: 400;
-                    }
-                }
-            }
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+
+        &.light {
+          color: @green;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
         }
+      }
     }
+  }
+}
 </style>

src/components/coms/tabs/tab.vue

@@ -66,7 +66,7 @@ export default {
         position: absolute;
         width: 100%;
         height: 0.463vh;
-        border: 1px solid @green;
+        border: 0.093vh solid @green;
         border-top: 0;
         left: 0;
         bottom: 0;

src/components/three/wave.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="wave"></div>
+</template>
+
+<script>
+    import * as THREE from 'three';
+
+    let scene, camera, renderer, particles;
+
+    export default {
+        // 名称
+        name: "wave",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {},
+        // 自定义事件
+        emits: {},
+        // 数据
+        data() {
+            return {
+                SEPARATION: 100,
+                AMOUNTX: 100,
+                AMOUNTY: 100,
+                count: 0,
+                mouseX: 0,
+                mouseY: -400,
+                windowHalfX: window.innerWidth / 2,
+                windowHalfY: window.innerHeight / 2,
+            }
+        },
+        // 函数
+        methods: {
+            init: function() {
+                camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
+                camera.position.z = 1000;
+                scene = new THREE.Scene();
+                const numParticles = this.AMOUNTX * this.AMOUNTY;
+                const positions = new Float32Array(numParticles * 3);
+                const scales = new Float32Array(numParticles);
+                let i = 0,
+                    j = 0;
+                for (let ix = 0; ix < this.AMOUNTX; ix++) {
+                    for (let iy = 0; iy < this.AMOUNTY; iy++) {
+                        positions[i] = ix * this.SEPARATION - ((this.AMOUNTX * this.SEPARATION) / 2); // x
+                        positions[i + 1] = 0; // y
+                        positions[i + 2] = iy * this.SEPARATION - ((this.AMOUNTY * this.SEPARATION) / 2); // z
+                        scales[j] = 1;
+                        i += 3;
+                        j++;
+                    }
+                }
+                const geometry = new THREE.BufferGeometry();
+                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+                geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
+                const material = new THREE.ShaderMaterial({
+                    uniforms: {
+                        color: {
+                            value: new THREE.Color(0x05bb4c)
+                        },
+                    },
+                    vertexShader: `attribute float scale;
+                        void main() {
+                            vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
+                            gl_PointSize = scale * ( 200.0 / - mvPosition.z );
+                            gl_Position = projectionMatrix * mvPosition;
+                        }`,
+                    fragmentShader: `uniform vec3 color;
+                        void main() {
+                            if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
+                            gl_FragColor = vec4( color, 1.0 );
+                        }`
+                });
+                particles = new THREE.Points(geometry, material);
+                scene.add(particles);
+                renderer = new THREE.WebGLRenderer({
+                    antialias: true,
+                    alpha: true,
+                });
+                renderer.setSize(window.innerWidth, window.innerHeight);
+                renderer.setPixelRatio(window.devicePixelRatio);
+                renderer.setAnimationLoop(this.render);
+                this.$el.appendChild(renderer.domElement);
+            },
+            render: function() {
+                camera.position.x += (this.mouseX - camera.position.x) * .05;
+                camera.position.y += (-this.mouseY - camera.position.y) * .05;
+                camera.lookAt(scene.position);
+                const positions = particles.geometry.attributes.position.array;
+                const scales = particles.geometry.attributes.scale.array;
+                let i = 0,
+                    j = 0;
+                for (let ix = 0; ix < this.AMOUNTX; ix++) {
+                    for (let iy = 0; iy < this.AMOUNTY; iy++) {
+                        positions[i + 1] = (Math.sin((ix + this.count) * 0.3) * 50) +
+                            (Math.sin((iy + this.count) * 0.5) * 50);
+                        scales[j] = (Math.sin((ix + this.count) * 0.3) + 1) * 20 +
+                            (Math.sin((iy + this.count) * 0.5) + 1) * 20;
+                        i += 3;
+                        j++;
+                    }
+                }
+                particles.geometry.attributes.position.needsUpdate = true;
+                particles.geometry.attributes.scale.needsUpdate = true;
+                renderer.render(scene, camera);
+                this.count += 0.1;
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            camera = null;
+            scene = null;
+            renderer = null;
+            this.init();
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+        beforeUnmount() {
+            // 销毁前
+            camera = null;
+            scene = null;
+            renderer = null;
+        }
+    }
+</script>
+
+<style lang="less">
+    .wave {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 60%;
+        z-index: -1;
+        overflow: hidden;
+    }
+</style>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-plus/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: hotpink;
+
+/* icon font path, required */
+$--font-path: '~element-plus/lib/theme-chalk/fonts';
+
+@import "~element-plus/packages/theme-chalk/src/index";

src/helper/partten.js

@@ -2,7 +2,7 @@
 const color = [
     { key: "green", value: "#05BB4C" },
     { key: "yellow", value: "#F8DE5B" },
-    { key: "gray", value: "#606769" },
+    { key: "gray", value: "#b2bdc0" },
     { key: "purple", value: "#4B55AE" },
 ];
 

src/plugins/element.js

@@ -0,0 +1,7 @@
+import ElementPlus from 'element-plus'
+import '../element-variables.scss'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
+
+export default (app) => {
+  app.use(ElementPlus, { locale })
+}

src/router/index.js

@@ -41,6 +41,12 @@ const routes = [
     }, {
       path: 'box',
       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')
     }]
   },
   {

src/views/Home/Home.vue

@@ -4,7 +4,11 @@
       <Col :span="6">
         <Row type="flex">
           <Col :span="24">
-            <com-panel title="银川" sub-title="AM 10:52 实况" icon="fa fa-map-marker">
+            <com-panel
+              title="银川"
+              sub-title="AM 10:52 实况"
+              icon="fa fa-map-marker"
+            >
               <weather />
             </com-panel>
           </Col>
@@ -12,7 +16,7 @@
         <Row type="flex">
           <Col :span="24">
             <com-panel title="预测电量" sub-title="（单位：万KWh）">
-              <list-bar-chart :list="ForecastPower" height="18.056vh" />
+              <list-bar-chart :list="ForecastPower" height="16.6667vh" />
             </com-panel>
           </Col>
         </Row>
@@ -25,7 +29,7 @@
         </Row>
       </Col>
       <Col :span="12">
-          <Map></Map>
+        <Map></Map>
       </Col>
       <Col :span="6">
         <Row type="flex">
@@ -69,7 +73,11 @@
           </template>
           <template v-slot:default>
             <!-- 日发电量 -->
-            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
+            <multiple-bar-chart
+              :list="DayPower.value"
+              :units="DayPower.units"
+              height="12.963vh"
+            />
           </template>
         </toolbar-panel>
       </Col>
@@ -94,7 +102,11 @@
             </div>
           </template>
           <template v-slot:default>
-            <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="12.963vh" />
+            <multiple-line-chart
+              :list="Powertrend.value"
+              :units="Powertrend.units"
+              height="12.963vh"
+            />
           </template>
         </toolbar-panel>
       </Col>
@@ -299,8 +311,8 @@
                   <div class="value">30</div>
                 </div>
               </div>
-              <div class="situation-item ">
-                <div class="icon  svg-icon svg-icon-purple">
+              <div class="situation-item">
+                <div class="icon svg-icon svg-icon-purple">
                   <svg-icon class="" svgid="svg-待机图标" />
                 </div>
                 <div class="info">
@@ -315,8 +327,8 @@
                   </div>
                 </div>
               </div>
-              <div class="situation-item ">
-                <div class="icon  svg-icon svg-icon-green">
+              <div class="situation-item">
+                <div class="icon svg-icon svg-icon-green">
                   <svg-icon class="" svgid="svg-运行图标" />
                 </div>
                 <div class="info">
@@ -331,8 +343,8 @@
                   </div>
                 </div>
               </div>
-              <div class="situation-item ">
-                <div class="icon  svg-icon svg-icon-yellow">
+              <div class="situation-item">
+                <div class="icon svg-icon svg-icon-yellow">
                   <svg-icon class="" svgid="svg-限电图标" />
                 </div>
                 <div class="info">
@@ -349,8 +361,8 @@
               </div>
             </row>
             <row align="middle">
-              <div class="situation-item ">
-                <div class="icon  svg-icon svg-icon-red">
+              <div class="situation-item">
+                <div class="icon svg-icon svg-icon-red">
                   <svg-icon class="" svgid="svg-故障图标" />
                 </div>
                 <div class="info">
@@ -365,7 +377,7 @@
                   </div>
                 </div>
               </div>
-              <div class="situation-item ">
+              <div class="situation-item">
                 <div class="icon svg-icon svg-icon-orange">
                   <svg-icon class="" svgid="svg-检修图标" />
                 </div>
@@ -381,7 +393,7 @@
                   </div>
                 </div>
               </div>
-              <div class="situation-item ">
+              <div class="situation-item">
                 <div class="icon svg-icon svg-icon-gray">
                   <svg-icon class="" svgid="svg-离线图标" />
                 </div>
@@ -397,8 +409,8 @@
                   </div>
                 </div>
               </div>
-              <div class="situation-item ">
-                <div class="icon  svg-icon svg-icon-blue">
+              <div class="situation-item">
+                <div class="icon svg-icon svg-icon-blue">
                   <svg-icon class="" svgid="svg-受累图标" />
                 </div>
                 <div class="info">
@@ -748,7 +760,7 @@ export default {
   tr {
     font-size: @fontsize-s;
     td {
-      border: 1px solid @gray;
+      border: 0.093vh solid @darkgray;
       padding: 0.556vh 0.741vh;
       &.text {
       }
@@ -802,11 +814,12 @@ export default {
       display: flex;
       align-content: center;
       flex: 1 1 auto;
+      align-items: center;
 
       .icon {
         svg {
-          width: 5vh;
-          height: 5vh;
+          width: 4.167vh;
+          height: 4.167vh;
         }
       }
 
@@ -820,7 +833,7 @@ export default {
 
       .fengji-icon {
         padding: 1.111vh;
-        border: 1px solid #05bb4c;
+        border: 0.093vh solid #05bb4c;
         border-radius: 50%;
         border-right-color: transparent;
         border-top-color: transparent;

src/views/Home/components/coulometric-analysis.vue

@@ -9,8 +9,16 @@
           <span class="value">{{ AddElectricity }}</span>
         </div>
         <percent-card :value="PromotionRate" color="green" title="提升率" />
-        <card-1 class="increase-info" title="及时并网增发电量" :value="IncreasePower" />
-        <card-1 class="increase-info" title="主动维护降低损失电量" :value="Maintenance" />
+        <card-1
+          class="increase-info"
+          title="及时并网增发电量"
+          :value="IncreasePower"
+        />
+        <card-1
+          class="increase-info"
+          title="主动维护降低损失电量"
+          :value="Maintenance"
+        />
       </Col>
       <Col :span="12">
         <div class="coulometric-info">
@@ -20,10 +28,20 @@
         </div>
         <percent-card :value="ReductionRate" color="yellow" title="" />
         <div>
-          <card-1 class="increase-info" title="因偏航对风超出范围" :value="OutRange" :isIncrease="false" />
+          <card-1
+            class="increase-info"
+            title="因偏航对风超出范围"
+            :value="OutRange"
+            :isIncrease="false"
+          />
         </div>
         <div>
-          <card-1 class="increase-info" title="降出力运行" :value="ReducedOutput" :isIncrease="false" />
+          <card-1
+            class="increase-info"
+            title="降出力运行"
+            :value="ReducedOutput"
+            :isIncrease="false"
+          />
         </div>
       </Col>
     </row>
@@ -85,7 +103,7 @@ export default {
   }
 
   .increase-info {
-    margin: 2.963vh 0.741vh;
+    margin: 2.778vh 0;
   }
 
   .icon {

src/views/Home/components/map.vue

@@ -101,28 +101,28 @@
         }
 
         .security-days {
-            margin: 20px;
+            margin: 1.852vh;
 
             .text {
-                font-size: 24px;
+                font-size: 2.222vh;
                 color: @write;
             }
 
             .num {
                 color: @green;
-                font-size: 40px;
+                font-size: 3.704vh;
 
                 .unit {
-                    font-size: 24px;
+                    font-size: 2.222vh;
                     position: relative;
-                    margin-left: 6px;
-                    top: -2px;
+                    margin-left: 0.556vh;
+                    top: -0.185vh;
                 }
             }
         }
 
         .tab-box {
-            margin: 20px 30px;
+            margin: 1.852vh 2.778vh;
 
             .tab-item {
                 display: flex;
@@ -130,8 +130,8 @@
                 justify-content: center;
                 font-size: @fontsize-l;
                 cursor: pointer;
-                width: 70px;
-                padding: 8px 0;
+                width: 6.481vh;
+                padding: 0.741vh 0;
 
                 &.active {
                     color: @green;
@@ -142,8 +142,8 @@
                         content: "";
                         position: absolute;
                         width: 100%;
-                        height: 5px;
-                        border: 1px solid @green;
+                        height: 0.463vh;
+                        border: 0.093vh solid @green;
                         border-top: 0;
                         left: 0;
                         bottom: 0;
@@ -152,15 +152,15 @@
                 }
 
                 .svg-icon {
-                    margin-right: 6px;
+                    margin-right: 0.556vh;
                 }
             }
         }
     
         .map-img {
-            width: calc(100% - 160px);
-            height: calc(100% - 160px);
-            margin: 80px;
+            width: calc(100% - 14.815vh);
+            height: calc(100% - 14.815vh);
+            margin: 7.407vh;
             position: absolute;
             z-index: 1;
             top: 0;

src/views/Home/components/weather.vue

@@ -95,7 +95,7 @@ export default {
       font-size: 2.778vh;
     }
     .other span {
-      font-size: 1.111vh;
+      font-size: @fontsize-s;
       margin-right: 2.222vh;
     }
   }

src/views/LightMatrix/LightMatrix.vue

@@ -55,7 +55,11 @@
           <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>
@@ -71,7 +75,16 @@
                       <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'">
+                          <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>
@@ -156,7 +169,7 @@ export default {
             key2: "fcjclnum",
           },
           {
-            color: "purple",
+            color: "pink",
             name: "限电",
             nameIcon: "svg-limit-power",
             key: "fcxdnum",
@@ -234,7 +247,7 @@ export default {
             {
               text: "限电台数",
               num: 256,
-              color: "purple",
+              color: "pink",
             },
             {
               text: "故障台数",
@@ -338,7 +351,7 @@ export default {
         tempData[i].color = "green";
       }
       if (i == 40) {
-        tempData[i].color = "purple";
+        tempData[i].color = "pink";
       }
       if (i == 41) {
         tempData[i].color = "orange";
@@ -415,45 +428,45 @@ export default {
 
   .panel {
     width: 100%;
-    border: 1px solid @gray;
+    border: 0.093vh solid @darkgray;
     position: relative;
     padding: 1.111vh 2.222vh;
-    background-color: fade(@gray, 20%);
+    background-color: fade(@darkgray, 20%);
 
     .dot {
-      width: 2px;
-      height: 2px;
+      width: 0.185vh;
+      height: 0.185vh;
       border-radius: 50%;
       background-color: @write;
       position: absolute;
 
       &.left {
-        left: 4px;
+        left: 0.37vh;
       }
 
       &.right {
-        right: 4px;
+        right: 0.37vh;
       }
 
       &.top {
-        top: 4px;
+        top: 0.37vh;
       }
 
       &.bottom {
-        bottom: 4px;
+        bottom: 0.37vh;
       }
     }
 
     .panel-item-gf {
       width: 100%;
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       display: flex;
       height: @panelHeight;
 
       .panel-item-gf-left {
         width: @panelHeight;
         height: @panelHeight;
-        background-color: fade(@gray, 40%);
+        background-color: fade(@darkgray, 40%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -471,10 +484,10 @@ export default {
 
         .panel-item-gf-up {
           height: @panelHeight / 2;
-          border-bottom: 1px solid fade(@gray, 40%);
+          border-bottom: 0.093vh solid fade(@darkgray, 40%);
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
-          font-size: @fontsize;
+          font-size: @fontsize-s;
         }
 
         .panel-item-gf-down {
@@ -482,7 +495,7 @@ export default {
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
           font-weight: 600;
-          font-size: @fontsize-l;
+          font-size: @fontsize-s;
         }
       }
     }
@@ -491,7 +504,7 @@ export default {
       width: 100%;
       height: @panelHeight;
       display: flex;
-      font-size: @fontsize;
+      font-size: @fontsize-s;
 
       .panel-item-left {
         width: @panelHeight;
@@ -504,6 +517,7 @@ export default {
           padding: 0 1.111vh;
           display: flex;
           align-items: center;
+          font-size: @fontsize-s;
 
           .svg-icon {
             margin-left: auto;
@@ -521,7 +535,7 @@ export default {
           padding: 0 1.111vh;
 
           &:first-child {
-            border-bottom: 1px solid;
+            border-bottom: 0.093vh solid;
           }
 
           span {
@@ -571,18 +585,18 @@ export default {
         }
       }
 
-      &.purple {
-        background-color: fade(@purple, 20%);
-        color: @purple;
+      &.pink {
+        background-color: fade(@pink, 20%);
+        color: @pink;
 
         .panel-item-left {
-          background-color: fade(@purple, 20%);
+          background-color: fade(@pink, 20%);
         }
 
         .panel-item-right {
           .panel-item-ri {
             &:first-child {
-              border-color: @purple;
+              border-color: @pink;
             }
           }
         }
@@ -623,17 +637,17 @@ export default {
       }
 
       &.gray {
-        background-color: fade(@gray, 20%);
+        background-color: fade(@darkgray, 20%);
         color: @gray;
 
         .panel-item-left {
-          background-color: fade(@gray, 20%);
+          background-color: fade(@darkgray, 20%);
         }
 
         .panel-item-right {
           .panel-item-ri {
             &:first-child {
-              border-color: @gray;
+              border-color: @darkgray;
             }
           }
         }
@@ -667,7 +681,7 @@ export default {
       width: 100%;
       height: @titleHeight;
       line-height: @titleHeight;
-      background-color: fade(@gray, 40%);
+      background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
         font-size: @fontsize-s;
@@ -682,13 +696,13 @@ export default {
         .sub-title-item {
           .sub-title {
             color: @gray;
-            font-size: 1.019vh;
+            font-size: @fontsize-s;
             margin: 0 0.556vh 0 1.481vh;
           }
 
           .sub-count {
-            font-size: @fontsize;
-            font-family: 'Bicubik';
+            font-size: @fontsize-s;
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -703,8 +717,8 @@ export default {
               color: @blue;
             }
 
-            &.purple {
-              color: @purple;
+            &.pink {
+              color: @pink;
             }
 
             &.red {
@@ -724,7 +738,7 @@ export default {
     }
 
     .panel-body {
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
       margin-bottom: 1.481vh;
 
@@ -732,7 +746,7 @@ export default {
         width: 100%;
 
         .card {
-          border: 1px solid;
+          border: 0.093vh solid;
 
           .card-panel {
             display: flex;
@@ -740,7 +754,7 @@ export default {
 
             .card-left {
               width: 40%;
-              border-right: 1px dotted;
+              border-right: 0.093vh dotted;
               display: flex;
               flex-direction: column;
 
@@ -758,7 +772,7 @@ export default {
                 justify-content: center;
 
                 i {
-                  font-size: 1.667vh;
+                  font-size: 14px;
                 }
               }
             }
@@ -768,7 +782,7 @@ export default {
 
               .num {
                 width: 100%;
-                font-size: 1.019vh;
+                font-size: 14px;
                 text-align: left;
                 padding-right: 0.278vh;
 
@@ -783,7 +797,7 @@ export default {
             height: 0.926vh;
             padding: 0.093vh 0.185vh;
             position: relative;
-            border-top: 1px solid;
+            border-top: 0.093vh solid;
             background-color: transparent;
 
             .percent {
@@ -828,16 +842,16 @@ export default {
             }
           }
 
-          &.purple {
-            border-color: @purple;
-            background-color: fade(@purple, 30%);
+          &.pink {
+            border-color: @pink;
+            background-color: fade(@pink, 30%);
 
             .card-panel {
               .card-left {
-                border-color: @purple;
+                border-color: @pink;
 
                 .tag {
-                  background-color: @purple;
+                  background-color: @pink;
                 }
 
                 .icon {
@@ -851,13 +865,13 @@ export default {
 
               .card-right {
                 .num {
-                  color: @purple;
+                  color: @pink;
                 }
               }
             }
 
             .card-percent {
-              border-color: @purple;
+              border-color: @pink;
             }
           }
 
@@ -924,15 +938,15 @@ export default {
           }
 
           &.gray {
-            border-color: @gray;
-            background-color: fade(@gray, 30%);
+            border-color: @darkgray;
+            background-color: fade(@darkgray, 30%);
 
             .card-panel {
               .card-left {
-                border-color: @gray;
+                border-color: @darkgray;
 
                 .tag {
-                  background-color: @gray;
+                  background-color: @darkgray;
                 }
 
                 .icon {
@@ -950,7 +964,7 @@ export default {
             }
 
             .card-percent {
-              border-color: @gray;
+              border-color: @darkgray;
             }
           }
 
@@ -996,7 +1010,7 @@ export default {
                 border-color: @black;
 
                 .tag {
-                  background-color: @gray;
+                  background-color: @darkgray;
                 }
 
                 .icon {

src/views/LightMatrix1/LightMatrix1.vue

@@ -352,38 +352,34 @@ export default {
 
   .panel {
     width: 100%;
-    border: 1px solid @gray;
+    border: 0.093vh solid @darkgray;
     position: relative;
     padding: 1.111vh 2.222vh;
-    background-color: fade(@gray, 20%);
+    background-color: fade(@darkgray, 20%);
     display: flex;
     height: 6.944vh;
 
-    .item {
-      cursor: pointer;
-    }
-
     .dot {
-      width: 2px;
-      height: 2px;
+      width: 0.185vh;
+      height: 0.185vh;
       border-radius: 50%;
       background-color: @write;
       position: absolute;
 
       &.left {
-        left: 4px;
+        left: 0.37vh;
       }
 
       &.right {
-        right: 4px;
+        right: 0.37vh;
       }
 
       &.top {
-        top: 4px;
+        top: 0.37vh;
       }
 
       &.bottom {
-        bottom: 4px;
+        bottom: 0.37vh;
       }
     }
 
@@ -401,8 +397,8 @@ export default {
         width: 4.444vh;
         height: 4.444vh;
         border-radius: 50%;
-        border: 1px solid @gray;
-        background-color: fade(@gray, 20);
+        border: 0.093vh solid @darkgray;
+        background-color: fade(@darkgray, 20);
         left: calc(50% - 2.222vh);
         top: calc(50% - 2.222vh);
       }
@@ -419,8 +415,8 @@ export default {
         color: @darkBlue;
       }
 
-      &.purple {
-        color: @purple;
+      &.pink {
+        color: @pink;
       }
 
       &.red {
@@ -439,11 +435,11 @@ export default {
         line-height: 2.222vh;
 
         &:first-child {
-          font-size: @fontsize;
+          font-size: @fontsize-s;
         }
         &:last-child {
-          font-size: @fontsize-l;
-          font-family: 'Bicubik';
+          font-size: @fontsize;
+          font-family: "Bicubik";
         }
       }
     }
@@ -473,7 +469,7 @@ export default {
         position: relative;
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -500,7 +496,7 @@ export default {
       width: 100%;
       height: @titleHeight;
       line-height: @titleHeight;
-      background-color: fade(@gray, 40%);
+      background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
         font-size: @fontsize-s;
@@ -515,13 +511,13 @@ export default {
         .sub-title-item {
           .sub-title {
             color: @gray;
-            font-size: 1.019vh;
+            font-size: @fontsize-s;
             margin: 0 0.556vh 0 1.481vh;
           }
 
           .sub-count {
-            font-size: 1.296vh;
-            font-family: 'Bicubik';
+            font-size: @fontsize-s;
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -536,8 +532,8 @@ export default {
               color: @blue;
             }
 
-            &.purple {
-              color: @purple;
+            &.pink {
+              color: @pink;
             }
 
             &.red {
@@ -558,7 +554,7 @@ export default {
 
     .panel-body {
       height: calc(100% - 7.407vh);
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
       overflow: auto;
       margin-bottom: 1.481vh;
@@ -567,11 +563,11 @@ export default {
         width: 100%;
 
         .card {
-          border-radius: 4px;
+          border-radius: 0.37vh;
           padding: 0.185vh 0;
           text-align: center;
-          border: 1px solid;
-          font-size: @fontsize-s;
+          border: 0.093vh solid;
+          font-size: 14px;
 
           &.write {
             color: @black;
@@ -589,9 +585,9 @@ export default {
             border-color: @darkBlue;
           }
 
-          &.purple {
-            color: @purple;
-            border-color: @purple;
+          &.pink {
+            color: @pink;
+            border-color: @pink;
           }
 
           &.red {
@@ -607,8 +603,8 @@ export default {
 
           &.gray {
             color: @write;
-            border-color: @gray;
-            background-color: @gray;
+            border-color: @darkgray;
+            background-color: @darkgray;
           }
         }
       }

src/views/LightMatrix2/LightMatrix2.vue

@@ -113,7 +113,7 @@ export default {
             num: 256,
           },
           {
-            color: "purple",
+            color: "pink",
             test: "· 限电",
             num: 256,
           },
@@ -195,7 +195,7 @@ export default {
             {
               text: "限电台数",
               num: 256,
-              color: "purple",
+              color: "pink",
             },
             {
               text: "故障台数",
@@ -300,7 +300,7 @@ export default {
         tempData[i].color = "green";
       }
       if (i == 40) {
-        tempData[i].color = "purple";
+        tempData[i].color = "pink";
       }
       if (i == 41) {
         tempData[i].color = "orange";
@@ -354,34 +354,34 @@ export default {
 
   .panel {
     width: 100%;
-    border: 1px solid @gray;
+    border: 0.093vh solid @darkgray;
     position: relative;
     padding: 1.111vh 2.222vh;
-    background-color: fade(@gray, 20%);
+    background-color: fade(@darkgray, 20%);
     display: flex;
     height: 6.944vh;
 
     .dot {
-      width: 2px;
-      height: 2px;
+      width: 0.185vh;
+      height: 0.185vh;
       border-radius: 50%;
       background-color: @write;
       position: absolute;
 
       &.left {
-        left: 4px;
+        left: 0.37vh;
       }
 
       &.right {
-        right: 4px;
+        right: 0.37vh;
       }
 
       &.top {
-        top: 4px;
+        top: 0.37vh;
       }
 
       &.bottom {
-        bottom: 4px;
+        bottom: 0.37vh;
       }
     }
 
@@ -410,8 +410,8 @@ export default {
         color: @darkBlue;
       }
 
-      &.purple {
-        color: @purple;
+      &.pink {
+        color: @pink;
       }
 
       &.red {
@@ -430,11 +430,11 @@ export default {
         line-height: 2.222vh;
 
         &:first-child {
-          font-size: @fontsize;
+          font-size: @fontsize-s;
         }
 
         &:last-child {
-          font-size: @fontsize-l;
+          font-size: @fontsize;
           font-family: "Bicubik";
         }
       }
@@ -492,10 +492,10 @@ export default {
       width: 100%;
       height: @titleHeight;
       line-height: @titleHeight;
-      background-color: fade(@gray, 40%);
+      background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: 1.111vh;
+        font-size: @fontsize-s;
         color: @green;
         display: flex;
         align-items: center;
@@ -507,12 +507,12 @@ export default {
         .sub-title-item {
           .sub-title {
             color: @gray;
-            font-size: 1.019vh;
+            font-size: @fontsize-s;
             margin: 0 0.556vh 0 1.481vh;
           }
 
           .sub-count {
-            font-size: 1.296vh;
+            font-size: @fontsize-s;
             font-family: "Bicubik";
             font-weight: 500;
 
@@ -528,8 +528,8 @@ export default {
               color: @blue;
             }
 
-            &.purple {
-              color: @purple;
+            &.pink {
+              color: @pink;
             }
 
             &.red {
@@ -550,7 +550,7 @@ export default {
 
     .panel-body {
       height: calc(100% - 7.407vh);
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
       overflow: auto;
       margin-bottom: 1.481vh;
@@ -559,7 +559,7 @@ export default {
         width: 100%;
 
         .card {
-          border: 1px solid;
+          border: 0.093vh solid;
 
           .card-panel {
             display: flex;
@@ -567,11 +567,11 @@ export default {
 
             .card-left {
               width: 40%;
-              border-right: 1px dotted;
+              border-right: 0.093vh dotted;
 
               .tag {
                 color: @write;
-                font-size: 1.111vh;
+                font-size: 14px;
                 width: 100%;
                 text-align: center;
               }
@@ -582,7 +582,7 @@ export default {
 
               .num {
                 width: 100%;
-                font-size: 1.019vh;
+                font-size: 13px;
                 text-align: right;
                 padding-right: 0.278vh;
               }
@@ -593,13 +593,13 @@ export default {
             height: 0.926vh;
             padding: 0.093vh 0.185vh;
             position: relative;
-            border-top: 1px solid;
+            border-top: 0.093vh solid;
             background-color: transparent;
             display: flex;
 
             .split-item {
               flex: 1;
-              border-right: 1px solid @black;
+              border-right: 0.093vh solid @black;
               z-index: 1;
 
               &:last-child {
@@ -637,24 +637,24 @@ export default {
             }
           }
 
-          &.purple {
-            border-color: @purple;
-            background-color: fade(@purple, 30%);
+          &.pink {
+            border-color: @pink;
+            background-color: fade(@pink, 30%);
 
             .card-panel {
               .card-left {
-                border-color: @purple;
+                border-color: @pink;
               }
 
               .card-right {
                 .num {
-                  color: @purple;
+                  color: @pink;
                 }
               }
             }
 
             .card-percent {
-              border-color: @purple;
+              border-color: @pink;
             }
           }
 
@@ -701,12 +701,12 @@ export default {
           }
 
           &.gray {
-            border-color: @gray;
-            background-color: fade(@gray, 30%);
+            border-color: @darkgray;
+            background-color: fade(@darkgray, 30%);
 
             .card-panel {
               .card-left {
-                border-color: @gray;
+                border-color: @darkgray;
               }
 
               .card-right {
@@ -717,7 +717,7 @@ export default {
             }
 
             .card-percent {
-              border-color: @gray;
+              border-color: @darkgray;
             }
           }
 

src/views/LightMatrix3/LightMatrix3.vue

@@ -120,7 +120,7 @@ export default {
       mapping: {
         green: "svg-standby",
         blue: "svg-normal-power",
-        purple: "svg-limit-power",
+        pink: "svg-limit-power",
         red: "svg-gz-downtime",
         orange: "svg-jx-downtime",
         gray: "svg-offline",
@@ -156,7 +156,7 @@ export default {
             num2: 30,
           },
           {
-            color: "purple",
+            color: "pink",
             name: "限电",
             nameIcon: "svg-limit-power",
             num: 50,
@@ -234,7 +234,7 @@ export default {
             {
               text: "限电台数",
               num: 256,
-              color: "purple",
+              color: "pink",
             },
             {
               text: "故障台数",
@@ -339,7 +339,7 @@ export default {
         tempData[i].color = "green";
       }
       if (i == 40) {
-        tempData[i].color = "purple";
+        tempData[i].color = "pink";
       }
       if (i == 41) {
         tempData[i].color = "orange";
@@ -387,45 +387,45 @@ export default {
 
   .panel {
     width: 100%;
-    border: 1px solid @gray;
+    border: 0.093vh solid @darkgray;
     position: relative;
     padding: 1.111vh 2.222vh;
-    background-color: fade(@gray, 20%);
+    background-color: fade(@darkgray, 20%);
 
     .dot {
-      width: 2px;
-      height: 2px;
+      width: 0.185vh;
+      height: 0.185vh;
       border-radius: 50%;
       background-color: @write;
       position: absolute;
 
       &.left {
-        left: 4px;
+        left: 0.37vh;
       }
 
       &.right {
-        right: 4px;
+        right: 0.37vh;
       }
 
       &.top {
-        top: 4px;
+        top: 0.37vh;
       }
 
       &.bottom {
-        bottom: 4px;
+        bottom: 0.37vh;
       }
     }
 
     .panel-item-gf {
       width: 100%;
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       display: flex;
       height: @panelHeight;
 
       .panel-item-gf-left {
         width: @panelHeight;
         height: @panelHeight;
-        background-color: fade(@gray, 40%);
+        background-color: fade(@darkgray, 40%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -443,7 +443,7 @@ export default {
 
         .panel-item-gf-up {
           height: @panelHeight / 2;
-          border-bottom: 1px solid fade(@gray, 40%);
+          border-bottom: 0.093vh solid fade(@darkgray, 40%);
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
           font-size: @fontsize;
@@ -454,7 +454,7 @@ export default {
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
           font-weight: 600;
-          font-size: @fontsize-l;
+          font-size: @fontsize;
         }
       }
     }
@@ -463,7 +463,7 @@ export default {
       width: 100%;
       height: @panelHeight;
       display: flex;
-      font-size: @fontsize;
+      font-size: @fontsize-s;
 
       .panel-item-left {
         width: @panelHeight;
@@ -476,6 +476,7 @@ export default {
           padding: 0 1.111vh;
           display: flex;
           align-items: center;
+          font-size: @fontsize-s;
 
           .svg-icon {
             margin-left: auto;
@@ -543,18 +544,18 @@ export default {
         }
       }
 
-      &.purple {
-        background-color: fade(@purple, 20%);
-        color: @purple;
+      &.pink {
+        background-color: fade(@pink, 20%);
+        color: @pink;
 
         .panel-item-left {
-          background-color: fade(@purple, 20%);
+          background-color: fade(@pink, 20%);
         }
 
         .panel-item-right {
           .panel-item-ri {
             &:first-child {
-              border-color: @purple;
+              border-color: @pink;
             }
           }
         }
@@ -595,17 +596,17 @@ export default {
       }
 
       &.gray {
-        background-color: fade(@gray, 20%);
+        background-color: fade(@darkgray, 20%);
         color: @gray;
 
         .panel-item-left {
-          background-color: fade(@gray, 20%);
+          background-color: fade(@darkgray, 20%);
         }
 
         .panel-item-right {
           .panel-item-ri {
             &:first-child {
-              border-color: @gray;
+              border-color: @darkgray;
             }
           }
         }
@@ -639,10 +640,10 @@ export default {
       width: 100%;
       height: @titleHeight;
       line-height: @titleHeight;
-      background-color: fade(@gray, 40%);
+      background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: 1.111vh;
+        font-size: @fontsize-s;
         color: @green;
         display: flex;
         align-items: center;
@@ -654,12 +655,12 @@ export default {
         .sub-title-item {
           .sub-title {
             color: @gray;
-            font-size: 1.019vh;
+            font-size: @fontsize-s;
             margin: 0 0.556vh 0 1.481vh;
           }
 
           .sub-count {
-            font-size: 1.296vh;
+            font-size: @fontsize-s;
             font-family: "Bicubik";
             font-weight: 500;
 
@@ -675,8 +676,8 @@ export default {
               color: @blue;
             }
 
-            &.purple {
-              color: @purple;
+            &.pink {
+              color: @pink;
             }
 
             &.red {
@@ -696,7 +697,7 @@ export default {
     }
 
     .panel-body {
-      background-color: fade(@gray, 20%);
+      background-color: fade(@darkgray, 20%);
       padding: 0.741vh;
       margin-bottom: 1.481vh;
 
@@ -704,7 +705,7 @@ export default {
         width: 100%;
 
         .card {
-          border: 1px solid;
+          border: 0.093vh solid;
           position: relative;
 
           .center-icon {
@@ -720,20 +721,20 @@ export default {
 
             .card-left {
               width: 50%;
-              border-right: 1px solid;
+              border-right: 0.093vh solid;
 
               .tag {
                 color: @write;
-                font-size: 1.111vh;
+                font-size: 14px;
                 width: 100%;
                 text-align: center;
-                border-bottom: 1px solid;
+                border-bottom: 0.093vh solid;
                 padding: 0.37vh 0;
               }
 
               .num {
                 width: 100%;
-                font-size: 1.019vh;
+                font-size: 14px;
                 text-align: left;
                 padding-right: 0.278vh;
                 padding: 0.37vh 0;
@@ -749,13 +750,13 @@ export default {
 
               .num {
                 width: 100%;
-                font-size: 1.019vh;
+                font-size: 14px;
                 text-align: left;
                 padding-right: 0.278vh;
                 padding: 0.37vh 0;
 
                 &:first-child {
-                  border-bottom: 1px solid;
+                  border-bottom: 0.093vh solid;
                 }
 
                 i {
@@ -769,7 +770,7 @@ export default {
             height: 0.926vh;
             padding: 0.093vh 0.185vh;
             position: relative;
-            border-top: 1px solid;
+            border-top: 0.093vh solid;
             background-color: transparent;
 
             .percent {
@@ -815,9 +816,9 @@ export default {
             }
           }
 
-          &.purple {
-            border-color: @purple;
-            background-color: fade(@purple, 30%);
+          &.pink {
+            border-color: @pink;
+            background-color: fade(@pink, 30%);
 
             .center-icon {
               color: @write;
@@ -825,27 +826,27 @@ export default {
 
             .card-panel {
               .card-left {
-                border-color: @purple;
+                border-color: @pink;
 
                 .tag {
-                  border-color: @purple;
+                  border-color: @pink;
                 }
 
                 .num {
-                  color: @purple;
+                  color: @pink;
                 }
               }
 
               .card-right {
                 .num {
-                  color: @purple;
-                  border-color: @purple;
+                  color: @pink;
+                  border-color: @pink;
                 }
               }
             }
 
             .card-percent {
-              border-color: @purple;
+              border-color: @pink;
             }
           }
 
@@ -918,8 +919,8 @@ export default {
           }
 
           &.gray {
-            border-color: @gray;
-            background-color: fade(@gray, 30%);
+            border-color: @darkgray;
+            background-color: fade(@darkgray, 30%);
 
             .center-icon {
               color: @write;
@@ -927,10 +928,10 @@ export default {
 
             .card-panel {
               .card-left {
-                border-color: @gray;
+                border-color: @darkgray;
 
                 .tag {
-                  border-color: @gray;
+                  border-color: @darkgray;
                 }
 
                 .num {
@@ -941,13 +942,13 @@ export default {
               .card-right {
                 .num {
                   color: @gray;
-                  border-color: @gray;
+                  border-color: @darkgray;
                 }
               }
             }
 
             .card-percent {
-              border-color: @gray;
+              border-color: @darkgray;
             }
           }
 

src/views/Status/Status.vue

@@ -45,36 +45,191 @@ export default {
             ],
           },
           items: [
-            { f1: "AGC宋六:", f2: "设定", f3: "66", f4: "出线", f5: "11", is_light: true },
-            { f1: "升压站:", f2: "出线Uab/La", f3: "23/3 23/3", f4: "电压", f5: "103 103", is_light: false },
-            { f1: "风功:", f2: "未来15分钟", f3: "103", f4: "", f5: "", is_light: false },
-            { f1: "测风塔:", f2: "风速", f3: "103KM", f4: "风向", f5: "103 62", is_light: false },
-            { f1: "电能量表:", f2: "", f3: "103 62", f4: "", f5: "", is_light: false },
+            {
+              f1: "AGC宋六:",
+              f2: "设定",
+              f3: "66",
+              f4: "出线",
+              f5: "11",
+              is_light: true,
+            },
+            {
+              f1: "升压站:",
+              f2: "出线Uab/La",
+              f3: "23/3 23/3",
+              f4: "电压",
+              f5: "103 103",
+              is_light: false,
+            },
+            {
+              f1: "风功:",
+              f2: "未来15分钟",
+              f3: "103",
+              f4: "",
+              f5: "",
+              is_light: false,
+            },
+            {
+              f1: "测风塔:",
+              f2: "风速",
+              f3: "103KM",
+              f4: "风向",
+              f5: "103 62",
+              is_light: false,
+            },
+            {
+              f1: "电能量表:",
+              f2: "",
+              f3: "103 62",
+              f4: "",
+              f5: "",
+              is_light: false,
+            },
           ],
         },
       ],
       tableData: {
         column: [
-          { name: "场站名称", field: "name", unit: "", is_num: false, is_light: false },
-          { name: "调度名称", field: "ddname", unit: "", is_num: false, is_light: false },
-          { name: "装机容量", field: "zjrl", unit: "MW", is_num: true, is_light: false },
-          { name: "发电量", field: "fdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "上网电量", field: "swdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "利用小时", field: "lyxs", unit: "", is_num: true, is_light: false },
-          { name: "风速m/s", field: "fs", unit: "日照强度w/m2", is_num: true, is_light: false },
-          { name: "功率", field: "gl", unit: "MW", is_num: true, is_light: true },
-          { name: "出线功率", field: "cxgl", unit: "MW", is_num: true, is_light: false },
-          { name: "理论功率", field: "llgl", unit: "MW", is_num: true, is_light: false },
-          { name: "保证功率", field: "bzgl", unit: "MW", is_num: true, is_light: false },
-          { name: "预测功率", field: "ycgl", unit: "MW", is_num: true, is_light: false },
-          { name: "AGC指令", field: "agc", unit: "MW", is_num: true, is_light: false },
-          { name: "理论发电量", field: "llfdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "SCADA发电量", field: "scada", unit: "万kwh", is_num: true, is_light: false },
-          { name: "维修损失电量", field: "wxssdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "故障损失电量", field: "gzssdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "受理损失电量", field: "slssdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "限电损失电量", field: "xdssdl", unit: "万kwh", is_num: true, is_light: false },
-          { name: "性能损失电量", field: "xnssdl", unit: "万kwh", is_num: true, is_light: false },
+          {
+            name: "场站名称",
+            field: "name",
+            unit: "",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "调度名称",
+            field: "ddname",
+            unit: "",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "装机容量",
+            field: "zjrl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "发电量",
+            field: "fdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "上网电量",
+            field: "swdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "利用小时",
+            field: "lyxs",
+            unit: "",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "风速m/s",
+            field: "fs",
+            unit: "日照强度w/m2",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "功率",
+            field: "gl",
+            unit: "MW",
+            is_num: true,
+            is_light: true,
+          },
+          {
+            name: "出线功率",
+            field: "cxgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "理论功率",
+            field: "llgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "保证功率",
+            field: "bzgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "预测功率",
+            field: "ycgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "AGC指令",
+            field: "agc",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "llfdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "SCADA发电量",
+            field: "scada",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "维修损失电量",
+            field: "wxssdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "故障损失电量",
+            field: "gzssdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "受理损失电量",
+            field: "slssdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "限电损失电量",
+            field: "xdssdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "性能损失电量",
+            field: "xnssdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
         ],
         data: [
           {
@@ -494,6 +649,8 @@ export default {
   width: 100%;
   height: calc(100vh - 7.222vh);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 
   .panel-box {
     width: 100%;
@@ -513,15 +670,17 @@ export default {
   }
 
   .table-box {
-    border: 1px solid @gray;
+    border: 0.093vh solid @darkgray;
     position: relative;
+    overflow: auto;
+    flex-grow: 1;
 
     &::after,
     &::before {
       content: "";
       position: absolute;
-      width: 2px;
-      height: 2px;
+      width: 0.185vh;
+      height: 0.185vh;
       background-color: @write;
       top: 0.37vh;
     }

src/views/Status/components/status-panel.vue

@@ -111,7 +111,7 @@
             z-index: 1;
             left: 0;
             top: 0;
-            background-color: fade(@gray, 50%);
+            background-color: fade(@darkgray, 50%);
             color: fade(@write, 60%);
             font-size: 5.556vh;
             font-weight: 600;
@@ -119,7 +119,7 @@
             align-items: center;
             justify-content: center;
             opacity: 0.9;
-            backdrop-filter: blur(4px);
+            backdrop-filter: blur(0.370vh);
         }
 
         .status-com-panel {
@@ -135,7 +135,7 @@
 
                 .category-box {
                     width: 100%;
-                    background-color: fade(@gray, 30%);
+                    background-color: fade(@darkgray, 30%);
                     display: flex;
                     margin-bottom: 0.37vh;
 
@@ -150,9 +150,9 @@
                             align-items: center;
                             justify-content: center;
                             color: @green;
-                            border: 1px solid @green;
+                            border: 0.093vh solid @green;
                             background-color: fade(@green, 20%);
-                            font-size: @fontsize-l;
+                            font-size: @fontsize;
                         }
                     }
 
@@ -191,7 +191,7 @@
                         flex: 1;
                         display: flex;
                         flex-direction: row;
-                        background-color: fade(@gray, 20%);
+                        background-color: fade(@darkgray, 20%);
                         margin-top: 0.278vh;
 
                         div {
@@ -242,7 +242,7 @@
 
 
                         &.light {
-                            background-color: fade(@gray, 50%);
+                            background-color: fade(@darkgray, 50%);
                             position: relative;
                             
                             &::after {

src/views/WindSite/WindSite.vue

@@ -58,12 +58,12 @@ export default {
           path: "/windsite/box",
         },
         {
-          icon: "svg-easy-compass",
-          path: "/windsite/home",
+          icon: "svg-matrix",
+          path: "/windsite/info",
         },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/home",
+          path: "/windsite/tower",
         },
       ],
     };
@@ -101,12 +101,12 @@ export default {
   .page-common-body {
     display: flex;
     flex-direction: row;
-    margin-top: 8px;
+    margin-top: 0.741vh;
 
     .page-common-body-router {
       overflow: auto;
       height: calc(100vh - 7.037vh);
-      flex: 1 0 auto;
+      flex: 1 1 auto;
     }
 
     .page-common-body-menu {
@@ -114,40 +114,40 @@ export default {
       padding: 0 1.481vh 1.481vh 1.481vh;
 
       .page-common-body-menu-box {
-        border: 1px solid @gray;
-        background-color: fade(@gray, 30%);
-        padding: 24px 2px;
+        border: 0.093vh solid @darkgray;
+        background-color: fade(@darkgray, 30%);
+        padding: 2.222vh 0.185vh;
         position: relative;
 
         .page-common-body-menu-border {
           position: absolute;
-          width: 4px;
-          height: 4px;
+          width: 0.370vh;
+          height: 0.370vh;
           background-color: @write;
           border-radius: 50%;
 
           &.left {
-            left: -2px;
+            left: -0.185vh;
           }
 
           &.right {
-            right: -2px;
+            right: -0.185vh;
           }
 
           &.top {
-            top: -2px;
+            top: -0.185vh;
           }
 
           &.bottom {
-            bottom: -2px;
+            bottom: -0.185vh;
           }
         }
 
         .page-common-body-menu-item {
-          border: 1px solid fade(@green, 40%);
+          border: 0.093vh solid fade(@green, 40%);
           width: 3.889vh;
           height: 3.889vh;
-          border-radius: 3px;
+          border-radius: 0.278vh;
           margin-top: 0.741vh;
           display: flex;
           align-items: center;
@@ -168,13 +168,13 @@ export default {
 
             &::after {
               content: "";
-              width: calc(100% - 4px);
-              height: calc(100% - 4px);
+              width: calc(100% - 0.370vh);
+              height: calc(100% - 0.370vh);
               position: absolute;
-              border: 1px solid @yellow;
-              box-shadow: 0 0 4px @yellow;
-              top: 1px;
-              left: 1px;
+              border: 0.093vh solid @yellow;
+              box-shadow: 0 0 0.370vh @yellow;
+              top: 0.093vh;
+              left: 0.093vh;
             }
           }
         }

src/views/WindSite/pages/DraughtFanList.vue

@@ -228,7 +228,7 @@
         }
         
         .df-table {
-            border: 1px solid fade(@gray, 50%);
+            border: 0.093vh solid fade(@darkgray, 50%);
             position: relative;
             overflow: auto;
             flex-grow: 1;

src/views/WindSite/pages/Home/Home.vue

@@ -238,7 +238,9 @@
         </panel>
       </Col>
       <Col :span="6">
-        <panel></panel>
+        <panel>
+          <light-matrix />
+        </panel>
       </Col>
     </row>
     <row>
@@ -287,12 +289,13 @@ import Row from "../../../../components/coms/grid/row.vue";
 import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
 import Panel from "../../../../components/coms/panel/panel.vue";
 import Panel3 from "../../../../components/coms/panel/panel3.vue";
+import LightMatrix from "./light-matrix.vue";
 import WindSiteWeather from "./wind-site-weather.vue";
 export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart },
+  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
   // 数据
   data() {
     return {
@@ -584,8 +587,8 @@ export default {
 <style lang="less" scoped>
 .wind-site-home {
   .wind-site-info {
-    margin-left: 1.481vh;
-    flex: 1 1 auto;
+    margin-left: 0.7407vh;
+    flex: 1 0 auto;
 
     & > .row {
       height: 100%;
@@ -593,22 +596,22 @@ export default {
 
     .info-item {
       text-align: center;
-      padding: 0 4px;
+      padding: 0 0.37vh;
       flex: 1;
 
       .value {
-        font-size: @fontsize;
+        font-size: @fontsize-s;
         margin-bottom: 1.111vh;
       }
       .text {
-        font-size: @fontsize-s;
+        font-size: 12px;
         color: @gray;
       }
     }
   }
 
   .wind-running-info {
-    margin-left: 1.481vh;
+    margin-left: 0.7407vh;
     padding: 0.741vh;
     flex: 1 1 auto;
 
@@ -621,8 +624,8 @@ export default {
       flex: 0 0 auto;
 
       .fengji-icon {
-        padding: 12px;
-        border: 1px solid #05bb4c;
+        padding: 1.111vh;
+        border: 0.093vh solid #05bb4c;
         border-radius: 50%;
         border-right-color: transparent;
         border-top-color: transparent;
@@ -651,7 +654,7 @@ export default {
 
     .situation {
       flex: 1 1 auto;
-      margin-left: 16px;
+      margin-left: 1.481vh;
 
       .row + .row {
         margin: 0;
@@ -659,23 +662,23 @@ export default {
 
       .status {
         flex: 1;
-        width: 86px;
+        width: 7.963vh;
         display: flex;
         align-items: center;
-        padding: 4px 0;
+        padding: 0.37vh 0;
         svg {
           width: 1.111vh;
           height: 1.111vh;
-          margin-right: 4px;
+          margin-right: 0.37vh;
         }
         .text {
-          font-size: @fontsize-s;
+          font-size: 12px;
           flex: auto;
         }
 
         .value {
-          font-size: @fontsize-s;
-          padding-right: 8px;
+          font-size: 12px;
+          padding-right: 0.741vh;
         }
       }
     }

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

@@ -0,0 +1,386 @@
+<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>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+export default {
+  // 名称
+  name: "LightMatrix1",
+  // 使用组件
+  components: {},
+  // 数据
+  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",
+            },
+          ],
+        ],
+      },
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less">
+@panelHeight: 6.481vh;
+@titleHeight: 3.704vh;
+
+.light-matrix-small {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  background: fade(@gray, 20);
+
+  .card {
+    border-radius: 0.37vh;
+    padding: 0.185vh 0;
+    text-align: center;
+    border: 0.093vh solid;
+    font-size: 14px;
+
+    &.write {
+      color: @black;
+      border-color: @write;
+      background-color: @write;
+    }
+
+    &.green {
+      color: @green;
+      border-color: @green;
+    }
+
+    &.blue {
+      color: @darkBlue;
+      border-color: @darkBlue;
+    }
+
+    &.pink {
+      color: @pink;
+      border-color: @pink;
+    }
+
+    &.red {
+      color: @write;
+      border-color: @red;
+      background-color: @red;
+    }
+
+    &.orange {
+      color: @orange;
+      border-color: @orange;
+    }
+
+    &.gray {
+      color: @gray;
+      border-color: @gray;
+      background-color: transparent;
+    }
+  }
+}
+</style>

src/views/WindSite/pages/Home/wind-site-weather.vue

@@ -88,7 +88,7 @@ export default {
   background: rgba(255, 255, 255, 0.1);
   padding: 0.741vh 1.481vh;
   display: inline-block;
-  border: 1px solid #536268;
+  border: 0.093vh solid #536268;
   .title {
     font-size: @fontsize;
     color: @gray;
@@ -123,7 +123,7 @@ export default {
           margin-right: 1.481vh;
           div {
             text-align: right;
-            margin: 8px 0;
+            margin: 0.741vh 0;
           }
 
           span {

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

@@ -0,0 +1,441 @@
+<template>
+  <div class="wind-site-base-info">
+    <!-- 电机基本信息 -->
+    <el-row class="mg-b-16">
+      <div class="wind-site-name green mg-r-8">
+        <span class="svg-icon svg-icon-green mg-r-8">
+          <svg-icon class="" :svgid="'svg-normal-power'" />
+        </span>
+        MA B401
+      </div>
+      <div class="wind-site-tag">
+        <div class="tag-text">所属线路</div>
+        <div class="tag-value">某某某1线</div>
+      </div>
+      <div class="wind-site-tag">
+        <div class="tag-text">机型</div>
+        <div class="tag-value">GW1000</div>
+      </div>
+      <div class="wind-site-tag">
+        <div class="tag-text">告警时间</div>
+        <div class="tag-value">2021年5月10日 12:23:31</div>
+      </div>
+      <div class="wind-site-tag">
+        <div class="tag-text">告警内容</div>
+        <div class="tag-value">通讯中断</div>
+      </div>
+    </el-row>
+    <!-- 发电信息 -->
+    <el-row class="mg-b-16">
+      <el-col :span="14">
+        <el-row class="generation background pd-8 mg-r-8">
+          <div class="mg-r-8">
+            <div class="generation-text">日发电量</div>
+            <div class="generation-value green">1,495<span class="unit">kwh</span></div>
+          </div>
+          <el-row class="wind-site-state">
+            <el-col :span="6">
+              <div class="value">123</div>
+              <div class="text">月可利用率</div>
+            </el-col>
+            <el-col :span="6">
+              <div class="value">123</div>
+              <div class="text">月故障小时数</div>
+            </el-col>
+            <el-col :span="6">
+              <div class="value">123</div>
+              <div class="text">月等效小时数</div>
+            </el-col>
+            <el-col :span="6">
+              <div class="value">123</div>
+              <div class="text">月发电小时数</div>
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-col>
+      <el-col :span="10" class="background">
+        <el-row type="flex" justify="center" :align="'middle'" class="power-load">
+          <!-- 功率复核 PowerLoad -->
+          <el-col v-for="item in PowerLoad" :key="item" :span="6">
+            <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <!-- 基本信息 -->
+    <el-row>
+      <el-col :span="12" class="pd-r-16">
+        <!-- 基本信息 -->
+        <div class="info-panel base-info">
+          <div class="panel-title gary-l">
+            <div class="svg-icon svg-icon-gray-l mg-r-16">
+              <svg-icon :svgid="'svg-normal-power'" />
+            </div>
+            <div class="title">基本信息</div>
+          </div>
+          <div class="panel-body">
+            <table class="table-form">
+              <tr>
+                <td class="text gray">有功功率</td>
+                <td class="value green">1557</td>
+                <td class="unit gray">KW</td>
+                <td class="text gray">风速</td>
+                <td class="value green">12.57</td>
+                <td class="unit gray">m/s</td>
+              </tr>
+              <tr>
+                <td class="text gray">有功功率</td>
+                <td class="value green">1557</td>
+                <td class="unit gray">KW</td>
+                <td class="text gray">风速</td>
+                <td class="value green">12.57</td>
+                <td class="unit gray">m/s</td>
+              </tr>
+              <tr>
+                <td class="text gray">有功功率</td>
+                <td class="value green">1557</td>
+                <td class="unit gray">KW</td>
+                <td class="text gray"></td>
+                <td class="value green"></td>
+                <td class="unit gray"></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <!-- 运行参数 -->
+        <div class="info-panel base-info">
+          <div class="panel-title gary-l">
+            <div class="svg-icon svg-icon-gray-l mg-r-16">
+              <svg-icon :svgid="'svg-normal-power'" />
+            </div>
+            <div class="title">基本信息</div>
+          </div>
+          <div class="panel-body">
+            <table class="table-form">
+              <tr>
+                <td class="text gray">风机型号</td>
+                <td class="value green">1557</td>
+                <td class="unit gray"></td>
+                <td class="text gray">控制版本系统</td>
+                <td class="value green">12.57</td>
+                <td class="unit gray"></td>
+              </tr>
+              <tr>
+                <td class="text gray">变桨类型</td>
+                <td class="value green">1557</td>
+                <td class="unit gray"></td>
+                <td class="text gray">变频器类型</td>
+                <td class="value green">12.57</td>
+                <td class="unit gray"></td>
+              </tr>
+              <tr>
+                <td class="text gray">齿香类型</td>
+                <td class="value green">1557</td>
+                <td class="unit gray"></td>
+                <td class="text gray">发电机类型</td>
+                <td class="value green"></td>
+                <td class="unit gray"></td>
+              </tr>
+              <tr>
+                <td class="text gray">总发电量</td>
+                <td class="value green">2455619</td>
+                <td class="unit gray">VKwh</td>
+                <td class="text gray"></td>
+                <td class="value green"></td>
+                <td class="unit gray"></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <!-- 变桨信息 -->
+        <div class="info-panel base-info">
+          <div class="panel-title gary-l">
+            <div class="svg-icon svg-icon-gray-l mg-r-16">
+              <svg-icon :svgid="'svg-normal-power'" />
+            </div>
+            <div class="title">基本信息</div>
+          </div>
+          <div class="panel-body">
+            <table class="table-form">
+              <tr>
+                <td class="text gray">叶片1偏角</td>
+                <td class="value green">7.14</td>
+                <td class="unit gray">°</td>
+                <td class="text gray">叶片2偏角</td>
+                <td class="value green">7.14</td>
+                <td class="unit gray">°</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <!-- 电网信息 -->
+        <div class="info-panel base-info">
+          <div class="panel-title gary-l">
+            <div class="svg-icon svg-icon-gray-l mg-r-16">
+              <svg-icon :svgid="'svg-normal-power'" />
+            </div>
+            <div class="title">基本信息</div>
+          </div>
+          <div class="panel-body">
+            <table class="table-form">
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">功率因数</td>
+                <td class="value green">0</td>
+                <td class="unit gray"></td>
+                <td class="text gray">频率</td>
+                <td class="value green">50.02</td>
+                <td class="unit gray">HZ</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <!-- 温度信息 -->
+        <div class="info-panel base-info">
+          <div class="panel-title gary-l">
+            <div class="svg-icon svg-icon-gray-l mg-r-16">
+              <svg-icon :svgid="'svg-normal-power'" />
+            </div>
+            <div class="title">基本信息</div>
+          </div>
+          <div class="panel-body">
+            <table class="table-form">
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+                <td class="text gray">U1项绕组电压</td>
+                <td class="value green">123.57</td>
+                <td class="unit gray">V</td>
+              </tr>
+              <tr>
+                <td class="text gray">功率因数</td>
+                <td class="value green">0</td>
+                <td class="unit gray"></td>
+                <td class="text gray">频率</td>
+                <td class="value green">50.02</td>
+                <td class="unit gray">HZ</td>
+              </tr>
+              <tr>
+                <td class="text gray">功率因数</td>
+                <td class="value green">0</td>
+                <td class="unit gray"></td>
+                <td class="text gray">频率</td>
+                <td class="value green">50.02</td>
+                <td class="unit gray">HZ</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DashPieChart from "../../../../components/chart/pie/dash-pie-chart.vue";
+import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
+export default {
+  name: "wind-site-base-info",
+  components: { SvgIcon, DashPieChart },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      // 功率复核数据
+      PowerLoad: [
+        {
+          title: "风速",
+          value: 12.3,
+        },
+        {
+          title: "保证功率",
+          value: 22,
+        },
+        {
+          title: "应发功率",
+          value: 33,
+        },
+        {
+          title: "实发功率",
+          value: 44,
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less">
+.wind-site-base-info {
+  // 风机名称
+  .wind-site-name {
+    padding: 0.37vh 2.222vh;
+    display: flex;
+    font-size: @fontsize-s;
+    border: 1px solid @green;
+    .svg-icon {
+      svg {
+        height: 1.481vh;
+        width: 1.481vh;
+      }
+    }
+  }
+
+  // 风机信息 tag样式
+  .wind-site-tag {
+    flex: 1 1 auto;
+    padding: 0.37vh 0.741vh;
+    display: flex;
+    align-items: center;
+    font-size: @fontsize-s;
+    background: fade(@darkgray, 30);
+
+    .tag-text {
+      color: @gray;
+      flex: 0 0 auto;
+      margin-right: 0.741vh;
+      font-weight: 600;
+    }
+
+    .tag-value {
+      min-width: 9.259vh;
+      color: fade(@white, 80);
+    }
+
+    & + .wind-site-tag {
+      margin-left: 0.741vh;
+    }
+  }
+
+  .generation {
+    height: 100%;
+    align-items: center;
+
+    .generation-text {
+      font-size: 2.037vh;
+      letter-spacing: 1px;
+    }
+
+    .generation-value {
+      font-size: 3.704vh;
+      .unit {
+        margin-left: 0.37vh;
+        font-size: 2.037vh;
+      }
+    }
+  }
+
+  .power-load {
+    height: 100%;
+    padding: 0.7407vh 0.3704vh;
+  }
+
+  .wind-site-state {
+    flex: 1 1 auto;
+  }
+
+  .info-panel {
+    flex: 1 0 auto;
+    width: 100%;
+    .panel-title {
+      display: flex;
+      width: 100%;
+      background: fade(@darkgray, 20);
+      padding: 0.37vh;
+      padding-left: 2.222vh;
+      align-items: center;
+      font-size: @fontsize-s;
+      color: #b2bdc0;
+
+      svg {
+        .svg-use path {
+          fill: @gray;
+        }
+
+        width: 2.222vh;
+        height: 2.222vh;
+      }
+    }
+
+    .panel-body {
+      border: 1px solid fade(@darkgray, 40);
+      border-top: 0px;
+    }
+
+    & + .info-panel {
+      margin-top: 1.481vh;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="wind-site-info">
+    <div class="wind-site-menu">
+      <div class="wind-site-title">选择风机</div>
+      <div class="wind-site-body">
+        <collapse-list :list="WindSites" />
+      </div>
+    </div>
+    <div class="wind-site-info-body">
+      <div class="info-menu mg-b-16">
+        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
+      </div>
+      <el-row>
+        <el-col :span="16" class="pd-r-16">
+          <!-- 基本信息 使用 v-if 每次点击重新加载  -->
+          <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
+          <base-info v-show="InfoBtns.activeIndex == 0" />
+          <base-info v-if="InfoBtns.activeIndex == 2" />
+        </el-col>
+        <el-col :span="8">
+          <warning />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import collapseList from "@/components/coms/collapse/collapse-list.vue";
+import BaseInfo from "./Base-Info.vue";
+import Warning from "./Warning.vue";
+export default {
+  components: { collapseList, BaseInfo, Warning },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      WindSites: [
+        {
+          id: "1",
+          text: "某某风电场",
+          children: [
+            {
+              id: "1",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "2",
+              text: "2E01",
+              color: "red",
+            },
+            {
+              id: "3",
+              text: "2E01",
+              color: "blue",
+            },
+          ],
+        },
+        {
+          id: "2",
+          text: "某某风电场",
+          children: [
+            {
+              id: "1",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "2",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "3",
+              text: "2E01",
+              color: "green",
+            },
+          ],
+        },
+        {
+          id: "2",
+          text: "某某风电场",
+          children: [
+            {
+              id: "1",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "2",
+              text: "2E01",
+              color: "green",
+            },
+            {
+              id: "3",
+              text: "2E01",
+              color: "green",
+            },
+          ],
+        },
+      ],
+      InfoBtns: {
+        activeIndex: 0,
+        data: [
+          {
+            id: "base-info",
+            text: "基本信息",
+          },
+          {
+            id: "generator",
+            text: "发电机",
+          },
+          {
+            id: "gear-box",
+            text: "齿轮箱",
+          },
+          {
+            id: "pitch",
+            text: "变桨",
+          },
+          {
+            id: "yaw",
+            text: "偏航",
+          },
+          {
+            id: "hydraulic-pressure",
+            text: "液压",
+          },
+          {
+            id: "cabin-info",
+            text: "机舱信息",
+          },
+          {
+            id: "principal-axis",
+            text: "主轴",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    onInfoMenuItemClick(item, index) {
+      this.InfoBtns.activeIndex = index;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wind-site-info {
+  display: flex;
+  .wind-site-menu {
+    flex: 0 0 13.889vh;
+    color: @gray;
+    background: fade(@darkgray, 10);
+    height: calc(100vh - 8.519vh);
+
+    .wind-site-title {
+      font-size: 1.667vh;
+      font-weight: 600;
+      padding: 1.481vh;
+    }
+  }
+
+  .wind-site-info-body {
+    flex: auto;
+    padding-left: 1.481vh;
+
+    .info-menu {
+      .info-menu-item {
+        display: inline-block;
+        padding: 0.741vh 1.481vh;
+        border: 1px solid fade(@darkgray, 80);
+        border-radius: 4px;
+        color: @gray;
+        font-size: @fontsize-s;
+        font-weight: 600;
+        letter-spacing: 1px;
+        cursor: pointer;
+
+        &.active {
+          color: @white;
+          background: fade(@purple, 80);
+        }
+
+        & + .info-menu-item {
+          margin-left: 0.741vh;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/WindSite/pages/Info/Warning.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="wind-site-warning">
+    <div class="search pd-16">
+      <el-row class="mg-b-16">
+        <div class="query">
+          <input class="search-input" name="query" v-model="query" />
+        </div>
+        <button class="btn search">搜索</button>
+        <div class="empty"></div>
+        <button class="btn empty-btn">重置</button>
+      </el-row>
+      <el-row class="options">
+        <el-col class="option-item" :span="8" v-for="option in options" :key="option" @click="onOptionClick(option)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
+          <div class="count">{{ option.count }}</div>
+          <div class="text">{{ option.text }}</div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="warning-list">
+      <Table :data="warning" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from "../../../../components/coms/table/table.vue";
+export default {
+  components: {
+    Table,
+  },
+  data() {
+    return {
+      query: "",
+      options: [
+        {
+          id: "",
+          text: "总故障",
+          count: "1",
+          isActive: true,
+        },
+        {
+          id: "",
+          text: "总故障",
+          count: "",
+          isActive: false,
+        },
+        {
+          id: "",
+          text: "总故障",
+          count: "1",
+          isActive: false,
+        },
+        {
+          id: "",
+          text: "叶轮刹车类",
+          count: "1",
+          isActive: false,
+        },
+        {
+          id: "",
+          text: "发电机类",
+          count: "1",
+          isActive: false,
+        },
+        {
+          id: "",
+          text: "电网类",
+          count: "1",
+        },
+        {
+          id: "",
+          text: "电网类",
+          count: "1",
+        },
+      ],
+      warning: {
+        column: [
+          {
+            name: "报警编号",
+            field: "Code",
+            is_num: true, // 是否为数字
+          },
+          {
+            name: "PLC变量名",
+            field: "Text",
+          },
+          {
+            name: "报警信息",
+            field: "Warning",
+          },
+          {
+            name: "报警状态",
+            field: "State",
+            template: function(data) {
+              if (data != "正常") return "<div class='error-state'></div>";
+              else return data;
+            },
+          },
+        ],
+        data: [
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "不正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+          {
+            Code: "1000",
+            Text: "变桨电池充电的故障",
+            Warning: "error_battery_charger",
+            State: "正常",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    onOptionClick(option) {
+      option.isActive = !option.isActive;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.wind-site-warning {
+  border: 1px solid @darkgray;
+
+  .search {
+    .query {
+      height: 100%;
+      flex: 0 0 auto;
+      .search-input {
+        background: transparent;
+        border: 1px solid @darkgray;
+        padding: 0.741vh;
+        color: @gray;
+        outline: unset;
+        border-radius: 0%;
+        margin-right: 0.741vh;
+      }
+    }
+
+    button {
+      height: 100%;
+      flex: 0 0 auto;
+      background: transparent;
+      border: 1px solid @darkgray;
+      padding: 0.741vh 1.481vh;
+      color: @gray;
+      font-size: @fontsize-s;
+      cursor: pointer;
+    }
+
+    .empty {
+      flex: auto;
+    }
+
+    .options {
+      .option-item {
+        display: flex;
+        padding-bottom: 0.741vh;
+        color: @gray;
+        cursor: pointer;
+        font-size: @fontsize-s;
+
+        .count {
+          flex: 0 0 3.704vh;
+          padding: 0.37vh;
+          text-align: center;
+          border: 1px solid @darkgray;
+          margin-right: 0.37vh;
+          line-height: 2.222vh;
+        }
+
+        .text {
+          flex: 1 0 auto;
+          padding: 0.741vh;
+          text-align: center;
+          border: 1px solid @darkgray;
+        }
+
+        & + .option-item {
+          padding-left: 0.741vh;
+        }
+
+        &:nth-child(3n + 1) {
+          padding-left: 0px;
+        }
+
+        &.has-value {
+          .text,
+          .count {
+            border-color: @purple;
+            color: @purple;
+          }
+        }
+
+        &.active,
+        &:hover {
+          .text,
+          .count {
+            border-color: @green;
+            color: @green;
+          }
+        }
+      }
+    }
+  }
+
+  .warning-list {
+    .error-state {
+      width: 0.741vh;
+      height: 0.741vh;
+      border-radius: 50%;
+      background-color: @red;
+      margin: auto;
+    }
+  }
+}
+</style>

src/views/WindSite/pages/Matrix.vue

@@ -1,424 +1,436 @@
 <template>
-    <div class="matrix">
-        <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">
-                <i class="fa fa-send"></i>
-                <span>某某某风电场</span>
-                <span class="sub-title">接入台数</span>
-                <span class="sub-count">256</span>
-            </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>
+  <div class="matrix">
+    <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">
+        <i class="fa fa-send"></i>
+        <span>某某某风电场</span>
+        <span class="sub-title">接入台数</span>
+        <span class="sub-count">256</span>
+      </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>
+  </div>
 </template>
 
 <script>
-    import util from '@/helper/util.js';
-    import BtnGroup2 from '@com/coms/btn/btn-group-double.vue';
-    export default {
-        // 名称
-        name: "Matrix",
-        // 使用组件
-        components: {
-            BtnGroup2
-        },
-        // 数据
-        data() {
-            return {
-                col: 15,
-                datas: [{
-                    tag: "SG1",
-                    num1: "985.97 kw",
-                    num2: "985.97 kw",
-                    num3: "6.45 m/s",
-                    percent: 70,
-                    color: "blue"
-                }],
-                groupDatas: [],
-                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",
-                        }]
-                    }
-                ],
-            }
-        },
-        // 函数
-        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 = [];
-                }
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-            let tempData = [];
-            for (let i = 0; i < 195; i++) {
-                tempData.push(util.copy(this.datas[0]));
-                if (i == 115) {
-                    tempData[i].color = "purple";
-                }
-                if (i == 116) {
-                    tempData[i].color = "orange";
-                }
-                if (i == 117) {
-                    tempData[i].color = "red";
-                }
-                if (i == 118) {
-                    tempData[i].color = "write";
-                }
-                if (i == 119) {
-                    tempData[i].color = "gray";
-                }
-            }
-            this.datas = util.copy(tempData);
-            this.createGroupDatas();
-        },
-        beforeMount() {
-            // 渲染前
+import util from "@/helper/util.js";
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+export default {
+  // 名称
+  name: "Matrix",
+  // 使用组件
+  components: {
+    BtnGroup2,
+  },
+  // 数据
+  data() {
+    return {
+      col: 15,
+      datas: [
+        {
+          tag: "SG1",
+          num1: "985.97 kw",
+          num2: "985.97 kw",
+          num3: "6.45 m/s",
+          percent: 70,
+          color: "blue",
         },
-        mounted() {
-            // 渲染后
+      ],
+      groupDatas: [],
+      btnGroups: [
+        {
+          icon: "fa fa-fire",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmfdc1",
+            },
+            {
+              text: "某某风场",
+              code: "mhsfc",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc2",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc3",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc4",
+            },
+          ],
         },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
+        {
+          icon: "fa fa-fire-extinguisher",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmgf1",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf2",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf3",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf4",
+            },
+          ],
         },
+      ],
+    };
+  },
+  // 函数
+  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 = [];
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    let tempData = [];
+    for (let i = 0; i < 195; i++) {
+      tempData.push(util.copy(this.datas[0]));
+      if (i == 115) {
+        tempData[i].color = "pink";
+      }
+      if (i == 116) {
+        tempData[i].color = "orange";
+      }
+      if (i == 117) {
+        tempData[i].color = "red";
+      }
+      if (i == 118) {
+        tempData[i].color = "write";
+      }
+      if (i == 119) {
+        tempData[i].color = "gray";
+      }
     }
+    this.datas = util.copy(tempData);
+    this.createGroupDatas();
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less" scoped>
-    @titleHeight: 3.704vh;
-
-    .matrix {
-        width: 100%;
-        height: 100%;
-        
-        .btn-group-tabs {
-            display: flex;
-            flex-direction: row;
-        
-            .photovoltaic {
-                margin-left: 1.481vh;
+@titleHeight: 3.704vh;
+
+.matrix {
+  width: 100%;
+  height: 100%;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+
+    .photovoltaic {
+      margin-left: 1.481vh;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    height: @titleHeight;
+    line-height: @titleHeight;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 1.481vh;
+
+    .panel-title-name {
+      font-size: @fontsize-s;
+      color: @green;
+
+      i {
+        margin: 0 0.556vh 0 1.481vh;
+      }
+
+      .sub-title {
+        color: @gray;
+        font-size: @fontsize-s;
+        margin: 0 0.556vh 0 1.481vh;
+      }
+
+      .sub-count {
+        font-size: @fontsize-s;
+        color: @write;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .panel-body {
+    height: calc(100% - 9vh);
+    background-color: fade(@darkgray, 20%);
+    padding: 0.741vh;
+    overflow: auto;
+
+    table {
+      width: 100%;
+
+      .card {
+        border: 0.093vh solid;
+
+        .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.093vh;
+          }
+        }
+
+        &.blue {
+          border-color: @darkBlue;
+          background-color: fade(@darkBlue, 30%);
+
+          .card-panel {
+            .card-left {
+              border-color: @darkBlue;
+
+              .tag {
+                background-color: @darkBlue;
+              }
             }
+
+            .card-right {
+              .num {
+                color: @darkBlue;
+              }
+            }
+          }
+
+          .card-percent {
+            border-color: @darkBlue;
+          }
+        }
+
+        &.pink {
+          border-color: @pink;
+          background-color: fade(@pink, 30%);
+
+          .card-panel {
+            .card-left {
+              border-color: @pink;
+
+              .tag {
+                background-color: @pink;
+              }
+            }
+
+            .card-right {
+              .num {
+                color: @pink;
+              }
+            }
+          }
+
+          .card-percent {
+            border-color: @pink;
+          }
         }
 
-        .panel-title {
-            width: 100%;
-            height: @titleHeight;
-            line-height: @titleHeight;
-            background-color: fade(@gray, 40%);
-            margin-top: 1.481vh;
-
-            .panel-title-name {
-                font-size: 1.111vh;
-                color: @green;
-
-                i {
-                    margin: 0 0.556vh 0 1.481vh;
-                }
-
-                .sub-title {
-                    color: @gray;
-                    font-size: 1.019vh;
-                    margin: 0 0.556vh 0 1.481vh;
-                }
-
-                .sub-count {
-                    font-size: 1.204vh;
-                    color: @write;
-                    font-weight: 600;
-                }
+        &.orange {
+          border-color: @orange;
+          background-color: fade(@orange, 30%);
+
+          .card-panel {
+            .card-left {
+              border-color: @orange;
+
+              .tag {
+                background-color: @orange;
+              }
+            }
+
+            .card-right {
+              .num {
+                color: @orange;
+              }
             }
+          }
+
+          .card-percent {
+            border-color: @orange;
+          }
         }
 
-        .panel-body {
-            height: calc(100% - 7.407vh);
-            background-color: fade(@gray, 20%);
-            padding: 0.741vh;
-            overflow: auto;
-
-            table {
-                width: 100%;
-
-                .card {
-                    border: 0.093vh solid;
-
-                    .card-panel {
-                        display: flex;
-                        flex-grow: row;
-
-                        .card-left {
-                            width: 40%;
-                            border-right: 0.093vh dotted;
-
-                            .tag {
-                                color: @write;
-                                font-size: 1.111vh;
-                                width: 100%;
-                                text-align: center;
-                            }
-                        }
-
-                        .card-right {
-                            width: 60%;
-
-                            .num {
-                                width: 100%;
-                                font-size: 1.019vh;
-                                text-align: right;
-                                padding-right: 0.278vh;
-                            }
-                        }
-
-                    }
-
-                    .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;
-                        }
-                    }
-
-                    &.blue {
-                        border-color: @darkBlue;
-                        background-color: fade(@darkBlue, 30%);
-                    
-                        .card-panel {
-                            .card-left {
-                                border-color: @darkBlue;
-                    
-                                .tag {
-                                    background-color: @darkBlue;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @darkBlue;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @darkBlue;
-                        }
-                    }
-                    
-                    &.purple {
-                        border-color: @purple;
-                        background-color: fade(@purple, 30%);
-                    
-                        .card-panel {
-                            .card-left {
-                                border-color: @purple;
-                    
-                                .tag {
-                                    background-color: @purple;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @purple;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @purple;
-                        }
-                    }
-                    
-                    &.orange {
-                        border-color: @orange;
-                        background-color: fade(@orange, 30%);
-                    
-                        .card-panel {
-                            .card-left {
-                                border-color: @orange;
-                    
-                                .tag {
-                                    background-color: @orange;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @orange;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @orange;
-                        }
-                    }
-                    
-                    &.gray {
-                        border-color: @gray;
-                        background-color: fade(@gray, 30%);
-                    
-                        .card-panel {
-                            .card-left {
-                                border-color: @gray;
-                    
-                                .tag {
-                                    background-color: @gray;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @gray;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @gray;
-                        }
-                    }
-                    
-                    &.red {
-                        border-color: @red;
-                    
-                        .card-panel {
-                            background-color: @red;
-                            
-                            .card-left {
-                                border-color: @darkRed;
-                    
-                                .tag {
-                                    background-color: @darkRed;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @write;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @red;
-                        }
-                    }
-                    
-                    &.write {
-                        border-color: @write;
-                    
-                        .card-panel {
-                            background-color: @write;
-                            
-                            .card-left {
-                                border-color: @black;
-                    
-                                .tag {
-                                    background-color: @gray;
-                                }
-                            }
-                            
-                            .card-right {
-                                .num {
-                                    color: @black;
-                                }
-                            }
-                        }
-                        
-                        .card-percent {
-                            border-color: @write;
-                        }
-                    }
-
-                }
+        &.gray {
+          border-color: @darkgray;
+          background-color: fade(@darkgray, 30%);
+
+          .card-panel {
+            .card-left {
+              border-color: @darkgray;
+
+              .tag {
+                background-color: @darkgray;
+              }
+            }
+
+            .card-right {
+              .num {
+                color: @gray;
+              }
             }
+          }
+
+          .card-percent {
+            border-color: @darkgray;
+          }
+        }
+
+        &.red {
+          border-color: @red;
+
+          .card-panel {
+            background-color: @red;
+
+            .card-left {
+              border-color: @darkRed;
+
+              .tag {
+                background-color: @darkRed;
+              }
+            }
+
+            .card-right {
+              .num {
+                color: @write;
+              }
+            }
+          }
+
+          .card-percent {
+            border-color: @red;
+          }
+        }
+
+        &.write {
+          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;
+          }
         }
+      }
     }
+  }
+}
 </style>

src/views/WindSite/pages/Tower.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="tower">
+    <Wave></Wave>
+    <Windmill class="windmill-1"></Windmill>
+    <Windmill class="windmill-2"></Windmill>
+    <Windmill class="windmill-3"></Windmill>
+    <Windmill class="windmill-4"></Windmill>
+    <Windmill class="windmill-5"></Windmill>
+    <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>
+          <div class="tool-block">
+            <div class="legend bg-purple"></div>
+            <div class="legend-text">上网电量（单位：万KWh）</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-orange"></div>
+            <div class="legend-text">购网电量（单位：万KWh）</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-yellow"></div>
+            <div class="legend-text">风速</div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:default>
+        <!-- 日发电量 -->
+        <multiple-bar-chart
+          :list="DayPower.value"
+          :units="DayPower.units"
+          height="21.852vh"
+        />
+      </template>
+    </toolbar-panel>
+  </div>
+</template>
+
+<script>
+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";
+export default {
+  // 名称
+  name: "Tower",
+  // 使用组件
+  components: {
+    Wave,
+    Windmill,
+    ToolbarPanel,
+    MultipleBarChart,
+  },
+  // 传入参数
+  props: {},
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {
+      // 日发电量
+      DayPower: {
+        // 图表所用单位
+        units: ["(万KWh)", "(风速)"],
+        value: [
+          {
+            title: "日发电量",
+            yAxisIndex: 0, // 使用单位
+            value: [
+              {
+                text: "1日",
+                value: 1,
+              },
+              {
+                text: "2日",
+                value: 1,
+              },
+              {
+                text: "3日",
+                value: 1,
+              },
+              {
+                text: "4日",
+                value: 1,
+              },
+              {
+                text: "5日",
+                value: 1,
+              },
+              {
+                text: "6日",
+                value: 1,
+              },
+              {
+                text: "7日",
+                value: 1,
+              },
+            ],
+          },
+          {
+            title: "上网电量",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "1日",
+                value: 2,
+              },
+              {
+                text: "2日",
+                value: 2,
+              },
+              {
+                text: "3日",
+                value: 2,
+              },
+              {
+                text: "4日",
+                value: 2,
+              },
+              {
+                text: "5日",
+                value: 2,
+              },
+              {
+                text: "6日",
+                value: 2,
+              },
+              {
+                text: "7日",
+                value: 2,
+              },
+            ],
+          },
+          {
+            title: "购网电量",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "1日",
+                value: 3,
+              },
+              {
+                text: "2日",
+                value: 3,
+              },
+              {
+                text: "3日",
+                value: 3,
+              },
+              {
+                text: "4日",
+                value: 3,
+              },
+              {
+                text: "5日",
+                value: 3,
+              },
+              {
+                text: "6日",
+                value: 3,
+              },
+              {
+                text: "7日",
+                value: 3,
+              },
+            ],
+          },
+          {
+            title: "风速",
+            yAxisIndex: 1,
+            value: [
+              {
+                text: "1日",
+                value: 4,
+              },
+              {
+                text: "2日",
+                value: 4,
+              },
+              {
+                text: "3日",
+                value: 4,
+              },
+              {
+                text: "4日",
+                value: 4,
+              },
+              {
+                text: "5日",
+                value: 4,
+              },
+              {
+                text: "6日",
+                value: 4,
+              },
+              {
+                text: "7日",
+                value: 4,
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less">
+.tower {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .windmill-1,
+  .windmill-2,
+  .windmill-3,
+  .windmill-4,
+  .windmill-5 {
+    position: absolute;
+  }
+
+  .windmill-1 {
+    top: 23.148vh;
+    left: 28.333vh;
+    width: 4.167vh;
+  }
+  .windmill-2 {
+    top: 8.333vh;
+    left: 11.111vh;
+    width: 3.426vh;
+  }
+  .windmill-3 {
+    top: 4.63vh;
+    left: 38.889vh;
+    width: 2.593vh;
+  }
+  .windmill-4 {
+    top: 21.296vh;
+    left: 122.87vh;
+    width: 3.426vh;
+  }
+  .windmill-5 {
+    top: 5.556vh;
+    left: 121.296vh;
+    width: 2.407vh;
+  }
+
+  .rose-chart {
+      position: absolute;
+      left: 0;
+      bottom: 1.852vh;
+      height: 26.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;
+
+      &.long {
+        width: 2.963vh;
+        height: 0.37vh;
+      }
+    }
+
+    .legend-text {
+      color: #ffffff4d;
+    }
+  }
+}
+}
+</style>

src/views/layout/Header.vue

@@ -133,8 +133,8 @@ export default {
           content: "";
           position: absolute;
           width: 100%;
-          height: 5px;
-          border: 1px solid @green;
+          height: 0.463vh;
+          border: 0.093vh solid @green;
           border-top: 0;
           left: 0;
           bottom: 0;
@@ -161,7 +161,7 @@ export default {
       cursor: pointer;
 
       i {
-        margin: 0 8px;
+        margin: 0 0.741vh;
         transition: all 0.3s;
       }
     }
@@ -190,8 +190,8 @@ export default {
           content: "";
           position: absolute;
           width: 100%;
-          height: 5px;
-          border: 1px solid @green;
+          height: 0.463vh;
+          border: 0.093vh solid @green;
           border-top: 0;
           left: 0;
           bottom: 0;
@@ -236,7 +236,7 @@ export default {
       cursor: pointer;
 
       i {
-        margin: 0 8px;
+        margin: 0 0.741vh;
       }
     }
   }

src/views/layout/Menu.vue

@@ -100,7 +100,7 @@ export default {
 
 <style lang="less">
 .menu {
-  padding-top: 16px;
+  padding-top: 1.481vh;
 
   .menu-list {
     margin: 0;
@@ -111,14 +111,14 @@ export default {
       &.active i {
         color: #05bb4c;
       }
-      padding: 16px 0;
+      padding: 1.481vh 0;
       text-align: center;
       line-height: 1.5;
     }
   }
 
   i {
-    font-size: 24px;
+    font-size: 2.222vh;
     color: rgba(255, 255, 255, 50%);
   }
 }