冲突处理

public/static/3d/lightvar.gltf

@@ -0,0 +1,535 @@
+{
+    "asset": {
+        "copyright": "2020 (c) Adobe Inc.",
+        "generator": "Adobe Dimension - a39c749b7f1dd68e8fcb597e3575f0bb9d09bfc8",
+        "version": "2.0"
+    },
+    "accessors": [
+        {
+            "bufferView": 0,
+            "componentType": 5126,
+            "count": 36,
+            "type": "VEC3",
+            "max": [
+                0.010735392570495606,
+                0.004967136308550835,
+                0.004486432299017906
+            ],
+            "min": [
+                -0.010735392570495606,
+                -0.004967136308550835,
+                0.0
+            ]
+        },
+        {
+            "bufferView": 1,
+            "componentType": 5126,
+            "count": 36,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "componentType": 5126,
+            "count": 36,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 3,
+            "componentType": 5125,
+            "count": 36,
+            "type": "SCALAR",
+            "max": [
+                35.0
+            ],
+            "min": [
+                0.0
+            ]
+        }
+    ],
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteOffset": 0,
+            "byteLength": 432,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 432,
+            "byteLength": 432,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 864,
+            "byteLength": 288,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 1152,
+            "byteLength": 144,
+            "target": 34963
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 1296,
+            "uri": "lightvar_binary.bin"
+        }
+    ],
+    "cameras": [
+        {
+            "perspective": {
+                "znear": 0.00023857674386817962,
+                "yfov": 0.6024156808853149,
+                "zfar": 13.121721267700196,
+                "aspectRatio": 1.3333333730697632
+            },
+            "type": "perspective",
+            "name": "render_camera"
+        }
+    ],
+    "materials": [
+        {
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.0,
+                    0.016807375475764276,
+                    0.05612849444150925,
+                    1.0
+                ],
+                "metallicFactor": 0.0,
+                "roughnessFactor": 0.7071067690849304
+            },
+            "name": "12 - Default",
+            "doubleSided": true
+        }
+    ],
+    "meshes": [
+        {
+            "name": "Box659",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box662",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box660",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box663",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box666",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box665",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box661",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box668",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box669",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box664",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box667",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box670",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "translation": [
+                0.22498351335525514,
+                0.39790037274360659,
+                35.385826110839847
+            ],
+            "rotation": [
+                -0.12059047073125839,
+                0.379409521818161,
+                0.04995020851492882,
+                0.9159756302833557
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                0.9999999403953552
+            ],
+            "camera": 0,
+            "name": "render_camera_n3d"
+        },
+        {
+            "children": [
+                2
+            ],
+            "translation": [
+                -0.2750164866447449,
+                0.0979003757238388,
+                34.885826110839847
+            ],
+            "name": "light"
+        },
+        {
+            "children": [
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10,
+                11,
+                12,
+                13,
+                14
+            ],
+            "translation": [
+                0.2750164270401001,
+                0.1264212280511856,
+                -34.88582992553711
+            ],
+            "rotation": [
+                -0.7071067690849304,
+                0.0,
+                0.0,
+                0.7071067690849304
+            ],
+            "scale": [
+                100.0,
+                100.0,
+                100.0
+            ],
+            "name": "light"
+        },
+        {
+            "translation": [
+                0.021191921085119249,
+                0.035402219742536548,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 0,
+            "name": "Box659"
+        },
+        {
+            "translation": [
+                0.01723325625061989,
+                0.02250267006456852,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 1,
+            "name": "Box662"
+        },
+        {
+            "translation": [
+                -0.0013512963196262718,
+                0.04179275408387184,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 2,
+            "name": "Box660"
+        },
+        {
+            "translation": [
+                -0.005161983892321587,
+                0.029375456273555757,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 3,
+            "name": "Box663"
+        },
+        {
+            "translation": [
+                -0.009120659902691841,
+                0.01647598296403885,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 4,
+            "name": "Box666"
+        },
+        {
+            "translation": [
+                0.013274568133056164,
+                0.009603194892406464,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.14833155274391175,
+                0.9889376759529114
+            ],
+            "mesh": 5,
+            "name": "Box665"
+        },
+        {
+            "translation": [
+                -0.01662297546863556,
+                -0.012505950406193734,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 6,
+            "name": "Box661"
+        },
+        {
+            "translation": [
+                0.0071365367621183399,
+                -0.016811523586511613,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 7,
+            "name": "Box668"
+        },
+        {
+            "translation": [
+                0.004712914116680622,
+                -0.02988225780427456,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 8,
+            "name": "Box669"
+        },
+        {
+            "translation": [
+                -0.019046595320105554,
+                -0.025576705113053323,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 9,
+            "name": "Box664"
+        },
+        {
+            "translation": [
+                -0.021451115608215333,
+                -0.03854431211948395,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 10,
+            "name": "Box667"
+        },
+        {
+            "translation": [
+                0.0023083947598934175,
+                -0.04284980520606041,
+                -0.002243216149508953
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                -0.09154288470745087,
+                0.9958011507987976
+            ],
+            "mesh": 11,
+            "name": "Box670"
+        }
+    ],
+    "scenes": [
+        {
+            "nodes": [
+                0,
+                1
+            ],
+            "name": "scene"
+        }
+    ],
+    "scene": 0
+}

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

@@ -198,6 +198,7 @@ body {
 
   // Cascader 级联选择器
   .el-cascader {
+    line-height: 30px;
     .el-cascader__tags {
       .el-tag {
         color: white;
@@ -208,6 +209,11 @@ body {
         }
       }
     }
+
+    .el-input__suffix {
+      right: 0px;
+    }
+
   }
 
   .el-select {

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

@@ -269,9 +269,10 @@ export default {
         },
         grid: {
           top: 32,
-          left: 40,
-          right: this.ydata.length > 1 ? 40 : 14,
-          bottom: 24,
+          left: 8,
+          right: 8,
+          bottom: 0,
+          containLabel: true,
         },
         xAxis: [
           {

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

@@ -62,17 +62,33 @@ export default {
       type: Array,
       default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     },
+    // 每页显示个数
+    pageSize: {
+      type: Number,
+      default: 20,
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
+      areaData: [],
     };
   },
   computed: {
     legend() {
       return this.bardata.legend;
     },
+    end() {
+      var result = 20;
+      console.log("length:", this.areaData.length);
+      if (this.areaData) {
+        result = parseInt((this.pageSize / this.areaData.length) * 100);
+      }
+
+      console.log("result", result);
+      return result;
+    },
   },
   methods: {
     initChart() {
@@ -108,19 +124,64 @@ export default {
             fontSize: util.vh(16),
           },
         },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: this.end,
+            yAxisIndex: [0],
+          },
+          {
+            start: 0,
+            end: this.end,
+            bottom: 40,
+            yAxisIndex: [0],
+            backgroundColor: "transparent",
+            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleStyle: {
+              color: partten.getColor("green"),
+            },
+            moveHandleSize: 0,
+            // dataBackground: {
+            //   lineStyle: {
+            //     color: partten.getColor("gray"),
+            //   },
+            //   areaStyle: {
+            //     color: partten.getColor("gray"),
+            //   },
+            // },
+            // selectedDataBackground: {
+            //   lineStyle: {
+            //     color: partten.getColor("yellow"),
+            //   },
+            //   areaStyle: {
+            //     color: partten.getColor("yellow"),
+            //   },
+            // },
+            fillerColor: "transparent",
+            textStyle: {
+              color: partten.getColor("grayl"),
+            },
+            borderColor: partten.getColor("gray"),
+            brushSelect: false,
+          },
+        ],
         yAxis: [
           {
             type: "category",
             axisLabel: {
               color: partten.getColor("gray"),
             },
+            inverse: true,
+            // minInterval: 10,
+            // maxInterval: 10,
             axisLine: {
               show: false,
             },
             axisTick: {
               show: false,
             },
-            data: this.bardata.area,
+            data: this.areaData,
           },
         ],
         xAxis: [
@@ -174,7 +235,7 @@ export default {
           name: this.bardata.legend[i],
           type: "bar",
           stack: "总量",
-          barWidth: "10%",
+          barWidth: 16,
           label: {
             show: false,
             position: "insideRight",
@@ -205,6 +266,12 @@ export default {
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();
+    this.areaData = this.bardata.area;
+    if (this.bardata.area && this.bardata.area.length < this.pageSize) {
+      for (let i = this.bardata.area.length; i <= this.pageSize; i++) {
+        this.areaData.push("");
+      }
+    }
   },
   mounted() {
     this.$nextTick(() => {

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

@@ -1,294 +1,293 @@
 <template>
-  <div class="chart"
-       :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
-import util from '@/helper/util.js'
-import partten from '@/helper/partten.js'
-import * as echarts from 'echarts'
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
 
 export default {
-  name: 'double-line-chart',
-  componentName: 'double-line-chart',
+  name: "double-line-chart",
+  componentName: "double-line-chart",
   props: {
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '13.889vh'
+      default: "13.889vh",
     },
     // 传入数据
     list: {
       type: Array,
       default: () => [
         {
-          title: '绿线',
+          title: "绿线",
           smooth: true,
           value: [
             {
-              text: '',
-              value: 0
+              text: "",
+              value: 0,
             },
             {
-              text: '0:00',
-              value: 20
+              text: "0:00",
+              value: 20,
             },
             {
-              text: '10:00',
-              value: 1
+              text: "10:00",
+              value: 1,
             },
             {
-              text: '11:00',
-              value: 40
+              text: "11:00",
+              value: 40,
             },
             {
-              text: '12:00',
-              value: 10
+              text: "12:00",
+              value: 10,
             },
             {
-              text: '13:00',
-              value: 15
+              text: "13:00",
+              value: 15,
             },
             {
-              text: '14:00',
-              value: 30
+              text: "14:00",
+              value: 30,
             },
             {
-              text: '15:00',
-              value: 40
+              text: "15:00",
+              value: 40,
             },
             {
-              text: '',
-              value: 10
-            }
-          ]
+              text: "",
+              value: 10,
+            },
+          ],
         },
         {
-          title: '黄线',
+          title: "黄线",
           smooth: true,
           value: [
             {
-              text: '',
-              value: 0
+              text: "",
+              value: 0,
             },
             {
-              text: '0:00',
-              value: 40
+              text: "0:00",
+              value: 40,
             },
             {
-              text: '10:00',
-              value: 20
+              text: "10:00",
+              value: 20,
             },
             {
-              text: '11:00',
-              value: 20
+              text: "11:00",
+              value: 20,
             },
             {
-              text: '12:00',
-              value: 10
+              text: "12:00",
+              value: 10,
             },
             {
-              text: '13:00',
-              value: 40
+              text: "13:00",
+              value: 40,
             },
             {
-              text: '14:00',
-              value: 50
+              text: "14:00",
+              value: 50,
             },
             {
-              text: '15:00',
-              value: 40
+              text: "15:00",
+              value: 40,
             },
             {
-              text: '',
-              value: 10
-            }
-          ]
-        }
-      ]
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+      ],
     },
     // 单位
     unit: {
       type: String,
-      default: ''
+      default: "",
     },
     showLegend: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      id: '',
+      id: "",
       chart: null,
-      color: ['#05bb4c', '#f8de5b', '#4b55ae', '#fa8c16', '#1DA0D7', '#DD5044'],
-      newlist: null
-    }
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7", "#DD5044"],
+      newlist: null,
+    };
   },
   watch: {
     list: {
       handler(newValue, oldValue) {
-        console.warn(newValue)
-        this.newlist = newValue
+        console.warn(newValue);
+        this.newlist = newValue;
         this.$nextTick(() => {
-          this.initChart()
-        })
+          this.initChart();
+        });
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   computed: {
     colorValue() {
-      return partten.getColor(this.color)
+      return partten.getColor(this.color);
     },
     datas() {
-      return this.newlist.map(t => {
-        return t.value
-      })
+      return this.newlist.map((t) => {
+        return t.value;
+      });
     },
     legend() {
       if (this.newlist) {
-        return this.newlist.map(t => {
-          return t.title
-        })
+        return this.newlist.map((t) => {
+          return t.title;
+        });
       }
     },
     xdata() {
-      return this.newlist[0].value.map(t => {
-        return t.text
-      })
+      return this.newlist[0].value.map((t) => {
+        return t.text;
+      });
     },
     series() {
-      let result = []
+      let result = [];
       this.newlist.forEach((value, index) => {
         result.push({
           name: value.title,
-          type: 'line',
+          type: "line",
           smooth: value.smooth,
           showSymbol: false,
           zlevel: index,
           lineStyle: {
             normal: {
               color: this.color[index],
-              width: 1
-            }
+              width: 1,
+            },
           },
           yAxisIndex: value.yAxisIndex,
-          data: value.value.map(t => {
-            return t.value
-          })
-        })
-      })
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
 
-      return result
+      return result;
     },
     yAxis() {
-      let result = []
+      let result = [];
       result.push({
-        type: 'value',
+        type: "value",
         name: this.unit,
         axisLabel: {
-          formatter: '{value}',
-          fontSize: util.vh(14)
+          formatter: "{value}",
+          fontSize: util.vh(14),
         },
         boundaryGap: false,
         //分格线
         splitLine: {
-          show: false
-        }
-      })
-      return result
-    }
+          show: false,
+        },
+      });
+      return result;
+    },
   },
   methods: {
     resize() {},
     initChart() {
-      const chart = echarts.init(this.$el)
+      const chart = echarts.init(this.$el);
 
       let option = {
         color: this.color,
         tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0,0,0,0.4)',
-          borderColor: partten.getColor('gray'),
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
-            color: '#fff',
-            fontSize: util.vh(16)
-          }
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
         },
         legend: {
           show: this.showLegend,
           data: this.legend,
           right: 56,
-          icon: 'circle',
+          icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor('gray'),
+          inactiveColor: partten.getColor("gray"),
           textStyle: {
-            color: partten.getColor('grayl'),
-            fontSize: 12
-          }
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
         },
         grid: {
           top: 16,
           left: 32,
           right: 8,
-          bottom: 24
+          bottom: 24,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             axisLabel: {
-              formatter: '{value}',
+              formatter: "{value}",
               textStyle: {
-                color: partten.getColor('gray'),
-                fontSize: util.vh(14)
-              }
+                color: partten.getColor("gray"),
+                fontSize: util.vh(14),
+              },
             },
-            data: this.xdata
-          }
+            data: this.xdata,
+          },
         ],
         yAxis: this.yAxis,
-        series: this.series
-      }
+        series: this.series,
+      };
 
-      chart.clear()
-      chart.setOption(option)
+      chart.clear();
+      chart.setOption(option);
 
       this.resize = function() {
-        chart.resize()
-      }
+        chart.resize();
+      };
 
-      window.addEventListener('resize', this.resize)
-    }
+      window.addEventListener("resize", this.resize);
+    },
   },
   created() {
     this.$nextTick(() => {
-      this.id = 'pie-chart-' + util.newGUID()
-    })
-    this.newlist = this.list
-    console.warn(this.list)
-    console.warn(this.newlist)
+      this.id = "pie-chart-" + util.newGUID();
+    });
+    this.newlist = this.list;
+    console.warn(this.list);
+    console.warn(this.newlist);
   },
   mounted() {
     this.$nextTick(() => {
-      this.$el.style.width = this.width
-      this.$el.style.height = this.height
-      this.initChart()
-    })
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   unmounted() {
-    window.removeEventListener('resize', this.resize)
-  }
-}
+    window.removeEventListener("resize", this.resize);
+  },
+};
 </script>
 
 <style lang="less">

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

