V1.0.15版本更新

public/static/config/modeConfig.js

@@ -8,15 +8,15 @@ let baseURL = null;
 let websocketUrl = null;
 
 if (localTest) {
-  baseURL = "http://192.168.10.12:8082/" // 联机调试 - 石林
-  // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
+    baseURL = "http://192.168.10.12:8082/" // 联机调试 - 石林
+        // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
 } else {
-  baseURL = "http://10.155.32.4:8082/" // 正式环境
+    baseURL = "http://10.155.32.4:8082/" // 正式环境
 }
 
 websocketUrl = (baseURL.replace(/http:\/\/|https:\/\//g, "")) + "gyee-websocket";
 
 window.__MODE__ = {
-  baseURL,
-  websocketUrl
+    baseURL,
+    websocketUrl
 };

src/assets/styles/el-override/el-input.less

@@ -13,6 +13,19 @@ body {
       color: @gray;
       cursor: not-allowed;
     }
+
+    .el-input__inner[type="number"] {
+      width: 200px;
+
+      &::-webkit-textfield-decoration-container {
+        appearance: none;
+      }
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        appearance: none;
+      }
+    }
   }
 
   // 数字组件
@@ -178,6 +191,43 @@ body {
       border-color: @green;
     }
   }
+
+  // Cascader 级联选择器
+  .el-cascader {
+    .el-cascader__tags {
+      .el-tag {
+        color: white;
+        background-color: fade(@green, 50);
+
+        .el-icon-close {
+          background-color: fade(@green, 50);
+        }
+      }
+    }
+  }
+
+  .el-popper {
+    &.el-cascader__dropdown[role="tooltip"] {
+      background: @picker-bg-color;
+      border-color: @picker-bg-color;
+
+      .el-cascader-menu {
+        border-color: @gray;
+      }
+
+      .el-cascader-node:not(.is-disabled):focus,
+      .el-cascader-node:not(.is-disabled):hover {
+        background: fade(@green, 20);
+        color: @green;
+      }
+
+      .el-cascader-node.in-active-path,
+      .el-cascader-node.is-active,
+      .el-cascader-node.is-selectable.in-checked-path {
+        color: @green;
+      }
+    }
+  }
 }
 
 .el-picker__popper.el-popper[role="tooltip"] {

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

@@ -174,8 +174,8 @@ export default {
                   }
                   return color;
                 },
-                shadowBlur: 3,
-                shadowColor: "rgba(255, 255, 255, 0.70)",
+                shadowBlur: 10,
+                shadowColor: "rgba(255, 255, 255, 0.30)",
               },
             },
             label: {
@@ -187,7 +187,7 @@ export default {
                 },
                 textStyle: {
                   color: "#7a8385",
-                  fontSize: 14,
+                  fontSize: 12,
                 },
                 rich: {
                   c1: {
@@ -226,8 +226,6 @@ export default {
                   }
                   return color;
                 },
-                shadowBlur: 2,
-                shadowColor: "rgba(255, 255, 255, 0.80)",
               },
             },
           },
@@ -239,13 +237,14 @@ export default {
                 color: "#20314f",
               },
             },
+            animation: this.firstAnimation,
             symbolRepeat: "fixed",
-            symbolMargin: 6,
+            symbolMargin: 4,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [1, 7],
+            symbolSize: [1, 8],
             symbolPosition: "start",
-            symbolOffset: [7, -1],
+            symbolOffset: [8, -1],
             symbolBoundingData: this.total,
             symbolRotate: -15,
             data: this.list,
@@ -280,19 +279,20 @@ export default {
                     color: "#ffffff",
                     fontSize: 14,
                     lineHeight: 20,
+                    fontFamily: "Bicubik",
                   },
                   gm: {
                     backgroundColor: partten.getColor(color1),
-                    width: 8,
-                    height: 8,
+                    width: 4,
+                    height: 4,
                     lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
                   },
                   pm: {
                     backgroundColor: partten.getColor(color2),
-                    width: 8,
-                    height: 8,
+                    width: 4,
+                    height: 4,
                     lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
@@ -316,7 +316,7 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transparent",
-                    borderColor: partten.getColor(color1), // [, "#333"],
+                    borderColor: partten.getColor(color1), // [, "#333"],// [, "#333"],
                     borderWidth: 1, // 边框宽度
                     // barBorderRadius: 0, //圆角半径
                     opacity: 0.5,
@@ -380,7 +380,7 @@ export default {
                 },
               },
             ],
-            barWidth: 8,
+            barWidth: 9,
           },
         ],
       };

src/components/chart/combination/area-bar-chart.vue

@@ -118,6 +118,13 @@ export default {
       }
       return data;
     },
