提交

package.json

@@ -82,4 +82,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

public/static/3d/sence.gltf

@@ -0,0 +1,741 @@
+{
+    "asset": {
+        "generator": "FBX2glTF v0.9.7",
+        "version": "2.0"
+    },
+    "scene": 0,
+    "buffers": [
+        {
+            "byteLength": 244816,
+            "uri": "buffer.bin"
+        }
+    ],
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteLength": 776,
+            "byteOffset": 0
+        },
+        {
+            "buffer": 0,
+            "byteLength": 2328,
+            "byteOffset": 776
+        },
+        {
+            "buffer": 0,
+            "byteLength": 3104,
+            "byteOffset": 3104
+        },
+        {
+            "buffer": 0,
+            "byteLength": 13044,
+            "byteOffset": 6208,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 57624,
+            "byteOffset": 19252,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 57624,
+            "byteOffset": 76876,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 38416,
+            "byteOffset": 134500,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5082,
+            "byteOffset": 172916,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 8064,
+            "byteOffset": 178000,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 8064,
+            "byteOffset": 186064,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5376,
+            "byteOffset": 194128,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 912,
+            "byteOffset": 199504,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 3312,
+            "byteOffset": 200416,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 3312,
+            "byteOffset": 203728,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 2208,
+            "byteOffset": 207040,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 324,
+            "byteOffset": 209248,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 1080,
+            "byteOffset": 209572,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 1080,
+            "byteOffset": 210652,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 720,
+            "byteOffset": 211732,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 1044,
+            "byteOffset": 212452,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5208,
+            "byteOffset": 213496,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5208,
+            "byteOffset": 218704,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 3472,
+            "byteOffset": 223912,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 2934,
+            "byteOffset": 227384,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5436,
+            "byteOffset": 230320,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 5436,
+            "byteOffset": 235756,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 3624,
+            "byteOffset": 241192,
+            "target": 34962
+        }
+    ],
+    "scenes": [
+        {
+            "name": "Root Scene",
+            "nodes": [
+                0
+            ]
+        }
+    ],
+    "accessors": [
+        {
+            "componentType": 5126,
+            "type": "SCALAR",
+            "count": 194,
+            "bufferView": 0,
+            "byteOffset": 0,
+            "min": [
+                0.0
+            ],
+            "max": [
+                8.04166698455811
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 194,
+            "bufferView": 1,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC4",
+            "count": 194,
+            "bufferView": 2,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 6522,
+            "bufferView": 3,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 4802,
+            "bufferView": 4,
+            "byteOffset": 0,
+            "min": [
+                -0.0166609920561314,
+                -0.0276869479566813,
+                -0.0780899301171303
+            ],
+            "max": [
+                0.0166619550436735,
+                0.0282285343855619,
+                0.216616854071617
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 4802,
+            "bufferView": 5,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 4802,
+            "bufferView": 6,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 2541,
+            "bufferView": 7,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 672,
+            "bufferView": 8,
+            "byteOffset": 0,
+            "min": [
+                -0.132257491350174,
+                -0.122277483344078,
+                -0.0104256197810173
+            ],
+            "max": [
+                0.132257327437401,
+                0.122277446091175,
+                0.010425241664052
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 672,
+            "bufferView": 9,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 672,
+            "bufferView": 10,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 456,
+            "bufferView": 11,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 276,
+            "bufferView": 12,
+            "byteOffset": 0,
+            "min": [
+                -0.0130434352904558,
+                -0.00700305076315999,
+                -0.216616854071617
+            ],
+            "max": [
+                0.0127089628949761,
+                0.0186082739382982,
+                0.207458332180977
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 276,
+            "bufferView": 13,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 276,
+            "bufferView": 14,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 162,
+            "bufferView": 15,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 90,
+            "bufferView": 16,
+            "byteOffset": 0,
+            "min": [
+                -0.00596537301316857,
+                -0.0282285399734974,
+                0.200054615736008
+            ],
+            "max": [
+                0.00596633460372686,
+                0.0025814394466579,
+                0.208061933517456
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 90,
+            "bufferView": 17,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 90,
+            "bufferView": 18,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 522,
+            "bufferView": 19,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 434,
+            "bufferView": 20,
+            "byteOffset": 0,
+            "min": [
+                -0.0165495183318853,
+                -0.0269855596125126,
+                0.200441896915436
+            ],
+            "max": [
+                0.0162418987601995,
+                0.00155082938726991,
+                0.215560913085938
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 434,
+            "bufferView": 21,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 434,
+            "bufferView": 22,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5123,
+            "type": "SCALAR",
+            "count": 1467,
+            "bufferView": 23,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 453,
+            "bufferView": 24,
+            "byteOffset": 0,
+            "min": [
+                -0.132257491350174,
+                -0.122277483344078,
+                -0.0104256197810173
+            ],
+            "max": [
+                0.132243737578392,
+                0.122277446091175,
+                0.00311489729210734
+            ]
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC3",
+            "count": 453,
+            "bufferView": 25,
+            "byteOffset": 0
+        },
+        {
+            "componentType": 5126,
+            "type": "VEC2",
+            "count": 453,
+            "bufferView": 26,
+            "byteOffset": 0
+        }
+    ],
+    "samplers": [
+        {}
+    ],
+    "materials": [
+        {
+            "name": "Material #3293751",
+            "alphaMode": "OPAQUE",
+            "extras": {
+                "fromFBX": {
+                    "shadingModel": "<unknown>",
+                    "isTruePBR": false
+                }
+            },
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.960784375667572,
+                    0.937254965305328,
+                    0.901960849761963,
+                    1.0
+                ],
+                "metallicFactor": 0.200000002980232,
+                "roughnessFactor": 0.800000011920929
+            }
+        },
+        {
+            "name": "Material #3293752",
+            "alphaMode": "OPAQUE",
+            "extras": {
+                "fromFBX": {
+                    "shadingModel": "<unknown>",
+                    "isTruePBR": false
+                }
+            },
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.415686309337616,
+                    0.415686309337616,
+                    0.415686309337616,
+                    1.0
+                ],
+                "metallicFactor": 0.200000002980232,
+                "roughnessFactor": 0.800000011920929
+            }
+        },
+        {
+            "name": "Material #3293756",
+            "alphaMode": "OPAQUE",
+            "extras": {
+                "fromFBX": {
+                    "shadingModel": "<unknown>",
+                    "isTruePBR": false
+                }
+            },
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.0980392247438431,
+                    0.0980392247438431,
+                    0.0980392247438431,
+                    1.0
+                ],
+                "metallicFactor": 0.200000002980232,
+                "roughnessFactor": 0.800000011920929
+            }
+        },
+        {
+            "name": "Material #3293755",
+            "alphaMode": "OPAQUE",
+            "extras": {
+                "fromFBX": {
+                    "shadingModel": "<unknown>",
+                    "isTruePBR": false
+                }
+            },
+            "emissiveFactor": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.0,
+                    0.0,
+                    0.0,
+                    1.0
+                ],
+                "metallicFactor": 0.200000002980232,
+                "roughnessFactor": 0.800000011920929
+            }
+        },
+        {
+            "name": "blue",
+            "alphaMode": "OPAQUE",
+            "extras": {
+                "fromFBX": {
+                    "shadingModel": "<unknown>",
+                    "isTruePBR": false
+                }
+            },
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.0980392247438431,
+                    0.274509817361832,
+                    0.517647087574005,
+                    1.0
+                ],
+                "metallicFactor": 0.200000002980232,
+                "roughnessFactor": 0.800000011920929
+            }
+        }
+    ],
+    "meshes": [
+        {
+            "name": "windstation018",
+            "primitives": [
+                {
+                    "material": 0,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 5,
+                        "POSITION": 4,
+                        "TEXCOORD_0": 6
+                    },
+                    "indices": 3
+                },
+                {
+                    "material": 1,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 13,
+                        "POSITION": 12,
+                        "TEXCOORD_0": 14
+                    },
+                    "indices": 11
+                },
+                {
+                    "material": 2,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 17,
+                        "POSITION": 16,
+                        "TEXCOORD_0": 18
+                    },
+                    "indices": 15
+                },
+                {
+                    "material": 3,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 21,
+                        "POSITION": 20,
+                        "TEXCOORD_0": 22
+                    },
+                    "indices": 19
+                }
+            ]
+        },
+        {
+            "name": "windstation_fun018",
+            "primitives": [
+                {
+                    "material": 0,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 9,
+                        "POSITION": 8,
+                        "TEXCOORD_0": 10
+                    },
+                    "indices": 7
+                },
+                {
+                    "material": 4,
+                    "mode": 4,
+                    "attributes": {
+                        "NORMAL": 25,
+                        "POSITION": 24,
+                        "TEXCOORD_0": 26
+                    },
+                    "indices": 23
+                }
+            ]
+        }
+    ],
+    "animations": [
+        {
+            "name": "Take 001",
+            "channels": [
+                {
+                    "sampler": 0,
+                    "target": {
+                        "node": 3,
+                        "path": "translation"
+                    }
+                },
+                {
+                    "sampler": 1,
+                    "target": {
+                        "node": 3,
+                        "path": "rotation"
+                    }
+                }
+            ],
+            "samplers": [
+                {
+                    "input": 0,
+                    "interpolation": "LINEAR",
+                    "output": 1
+                },
+                {
+                    "input": 0,
+                    "interpolation": "LINEAR",
+                    "output": 2
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "name": "RootNode",
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ],
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "children": [
+                1
+            ]
+        },
+        {
+            "name": "3D084",
+            "translation": [
+                16.514778137207,
+                1.27380585670471,
+                -14.8210554122925
+            ],
+            "rotation": [
+                5.33850794681712e-08,
+                0.70710676908493,
+                0.70710676908493,
+                -5.33850794681712e-08
+            ],
+            "scale": [
+                8.37855339050293,
+                8.37855339050293,
+                8.37855339050293
+            ],
+            "children": [
+                2,
+                3
+            ]
+        },
+        {
+            "name": "windstation018",
+            "translation": [
+                -0.00875503476709127,
+                -0.00660263048484921,
+                0.216616854071617
+            ],
+            "rotation": [
+                0.0,
+                -2.18185563571239e-33,
+                7.105427357601e-15,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "mesh": 0
+        },
+        {
+            "name": "windstation_fun018",
+            "translation": [
+                0.0,
+                0.0244056694209576,
+                0.381586521863937
+            ],
+            "rotation": [
+                5.33850759154575e-08,
+                0.70710676908493,
+                0.70710676908493,
+                5.33850759154575e-08
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "mesh": 1
+        }
+    ]
+}

src/assets/styles/button.less

@@ -1,5 +1,6 @@
 .btn {
-  height: 30px;
+  height: 33px;
+  line-height: 33px;
   flex: 0 0 auto;
   background: transparent;
   border: 1px solid @darkgray;

src/components/arcgis/arcgis.vue

@@ -23,9 +23,11 @@
     let point_graphicsLayer = null;
     let line_graphicsLayer = null;
     let text_graphicsLayer = null;
+    let img_graphicsLayer = null;
     let point_graphics = [];
     let line_graphics = [];
     let text_graphics = [];
+    let img_graphics = [];
 
     export default {
         // 名称
@@ -93,6 +95,7 @@
                     },
                 ],
                 syzImg: require("@assets/temp.png"),
+                tempImg: require("@assets/temp1.png"),
             }
         },
         // 函数
@@ -157,9 +160,13 @@
                 text_graphicsLayer = new GraphicsLayer({
                     graphics: []
                 });
+                img_graphicsLayer = new GraphicsLayer({
+                    graphics: []
+                });
                 map.add(line_graphicsLayer);
                 map.add(point_graphicsLayer);
                 map.add(text_graphicsLayer);