@@ -1,284 +1,283 @@
 <template>
-  <div class="chart"
-       :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
-import util from '@/helper/util.js'
-import partten from '@/helper/partten.js'
-import * as echarts from 'echarts'
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
 
 export default {
-  name: 'double-line-chart',
-  componentName: 'double-line-chart',
+  name: "double-line-chart",
+  componentName: "double-line-chart",
   props: {
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '13.889vh'
+      default: "13.889vh",
     },
     // 传入数据
     list: {
       type: Array,
       default: () => [
         {
-          title: '绿线',
+          title: "绿线",
           smooth: true,
           value: [
             {
-              text: '',
-              value: 0
+              text: "",
+              value: 0,
             },
             {
-              text: '0:00',
-              value: 20
+              text: "0:00",
+              value: 20,
             },
             {
-              text: '10:00',
-              value: 1
+              text: "10:00",
+              value: 1,
             },
             {
-              text: '11:00',
-              value: 40
+              text: "11:00",
+              value: 40,
             },
             {
-              text: '12:00',
-              value: 10
+              text: "12:00",
+              value: 10,
             },
             {
-              text: '13:00',
-              value: 15
+              text: "13:00",
+              value: 15,
             },
             {
-              text: '14:00',
-              value: 30
+              text: "14:00",
+              value: 30,
             },
             {
-              text: '15:00',
-              value: 40
+              text: "15:00",
+              value: 40,
             },
             {
-              text: '',
-              value: 10
-            }
-          ]
+              text: "",
+              value: 10,
+            },
+          ],
         },
         {
-          title: '黄线',
+          title: "黄线",
           smooth: true,
           value: [
             {
-              text: '',
-              value: 0
+              text: "",
+              value: 0,
             },
             {
-              text: '0:00',
-              value: 40
+              text: "0:00",
+              value: 40,
             },
             {
-              text: '10:00',
-              value: 20
+              text: "10:00",
+              value: 20,
             },
             {
-              text: '11:00',
-              value: 20
+              text: "11:00",
+              value: 20,
             },
             {
-              text: '12:00',
-              value: 10
+              text: "12:00",
+              value: 10,
             },
             {
-              text: '13:00',
-              value: 40
+              text: "13:00",
+              value: 40,
             },
             {
-              text: '14:00',
-              value: 50
+              text: "14:00",
+              value: 50,
             },
             {
-              text: '15:00',
-              value: 40
+              text: "15:00",
+              value: 40,
             },
             {
-              text: '',
-              value: 10
-            }
-          ]
-        }
-      ]
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+      ],
     },
     // 单位
     unit: {
       type: String,
-      default: ''
+      default: "",
     },
     showLegend: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      id: '',