+    areaMax() {
+      let max = 0;
+      this.areaData.forEach((value) => {
+        if (max < value.end) max = value.end;
+      });
+      return max;
+    },
   },
   methods: {
     renderItem(params, api) {
@@ -200,7 +207,9 @@ export default {
             data: this.bardata.area,
           },
           {
+            show: false,
             min: 0,
+            max: this.areaMax,
             axisLabel: {
               show: false,
               formatter: function(val) {
@@ -256,6 +265,7 @@ export default {
           {
             data: [(this.areaData && this.areaData[0] && this.areaData[0].name) || ""],
             axisLabel: { show: false },
+            splitLine: { show: false },
           },
         ],
         series: [],

src/components/chart/combination/area-line-chart.vue

@@ -306,7 +306,10 @@ export default {
         },
         tooltip: {
           show: true,
-          trigger: "item",
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
           backgroundColor: "rgba(0,0,0,0.4)",
           borderColor: partten.getColor("gray"),
           textStyle: {
@@ -342,6 +345,7 @@ export default {
             data: this.xAxisData,
           },
           {
+            show: false,
             min: 0,
             max: this.areaMax,
             axisLabel: {
@@ -416,7 +420,7 @@ export default {
             opacity: 0.2,
           },
           tooltip: {
-            show: true,
+            show: false,
             formatter: function(params) {
               return params.marker + params.name + ": " + params.value[2] + "s";
             },

src/components/chart/line/arrow-dash-line-chart.vue

@@ -30,54 +30,93 @@ export default {
             {
               text: "0m/s",
               value: 1,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "2m/s",
               value: 2,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "3m/s",
               value: 16,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "4m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "5m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "6m/s",
               value: 31,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "7m/s",
               value: 33,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "8m/s",
               value: 43,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "9m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "10m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "11m/s",
               value: 31,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "12m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
             {
               text: "13m/s",
               value: 3,
+              show: true,
+              size: 12,
+              route: -90,
             },
           ],
         },
@@ -144,11 +183,11 @@ export default {
         var arrowArr = [];
         data.forEach((dvalue, dindex) => {
           var item = dvalue;
-          if (dindex < data.length / 2) {
+          if (value.value[dindex].show) {
             arrowArr.push({
               symbol: "arrow",
-              symbolSize: 12,
-              symbolRotate: -90,
+              symbolSize: value.value[dindex].size,
+              symbolRotate: value.value[dindex].route,
               value: item,
             });
           } else {
@@ -195,7 +234,7 @@ export default {
           inactiveColor: partten.getColor("gray"),
           textStyle: {
             color: partten.getColor("grayl"),
-            fontSize: 12,
+            fontsize: 12,
           },
         },
         grid: {

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

@@ -218,6 +218,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hoverType: {
+      type: String,
+      default: "item",
+    },
   },
   data() {
     return {
@@ -284,8 +288,7 @@ export default {
                       ],
                       false
                     )
-                  : 
-                  "transparent",
+                  : "transparent",
               shadowColor: this.hexToRgba(this.color[index], 0.1),
               shadowBlur: 10,
             },
@@ -367,14 +370,18 @@ export default {
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "item",
-          axisPointer: {
-            type: "shadow",
-          },
+          trigger: this.hoverType,
+          axisPointer:
+            this.hoverType != "item"
+              ? {
+                  type: "cross",
+                }
+              : {},
           backgroundColor: "rgba(0,0,0,0.4)",
           borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
+            color: "#fff",
           },
         },
         legend: {

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

@@ -217,6 +217,7 @@ export default {
             radius: ["0", "40%"],
             center: ["50%", "50%"],
             z: 8,
+            animation: false,
             hoverAnimation: false,
             data: [
               {
@@ -301,17 +302,18 @@ export default {
             labelLine: {
               show: false,
             },
+            emphasis: {
+              scale: false,
+            },
             data: [
               {
                 value: 1,
                 itemStyle: {
-                  normal: {
-                    color: "transparent",
-                    borderColor: partten.getColor(this.color),
-                    opacity: 0.3,
-                    shadowColor: partten.getColor(this.color),
-                    shadowBlur: util.vh(20),
-                  },
+                  color: "transparent",
+                  borderColor: partten.getColor(this.color),
+                  opacity: 0.3,
+                  shadowColor: partten.getColor(this.color),
+                  shadowBlur: util.vh(20),
                 },
               },
             ],

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

@@ -540,6 +540,14 @@ export default {
         },
       ],
     },
+    xTitle: {
+      type: String,
+      default: "x轴标题",
+    },
+    yTitle: {
+      type: String,
+      default: "Y轴标题",
+    },
     showLegend: {
       type: Boolean,
       default: true,
@@ -563,43 +571,70 @@ export default {
             focus: "series",
           },
           data: element.value,
-          markPoint: {
+          markLine: {
             data: [
-              { type: "max", name: "最大值" },
-              { type: "min", name: "最小值" },
+              {
+                type: "max",
+                name: "最大值",
+                label: {
+                  color: partten.getColor("gray"),
+                },
+              },
+              {
+                type: "min",
+                name: "最小值",
+                label: {
+                  color: partten.getColor("gray"),
+                },
+              },
             ],
           },
         });
       });
       return result;
     },
-    legend () {
-      return this.data.map((t) => {
-        return t.title;
-      });
+    legend() {
+      if (this.data && this.data.length > 0)
+        return this.data.map((t) => {
+          return t.title;
+        });
+
+      return [];
     },
   },
   methods: {
-    resize () { },
-    initChart () {
+    resize() {},
+    initChart() {
+      let that = this;
       const chart = echarts.init(this.$el);
 
       let option = {
         color: this.color,
         grid: {
           top: 40,
-          left: 24,
-          right: 24,
+          left: 40,
+          right: 40,
           bottom: 24,
           containLabel: true,
         },
         tooltip: {
-          // trigger: 'axis',
+          trigger: "item",
           showDelay: 0,
           backgroundColor: "rgba(0,0,0,0.4)",
           borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
+            color: "#fff",
+          },
+          formatter: function(params) {
+            if (params.componentType == "markLine") {
+              return params.name + "<br />" + params.value;
+            }
+
+            var msg = params.seriesName + "<br />";
+            msg += params.marker + that.xTitle + "：" + params.value[0] + "<br />";
+            msg += params.marker + that.yTitle + "：" + params.value[1] + "<br />";
+            return msg;
           },
           axisPointer: {
             show: true,
@@ -624,6 +659,7 @@ export default {
         },
         xAxis: [
           {
+            name: this.xTitle,
             type: "value",
             scale: true,
             axisLabel: {
@@ -637,6 +673,7 @@ export default {
         yAxis: [
           {
             type: "value",
+            name: this.yTitle,
             scale: true,
             axisLabel: {
               formatter: "{value}",

src/views/Agc/components/agc-panel.vue

@@ -80,7 +80,7 @@
     </table>
     <!-- 查看默认实例去除末尾参数 :list 即可 -->
     <DoubleLineChart v-if="chartType === 'double'" height="13.889vh" :list="chartData"></DoubleLineChart>
-    <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="chartData"></MultipleLineChart>
+    <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="chartData" :hoverType="'axis'"></MultipleLineChart>
   </ComPanel>
 </template>
 
@@ -113,7 +113,112 @@ export default {
   emits: {},
   // 数据
   data() {
-    return {};
+    return {
+      list: [
+        {
+          title: "平均风速",
+          yAxisIndex: 1, // 使用单位
+          value: [
+            {
+              text: "1日",
+              value: 0,
+            },
+            {
+              text: "2日",
+              value: 1,
+            },
+            {
+              text: "3日",
+              value: 0,
+            },
+            {
+              text: "4日",
+              value: 1,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 1,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
+        },
+        {
+          title: "应发功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 4,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 4,
+            },
+            {
+              text: "4日",
+              value: 2,
+            },
+            {
+              text: "5日",
+              value: 4,
+            },
+            {
+              text: "6日",
+              value: 2,
+            },
+            {
+              text: "7日",
+              value: 4,
+            },
+          ],
+        },
+        {
+          title: "实际功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 3,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 1,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 1,
+            },
+          ],
+        },
+      ],
+    };
   },
   // 函数
   methods: {},

src/views/Home/Home.vue

@@ -378,7 +378,7 @@
               </div>
             </div>
             <div class="situation-item">
-              <div class="icon svg-icon svg-icon-darkblue">
+              <div class="icon svg-icon svg-icon-white">
                 <svg-icon class="" svgid="svg-受累图标" />
               </div>
               <div class="info">
@@ -861,12 +861,12 @@ export default {
         flex: 1 1 25%;
         align-items: center;
 
-                .icon {
-                  svg {
-                    width: 4.167vh;
-                    height: 4.167vh;
-                  }
-                }
+        .icon {
+          svg {
+            width: 40px;
+            height: 40px;
+          }
+        }
 
         &.fengji {
           flex: 0 1 25%;
@@ -879,16 +879,16 @@ export default {
           }
         }
 
-                .fengji-icon {
-                  padding: 1.111vh;
-                  border-radius: 50%;
-                  box-shadow: inset 1.5px -1px 1px 0px @green;
+        .fengji-icon {
+          padding: 12px;
+          border-radius: 50%;
+          box-shadow: inset 1.5px -1px 1px 0px @green;
 
-                  svg {
-                    width: 2.593vh;
-                    height: 2.593vh;
-                  }
-                }
+          svg {
+            width: 24px;
+            height: 24px;
+          }
+        }
 
                 .info {
                   display: flex;

src/views/Home/components/map.vue

@@ -207,7 +207,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .map {
   position: relative;
   width: 100%;
@@ -296,10 +296,30 @@ export default {
     font-size: @fontsize-l;
     color: fade(@white, 80);
     cursor: pointer;
+    border: 1px solid transparent;
+    padding: 6px 16px;
     .svg-icon {
       margin-right: 0.7407vh;
       svg {
         transform: rotate(90deg);
+        use {
+          transition: all .3s;
+        }
+      }
+    }
+
+    transition: all .3s;
+
+    &:hover {
+      color: @green;
+      border: 1px solid @green;
+
+      .svg-icon {
+        svg {
+          use {
+            fill: @green;
+          }
+        }
       }
     }
   }

src/views/LightMatrix/LightMatrix.vue

@@ -7,7 +7,19 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-          <div class="panel-item-gf-new">
+          <div class="panel-item-gf">
+            <div class="panel-item-gf-left">
+              <div class="loop"></div>
+              <span class="svg-icon svg-icon-gray svg-icon-md">
+                <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
+              </span>
+            </div>
+            <div class="panel-item-gf-right">
+              <div class="panel-item-gf-up">接入光伏</div>
+              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
+            </div>
+          </div>
+          <!-- <div class="panel-item-gf-new">
             <div class="panel-left">
               <i class="svg-icon svg-icon-write">
                 <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
@@ -20,7 +32,7 @@
                 <span class="unit">台</span>
               </span>
             </div>
-          </div>
+          </div> -->
         </Col>
         <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
           <div class="panel-item-new" :class="data.color">
@@ -28,72 +40,72 @@
               <i class="svg-icon" :class="'svg-icon-' + data.color">
                 <SvgIcon :svgid="data.nameIcon"></SvgIcon>
               </i>
-              <span class="text">{{ data.text1 }}</span>
+              <!-- <span class="text">{{ data.text1 }}</span> -->
             </div>
             <div class="panel-right">
               <span class="text">台数</span>
               <span class="value">
                 {{ sourceMap[data.key1] || "---" }}
-                <span class="unit">台</span>
               </span>
+              <span class="unit">台</span>
             </div>
           </div>
         </Col>
       </Row>
     </div>
     <el-scrollbar>
-     <div class="panel-box">
-      <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
-        <div class="panel-title">
-          <div class="panel-title-name">
-            <i class="svg-icon svg-icon-sm svg-icon-green">
-              <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
-            </i>
-            <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
-            <div class="sub-title-item" v-for="(data, index) of tables.subTitleDatas" :key="index">
-              <span class="sub-title">{{ data.text }}</span>
-              <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+      <div class="panel-box">
+        <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
+          <div class="panel-title">
+            <div class="panel-title-name">
+              <i class="svg-icon svg-icon-sm svg-icon-green">
+                <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
+              </i>
+              <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
+              <div class="sub-title-item" v-for="(data, index) of tables.subTitleDatas" :key="index">
+                <span class="sub-title">{{ data.text }}</span>
+                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
-            <div class="card-panel">
-              <div class="card-left">
-                <div class="tag">{{ cItem.wtnum }}</div>
-                <div class="icon">
-                  <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
-                    <SvgIcon :svgid="cItem.icon"></SvgIcon>
-                  </span>
-                </div>
-              </div>
-              <div class="card-right">
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                    <SvgIcon svgid="svg-A"></SvgIcon>
-                  </i>
-                  <span>{{ cItem.fdl }}</span>
+          <div class="panel-body">
+            <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
+              <div class="card-panel">
+                <div class="card-left">
+                  <div class="tag">{{ cItem.wtnum }}</div>
+                  <div class="icon">
+                    <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                      <SvgIcon :svgid="cItem.icon"></SvgIcon>
+                    </span>
+                  </div>
                 </div>
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                    <SvgIcon svgid="svg-W"></SvgIcon>
-                  </i>
-                  <span>{{ cItem.gl }}</span>
-                </div>
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                    <SvgIcon svgid="svg-V"></SvgIcon>
-                  </i>
-                  <span>{{ cItem.fs }}</span>
+                <div class="card-right">
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-A"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fdl }}</span>
+                  </div>
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-W"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.gl }}</span>
+                  </div>
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-V"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fs }}</span>
+                  </div>
                 </div>
               </div>
             </div>
+            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+            <i class="blank" v-for="i in pItem.length" :key="i"></i>
           </div>
-          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
-          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
-    </div>
     </el-scrollbar>
   </div>
 </template>
@@ -378,7 +390,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@panelHeight: 6.481vh;
+@panelHeight: 60px;
 @titleHeight: 3.704vh;
 
 .light-matrix {
@@ -391,7 +403,7 @@ export default {
     width: 100%;
     border: 0.093vh solid @darkgray;
     position: relative;
-    padding: 1.111vh 2.222vh;
+    padding: 8px 16px;
     background-color: fade(@darkgray, 20%);
 
     .dot {
@@ -418,6 +430,53 @@ export default {
       }
     }
 
+    .panel-item-gf {
+      flex: 0 0 auto;
+      margin: 0 24px;
+      display: flex;
+      height: @panelHeight;
+
+      .panel-item-gf-left {
+        width: @panelHeight;
+        height: @panelHeight;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .loop {
+          position: absolute;
+          width: 4.444vh;
+          height: 4.444vh;
+          border-radius: 50%;
+          border: 0.093vh solid @darkgray;
+          background-color: fade(@darkgray, 20);
+          left: calc(50% - 2.222vh);
+          top: calc(50% - 2.222vh);
+        }
+      }
+
+      .panel-item-gf-right {
+        color: @write;
+        text-align: right;
+        margin-left: 24px;
+
+        .panel-item-gf-up {
+          color: @gray;
+          height: @panelHeight / 2;
+          line-height: @panelHeight / 2;
+          font-size: 14px;
+        }
+
+        .panel-item-gf-down {
+          height: @panelHeight / 2;
+          line-height: @panelHeight / 2;
+          font-weight: 600;
+          font-size: 16px;
+        }
+      }
+    }
+
     .panel-item-gf-new {
       display: flex;
       height: @panelHeight;
@@ -462,26 +521,29 @@ export default {
 
     .panel-item-new {
       display: flex;
-      height: @panelHeight;
+      height: 60px;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
+      border: 1px solid;
 
       .panel-left {
+        width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        flex: 0 0 40%;
-        height: 100%;
-        border-right: 1px dashed;
+        height: 30px;
+        line-height: 30px;
+        flex: 1 0 auto;
 
         i svg {
-          width: 2.7778vh;
-          height: 2.7778vh;
+          width: 16px;
+          height: 16px;
         }
 
         .text {
-          font-size: @fontsize-s;
+          font-size: 12px;
           line-height: 1;
           margin-top: 4px;
         }
@@ -489,28 +551,27 @@ export default {
 
       .panel-right {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex: 0 0 60%;
+        justify-content: space-between;
+        width: 100%;
         height: 100%;
-        padding-left: 24px;
+        line-height: 30px;
+        padding: 0 8px;
 
         .text {
-          font-size: @fontsize-s;
-          padding-bottom: 4px;
+          font-size: 14px;
         }
 
         .value {
           color: @white;
-          font-size: 24px;
-          .unit {
-            font-size: @fontsize-s;
-            padding-left: 8px;
-          }
+          font-size: 16px;
+        }
+        .unit {
         }
       }
 
       &.green {
+        border-color: fade(@green, 50);
+
         i svg {
           margin-left: 8px;
         }
@@ -526,6 +587,7 @@ export default {
       }
 
       &.purple {
+        border-color: fade(@purple, 50);
         .panel-left {
           background-color: fade(@purple, 25);
           border-color: fade(@purple, 50);
@@ -537,6 +599,7 @@ export default {
       }
 
       &.pink {
+        border-color: fade(@pink, 50);
         .panel-left {
           background-color: fade(@pink, 25);
           border-color: fade(@pink, 50);
@@ -548,6 +611,7 @@ export default {
       }
 
       &.red {
+        border-color: fade(@red, 50);
         .panel-left {
           background-color: fade(@red, 25);
           border-color: fade(@red, 50);
@@ -559,6 +623,7 @@ export default {
       }
 
       &.orange {
+        border-color: fade(@orange, 50);
         .panel-left {
           background-color: fade(@orange, 25);
           border-color: fade(@orange, 50);
@@ -570,6 +635,7 @@ export default {
       }
 
       &.gray {
+        border-color: fade(@gray, 50);
         .panel-left {
           background-color: fade(@gray, 25);
           border-color: fade(@gray, 50);
@@ -581,6 +647,7 @@ export default {
       }
 
       &.white {
+        border-color: fade(@white, 50);
         .panel-left {
           background-color: fade(@white, 25);
           border-color: fade(@white, 50);

src/views/NewPages/history-search.vue

@@ -11,7 +11,7 @@
         <div class="query-item">
           <div class="lable">间隔：</div>
           <div class="search-input">
-            <el-input-number v-model="form.interval" controls-position="right"></el-input-number>
+            <el-input v-model="form.interval" type="number" ></el-input>
           </div>
         </div>
         <div class="query-item">

src/views/SandTable/component/ThreeModel.vue

@@ -11,6 +11,7 @@
                 <div class="fan-info-close" @click.stop="closeFanInfo">
                     <i class="el-icon-close"></i>
                 </div>
+                <div class="fan-info-name gray-l">{{fanName}}</div>
                 <div class="fan-info-item">
                     <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                         <svg-icon svgid="svg-风机" />
@@ -129,6 +130,7 @@ let camera, scene, renderer, controls;
 let mixers = [];
 let clock = new THREE.Clock();
 let fanAnimates = [];
+let fans = [];
 let cylinder = null;
 export default {
     // 名称
@@ -176,7 +178,18 @@ export default {
                 { x: -(200*Math.sin(-120/180*Math.PI)), y: -(200*Math.cos(-120/180*Math.PI)) },
                 { x: -(200*Math.sin(-150/180*Math.PI)), y: -(200*Math.cos(-150/180*Math.PI)) },
                 { x: -(200*Math.sin(-180/180*Math.PI)), y: -(200*Math.cos(-180/180*Math.PI)) },
-            ]
+            ],
+            colors: [
+                { colorName: 'green', state: 'dj', stateName: '待机', color: 0x05bb4c, },
+                { colorName: 'blue', state: 'yx', stateName: '运行', color: 0x4b55ae, },
+                { colorName: 'pink', state: 'xd', stateName: '限电', color: 0xc531c7, },
+                { colorName: 'red', state: 'gz', stateName: '故障', color: 0xBA3237, },
+                { colorName: 'orange', state: 'jx', stateName: '检修', color: 0xe17e23, },
+                { colorName: 'gray', state: 'lx', stateName: '离线', color: 0x606769, },
+                { colorName: 'white', state: 'sl', stateName: '受累', color: 0xffffff, },
+            ],
+            fanName: "",
+            playAnimation: true,
         };
     },
     // 函数
@@ -224,17 +237,20 @@ export default {
         // 控制器
         initControls: function() {
             controls = new OrbitControls(camera, renderer.domElement);
+            controls.enablePan = false;
+            controls.maxPolarAngle = 45 / 180 * Math.PI;
+            controls.minPolarAngle = 45 / 180 * Math.PI;
             controls.addEventListener("change", () => {
                 this.setEveryHTML();
             });
         },
         // 初始化一个风机动画
-        initFanAnimate: function(fan1, fan2, fan3) {
+        initFanAnimate: function(obj) {
             let fanAnimateObj = {
                 speed: 0.05,
-                fan1: fan1,
-                fan2: fan2,
-                fan3: fan3,
+                fan1: obj.getObjectByName(`${obj.name}_leaf_1`),
+                fan2: obj.getObjectByName(`${obj.name}_leaf_2`),
+                fan3: obj.getObjectByName(`${obj.name}_leaf_3`),
             };
             let fanAnimateFunction = function() {
                 fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
@@ -258,6 +274,14 @@ export default {
                 let fanAnimateObj = fanAnimates.shift();
                 fanAnimateObj.stop();
             }
+            this.playAnimation = false;
+        },
+        // 开始风机动画
+        startFanAnimate: function () {
+            fans.forEach(fan => {
+                this.initFanAnimate(fan);
+            });
+            this.playAnimation = true;
         },
         // 内容
         initContent: function() {
@@ -268,40 +292,210 @@ export default {
                 (gltf) => {
                     gltf.scene.position.set(5, 10, 0);
                     scene.add(gltf.scene);
-                    // 找到一个大风扇的 Object3D
-                    let fanBig1_1 = gltf.scene.children[0].getObjectByName("Box707");
-                    let fanBig1_2 = gltf.scene.children[0].getObjectByName("Box708");
-                    let fanBig1_3 = gltf.scene.children[0].getObjectByName("Box709"); // 组840
-                    let fanBig2_1 = gltf.scene.children[0].getObjectByName("Box719");
-                    let fanBig2_2 = gltf.scene.children[0].getObjectByName("Box720");
-                    let fanBig2_3 = gltf.scene.children[0].getObjectByName("Box721"); // 组857
-                    let fanBig3_1 = gltf.scene.children[0].getObjectByName("Box699");
-                    let fanBig3_2 = gltf.scene.children[0].getObjectByName("Box701");
-                    let fanBig3_3 = gltf.scene.children[0].getObjectByName("Box702"); // 组838
-                    this.initFanAnimate(fanBig1_1, fanBig1_2, fanBig1_3);
-                    this.initFanAnimate(fanBig2_1, fanBig2_2, fanBig2_3);
-                    this.initFanAnimate(fanBig3_1, fanBig3_2, fanBig3_3);
                     let mixer = new THREE.AnimationMixer(gltf.scene.children[0]);
                     mixer
                         .clipAction(gltf.animations[0])
                         .setDuration(3)
                         .play();
                     mixers.push(mixer);
-                    console.log(gltf);
-                },
-                (xhr) => {
-                    if (xhr.loaded == xhr.total) {
+                    // console.log(gltf);
+
+                    // 移除风车
+                    let rootNode = scene.getObjectByName("RootNode");
+                    let fan1 = scene.getObjectByName("组840");
+                    let fan2 = scene.getObjectByName("组857");
+                    let fan3 = scene.getObjectByName("组838");
+                    rootNode.remove(fan1);
+                    rootNode.remove(fan2);
+                    rootNode.remove(fan3);
+                    // console.log(fan2.position);
+                    this.setFanPosition(rootNode, fan1);
+
+                    // 设置楼的name
+                    let build = scene.getObjectByName("组833");
+                    build.name = "build_headquarters";
+                    build.userData.name = "build_headquarters";
+                    build.children[build.children.length - 1].name = 'build_headquarters_chassis';
+                    build.children[build.children.length - 1].userData.name = 'build_headquarters_chassis';
+                    this.changeObjectColor(build, 'gz');
+
+                    // 移除光伏
+                    let light = scene.getObjectByName("组862");
+                    rootNode.remove(light);
+                    this.setLightPosition(rootNode, light);
+
+                    scene.onAfterRender = () => {
                         this.$emit("when");
-                        setTimeout(() => {
-                            this.$refs.pageLoading.hide();
-                        }, 3000);
+                        this.$refs.pageLoading.hide();
                     }
                 },
+                (xhr) => {
+                    // console.log(xhr.loaded, '/', xhr.total)
+                    // if (xhr.loaded == xhr.total) {
+                    //     this.$emit("when");
+                    //     setTimeout(() => {
+                    //         this.$refs.pageLoading.hide();
+                    //     }, 3000);
+                    // }
+                },
                 function(error) {
                     console.error("load error!" + error.getWebGLErrorMessage());
                 }
             );
         },
+        // 改变元素底盘的颜色（带底盘的）
+        changeObjectColor: function (obj, colorName) {
+            let chassis = obj.getObjectByName(`${obj.name}_chassis`);
+            let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
+            chassis.material = new THREE.MeshBasicMaterial({
+                color: color,
+                opacity: 0.8,
+                transparent: true,
+            });
+        },
+        // 改变元素的颜色（光伏）
+        changeElColor: function (obj, colorName) {
+            let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
+            for (let i = 1; i <= 6; i++) {
+                let el = obj.getObjectByName(`${obj.name}_item_${i}`);
+                el.material = new THREE.MeshBasicMaterial({
+                    color: color,
+                    opacity: 0.8,
+                    transparent: true,
+                });
+            }
+        },
+        // 设置风机name
+        setFanName: function (obj, name) {
+            obj.name = name;
+            obj.userData.name = name;
+            let fanBig1_1 = obj.getObjectByName("Box707");
+            let fanBig1_2 = obj.getObjectByName("Box708");
+            let fanBig1_3 = obj.getObjectByName("Box709");
+            fanBig1_1.name = `${name}_leaf_1`;
+            fanBig1_1.userData.name = `${name}_leaf_1`;
+            fanBig1_2.name = `${name}_leaf_2`;
+            fanBig1_2.userData.name = `${name}_leaf_2`;
+            fanBig1_3.name = `${name}_leaf_3`;
+            fanBig1_3.userData.name = `${name}_leaf_3`;
+            obj.children[obj.children.length - 1].name = `${name}_chassis`;
+            obj.children[obj.children.length - 1].userData.name = `${name}_chassis`;
+        },
+        // 设置风机位置 颜色
+        setFanPosition: function (rootNode, obj) {
+            // 麻黄山
+            let fan_mhs = obj.clone(true);
+            fan_mhs.position.set(8, 5, -6);
+            this.setFanName(fan_mhs, "fan_mhs");
+            rootNode.add(fan_mhs);
+            // 牛首山
+            let fan_nss = obj.clone(true);
+            fan_nss.position.set(-4, 4, -15);
+            this.setFanName(fan_nss, "fan_nss");
+            rootNode.add(fan_nss);
+            // 青山
+            let fan_qs = obj.clone(true);
+            fan_qs.position.set(12, 5, -11);
+            this.setFanName(fan_qs, "fan_qs");
+            rootNode.add(fan_qs);
+            // 石板泉
+            let fan_sbq = obj.clone(true);
+            fan_sbq.position.set(4, 5, -13);
+            this.setFanName(fan_sbq, "fan_sbq");
+            rootNode.add(fan_sbq);
+            // 香山
+            let fan_xs = obj.clone(true);
+            fan_xs.position.set(-9, 7, 21);
+            this.setFanName(fan_xs, "fan_xs");
+            rootNode.add(fan_xs);
+
+            // 改一下颜色
+            this.changeObjectColor(fan_mhs, 'green'); // 麻黄山
+            this.changeObjectColor(fan_nss, 'xd'); // 牛首山
+            this.changeObjectColor(fan_qs, '检修'); // 青山
+            this.changeObjectColor(fan_sbq, 'white'); // 石板泉
+            this.changeObjectColor(fan_xs, '运行'); // 香山
+
+            // 风机存入数组
+            fans.push(fan_mhs);
+            fans.push(fan_nss);
+            fans.push(fan_qs);
+            fans.push(fan_sbq);
+            fans.push(fan_xs);
+
+            // 开始风机动画
+            this.startFanAnimate();
+        },
+        // 设置光伏name
+        setLightName: function (obj, name) {
+            obj.name = name;
+            obj.userData.name = name;
+            let Box661 = obj.getObjectByName("Box661");
+            let Box668 = obj.getObjectByName("Box668");
+            let Box669 = obj.getObjectByName("Box669");
+            let Box664 = obj.getObjectByName("Box664");
+            let Box667 = obj.getObjectByName("Box667");
+            let Box670 = obj.getObjectByName("Box670");
+            Box661.name = `${name}_item_1`;
+            Box661.userData.name = `${name}_item_1`;
+            Box668.name = `${name}_item_2`;
+            Box668.userData.name = `${name}_item_2`;
+            Box669.name = `${name}_item_3`;
+            Box669.userData.name = `${name}_item_3`;
+            Box664.name = `${name}_item_4`;
+            Box664.userData.name = `${name}_item_4`;
+            Box667.name = `${name}_item_5`;
+            Box667.userData.name = `${name}_item_5`;
+            Box670.name = `${name}_item_6`;
+            Box670.userData.name = `${name}_item_6`;
+        },
+        // 设置光伏位置 颜色
+        setLightPosition: function (rootNode, obj) {
+            let Box660 = obj.getObjectByName("Box660");
+            let Box666 = obj.getObjectByName("Box666");
+            let Box662 = obj.getObjectByName("Box662");
+            let Box663 = obj.getObjectByName("Box663");
+            let Box659 = obj.getObjectByName("Box659");
+            let Box665 = obj.getObjectByName("Box665");
+            obj.remove(Box660);
+            obj.remove(Box666);
+            obj.remove(Box662);
+            obj.remove(Box663);
+            obj.remove(Box659);
+            obj.remove(Box665);
+            // 大武口
+            let light_dwk = obj.clone(true);
+            light_dwk.position.set(0.28, 0.13, -35);
+            this.setLightName(light_dwk, "light_dwk");
+            rootNode.add(light_dwk);
+            // 平罗
+            let light_pl = obj.clone(true);
+            light_pl.position.set(1.5, 0.13, -40);
+            this.setLightName(light_pl, "light_pl");
+            rootNode.add(light_pl);
+            // 马场湖
+            let light_mch = obj.clone(true);
+            light_mch.position.set(-25, 2, -8);
+            this.setLightName(light_mch, "light_mch");
+            rootNode.add(light_mch);
+            // 宣和
+            let light_xh = obj.clone(true);
+            light_xh.position.set(-18, 4, -3);
+            this.setLightName(light_xh, "light_xh");
+            rootNode.add(light_xh);
+            // 海子井
+            let light_hzj = obj.clone(true);
+            light_hzj.position.set(-2, 2, -10);
+            this.setLightName(light_hzj, "light_hzj");
+            rootNode.add(light_hzj);
+
+            // 改变颜色
+            this.changeElColor(light_dwk, 'green'); // 大武口
+            this.changeElColor(light_pl, '离线'); // 平罗
+            this.changeElColor(light_mch, 'yx'); // 马场湖
+            this.changeElColor(light_xh, 'red'); // 宣和
+            this.changeElColor(light_hzj, '受累'); // 海子井
+        },
         // 创建一个圆柱
         initCylinderGeometry: function(position, cr=2) {
             let geometry = new THREE.CylinderGeometry(cr, cr, 7, 64);
@@ -336,17 +530,20 @@ export default {
         },
         // 判断时候是可点击对象 返回null 或object
         getClickObject: function(intersects) {
-            const names = ["组833", "组840", "组857", "组838"];
-            const x = true;
+            const names = ["fan", "build"];
+            let x = true;
             let obj = null;
             for (let intersect of intersects) {
                 let temObj = intersect.object;
                 while (x) {
-                    if (names.indexOf(temObj.name) >= 0) {
-                        obj = temObj;
-                        break;
+                    for (let name of names) {
+                        if (temObj.name.indexOf(`${name}_`) == 0) {
+                            obj = temObj;
+                            x = false;
+                            break;
+                        }
                     }
-                    if (temObj.parent) {
+                    if (x && temObj.parent) {
                         temObj = temObj.parent;
                         continue;
                     }
@@ -435,8 +632,13 @@ export default {
                 if (cylinder) {
                     scene.remove(cylinder);
                 }
-                this.initCylinderGeometry(obj.position, obj.name == "组833" ? 4 : 2);
-                if (obj.name == "组833") {
+                let isBuild = false;
+                if (obj.name.indexOf('build_') == 0) {
+                    isBuild = true;
+                }
+                this.initCylinderGeometry(obj.position, isBuild ? 4 : 2);
+                this.elClick(obj.name);
+                if (isBuild) {
                     this.showBuildInfo(obj.position);
                     this.hideFanInfo();
                 } else {
@@ -445,6 +647,32 @@ export default {
                 }
             }
         },
+        // 元素点击事件 绑值
+        elClick: function (name) {
+            switch (name) {
+                case "fan_mhs": // 麻黄山
+                    this.fanName = "麻黄山风场";
+                    break;
+                case "fan_nss": // 牛首山
+                    this.fanName = "牛首山风场";
+                    break;
+                case "fan_qs": // 青山
+                    this.fanName = "青山风场";
+                    break;
+                case "fan_sbq": // 石板泉
+                    this.fanName = "石板泉风场";
+                    break;
+                case "fan_xs": // 香山
+                    this.fanName = "香山风场";
+                    break;
+
+                case "build_headquarters": // 大楼
+                    break;
+            
+                default:
+                    break;
+            }
+        },
         // 初始化云
         initCloud: function () {
             
@@ -463,10 +691,12 @@ export default {
         },
         // 动画
         animate: function() {
-            var delta = clock.getDelta();
-            for (var i = 0; i < mixers.length; i++) {
-                // 重复播放动画
-                mixers[i].update(delta);
+            if (this.playAnimation) {
+                var delta = clock.getDelta();
+                for (var i = 0; i < mixers.length; i++) {
+                    // 重复播放动画
+                        mixers[i].update(delta);
+                }
             }
             renderer.render(scene, camera);
         },
@@ -520,7 +750,7 @@ export default {
         .fan-info {
             padding: 14px;
             width: 149px;
-            height: 288px;
+            height: 48px;
             background: #1a1f2fd8;
             border: 1px solid #05bb4c;
             box-shadow: 0px 8px 17px 1px #05bb4c66;
@@ -548,7 +778,12 @@ export default {
                 }
             }
 
+            .fan-info-name {
+                text-align: center;
+            }
+
             .fan-info-item {
+                display: none;
 
                 +.fan-info-item {
                     margin-top: 13px;

src/views/SandTable/component/st-back.vue

@@ -140,7 +140,7 @@ export default {
     z-index: 0;
     left: calc(50% - 436px);
     top: calc(50% - 436px);
-    transform: rotateX(20deg);
+    transform: rotateX(45deg);
 
     svg {
         width: 872px;

src/views/WindSite/WindSite.vue

@@ -10,13 +10,13 @@
           <div class="page-common-body-menu-border left bottom"></div>
           <div class="page-common-body-menu-border right top"></div>
           <div class="page-common-body-menu-border right bottom"></div>
-          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
-            <router-link :to="menuData.path">
+          <router-link v-for="(menuData, index) of menuDatas" :key="index" :to="menuData.path">
+            <div class="page-common-body-menu-item" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
               <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
                 <SvgIcon :svgid="menuData.icon"></SvgIcon>
               </span>
-            </router-link>
-          </div>
+            </div>
+          </router-link>
         </div>
       </div>
     </div>
@@ -172,9 +172,9 @@ export default {
             line-height: 0;
           }
 
-          &:first-child {
-            margin-top: 0;
-          }
+          // &:first-child {
+          //   margin-top: 0;
+          // }
 
           &.active {
             border-color: fade(@yellow, 40%);

src/views/WindSite/components/gax6.vue

@@ -724,6 +724,27 @@ export default {
             })
             this.graph.fromJSON(data);
             this.graph.centerContent();
+            setTimeout(() => {
+                this.changeFanNodeById("fanA06", "fan-red", "A01");
+            }, 5000);
+        },
+        // 通过id修改风机节点
+        changeFanNodeById: function (id, shape, label) {
+            var view = this.graph.getMountedViews();
+            var node = view.find(t => t.cell.id == id);
+            node.cell.remove();
+            var cell = this.graph.createNode({
+                id: id,
+                shape: shape,
+                x: node.cell.position().x,
+                y: node.cell.position().y,
+                attrs: {
+                    label: {
+                        text: label,
+                    },
+                },
+            });
+            this.graph.addCell(cell);
         },
         initX6: function () {
             // 注册自定义节点

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

@@ -107,11 +107,11 @@
                   </span>
                 </div>
                 <div class="status ">
-                  <span class="svg-icon svg-icon-darkblue">
+                  <span class="svg-icon svg-icon-white">
                     <svg-icon svgid="svg-intranet-involvement" />
                   </span>
-                  <span class="text darkblue">
-                    受限
+                  <span class="text white">
+                      受累
                   </span>
                 </div>
               </row>
@@ -731,6 +731,7 @@ export default {
   .wind-site-info {
     margin-left: 0.7407vh;
     flex: 1 0 auto;
+    padding: 8px;
 
     & > .row {
       height: 100%;
@@ -738,12 +739,11 @@ export default {
 
     .info-item {
       text-align: center;
-      padding: 0 0.37vh;
       flex: 1;
 
       .value {
-        font-size: @fontsize-s;
-        margin-bottom: 1.111vh;
+        font-size: 14px;
+        margin-bottom: 8px;
       }
       .text {
         font-size: 12px;
@@ -753,26 +753,27 @@ export default {
   }
 
   .wind-running-info {
-    margin-left: 0.7407vh;
-    padding: 0.741vh;
+    margin-left: 8px;
+    padding: 8px;
     flex: 1 1 auto;
 
     & > .row {
       height: 100%;
     }
+
     .fengji {
       display: flex;
       align-content: center;
       flex: 0 0 auto;
 
       .fengji-icon {
-        padding: 1.111vh;
+        padding: 12px;
         border-radius: 50%;
         box-shadow: inset 1.5px -1px 1px 0px @green;
 
         svg {
-          width: 3.333vh;
-          height: 3.333vh;
+          width: 32px;
+          height: 32px;
         }
       }
 
@@ -782,13 +783,13 @@ export default {
         justify-content: center;
 
         .text {
-          font-size: @fontsize-s;
+          font-size: 12px;
           margin-bottom: 1.111vh;
         }
 
         .value {
           text-align: right;
-          font-size: 1.852vh;
+          font-size: 24px;
         }
       }
     }
@@ -803,15 +804,17 @@ export default {
 
       .status {
         flex: 1;
-        width: 7.963vh;
+        width: 75px;
         display: flex;
         align-items: center;
-        padding: 0.37vh 0;
+        padding: 4px 0;
+
         svg {
-          width: 1.8519vh;
-          height: 1.8519vh;
-          margin-right: 0.37vh;
+          width: 18px;
+          height: 18px;
+          margin-right: 4px;
         }
+
         .text {
           font-size: 12px;
           flex: auto;
@@ -825,7 +828,7 @@ export default {
 
       .icon-status {
         .text {
-          font-size: @fontsize;
+          font-size: 12px;
           font-weight: 600;
         }
       }

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

@@ -107,9 +107,9 @@ export default {
 <style lang="less" scoped>
 .wind-site-weather {
   background: rgba(255, 255, 255, 0.1);
-  padding: 0.741vh 1.481vh;
+  padding: 8px;
   display: inline-block;
-  border: 0.093vh solid #536268;
+  border: 1px solid #536268;
   .title {
     font-size: @fontsize;
     color: @gray;
@@ -125,28 +125,28 @@ export default {
       }
 
       .weather-icon {
-        width: 5.556vh;
-        height: 5.556vh;
-        margin-right: 0.741vh;
+        width: 50px;
+        height: 50px;
+        margin-right: 8px;
       }
 
       .temperature-info {
         display: flex;
         flex-direction: column;
         .temperature {
-          font-size: 2.778vh;
+          font-size: 1.5625vw;
         }
         .other {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
+          margin-left: -32px;
+          margin-right: 8px;
           div {
-            margin-right: 1vh;
+            text-align: right;
+            margin: 8px 0;
           }
 
           span {
-            font-size: 1.111vh;
-            margin-left: 2.222vh;
+            font-size: 12px;
+            margin-left: 24px;
           }
         }
       }
@@ -154,22 +154,22 @@ export default {
 
     .other-info {
       text-align: center;
-      font-size: 1.111vh;
+      font-size: 12px;
       .svg-icon {
         margin: auto;
       }
 
       .text {
         color: @gray;
-        width: 5vh;
+        width: 50px;
       }
 
       .value {
-        margin: 0.37vh 0;
+        margin: 4px 0;
       }
 
       .col + .col {
-        margin-left: 0.741vh;
+        margin-left: 8px;
       }
     }
   }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="wind-site-base-info">
     <!-- 电机基本信息 -->
-    <el-row class="mg-b-16">
+    <el-row class="mg-b-8">
       <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'" />
@@ -26,9 +26,9 @@
       </div>
     </el-row>
     <!-- 发电信息 -->
-    <el-row class="mg-b-16">
+    <el-row class="mg-b-8">
       <el-col :span="14">
-        <el-row class="generation background pd-8 mg-r-8">
+        <el-row class="generation background mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
             <div class="generation-value green">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}<span class="unit">kwh</span></div>
@@ -42,21 +42,21 @@
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6" class="generation-item">
-              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+              <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
-              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+              <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
               <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
-              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+              <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</div>
@@ -138,7 +138,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" style="padding-left:8px;">
         <!-- 电网信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
@@ -308,18 +308,22 @@ export default {
       margin-left: 0.741vh;
     }
   }
-
+  .el-col + .el-col {
+    padding: 0;
+  }
   .generation {
-    height: 100%;
+    height: 120px;
     align-items: center;
+    padding-left: 16px;
 
     .generation-text {
-      font-size: 2.037vh;
+      font-size: 24px;
       letter-spacing: 1px;
     }
 
     .generation-value {
-      font-size: 3.704vh;
+      font-size: 50px;
+      font-family: "Bicubik";
       .unit {
         margin-left: 0.37vh;
         font-size: 2.037vh;
@@ -359,7 +363,11 @@ export default {
 
   .power-load {
     height: 100%;
-    padding: 0.7407vh 0.3704vh;
+    padding: 8px 4px;
+
+    .el-col + .el-col {
+      padding: 0;
+    }
   }
 
   .wind-site-state {
@@ -395,7 +403,7 @@ export default {
     }
 
     & + .info-panel {
-      margin-top: 1.481vh;
+      margin-top: 8px;
     }
   }
 }

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

@@ -266,7 +266,7 @@ export default {
   display: flex;
 
   .sai {
-    width: 70%;
+    width: 65%;
   }
 
   .saig {

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

@@ -6,6 +6,8 @@
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xml:space="preserve"
+        :width="svgWidth"
+        :height="svgHeight"
     >
         <defs>
             <!-- 变桨 -->
@@ -642,6 +644,8 @@ export default {
             circle: false,
             text: false,
             hover: 0,
+            svgWidth: 157,
+            svgHeight: 107,
         };
     },
     props: {
@@ -700,6 +704,23 @@ export default {
     },
     mounted() {
         // 渲染后
+        let isShow = setInterval(() => {
+            if (this.$el.style.display != 'none') {
+                if (this.$el.scrollWidth == this.svgWidth) {
+                    let height = (this.$el.scrollHeight).toFixed(0);
+                    let width = (height / this.svgHeight * this.svgWidth).toFixed(0);
+                    this.svgWidth = width;
+                    this.svgHeight = height;
+                    clearInterval(isShow);
+                } else {
+                    let width = (this.$el.scrollWidth).toFixed(0);
+                    let height = (width / this.svgWidth * this.svgHeight).toFixed(0);
+                    this.svgWidth = width;
+                    this.svgHeight = height;
+                    clearInterval(isShow);
+                }
+            }
+        }, 200);
     },
     beforeUpdate() {
         // 数据更新前
@@ -718,7 +739,7 @@ export default {
 
     .stand-alone-img-g {
         .stand-alone-img-item {
-            opacity: 0.6;
+            opacity: 0;
             cursor: pointer;
             transition: all 0.3s;
         }

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

@@ -17,7 +17,7 @@
       </el-row>
     </div>
     <div class="warning-list">
-      <Table :data="warning" :canScroll="true" />
+      <Table :data="warning" :canScroll="true" :height="'calc(100vh - 560px)'"/>
     </div>
   </div>
 </template>
@@ -178,7 +178,9 @@ export default {
   .search {
     .query {
       height: 100%;
-      flex: 0 0 auto;
+      flex: 0 0 200px;
+      margin-right: 8px;
+
       .search-input {
         background: transparent;
         border: 1px solid @darkgray;
@@ -210,12 +212,14 @@ export default {
     }
 
     .options {
+      margin-top: 8px;
+
       .option-item {
         display: flex;
-        padding-top: 0.741vh;
         color: @gray;
         cursor: pointer;
         font-size: 12px;
+        margin-bottom: 2px;
 
         .count {
           flex: 0 0 3.704vh;
@@ -276,9 +280,6 @@ export default {
       font-size: 12px;
     }
 
-    tbody {
-      height: 56vh;
-    }
   }
 }
 </style>