+                map.add(img_graphicsLayer);
                 view.on("click", (event) => {
                     view.hitTest(event).then((response) => {
                         let result = null;
@@ -189,6 +196,32 @@
                 }
             },
             // 添加图片点
+            addImagePoint: function (point, src, width, height) {
+                let item = {
+                    geometry: {
+                        type: "point",
+                        spatialReference: SpatialReference.WGS84,
+                        x: point[0],
+                        y: point[1]
+                    },
+                    symbol: {
+                        type: "picture-marker",
+                        url: this.tempImg,
+                        width: width,
+                        height: height,
+                        xoffset: 0,
+                        yoffset: 0
+                    },
+                    attributes: {},
+                    popupTemplate: null
+                };
+                let graphic = new Graphic(item);
+                img_graphics.push(graphic);
+                img_graphicsLayer.add(graphic);
+            },
+            // 移除
+            remove: function (type, obj) {},
+            // 添加图片点
             addImgPoint: function(jsonItem) {
                 let item = JSON.parse(JSON.stringify(jsonItem));
                 item.geometry.type = "point";

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

@@ -133,7 +133,7 @@ export default {
           name: this.data.legend[i],
           type: "bar",
           stack: "总量",
-          //   barWidth: "60%",
+          barWidth: "10%",
           label: {
             show: false,
             position: "insideRight",

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

@@ -226,6 +226,7 @@ export default {
           result.push({
             name: value.title,
             type: "bar",
+            barWidth: "10%",
             animation: this.firstAnimation && this.showAnimation,
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {

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

@@ -0,0 +1,204 @@
+<template>
+  <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";
+
+export default {
+  name: "dsah-pie",
+  componentName: "dsah-pie",
+  props: {
+    width: {
+      type: String,
+      default: "7.407vh",
+    },
+    height: {
+      type: String,
+      default: "7.407vh",
+    },
+    name: {
+      type: String,
+      default: "名称",
+    },
+    // 传入数据
+    value: {
+      type: Number,
+      default: 25,
+    },
+    // 颜色 green yellow (partten中支持的颜色)
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+    text() {
+      return this.value + "%";
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  methods: {
+    initChart() {
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        title: [
+          {
+            text: this.text,
+            subtext: this.name,
+            x: "47%",
+            y: "25%",
+            textAlign: "center",
+            textStyle: {
+              fontSize: 20,
+              fontFamily: "Bicubik",
+              color: this.colorValue,
+              textAlign: "center",
+            },
+            subtextStyle: {
+              fontSize: 12,
+              color: "#fff",
+              textAlign: "center",
+            },
+          },
+        ],
+        polar: {
+          radius: ["100%", "85%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+          startAngle: 180,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            z: "3",
+            type: "bar",
+            roundCap: true,
+            barWidth: 60,
+            showBackground: true,
+            backgroundStyle: {
+              color: this.colorValue + "30",
+            },
+            data: [this.value],
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: this.colorValue,
+                //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                //     {
+                //       offset: 0,
+                //       color: "#0ff",
+                //     },
+                //     {
+                //       offset: 1,
+                //       color: "#02aeff",
+                //     },
+                //   ]),
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["100%", "97%"],
+            startAngle: 180,
+            center: ["50%", "50%"],
+            data: [
+              {
+                hoverOffset: 1,
+                value: 100,
+                name: "",
+                itemStyle: {
+                  color: this.colorValue,
+                },
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  normal: {
+                    smooth: true,
+                    lineStyle: {
+                      width: 0,
+                    },
+                  },
+                },
+                hoverAnimation: false,
+              },
+              {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  normal: {
+                    smooth: true,
+                    lineStyle: {
+                      width: 0,
+                    },
+                  },
+                },
+                value: 0,
+                hoverAnimation: false,
+                itemStyle: {
+                  color: "transparent",
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      chart.setOption(option);
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

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

@@ -55,7 +55,7 @@ export default {
         title: [
           {
             text: this.text,
-            x: "45%",
+            x: "47%",
             y: "32%",
             textAlign: "center",
             textStyle: {

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

@@ -0,0 +1,357 @@
+<template>
+  <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";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    bardata: {
+      type: Object,
+      default: () => {
+        return {
+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
+          data: [
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          ],
+        };
+      },
+    },
+    lineData: {
+      type: Array,
+      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+    },
+    areaData: {
+      type: Array,
+      default: () => [
+        {
+          name: "1",
+          start: 0,
+          end: 100,
+          state: "green",
+        },
+        {
+          name: "1",
+          start: 100,
+          end: 200,
+          state: "red",
+        },
+        {
+          name: "1",
+          start: 200,
+          end: 300,
+          state: "yellow",
+        },
+        {
+          name: "",
+          start: 300,
+          end: 400,
+          state: "green",
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["健康趋势", "风机健康状态数量"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    legend() {
+      let data = this.bardata.legend;
+      data.push(this.units[0]);
+      return data;
+    },
+    areaChartData() {
+      let data = [];
+      for (var i = 0; i < this.areaData.length; i++) {
+        let item = this.areaData[i];
+        var color = partten.getColor(item.state);
+        data.push({
+          name: item.name,
+          value: [item.start, item.end, item.end - item.start],
+          itemStyle: {
+            normal: {
+              color: color,
+            },
+          },
+          exData: item,
+        });
+      }
+      return data;
+    },
+  },
+  methods: {
+    renderItem(params, api) {
+      var start = api.coord([api.value(0)]);
+      var end = api.coord([api.value(1)]);
+      var height = api.size([0, 1])[1];
+
+      var rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: start[1] - height / 2,
+          width: end[0] - start[0],
+          height: height,
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height,
+        }
+      );
+
+      return (
+        rectShape && {
+          type: "rect",
+          transition: ["shape"],
+          shape: rectShape,
+          style: api.style(),
+        }
+      );
+    },
+    initChart() {
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          left: 16,
+          right: 16,
+          bottom: 0,
+          top: 32,
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.bardata.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.bardata.area,
+          },
+          {
+            min: 0,
+            axisLabel: {
+              show: false,
+              formatter: function(val) {
+                return Math.max(0, val - 0) + " ms";
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.units[0],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: partten.getColor("gray") + 80,
+              },
+            },
+          },
+          {
+            type: "value",
+            name: this.units[1],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+              align: "left",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            data: [this.areaData[0].name],
+            axisLabel: { show: false },
+          },
+        ],
+        series: [],
+      };
+
+      // line data
+      if (this.lineData.length > 0) {
+        option.series.push({
+          name: this.units[0],
+          type: "line",
+          data: this.lineData,
+          smooth: true, //平滑展示
+          yAxisIndex: 0,
+          lineStyle: {
+            color: partten.getColor("green"),
+          },
+          itemStyle: {
+            color: partten.getColor("green"),
+          },
+        });
+      }
+
+      // bar data
+      for (var i = 0; i < this.bardata.legend.length; i++) {
+        option.series.push({
+          name: this.bardata.legend[i],
+          type: "bar",
+          stack: "总量",
+          yAxisIndex: 1,
+          barWidth: "10%",
+          label: {
+            show: false,
+            position: "insideRight",
+          },
+          data: this.bardata.data[i],
+        });
+      }
+
+      // 区域
+      if (this.areaData && this.areaData.length > 0) {
+        option.series.push({
+          type: "custom",
+          renderItem: this.renderItem,
+          yAxisIndex: 2,
+          xAxisIndex: 1,
+          itemStyle: {
+            opacity: 0.2,
+          },
+          tooltip: {
+            show: true,
+            formatter: function(params) {
+              return params.marker + params.name + ": " + params.value[2] + "s";
+            },
+          },
+          encode: {
+            x: [1, 2],
+            y: 0,
+          },
+          data: this.areaChartData,
+        });
+      }
+
+      chart.setOption(option);
+
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
+    },
+  },
+  emits: {
+    areaClick: null,
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -0,0 +1,404 @@
+<template>
+  <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";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    barData: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          name: "风速",
+          unit: "km",
+          data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
+        };
+      },
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", "(风速)"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+    },
+    showAnimation: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+  computed: {
+    legend() {
+      return this.barData.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      let result = [];
+      if (this.barData && this.barData.length > 0 && this.barData[0].value.length > 0) {
+        result = this.barData[0].value.map((t) => {
+          return t.text;
+        });
+      }
+      return result;
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#5a6162",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      if (this.barData && this.barData.length > 0) {
+        this.barData.forEach((value, index) => {
+          result.push({
+            name: value.title,
+            type: "bar",
+            barWidth: "10%",
+            animation: this.firstAnimation && this.showAnimation,
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
+        });
+      }
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: this.ydata.length > 1 ? 40 : 14,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              fontSize: 12,
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      // line data
+      if (this.lineData && this.lineData.data.length > 0) {
+        option.yAxis.push({
+          type: "value",
+          name: this.lineData.name,
+          axisLabel: {
+            formatter: "{value} ",
+            color: partten.getColor("gray"),
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dashed",
+              dashOffset: 10,
+              color: partten.getColor("gray") + 80,
+            },
+          },
+        });
+
+        option.series.push({
+          name: this.lineData.name,
+          type: "line",
+          data: this.lineData.data,
+          smooth: true, //平滑展示
+          yAxisIndex: option.yAxis.length - 1,
+          lineStyle: {
+            color: partten.getColor("yellow"),
+          },
+          itemStyle: {
+            color: partten.getColor("yellow"),
+          },
+        });
+      }
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -193,7 +193,7 @@ export default {
           type: "bar",
           stack: "总量",
           yAxisIndex: 1,
-          //   barWidth: "60%",
+          barWidth: "10%",
           label: {
             show: false,
             position: "insideRight",

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

@@ -0,0 +1,304 @@
+<template>
+  <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";
+
+export default {
+  name: "normal-line-chart",
+  componentName: "normal-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 2,
+            },
+            {
+              text: "6",
+              value: 2,
+            },
+            {
+              text: "7",
+              value: 2,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(14),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        var data = value.value.map((t) => {
+          return t.value;
+        });
+        const lastvalue = data[data.length - 1];
+        data[data.length - 1] = {
+          symbol: "arrow",
+          symbolSize: 12,
+          symbolRotate: -90,
+          value: lastvalue,
+        };
+
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: data,
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      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"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: util.vh(32),
+          left: util.vh(40),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+              textStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -227,7 +227,7 @@ export default {
             axisLabel: {
               formatter: "{value}",
               textStyle: {
-                color: "#333",
+                color: partten.getColor('gray'),
                 fontSize: util.vh(14),
               },
             },

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

@@ -0,0 +1,344 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import SunImg from "../../../assets/sun.png";
+import CloudImg from "../../../assets/cloud.png";
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "img-line-chart",
+  componentName: "img-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(14),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray"),
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        var imgaa = new Image();
+        var randon = Math.round(Math.random() * 1);
+        if (randon == 0) {
+          imgaa.src = SunImg;
+        } else {
+          imgaa.src = CloudImg;
+        }
+        if (index == 0) {
+          result.push({
+            name: value.title,
+            type: "line",
+            smooth: true,
+            zlevel: index,
+            label: {
+              show: true,
+              position: "top",
+              // formatter: ["  {weather| }"].join("\n"),
+              formatter: function(e) {
+                return ["  {weather| }"];
+              },
+              rich: {
+                weather: {
+                  height: 15,
+                  backgroundColor: {
+                    image: imgaa,
+                  },
+                },
+              },
+              // backgroundColor: {
+              //   image: imgaa,
+              // },
+              borderWidth: 1,
+              borderRadius: 4,
+              padding: [4, 10],
+              lineHeight: 26,
+              distance: 20,
+            },
+            lineStyle: {
+              normal: {
+                color: this.color[index],
+                width: 1,
+              },
+            },
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
+        } else {
+          result.push({
+            name: value.title,
+            type: "line",
+            smooth: true,
+            zlevel: index,
+            label: {
+              show: false,
+              position: "top",
+              borderWidth: 1,
+              borderRadius: 4,
+              padding: [4, 10],
+              lineHeight: 26,
+              distance: 20,
+            },
+            lineStyle: {
+              normal: {
+                color: this.color[index],
+                width: 1,
+              },
+            },
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
+        }
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: util.vh(32),
+          left: util.vh(40),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+              textStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -0,0 +1,317 @@
+<template>
+  <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";
+
+export default {
+  name: "double-line-chart",
+  componentName: "double-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "绿线",
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 20,
+            },
+            {
+              text: "10:00",
+              value: 1,
+            },
+            {
+              text: "11:00",
+              value: 40,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 15,
+            },
+            {
+              text: "14:00",
+              value: 30,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+        {
+          title: "黄线",
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 40,
+            },
+            {
+              text: "10:00",
+              value: 20,
+            },
+            {
+              text: "11:00",
+              value: 20,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 40,
+            },
+            {
+              text: "14:00",
+              value: 50,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: "MW",
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    series() {
+      let that = this;
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          markPoint:
+            index == 0
+              ? {
+                  data: [
+                    {
+                      type: "average",
+                      name: "保证功率",
+                      symbolSize: 0,
+                      label: {
+                        offset: [0, -40],
+                        formatter: function(param) {
+                          return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
+                        },
+                        backgroundColor: partten.getColor("green") + 33,
+                        borderColor: partten.getColor("green"),
+                        borderWidth: 0.5,
+                        borderRadius: 2,
+                        padding: 8,
+                        rich: {
+                          title: {
+                            color: partten.getColor("green"),
+                            fontSize: 12,
+                          },
+                          value: {
+                            color: "#fff",
+                            fontSize: 16,
+                            padding: [12, 0, 0, -4],
+                          },
+                        },
+                      },
+                    },
+                  ],
+                }
+              : {},
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+    yAxis() {
+      let result = [];
+      result.push({
+        type: "value",
+        name: this.unit,
+        axisLabel: {
+          formatter: "{value}",
+          fontSize: util.vh(14),
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: partten.getColor("gray"),
+            type: "dashed",
+          },
+        },
+      });
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      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"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 16,
+          left: 32,
+          right: 8,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: partten.getColor("gray"),
+                fontSize: util.vh(14),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -158,7 +158,7 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: partten.getColor("gray"),
+              color: partten.getColor("gray") + 55,
               type: "dashed",
             },
           },
@@ -262,7 +262,6 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },

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

@@ -0,0 +1,312 @@
+<template>
+  <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";
+
+export default {
+  name: "normal-line-chart",
+  componentName: "normal-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: false },
+          splitLine: { show: false },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[3],
+              width: 1,
+            },
+          },
+          showSymbol: false,
+          symbol: "circle", //数据交叉点样式
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: this.hexToRgba(this.color[3], 0.3),
+                  },
+                  {
+                    offset: 1,
+                    color: this.hexToRgba(this.color[3], 0.1),
+                  },
+                ],
+                false
+              ),
+              shadowColor: this.hexToRgba(this.color[3], 0.1),
+              shadowBlur: 10,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+          "0x" + hex.slice(3, 5)
+        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: util.vh(32),
+          left: util.vh(40),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+              textStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -76,6 +76,10 @@ export default {
       type: String,
       default: "green",
     },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -86,6 +90,7 @@ export default {
   computed: {},
   methods: {
     initChart() {
+      let that = this;
       let legend1 = this.innerData.map((v) => v.name);
       let legend2 = this.outerData.map((v) => v.name);
       let legendData = [...legend1, ...legend2];
@@ -108,16 +113,33 @@ export default {
           bottom: 24,
         },
         legend: {
+          show: this.showLegend,
           orient: "vertical", //纵向图例
           right: "16",
           bottom: 32,
           itemWidth: 15,
           itemHeight: 15,
+          formatter: (name) => {
+            if (that.innerData.length) {
+              const item = that.innerData.filter((item) => item.name === name)[0];
+              return `{name|${name}：}{value| ${item.value}}`;
+            }
+          },
           //icon: 'circle',
           itemGap: 12, //图例item间距
           textStyle: {
             color: partten.getColor("gray"),
             fontSize: util.vh(14),
+            rich: {
+              name: {
+                color: partten.getColor("gray"),
+                fontSize: 12,
+              },
+              value: {
+                color: partten.getColor("grayl"),
+                fontSize: 12,
+              },
+            },
           },
           data: legend1,
         },

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

@@ -0,0 +1,268 @@
+<template>
+    <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";
+
+export default {
+    name: "radar-pie",
+    componentName: "radar-pie",
+    props: {
+        width: {
+            type: String,
+            default: "100%",
+        },
+        height: {
+            type: String,
+            default: "18.519vh",
+        },
+        // 百分比值
+        // 外部饼图数据
+        list: {
+            type: Array,
+            default: () => [
+                {
+                    value: 310,
+                    name: "邮件营销",
+                },
+                {
+                    value: 234,
+                    name: "联盟广告",
+                },
+                {
+                    value: 335,
+                    name: "视频广告",
+                },
+                {
+                    value: 548,
+                    name: "百度",
+                },
+                {
+                    value: 351,
+                    name: "谷歌",
+                },
+            ],
+        },
+    },
+    data() {
+        return {
+            id: "",
+            chart: null,
+        };
+    },
+    computed: {},
+    methods: {
+        initChart() {
+            let option = {
+                color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+                tooltip: {
+                    trigger: "item",
+                    backgroundColor: "rgba(0,0,0,0.4)",
+                    borderColor: partten.getColor("gray"),
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: util.vh(16),
+                    },
+                },
+                grid: {
+                    top: 8,
+                    left: 8,
+                    right: 8,
+                    bottom: 8,
+                    containLabel: true,
+                },
+                legend: {
+                    icon: "circle",
+                    orient: "vertical",
+                    top: "center",
+                    right: "0",
+                    align: "left",
+                    textStyle: {
+                        color: "#fff",
+                    },
+                    itemGap: 8,
+                },
+                radar: {
+                    center: ["35%", "50%"],
+                    radius: "80%",
+                    startAngle: 90,
+                    splitNumber: 8,
+                    shape: "circle",
+                    splitArea: {
+                        areaStyle: {
+                            color: ["transparent"],
+                        },
+                    },
+                    axisLabel: {
+                        show: false,
+                        fontSize: 18,
+                        color: "#fff",
+                        fontStyle: "normal",
+                        fontWeight: "normal",
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#606769", //
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#606769", //
+                        },
+                    },
+                    indicator: [
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                        {
+                            name: "",
+                            max: 100,
+                        },
+                    ],
+                },
+                series: [
+                    {
+                        name: "TITLE",
+                        type: "pie",
+                        clockwise: false,
+                        startAngle: 90,
+                        radius: "70%",
+                        center: ["35%", "50%"],
+                        hoverAnimation: false,
+                        roseType: "radius", //area
+                        data: this.list,
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            normal: {
+                                length: 20,
+                                length2: 30,
+                                lineStyle: {
+                                    width: 1,
+                                },
+                            },
+                        },
+                    },
+                ],
+            };
+
+            this.chart.setOption(option);
+        },
+    },
+    created() {
+        this.id = "pie-chart-" + util.newGUID();
+    },
+    mounted() {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.chart = echarts.init(this.$el);
+        this.initChart();
+    },
+    updated() {
+        this.initChart();
+    },
+};
+</script>
+
+<style lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+</style>

src/components/chart/radar/direction-radar-chart.vue

@@ -111,14 +111,14 @@ export default {
         grid: {
           left: 40,
           right: 40,
-          bottom: 80,
-          top: 80,
-          containLabel: true,
+          bottom: "40%",
+          top: "40%",
+          containLabel: false,
         },
         radar: [
           // 最低层 80
           {
-            radius: "80%",
+            radius: "70%",
             center: ["50%", "50%"],
             splitNumber: 1,
             nameGap: "10",
@@ -148,7 +148,7 @@ export default {
           },
           // 次外层 70 - 80
           {
-            radius: ["70%", "80%"],
+            radius: ["60%", "70%"],
             center: ["50%", "50%"],
             startAngle: 90,
             splitNumber: 2,
@@ -183,7 +183,7 @@ export default {
           },
           // 渐变层 40 - 70
           {
-            radius: ["40%", "70%"],
+            radius: ["30%", "60%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -226,7 +226,7 @@ export default {
           },
           // 内层 0 - 40
           {
-            radius: "40%",
+            radius: "30%",
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {

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

@@ -0,0 +1,689 @@
+<template>
+  <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";
+
+export default {
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    // 传入数据
+    data: {
+      type: Array,
+      default: () => [
+        {
+          title: "男",
+          value: [
+            [161.2, 51.6],
+            [167.5, 59.0],
+            [159.5, 49.2],
+            [157.0, 63.0],
+            [155.8, 53.6],
+            [170.0, 59.0],
+            [159.1, 47.6],
+            [166.0, 69.8],
+            [176.2, 66.8],
+            [160.2, 75.2],
+            [172.5, 55.2],
+            [170.9, 54.2],
+            [172.9, 62.5],
+            [153.4, 42.0],
+            [160.0, 50.0],
+            [147.2, 49.8],
+            [168.2, 49.2],
+            [175.0, 73.2],
+            [157.0, 47.8],
+            [167.6, 68.8],
+            [159.5, 50.6],
+            [175.0, 82.5],
+            [166.8, 57.2],
+            [176.5, 87.8],
+            [170.2, 72.8],
+            [174.0, 54.5],
+            [173.0, 59.8],
+            [179.9, 67.3],
+            [170.5, 67.8],
+            [160.0, 47.0],
+            [154.4, 46.2],
+            [162.0, 55.0],
+            [176.5, 83.0],
+            [160.0, 54.4],
+            [152.0, 45.8],
+            [162.1, 53.6],
+            [170.0, 73.2],
+            [160.2, 52.1],
+            [161.3, 67.9],
+            [166.4, 56.6],
+            [168.9, 62.3],
+            [163.8, 58.5],
+            [167.6, 54.5],
+            [160.0, 50.2],
+            [161.3, 60.3],
+            [167.6, 58.3],
+            [165.1, 56.2],
+            [160.0, 50.2],
+            [170.0, 72.9],
+            [157.5, 59.8],
+            [167.6, 61.0],
+            [160.7, 69.1],
+            [163.2, 55.9],
+            [152.4, 46.5],
+            [157.5, 54.3],
+            [168.3, 54.8],
+            [180.3, 60.7],
+            [165.5, 60.0],
+            [165.0, 62.0],
+            [164.5, 60.3],
+            [156.0, 52.7],
+            [160.0, 74.3],
+            [163.0, 62.0],
+            [165.7, 73.1],
+            [161.0, 80.0],
+            [162.0, 54.7],
+            [166.0, 53.2],
+            [174.0, 75.7],
+            [172.7, 61.1],
+            [167.6, 55.7],
+            [151.1, 48.7],
+            [164.5, 52.3],
+            [163.5, 50.0],
+            [152.0, 59.3],
+            [169.0, 62.5],
+            [164.0, 55.7],
+            [161.2, 54.8],
+            [155.0, 45.9],
+            [170.0, 70.6],
+            [176.2, 67.2],
+            [170.0, 69.4],
+            [162.5, 58.2],
+            [170.3, 64.8],
+            [164.1, 71.6],
+            [169.5, 52.8],
+            [163.2, 59.8],
+            [154.5, 49.0],
+            [159.8, 50.0],
+            [173.2, 69.2],
+            [170.0, 55.9],
+            [161.4, 63.4],
+            [169.0, 58.2],
+            [166.2, 58.6],
+            [159.4, 45.7],
+            [162.5, 52.2],
+            [159.0, 48.6],
+            [162.8, 57.8],
+            [159.0, 55.6],
+            [179.8, 66.8],
+            [162.9, 59.4],
+            [161.0, 53.6],
+            [151.1, 73.2],
+            [168.2, 53.4],
+            [168.9, 69.0],
+            [173.2, 58.4],
+            [171.8, 56.2],
+            [178.0, 70.6],
+            [164.3, 59.8],
+            [163.0, 72.0],
+            [168.5, 65.2],
+            [166.8, 56.6],
+            [172.7, 105.2],
+            [163.5, 51.8],
+            [169.4, 63.4],
+            [167.8, 59.0],
+            [159.5, 47.6],
+            [167.6, 63.0],
+            [161.2, 55.2],
+            [160.0, 45.0],
+            [163.2, 54.0],
+            [162.2, 50.2],
+            [161.3, 60.2],
+            [149.5, 44.8],
+            [157.5, 58.8],
+            [163.2, 56.4],
+            [172.7, 62.0],
+            [155.0, 49.2],
+            [156.5, 67.2],
+            [164.0, 53.8],
+            [160.9, 54.4],
+            [162.8, 58.0],
+            [167.0, 59.8],
+            [160.0, 54.8],
+            [160.0, 43.2],
+            [168.9, 60.5],
+            [158.2, 46.4],
+            [156.0, 64.4],
+            [160.0, 48.8],
+            [167.1, 62.2],
+            [158.0, 55.5],
+            [167.6, 57.8],
+            [156.0, 54.6],
+            [162.1, 59.2],
+            [173.4, 52.7],
+            [159.8, 53.2],
+            [170.5, 64.5],
+            [159.2, 51.8],
+            [157.5, 56.0],
+            [161.3, 63.6],
+            [162.6, 63.2],
+            [160.0, 59.5],
+            [168.9, 56.8],
+            [165.1, 64.1],
+            [162.6, 50.0],
+            [165.1, 72.3],
+            [166.4, 55.0],
+            [160.0, 55.9],
+            [152.4, 60.4],
+            [170.2, 69.1],
+            [162.6, 84.5],
+            [170.2, 55.9],
+            [158.8, 55.5],
+            [172.7, 69.5],
+            [167.6, 76.4],
+            [162.6, 61.4],
+            [167.6, 65.9],
+            [156.2, 58.6],
+            [175.2, 66.8],
+            [172.1, 56.6],
+            [162.6, 58.6],
+            [160.0, 55.9],
+            [165.1, 59.1],
+            [182.9, 81.8],
+            [166.4, 70.7],
+            [165.1, 56.8],
+            [177.8, 60.0],
+            [165.1, 58.2],
+            [175.3, 72.7],
+            [154.9, 54.1],
+            [158.8, 49.1],
+            [172.7, 75.9],
+            [168.9, 55.0],
+            [161.3, 57.3],
+            [167.6, 55.0],
+            [165.1, 65.5],
+            [175.3, 65.5],
+            [157.5, 48.6],
+            [163.8, 58.6],
+            [167.6, 63.6],
+            [165.1, 55.2],
+            [165.1, 62.7],
+            [168.9, 56.6],
+            [162.6, 53.9],
+            [164.5, 63.2],
+            [176.5, 73.6],
+            [168.9, 62.0],
+            [175.3, 63.6],
+            [159.4, 53.2],
+            [160.0, 53.4],
+            [170.2, 55.0],
+            [162.6, 70.5],
+            [167.6, 54.5],
+            [162.6, 54.5],
+            [160.7, 55.9],
+            [160.0, 59.0],
+            [157.5, 63.6],
+            [162.6, 54.5],
+            [152.4, 47.3],
+            [170.2, 67.7],
+            [165.1, 80.9],
+            [172.7, 70.5],
+            [165.1, 60.9],
+            [170.2, 63.6],
+            [170.2, 54.5],
+            [170.2, 59.1],
+            [161.3, 70.5],
+            [167.6, 52.7],
+            [167.6, 62.7],
+            [165.1, 86.3],
+            [162.6, 66.4],
+            [152.4, 67.3],
+            [168.9, 63.0],
+            [170.2, 73.6],
+            [175.2, 62.3],
+            [175.2, 57.7],
+            [160.0, 55.4],
+            [165.1, 104.1],
+            [174.0, 55.5],
+            [170.2, 77.3],
+            [160.0, 80.5],
+            [167.6, 64.5],
+            [167.6, 72.3],
+            [167.6, 61.4],
+            [154.9, 58.2],
+            [162.6, 81.8],
+            [175.3, 63.6],
+            [171.4, 53.4],
+            [157.5, 54.5],
+            [165.1, 53.6],
+            [160.0, 60.0],
+            [174.0, 73.6],
+            [162.6, 61.4],
+            [174.0, 55.5],
+            [162.6, 63.6],
+            [161.3, 60.9],
+            [156.2, 60.0],
+            [149.9, 46.8],
+            [169.5, 57.3],
+            [160.0, 64.1],
+            [175.3, 63.6],
+            [169.5, 67.3],
+            [160.0, 75.5],
+            [172.7, 68.2],
+            [162.6, 61.4],
+            [157.5, 76.8],
+            [176.5, 71.8],
+            [164.4, 55.5],
+            [160.7, 48.6],
+            [174.0, 66.4],
+            [163.8, 67.3],
+          ],
+        },
+        {
+          title: "女",
+          value: [
+            [174.0, 65.6],
+            [175.3, 71.8],
+            [193.5, 80.7],
+            [186.5, 72.6],
+            [187.2, 78.8],
+            [181.5, 74.8],
+            [184.0, 86.4],
+            [184.5, 78.4],
+            [175.0, 62.0],
+            [184.0, 81.6],
+            [180.0, 76.6],
+            [177.8, 83.6],
+            [192.0, 90.0],
+            [176.0, 74.6],
+            [174.0, 71.0],
+            [184.0, 79.6],
+            [192.7, 93.8],
+            [171.5, 70.0],
+            [173.0, 72.4],
+            [176.0, 85.9],
+            [176.0, 78.8],
+            [180.5, 77.8],
+            [172.7, 66.2],
+            [176.0, 86.4],
+            [173.5, 81.8],
+            [178.0, 89.6],
+            [180.3, 82.8],
+            [180.3, 76.4],
+            [164.5, 63.2],
+            [173.0, 60.9],
+            [183.5, 74.8],
+            [175.5, 70.0],
+            [188.0, 72.4],
+            [189.2, 84.1],
+            [172.8, 69.1],
+            [170.0, 59.5],
+            [182.0, 67.2],
+            [170.0, 61.3],
+            [177.8, 68.6],
+            [184.2, 80.1],
+            [186.7, 87.8],
+            [171.4, 84.7],
+            [172.7, 73.4],
+            [175.3, 72.1],
+            [180.3, 82.6],
+            [182.9, 88.7],
+            [188.0, 84.1],
+            [177.2, 94.1],
+            [172.1, 74.9],
+            [167.0, 59.1],
+            [169.5, 75.6],
+            [174.0, 86.2],
+            [172.7, 75.3],
+            [182.2, 87.1],
+            [164.1, 55.2],
+            [163.0, 57.0],
+            [171.5, 61.4],
+            [184.2, 76.8],
+            [174.0, 86.8],
+            [174.0, 72.2],
+            [177.0, 71.6],
+            [186.0, 84.8],
+            [167.0, 68.2],
+            [171.8, 66.1],
+            [182.0, 72.0],
+            [167.0, 64.6],
+            [177.8, 74.8],
+            [164.5, 70.0],
+            [192.0, 101.6],
+            [175.5, 63.2],
+            [171.2, 79.1],
+            [181.6, 78.9],
+            [167.4, 67.7],
+            [181.1, 66.0],
+            [177.0, 68.2],
+            [174.5, 63.9],
+            [177.5, 72.0],
+            [170.5, 56.8],
+            [182.4, 74.5],
+            [197.1, 90.9],
+            [180.1, 93.0],
+            [175.5, 80.9],
+            [180.6, 72.7],
+            [184.4, 68.0],
+            [175.5, 70.9],
+            [180.6, 72.5],
+            [177.0, 72.5],
+            [177.1, 83.4],
+            [181.6, 75.5],
+            [176.5, 73.0],
+            [175.0, 70.2],
+            [174.0, 73.4],
+            [165.1, 70.5],
+            [177.0, 68.9],
+            [192.0, 102.3],
+            [176.5, 68.4],
+            [169.4, 65.9],
+            [182.1, 75.7],
+            [179.8, 84.5],
+            [175.3, 87.7],
+            [184.9, 86.4],
+            [177.3, 73.2],
+            [167.4, 53.9],
+            [178.1, 72.0],
+            [168.9, 55.5],
+            [157.2, 58.4],
+            [180.3, 83.2],
+            [170.2, 72.7],
+            [177.8, 64.1],
+            [172.7, 72.3],
+            [165.1, 65.0],
+            [186.7, 86.4],
+            [165.1, 65.0],
+            [174.0, 88.6],
+            [175.3, 84.1],
+            [185.4, 66.8],
+            [177.8, 75.5],
+            [180.3, 93.2],
+            [180.3, 82.7],
+            [177.8, 58.0],
+            [177.8, 79.5],
+            [177.8, 78.6],
+            [177.8, 71.8],
+            [177.8, 116.4],
+            [163.8, 72.2],
+            [188.0, 83.6],
+            [198.1, 85.5],
+            [175.3, 90.9],
+            [166.4, 85.9],
+            [190.5, 89.1],
+            [166.4, 75.0],
+            [177.8, 77.7],
+            [179.7, 86.4],
+            [172.7, 90.9],
+            [190.5, 73.6],
+            [185.4, 76.4],
+            [168.9, 69.1],
+            [167.6, 84.5],
+            [175.3, 64.5],
+            [170.2, 69.1],
+            [190.5, 108.6],
+            [177.8, 86.4],
+            [190.5, 80.9],
+            [177.8, 87.7],
+            [184.2, 94.5],
+            [176.5, 80.2],
+            [177.8, 72.0],
+            [180.3, 71.4],
+            [171.4, 72.7],
+            [172.7, 84.1],
+            [172.7, 76.8],
+            [177.8, 63.6],
+            [177.8, 80.9],
+            [182.9, 80.9],
+            [170.2, 85.5],
+            [167.6, 68.6],
+            [175.3, 67.7],
+            [165.1, 66.4],
+            [185.4, 102.3],
+            [181.6, 70.5],
+            [172.7, 95.9],
+            [190.5, 84.1],
+            [179.1, 87.3],
+            [175.3, 71.8],
+            [170.2, 65.9],
+            [193.0, 95.9],
+            [171.4, 91.4],
+            [177.8, 81.8],
+            [177.8, 96.8],
+            [167.6, 69.1],
+            [167.6, 82.7],
+            [180.3, 75.5],
+            [182.9, 79.5],
+            [176.5, 73.6],
+            [186.7, 91.8],
+            [188.0, 84.1],
+            [188.0, 85.9],
+            [177.8, 81.8],
+            [174.0, 82.5],
+            [177.8, 80.5],
+            [171.4, 70.0],
+            [185.4, 81.8],
+            [185.4, 84.1],
+            [188.0, 90.5],
+            [188.0, 91.4],
+            [182.9, 89.1],
+            [176.5, 85.0],
+            [175.3, 69.1],
+            [175.3, 73.6],
+            [188.0, 80.5],
+            [188.0, 82.7],
+            [175.3, 86.4],
+            [170.5, 67.7],
+            [179.1, 92.7],
+            [177.8, 93.6],
+            [175.3, 70.9],
+            [182.9, 75.0],
+            [170.8, 93.2],
+            [188.0, 93.2],
+            [180.3, 77.7],
+            [177.8, 61.4],
+            [185.4, 94.1],
+            [168.9, 75.0],
+            [185.4, 83.6],
+            [180.3, 85.5],
+            [174.0, 73.9],
+            [167.6, 66.8],
+            [182.9, 87.3],
+            [160.0, 72.3],
+            [180.3, 88.6],
+            [167.6, 75.5],
+            [186.7, 101.4],
+            [175.3, 91.1],
+            [175.3, 67.3],
+            [175.9, 77.7],
+            [175.3, 81.8],
+            [179.1, 75.5],
+            [181.6, 84.5],
+            [177.8, 76.6],
+            [182.9, 85.0],
+            [177.8, 102.5],
+            [184.2, 77.3],
+            [179.1, 71.8],
+            [176.5, 87.9],
+            [188.0, 94.3],
+            [174.0, 70.9],
+            [167.6, 64.5],
+            [170.2, 77.3],
+            [167.6, 72.3],
+            [188.0, 87.3],
+            [174.0, 80.0],
+            [176.5, 82.3],
+            [180.3, 73.6],
+            [167.6, 74.1],
+            [188.0, 85.9],
+            [180.3, 73.2],
+            [167.6, 76.3],
+            [183.0, 65.9],
+            [183.0, 90.9],
+            [179.1, 89.1],
+            [170.2, 62.3],
+            [177.8, 82.7],
+            [179.1, 79.1],
+            [190.5, 98.2],
+            [177.8, 84.1],
+            [180.3, 83.2],
+            [180.3, 83.2],
+          ],
+        },
+      ],
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+    };
+  },
+  computed: {
+    series() {
+      let result = [];
+      this.data.forEach((element, index) => {
+        result.push({
+          name: element.title,
+          type: "scatter",
+          emphasis: {
+            focus: "series",
+          },
+          data: element.value,
+          markPoint: {
+            data: [
+              { type: "max", name: "最大值" },
+              { type: "min", name: "最小值" },
+            ],
+          },
+        });
+      });
+      return result;
+    },
+    legend() {
+      return this.data.map((t) => {
+        return t.title;
+      });
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          top: 40,
+          left: 24,
+          right: 24,
+          bottom: 24,
+          containLabel: true,
+        },
+        tooltip: {
+          // trigger: 'axis',
+          showDelay: 0,
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: util.vh(16),
+          },
+          axisPointer: {
+            show: true,
+            type: "cross",
+            lineStyle: {
+              type: "dashed",
+              width: 1,
+            },
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: "40",
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "value",
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/coms/loading/loading.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="page-loading-me" v-if="showLoading">
+        <span :class="'page-loading-icon svg-icon svg-icon-'+color+' svg-icon-lg'">
+            <SvgIcon svgid="svg-loading"></SvgIcon>
+        </span>
+    </div>
+</template>
+
+<script>
+    import SvgIcon from "@com/coms/icon/svg-icon.vue";
+    export default {
+        // 名称
+        name: "loading",
+        // 组件
+        components: {
+            SvgIcon
+        },
+        // 传入参数
+        props: {
+            // 默认选择第几组
+            color: {
+                type: String,
+                default: "gral-l",
+            },
+        },
+        // 自定义事件
+        emits: { },
+        // 数据
+        data() {
+            return {
+                showLoading: true
+            };
+        },
+        // 函数
+        methods: {
+            show: function() {
+                this.showLoading = true;
+            },
+            hide: function() {
+                this.showLoading = false;
+            },
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    };
+</script>
+
+<style lang="less">
+    .page-loading-me {
+        position: absolute;
+        z-index: 9999;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .page-loading-icon {
+            animation: rotate 3s linear infinite;
+        }
+        
+        @keyframes rotate {
+            from {
+                transform: rotate(0);
+            }
+
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+</style>

src/components/coms/panel/panel-sand-toolbar.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="com-panel-sand">
+        <div class="com-panel-sand-header font-sm white">
+            {{ title }}<div class="com-panel-sand-sub-title"><slot name="tools"></slot></div>
+        </div>
+        <div class="com-panel-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "com-panel-sand-toolbar",
+    componentName: "com-panel-sand-toolbar",
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: "",
+        },
+    },
+};
+</script>
+<style lang="less">
+.com-panel-sand {
+    background: #53626826;
+    padding: 0 1.481vh 1.481vh 1.481vh;
+    border-top: 1px solid #15a952;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        background: #15a952;
+        right: -2.5px;
+        top: -2.5px;
+    }
+
+    .com-panel-sand-header {
+        text-align: center;
+        position: relative;
+        padding: 0.833vh 0;
+        border-bottom: 1px solid #15a95266;
+
+        &::after,
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: -1px;
+            width: 15px;
+            height: 1px;
+            background: #15a952;
+        }
+
+        &::after {
+            left: 0;
+        }
+
+        &::before {
+            right: 0;
+        }
+
+        .com-panel-sand-sub-title {
+            position: absolute;
+            right: 0;
+            top: 0.833vh;
+        }
+    }
+}
+</style>

src/components/coms/panel/panel-sand.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="com-panel-sand">
+        <div class="com-panel-sand-header font-sm white">
+            {{ title }}<span class="com-panel-sand-sub-title font-sm gray">{{ subTitle }}</span>
+        </div>
+        <div class="com-panel-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "com-panel-sand",
+    componentName: "com-panel-sand",
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: "",
+        },
+        // 副标题
+        subTitle: {
+            type: String,
+            default: "",
+        },
+    },
+};
+</script>
+<style lang="less">
+.com-panel-sand {
+    background: #53626826;
+    padding: 0 1.481vh 1.481vh 1.481vh;
+    border-top: 1px solid #15a952;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        background: #15a952;
+        right: -2.5px;
+        top: -2.5px;
+    }
+
+    .com-panel-sand-header {
+        text-align: center;
+        position: relative;
+        padding: 0.833vh 0;
+        border-bottom: 1px solid #15a95266;
+
+        &::after,
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: -1px;
+            width: 15px;
+            height: 1px;
+            background: #15a952;
+        }
+
+        &::after {
+            left: 0;
+        }
+
+        &::before {
+            right: 0;
+        }
+
+        .com-panel-sand-sub-title {
+            position: absolute;
+            right: 0;
+            top: 0.833vh;
+        }
+    }
+}
+</style>

src/components/coms/panel/panel.vue

@@ -92,6 +92,10 @@ export default {
     }
   }
 
+  .panel-body {
+    position: relative;
+  }
+
   &.line .panel-body {
     padding-left: 1.185vh;
   }

src/components/coms/progress-bar/progress-bar.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="progress-bar">
+        <div class="progress-bar-header">
+            <div class="progress-bar-title gray-l font-md">{{ title }}</div>
+            <div class="progress-bar-state" :class="'bg-' + color"></div>
+        </div>
+        <div class="progress-bar-body">
+            <div class="progress-bar-name">
+                <div class="progress-bar-text gray font-sm">{{ name }}</div>
+                <div class="progress-bar-progress font-md" :class="color">{{progress}}%</div>
+            </div>
+            <div class="progress-bar-box">
+                <div class="progress-bar-bar" :class="'bg-' + color" :style="'width: ' + progress + '%;'"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "progress-bar",
+    componentName: "progress-bar",
+    props: {
+        progress: {
+            type: Number,
+            default: 80,
+        },
+        color: {
+            type: String,
+            default: "green",
+        },
+        title: {
+            type: String,
+            default: "风机",
+        },
+        name: {
+            type: String,
+            default: "风机健康度",
+        },
+    },
+    data() {},
+    methods: {},
+};
+</script>
+
+<style lang="less">
+.progress-bar {
+    width: 100%;
+
+    .progress-bar-header {
+        width: 100%;
+        height: 3.148vh;
+        background: #53626833;
+        display: flex;
+        align-items: center;
+        padding: 0 1.852vh;
+
+        .progress-bar-state {
+            width: 1.111vh;
+            height: 1.111vh;
+            border-radius: 50%;
+            margin-left: auto;
+            position: relative;
+
+            &::after {
+                content: "";
+                width: 1.667vh;
+                height: 1.667vh;
+                border-radius: 50%;
+                background: #53626833;
+                position: absolute;
+                top: -0.278vh;
+                left: -0.278vh;
+            }
+        }
+    }
+
+    .progress-bar-body {
+        padding: 11px 20px;
+
+        .progress-bar-name {
+            display: flex;
+
+            .progress-bar-progress {
+                margin-left: auto;
+            }
+        }
+
+        .progress-bar-box {
+            width: 100%;
+            height: 0.741vh;
+            background: #53626833;
+            margin-top: 0.741vh;
+            position: relative;
+
+            .progress-bar-bar {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+}
+</style>

src/components/coms/table/table.vue

@@ -223,7 +223,8 @@ export default {
 
       th {
         background-color: fade(@darkBack, 20%);
-        padding: 1.481vh 0;
+        height: 30px;
+        line-height: 30px;
         color: @titleGray;
         font-weight: 400;
         font-size: @fontsize-s;

src/views/Demo.vue

@@ -5,11 +5,20 @@
   <el-scrollbar v-if="currTab == 1" style="height:85%;">
     <h2>图表</h2>
 
+    <h2>07-08新增</h2>
+    <h3>组合: 时间区域 area-bar-chart</h3>
+    <area-bar-chart @areaClick="areaBarChartClick" :showLegend="true" />
+
+    <h3>组合: 柱线图 multiple-bar-line-chart</h3>
+    <multiple-bar-line-chart :height="'250px'" />
+
+    <h3>散点图 normal-scatter-chart</h3>
+    <normal-scatter-chart />
+
     <h2>07-07新增</h2>
     <h3>柱状图：multiple-y-line-chart</h3>
     <multiple-y-line-chart :height="'300px'" />
 
-
     <h2>old</h2>
 
     <h3>柱状图：horizontal-bar-chart</h3>
@@ -198,7 +207,9 @@ import MultipleHoverBarChart from "../components/chart/bar/multiple-hover-bar-ch
 import PercentBar from "../components/chart/bar/percent-bar.vue";
 import SingleBarChart from "../components/chart/bar/single-bar-chart.vue";
 import Thermometer from "../components/chart/bar/thermometer.vue";
+import AreaBarChart from "../components/chart/combination/area-bar-chart.vue";
 import BarLineChart from "../components/chart/combination/bar-line-chart.vue";
+import MultipleBarLineChart from '../components/chart/combination/multiple-bar-line-chart.vue';
 import VertivalBarLineChart from "../components/chart/combination/vertival-bar-line-chart.vue";
 import DoubleLineChart from "../components/chart/line/double-line-chart.vue";
 import MultipleLineChart from "../components/chart/line/multiple-line-chart.vue";
@@ -213,6 +224,7 @@ import PercentPieChart from "../components/chart/pie/percent-pie-chart.vue";
 import DirectionRadarChart from "../components/chart/radar/direction-radar-chart.vue";
 import NormalRadarChart from "../components/chart/radar/normal-radar-chart.vue";
 import RadarChart from "../components/chart/radar/radar-chart.vue";
+import NormalScatterChart from "../components/chart/scatter/normal-scatter-chart.vue";
 import BtnGroupDouble from "../components/coms/btn/btn-group-double.vue";
 import Card1 from "../components/coms/cards/card-1.vue";
 import PercentCard2 from "../components/coms/cards/percent-card-2.vue";
@@ -267,6 +279,9 @@ export default {
     CheckTable,
     SvgIcon,
     MultipleYLineChart,
+    NormalScatterChart,
+    AreaBarChart,
+    MultipleBarLineChart,
   },
   methods: {
     select(data) {
@@ -316,10 +331,13 @@ export default {
       console.log("table check event");
       console.log(param);
     },
+    areaBarChartClick(param) {
+      console.log(param);
+    },
   },
   data() {
     return {
-      currTab: 2,
+      currTab: 1,
       tabData: [
         {
           id: "1",

src/views/HealthControl/Health0.vue

@@ -0,0 +1,737 @@
+<template>
+    <div class="health-0">
+        <el-row>
+            <el-col :span="12">
+                <el-row>
+                    <el-col :span="24">
+                        <div class="query mg-b-8">
+                            <div class="query-items">
+                                <div class="query-item">
+                                    <div class="lable">风场：</div>
+                                    <div class="search-input">
+                                        <el-select v-model="value1" clearable placeholder="请选择风场" popper-class="select">
+                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                                        </el-select>
+                                    </div>
+                                </div>
+                                <div class="query-item">
+                                    <div class="lable">风机：</div>
+                                    <div class="search-input">
+                                        <el-select v-model="value2" multiple placeholder="请选择风机" popper-class="select">
+                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                                        </el-select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="query-actions">
+                                <button class="btn" type="button"><i class="el-icon-back mg-r-8"></i><span>返回</span></button>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24" class="fan-code-box">
+                        <span class="svg-icon svg-icon-white svg-icon-md mg-l-16 mg-r-16">
+                            <SvgIcon svgid="svg-wind-site"></SvgIcon>
+                        </span>
+                        <div class="fan-code">
+                            <div class="fan-code-text font-md green">MG02-01</div>
+                            <div class="fan-code-label font-md gray-l">高频：</div>
+                            <div class="fan-code-value font-md green">xxxxx</div>
+                            <div class="fan-code-label font-md gray-l">中频：</div>
+                            <div class="fan-code-value font-md green">xxxxx</div>
+                            <div class="fan-code-label font-md gray-l">低频：</div>
+                            <div class="fan-code-value font-md green">xxxxx</div>
+                        </div>
+                        <span class="svg-icon svg-icon-white svg-icon-md mg-l-16">
+                            <SvgIcon svgid="svg-wind-site"></SvgIcon>
+                        </span>
+                        <div class="fan-code bg">
+                            <div class="fan-code-label font-md gray-l">高频：</div>
+                        </div>
+                        <div class="fan-code">
+                            <div class="fan-code-value nm font-md green">100</div>
+                        </div>
+                        <button class="btn mg-l-16" type="button"><i class="el-icon-s-order mg-r-8"></i><span>健康报告</span></button>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24" style="text-align:center;">
+                        <StandAloneImg class="sai" :activeIndex="activeIndex" @selectSvg="selectSvg"></StandAloneImg>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="6">
+                        <img :src="bsxImg" class="bsx">
+                        <img :src="bsxImg" class="bsx o">
+                    </el-col>
+                    <el-col :span="6"></el-col>
+                    <el-col :span="6"></el-col>
+                    <el-col :span="6">
+                        <progress-bar title="风机" name="风机健康度"></progress-bar>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="发电机" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="齿轮箱" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="主轴" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="变桨" name="寿命指数"></progress-bar>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="偏航" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="机舱" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="变频器" name="寿命指数"></progress-bar>
+                    </el-col>
+                    <el-col :span="6" class="mg-t-16">
+                        <progress-bar title="主控" name="寿命指数"></progress-bar>
+                    </el-col>
+                </el-row>
+            </el-col>
+            <el-col :span="12" class="health-0-right">
+                <el-row>
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData1" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData2" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="card-tool">
+                            <div class="card-tool-item font-sm gray-l">故障描述</div>
+                            <div class="card-tool-item font-sm gray-l">开始时间<i class="el-icon-d-caret"></i></div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData11" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData3" />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="card-tool font-sm gray-l pd">
+                            评判扣分
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row class="mg-t-16">
+                    <el-col :span="24">
+                        <div class="table">
+                            <Table :data="tableData4" />
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import StandAloneImg from "@/views/WindSite/pages/Info/StandAloneImg.vue";
+import ProgressBar from "@com/coms/progress-bar/progress-bar.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+    setup() {},
+    components: {
+        SvgIcon,
+        StandAloneImg,
+        ProgressBar,
+        Table,
+    },
+    data() {
+        return {
+            bsxImg: require("@assets/png/bsx.png"),
+            options: [
+                {
+                    value: "选项1",
+                    label: "黄金糕",
+                },
+                {
+                    value: "选项2",
+                    label: "双皮奶",
+                },
+                {
+                    value: "选项3",
+                    label: "蚵仔煎",
+                },
+                {
+                    value: "选项4",
+                    label: "龙须面",
+                },
+                {
+                    value: "选项5",
+                    label: "北京烤鸭",
+                },
+            ],
+            value1: [],
+            value2: [],
+            activeIndex: -1,
+            tableData: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "时间",
+                        field: "time",
+                        width: "130px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障1名称",
+                        field: "v1name",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障1数量",
+                        field: "v1num",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障2名称",
+                        field: "v2name",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障2数量",
+                        field: "v2num",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障3名称",
+                        field: "v3name",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "故障3数量",
+                        field: "v3num",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        time: "1天故障数据分析",
+                        v1name: "",
+                        v1num: 0.00,
+                        v2name: "",
+                        v2num: 0.00,
+                        v3name: "",
+                        v3num: 0.00,
+                        is_light: false,
+                    },
+                    {
+                        index: 2,
+                        time: "3天故障数据分析",
+                        v1name: "",
+                        v1num: "0.00",
+                        v2name: "",
+                        v2num: "0.00",
+                        v3name: "",
+                        v3num: "0.00",
+                        is_light: false,
+                    },
+                ],
+            },
+            tableData1: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "时间",
+                        field: "time",
+                        width: "130px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "发电机",
+                        field: "fdj",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "齿轮箱",
+                        field: "clx",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "主轴",
+                        field: "zz",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "变桨",
+                        field: "bj",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "偏航",
+                        field: "ph",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "机舱",
+                        field: "jc",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "变频器",
+                        field: "bpq",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "主控",
+                        field: "zk",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        time: "1天故障数据分析",
+                        fdj: "0.00",
+                        clx: "9.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                    {
+                        index: 2,
+                        time: "3天故障数据分析",
+                        fdj: "0.00",
+                        clx: "74.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                ],
+            },
+            tableData2: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "时间",
+                        field: "time",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "评估等级",
+                        field: "level",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "得分",
+                        field: "score",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        time: "1天故障数据分析",
+                        level: "C",
+                        score: "0.00",
+                        is_light: false,
+                    },
+                ],
+            },
+            tableData11: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "时间",
+                        field: "time",
+                        width: "130px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "发电机",
+                        field: "fdj",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "齿轮箱",
+                        field: "clx",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "主轴",
+                        field: "zz",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "变桨",
+                        field: "bj",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "偏航",
+                        field: "ph",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "机舱",
+                        field: "jc",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "变频器",
+                        field: "bpq",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "主控",
+                        field: "zk",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        time: "1天故障数据分析",
+                        fdj: "0.00",
+                        clx: "9.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                    {
+                        index: 2,
+                        time: "3天故障数据分析",
+                        fdj: "0.00",
+                        clx: "74.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                    {
+                        index: 3,
+                        time: "1天故障数据分析",
+                        fdj: "0.00",
+                        clx: "9.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                    {
+                        index: 4,
+                        time: "3天故障数据分析",
+                        fdj: "0.00",
+                        clx: "74.00",
+                        zz: "0.00",
+                        bj: "0.00",
+                        ph: "0.00",
+                        jc: "0.00",
+                        bpq: "0.00",
+                        zk: "0.00",
+                        is_light: false,
+                    },
+                ],
+            },
+            tableData3: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "3-5米曲线偏差率",
+                        field: "v1",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "5-11米曲线偏差率",
+                        field: "v2",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "11-25米曲线偏差率",
+                        field: "v3",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        v1: "1.50",
+                        v2: "1.69",
+                        v3: "2.44",
+                        is_light: false,
+                    },
+                ],
+            },
+            tableData4: {
+                column: [
+                    {
+                        name: "",
+                        field: "index",
+                        width: "30px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "判断描述",
+                        field: "v1",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "是否扣分",
+                        field: "v2",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        index: 1,
+                        v1: "运行状态为故障",
+                        v2: "未扣分",
+                        is_light: false,
+                    },
+                    {
+                        index: 2,
+                        v1: "风机部件温度超出合理值范围",
+                        v2: "未扣分",
+                        is_light: false,
+                    },
+                    {
+                        index: 3,
+                        v1: "性能损失率连续三天大于基准值",
+                        v2: "未扣分",
+                        is_light: false,
+                    },
+                    {
+                        index: 4,
+                        v1: "曲线偏差率连续三天大于基准值",
+                        v2: "未扣分",
+                        is_light: false,
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        selectSvg: function(index) {
+            this.activeIndex = index;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.health-0 {
+    width: 100%;
+    height: calc(100vh - 90px);
+
+    .fan-code-box {
+        display: flex;
+        align-items: center;
+
+        .fan-code {
+            display: flex;
+            align-items: center;
+            background: #53626833;
+            padding: 7px 20px;
+
+            &.bg {
+                background: transparent;
+                padding: 7px 0;
+
+                .fan-code-label {
+                    margin-left: 8px;
+                }
+            }
+
+            .fan-code-text {
+                padding-right: 20px;
+                border-right: 1px solid #536268;
+            }
+
+            .fan-code-label {
+                margin-left: 20px;
+            }
+
+            .fan-code-value {
+                margin-left: 20px;
+
+                &.nm {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+
+    .sai {
+        height: 49.074vh;
+    }
+    
+    .bsx {
+        height: 11.481vh;
+        margin-right: 1.852vh;
+
+        &.o {
+            opacity: 0.5;
+        }
+    }
+
+    .health-0-right {
+        margin-top: 56px;
+        height: calc(100vh - 150px);
+        overflow-y: auto;
+
+        .table {
+            border: 1px solid #6067697D;
+
+            .com-table thead tr th,
+            .com-table tr td{
+                padding: 0.463vh 0;
+            }
+        }
+
+        .card-tool {
+            width: 100%;
+            background: #53626866;
+            padding: 0.463vh 0;
+            display: flex;
+
+            &.pd {
+                padding-left: 2.778vh;
+            }
+
+            .card-tool-item {
+                flex: 1;
+                text-align: center;
+                cursor: pointer;
+
+                &:last-child {
+                    border-left: 1px solid #536268;
+                }
+
+                &:hover {
+                    color: @green;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/HealthControl/Health10.vue

@@ -0,0 +1,826 @@
+<template>
+  <div class="health-10">
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="6">
+        <panel :title="'等级评价'" :showLine="false">
+          <Table :data="tableData1" :canScroll="false" />
+        </panel>
+      </el-col>
+      <el-col :span="6">
+        <panel :title="'健康报告'" :showLine="false">
+          <Table :data="tableData2" :canScroll="false" />
+        </panel>
+      </el-col>
+      <el-col :span="12" class="wrong-list">
+        <panel :title="'故障信息'" :showLine="false">
+          <div class="data-list" style="display:flex;">
+            <Table :data="tableData3" :canScroll="false" />
+            <Table :data="tableData4" :canScroll="false" />
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-chart">
+      <el-col :span="12">
+        <panel :title="'八大部件'" :showLine="false">
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="1" class="type1" style="width:50px;"></th>
+                  <th rowspan="1" class="type1" style="width:105px;">健康度</th>
+                  <th rowspan="2" class="type1" style="width:400px;">
+                    MTBF（H/H）
+                  </th>
+                  <th rowspan="1" class="type1" style="width:180px;"></th>
+                  <th rowspan="1" class="type1" style="width:100px;">
+                    MTTR（H）
+                  </th>
+                </tr>
+              </thead>
+            </table>
+            <el-scrollbar>
+              <div style="height:calc(100vh - 174px);">
+                <table style="width:100%;" border="0" cellspacing="0">
+                  <tbody>
+                    <tr v-for="index of 8" :key="index">
+                      <td style="width:50px;">
+                        发电机
+                      </td>
+                      <td style="width:105px;">
+                        <div style="background-color: #00bf4d;width:10px;height:10px;margin:0 auto;"></div>
+                      </td>
+                      <td style="width:400px;">
+                        <div class="percent-item">
+                          85%
+                          <div class="percent-bar" style="margin-right: 4px;">
+                            <div class="percent-value" style="width:80%"></div>
+                          </div>
+                          剩余9999/建个故障9999
+                        </div>
+                      </td>
+                      <td style="width:200px;">
+                        <table-line-chart :height="'20px'" />
+                      </td>
+                      <td style="width:#00bf4d">
+                        29.33
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </el-scrollbar>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-title">
+          <div class="title-panel" style="">
+            <span style="text-align: left;padding-left: 20px;font-size:12px;">故障信息 </span>
+            <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
+            <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
+          </div>
+          <img-line-chart height="270px" :list="line.value" :units="line.units" /></div
+      ></el-col>
+    </el-row>
+    <div class="fc-info mg-b-16">
+      <panel :title="'曲线'" :showLine="false">
+        <normal-line-chart height="19vh" :list="line1.value" :units="line1.units" />
+        <stright-line-chart height="15vh" :list="line2.value" :units="line2.units" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+// import SvgIcon from "../../components/coms/icon/svg-icon.vue";SvgIcon,
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+import TableLineChart from "../../components/chart/line/table-line-chart.vue";
+import StrightLineChart from "../../components/chart/line/stright-line-chart.vue";
+import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
+
+export default {
+  setup() {},
+  components: {
+    NormalLineChart,
+    Panel,
+    Table,
+    TableLineChart,
+    StrightLineChart,
+    ImgLineChart,
+  },
+  data() {
+    return {
+      tableData1: {
+        column: [
+          {
+            name: " ",
+            field: "name",
+            width: "10%",
+          },
+          {
+            name: "日期",
+            field: "v1",
+            width: "45%",
+          },
+          {
+            name: "登记",
+            field: "v2",
+            width: "45%",
+          },
+        ],
+        data: [
+          {
+            name: "1",
+            v1: "2018-05-31 00:00:00",
+            v2: "C",
+          },
+          {
+            name: "2",
+            v1: "2018-05-31 00:00:00",
+            v2: "C",
+          },
+          {
+            name: "3",
+            v1: "2018-05-31 00:00:00",
+            v2: "C",
+          },
+          {
+            name: "4",
+            v1: "2018-05-31 00:00:00",
+            v2: "C",
+          },
+          {
+            name: "5",
+            v1: "2018-05-31 00:00:00",
+            v2: "C",
+          },
+        ],
+      },
+      tableData2: {
+        column: [
+          {
+            name: " ",
+            field: "name",
+            width: "10%",
+          },
+          {
+            name: "日期",
+            field: "v1",
+            width: "45%",
+          },
+          {
+            name: "健康情况",
+            field: "v2",
+            width: "45%",
+            template: function(data) {
+              return "<div style='display: flex;'><div style='width: 50%;'>" + data + "</div><div style='width: 50%;'><div style='border: 1px solid #182238;background: #303f6e;width: 70%;margin: 0 auto;color:#FFF'>查看报告</div></div></div>";
+            },
+          },
+        ],
+        data: [
+          {
+            name: "1",
+            v1: "2018-05-31 00:00:00",
+            v2: "差",
+          },
+          {
+            name: "2",
+            v1: "2018-05-31 00:00:00",
+            v2: "差",
+          },
+          {
+            name: "3",
+            v1: "2018-05-31 00:00:00",
+            v2: "差",
+          },
+          {
+            name: "4",
+            v1: "2018-05-31 00:00:00",
+            v2: "差",
+          },
+          {
+            name: "5",
+            v1: "2018-05-31 00:00:00",
+            v2: "差",
+          },
+        ],
+      },
+      tableData3: {
+        column: [
+          {
+            name: "",
+            field: "name",
+            width: "8%",
+          },
+          {
+            name: "故障名称",
+            field: "v1",
+            template: function(data) {
+              return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
+            },
+          },
+          {
+            name: "故障时间",
+            field: "v2",
+            width: "35%",
+          },
+          {
+            name: "修复时间",
+            field: "v3",
+          },
+          {
+            name: "时长",
+            field: "v4",
+          },
+        ],
+        data: [
+          {
+            name: "1",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "2",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "3",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "4",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "5",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+        ],
+      },
+      tableData4: {
+        column: [
+          {
+            name: " ",
+            field: "name",
+            width: "8%",
+          },
+          {
+            name: "故障名称",
+            field: "v1",
+            template: function(data) {
+              return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
+            },
+          },
+          {
+            name: "故障时间",
+            field: "v2",
+            width: "35%",
+          },
+          {
+            name: "修复时间",
+            field: "v3",
+          },
+          {
+            name: "时长",
+            field: "v4",
+          },
+        ],
+        data: [
+          {
+            name: "1",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "2",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "3",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "4",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+          {
+            name: "5",
+            v1: "风机叶轮刹车系统",
+            v2: "2018-05-31 16:28:38",
+            v3: "2018-05-31",
+            v4: "0.09",
+          },
+        ],
+      },
+      // 月发电量对比
+      line: {
+        units: ["功率", "风速"],
+        value: [
+          {
+            title: "应发功率",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "05-02 00:00",
+                value: 11,
+              },
+              {
+                text: "05-04 00:00",
+                value: 11,
+              },
+              {
+                text: "05-06 00:00",
+                value: 13,
+              },
+              {
+                text: "05-08 00:00",
+                value: 12,
+              },
+              {
+                text: "05-10 00:00",
+                value: 13,
+              },
+              {
+                text: "05-12 00:00",
+                value: 12,
+              },
+              {
+                text: "05-14 00:00",
+                value: 11,
+              },
+              {
+                text: "05-16 00:00",
+                value: 11,
+              },
+              {
+                text: "05-18 00:00",
+                value: 13,
+              },
+              {
+                text: "05-20 00:00",
+                value: 11,
+              },
+              {
+                text: "05-22 00:00",
+                value: 12,
+              },
+            ],
+          },
+          {
+            title: "实际功率",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "05-02 00:00",
+                value: 1,
+              },
+              {
+                text: "05-04 00:00",
+                value: 3,
+              },
+              {
+                text: "05-06 00:00",
+                value: 4,
+              },
+              {
+                text: "05-08 00:00",
+                value: 1,
+              },
+              {
+                text: "05-10 00:00",
+                value: 3,
+              },
+              {
+                text: "05-12 00:00",
+                value: 5,
+              },
+              {
+                text: "05-14 00:00",
+                value: 1,
+              },
+              {
+                text: "05-16 00:00",
+                value: 5,
+              },
+              {
+                text: "05-18 00:00",
+                value: 4,
+              },
+              {
+                text: "05-20 00:00",
+                value: 1,
+              },
+              {
+                text: "05-22 00:00",
+                value: 3,
+              },
+            ],
+          },
+        ],
+      },
+      line1: {
+        units: ["功率", "风速"],
+        value: [
+          {
+            title: "应发功率",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "05-02 00:00",
+                value: 1,
+              },
+              {
+                text: "05-04 00:00",
+                value: 13,
+              },
+              {
+                text: "05-06 00:00",
+                value: 14,
+              },
+              {
+                text: "05-08 00:00",
+                value: 12,
+              },
+              {
+                text: "05-10 00:00",
+                value: 3,
+              },
+              {
+                text: "05-12 00:00",
+                value: 5,
+              },
+              {
+                text: "05-14 00:00",
+                value: 1,
+              },
+              {
+                text: "05-16 00:00",
+                value: 1,
+              },
+              {
+                text: "05-18 00:00",
+                value: 13,
+              },
+              {
+                text: "05-20 00:00",
+                value: 14,
+              },
+              {
+                text: "05-22 00:00",
+                value: 12,
+              },
+              {
+                text: "05-24 00:00",
+                value: 3,
+              },
+              {
+                text: "05-26 00:00",
+                value: 5,
+              },
+              {
+                text: "05-28 00:00",
+                value: 1,
+              },
+            ],
+          },
+          {
+            title: "实际功率",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "05-02 00:00",
+                value: 1,
+              },
+              {
+                text: "05-04 00:00",
+                value: 3,
+              },
+              {
+                text: "05-06 00:00",
+                value: 4,
+              },
+              {
+                text: "05-08 00:00",
+                value: 1,
+              },
+              {
+                text: "05-10 00:00",
+                value: 13,
+              },
+              {
+                text: "05-12 00:00",
+                value: 15,
+              },
+              {
+                text: "05-14 00:00",
+                value: 11,
+              },
+              {
+                text: "05-16 00:00",
+                value: 5,
+              },
+              {
+                text: "05-18 00:00",
+                value: 4,
+              },
+              {
+                text: "05-20 00:00",
+                value: 1,
+              },
+              {
+                text: "05-22 00:00",
+                value: 3,
+              },
+              {
+                text: "05-24 00:00",
+                value: 3,
+              },
+              {
+                text: "05-26 00:00",
+                value: 1,
+              },
+              {
+                text: "05-28 00:00",
+                value: 13,
+              },
+            ],
+          },
+        ],
+      },
+      line2: {
+        units: ["功率", "风速"],
+        value: [
+          {
+            title: "应发功率",
+            yAxisIndex: 0,
+            value: [
+              {
+                text: "05-02 00:00",
+                value: 1,
+              },
+              {
+                text: "05-04 00:00",
+                value: 3,
+              },
+              {
+                text: "05-06 00:00",
+                value: 4,
+              },
+              {
+                text: "05-08 00:00",
+                value: 2,
+              },
+              {
+                text: "05-10 00:00",
+                value: 3,
+              },
+              {
+                text: "05-12 00:00",
+                value: 5,
+              },
+              {
+                text: "05-14 00:00",
+                value: 1,
+              },
+              {
+                text: "05-16 00:00",
+                value: 1,
+              },
+              {
+                text: "05-18 00:00",
+                value: 3,
+              },
+              {
+                text: "05-20 00:00",
+                value: 4,
+              },
+              {
+                text: "05-22 00:00",
+                value: 2,
+              },
+              {
+                text: "05-24 00:00",
+                value: 3,
+              },
+              {
+                text: "05-26 00:00",
+                value: 5,
+              },
+              {
+                text: "05-28 00:00",
+                value: 1,
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.health-10 {
+  font-size: 12px;
+  .com-table {
+    tbody tr td {
+      padding: 0;
+      height: 30px;
+    }
+  }
+
+  .table {
+    tbody {
+      td {
+        padding: 0;
+        height: 30px;
+      }
+      tr:nth-child(2n) td {
+        background-color: fade(@gray, 20%);
+
+        &.item {
+          background-color: transparent;
+        }
+      }
+    }
+
+    th {
+      background: fade(@gray, 40);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 24px;
+      color: @gray-l;
+      border: 2px solid #07140f;
+
+      &.type1 {
+        border-left: 0;
+        border-right: 0;
+      }
+    }
+    td {
+      color: @gray-l;
+      text-align: center;
+      height: 26px;
+      line-height: 26px;
+
+      &.item {
+        width: 100px;
+        div {
+          color: @white;
+          background: fade(@gray, 20);
+          margin: 2px;
+          border: 1px solid transparent;
+        }
+      }
+    }
+
+    .percent-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+
+      .percent-bar {
+        height: 12px;
+        width: 170px;
+        background: transparent;
+        border: 1px solid @gray-l;
+        margin-left: 8px;
+
+        .percent-value {
+          height: calc(100% - 4px);
+          background: @green;
+          margin: 2px;
+        }
+      }
+    }
+
+    .score {
+      width: 100px;
+      div {
+        background: fade(@gray, 20);
+      }
+    }
+  }
+  .panel-header {
+    margin-bottom: 0;
+    .panel-title {
+      text-align: center;
+    }
+  }
+  .fc-info {
+    .panel-header {
+      margin-bottom: 8px;
+    }
+    .panel-title {
+      text-align: left;
+      padding-left: 20px;
+    }
+  }
+  .table-chart {
+    height: 312px;
+    .panel-title {
+      text-align: left;
+      padding-left: 20px;
+    }
+    .chart-title {
+      // color: rgba(255, 255, 255, 0.75);
+      color: @gray-l;
+      .title-panel {
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 8px;
+        background-color: #1e2524;
+        .des-title {
+          padding-left: 100px;
+        }
+        .num {
+          padding-left: 20px;
+          color: #05bb4c;
+          font-weight: 600;
+        }
+        .unit {
+          padding-left: 20px;
+        }
+      }
+    }
+  }
+  .table-panel .wrong-list {
+    .panel-title {
+      text-align: left;
+      padding-left: 20px;
+    }
+  }
+
+  .percent-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 34px;
+
+    .percent-bar {
+      height: 12px;
+      width: 170px;
+      background: transparent;
+      border: 1px solid @gray-l;
+      margin-left: 8px;
+
+      .percent-value {
+        height: calc(100% - 4px);
+        background: @green;
+        margin: 2px;
+      }
+    }
+  }
+  .score {
+    width: 100px;
+    div {
+      background: fade(@gray, 20);
+    }
+  }
+  .data-list {
+    .dot {
+      width: 12px;
+      height: 12px;
+      margin: auto;
+
+      &.green {
+        background: @green;
+      }
+
+      &.yellow {
+        background: @yellow;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/defect-elimination-tracking.vue

@@ -75,7 +75,7 @@ export default {
     data() {
         return {
             showMe: false,
-            header: require("@assets/header.png"),
+            header: require("@assets/logo.png"),
         };
     },
     // 函数

src/views/NewPages/dj1.vue

@@ -0,0 +1,513 @@
+<template>
+  <div class="dj-1">
+    <div class="action-bar">
+      <div class="selections mg-b-16">
+        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">风机运行情况信息</div>
+        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">风机日详细信息</div>
+        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">风场玫瑰图</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">风机玫瑰图</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
+      </div>
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">风机：</div>
+            <div class="search-input">
+              <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            </div>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green">搜索</button>
+        </div>
+      </div>
+    </div>
+    <!-- tab2 -->
+    <div v-if="tabIndex == 0" class="tab-1">
+      <panel :title="'损失电量分析'" class="mg-b-16">
+        <area-bar-chart :height="'23.1481vh'" />
+      </panel>
+      <panel :title="'电量'" class="mg-b-16">
+        <multiple-bar-line-chart :height="'16.6667vh'" />
+      </panel>
+      <div class="table-info">
+        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
+          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+        </panel>
+        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
+          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+        </panel>
+        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
+          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+        </panel>
+      </div>
+    </div>
+    <!-- tab2 -->
+    <div v-if="tabIndex == 1" class="tab-2">
+      <el-row>
+        <el-col :span="15">
+          <panel :title="'功率曲线'" class="mg-b-16">
+            <marker-line-chart :height="'28vh'" />
+          </panel>
+          <panel :title="'日发电量信息'" class="mg-b-16 outline" :showLine="false">
+            <div class="power-info">
+              <div class="info-item" v-for="index in 20" :key="index">
+                <div class="text">设备可利用率：</div>
+                <div class="value green">115.01</div>
+              </div>
+            </div>
+          </panel>
+          <div class="month-info">
+            <div class="month-info-left">
+              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
+                <div class="power-info month-3">
+                  <div class="info-item" v-for="index in 15" :key="index">
+                    <div class="text">月实际/保证：</div>
+                    <div class="value green">115.01</div>
+                  </div>
+                </div>
+              </panel>
+            </div>
+            <div class="month-info-right">
+              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
+                <div class="power-info month-2">
+                  <div class="info-item" v-for="index in 2" :key="index">
+                    <div class="text">月实际/保证：</div>
+                    <div class="value green">115.01</div>
+                  </div>
+                </div>
+              </panel>
+              <panel :title="'风资源'" class="radar-panel" :icon="'svg-wind-site'">
+                <div class="wind-info">
+                  <div class="legend mg-r-16">
+                    <span class="dot"></span>
+                    <span>静风频率为2</span>
+                  </div>
+                  <direction-radar-chart :width="'60%'" :height="'180px'" />
+                </div>
+              </panel>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="9">
+          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
+            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+          </panel>
+          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
+            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+          </panel>
+          <panel class="table-panel outline" :title="'当日报警记录'" :showLine="false">
+            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+          </panel>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div v-if="tabIndex == 2" class="tab-3">
+      <el-row>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>静风频率为2</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" />
+            </div>
+          </panel>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div v-if="tabIndex == 3" class="tab-4">
+      <el-row>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel title="日度损失电量分析">
+            <dual-pie-chart height="350px" />
+          </panel>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import AreaBarChart from "../../components/chart/combination/area-bar-chart.vue";
+import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import MarkerLineChart from "../../components/chart/line/marker-line-chart.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
+  setup() {},
+  data() {
+    return {
+      tabIndex: 0,
+      tableData: {
+        column: [
+          {
+            name: "风机",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "描述",
+            field: "desc",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "报警时间",
+            field: "date",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            name: "MG01-01",
+            desc: "描述描述描述描述描述描述描述描述描述描述",
+            date: "2020-01-01",
+          },
+        ],
+      },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
+    };
+  },
+  methods: {
+    tabSelect(state) {
+      this.tabIndex = state;
+    },
+  },
+  created() {
+    for (let i = 1; i < 50; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.dj-1 {
+  .action-bar {
+    display: flex;
+
+    .selections {
+      flex: 1 0 auto;
+      display: flex;
+
+      .item {
+        flex: 0 0 164px;
+        text-align: center;
+        height: 33px;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @font-color;
+        font-size: @fontsize-s;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .outline {
+    outline: 1px solid fade(@gray, 50);
+  }
+
+  .com-panel .panel-header {
+    margin-bottom: 0px;
+  }
+
+  .table-info {
+    display: flex;
+
+    .table-panel {
+      flex: 1 0 calc(100% / 3 - 8px);
+      outline: 1px solid fade(@gray, 50);
+      height: 100%;
+      & + .table-panel {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .tab-2 {
+    .power-info {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      &.month-3 {
+        .info-item {
+          flex: 0 0 calc(100% / 3 - 6px);
+          &:nth-child(-n + 5) {
+            margin-top: 8px;
+          }
+
+          &:nth-child(-n + 3) {
+            margin-top: 0px;
+          }
+        }
+      }
+      &.month-2 {
+        .info-item {
+          flex: 0 0 calc(100% / 2 - 4px);
+          &:nth-child(-n + 5) {
+            margin-top: 8px;
+          }
+
+          &:nth-child(-n + 2) {
+            margin-top: 0px;
+          }
+        }
+      }
+
+      .info-item {
+        display: flex;
+        align-items: center;
+
+        flex: 0 0 calc(100% / 5 - 8px);
+        background: fade(@gray, 20);
+        height: 4.6296vh;
+        line-height: 4.6296vh;
+        margin-top: 8px;
+
+        &:nth-child(-n + 5) {
+          margin-top: 0px;
+        }
+
+        .text {
+          font-size: 12px;
+          flex: 0 0 110px;
+          text-align: right;
+          margin-right: 24px;
+          color: @gray-l;
+        }
+
+        .value {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .month-info {
+      display: flex;
+
+      .month-info-left {
+        flex: 0 0 705px;
+        margin-right: 10px;
+      }
+
+      .month-info-right {
+        flex: 1 0 auto;
+      }
+    }
+
+    .moon-other {
+      flex: 1 0 auto;
+    }
+
+    .radar-panel {
+      height: 20.5vh;
+
+      .panel-body {
+        height: 100%;
+      }
+    }
+
+    .wind-info {
+      display: flex;
+
+      .legend {
+        font-size: 12px;
+        flex: 0 0 140px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 32px;
+        margin-bottom: 16px;
+
+        .dot {
+          width: 7px;
+          height: 7px;
+          background: @green;
+          display: inline-block;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .tab-3 {
+    .wind-info {
+      position: relative;
+
+      .legend {
+        position: absolute;
+        left: 32px;
+        top: 32px;
+        font-size: 12px;
+        flex: 0 0 140px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 32px;
+        margin-bottom: 16px;
+
+        .dot {
+          width: 7px;
+          height: 7px;
+          background: @green;
+          display: inline-block;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .tab-4 {
+    .panel-body {
+      padding: 16px;
+    }
+  }
+}
+</style>

src/views/NewPages/forecast-system.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="forecast-system">
+    <div class="action-bar mg-b-16">
+      <div class="selections">
+        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">麻黄山</div>
+        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">牛首山</div>
+        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">青山</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">石板泉</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">香山</div>
+      </div>
+    </div>
+    <div class="page-body">
+      <el-row class="mg-b-16">
+        <el-col :span="5" class="fc-info">
+          <div class="fc-item">
+            <div class="title">牛首山风场</div>
+            <div class="tags">
+              <div class="tag">
+                <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+                  <svg-icon :svgid="'svg-duoyun'" />
+                </i>
+              </div>
+              <div class="tag">
+                <div class="tag-title">实时风速</div>
+                <div class="tag-value">12.34<span class="unit">m/s</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">预测风速</div>
+                <div class="tag-value">12.34<span class="unit">m/s</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（优）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（良）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+              <div class="tag">
+                <div class="tag-title">健康度（差）</div>
+                <div class="tag-value">12.34<span class="unit">台</span></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="19">
+          <panel :title="'损失电量分析'">
+            <multiple-bar-line-chart :height="'310px'" />
+          </panel>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <panel :title="'超短期风功率预测'">
+            <arrow-line-chart :height="'310px'" />
+          </panel>
+        </el-col>
+        <el-col :span="12">
+          <panel :title="'短期风功率预测'">
+            <arrow-line-chart :height="'310px'" />
+          </panel>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import ArrowLineChart from "../../components/chart/line/arrow-line-chart.vue";
+import svgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+export default {
+  components: { svgIcon, MultipleBarLineChart, Panel, ArrowLineChart },
+  setup() {},
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  methods: {
+    tabSelect(tab) {
+      this.tabIndex = tab;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.forecast-system {
+  .action-bar {
+    .selections {
+      flex: 1 0 auto;
+      display: flex;
+
+      .item {
+        flex: 0 0 94px;
+        text-align: center;
+        height: 33px;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @font-color;
+        font-size: @fontsize-s;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  // 风场信息
+  .fc-info {
+    .fc-item {
+      & > .title {
+        background: fade(@gray, 20);
+        padding: 0 1.4815vh;
+        line-height: 27px;
+        color: fade(@white, 75);
+        font-size: @fontsize-s;
+        margin-bottom: 0.7407vh;
+      }
+
+      & + .fc-item {
+        margin-left: 8px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+
+        .tag {
+          flex: 1 0 calc(100% / 3 - 8px);
+          background: fade(@gray, 20);
+          margin-bottom: 8px;
+
+          .tag-title {
+            font-size: 12px;
+            color: @gray-l;
+            line-height: 24px;
+            background: fade(@gray, 40);
+            text-align: center;
+          }
+
+          .tag-value {
+            position: relative;
+            font-size: 20px;
+            color: @green;
+            text-align: center;
+            padding: 12px 0;
+            .unit {
+              position: absolute;
+              color: @gray;
+              font-size: 12px;
+              bottom: 8px;
+              right: 8px;
+            }
+          }
+
+          & + .tag {
+            margin-left: 8px;
+          }
+
+          &:nth-child(1) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            i {
+              width: 56px;
+              height: 56px;
+              svg {
+                width: 56px;
+                height: 56px;
+              }
+            }
+          }
+
+          &:nth-child(3n + 1) {
+            margin-left: 0px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/power-forecast-1.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="power-forecast-1">
+    <div class="left">
+      <el-row class="mg-b-16">
+        <el-col :span="4">
+          <panel :title="'预测电量'">
+            <list-bar-chart :list="listBarData1" :colors="listBarData1Color" :height="'15vh'" />
+            <div class="dashboard">
+              <dashboard-2 :height="'8vh'" :width="'115px'" :value="25" />
+              <div class="lengends">
+                <div class="item">
+                  <span class="label">本日预测电量</span>
+                  <span class="lengend gary"></span>
+                  <span class="value">123</span>
+                </div>
+                <div class="item">
+                  <span class="label">本日已发电量</span>
+                  <span class="lengend green"></span>
+                  <span class="value">123</span>
+                </div>
+              </div>
+            </div>
+            <div class="dashboard">
+              <dashboard-2 :height="'8vh'" :width="'115px'" :value="34" />
+              <div class="lengends">
+                <div class="item">
+                  <span class="label">本日预测电量</span>
+                  <span class="lengend gary"></span>
+                  <span class="value">123</span>
+                </div>
+                <div class="item">
+                  <span class="label">本日已发电量</span>
+                  <span class="lengend green"></span>
+                  <span class="value">123</span>
+                </div>
+              </div>
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="20">
+          <toolbar-panel :title="'预测电量'">
+            <template v-slot:tools>
+              <div class="tools">
+                <div class="action" :class="{ active: ForecastPowerTab == 0 }" @click="ForecastPowerTabClick(0)">未来4小时</div>
+                <div class="action" :class="{ active: ForecastPowerTab == 1 }" @click="ForecastPowerTabClick(1)">未来24小时</div>
+                <div class="action" :class="{ active: ForecastPowerTab == 2 }" @click="ForecastPowerTabClick(2)">未来3天</div>
+                <div class="action" :class="{ active: ForecastPowerTab == 3 }" @click="ForecastPowerTabClick(3)">未来1周</div>
+              </div>
+            </template>
+            <normal-line-chart :height="'37.037vh'" :showLegend="true" />
+          </toolbar-panel>
+        </el-col>
+      </el-row>
+      <div>
+        <panel :title="'月发电量指标对比'">
+          <multiple-bar-line-chart :height="'44.4444vh'" :barData="barData" />
+          <div class="pie-chart">
+            <dual-pie-chart height="100%" :width="'100%'" :showLegend="false" />
+          </div>
+        </panel>
+      </div>
+    </div>
+    <div class="right">
+      <panel-3 class="right-panel">
+        <div class="title">
+          预测准确率
+        </div>
+        <div class="items">
+          <div class="item" v-for="index in 6" :key="index">
+            <percent-bar-2 width="100px" height="90px" :value="percent" :name="'牛首山'" :color="'purple'" />
+          </div>
+        </div>
+      </panel-3>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
+import PercentBar2 from "../../components/chart/bar/percent-bar-2.vue";
+import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import Dashboard2 from "../../components/chart/other/Dashboard2.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import panel3 from "../../components/coms/panel/panel3.vue";
+import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
+export default {
+  components: { panel3, Panel, NormalLineChart, ListBarChart, Dashboard2, MultipleBarLineChart, ToolbarPanel, PercentBar2, DualPieChart },
+  setup() {},
+  data() {
+    return {
+      listBarData1: [
+        { name: "未来 {c1|15分钟} 预测电量", value: 123.62 },
+        { name: "未来 {c1|4小时} 预测电量", value: 123.62 },
+      ],
+      listBarData1Color: ["purple", "purple"],
+      ForecastPowerTab: 0,
+      barData: [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 0,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 0,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 0,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 0,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 0,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 0,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 0,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 0,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    ForecastPowerTabClick(tab) {
+      this.ForecastPowerTab = tab;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.power-forecast-1 {
+  display: flex;
+
+  .left {
+    flex: 1 0 auto;
+    margin-right: 16px;
+
+    .tools {
+      display: flex;
+      .action {
+        font-size: 12px;
+        line-height: 20px;
+        border-bottom: 1px solid transparent;
+        margin-left: 8px;
+        cursor: pointer;
+        padding-top: 2px;
+
+        &.active,
+        &:hover {
+          color: @green;
+          border-bottom: 1px solid @green;
+        }
+      }
+    }
+
+    .dashboard {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      .lengends {
+        font-size: 12px;
+        line-height: 20px;
+        padding-left: 12px;
+        .item {
+          display: flex;
+          align-items: center;
+
+          .label {
+            margin-right: 8px;
+            color: @gray;
+          }
+
+          .lengend {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            background: @gray;
+            border-radius: 50%;
+            margin-right: 8px;
+
+            &.green {
+              background: @green;
+            }
+          }
+          .value {
+            color: fade(@white, 75);
+          }
+        }
+      }
+    }
+
+    .pie-chart {
+      position: absolute;
+      width: 350px;
+      height: 150px;
+      top: 40px;
+      right: 16px;
+    }
+  }
+
+  .right {
+    flex: 0 0 145px;
+
+    .right-panel {
+      width: 100%;
+      height: 100%;
+
+      .title {
+        font-size: 12px;
+        text-align: center;
+      }
+
+      .items {
+        position: relative;
+        &::before {
+          content: " ";
+
+          position: absolute;
+          left: 50%;
+          height: 94%;
+          border-left: 1px dashed fade(@gray, 40);
+        }
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: space-evenly;
+
+        .item {
+          flex: 0 0 auto;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/SandTable/SandTable.vue

@@ -0,0 +1,298 @@
+<template>
+    <div class="sand-table">
+        <ThreeModel class="three-model-layer" @when="when"></ThreeModel>
+        <div class="sand-table-left" v-if="showPanel">
+            <PanelSand class="left-panel" title="板块标题" subTitle="AM10:52  实况">
+                <weather class="pd-t-16" />
+            </PanelSand>
+            <PanelSand class="left-panel mg-t-16" title="板块标题">
+                <div class="pd-t-16">
+                    <list-bar-chart-2 :list="ForecastPower" height="8vh" />
+                </div>
+            </PanelSand>
+            <PanelSand class="left-panel mg-t-16" title="板块标题">
+                <div class="pd-t-16">
+                    <div class="fdl-title">
+                        <i class="fa fa-bolt green font-md mg-r-8"></i>
+                        <span class="green font-md mg-r-16">发电量</span>
+                        <span class="white font-num font-lg mg-r-8">2834.9</span>
+                        <span class="white font-sm">亿元</span>
+                    </div>
+                    <power-plan />
+                </div>
+            </PanelSand>
+            <PanelSand class="left-panel mg-t-16" title="板块标题">
+                <power-review />
+            </PanelSand>
+        </div>
+        <div class="sand-table-right" v-if="showPanel">
+            <PanelSand class="right-panel" title="板块标题">
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img v-if="!videoShow" class="pre-img" :src="require('@assets/png/p1.jpg')" />
+                        <video v-if="videoShow" class="pre-img" width="179" height="100" controls>
+                            <source :src="require('@assets/png/p.mp4')" type="video/mp4">
+                            您的浏览器不支持 video 标签。
+                        </video>
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p2.jpg')" />
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p3.jpg')" />
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p4.jpg')" />
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p5.jpg')" />
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p6.jpg')" />
+                    </el-col>
+                </el-row>
+            </PanelSand>
+            <PanelSand class="right-panel mg-t-16" title="板块标题">
+                <div class="person-info-box mg-t-16">
+                    <img class="header mg-r-8 bg-green" :src="require('@assets/logo.png')" />
+                    <div class="person-info">
+                        <div class="green font-lg" style="font-weight: bold;">张三</div>
+                        <div class="white font-sm">
+                            <span>职务：高级检修工</span>
+                            <span class="mg-l-16">当前任务编号 000000</span>
+                        </div>
+                        <div class="white font-sm">平均检修时间 <span class="green">5</span> 小时</div>
+                    </div>
+                </div>
+                <div class="table mg-t-8">
+                    <Table :data="tableData" />
+                </div>
+            </PanelSand>
+            <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
+                <template v-slot:tools>
+                    <div class="exchange" @click="exchange">
+                        <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
+                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
+                        <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
+                    </div>
+                </template>
+                <template v-slot:default>
+                    <RadarPieChart height="21vh" />
+                </template>
+            </PanelSandToolbar>
+        </div>
+    </div>
+</template>
+
+<script>
+import ThreeModel from "./component/ThreeModel.vue";
+import PanelSand from "@com/coms/panel/panel-sand.vue";
+import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
+import Weather from "./component/weather.vue";
+import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
+import PowerPlan from "./component/power-plan.vue";
+import PowerReview from "./component/power-review.vue";
+import Table from "@com/coms/table/table.vue";
+import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
+
+export default {
+    // 名称
+    name: "SandTable",
+    // 使用组件
+    components: {
+        ThreeModel,
+        PanelSand,
+        PanelSandToolbar,
+        Weather,
+        ListBarChart2,
+        PowerPlan,
+        PowerReview,
+        Table,
+        RadarPieChart,
+    },
+    // 数据
+    data() {
+        return {
+            videoShow: true,
+            showPanel: false,
+            exchangeBtn: false,
+            ForecastPower: [
+                {
+                    name: "今日预测电量",
+                    value: 103.62,
+                    total: 150,
+                },
+                {
+                    name: "月预测发电量",
+                    value: 98.62,
+                    total: 100,
+                },
+            ],
+            tableData: {
+                column: [
+                    {
+                        name: "标题",
+                        field: "v1",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v2",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v3",
+                        width: "150px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v4",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                ],
+            },
+        };
+    },
+    // 函数
+    methods: {
+        when: function() {
+            this.showPanel = true;
+        },
+        exchange: function () {
+            this.exchangeBtn = !this.exchangeBtn;
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.sand-table {
+    width: 100%;
+    height: 91.667vh;
+    position: relative;
+
+    .left-panel {
+        width: 36.852vh;
+    }
+
+    .right-panel {
+        width: 36.852vh;
+    }
+
+    .three-model-layer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+
+    .sand-table-left {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 2;
+    }
+
+    .sand-table-right {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 2;
+    }
+
+    .pre-img-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 0.556vh;
+        padding: 0;
+        
+        .pre-img {
+            width: 98%;
+        }
+    }
+
+    .person-info-box {
+        display: flex;
+
+        .header {
+            width: 75px;
+        }
+    }
+
+    .table {
+        width: calc(100% + 2.963vh);
+        margin-left: -1.481vh;
+        margin-bottom: -1.481vh;
+
+        .com-table thead tr th,
+        .com-table tr td {
+            padding: 0.556vh 0;
+        }
+    }
+
+    .exchange {
+        cursor: pointer;
+    }
+}
+</style>

src/views/SandTable/component/ThreeModel.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="three-model" @click="clickEvent">
+        <loading ref="pageLoading"></loading>
+    </div>
+</template>
+
+<script>
+import loading from '@com/coms/loading/loading.vue';
+import * as THREE from "three";
+import { GLTFLoader } from "@node/three/examples/jsm/loaders/GLTFLoader.js";
+import { OrbitControls } from "@node/three/examples/jsm/controls/OrbitControls.js";
+let camera, scene, renderer, controls;
+let mixers = [];
+let clock = new THREE.Clock();
+let fanAnimates = [];
+export default {
+    // 名称
+    name: "ThreeModel",
+    // 使用组件
+    components: {
+        loading
+    },
+    // 传入参数
+    props: {},
+    // 自定义事件
+    emits: {
+        when: null,
+    },
+    // 数据
+    data() {
+        return {
+            // 场景
+            initScene: function () {
+                scene = new THREE.Scene();
+                // scene.background = new THREE.Color(0xa0a0a0);
+            },
+            // 相机
+            initCamera: function () {
+                camera = new THREE.PerspectiveCamera(45, this.$el.scrollWidth / this.$el.scrollHeight, 0.1, 10000);
+                camera.position.set(50, 60, 50);
+            },
+            // 坐标轴
+            initAxesHelper: function () {
+                const axesHelper = new THREE.AxesHelper(150);
+                scene.add(axesHelper);
+                axesHelper.position.set(0, 0, 0);
+            },
+            // 渲染器
+            initRender: function () {
+                renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+                // renderer.setClearAlpha(0);
+                renderer.setSize(this.$el.scrollWidth, this.$el.scrollHeight);
+                this.$el.append(renderer.domElement);
+            },
+            // 灯光
+            initLight: function () {
+                // let light = new THREE.PointLight(0xffffff, 2);
+                let light = new THREE.AmbientLight(0xffffff, 4);
+                // light.position.set(50, 50, 50);
+                scene.add(light);
+            },
+            // 控制器
+            initControls: function () {
+                controls = new OrbitControls(camera, renderer.domElement);
+            },
+            // 初始化一个风机动画
+            initFanAnimate: function (fan1, fan2, fan3) {
+                let fanAnimateObj = {
+                    speed: 0.05,
+                    fan1: fan1,
+                    fan2: fan2,
+                    fan3: fan3,
+                };
+                let fanAnimateFunction = function () {
+                    fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
+                    fanAnimateObj.fan2.rotateZ(fanAnimateObj.speed);
+                    fanAnimateObj.fan3.rotateZ(fanAnimateObj.speed);
+                    fanAnimateObj.animateId = window.requestAnimationFrame(fanAnimateFunction);
+                }
+                fanAnimateObj.stop = function () {
+                    window.cancelAnimationFrame(fanAnimateObj.animateId);
+                };
+                fanAnimateObj.start = function () {
+                    fanAnimateFunction();
+                };
+                fanAnimateFunction();
+                fanAnimates.push(fanAnimateObj);
+                return fanAnimateObj;
+            },
+            // 清空风机动画
+            clearFanAnimate: function () {
+                while (fanAnimates.length > 0) {
+                    let fanAnimateObj = fanAnimates.shift();
+                    fanAnimateObj.stop();
+                }
+            },
+            // 内容
+            initContent: function () {
+                // 加载3D地面
+                let loaderGround = new GLTFLoader();/*实例化加载器*/
+                loaderGround.load("static/3d/group/ng.gltf", (gltf) => {
+                    gltf.scene.position.set(5, 10, 0);
+                    scene.add(gltf.scene);
+                    // 找到一个大风扇的 Object3D
+                    let fanBig1_1 = gltf.scene.children[0].getObjectByName("Box707");
+                    let fanBig1_2 = gltf.scene.children[0].getObjectByName("Box708");
+                    let fanBig1_3 = gltf.scene.children[0].getObjectByName("Box709");
+                    let fanBig2_1 = gltf.scene.children[0].getObjectByName("Box719");
+                    let fanBig2_2 = gltf.scene.children[0].getObjectByName("Box720");
+                    let fanBig2_3 = gltf.scene.children[0].getObjectByName("Box721");
+                    let fanBig3_1 = gltf.scene.children[0].getObjectByName("Box699");
+                    let fanBig3_2 = gltf.scene.children[0].getObjectByName("Box701");
+                    let fanBig3_3 = gltf.scene.children[0].getObjectByName("Box702");
+                    this.initFanAnimate(fanBig1_1, fanBig1_2, fanBig1_3);
+                    this.initFanAnimate(fanBig2_1, fanBig2_2, fanBig2_3);
+                    this.initFanAnimate(fanBig3_1, fanBig3_2, fanBig3_3);
+                    let mixer = new THREE.AnimationMixer(gltf.scene.children[0]); 
+                    mixer.clipAction(gltf.animations[0]).setDuration(3).play();
+                    mixers.push(mixer);
+                    console.log(gltf)
+                }, (xhr) => {
+                    if (xhr.loaded == xhr.total) {
+                        this.$emit("when");
+                        setTimeout(() => {
+                            this.$refs.pageLoading.hide();
+                        }, 3000);
+                    }
+                }, function (error) {
+                    console.error('load error!'+error.getWebGLErrorMessage());
+                })
+            },
+            // 创建一个圆柱
+            initCylinderGeometry: function () {
+                let geometry = new THREE.CylinderGeometry(4, 4, 4, 64);
+                let materials = [
+                //圆柱侧面材质，使用纹理贴图
+                new THREE.MeshBasicMaterial({
+                    color: 0xffff00,
+                    side: THREE.DoubleSide,
+                    transparent: true
+                }),
+                //圆柱顶材质
+                new THREE.MeshBasicMaterial({
+                    transparent: true,
+                    opacity: 0,
+                    side: THREE.DoubleSide
+                }),
+                //圆柱底材质
+                new THREE.MeshBasicMaterial({
+                    transparent: true,
+                    opacity: 0,
+                    side: THREE.DoubleSide
+                })
+                ];
+                let cylinder = new THREE.Mesh(geometry, materials);
+                scene.add(cylinder);
+            },
+            // 点击事件
+            clickEvent: function (event) {
+                event.preventDefault();
+                let vector = new THREE.Vector3(
+                    (event.clientX / window.innerWidth) * 2 - 1,
+                    -(event.clientY / window.innerHeight) * 2 + 1,
+                    0.5
+                );
+                vector = vector.unproject(camera);
+                let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
+                let intersects = raycaster.intersectObjects(scene.children,true);
+                console.log(intersects)
+                // this.initCylinderGeometry();
+            },
+            // 初始化
+            initThree: function () {
+                this.initScene();
+                // this.initAxesHelper();
+                this.initCamera();
+                this.initRender();
+                this.initLight();
+                this.initControls();
+                this.initContent();
+                renderer.setAnimationLoop(this.animate);
+            },
+            // 动画
+            animate: function () {
+                var delta = clock.getDelta();
+                for ( var i = 0; i < mixers.length; i ++ ) { // 重复播放动画
+                    mixers[ i ].update( delta );
+                }
+                renderer.render(scene, camera);
+            },
+        };
+    },
+    // 函数
+    methods: {},
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.initThree();
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+    beforeUnmount() {
+        // 销毁前
+        renderer.setAnimationLoop(null);
+        camera = null;
+        scene = null;
+        renderer = null;
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.three-model {
+}
+</style>

src/views/SandTable/component/power-plan.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="power-plan">
+    <row>
+      <Col :span="12">
+        <percent-card-2 title="月计划完成率" TotalText="实际" ActualText="计划" :TotalValue="monthPlan.plan" :ActualValue="monthPlan.actual" />
+      </Col>
+      <Col :span="12">
+        <percent-card-2 title="年计划完成率" TotalText="实际" ActualText="计划" :TotalValue="yearPlan.plan" :ActualValue="yearPlan.actual" />
+      </Col>
+    </row>
+  </div>
+</template>
+
+<script>
+import Col from "@com/coms/grid/col.vue";
+import Row from "@com/coms/grid/row.vue";
+import PercentCard2 from "@com/coms/cards/percent-card-2.vue";
+export default {
+  components: { Row, Col, PercentCard2 },
+  props: {
+
+  },
+  data() {
+    return {
+      // tab项
+      tabs: [
+        {
+          id: "1",
+          text: "风电",
+        },
+        {
+          id: "2",
+          text: "光电",
+        },
+        {
+          id: "3",
+          text: "总和",
+        },
+      ],
+      // 月计划完成率
+      monthPlan: {
+        plan: 343,
+        actual: 343,
+      },
+      // 年计划完成率
+      yearPlan: {
+        plan: 343,
+        actual: 343,
+      },
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="less">
+.power-plan {
+  padding: 1.481vh 0;
+}
+</style>

src/views/SandTable/component/power-review.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="power-review">
+    <Row type="flex" justify="center" :align="'middle'">
+      <!-- 功率复核 PowerLoad -->
+      <Col v-for="item in PowerLoad" :key="item" :span="6">
+        <dash-pie-chart :title="item.title" :value="item.value" height="10vh" />
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import Col from "@com/coms/grid/col.vue";
+import Row from "@com/coms/grid/row.vue";
+import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
+
+export default {
+  components: {
+    Row,
+    Col,
+    DashPieChart,
+  },
+  data() {
+    return {
+      // 功率复核数据
+      PowerLoad: [
+        {
+          title: "风速",
+          value: 12.3,
+        },
+        {
+          title: "功率",
+          value: 22,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.PowerLoad = [
+      {
+        title: "风速",
+        value: 12,
+      },
+      {
+        title: "功率",
+        value: 22,
+      },
+    ];
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.power-review {
+  padding: 0;
+}
+.col + .col {
+  margin-left: 100px;
+}
+</style>

src/views/SandTable/component/weather.vue

@@ -0,0 +1,122 @@
+// 天气分析
+<template>
+  <div class="weather">
+    <div class="weather-info">
+      <span class="svg-icon">
+        <svg-icon class="weather-icon" svgid="svg-duoyun" />
+      </span>
+      <div>
+        <div class="temperature">{{ temperature }} °</div>
+        <div class="other">
+          <span>{{ weather }}</span>
+          <span>{{ windDirection }}</span>
+          <span>{{ windSpeed }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="other-info">
+      <Row>
+        <Col>
+          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+            <svg-icon svgid="svg-能见度" />
+          </div>
+          <div class="value">{{ visibility }}</div>
+          <div class="text">能见度</div>
+        </Col>
+        <Col>
+          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+            <svg-icon svgid="svg-湿度" />
+          </div>
+          <div class="value">{{ humidity }}</div>
+          <div class="text">湿度</div>
+        </Col>
+        <Col>
+          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+            <svg-icon svgid="svg-气压" />
+          </div>
+          <div class="value">{{ pressure }}</div>
+          <div class="text">气压</div>
+        </Col>
+        <Col>
+          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+            <svg-icon svgid="svg-日出" />
+          </div>
+          <div class="value">{{ sunrise }}</div>
+          <div class="text">日出时间</div>
+        </Col>
+        <Col>
+          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+            <svg-icon svgid="svg-日落" />
+          </div>
+          <div class="value">{{ sunset }}</div>
+          <div class="text">日落时间</div>
+        </Col>
+      </Row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Col from "@com/coms/grid/col.vue";
+import Row from "@com/coms/grid/row.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+
+export default {
+  components: { Row, Col, SvgIcon },
+  // 数据自己获取天气情况
+  data() {
+    return {
+      weather: "阴", // 气象
+      temperature: "11", // 温度
+      windDirection: "北风", // 风向
+      windSpeed: "3-4级", // 风速
+      visibility: "20KM", //能见度
+      humidity: "75.0%", // 湿度
+      pressure: "994kPa", // 气压
+      sunrise: "04:06", // 日出
+      sunset: "18:50", // 日落
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.weather {
+  .weather-info {
+    display: flex;
+    margin-bottom: 1.481vh;
+
+    .weather-icon {
+      width: 5.5556vh;
+      height: 5.5556vh;
+      margin: 0 1.481vh;
+    }
+    .temperature {
+      font-size: 2.778vh;
+    }
+    .other span {
+      font-size: @fontsize-s;
+      margin-right: 2.222vh;
+    }
+  }
+
+  .other-info {
+    text-align: center;
+    font-size: @fontsize-s;
+
+    .text {
+      color: @font-color;
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+
+    .value {
+      margin: 8px 0;
+    }
+
+    .other-icon {
+      margin: 0 auto;
+    }
+  }
+}
+</style>

src/views/WindSite/components/customNode.js

@@ -3619,6 +3619,51 @@ const registerTagText = () => {
     Graph.registerNode(shape, option, true);
 }
 
+// 标签文字
+const registerTagTextR = () => {
+    const width = 100;
+    const height = 24;
+    const shape = "tag-text-r";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'rect',
+            },
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            rect: {
+                width: width,
+                height: height,
+                x: 0,
+                y: 0,
+                fill: "#BA323766",
+                stroke: "#BA3237",
+                opacity: 0.5,
+                "stroke-width": 1,
+            },
+            label: {
+                fill: '#C9D0FE',
+                fontSize: 14,
+                refX: 50,
+                refY: 5,
+                "text-anchor": "middle"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
 // 小标签文字
 const registerTagTexts = () => {
     const width = 74;
@@ -3748,6 +3793,68 @@ const registerLabelText = () => {
     Graph.registerNode(shape, option, true);
 }
 
+// simple文字
+const registerSimpleText = () => {
+    const width = 150;
+    const height = 24;
+    const shape = "simple-text";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            label: {
+                fill: '#D0D0D0',
+                fontSize: fontsize,
+                refX: 0,
+                refY: 6,
+                "text-anchor": "start"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// simple文字
+const registerSimpleTextR = () => {
+    const width = 150;
+    const height = 24;
+    const shape = "simple-text-r";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            label: {
+                fill: '#D0D0D0',
+                fontSize: fontsize,
+                refX: 0,
+                refY: 6,
+                "text-anchor": "end"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
 // value文字
 const registerValueText = () => {
     const width = 74;
@@ -3792,6 +3899,235 @@ const registerValueText = () => {
     Graph.registerNode(shape, option, true);
 }
 
+// 总貌主变
+const registerMainChange = () => {
+    const width = 74;
+    const height = 24;
+    const r = 10;
+    const w = 2;
+    const shape = "main-change";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'line1',
+            },
+            {
+                tagName: 'path',
+                selector: 'path',
+            },
+            {
+                tagName: 'path',
+                selector: 'path1',
+            },
+            {
+                tagName: 'circle',
+                selector: 'circle1',
+            },
+            {
+                tagName: 'circle',
+                selector: 'circle2',
+            },
+            {
+                tagName: 'path',
+                selector: 'path2',
+            },
+            {
+                tagName: 'rect',
+                selector: 'line2',
+            },
+        ],
+        attrs: {
+            line1: {
+                width: weight,
+                height: 10,
+                x: -(weight/2),
+                y: 0,
+                fill: "#b30461",
+                stroke: "transparent",
+            },
+            circle1: {
+                cx: 0,
+                cy: 20,
+                r: 10,
+                fill: "transparent",
+                stroke: "#d500ff",
+                "stroke-width": 2,
+            },
+            circle2: {
+                cx: 0,
+                cy: 34,
+                r: 10,
+                fill: "transparent",
+                stroke: "#cbaa07",
+                "stroke-width": 2,
+            },
+            path: {
+                d: `M0,20 l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
+                x: -(weight / 2),
+                y: 0,
+                fill: "transparent",
+                stroke: "#d500ff",
+                "stroke-width": w,
+            },
+            path1: {
+                d: `M0,34 m-1,-${r/2} l0,${r} l${r/2},-${r/2} l-${r/2},-${r/2}`,
+                x: -(weight / 2),
+                y: 0,
+                fill: "transparent",
+                stroke: "#cbaa07",
+                "stroke-width": w,
+            },
+            path2: {
+                d: `M-20,${weight*2+15} l50,0 l0,2.5 l7.5,-2.5 l-7.5,-2.5 l0,2.5 z`,
+                x: -(weight / 2),
+                y: 0,
+                fill: "#d500ff",
+                stroke: "#d500ff",
+                "stroke-width": w,
+                transform: `rotate(-30) translate(-20, -3)`
+            },
+            line2: {
+                width: weight,
+                height: 10,
+                x: -(weight/2),
+                y: 44,
+                fill: "#cbaa07",
+                stroke: "transparent",
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// 风机
+const registerFan = () => {
+    const width = 40;
+    const height = 24;
+    const shapeName = "fan";
+    const commonOption = () => {
+        return {
+            width: width,
+            height: height,
+            markup: [
+                {
+                    tagName: 'rect',
+                    selector: 'rect',
+                },
+                {
+                    tagName: 'text',
+                    selector: 'label',
+                },
+                {
+                    tagName: 'image',
+                    selector: 'image',
+                }
+            ],
+            attrs: {
+                rect: {
+                    width: width,
+                    height: height,
+                    x: 0,
+                    y: 0,
+                    rx: 4,
+                    ry: 4,
+                    opacity: 0.5,
+                    "stroke-width": 1,
+                },
+                label: {
+                    fill: '#B2BDC0',
+                    fontSize: 13,
+                    refX: 20,
+                    refY: 6,
+                    "text-anchor": "middle"
+                },
+                image: {
+                    width: 36,
+                    height: 50,
+                    refX: 2,
+                    refY: -55,
+                },
+            },
+        }
+    }
+    const green = () =>{
+        const color = "green";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#05bb4c66";
+        option.attrs.rect.stroke = "#05bb4c";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        Graph.registerNode(shape, option, true);
+    }
+    const gray = () =>{
+        const color = "gray";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#B3BDC066";
+        option.attrs.rect.stroke = "#B3BDC0";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        Graph.registerNode(shape, option, true);
+    }
+    const blue = () =>{
+        const color = "blue";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#1a93cf66";
+        option.attrs.rect.stroke = "#1a93cf";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        Graph.registerNode(shape, option, true);
+    }
+    const orange = () =>{
+        const color = "orange";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#e17e2366";
+        option.attrs.rect.stroke = "#e17e23";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        Graph.registerNode(shape, option, true);
+    }
+    const red = () =>{
+        const color = "red";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#BA323766";
+        option.attrs.rect.stroke = "#BA3237";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        Graph.registerNode(shape, option, true);
+    }
+    green();
+    gray();
+    blue();
+    orange();
+    red();
+}
+
 // 注册自定义节点
 const register = () => {
     registerRootNode();
@@ -3830,6 +4166,11 @@ const register = () => {
     registerLabelText();
     registerValueText();
     registerTagTexts();
+    registerMainChange();
+    registerSimpleText();
+    registerSimpleTextR();
+    registerFan();
+    registerTagTextR();
 }
 
 export default {

src/views/WindSite/components/gax6.vue

@@ -0,0 +1,759 @@
+<template>
+    <div class="gax6"></div>
+</template>
+
+<script>
+import { Graph } from "@antv/x6";
+import customNode from "./customNode.js";
+
+export default {
+    // 名称
+    name: "gax6",
+    // 使用组件
+    components: {},
+    // 传入参数
+    props: {},
+    // 自定义事件
+    emits: {},
+    // 数据
+    data() {
+        return {
+            graph: null,
+            color: {
+                red: "#b30461",
+                yellow: "#cbaa07",
+            },
+            data: [{
+                id: "111",
+                x: 912.5,
+                y: 175,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "101",
+                x: 803,
+                y: 299,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "102",
+                x: 1023,
+                y: 299,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "301",
+                x: 803,
+                y: 380,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "302",
+                x: 1023,
+                y: 380,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "314",
+                x: 738,
+                y: 497,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "315",
+                x: 868,
+                y: 497,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "323",
+                x: 958,
+                y: 497,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "322",
+                x: 1088,
+                y: 497,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },],
+            labels: [{
+                id: "mmx",
+                shape: "tag-text-r",
+                x: 862,
+                y: 50,
+                label: "某某线",
+            },{
+                id: "110kvmx",
+                shape: "simple-text",
+                x: 772.5,
+                y: 200,
+                label: "110kV 母线",
+            },{
+                id: "35kv1mx",
+                shape: "simple-text",
+                x: 724,
+                y: 408,
+                label: "35kV I母线",
+            },{
+                id: "35kv2mx",
+                shape: "simple-text-r",
+                x: 1102,
+                y: 408,
+                label: "35kV II母线",
+            },{
+                id: "L111",
+                shape: "simple-text",
+                x: 930,
+                y: 155,
+                label: "111",
+            },{
+                id: "L102",
+                shape: "simple-text",
+                x: 1040,
+                y: 278,
+                label: "102",
+            },{
+                id: "L302",
+                shape: "simple-text",
+                x: 1040,
+                y: 358,
+                label: "302",
+            },{
+                id: "L101",
+                shape: "simple-text-r",
+                x: 785,
+                y: 278,
+                label: "101",
+            },{
+                id: "L301",
+                shape: "simple-text-r",
+                x: 785,
+                y: 358,
+                label: "301",
+            },{
+                id: "L314",
+                shape: "simple-text-r",
+                x: 725,
+                y: 470,
+                label: "314",
+            },{
+                id: "L315",
+                shape: "simple-text-r",
+                x: 855,
+                y: 470,
+                label: "315",
+            },{
+                id: "L323",
+                shape: "simple-text-r",
+                x: 940,
+                y: 470,
+                label: "323",
+            },{
+                id: "L322",
+                shape: "simple-text-r",
+                x: 1070,
+                y: 470,
+                label: "322",
+            },{
+                id: "zb_1",
+                shape: "tag-text-s",
+                x: 680,
+                y: 320,
+                label: "#1主变",
+            },{
+                id: "zb_2",
+                shape: "tag-text-s",
+                x: 1080,
+                y: 320,
+                label: "#2主变",
+            },{
+                id: "jddl_1",
+                shape: "tag-text",
+                x: 90,
+                y: 555,
+                label: "#1集电线路",
+            },{
+                id: "jddl_3",
+                shape: "tag-text",
+                x: 1640,
+                y: 555,
+                label: "#3集电线路",
+            },{
+                id: "jddl_2",
+                shape: "tag-text",
+                x: 90,
+                y: 815,
+                label: "#2集电线路",
+            },{
+                id: "jddl_4",
+                shape: "tag-text",
+                x: 1640,
+                y: 685,
+                label: "#4集电线路",
+            }],
+            fans: [{
+                id: "fanA01",
+                shape: "fan-blue",
+                x: 90,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA02",
+                shape: "fan-gray",
+                x: 140,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA03",
+                shape: "fan-orange",
+                x: 190,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA04",
+                shape: "fan-red",
+                x: 240,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA05",
+                shape: "fan-green",
+                x: 290,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA06",
+                shape: "fan-green",
+                x: 340,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA07",
+                shape: "fan-green",
+                x: 390,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA08",
+                shape: "fan-green",
+                x: 440,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA09",
+                shape: "fan-green",
+                x: 490,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA10",
+                shape: "fan-green",
+                x: 540,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA11",
+                shape: "fan-green",
+                x: 590,
+                y: 510,
+                label: "A01",
+            },
+
+            {
+                id: "fanA01-p",
+                shape: "fan-green",
+                x: 90,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA02-p",
+                shape: "fan-green",
+                x: 140,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA03-p",
+                shape: "fan-green",
+                x: 190,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA04-p",
+                shape: "fan-green",
+                x: 240,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA05-p",
+                shape: "fan-green",
+                x: 290,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA06-p",
+                shape: "fan-green",
+                x: 340,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA07-p",
+                shape: "fan-green",
+                x: 390,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA08-p",
+                shape: "fan-green",
+                x: 440,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA09-p",
+                shape: "fan-green",
+                x: 490,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA10-p",
+                shape: "fan-green",
+                x: 540,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA11-p",
+                shape: "fan-green",
+                x: 590,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA12-p",
+                shape: "fan-green",
+                x: 640,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA13-p",
+                shape: "fan-green",
+                x: 690,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA14-p",
+                shape: "fan-green",
+                x: 740,
+                y: 770,
+                label: "A01",
+            },
+            
+            {
+                id: "fanA12",
+                shape: "fan-green",
+                x: 1200,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA13",
+                shape: "fan-green",
+                x: 1250,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA14",
+                shape: "fan-green",
+                x: 1300,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA15",
+                shape: "fan-green",
+                x: 1350,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA16",
+                shape: "fan-green",
+                x: 1400,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA17",
+                shape: "fan-green",
+                x: 1450,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA18",
+                shape: "fan-green",
+                x: 1500,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA19",
+                shape: "fan-green",
+                x: 1550,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA20",
+                shape: "fan-green",
+                x: 1600,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA21",
+                shape: "fan-green",
+                x: 1650,
+                y: 510,
+                label: "A01",
+            },{
+                id: "fanA22",
+                shape: "fan-green",
+                x: 1700,
+                y: 510,
+                label: "A01",
+            },
+            
+            {
+                id: "fanA23-m",
+                shape: "fan-green",
+                x: 1150,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA24-m",
+                shape: "fan-green",
+                x: 1200,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA25-m",
+                shape: "fan-green",
+                x: 1250,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA26-m",
+                shape: "fan-green",
+                x: 1300,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA27-m",
+                shape: "fan-green",
+                x: 1350,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA28-m",
+                shape: "fan-green",
+                x: 1400,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA29-m",
+                shape: "fan-green",
+                x: 1450,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA31-m",
+                shape: "fan-green",
+                x: 1600,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA32-m",
+                shape: "fan-green",
+                x: 1650,
+                y: 640,
+                label: "A01",
+            },{
+                id: "fanA33-m",
+                shape: "fan-green",
+                x: 1700,
+                y: 640,
+                label: "A01",
+            },
+
+            {
+                id: "fanA23-2",
+                shape: "fan-green",
+                x: 1100,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA23-1",
+                shape: "fan-green",
+                x: 1150,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA23",
+                shape: "fan-green",
+                x: 1200,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA24",
+                shape: "fan-green",
+                x: 1250,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA25",
+                shape: "fan-green",
+                x: 1300,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA26",
+                shape: "fan-green",
+                x: 1350,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA27",
+                shape: "fan-green",
+                x: 1400,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA28",
+                shape: "fan-green",
+                x: 1450,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA29",
+                shape: "fan-green",
+                x: 1500,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA30",
+                shape: "fan-green",
+                x: 1550,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA31",
+                shape: "fan-green",
+                x: 1600,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA32",
+                shape: "fan-green",
+                x: 1650,
+                y: 770,
+                label: "A01",
+            },{
+                id: "fanA33",
+                shape: "fan-green",
+                x: 1700,
+                y: 770,
+                label: "A01",
+            }]
+        };
+    },
+    // 函数
+    methods: {
+        initGraph: function () {
+            this.graph = new Graph({
+                container: this.$el, // 画布的容器
+                // width: undefined, // 默认使用容器宽度
+                // height: undefined, // 默认使用容器高度
+                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
+                mousewheel: {
+                    enabled: true,
+                    modifiers: [],
+                },
+                scroller: {
+                    enabled: true,
+                    pannable: true,
+                },
+                interacting: false,
+            });
+            // this.graph.zoomTo(0.8);
+        },
+        initData: function () {
+            const data = { 
+                nodes: [{
+                    id: "back-line1",
+                    x: 80,
+                    y: 400,
+                    shape: "path",
+                    attrs: {
+                        body: {
+                            d: `M1007.9,99.76V273.33h473V172.08H1045.63V143.15H1672.5
+                                M878,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666c6.49,0,6.49,0,6.49-6.48V279.81c0-5.9,0-6-6-6q-22.5,0-45,0H1513.1
+                                M788,99.76V401.51H1
+                                M658.11,99.76v44.39H1
+                                M803.52,34.42H643.62
+                                M1023.39,34.42H863.49
+                                M723.07,-19V33.42
+                                M942.94,-19V33.42
+                                M658.11,35.91V66.84
+                                M788,35.91V66.84
+                                M878,35.91V66.84
+                                M1007.9,35.91V66.84`,
+                            fill: "transparent",
+                            stroke: "#cbaa07",
+                            "stroke-width": 3,
+                        },
+                    },
+                    movable: false,
+                },{
+                    id: "back-line2",
+                    x: 772.5,
+                    y: 100,
+                    shape: "path",
+                    attrs: {
+                        body: {
+                            d: `M281,123.82H1
+                                M140,75v49
+                                M140,1V48.73
+                                M30.4,125.31v47
+                                M249.63,125.31v47`,
+                            fill: "transparent",
+                            stroke: "#b30461",
+                            "stroke-width": 3,
+                        },
+                    },
+                    movable: false,
+                },{
+                    id: "main-change-1",
+                    x: 803,
+                    y: 300,
+                    shape: "main-change",
+                    movable: false,
+                },{
+                    id: "main-change-2",
+                    x: 1023,
+                    y: 300,
+                    shape: "main-change",
+                    movable: false,
+                },{
+                    id: "top-arrow",
+                    x: 912.5,
+                    y: 86,
+                    shape: "arrow-vertical-top-left",
+                    attrs: {
+                        line: {
+                            height: 0,
+                        },
+                        arrow: {
+                            fill: "#b30461",
+                            refY: 0,
+                        }
+                    },
+                    movable: false,
+                }] 
+            };
+            this.data.forEach(item => {
+                switch (item.type) {
+                    case "switch":
+                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
+                        break;
+                    case "handcart":
+                        item.shape = `handcart${item.state1}${item.state2}`
+                        break;
+                    default:
+                        break;
+                }
+                let shape = `${item.shape}-${item.direction}`;
+                let node = {
+                    id: item.id,
+                    x: item.x,
+                    y: item.y,
+                    shape: shape,
+                    movable: false,
+                }
+                data.nodes.push(node);
+            })
+            this.labels.forEach(item => {
+                let node = {
+                    id: item.id,
+                    x: item.x,
+                    y: item.y,
+                    shape: item.shape,
+                    attrs: {
+                        label: {
+                            text: item.label,
+                        },
+                    },
+                    movable: false,
+                }
+                switch (item.shape) {
+                    case "form-text":
+                        node.attrs.value = {
+                            text: item.value,
+                        }
+                        break;
+                
+                    default:
+                        break;
+                }
+                data.nodes.push(node);
+            })
+            this.fans.forEach(item => {
+                let node = {
+                    id: item.id,
+                    x: item.x,
+                    y: item.y,
+                    shape: item.shape,
+                    attrs: {
+                        label: {
+                            text: item.label,
+                        },
+                    },
+                    movable: false,
+                }
+                data.nodes.push(node);
+            })
+            this.graph.fromJSON(data);
+            this.graph.centerContent();
+        },
+        initX6: function () {
+            // 注册自定义节点
+            customNode.register();
+            this.initGraph();
+            this.initData();
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.initX6();
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/WindSite/pages/GeneralAppearance.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="general-appearance">
+        <div class="btn-group-tabs">
+            <BtnGroup2
+                :btnGroups="btnGroups"
+                :rowIndex="0"
+                :index="1"
+                @select="select"
+            ></BtnGroup2>
+        </div>
+        <div class="panel-title">
+            <div class="panel-title-name">
+                <span class="svg-icon svg-icon-green svg-icon-sm">
+                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
+                </span>
+                <span class="green">某某某风电场总貌</span>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/black.png" />
+                    <span class="sub-title gray">接入台数</span>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/green.png" />
+                    <span class="sub-title green">待机台数</span>
+                    <span class="sub-count font-num green">56</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/blue.png" />
+                    <span class="sub-title blue">并网台数</span>
+                    <span class="sub-count font-num blue">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/purple.png" />
+                    <span class="sub-title pink">限电台数</span>
+                    <span class="sub-count font-num pink">3</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/red.png" />
+                    <span class="sub-title red">故障台数</span>
+                    <span class="sub-count font-num red">5</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/orange.png" />
+                    <span class="sub-title orange">检修台数</span>
+                    <span class="sub-count font-num orange">20</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/white.png" />
+                    <span class="sub-title white">受累台数</span>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/black.png" />
+                    <span class="sub-title gray">离线台数</span>
+                    <span class="sub-count font-num gray">2</span>
+                </div>
+            </div>
+        </div>
+        <gax6 class="general-appearance-body"></gax6>
+    </div>
+</template>
+
+<script>
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import gax6 from "../components/gax6.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+    // 名称
+    name: "GeneralAppearance",
+    // 使用组件
+    components: {
+        gax6,
+        BtnGroup2,
+        SvgIcon,
+    },
+    // 数据
+    data() {
+        return {
+            btnGroups: [
+                {
+                    icon: "svg-wind-site",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmfdc1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mhsfc",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc4",
+                        },
+                    ],
+                },
+                {
+                    icon: "svg-photovoltaic",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmgf1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf4",
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    // 函数
+    methods: {
+        select: function (item) {
+            console.log(item)
+        }
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.general-appearance {
+    width: 100%;
+    height: calc(100vh - 90px);
+    display: flex;
+    flex-direction: column;
+
+    .btn-group-tabs {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .general-appearance-body {
+        flex-grow: 1;
+    }
+
+    .panel-title {
+        width: 100%;
+        background-color: fade(@darkgray, 40%);
+        margin-top: 1.481vh;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+
+        .panel-title-name {
+            color: @green;
+            display: flex;
+            align-items: center;
+            line-height: 0;
+            font-size: 0;
+
+            i,
+            span {
+                margin: 0 0 0 1.481vh;
+                line-height: 0;
+                font-size: 13px;
+            }
+        }
+
+        .sub-title-item {
+            display: flex;
+            align-items: center;
+            margin-left: 16px;
+            
+            .sub-title {
+                font-size: 13px;
+                margin-left: 6px;
+            }
+
+            .sub-count {
+                font-size: 13px;
+                font-weight: 500;
+            }
+            
+            img {
+                height: 31px;
+            }
+        }
+    }
+}
+</style>

src/views/WindSite/pages/Map1.vue

@@ -1,256 +1,170 @@
 <template>
-  <div class="map-1">
-    <div class="btn-group-tabs">
-      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
-    </div>
-    <div class="panel-title">
-      <div class="panel-title-name">
-        <span class="svg-icon svg-icon-green svg-icon-sm">
-          <SvgIcon svgid="svg-wind-site"></SvgIcon>
-        </span>
-        <span class="green">某某某风电场</span>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">接入台数</span>
-          <span class="sub-count font-num white">256</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/green.png" />
-          <span class="sub-title green">待机台数</span>
-          <span class="sub-count font-num green">56</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/blue.png" />
-          <span class="sub-title blue">并网台数</span>
-          <span class="sub-count font-num blue">256</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/purple.png" />
-          <span class="sub-title pink">限电台数</span>
-          <span class="sub-count font-num pink">3</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/red.png" />
-          <span class="sub-title red">故障台数</span>
-          <span class="sub-count font-num red">5</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/orange.png" />
-          <span class="sub-title orange">检修台数</span>
-          <span class="sub-count font-num orange">20</span>
+    <div class="map-1">
+        <div class="btn-group-tabs">
+            <BtnGroup2
+                :btnGroups="btnGroups"
+                :rowIndex="0"
+                :index="1"
+                @select="select"
+            ></BtnGroup2>
         </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/white.png" />
-          <span class="sub-title white">受累台数</span>
-          <span class="sub-count font-num white">256</span>
+        <div class="panel-title">
+            <div class="panel-title-name">
+                <span class="svg-icon svg-icon-green svg-icon-sm">
+                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
+                </span>
+                <span class="green">某某某风电场</span>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/black.png" />
+                    <span class="sub-title gray">接入台数</span>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/green.png" />
+                    <span class="sub-title green">待机台数</span>
+                    <span class="sub-count font-num green">56</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/blue.png" />
+                    <span class="sub-title blue">并网台数</span>
+                    <span class="sub-count font-num blue">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/purple.png" />
+                    <span class="sub-title pink">限电台数</span>
+                    <span class="sub-count font-num pink">3</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/red.png" />
+                    <span class="sub-title red">故障台数</span>
+                    <span class="sub-count font-num red">5</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/orange.png" />
+                    <span class="sub-title orange">检修台数</span>
+                    <span class="sub-count font-num orange">20</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/white.png" />
+                    <span class="sub-title white">受累台数</span>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/black.png" />
+                    <span class="sub-title gray">离线台数</span>
+                    <span class="sub-count font-num gray">2</span>
+                </div>
+            </div>
         </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">离线台数</span>
-          <span class="sub-count font-num gray">2</span>
+        <div class="panel-body">
+            <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
         </div>
-      </div>
     </div>
-    <div class="panel-body">
-      <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
-      <div class="map-popup-panel" v-show="showPopup">
-        <div class="map-popup-panel-header">
-          <div class="map-popup-panel-title green">某某风电场总貌<span></span></div>
-          <div class="map-popup-panel-date gray">2020年5月10日</div>
-          <div class="map-popup-panel-back" @click="popupBack">
-            <span class="svg-icon svg-icon-white svg-icon-sm">
-              <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
-            </span>
-          </div>
-        </div>
-        <div class="map-popup-panel-body">
-          <table class="table-form">
-            <tr>
-              <td class="text white">装机容量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">M/W</td>
-              <td class="text white">装机台数</td>
-              <td class="value green">33</td>
-              <td class="unit white">台</td>
-              <td class="text white">风机型号</td>
-              <td class="value green" colspan="2">UP82/77-1500</td>
-            </tr>
-            <tr>
-              <td class="text white">实时功率</td>
-              <td class="value green">50.81</td>
-              <td class="unit white">M/W</td>
-              <td class="text white">平均风速</td>
-              <td class="value green">14.66</td>
-              <td class="unit white">m/s</td>
-              <td class="text white">运行台数</td>
-              <td class="value green">33</td>
-              <td class="unit white">台</td>
-            </tr>
-            <tr>
-              <td class="text white">待机台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white">故障台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white">维护台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-            </tr>
-            <tr>
-              <td class="text white">离线台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-            <tr>
-              <td class="text white">日发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white">月发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-            <tr>
-              <td class="text white">年发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white">总发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import arcgis from "@com/arcgis/arcgis.vue";
-import dataService from "@/helper/data.js";
 
 export default {
-  // 名称
-  name: "Map1",
-  // 使用组件
-  components: {
-    BtnGroup2,
-    SvgIcon,
-    arcgis,
-  },
-  // 数据
-  data() {
-    return {
-      btnGroups: [
-        {
-          icon: "svg-wind-site",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmfdc1",
-            },
-            {
-              text: "某某风场",
-              code: "mhsfc",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc2",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc3",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc4",
+    // 名称
+    name: "Map1",
+    // 使用组件
+    components: {
+        BtnGroup2,
+        SvgIcon,
+        arcgis,
+    },
+    // 数据
+    data() {
+        return {
+            btnGroups: [
+                {
+                    icon: "svg-wind-site",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmfdc1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mhsfc",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc4",
+                        },
+                    ],
+                },
+                {
+                    icon: "svg-photovoltaic",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmgf1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf4",
+                        },
+                    ],
+                },
+            ],
+            arcgisData: {
+                mode: "2D", // 模式 2D 3D
+                title: "宁夏地图", // 标题
+                center: [106.60768412800003, 37.806672373000006], // 初始中心点
+                height: 654, // 3D地图初始相机高度
+                tilt: 65, // 俯视角
+                scale: 15000,
             },
-          ],
+        };
+    },
+    // 函数
+    methods: {
+        when: function () {
+           this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "830px", "707px");
         },
-        {
-          icon: "svg-photovoltaic",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmgf1",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf2",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf3",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf4",
-            },
-          ],
+        clickMap: function (info) {
+            console.log(info)
         },
-      ],
-      arcgisData: {
-        mode: "2D", // 模式 2D 3D
-        title: "宁夏地图", // 标题
-        center: [106.230909, 38.487193], // 初始中心点
-        height: 654, // 3D地图初始相机高度
-        tilt: 65, // 俯视角
-        scale: 15000,
-      },
-      showPopup: false,
-    };
-  },
-  // 函数
-  methods: {
-    when: function() {
-      let jsonObj = dataService.get("arcgis-nx-fc1");
-      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
-      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
-      setTimeout(() => {
-        this.$refs.arcgis.goto([106.50778412800003, 37.766672373000006]);
-      }, 3000);
     },
-    clickMap: function(info) {
-      console.log(info);
-      this.showPopup = true;
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
     },
-    popupBack: function() {
-      this.showPopup = false;
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
     },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
 };
 </script>
 
@@ -258,163 +172,163 @@ export default {
 @titleHeight: 3.704vh;
 
 .map-1 {
-  width: 100%;
-  height: calc(100vh - 90px);
-  display: flex;
-  flex-direction: column;
-
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .panel-title {
     width: 100%;
-    background-color: fade(@darkgray, 40%);
-    margin-top: 1.481vh;
-    padding: 6px;
+    height: calc(100vh - 90px);
     display: flex;
-    align-items: center;
-
-    .panel-title-name {
-      color: @green;
-      display: flex;
-      align-items: center;
-      line-height: 0;
-      font-size: 0;
+    flex-direction: column;
 
-      i,
-      span {
-        margin: 0 0 0 1.481vh;
-        line-height: 0;
-        font-size: 13px;
-      }
+    .btn-group-tabs {
+        display: flex;
+        flex-direction: row;
     }
 
-    .sub-title-item {
-      display: flex;
-      align-items: center;
-      margin-left: 16px;
+    .panel-title {
+        width: 100%;
+        background-color: fade(@darkgray, 40%);
+        margin-top: 1.481vh;
+        padding: 6px;
+        display: flex;
+        align-items: center;
 
-      .sub-title {
-        font-size: 13px;
-        margin-left: 6px;
-      }
+        .panel-title-name {
+            color: @green;
+            display: flex;
+            align-items: center;
+            line-height: 0;
+            font-size: 0;
+
+            i,
+            span {
+                margin: 0 0 0 1.481vh;
+                line-height: 0;
+                font-size: 13px;
+            }
+        }
 
-      .sub-count {
-        font-size: 13px;
-        font-weight: 500;
-      }
+        .sub-title-item {
+            display: flex;
+            align-items: center;
+            margin-left: 16px;
+            
+            .sub-title {
+                font-size: 13px;
+                margin-left: 6px;
+            }
 
-      img {
-        height: 31px;
-      }
+            .sub-count {
+                font-size: 13px;
+                font-weight: 500;
+            }
+            
+            img {
+                height: 31px;
+            }
+        }
     }
-  }
 
-  .panel-body {
-    flex-grow: 1;
-    background-color: fade(@darkgray, 20%);
-    padding: 0.741vh;
-    overflow: auto;
-    position: relative;
+    .panel-body {
+        flex-grow: 1;
+        background-color: fade(@darkgray, 20%);
+        padding: 0.741vh;
+        overflow: auto;
+        position: relative;
 
-    .map-popup-panel {
-      width: 679px;
-      position: absolute;
-      left: 71px;
-      top: 22px;
+        .map-popup-panel {
+            width: 679px;
+            position: absolute;
+            left: 71px;
+            top: 22px;
 
-      .map-popup-panel-header {
-        width: 100%;
-        background: fade(#152221, 90%);
-        display: flex;
+            .map-popup-panel-header {
+                width: 100%;
+                background: fade(#152221, 90%);
+                display: flex;
 
-        .map-popup-panel-title {
-          padding: 17px 24px;
-          font-size: @fontsize-s;
-          position: relative;
+                .map-popup-panel-title {
+                    padding: 17px 24px;
+                    font-size: @fontsize-s;
+                    position: relative;
 
-          &::before,
-          &::after {
-            position: absolute;
-            width: calc(50% - 6px);
-            bottom: 0;
-            border-bottom: 2px solid @green;
-          }
+                    &::before,
+                    &::after {
+                        position: absolute;
+                        width: calc(50% - 6px);
+                        bottom: 0;
+                        border-bottom: 2px solid @green;
+                    }
 
-          &::before {
-            content: "";
-            left: 0;
-          }
+                    &::before {
+                        content: "";
+                        left: 0;
+                    }
 
-          &::after {
-            content: "";
-            right: 0;
-          }
+                    &::after {
+                        content: "";
+                        right: 0;
+                    }
 
-          span {
-            position: absolute;
-            width: 11.3px;
-            height: 11.3px;
-            border-left: 2px solid @green;
-            border-top: 2px solid @green;
-            left: calc(50% - 5.65px);
-            bottom: -3px;
-            transform: rotate(45deg);
-          }
-        }
+                    span {
+                        position: absolute;
+                        width: 11.3px;
+                        height: 11.3px;
+                        border-left: 2px solid @green;
+                        border-top: 2px solid @green;
+                        left: calc(50% - 5.65px);
+                        bottom: -3px;
+                        transform: rotate(45deg);
+                    }
+                }
 
-        .map-popup-panel-date {
-          flex-grow: 1;
-          padding: 17px 24px;
-          font-size: @fontsize-s;
-          text-align: right;
-          border-bottom: 2px solid @green;
-        }
+                .map-popup-panel-date {
+                    flex-grow: 1;
+                    padding: 17px 24px;
+                    font-size: @fontsize-s;
+                    text-align: right;
+                    border-bottom: 2px solid @green;
+                }
 
-        .map-popup-panel-back {
-          margin-left: auto;
-          width: 54px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          cursor: pointer;
+                .map-popup-panel-back {
+                    margin-left: auto;
+                    width: 54px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    cursor: pointer;
 
-          &::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            height: 50%;
-            border-left: 1px solid @gray;
-            top: 25%;
-          }
-        }
-      }
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        height: 50%;
+                        border-left: 1px solid @gray;
+                        top: 25%;
+                    }
+                }
+            }
 
-      .map-popup-panel-body {
-        background: fade(#152221, 75%);
-        border: 1px solid fade(@darkgray, 40);
-        border-top: 0px;
+            .map-popup-panel-body {
+                background: fade(#152221, 75%);
+                border: 1px solid fade(@darkgray, 40);
+                border-top: 0px;
 
-        .table-form {
-          .text,
-          .unit {
-            font-weight: 400;
-          }
+                .table-form {
+                    .text,
+                    .unit {
+                        font-weight: 400;
+                    }
 
-          .unit {
-            min-width: auto;
-          }
+                    .unit {
+                        min-width: auto;
+                    }
 
-          .value,
-          .unit {
-            text-align: left;
-          }
+                    .value,
+                    .unit {
+                        text-align: left;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>