+      id: "",
       chart: null,
-      color: ['#05bb4c', '#f8de5b', '#4b55ae', '#fa8c16']
-    }
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+    };
   },
   computed: {
     colorValue() {
-      return partten.getColor(this.color)
+      return partten.getColor(this.color);
     },
     datas() {
-      return this.list.map(t => {
-        return t.value
-      })
+      return this.list.map((t) => {
+        return t.value;
+      });
     },
     legend() {
       if (this.newlist) {
-        return this.newlist.map(t => {
-          return t.title
-        })
+        return this.newlist.map((t) => {
+          return t.title;
+        });
       } else {
-        return ''
+        return "";
       }
     },
     xdata() {
       if (this.list) {
-        return this.list[0].value.map(t => {
-          return t.text
-        })
+        return this.list[0].value.map((t) => {
+          return t.text;
+        });
       } else {
-        return ''
+        return "";
       }
     },
     series() {
-      let result = []
+      let result = [];
       this.list.forEach((value, index) => {
         result.push({
           name: value.title,
-          type: 'line',
+          type: "line",
           smooth: value.smooth,
           showSymbol: false,
           zlevel: index,
           lineStyle: {
             normal: {
               color: this.color[index],
-              width: 1
-            }
+              width: 1,
+            },
           },
           yAxisIndex: value.yAxisIndex,
-          data: value.value.map(t => {
-            return t.value
-          })
-        })
-      })
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
 
-      return result
+      return result;
     },
     yAxis() {
-      let result = []
+      let result = [];
       result.push({
-        type: 'value',
+        type: "value",
         name: this.unit,
         axisLabel: {
-          formatter: '{value}',
-          fontSize: util.vh(14)
+          formatter: "{value}",
+          fontSize: util.vh(14),
         },
         boundaryGap: false,
         //分格线
         splitLine: {
-          show: false
-        }
-      })
-      return result
-    }
+          show: false,
+        },
+      });
+      return result;
+    },
   },
   methods: {
     resize() {},
     initChart() {
-      const chart = echarts.init(this.$el)
+      const chart = echarts.init(this.$el);
 
       let option = {
         color: this.color,
         tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0,0,0,0.4)',
-          borderColor: partten.getColor('gray'),
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
-            color: '#fff',
-            fontSize: util.vh(16)
-          }
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
         },
         legend: {
           show: this.showLegend,
           data: this.legend,
           right: 56,
-          icon: 'circle',
+          icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor('gray'),
+          inactiveColor: partten.getColor("gray"),
           textStyle: {
-            color: partten.getColor('grayl'),
-            fontSize: 12
-          }
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
         },
         grid: {
           top: 16,
           left: 32,
           right: 8,
-          bottom: 24
+          bottom: 24,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             axisLabel: {
-              formatter: '{value}',
+              formatter: "{value}",
               textStyle: {
-                color: partten.getColor('gray'),
-                fontSize: util.vh(14)
-              }
+                color: partten.getColor("gray"),
+                fontSize: util.vh(14),
+              },
             },
-            data: this.xdata
-          }
+            data: this.xdata,
+          },
         ],
         yAxis: this.yAxis,
-        series: this.series
-      }
+        series: this.series,
+      };
 
-      chart.clear()
-      chart.setOption(option)
+      chart.clear();
+      chart.setOption(option);
 
       this.resize = function() {
-        chart.resize()
-      }
+        chart.resize();
+      };
 
-      window.addEventListener('resize', this.resize)
-    }
+      window.addEventListener("resize", this.resize);
+    },
   },
   created() {
     this.$nextTick(() => {
-      this.id = 'pie-chart-' + util.newGUID()
-    })
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
   mounted() {
     this.$nextTick(() => {
-      this.$el.style.width = this.width
-      this.$el.style.height = this.height
-      this.initChart()
-    })
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   unmounted() {
-    window.removeEventListener('resize', this.resize)
-  }
-}
+    window.removeEventListener("resize", this.resize);
+  },
+};
 </script>
 
 <style lang="less">

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

@@ -30,97 +30,97 @@ export default {
             {
               text: "1",
               value: 1,
-              weather: 'sun',
+              weather: "sun",
               direction: "n",
             },
             {
               text: "2",
               value: 2,
-              weather: 'sun',
+              weather: "sun",
               direction: "s",
             },
             {
               text: "3",
               value: 1,
-              weather: 'sun',
+              weather: "sun",
               direction: "w",
             },
             {
               text: "4",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "e",
             },
             {
               text: "5",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "nw",
             },
             {
               text: "6",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "ne",
             },
             {
               text: "7",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "se",
             },
             {
               text: "8",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "9",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "10",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "11",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "12",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "13",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "14",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "15",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
             {
               text: "16",
               value: 3,
-              weather: 'sun',
+              weather: "sun",
               direction: "sw",
             },
           ],
@@ -193,19 +193,21 @@ export default {
       });
     },
     yAxis() {
-      let result = [{
-        type: "value",
-        name: "",
-        axisLabel: {
-          show: false,
-        },
-        //分格线
-        splitLine: {
-          show: false,
+      let result = [
+        {
+          type: "value",
+          name: "",
+          axisLabel: {
+            show: false,
+          },
+          //分格线
+          splitLine: {
+            show: false,
+          },
+          min: 0,
+          max: 10,
         },
-        min: 0,
-        max: 10,
-      }];
+      ];
       this.units.forEach((value, index) => {
         result.push({
           type: "value",
@@ -249,7 +251,7 @@ export default {
                 label: {
                   show: true,
                   position: "top",
-                  formatter: function(e) {
+                  formatter: function (e) {
                     return ["  {weather| }"];
                   },
                   rich: {
@@ -281,8 +283,8 @@ export default {
               },
             },
             yAxisIndex: 0,
-            barGap: '0%',
-            barCategoryGap: '0%',
+            barGap: "0%",
+            barCategoryGap: "0%",
             clip: false,
             data: value.value.map((t) => {
               return {
@@ -290,7 +292,7 @@ export default {
                 label: {
                   show: true,
                   position: "inside",
-                  formatter: function(e) {
+                  formatter: function (e) {
                     return ["  {direction| }"];
                   },
                   rich: {
@@ -309,8 +311,8 @@ export default {
                 },
                 itemStyle: {
                   borderWidth: 1,
-                  borderColor: '#606769',
-                  color: 'transparent',
+                  borderColor: "#606769",
+                  color: "transparent",
                 },
               };
             }),
@@ -360,19 +362,23 @@ export default {
             fontSize: util.vh(16),
           },
           formatter: function (params) {
-            let str = ''
+            let str = "";
             for (let i = 0; i < params.length; i++) {
               if (params[i].seriesName == "风向") {
                 continue;
               }
               if (i == 0) {
-                str += `${params[i].name}<br/>${params[i].seriesName}: ${params[i].data.value ? params[i].data.value : params[i].data}<br/>`;
+                str += `${params[i].name}<br/>${params[i].seriesName}: ${
+                  params[i].data.value ? params[i].data.value : params[i].data
+                }<br/>`;
                 continue;
               }
-              str += `${params[i].seriesName}: ${params[i].data.value ? params[i].data.value : params[i].data}<br/>`
+              str += `${params[i].seriesName}: ${
+                params[i].data.value ? params[i].data.value : params[i].data
+              }<br/>`;
             }
-            return str
-          }
+            return str;
+          },
         },
         legend: {
           show: this.showLegend,
@@ -387,10 +393,11 @@ export default {
           },
         },
         grid: {
-          top: util.vh(32),
-          left: util.vh(40),
-          right: util.vh(40),
-          bottom: util.vh(64),
+          top: 32,
+          left: 8,
+          right: 8,
+          bottom: 32,
+          containLabel: true,
         },
         xAxis: [
           {
@@ -398,14 +405,14 @@ export default {
             // boundaryGap: false,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(14),
+              fontSize: 14,
               textStyle: {
                 color: partten.getColor("gray"),
               },
             },
             data: this.xdata,
-            offset: 40,
-            axisLine: {onZero: true},
+            offset: 32,
+            axisLine: { onZero: true },
           },
         ],
         yAxis: this.yAxis,
@@ -415,7 +422,7 @@ export default {
       chart.clear();
       chart.setOption(option);
 
-      this.resize = function() {
+      this.resize = function () {
         chart.resize();
       };
 

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

@@ -148,16 +148,12 @@ export default {
         var arrowArr = [];
         data.forEach((dvalue, dindex) => {
           var item = dvalue;
-          if (dindex < data.length / 2) {
-            arrowArr.push({
-              symbol: "arrow",
-              symbolSize: 12,
-              symbolRotate: -90,
-              value: item,
-            });
-          } else {
-            arrowArr.push({ symbol: "none", value: item });
-          }
+          arrowArr.push({
+            symbol: "arrow",
+            symbolSize: 12,
+            symbolRotate: -90,
+            value: item,
+          });
         });
         result.push({
           name: value.title,

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

@@ -0,0 +1,274 @@
+<template>
+  <el-table :class="customClass" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick">
+    <template v-for="col in data.column" :key="col">
+      <el-table-column v-if="col.child && col.child.length > 0" :label="col.name">
+        <el-table-column
+          v-for="sub in col.child"
+          :key="sub"
+          :label="sub.name"
+          :prop="sub.field"
+          :width="sub.width"
+          :sortable="sub.sortable"
+          :show-overflow-tooltip="!sub.slot"
+          :fixed="sub.fixed"
+          :align="sub.align ? sub.align : 'center'"
+          :resizable="sub.resizable"
+          :header-align="'center'"
+        >
+          <template v-if="sub.slot == true" #default="item">
+            <slot :name="sub.field" :column="sub" :row="item.row" :all="item" :data="item.row[item.field]"></slot>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column
+        v-if="!col.child"
+        :label="col.name"
+        :prop="col.field"
+        :width="col.width"
+        :sortable="col.sortable"
+        :show-overflow-tooltip="!col.slot"
+        :fixed="col.fixed"
+        :align="col.align ? col.align : 'center'"
+        :resizable="col.resizable"
+        :header-align="'center'"
+      >
+        <template v-if="col.slot == true" #default="item">
+          <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+  <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        child:[{
+                            field: "name",
+                            width:'', // 宽度
+                            click:function(){} // 点击事件
+                            sortable:fasle,
+                            slot:false,
+                            fixed:false,
+                            align:'center',
+                            resizable :false,
+                        }]
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    customClass: {
+      type: String,
+      default: "",
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    onClick(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}
+</style>

src/router/index.js

@@ -735,6 +735,11 @@ const routes = [{
         name: "customStatistics",
         component: () => import("../views/alarmCenter/customStatistics.vue")
     },
+	{
+		path: "/new/pb",
+		name: "pb",
+		component: () => import(/* webpackChunkName: "powerbenchmarking" */ "../views/NewPages/power-benchmarking.vue"),
+	  },
 ]
 const router = createRouter({
 	history: createWebHashHistory(),

src/views/Agc/Agc.vue

@@ -90,13 +90,12 @@ export default {
 
     // 请求服务
     requestData(showLoading) {
-      console.log(111111)
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "genreset/getAgcValues",
-         timeout: 600000,
+        timeout: 600000,
         success(res) {
           let datas = [];
           if (res.data) {
@@ -131,7 +130,6 @@ export default {
 
               keys.forEach((key, keyIndex) => {
                 pEle.tb.forEach((cEle, cIndex) => {
-                 // debugger;
                   tb[keyIndex].value.push({ text: new Date(cEle.time).formatDate("hh:mm"), value: cEle[keys[keyIndex]] || 0 });
                 });
               });
@@ -140,8 +138,6 @@ export default {
               datas.push(pEle);
             });
             that.datas = datas;
-
-            console.log(2222222,datas)
           } else {
             that.datas = datas;
           }

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

@@ -106,11 +106,13 @@ export default {
     },
     chartData: {
       type: Array,
-      default: [{
+      default: [
+        {
           title: "",
           smooth: true,
-          value: []
-      }]
+          value: [],
+        },
+      ],
     },
   },
   // 自定义事件
@@ -238,11 +240,13 @@ export default {
   },
   mounted() {
     // 渲染后
-    this.list=this.data || [{
-          title: "",
-          yAxisIndex: 1, // 使用单位
-          value: []
-    }];
+    this.list = this.data || [
+      {
+        title: "",
+        yAxisIndex: 1, // 使用单位
+        value: [],
+      },
+    ];
   },
   beforeUpdate() {
     // 数据更新前
@@ -250,11 +254,11 @@ export default {
   updated() {
     // 数据更新后
   },
-  watch:{
-    daya(res){
-      this.list=res;
-    }
-  }
+  watch: {
+    daya(res) {
+      this.list = res;
+    },
+  },
 };
 </script>
 

src/views/HealthControl/Health0.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="health-0">
     <el-row>
-      <el-col :span="12">
+      <el-col :span="14">
         <el-row>
           <el-col :span="24">
             <div class="query mg-b-8">
@@ -132,7 +132,7 @@
           </el-col>
         </el-row>
       </el-col>
-      <el-col :span="12" class="health-0-right">
+      <el-col :span="10" class="health-0-right">
         <el-row>
           <el-col :span="24">
             <div class="table">

src/views/HealthControl/Health5.vue

@@ -89,7 +89,6 @@ export default {
     },
     // 跳转按钮
     onClickJump(item){
-      // console.warn(item);
        this.$router.push({
         path: `/health/health0/${item.wpId}/${item.wtId}`
       });

src/views/HealthControl/Health6.vue

@@ -63,7 +63,7 @@
     </row>
     <div class="mg-b-16">
       <panel :title="'健康状态占比'" :showLine="false">
-        <bar-line-chart :bardata="barData" :lineData="[]" :height="'250px'" />
+        <bar-line-chart :bardata="barData" :lineData="[]" :height="'250px'" :pageSize="6" />
       </panel>
     </div>
     <div class="mg-b-16 curStyle">
@@ -98,20 +98,20 @@ export default {
       type: "1",
       status: "1",
       healPieData: [],
-      stopPieData:[],
-      statusData:[],
-      barData:{
+      stopPieData: [],
+      statusData: [],
+      barData: {
         area: [],
         legend: [],
-        data: []
-      }
+        data: [],
+      },
     };
   },
-  created(){
+  created() {
     this.requestData();
   },
   methods: {
-    requestData(){
+    requestData() {
       this.getWpwarn();
       this.getStop();
       this.getWpOrProStatus();
@@ -119,18 +119,18 @@ export default {
     },
 
     // 获取健康走势图
-    getWpwarn(){
+    getWpwarn() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "healthoperation/countWpwarn",
         data: {
-          type: that.type
+          type: that.type,
         },
-        success (res) {
-          let healPieData=[];
+        success(res) {
+          let healPieData = [];
 
-          res.data.forEach(ele=>{
+          res.data.forEach((ele) => {
             healPieData.push({
               value: ele.value,
               unit: "次",
@@ -139,24 +139,23 @@ export default {
           });
 
           that.healPieData = healPieData;
-        }
+        },
       });
     },
 
-    
     // 获取故障统计图
-    getStop(){
+    getStop() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "healthoperation/countStop",
         data: {
-          type: that.type
+          type: that.type,
         },
-        success (res) {
-          let stopPieData=[];
+        success(res) {
+          let stopPieData = [];
 
-          res.data.forEach(ele=>{
+          res.data.forEach((ele) => {
             stopPieData.push({
               value: ele.value,
               unit: "次",
@@ -165,74 +164,73 @@ export default {
           });
 
           that.stopPieData = stopPieData;
-        }
+        },
       });
     },
 
     // 获取健康状态占比
-    getWpOrProStatus(){
+    getWpOrProStatus() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "healthoperation/countWpOrProStatus",
         data: {
-          type: that.type
+          type: that.type,
         },
-        success (res) {
+        success(res) {
           let barData = {
             area: res.data.name,
             legend: ["良好数量", "正常数量", "注意数量", "严重数量"],
-            data: []
+            data: [],
           };
 
-          let length=res.data.name.length;
+          let length = res.data.name.length;
 
-          for(let i=0;i<length;i++){
+          for (let i = 0; i < length; i++) {
             barData.data.push([]);
           }
 
-          for(let i=0;i<length;i++){
+          for (let i = 0; i < length; i++) {
             barData.data[i].push(res.data.lhList[i]);
             barData.data[i].push(res.data.hgList[i]);
             barData.data[i].push(res.data.zyList[i]);
             barData.data[i].push(res.data.yzList[i]);
           }
-          
-          that.barData=barData;
-        }
+
+          that.barData = barData;
+        },
       });
     },
 
     // 获取健康状态
-    getStatus(){
+    getStatus() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "healthoperation/findWpOrProStatusForHistory",
         data: {
           type: that.type,
-          status: that.status
+          status: that.status,
         },
-        success (res) {
-
+        success(res) {
           let statusData = [];
 
           const time = res.data.time;
 
-          for(let key in res.data){
-            if(key !== "name" && key !== "time"){
-              let item=res.data[key];
+          for (let key in res.data) {
+            if (key !== "name" && key !== "time") {
+              let item = res.data[key];
 
               let statusItem = {
                 title: res.data.name[0][key],
                 yAxisIndex: 0,
-                value: []
-              }
+                value: [],
+              };
 
-              time.forEach((text, index)=>{
+              time.forEach((text, index) => {
                 statusItem.value.push({
-                  text:res.data.name[0][key],
-                  value:item[index]
+                  text: res.data.name[0][key],
+                  value: item[index],
                 });
               });
 
@@ -241,8 +239,7 @@ export default {
           }
 
           that.statusData = statusData;
-          
-        }
+        },
       });
     },
 
@@ -251,21 +248,20 @@ export default {
       this.requestData();
     },
 
-    changeStatus(status){
+    changeStatus(status) {
       this.status = status;
       this.getStatus();
-    }
+    },
   },
 };
 </script>
 
 <style lang="less">
 .health-6 {
-
-  .curStyle{
+  .curStyle {
     position: relative;
 
-    .selections{
+    .selections {
       position: absolute;
       display: flex;
       right: 0;
@@ -273,7 +269,7 @@ export default {
       width: 50%;
       justify-content: flex-end;
 
-      .item{
+      .item {
         flex: 0 0 80px;
         text-align: center;
         line-height: 33px;

src/views/NewPages/power-benchmarking.vue

@@ -0,0 +1,763 @@
+<template>
+  <div class="power-benchmarking-page">
+    <div class="top">
+      <div class="top-left">
+        <div class="top-left-header">
+          <div class="header-left">
+            <div class="selecttion">
+              <div class="item" :class="{ active: selecttionIndex == 0 }" @click="selectionClick(0)">日</div>
+              <div class="item" :class="{ active: selecttionIndex == 1 }" @click="selectionClick(1)">周</div>
+              <div class="item" :class="{ active: selecttionIndex == 2 }" @click="selectionClick(2)">月</div>
+              <div class="item" :class="{ active: selecttionIndex == 3 }" @click="selectionClick(3)">季</div>
+              <div class="item" :class="{ active: selecttionIndex == 4 }" @click="selectionClick(4)">年</div>
+            </div>
+            <div class="query">
+              <div class="query-items">
+                <div class="query-item">
+                  <div class="lable">风场：</div>
+                  <div class="search-input">
+                    <el-cascader :options="cascader.options" :props="cascader.props" collapse-tags clearable></el-cascader>
+                  </div>
+                </div>
+              </div>
+              <div class="query-items">
+                <div class="query-item">
+                  <div class="lable">风场：</div>
+                  <div class="search-input">
+                    <el-cascader :options="cascader.options" :props="cascader.props" collapse-tags clearable></el-cascader>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="header-right">
+            <div class="right-btn" :class="{ active: btnIndex == 0 }" @click="rightBtnClick(0)">风电</div>
+            <div class="right-btn" :class="{ active: btnIndex == 1 }" @click="rightBtnClick(1)">光伏</div>
+          </div>
+        </div>
+        <group-table :customClass="'table'" :data="eltableData" :height="'420px'" :pageSize="10"></group-table>
+      </div>
+      <div class="top-right">
+        <div class="rank-title">
+          <div class="border top-left"></div>
+          <div class="border top-right"></div>
+          <div class="border bottom-left"></div>
+          <div class="border bottom-right"></div>
+          排行榜
+        </div>
+        <div class="rank-block"></div>
+        <group-table :customClass="'rank-table'" :data="greenTable" :height="'420px'">
+          <template v-slot:rank="scope">
+            <div class="rank-index" :class="'index-' + scope.row.rank">
+              {{ scope.row.rank }}
+            </div>
+          </template>
+        </group-table>
+      </div>
+    </div>
+    <div class="bottom">
+      <panel :title="'指标分析'">
+        <multiple-bar-chart :list="barData" :height="'calc(100vh - 630px)'" :units="['功率数值（kW）']" />
+      </panel>
+    </div>
+  </div>
+</template>
+<script>
+import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import groupTable from "../../components/coms/table/group-table.vue";
+export default {
+  components: { groupTable, Panel, MultipleBarChart },
+  data() {
+    return {
+      selecttionIndex: 0,
+      btnIndex: 0,
+      eltableData: {
+        column: [
+          {
+            name: "",
+            child: [
+              {
+                name: "区域公司",
+                field: "name",
+                width: 55,
+              },
+              {
+                name: "评分",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "配送信息",
+            child: [
+              {
+                name: "装机容量（MW）",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "在运台数 (台)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "理论电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "发电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "非计划检修损失电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "计划检修损失电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "限电损失电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "受累损失电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "性能损失电量 (万kwh)",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "安全指标",
+            child: [
+              {
+                name: "人身设备事故 (次)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "设备一类障碍 (次)",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "经济指标",
+            child: [
+              {
+                name: "人身设备事故 (次)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "限电损失率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "性能损失率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "综合厂用电率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "设备利用小时 (小时)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "光功率 预测 准确率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "AGC 曲线 跟随率 (%)",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "设备指标",
+            child: [
+              {
+                name: "MTBF (小时)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "MTTF (小时)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "设备 可利 用率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "等效 可用 系数 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "非计划 检修 损失率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "计划检 修损 失率 (%)",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "管理效率指标",
+            child: [
+              {
+                name: "MTTR (小时)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "隐患 发现 准确率 (%)",
+                field: "v1",
+                width: 55,
+              },
+              {
+                name: "消缺 及时率 (%)",
+                field: "v1",
+                width: 55,
+              },
+            ],
+          },
+          {
+            name: "资源指标",
+            child: [
+              {
+                name: "累计 辐射 总量 (兆焦/ 平米)",
+                field: "v1",
+                width: 80,
+              },
+            ],
+          },
+        ],
+        data: [
+          {
+            name: "宁夏",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "湖北",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "合肥",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "宁波",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "内蒙",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "山东",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "山西",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "云南",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "新疆",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            name: "湖南",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+        ],
+        total: 12,
+      },
+      greenTable: {
+        column: [
+          {
+            name: "排名",
+            field: "rank",
+            slot: true,
+          },
+          {
+            name: "名称",
+            field: "v2",
+            width: 62,
+          },
+          {
+            name: "指标项",
+            child: [
+              {
+                name: "人身设备事故 (次)",
+                field: "v1",
+                width: 62,
+              },
+            ],
+          },
+        ],
+        data: [
+          {
+            rank: 1,
+            name: "宁夏",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 2,
+            name: "湖北",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 3,
+            name: "合肥",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "宁波",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "内蒙",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "山东",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "山西",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "云南",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "新疆",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+          {
+            rank: 4,
+            name: "湖南",
+            v1: 100.0,
+            v2: 88.88,
+            v3: 0.01,
+          },
+        ],
+      },
+      barData: [
+        {
+          title: "日发电量",
+          value: [
+            {
+              text: "宁夏",
+              value: 1000,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+            {
+              text: "宁夏",
+              value: 1200,
+            },
+          ],
+        },
+      ],
+      cascader: {
+        props: { multiple: true },
+        options: [
+          {
+            value: 1,
+            label: "东南",
+            children: [
+              {
+                value: 2,
+                label: "上海",
+                children: [
+                  { value: 3, label: "普陀" },
+                  { value: 4, label: "黄埔" },
+                  { value: 5, label: "徐汇" },
+                ],
+              },
+              {
+                value: 7,
+                label: "江苏",
+                children: [
+                  { value: 8, label: "南京" },
+                  { value: 9, label: "苏州" },
+                  { value: 10, label: "无锡" },
+                ],
+              },
+              {
+                value: 12,
+                label: "浙江",
+                children: [
+                  { value: 13, label: "杭州" },
+                  { value: 14, label: "宁波" },
+                  { value: 15, label: "嘉兴" },
+                ],
+              },
+            ],
+          },
+          {
+            value: 17,
+            label: "西北",
+            children: [
+              {
+                value: 18,
+                label: "陕西",
+                children: [
+                  { value: 19, label: "西安" },
+                  { value: 20, label: "延安" },
+                ],
+              },
+              {
+                value: 21,
+                label: "新疆维吾尔族自治区",
+                children: [
+                  { value: 22, label: "乌鲁木齐" },
+                  { value: 23, label: "克拉玛依" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    selectionClick(index) {
+      this.selecttionIndex = index;
+    },
+    rightBtnClick(index) {
+      this.btnIndex = index;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.power-benchmarking-page {
+  .top {
+    display: flex;
+    margin-bottom: 16px;
+
+    .top-left {
+      flex: 1 0 auto;
+
+      .top-left-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        .header-left {
+          display: flex;
+          .selecttion {
+            flex: 1 0 250px;
+            width:250px;
+            display: flex;
+            
+            .item {
+              flex: 0 0 44px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              border: 1px solid @gray;
+              margin-right: 8px;
+              font-size: 14px;
+              color: @gray;
+              cursor: pointer;
+
+              &.active,
+              &:hover {
+                background: fade(@purple, 60);
+                color: @white;
+              }
+            }
+          }
+        }
+
+        .header-right {
+          display: flex;
+          margin-right: 12px;
+
+          & > div {
+            width: 84px;
+            height: 28px;
+            line-height: 28px;
+            border: 1px solid @gray;
+            text-align: center;
+            color: @gray;
+            font-size: 14px;
+            cursor: pointer;
+
+            &:first-child {
+              border-top-left-radius: 16px;
+              border-bottom-left-radius: 16px;
+            }
+
+            &:last-child {
+              border-top-right-radius: 16px;
+              border-bottom-right-radius: 16px;
+            }
+
+            &.active,
+            &:hover {
+              background: fade(@green, 20);
+              border-color: @green;
+              color: @green;
+            }
+          }
+        }
+      }
+
+      .table {
+        &.el-table thead tr:first-child th {
+          background: fade(@gray, 40);
+          border-bottom: 1px solid #0b1010;
+          border-right: 1px solid #0b1010;
+        }
+
+        &.el-table thead tr:last-child th {
+          background: fade(@gray, 20);
+
+          .cell {
+            height: 116px;
+            padding: 12px 6px;
+            border-right: 1px solid #0b1010;
+          }
+        }
+      }
+    }
+
+    .top-right {
+      flex: 0 0 200px;
+      margin-left: 8px;
+
+      .rank-title {
+        position: relative;
+        height: 28px;
+        line-height: 28px;
+        border: 1px solid fade(@green, 40);
+        text-align: center;
+        color: @green;
+        font-size: 14px;
+
+        .border {
+          position: absolute;
+          width: 8px;
+          height: 8px;
+          border: 2px solid fade(@green, 60);
+
+          &.top-left {
+            left: -1px;
+            top: -1px;
+            border-right: 0px;
+            border-bottom: 0px;
+          }
+
+          &.top-right {
+            top: -1px;
+            right: -1px;
+            border-left: 0px;
+            border-bottom: 0px;
+          }
+
+          &.bottom-left {
+            bottom: -1px;
+            left: -1px;
+            border-right: 0px;
+            border-top: 0px;
+          }
+
+          &.bottom-right {
+            bottom: -1px;
+            right: -1px;
+            border-left: 0px;
+            border-top: 0px;
+          }
+        }
+
+        &::before {
+          content: " ";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          background: linear-gradient(135deg, rgba(5, 187, 76, 0.4), transparent, transparent, transparent, rgba(5, 187, 76, 0.4));
+        }
+      }
+
+      .rank-block {
+        height: 8px;
+        width: 100%;
+        border: 1px solid fade(@green, 40);
+        border-left: 0px;
+        border-right: 0px;
+        background: fade(@green, 20);
+        margin: 4px 0;
+        opacity: 0.5;
+      }
+
+      .rank-table {
+        border: 1px solid fade(@green, 40);
+        &.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
+          background: fade(@green, 10);
+        }
+
+        &.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
+          background: fade(@green, 10) !important;
+        }
+
+        .rank-index {
+          height: 20px;
+          width: 20px;
+          line-height: 20px;
+          text-align: center;
+          margin: auto;
+
+          &.index-1 {
+            background: fade(@purple, 60);
+            color: #fff;
+            border: 1px solid @purple;
+          }
+
+          &.index-2 {
+            background: fade(#2d6e76, 60);
+            color: #fff;
+            border: 1px solid #2d6e76;
+          }
+
+          &.index-3 {
+            background: fade(#366626, 60);
+            color: #fff;
+            border: 1px solid #366626;
+          }
+        }
+
+        &.el-table thead tr th {
+          background: fade(@green, 10);
+          border-bottom: 1px solid #0b1010;
+          border-right: 1px solid #0b1010;
+          height: 116px;
+        }
+
+        &.el-table thead tr:first-child th:last-child {
+          background: fade(@green, 20);
+          border-bottom: 1px solid #0b1010;
+          border-right: 1px solid #0b1010;
+          height: 30px;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    height: 400px;
+  }
+}
+</style>

src/views/SandTable/component/ThreeModel1.vue

@@ -5,45 +5,13 @@
             <img :src="require('@assets/png/3dmap.png')" alt="">
         </div>
         <div class="three-html-layer">
-            <div
+            <div v-for="(info, index) of htmlLayer" :key="index"
                 class="three-html-dom fan-info"
-                :id="htmlLayer[0].id"
-                v-show="htmlLayer[0].show"
-                :style="'left: ' + htmlLayer[0].x + 'px; top: ' + htmlLayer[0].y + 'px;'"
+                :id="info.id"
+                v-show="info.show"
+                :style="'left: ' + info.x + 'px; top: ' + info.y + 'px;'"
             >
-                <div class="fan-name">麻黄山</div>
-            </div>
-            <div
-                class="three-html-dom fan-info"
-                :id="htmlLayer[1].id"
-                v-show="htmlLayer[1].show"
-                :style="'left: ' + htmlLayer[1].x + 'px; top: ' + htmlLayer[1].y + 'px;'"
-            >
-                <div class="fan-name">牛首山</div>
-            </div>
-            <div
-                class="three-html-dom fan-info"
-                :id="htmlLayer[2].id"
-                v-show="htmlLayer[2].show"
-                :style="'left: ' + htmlLayer[2].x + 'px; top: ' + htmlLayer[2].y + 'px;'"
-            >
-                <div class="fan-name">青山</div>
-            </div>
-            <div
-                class="three-html-dom fan-info"
-                :id="htmlLayer[3].id"
-                v-show="htmlLayer[3].show"
-                :style="'left: ' + htmlLayer[3].x + 'px; top: ' + htmlLayer[3].y + 'px;'"
-            >
-                <div class="fan-name">石板泉</div>
-            </div>
-            <div
-                class="three-html-dom fan-info"
-                :id="htmlLayer[4].id"
-                v-show="htmlLayer[4].show"
-                :style="'left: ' + htmlLayer[4].x + 'px; top: ' + htmlLayer[4].y + 'px;'"
-            >
-                <div class="fan-name">香山</div> 
+                <div class="fan-name">{{info.name}}</div>
             </div>
         </div>
     </div>
@@ -87,6 +55,7 @@ export default {
                     ox: 50,
                     oy: 10,
                     position: null,
+                    name: "麻黄山",
                 },
                 { // 牛首山
                     id: "fan-nss",
@@ -96,6 +65,7 @@ export default {
                     ox: 35,
                     oy: 0,
                     position: null,
+                    name: "牛首山",
                 },
                 { // 青山
                     id: "fan-qs",
@@ -105,15 +75,17 @@ export default {
                     ox: 60,
                     oy: 10,
                     position: null,
+                    name: "青山",
                 },
                 { // 石板泉
                     id: "fan-sbq",
                     x: 0,
                     y: 0,
                     show: true,
-                    ox: 45,
+                    ox: 40,
                     oy: 0,
                     position: null,
+                    name: "石板泉",
                 },
                 { // 香山
                     id: "fan-qs",
@@ -123,6 +95,57 @@ export default {
                     ox: 25,
                     oy: 20,
                     position: null,
+                    name: "香山",
+                },
+                { // 大武口
+                    id: "light-dwk",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 0,
+                    oy: 110,
+                    position: null,
+                    name: "大武口",
+                },
+                { // 平罗
+                    id: "light-pl",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 30,
+                    oy: 100,
+                    position: null,
+                    name: "平罗",
+                },
+                { // 马场湖
+                    id: "light-mch",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: -120,
+                    oy: 110,
+                    position: null,
+                    name: "马场湖",
+                },
+                { // 宣和
+                    id: "light-xh",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: -90,
+                    oy: 120,
+                    position: null,
+                    name: "宣和",
+                },
+                { // 海子井
+                    id: "light-hzj",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: -80,
+                    oy: 150,
+                    position: null,
+                    name: "海子井",
                 },
             ],
             circleXY: [
@@ -264,17 +287,32 @@ export default {
                 "static/3d/fanvar.gltf",
                 (gltf) => {
                     gltf.scene.position.set(17, 10, -12);
-                    console.log(gltf);
+                    // console.log(gltf);
                     scene.add(gltf.scene);
                     let rootNode = gltf.scene.children[0];
                     let fan = gltf.scene.children[0].children[0];
                     rootNode.remove(fan);
                     this.setFanPosition(rootNode, fan);
+                },
+                (xhr) => {},
+                function(error) {
+                    console.error("load error!" + error.getWebGLErrorMessage());
+                }
+            );
+            loaderGround.load(
+                "static/3d/lightvar.gltf",
+                (gltf) => {
+                    gltf.scene.position.set(17, 10, -12);
+                    // console.log(gltf);
+                    scene.add(gltf.scene);
+                    let rootNode = gltf.scene.children[0];
+                    let light = gltf.scene.children[0].children[0];
+                    rootNode.remove(light);
+                    this.setLightPosition(rootNode, light);
                     scene.onAfterRender = () => {
                         this.$emit("when");
                         this.$refs.pageLoading.hide();
                     }
-
                 },
                 (xhr) => {},
                 function(error) {
@@ -292,6 +330,18 @@ export default {
                 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;
@@ -326,7 +376,7 @@ export default {
         setFanPosition: function (rootNode, obj) {
             // 麻黄山
             let fan_mhs = obj.clone(true);
-            fan_mhs.position.set(8, 5, -3);
+            fan_mhs.position.set(10, 5, -4);
             this.setFanName(fan_mhs, "fan_mhs");
             rootNode.add(fan_mhs);
             // this.initCylinderGeometry(fan_mhs.position);
@@ -340,14 +390,14 @@ export default {
             this.htmlLayer[1].position = fan_nss.position;
             // 青山
             let fan_qs = obj.clone(true);
-            fan_qs.position.set(12, 5, -11);
+            fan_qs.position.set(15, 5, -9);
             this.setFanName(fan_qs, "fan_qs");
             rootNode.add(fan_qs);
             // this.initCylinderGeometry(fan_qs.position);
             this.htmlLayer[2].position = fan_qs.position;
             // 石板泉
             let fan_sbq = obj.clone(true);
-            fan_sbq.position.set(4, 5, -15);
+            fan_sbq.position.set(4, 5, -2);
             this.setFanName(fan_sbq, "fan_sbq");
             rootNode.add(fan_sbq);
             // this.initCylinderGeometry(fan_sbq.position);
@@ -380,6 +430,81 @@ export default {
             // 设置位置
             this.setEveryHTML();
         },
+        // 设置光伏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(-6, 0.13, -53);
+            this.setLightName(light_dwk, "light_dwk");
+            rootNode.add(light_dwk);
+            this.htmlLayer[5].position = light_dwk.position;
+            // 平罗
+            let light_pl = obj.clone(true);
+            light_pl.position.set(-3, 0.13, -60);
+            this.setLightName(light_pl, "light_pl");
+            rootNode.add(light_pl);
+            this.htmlLayer[6].position = light_pl.position;
+            // 马场湖
+            let light_mch = obj.clone(true);
+            light_mch.position.set(-27, 2, -30);
+            this.setLightName(light_mch, "light_mch");
+            rootNode.add(light_mch);
+            this.htmlLayer[7].position = light_mch.position;
+            // 宣和
+            let light_xh = obj.clone(true);
+            light_xh.position.set(-18, 4, -27);
+            this.setLightName(light_xh, "light_xh");
+            rootNode.add(light_xh);
+            this.htmlLayer[8].position = light_xh.position;
+            // 海子井
+            let light_hzj = obj.clone(true);
+            light_hzj.position.set(-10, 2, -26);
+            this.setLightName(light_hzj, "light_hzj");
+            rootNode.add(light_hzj);
+            this.htmlLayer[9].position = light_hzj.position;
+
+            // 改变颜色
+            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);
@@ -477,6 +602,7 @@ export default {
 .three-model {
     position: relative;
     overflow: hidden;
+    left: -112px;
 
     .map-3d {
         position: absolute;

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

@@ -138,7 +138,7 @@ export default {
     height: 872px;
     position: fixed;
     z-index: 0;
-    left: calc(50% - 436px);
+    left: calc(50% - 436px - 112px);
     top: calc(50% - 436px);
     transform: rotateX(45deg);
 

src/views/WindSite/pages/GeneralAppearance.vue

@@ -18,7 +18,6 @@
           <img src="../../../assets/map/fan/black.png" />
           <span class="sub-title gray">接入台数</span>
           <span class="sub-count font-num white">{{wpnumMap.jrts}}</span>
-          
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/green.png" />