Merge remote-tracking branch 'origin/update/V1.0.17' into wsy

public/static/3d/fanvar.gltf

@@ -0,0 +1,747 @@
+{
+    "asset": {
+        "copyright": "2020 (c) Adobe Inc.",
+        "generator": "Adobe Dimension - a39c749b7f1dd68e8fcb597e3575f0bb9d09bfc8",
+        "version": "2.0"
+    },
+    "accessors": [
+        {
+            "bufferView": 0,
+            "componentType": 5126,
+            "count": 13056,
+            "type": "VEC3",
+            "max": [
+                0.011221112683415413,
+                0.11740083247423172,
+                0.02024685963988304
+            ],
+            "min": [
+                -0.013411412015557289,
+                -0.07223401963710785,
+                0.0027049516793340446
+            ]
+        },
+        {
+            "bufferView": 1,
+            "componentType": 5126,
+            "count": 13056,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "componentType": 5126,
+            "count": 13056,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 3,
+            "componentType": 5125,
+            "count": 13056,
+            "type": "SCALAR",
+            "max": [
+                13055.0
+            ],
+            "min": [
+                0.0
+            ]
+        },
+        {
+            "bufferView": 4,
+            "componentType": 5126,
+            "count": 204,
+            "type": "VEC3",
+            "max": [
+                0.0033453553915023805,
+                0.004675381816923618,
+                0.038124099373817447
+            ],
+            "min": [
+                -0.0032793614082038404,
+                -0.0018486910266801715,
+                -0.00942382775247097
+            ]
+        },
+        {
+            "bufferView": 5,
+            "componentType": 5126,
+            "count": 204,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 6,
+            "componentType": 5126,
+            "count": 204,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 7,
+            "componentType": 5125,
+            "count": 204,
+            "type": "SCALAR",
+            "max": [
+                203.0
+            ],
+            "min": [
+                0.0
+            ]
+        },
+        {
+            "bufferView": 8,
+            "componentType": 5126,
+            "count": 756,
+            "type": "VEC3",
+            "max": [
+                0.014427456073462963,
+                0.014790236949920655,
+                0.036329951137304309
+            ],
+            "min": [
+                -0.013931798748672009,
+                -0.014883722178637982,
+                -0.04279765114188194
+            ]
+        },
+        {
+            "bufferView": 9,
+            "componentType": 5126,
+            "count": 756,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 10,
+            "componentType": 5126,
+            "count": 756,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 11,
+            "componentType": 5125,
+            "count": 756,
+            "type": "SCALAR",
+            "max": [
+                755.0
+            ],
+            "min": [
+                0.0
+            ]
+        },
+        {
+            "bufferView": 12,
+            "componentType": 5126,
+            "count": 96,
+            "type": "VEC3",
+            "max": [
+                0.002180294832214713,
+                0.002180294832214713,
+                0.0017989004263654352
+            ],
+            "min": [
+                -0.0021802950650453569,
+                -0.002180294832214713,
+                0.00009284965199185535
+            ]
+        },
+        {
+            "bufferView": 13,
+            "componentType": 5126,
+            "count": 96,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 14,
+            "componentType": 5126,
+            "count": 96,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 15,
+            "componentType": 5125,
+            "count": 96,
+            "type": "SCALAR",
+            "max": [
+                95.0
+            ],
+            "min": [
+                0.0
+            ]
+        },
+        {
+            "bufferView": 16,
+            "componentType": 5126,
+            "count": 216,
+            "type": "VEC3",
+            "max": [
+                0.00047969480510801077,
+                0.0004724071768578142,
+                0.002878570696339011
+            ],
+            "min": [
+                -0.00047969480510801077,
+                -0.00047240720596164465,
+                0.0
+            ]
+        },
+        {
+            "bufferView": 17,
+            "componentType": 5126,
+            "count": 216,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 18,
+            "componentType": 5126,
+            "count": 216,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 19,
+            "componentType": 5125,
+            "count": 216,
+            "type": "SCALAR",
+            "max": [
+                215.0
+            ],
+            "min": [
+                0.0
+            ]
+        },
+        {
+            "bufferView": 20,
+            "componentType": 5126,
+            "count": 2304,
+            "type": "VEC3",
+            "max": [
+                0.10547731816768646,
+                0.10547731816768646,
+                0.003030103398486972
+            ],
+            "min": [
+                -0.10547731816768646,
+                -0.10547731816768646,
+                0.0
+            ]
+        },
+        {
+            "bufferView": 21,
+            "componentType": 5126,
+            "count": 2304,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 22,
+            "componentType": 5126,
+            "count": 2304,
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 23,
+            "componentType": 5125,
+            "count": 2304,
+            "type": "SCALAR",
+            "max": [
+                2303.0
+            ],
+            "min": [
+                0.0
+            ]
+        }
+    ],
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteOffset": 0,
+            "byteLength": 156672,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 156672,
+            "byteLength": 156672,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 313344,
+            "byteLength": 104448,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 417792,
+            "byteLength": 52224,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 470016,
+            "byteLength": 2448,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 472464,
+            "byteLength": 2448,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 474912,
+            "byteLength": 1632,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 476544,
+            "byteLength": 816,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 477360,
+            "byteLength": 9072,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 486432,
+            "byteLength": 9072,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 495504,
+            "byteLength": 6048,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 501552,
+            "byteLength": 3024,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 504576,
+            "byteLength": 1152,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 505728,
+            "byteLength": 1152,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 506880,
+            "byteLength": 768,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 507648,
+            "byteLength": 384,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 508032,
+            "byteLength": 2592,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 510624,
+            "byteLength": 2592,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 513216,
+            "byteLength": 1728,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 514944,
+            "byteLength": 864,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 515808,
+            "byteLength": 27648,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 543456,
+            "byteLength": 27648,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 571104,
+            "byteLength": 18432,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 589536,
+            "byteLength": 9216,
+            "target": 34963
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 598752,
+            "uri": "fanvar_binary.bin"
+        }
+    ],
+    "cameras": [
+        {
+            "perspective": {
+                "znear": 0.00018717249622568488,
+                "yfov": 0.6024156808853149,
+                "zfar": 10.294486999511719,
+                "aspectRatio": 1.3333333730697632
+            },
+            "type": "perspective",
+            "name": "render_camera"
+        }
+    ],
+    "materials": [
+        {
+            "pbrMetallicRoughness": {
+                "metallicFactor": 0.0,
+                "roughnessFactor": 0.6000000238418579
+            },
+            "name": "25215",
+            "doubleSided": true
+        }
+    ],
+    "meshes": [
+        {
+            "name": "Box719",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Cylinder881",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 4,
+                        "NORMAL": 5,
+                        "TEXCOORD_0": 6
+                    },
+                    "indices": 7,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Cylinder882",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 9,
+                        "POSITION": 8,
+                        "TEXCOORD_0": 10
+                    },
+                    "indices": 11,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Cone277",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 12,
+                        "NORMAL": 13,
+                        "TEXCOORD_0": 14
+                    },
+                    "indices": 15,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Cylinder883",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 17,
+                        "POSITION": 16,
+                        "TEXCOORD_0": 18
+                    },
+                    "indices": 19,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box720",
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Box721",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 0,
+                        "NORMAL": 1,
+                        "TEXCOORD_0": 2
+                    },
+                    "indices": 3,
+                    "material": 0
+                }
+            ]
+        },
+        {
+            "name": "Cylinder884",
+            "primitives": [
+                {
+                    "attributes": {
+                        "POSITION": 20,
+                        "NORMAL": 21,
+                        "TEXCOORD_0": 22
+                    },
+                    "indices": 23,
+                    "material": 0
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "translation": [
+                -11.440691947937012,
+                -1.1253594160079957,
+                11.870344161987305
+            ],
+            "rotation": [
+                -0.12059047073125839,
+                0.379409521818161,
+                0.04995020851492882,
+                0.9159756302833557
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                0.9999999403953552
+            ],
+            "camera": 0,
+            "name": "render_camera_n3d"
+        },
+        {
+            "children": [
+                2
+            ],
+            "translation": [
+                -11.940691947937012,
+                -1.4253594875335694,
+                11.370344161987305
+            ],
+            "name": "fanvar"
+        },
+        {
+            "children": [
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+            ],
+            "translation": [
+                11.940667152404786,
+                5.136477947235107,
+                -11.370344161987305
+            ],
+            "rotation": [
+                -0.7071067690849304,
+                0.0,
+                0.0,
+                0.7071067690849304
+            ],
+            "scale": [
+                100.0,
+                100.0,
+                100.0
+            ],
+            "name": "fan"
+        },
+        {
+            "translation": [
+                0.013397247530519963,
+                -0.005721631925553083,
+                0.0017039866652339697
+            ],
+            "rotation": [
+                0.18382014334201814,
+                0.6827958822250366,
+                -0.6827934980392456,
+                0.18382878601551057
+            ],
+            "scale": [
+                0.15742753446102143,
+                0.15742753446102143,
+                0.15326982736587525
+            ],
+            "mesh": 0,
+            "name": "Box719"
+        },
+        {
+            "translation": [
+                0.006399879232048988,
+                -0.0013367461506277323,
+                -0.0275834072381258
+            ],
+            "mesh": 1,
+            "name": "Cylinder881"
+        },
+        {
+            "translation": [
+                0.006413211580365896,
+                -0.00017086027946788818,
+                0.010534534230828286
+            ],
+            "rotation": [
+                0.6996442079544067,
+                0.10246176272630692,
+                -0.10246184468269348,
+                0.699643611907959
+            ],
+            "scale": [
+                0.15742747485637666,
+                0.15742747485637666,
+                0.15742747485637666
+            ],
+            "mesh": 2,
+            "name": "Cylinder882"
+        },
+        {
+            "translation": [
+                0.006461353041231632,
+                -0.008173293434083462,
+                0.010590333491563797
+            ],
+            "rotation": [
+                0.6500799655914307,
+                -0.27820178866386416,
+                0.27820196747779848,
+                0.6500795483589172
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                2.4167239665985109
+            ],
+            "mesh": 3,
+            "name": "Cone277"
+        },
+        {
+            "translation": [
+                0.006452121771872044,
+                -0.00868171639740467,
+                0.0104585075750947
+            ],
+            "rotation": [
+                -0.49999988079071047,
+                -0.5000001192092896,
+                -0.49999988079071047,
+                0.5000001192092896
+            ],
+            "mesh": 4,
+            "name": "Cylinder883"
+        },
+        {
+            "translation": [
+                0.010709802620112896,
+                -0.005721667315810919,
+                0.02103104256093502
+            ],
+            "rotation": [
+                0.683228611946106,
+                0.1822049766778946,
+                -0.18219634890556336,
+                0.6832308769226074
+            ],
+            "scale": [
+                0.15742753446102143,
+                0.15742753446102143,
+                0.15326984226703645
+            ],
+            "mesh": 5,
+            "name": "Box720"
+        },
+        {
+            "translation": [
+                -0.004684195853769779,
+                -0.0057218605652451519,
+                0.009040119126439095
+            ],
+            "rotation": [
+                0.49940842390060427,
+                -0.5005908608436585,
+                0.5005971789360046,
+                0.49940213561058047
+            ],
+            "scale": [
+                0.15742753446102143,
+                0.15742753446102143,
+                0.15326984226703645
+            ],
+            "mesh": 6,
+            "name": "Box721"
+        },
+        {
+            "translation": [
+                0.006561756134033203,
+                0.0,
+                -0.03711118549108505
+            ],
+            "scale": [
+                0.15742747485637666,
+                0.15742747485637666,
+                0.15742747485637666
+            ],
+            "mesh": 7,
+            "name": "Cylinder884"
+        }
+    ],
+    "scenes": [
+        {
+            "nodes": [
+                0,
+                1
+            ],
+            "name": "scene"
+        }
+    ],
+    "scene": 0
+}

src/assets/png/direction/e.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(90, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/n.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(0, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/ne.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(45, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/nw.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(-45, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/s.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(180, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/se.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(135, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/sw.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(-135, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/direction/w.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path transform="rotate(-90, 512, 512)" fill="#606769"
+        d="M481.40237431 959.20431408l56.28935586 0 0-711.56197453 139.16205511 0-167.38743941-223.02022163-167.3874394 223.02022163 139.32468148 0 0 711.56197453z"></path>
+</svg>

src/assets/png/fanx6-blue.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#4b55ae"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#4b55ae"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#4b55ae"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="4s"
+            repeatCount="indefinite"/>
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-gray.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 #515251 -->
+    <g>
+        <path fill="#515251" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#606161"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#606161"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#606161"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-green.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#05bb4c"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#05bb4c"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#05bb4c"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-orange.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#e17e23"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#e17e23"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#e17e23"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-purple-stop.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#c531c7"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#c531c7"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#c531c7"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-purple.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#c531c7"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#c531c7"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#c531c7"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/>
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-red.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#BA3237"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#BA3237"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#BA3237"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/png/fanx6-white.svg

@@ -0,0 +1,59 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.5 96.5"
+    enable-background="new 0 0 93.5 96.5" xml:space="preserve">
+    <defs>
+        <rect id="SVGID_1_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+        <rect id="SVGID_3_" x="-260.14" y="-365.945" width="595.28" height="841.89" />
+    </defs>
+    <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible" />
+    </clipPath>
+    <clipPath id="SVGID_4_">
+        <use xlink:href="#SVGID_3_" overflow="visible" />
+    </clipPath>
+    <!-- 柱 -->
+    <g>
+        <path fill="#D8D8D8" d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
+        H45.96z" />
+    </g>
+    <!-- 风扇 -->
+    <g>
+        <!-- 风扇灰色部分 -->
+        <g>
+            <path fill="#ffffff"
+                d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35" />
+            <path fill="#ffffff"
+                d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821" />
+            <path fill="#ffffff"
+                d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592" />
+        </g>
+        <!-- 风扇白色部分 -->
+        <g>
+            <path fill="#D8D8D8" d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
+        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
+        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5" />
+            <path fill="#D8D8D8" d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
+        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
+        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965" />
+            <path fill="#D8D8D8" d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
+        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
+        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318" />
+        </g>
+        <!-- <animateTransform attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 46.75 39.182"
+            to="359 46.75 39.182"
+            dur="8s"
+            repeatCount="indefinite"/> -->
+    </g>
+    <!-- 中心圆大 -->
+    <g>
+        <path fill="#60BFD6" d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
+        S42.686,36.67,42.686,39.182" />
+    </g>
+    <!-- 中心圆小 -->
+    <g>
+        <path fill="#B1E1EB" d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
+        C45.753,36.353,44.4,37.622,44.4,39.182" />
+    </g>
+</svg>

src/assets/styles/app.less

@@ -89,7 +89,10 @@
   }
 }
 
-
 .el-col + .el-col {
   padding-left: 1.481vh;
-}
+}
+
+.blur {
+  backdrop-filter: blur(3px);
+}

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

@@ -14,6 +14,10 @@ body {
       cursor: not-allowed;
     }
 
+    &.is-in-pagination .el-input__inner[type="number"] {
+      width: 48px;
+    }
+
     .el-input__inner[type="number"] {
       width: 200px;
 
@@ -206,6 +210,15 @@ body {
     }
   }
 
+  .el-select {
+    .el-input.is-focus .el-input__inner {
+      border-color: @green;
+    }
+    .el-input__inner:focus {
+      border-color: @green;
+    }
+  }
+
   .el-popper {
     &.el-cascader__dropdown[role="tooltip"] {
       background: @picker-bg-color;
@@ -227,6 +240,25 @@ body {
         color: @green;
       }
     }
+
+    &.el-select__popper[role="tooltip"] {
+      border-color: @picker-bg-color;
+      background: @picker-bg-color;
+
+      .el-cascader-menu {
+        border-color: @gray;
+      }
+
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background: fade(@green, 20);
+        color: @green;
+      }
+
+      .el-select-dropdown__item.selected {
+        color: @green;
+      }
+    }
   }
 }
 

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

@@ -32,5 +32,9 @@
       background: fade(@gray, 20);
       border: 1px solid fade(@gray, 20);
     }
+
+    .el-pagination__sizes .el-input .el-input__inner:hover {
+      border-color: @green;
+    }
   }
 }

src/assets/styles/form.less

@@ -100,44 +100,45 @@
       color: @darkgray;
     }
   }
-}
-
-input[type="checkbox"] {
-  position: relative;
-  display: inline-block;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  outline: none;
-  border: 1px solid @gray;
-  background-color: #000;
-  border-radius: 20%;
-  margin: 0;
-
-  &:checked {
-    border-color: @green;
-    background: @green;
-  }
 
-  &::after {
+  input[type="checkbox"] {
+    position: relative;
     display: inline-block;
-    content: " ";
-    position: absolute;
-    left: 30%;
-    top: 5%;
-    width: 3px;
-    height: 7px;
-    border-color: #fff;
-    border-style: solid;
-    border-width: 0px 2px 2px 0px;
-    transform: rotate(45deg);
-    opacity: 0;
-  }
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    outline: none;
+    border: 1px solid @gray;
+    background-color: #000;
+    border-radius: 20%;
+    margin: 0;
+    padding: 0;
+
+    &:checked {
+      border-color: @green;
+      background: @green;
+    }
+
+    &::after {
+      display: inline-block;
+      content: " ";
+      position: absolute;
+      left: 30%;
+      top: 5%;
+      width: 3px;
+      height: 7px;
+      border-color: #fff;
+      border-style: solid;
+      border-width: 0px 2px 2px 0px;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
 
-  &:checked::after {
-    content: "";
-    opacity: 1;
-    transition: opacity 0.3s ease-out;
+    &:checked::after {
+      content: "";
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+    }
   }
 }
 

src/assets/styles/table.less

@@ -44,7 +44,7 @@
       }
 
       td {
-        padding: 0.556vh 0;
+        padding: 4px;
         color: @rowGray;
         text-align: center;
         font-size: @fontsize-s;
@@ -52,6 +52,12 @@
         overflow: hidden;
         text-overflow: ellipsis;
 
+        & > span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
         &.light,
         &.always-light {
           color: @green !important;

src/components/arcgis/arcgis.vue

@@ -25,7 +25,7 @@
     import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
     import "@arcgis/core/assets/esri/themes/light/main.css";
 
-    const mapUrl = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
+    const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/nxmap/MapServer"; // ArcMap地址
     // const mapUrl = "http://172.16.6.30:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
     let basemap = null;
     let map = null;
@@ -94,8 +94,8 @@
                         img: require("@assets/map/fan/red.png")
                     },
                     {
-                        name: "检查",
-                        code: "jc",
+                        name: "检修",
+                        code: "jx",
                         img: require("@assets/map/fan/orange.png")
                     },
                     {
@@ -244,29 +244,31 @@
                         let screenPoint = view.toScreen(graphics.geometry);
                         marker.x = screenPoint.x - marker.ox;
                         marker.y = screenPoint.y - marker.oy;
-                        marker.scale =  0.0272 / evt.height;
-                        // console.log(evt.height)
-                        if (evt.height < 0.295) { 
-                            if (!marker.show) {
-                                marker.show = true;
-                                graphics.symbol = new SimpleMarkerSymbol({
-                                    color: "transparent",
-                                    outline: {
-                                        color: [255, 255, 255],
-                                        width: 0
-                                    }
-                                });
-                            }
-                        } else {
-                            if (marker.show) {
-                                marker.show = false;
-                                graphics.symbol = new SimpleMarkerSymbol({
-                                    color: [5,187,76,0.75],
-                                    outline: {
-                                        color: [5,187,76],
-                                        width: 2
-                                    }
-                                });
+                        if (marker.canScale) {
+                            marker.scale =  0.0272 / evt.height;
+                            // console.log(evt.height)
+                            if (evt.height < 0.295) { 
+                                if (!marker.show) {
+                                    marker.show = true;
+                                    graphics.symbol = new SimpleMarkerSymbol({
+                                        color: "transparent",
+                                        outline: {
+                                            color: [255, 255, 255],
+                                            width: 0
+                                        }
+                                    });
+                                }
+                            } else {
+                                if (marker.show) {
+                                    marker.show = false;
+                                    graphics.symbol = new SimpleMarkerSymbol({
+                                        color: [5,187,76,0.75],
+                                        outline: {
+                                            color: [5,187,76],
+                                            width: 2
+                                        }
+                                    });
+                                }
                             }
                         }
                     });
@@ -284,7 +286,9 @@
                 }
             },
             // 添加html
-            addHtmlPoint: function (point, slot, ox=0, oy=0) {
+            addHtmlPoint: function (point, slot, ox=0, oy=0, scale=true) {
+                point[0] += this.oToLL(this.data.ox, this.data.oy).x;
+                point[1] += this.oToLL(this.data.ox, this.data.oy).y;
                 let item = {
                     geometry: {
                         type: "point",
@@ -315,6 +319,7 @@
                     x: screenPoint.x - ox,
                     y: screenPoint.y - oy,
                     scale: 1,
+                    canScale: scale,
                     show: true,
                 };
                 this.markers.push(marker);
@@ -422,9 +427,9 @@
                 line_graphicsLayer.add(graphic);
             },
             addFanByJson: function(jsonObj, lineJsonObj) {
-                jsonObj.forEach(item => {
-                    this.addImgPoint(item);
-                });
+                // jsonObj.forEach(item => {
+                //     this.addImgPoint(item);
+                // });
                 lineJsonObj.forEach(item => {
                     this.addLine(item);
                 });

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

@@ -98,8 +98,9 @@ export default {
         grid: {
           left: 16,
           top: 16, // 设置条形图的边s距
-          right: 80,
+          right: 110,
           bottom: 0,
+          containLabel: true,
         },
         yAxis: [
           {

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

@@ -277,10 +277,12 @@ export default {
           {
             type: "category",
             data: this.xdata,
+            nameLocation: "center",
             axisPointer: {
               type: "shadow",
             },
             axisLabel: {
+              interval: 0,
               fontSize: 12,
             },
           },

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

@@ -0,0 +1,199 @@
+<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",
+    },
+    // 传入数据
+    value: {
+      type: Number,
+      default: 25,
+    },
+    // 颜色 green yellow (partten中支持的颜色)
+    color: {
+      type: String,
+      default: "green",
+    },
+    fontsize: {
+      type: Number,
+      default: 12,
+    },
+  },
+  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,
+            x: "43%",
+            y: "32%",
+            textAlign: "center",
+            textStyle: {
+              fontSize: this.fontsize,
+              fontFamily: "Bicubik",
+              fontWeight: "400",
+              color: partten.getColor(this.colors),
+              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: partten.getColor(this.colors) + "30",
+            },
+            data: [this.value],
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: partten.getColor(this.colors),
+                //    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: partten.getColor(this.colors),
+                },
+                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/combination/area-line-chart.vue

@@ -435,11 +435,7 @@ export default {
 
       chart.setOption(option);
 
-      chart.on("click", function (e, p) {
-        if (e.seriesType == "custom") {
-          that.$emit("areaClick", { data: e.data.exData });
-        }
-      });
+      return chart;
     },
   },
   emits: {
@@ -452,7 +448,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.initChart();
+      let that = this;
+      let chart = this.initChart();
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
     });
   },
   updated () {

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

@@ -0,0 +1,787 @@
+<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],
+          ],
+        },
+      ],
+    },
+    xTitle: {
+      type: String,
+      default: "x轴标题",
+    },
+    yTitle: {
+      type: String,
+      default: "Y轴标题",
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          xTitle: "折线X",
+          yTitle: "折线y",
+          legends: ["1", "2", "3"],
+          data: [[1, 2, 3, 4]],
+        };
+      },
+    },
+  },
+  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,
+          markLine: {
+            data: [
+              {
+                type: "max",
+                name: "最大值",
+                label: {
+                  color: partten.getColor("gray"),
+                },
+              },
+              {
+                type: "min",
+                name: "最小值",
+                label: {
+                  color: partten.getColor("gray"),
+                },
+              },
+            ],
+          },
+        });
+      });
+      return result;
+    },
+    legend() {
+      let result = [];
+      if (this.data && this.data.length > 0)
+        result.push(
+          this.data.map((t) => {
+            return t.title;
+          })
+        );
+
+      if (this.lineData && this.lineData.legends && this.lineData.legends.legends > 0) result.push(this.lineData.legends);
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      let that = this;
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          top: 40,
+          left: 40,
+          right: 64,
+          bottom: 24,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+          showDelay: 0,
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: util.vh(16),
+            color: "#fff",
+          },
+          formatter: function(params) {
+            debugger;
+            if (params.componentType == "markLine") {
+              return params.name + "<br />" + params.value;
+            }
+            var msg = params.seriesName + "<br />";
+            msg += params.marker + that.xTitle + "：" + params.value[0] + "<br />";
+            msg += params.marker + that.yTitle + "：" + params.value[1] + "<br />";
+            return msg;
+          },
+          axisPointer: {
+            show: true,
+            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: [
+          {
+            name: this.xTitle,
+            type: "value",
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.yTitle,
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: this.series,
+      };
+
+      if (this.lineData && this.lineData.data) {
+        option.xAxis.push({
+          type: "category",
+          // name: this.lineData.xTitle,
+          boundaryGap: false,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          data: this.lineData.legends,
+        });
+
+        option.yAxis.push({
+          type: "value",
+          // name: this.lineData.yTitle,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          //分格线
+          splitLine: {
+            show: false,
+          },
+        });
+
+        this.lineData.data.forEach((value, index) => {
+          option.series.push({
+            name: this.lineData.legends[index],
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            zlevel: index,
+            lineStyle: {
+              show: false,
+            },
+            yAxisIndex: 1,
+            xAxisIndex: 1,
+            data: value,
+          });
+        });
+      }
+
+      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

@@ -123,7 +123,7 @@ export default {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7","#DD5044"],
       newlist: null,
     };
   },

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

@@ -3,8 +3,6 @@
 </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";
@@ -32,66 +30,98 @@ export default {
             {
               text: "1",
               value: 1,
+              weather: 'sun',
+              direction: "n",
             },
             {
               text: "2",
               value: 2,
+              weather: 'sun',
+              direction: "s",
             },
             {
               text: "3",
               value: 1,
+              weather: 'sun',
+              direction: "w",
             },
             {
               text: "4",
               value: 3,
+              weather: 'sun',
+              direction: "e",
             },
             {
               text: "5",
               value: 3,
+              weather: 'sun',
+              direction: "nw",
             },
             {
               text: "6",
               value: 3,
+              weather: 'sun',
+              direction: "ne",
             },
             {
               text: "7",
               value: 3,
+              weather: 'sun',
+              direction: "se",
             },
             {
               text: "8",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "9",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "10",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "11",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "12",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "13",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "14",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "15",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
             {
               text: "16",
               value: 3,
+              weather: 'sun',
+              direction: "sw",
             },
           ],
         },
@@ -134,6 +164,21 @@ export default {
       id: "",
       chart: null,
       color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+      imgs: {
+        sun: require("@assets/png/weather/sun.png"),
+        cloud: require("@assets/png/weather/cloud.png"),
+        rain: require("@assets/png/weather/rain.png"),
+      },
+      directions: {
+        n: require("@assets/png/direction/n.svg"),
+        s: require("@assets/png/direction/s.svg"),
+        w: require("@assets/png/direction/w.svg"),
+        e: require("@assets/png/direction/e.svg"),
+        nw: require("@assets/png/direction/nw.svg"),
+        ne: require("@assets/png/direction/ne.svg"),
+        sw: require("@assets/png/direction/sw.svg"),
+        se: require("@assets/png/direction/se.svg"),
+      },
     };
   },
   computed: {
@@ -148,7 +193,19 @@ export default {
       });
     },
     yAxis() {
-      let result = [];
+      let result = [{
+        type: "value",
+        name: "",
+        axisLabel: {
+          show: false,
+        },
+        //分格线
+        splitLine: {
+          show: false,
+        },
+        min: 0,
+        max: 10,
+      }];
       this.units.forEach((value, index) => {
         result.push({
           type: "value",
@@ -173,52 +230,89 @@ export default {
       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| }"];
+            lineStyle: {
+              normal: {
+                color: this.color[index],
+                width: 1,
               },
-              rich: {
-                weather: {
-                  height: 15,
-                  backgroundColor: {
-                    image: imgaa,
+            },
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return {
+                value: t.value,
+                label: {
+                  show: true,
+                  position: "top",
+                  formatter: function(e) {
+                    return ["  {weather| }"];
                   },
+                  rich: {
+                    weather: {
+                      height: 15,
+                      backgroundColor: {
+                        image: this.imgs[t.weather],
+                      },
+                    },
+                  },
+                  borderWidth: 1,
+                  borderRadius: 4,
+                  padding: [4, 10],
+                  lineHeight: 26,
+                  distance: 20,
                 },
-              },
-              // backgroundColor: {
-              //   image: imgaa,
-              // },
-              borderWidth: 1,
-              borderRadius: 4,
-              padding: [4, 10],
-              lineHeight: 26,
-              distance: 20,
-            },
+              };
+            }),
+          });
+          result.push({
+            name: "风向",
+            type: "bar",
+            smooth: true,
+            zlevel: 9999,
             lineStyle: {
               normal: {
                 color: this.color[index],
                 width: 1,
               },
             },
-            yAxisIndex: value.yAxisIndex,
+            yAxisIndex: 0,
+            barGap: '0%',
+            barCategoryGap: '0%',
+            clip: false,
             data: value.value.map((t) => {
-              return t.value;
+              return {
+                value: -2,
+                label: {
+                  show: true,
+                  position: "inside",
+                  formatter: function(e) {
+                    return ["  {direction| }"];
+                  },
+                  rich: {
+                    direction: {
+                      height: 20,
+                      backgroundColor: {
+                        image: this.directions[t.direction],
+                      },
+                    },
+                  },
+                  borderWidth: 1,
+                  borderRadius: 4,
+                  padding: [4, 10],
+                  lineHeight: 26,
+                  distance: 20,
+                },
+                itemStyle: {
+                  borderWidth: 1,
+                  borderColor: '#606769',
+                  color: 'transparent',
+                },
+              };
             }),
           });
         } else {
@@ -265,6 +359,21 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
+          formatter: function (params) {
+            console.log(params);
+            let str = ''
+            for (let i = 0; i < params.length; i++) {
+              if (params[i].seriesName == "风向") {
+                continue;
+              }
+              if (i == 0) {
+                str += `${params[i].name}<br/>${params[i].seriesName}: ${params[i].data.value ? params[i].data.value : params[i].data}<br/>`;
+                continue;
+              }
+              str += `${params[i].seriesName}: ${params[i].data.value ? params[i].data.value : params[i].data}<br/>`
+            }
+            return str
+          }
         },
         legend: {
           show: this.showLegend,
@@ -282,12 +391,12 @@ export default {
           top: util.vh(32),
           left: util.vh(40),
           right: util.vh(40),
-          bottom: util.vh(24),
+          bottom: util.vh(64),
         },
         xAxis: [
           {
             type: "category",
-            boundaryGap: false,
+            // boundaryGap: false,
             axisLabel: {
               formatter: "{value}",
               fontSize: util.vh(14),
@@ -296,6 +405,8 @@ export default {
               },
             },
             data: this.xdata,
+            offset: 40,
+            axisLine: {onZero: true},
           },
         ],
         yAxis: this.yAxis,

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

@@ -44,6 +44,30 @@ export default {
                             text: "-0.003",
                             value: -0.006,
                         },
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
                     ],
                 },
                 {
@@ -67,6 +91,30 @@ export default {
                             text: "-0.008",
                             value: -0.008,
                         },
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
                     ],
                 },
                 {
@@ -90,6 +138,30 @@ export default {
                             text: "0.5",
                             value: 0.5,
                         },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
                     ],
                 },
                 {
@@ -113,6 +185,30 @@ export default {
                             text: "3",
                             value: 1,
                         },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
                     ],
                 },
                 {
@@ -136,6 +232,30 @@ export default {
                             text: "3",
                             value: 1,
                         },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
                     ],
                 },
             ],
@@ -249,11 +369,36 @@ export default {
                         fontSize: 12,
                     },
                 },
+                dataZoom: [{
+                    show: true,
+                    height: 30,
+                    xAxisIndex: [0],
+                    bottom: 30,
+                    "start": 0,
+                    "end": 10,
+                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+                    handleSize: '110%',
+                    handleStyle: {
+                        color: "#05bb4c",
+                    },
+                    textStyle:{
+                        color:"rgba(204,187,225,0.5)",
+                    },
+                    fillerColor:"rgba(5,187,76,0.4)",
+                    borderColor: "rgba(5,187,76,0.5)",
+
+                }, {
+                    type: "inside",
+                    show: true,
+                    height: 15,
+                    start: 1,
+                    end: 35
+                }],
                 grid: {
                     top: util.vh(80),
                     left: util.vh(80),
                     right: util.vh(80),
-                    bottom: util.vh(24),
+                    bottom: util.vh(64),
                     containLabel: true,
                 },
                 xAxis: [
@@ -283,17 +428,23 @@ export default {
 
             window.addEventListener("resize", this.resize);
         },
+        datazoom: function (start, end) {
+            const chart = echarts.getInstanceByDom(this.$el);
+            chart.dispatchAction({
+                type: 'dataZoom',
+                start: start,
+                end: end,
+            });
+        },
     },
     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);
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.initChart();
         });
     },
     updated() {

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

@@ -31,10 +31,27 @@ export default {
       type: Object,
       default: () => {
         return {
-          indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+          indicator: [
+            "北(0.0/0.0)",
+            "北北西(0.0/0.0)",
+            "北西(0.0/0.0)",
+            "西北西(0.0/0.0)",
+            "西(0.0/0.0)",
+            "西南西(0.0/0.0)",
+            "南西(0.0/0.0)",
+            "南南西(0.0/0.0)",
+            "南(0.0/0.0)",
+            "南南东(0.0/0.0)",
+            "东南(0.0/0.0)",
+            "东南东(0.0/0.0)",
+            "东(0.0/0.0)",
+            "东北东(0.0/0.0)",
+            "北东(0.0/0.0)",
+            "北北东(0.0/0.0)",
+          ],
           data: [
             {
-              value: [44200, 14200, 20000, 35000, 50000, 38000],
+              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000, 20000, 35000, 50000, 38000],
               name: "NAME",
             },
           ],
@@ -88,6 +105,8 @@ export default {
           indicator.push({ name: item, max: maxValue });
         });
 
+      let baseSize = 65;
+
       let option = {
         grid: {
           left: 0,
@@ -107,14 +126,15 @@ export default {
         radar: [
           // 最低层 90
           {
-            radius: "90%",
+            radius: baseSize + "%",
             center: ["50%", "50%"],
             splitNumber: 1,
-            nameGap: "10",
+            nameGap: "4",
             name: {
               textStyle: {
-                color: partten.getColor("gray") + 99,
+                color: partten.getColor("gray"),
                 fontSize: 12,
+                padding: [0, 16],
               },
             },
             axisLine: {
@@ -137,7 +157,7 @@ export default {
           },
           // 次外层 80 - 90
           {
-            radius: ["80%", "90%"],
+            radius: ["55%", "65%"],
             center: ["50%", "50%"],
             startAngle: 90,
             splitNumber: 2,
@@ -172,7 +192,7 @@ export default {
           },
           // 渐变层 40 - 80
           {
-            radius: ["40%", "80%"],
+            radius: ["30%", "55%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -215,7 +235,7 @@ export default {
           },
           // 渐变层 0 - 40
           {
-            radius: ["0%", "40%"],
+            radius: ["0%", "30%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -285,7 +305,7 @@ export default {
           },
           // 内层 0 - 45
           {
-            radius: "45%",
+            radius: "35%",
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {

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

@@ -21,271 +21,7 @@ export default {
     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: [

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="percent-card">
+    <div class="card-chart">
+      <div class="card-title gray">{{ title }}</div>
+      <percent-bar width="64px" height="64px" :value="percent" :color="color" />
+    </div>
+    <div class="card-info">
+      <div class="card-value">
+        <span class="value-text gray">{{ TotalText }}</span>
+        <span class="white font-num">{{ TotalValue }}</span>
+      </div>
+      <div class="card-value">
+        <span class="value-text gray">{{ ActualText }}</span>
+        <span class="white font-num">{{ ActualValue }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 百分比card2
+// 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
+import PercentBar from "../../chart/bar/percent-bar-3.vue";
+export default {
+  components: {
+    PercentBar,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "月计划完成率",
+    },
+    TotalText: {
+      type: String,
+      default: "实际",
+    },
+    TotalValue: {
+      type: Number,
+      default: 100,
+    },
+    ActualText: {
+      type: String,
+      default: "计划",
+    },
+    ActualValue: {
+      type: Number,
+      default: 25,
+    },
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  computed: {
+    percent() {
+      return (this.ActualValue / this.TotalValue) * 100;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.percent-card {
+  display: flex;
+
+  .card-chart {
+    display: flex;
+    align-items: center;
+  }
+
+  .card-title {
+    text-align: center;
+    width: 100%;
+    font-size: 12px;
+    color: #ffffff;
+  }
+
+  .card-info {
+    margin: 0 0.741vh;
+
+    .card-value {
+      font-size: @fontsize-s;
+      font-weight: 400;
+      margin-top: 1.1111vh;
+
+      .value-text {
+        margin-right: 0.741vh;
+        font-family: @font-family-num;
+      }
+    }
+
+    .card-text {
+      font-size: @fontsize;
+    }
+  }
+}
+</style>

src/components/coms/panel/panel.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="panel-tools">{{ subTitle }}</div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body" :class="{ blur: bgBlur }">
       <slot></slot>
     </div>
   </div>
@@ -28,6 +28,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    bgBlur: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     // 是否存在标题

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

@@ -29,7 +29,7 @@
         </tr>
       </tbody>
     </el-scrollbar>
-    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
   </table>
 </template>
 
@@ -90,6 +90,15 @@ export default {
       type: Boolean,
       default: true,
     },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
   },
   // 自定义事件
   emits: {

src/components/coms/table/table.vue

@@ -13,17 +13,17 @@
           <td
             v-for="(col, i) of data.column"
             :key="i"
-            :style="{ width: col.width, color: row.color }"
+            :style="{ width: col.width }"
             :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
             @mouseenter="hover(row, col)"
             @mouseleave="leave()"
           >
-            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+            <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
           </td>
         </tr>
       </tbody>
     </el-scrollbar>
-    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
   </table>
 </template>
 
@@ -87,6 +87,16 @@ export default {
       type: String,
       default: "",
     },
+    // 新增 支持 pagging 组件
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
   },
   // 自定义事件
   emits: {
@@ -141,14 +151,14 @@ export default {
   },
   // 函数
   methods: {
-    clearCheckBox(time) {
-      this.$nextTick(() => {
-        setTimeout(() => {
+    clearCheckBox(time){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
           const domArray = document.querySelectorAll(".curCheckBox");
-          for (let i = 0; i < domArray.length; i++) {
-            domArray[i].checked = false;
+          for(let i=0;i<domArray.length;i++){
+            domArray[i].checked=false;
           }
-        }, time || 300);
+        },(time || 300));
       });
     },
     onClick(col, data) {

src/components/coms/table/table2.vue

@@ -18,7 +18,7 @@
       </template>
     </el-table-column>
   </el-table>
-  <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+  <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
 </template>
 
 <script>
@@ -54,6 +54,15 @@ export default {
       type: Number,
       default: 0,
     },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
   },
   // 自定义事件
   emits: {

src/components/other/healthReport/index.vue

@@ -401,6 +401,7 @@ export default {
       let that = this;
       let reqData = this.params;
       that.API.requestData({
+        timeout:30000,
         method: "POST",
         subUrl: "reportnew/healthReport",
         data: reqData,

src/components/three/wave.vue

@@ -56,7 +56,7 @@
                 const material = new THREE.ShaderMaterial({
                     uniforms: {
                         color: {
-                            value: new THREE.Color(0x05bb4c)
+                            value: new THREE.Color(0x05bb4c),
                         },
                     },
                     vertexShader: `attribute float scale;
@@ -68,8 +68,9 @@
                     fragmentShader: `uniform vec3 color;
                         void main() {
                             if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
-                            gl_FragColor = vec4( color, 1.0 );
-                        }`
+                            gl_FragColor = vec4( color, 0.7 );
+                        }`,
+                    transparent: true,
                 });
                 particles = new THREE.Points(geometry, material);
                 scene.add(particles);

src/store/index.js

@@ -6,7 +6,7 @@ const debug = process.env.NODE_ENV !== 'production';
 
 // 默认状态
 const state = {
-  websocketTimeSec: 5000,
+  websocketTimeSec: 1000,
   loading: false, //全局 - 加载中....
   themeName: "light", // 主题
   windturbineMap: {},

src/views/Agc/Agc.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="agc">
-    <div class="btn-group-tabs">
-      <!-- <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2> -->
-    </div>
-    <div class="panel-groups">
-      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data" chartType="multiple" :chartData="data.tb"></AgcPanel>
-    </div>
+    <el-scrollbar>
+      <div class="panel-groups">
+        <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></AgcPanel>
+      </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -96,6 +95,7 @@ export default {
         showLoading,
         method: "POST",
         subUrl: "genreset/getAgcValues",
+        // timeout: 600000,
         success(res) {
           let datas = [];
           if (res.data) {
@@ -130,7 +130,8 @@ export default {
 
               keys.forEach((key, keyIndex) => {
                 pEle.tb.forEach((cEle, cIndex) => {
-                  tb[keyIndex].value.push({ text: String(cIndex + 1), value: cEle[keys[keyIndex]] || 0 });
+                 // debugger;
+                  tb[keyIndex].value.push({ text: new Date(cEle.time).formatDate("hh:mm"), value: cEle[keys[keyIndex]] || 0 });
                 });
               });
 
@@ -152,7 +153,7 @@ export default {
       that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
-      }, that.$store.state.websocketTimeSec);
+      }, 10000);
     });
   },
 
@@ -176,7 +177,7 @@ export default {
 <style lang="less" scoped>
 .agc {
   height: calc(100vh - 7.222vh);
-  overflow: auto;
+  overflow: hidden;
   .btn-group-tabs {
     display: flex;
     flex-direction: row;
@@ -193,10 +194,10 @@ export default {
     flex-wrap: wrap;
 
     .panel-item {
-      width: calc(25% - 1.204vh);
+      width: calc(25% - 12px);
       height: 29vh;
-      margin-left: 1.481vh;
-      margin-bottom: 1.481vh;
+      margin-left: 16px;
+      margin-bottom: 16px;
 
       &:nth-child(4n + 1) {
         margin-left: 0;

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

@@ -12,8 +12,8 @@
           </td>
           <td colspan="2">
             <div class="data-item">
-              <span class="data-item-name">实发有功</span>
-              <span class="data-item-count">{{ data.jcxx.SSZGL }}</span>
+              <span class="data-item-name">出线功率</span>
+              <span class="data-item-count">{{ data.jcxx.AGC001 }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -54,25 +54,25 @@
           <td>
             <div class="data-item">
               <span class="data-item-name">AGC投入</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC004 === 1 ? 'green' : 'red')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC006 === 1 ? 'red' : 'green')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">AGC远方</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'green' : 'red')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'red' : 'green')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">有功增闭锁</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'green' : 'red')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'red' : 'green')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">有功减闭锁</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'green' : 'red')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'red' : 'green')"></i>
             </div>
           </td>
         </tr>

src/views/Decision/Decision1.vue

@@ -67,16 +67,56 @@
 		<el-row :type="'flex'" class="content">
 			<el-col :span="12" class="pd-r-8">
 				<toolbar-panel title="风机绩效榜" :showLine="false">
-					<bar-line-chart :height="'calc(100vh - 200px)'" :bardata="bardata" :lineData="lineData" :color="barColor" lineName="理论发电量"/>
+					<bar-line-chart :height="'calc(100vh - 200px)'" :bardata="bardata" :lineData="lineData"
+						:color="barColor" lineName="理论发电量" />
 				</toolbar-panel>
 			</el-col>
 			<el-col :span="12" class="pd-l-8">
 				<panel :title="'项目列表'" :showLine="false">
-                    <div class="project-table">
+					<div class="project-table">
 						<!-- 分页Table -->
-                        <Table :data="tableData" :pageSize="20" @onPagging="onChangePage" :height="'calc(100vh - 32vh)'"></Table>
-                        <!-- <Table :data="tableData"></Table> -->
-                    </div>
+						<Table :data="tableData"
+							:height="'calc(100vh - 32vh)'">
+							<template v-slot:tr v-if="tableData.data.length > 0">
+								<tr>
+									<td style="width: 50px;">
+										{{tableDataEnd.index}}
+									</td>
+									<td>
+										{{tableDataEnd.name}}
+									</td>
+									<td>
+										{{tableDataEnd.llfdl}}
+									</td>
+									<td>
+										{{tableDataEnd.sjfdl}}
+									</td>
+									<td>
+										{{tableDataEnd.speed}}
+									</td>
+									<td>
+										{{tableDataEnd.fjhjx}}
+									</td>
+									<td>
+										{{tableDataEnd.jhjx}}
+									</td>
+									<td>
+										{{tableDataEnd.sl}}
+									</td>
+									<td>
+										{{tableDataEnd.xd}}
+									</td>
+									<td>
+										{{tableDataEnd.xn}}
+									</td>
+									<td>
+										{{tableDataEnd.fnlly}}
+									</td>
+								</tr>
+							</template>
+						</Table>
+						<!-- <Table :data="tableData"></Table> -->
+					</div>
 				</panel>
 			</el-col>
 		</el-row>
@@ -88,7 +128,7 @@
 	import Panel from "../../components/coms/panel/panel.vue";
 	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
-	import Table from "../../components/coms/table/table.vue";
+	import Table from "./table.vue";
 	import partten from "@/helper/partten.js";
 	export default {
 		components: {
@@ -107,7 +147,7 @@
 							field: "index",
 							is_num: false,
 							is_light: false,
-                            width: "50px",
+							width: "50px",
 						},
 						{
 							name: "名称",
@@ -120,67 +160,68 @@
 							field: "llfdl",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "SCADA发电量",
 							field: "sjfdl",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "风速",
 							field: "speed",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "非计划检修",
 							field: "fjhjx",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "计划检修",
 							field: "jhjx",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "受累",
 							field: "sl",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "限电",
 							field: "xd",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "性能",
 							field: "xn",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "风能利用率%",
 							field: "fnlly",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						}
 					],
 					data: [],
 				},
+				tableDataEnd: [], //合计
 				ChangZhan: [], //场站
 				XiangMu: [], //项目
 				XianLu: [], //线路
@@ -189,7 +230,9 @@
 				value3: [],
 				value4: "",
 				value5: "",
-				barColor: [partten.getColor("purple"), partten.getColor("green"), partten.getColor("pink"), partten.getColor("red"), partten.getColor("orange"), partten.getColor("grayl")],
+				barColor: [partten.getColor("purple"), partten.getColor("green"), partten.getColor("pink"), partten
+					.getColor("red"), partten.getColor("orange"), partten.getColor("grayl")
+				],
 				TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
 				bardata: [],
 				lineData: [],
@@ -206,7 +249,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/wplist",
 					success(res) {
 						that.ChangZhan = res.data;
@@ -225,7 +268,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/projectList",
 					data: {
 						wpids: val
@@ -246,7 +289,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/lineList",
 					data: {
 						projects: val
@@ -299,7 +342,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/fjjxb",
 					data: {
 						wpids: that.value1,
@@ -358,6 +401,8 @@
 							};
 
 						}
+						that.tableDataEnd = data2[data2.length - 1];
+						data2.pop();
 						that.tableData.data = data2;
 					}
 				});
@@ -365,9 +410,9 @@
 			mxClick() {
 				this.$router.push("/decision/decision1Mx")
 			},
-     onChangePage(params) {
-      console.log(params);
-    },
+			onChangePage(params) {
+				console.log(params);
+			},
 		}
 	};
 </script>

src/views/Decision/Decision1Mx.vue

@@ -69,13 +69,73 @@
 				<el-row :type="'flex'" class="content">
 					<el-col :span="10" class="pd-r-8">
 						<toolbar-panel title="风机绩效榜明细" :showLine="false">
-							<bar-line-chart :height="'calc(100vh - 200px)'" :bardata="bardata" :lineData="lineData" :color="barColor" lineName="理论发电量"/>
+							<bar-line-chart :height="'calc(100vh - 200px)'" :bardata="bardata" :lineData="lineData"
+								:color="barColor" lineName="理论发电量" />
 						</toolbar-panel>
 					</el-col>
 					<el-col :span="14" class="pd-l-8">
 						<panel :title="'项目列表'" :showLine="false">
 							<div class="project-table">
-								<Table :data="tableData"></Table>
+								<Table :data="tableData">
+									<template v-slot:tr v-if="tableData.data.length > 0">
+										<tr>
+											<td>
+												{{tableDataEnd.index}}
+											</td>
+											<td>
+												{{tableDataEnd.name}}
+											</td>
+											<td>
+												{{tableDataEnd.llfdl}}
+											</td>
+											<td>
+												{{tableDataEnd.sjfdl}}
+											</td>
+											<td>
+												{{tableDataEnd.speed}}
+											</td>
+											<td>
+												{{tableDataEnd.fjhjx1}}
+											</td>
+											<td>
+												{{tableDataEnd.fjhjx2}}
+											</td>
+											<td>
+												{{tableDataEnd.jhjx1}}
+											</td>
+											<td>
+												{{tableDataEnd.jhjx2}}
+											</td>
+											<td>
+												{{tableDataEnd.sl1}}
+											</td>
+											<td>
+												{{tableDataEnd.sl2}}
+											</td>
+											<td>
+												{{tableDataEnd.xd1}}
+											</td>
+											<td>
+												{{tableDataEnd.xd2}}
+											</td>
+											<td>
+												{{tableDataEnd.xn1}}
+											</td>
+											<td>
+												{{tableDataEnd.xn2}}
+											</td>
+											<td>
+												{{tableDataEnd.xn3}}
+											</td>
+											<td>
+												{{tableDataEnd.xn4}}
+											</td>
+											<td>
+												{{tableDataEnd.fnlly}}
+											</td>
+										</tr>
+									</template>
+								</Table>
 							</div>
 						</panel>
 					</el-col>
@@ -90,7 +150,7 @@
 	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 	import Panel from "../../components/coms/panel/panel.vue";
 	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
-	import Table from "../../components/coms/table/table.vue";
+	import Table from "./table.vue";
 	import partten from "@/helper/partten.js";
 	export default {
 		components: {
@@ -121,116 +181,117 @@
 							field: "llfdl",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "SCADA发电量",
 							field: "sjfdl",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "风速",
 							field: "speed",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "故障损失",
 							field: "fjhjx1",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "故障受累",
 							field: "fjhjx2",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "检修损失",
 							field: "jhjx1",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "检修受累",
 							field: "jhjx2",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "电网受累",
 							field: "sl1",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "天气受累",
 							field: "sl2",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "限电降出",
 							field: "xd1",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "限电停机",
 							field: "xd2",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "待风损失",
 							field: "xn1",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "手动停机",
 							field: "xn2",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "正常发电",
 							field: "xn3",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "缺陷降出",
 							field: "xn4",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						},
 						{
 							name: "风能利用率%",
 							field: "fnlly",
 							is_num: false,
 							is_light: false,
-							sortable:true
+							sortable: true
 						}
 					],
 					data: [],
 				},
+				tableDataEnd: [], //合计
 				ChangZhan: [], //场站
 				XiangMu: [], //项目
 				XianLu: [], //线路
@@ -239,7 +300,11 @@
 				value3: [],
 				value4: "",
 				value5: "",
-				barColor: [partten.getColor("purple"), partten.getColor("green"), partten.getColor("pink"), partten.getColor("red"), partten.getColor("orange"), partten.getColor("grayl"),partten.getColor("yellow"),partten.getColor("gray"),partten.getColor("blue"),partten.getColor("cyan"),partten.getColor("brown"),partten.getColor("mauve")],
+				barColor: [partten.getColor("purple"), partten.getColor("green"), partten.getColor("pink"), partten
+					.getColor("red"), partten.getColor("orange"), partten.getColor("grayl"), partten.getColor(
+					"yellow"), partten.getColor("gray"), partten.getColor("blue"), partten.getColor("cyan"), partten
+					.getColor("brown"), partten.getColor("mauve")
+				],
 				TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
 				bardata: [],
 				lineData: [],
@@ -256,7 +321,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/wplist",
 					success(res) {
 						that.ChangZhan = res.data;
@@ -275,7 +340,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/projectList",
 					data: {
 						wpids: val
@@ -296,7 +361,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/lineList",
 					data: {
 						projects: val
@@ -349,7 +414,7 @@
 				var that = this;
 				that.API.requestData({
 					method: "GET",
-					baseURL : "http://10.155.32.4:9001/",
+					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/fjjxbmx",
 					data: {
 						wpids: that.value1,
@@ -420,6 +485,8 @@
 							};
 
 						}
+						that.tableDataEnd = data2[data2.length - 1];
+						data2.pop();
 						that.tableData.data = data2;
 					}
 				});

src/views/Decision/Decision2.vue

@@ -64,7 +64,7 @@
 			<toolbar-panel title="风机绩效榜" :showLine="false"></toolbar-panel>
 			<div class="mg-b-16">
 				<div class="project-table">
-					<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
+					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
 				</div>
 			</div>
 			<el-row class="mg-b-16">
@@ -95,7 +95,7 @@
 			<el-col :span="24" class="pd-l-8">
 				<panel :title="'风机对标列表明细'" :showLine="false">
 					<div class="project-table">
-						<Table :data="tableDataDetail" ref="curRef"></Table>
+						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
 					</div>
 				</panel>
 			</el-col>
@@ -963,6 +963,9 @@
 			back(){
 				this.detailShow = 1;
 				this.clearDb();
+			},
+			onSort(){
+				this.clearDb();
 			}
 		}
 	};

src/views/Decision/Decision2Cjdb.vue

@@ -43,7 +43,7 @@
 			<toolbar-panel title="场际对标" :showLine="false"></toolbar-panel>
 			<div class="mg-b-16">
 				<div class="project-table">
-					<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
+					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
 				</div>
 			</div>
 			<el-row class="mg-b-16">
@@ -69,7 +69,7 @@
 			<el-col :span="24" class="pd-l-8">
 				<panel :title="'风机对标列表明细'" :showLine="false">
 					<div class="project-table">
-						<Table :data="tableDataDetail" ref="curRef"></Table>
+						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
 					</div>
 				</panel>
 			</el-col>
@@ -886,6 +886,9 @@
 			back() {
 				this.detailShow = 1;
 				this.clearDb();
+			},
+			onSort(){
+				this.clearDb();
 			}
 		}
 	};

src/views/Decision/Decision2Cndb.vue

@@ -43,7 +43,7 @@
 			<toolbar-panel title="场内对标" :showLine="false"></toolbar-panel>
 			<div class="mg-b-16">
 				<div class="project-table">
-					<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
+					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
 				</div>
 			</div>
 			<el-row :type="'flex'" class="content">
@@ -59,7 +59,7 @@
 			<el-col :span="24" class="pd-l-8">
 				<panel :title="'风机对标列表明细'" :showLine="false">
 					<div class="project-table">
-						<Table :data="tableDataDetail" ref="curRef"></Table>
+						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
 					</div>
 				</panel>
 			</el-col>
@@ -853,6 +853,9 @@
 			back() {
 				this.detailShow = 1;
 				this.clearDb();
+			},
+			onSort(){
+				this.clearDb();
 			}
 		}
 	};

src/views/Decision/Decision2Xldb.vue

@@ -134,12 +134,14 @@
 							field: "index",
 							is_num: false,
 							is_light: false,
+							width: "50px",
 						},
 						{
 							name: "",
 							field: "check",
 							is_num: false,
 							is_light: false,
+							width: "50px",
 							template: function() {
 								return "<input class='check curCheckBox' type='CheckBox'/>";
 							},

src/views/Decision/Decision2Xmdb.vue

@@ -53,7 +53,7 @@
 			<toolbar-panel title="项目对标" :showLine="false"></toolbar-panel>
 			<div class="mg-b-16">
 				<div class="project-table">
-					<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
+					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
 				</div>
 			</div>
 			<el-row class="mg-b-16">
@@ -79,7 +79,7 @@
 			<el-col :span="24" class="pd-l-8">
 				<panel :title="'风机对标列表明细'" :showLine="false">
 					<div class="project-table">
-						<Table :data="tableDataDetail" ref="curRef"></Table>
+						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
 					</div>
 				</panel>
 			</el-col>
@@ -930,6 +930,9 @@
 			back() {
 				this.detailShow = 1;
 				this.clearDb();
+			},
+			onSort(){
+				this.clearDb();
 			}
 		}
 	};

src/views/Decision/Decision3Db.vue

@@ -0,0 +1,513 @@
+<template>
+	<div class="decision-page-3">
+		<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" @change="ChangZhanChange(value1)" clearable placeholder="请选择"
+							popper-class="select">
+							<el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">风机：</div>
+					<div class="search-input">
+						<el-select v-model="value2" @change="XiangMuChange(value2)" multiple multiple-limit="5"
+							placeholder="请选择" popper-class="select">
+							<el-option v-for="item in XiangMu" :key="item.id" :value="item.id" :label="item.name">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">开始日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
+							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+						</el-date-picker>
+					</div>
+				</div>
+				<div class="query-actions">
+					<button class="btn" @click="reset">重置</button>
+				</div>
+			</div>
+			<div class="actions mg-b-8">
+				<button class="btn" :class="TypeClass==0?'green':''" @click="TypeClick(0)">日风电机对比</button>
+				<button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">月风电机对比</button>
+				<button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">年风电机对比</button>
+			</div>
+		</div>
+		<!-- 列表 -->
+		<toolbar-panel title="单机横向对比" :showLine="false"></toolbar-panel>
+		<div class="info">
+			<div class="mg-b-16">
+				<div class="project-table">
+					<Table :data="tableData"></Table>
+				</div>
+			</div>
+			<!-- 风资源列表 -->
+			<div class="direction-info mg-b-16">
+				<table class="com-table">
+					<tbody>
+						<tr>
+							<td v-for="(col, i) of tableData.column" :key="i">
+								<div v-if="i == 0">22</div>
+								<div v-if="i == 1">风资源</div>
+								<div v-if="i != 0 && i != 1">
+									<div class="direction-title">{{listName[i - 2]}}</div>
+									<div class="direction-chart" :class="(i-2) < fzyData.length?'':'hide'">
+										<normal-radar-chart :width="'70%'" :height="'232px'" :value="fzyData[i-2]" />
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<!-- 日功率曲线 -->
+			<div>
+				<toolbar-panel :title="'日功率曲线'">
+					<template v-slot:tools>
+						<div class="tools">
+							<div class="tool-block" v-for="(item , index) in listName">
+								<div class="legend" :class="'bg-'+(index + 1)"></div>
+								<div class="legend-text">{{item}}</div>
+							</div>
+						</div>
+					</template>
+					<double-line-chart :height="'200px'" :list="list" />
+				</toolbar-panel>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+	import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
+	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
+	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
+	import Table from "../../components/coms/table/table.vue";
+	export default {
+		components: {
+			Table,
+			SvgIcon,
+			ToolbarPanel,
+			DoubleLineChart,
+			NormalRadarChart
+		},
+		data() {
+			return {
+				tableData: {
+					column: [{
+							name: "",
+							field: "index",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "项目",
+							field: "name",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "",
+							field: "data1",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "",
+							field: "data2",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "",
+							field: "data3",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "",
+							field: "data4",
+							is_num: false,
+							is_light: false,
+						}, {
+							name: "",
+							field: "data5",
+							is_num: false,
+							is_light: false,
+						}
+					],
+					data: [],
+				},
+				ChangZhan: [], //场站
+				XiangMu: [], //项目
+				value1: [],
+				value2: [],
+				value4: "",
+				fzyData: [],
+				list: [],
+				listName: [],
+				TypeClass:0,
+				ajaxArr:['daydjhxdbtop','monthdjhxdbtop','yeardjhxdbtop'],
+				ajaxName:'daydjhxdbtop'
+			};
+		},
+		created() {
+			this.ChangZhanVal();
+			this.value4 = this.getTime(1);
+			this.AjaxCommon();
+		},
+		methods: {
+			ChangZhanVal() {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/",
+					subUrl: "benchmarking/wplist",
+					success(res) {
+						that.ChangZhan = res.data;
+					}
+				});
+			},
+			ChangZhanChange(val) {
+				this.value1 = val;
+				this.value2 = [];
+				this.AjaxCommon();
+				this.XiangMuVal(val);
+			},
+			XiangMuVal(val) {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/",
+					subUrl: "benchmarking/wtList",
+					data: {
+						wpid: val
+					},
+					success(res) {
+						that.XiangMu = res.data;
+					}
+				});
+			},
+			XiangMuChange(val) {
+				var that = this;
+				that.value2 = val;
+				that.AjaxCommon();
+			},
+			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate();
+				month >= 1 && month <= 9 ? (month = '0' + month) : '';
+				day >= 0 && day <= 9 ? (day = '0' + day) : '';
+				var begin = year + '-' + month + '-01';
+				var end = year + '-' + month + '-' + day;
+				if (val == 1) {
+					return begin;
+				} else if (val == 2) {
+					return end;
+				}
+			},
+			AjaxCommon() {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/",
+					subUrl: "benchmarking/"+that.ajaxName,
+					data: {
+						wpid: that.value1,
+						wtids: that.value2,
+						date: that.value4,
+						target: '',
+						sort: ''
+					},
+					success(res) {
+						var data = res.data,
+							data2 = [],
+							chart = [],
+							fzy = [],
+							fzyArr = [],
+							jfpl = [],
+							jfplArr = [];
+						let thisItem = [];
+						jfpl = data.pop(); //静风频率
+						fzy = data.pop(); //风资源
+						data.forEach((ele, index) => {
+							for (let key in ele) {
+								if (key !== "name") {
+									thisItem.push(ele[key])
+								}
+							}
+						})
+
+						var count = thisItem.length / data.length;
+
+						data.forEach((item, index) => {
+							data2.push({
+								index: index + 1,
+								name: item.name,
+								data1: thisItem[index * count],
+								data2: count >= 2 ? thisItem[index * count + 1] : [],
+								data3: count >= 3 ? thisItem[index * count + 2] : [],
+								data4: count >= 4 ? thisItem[index * count + 3] : [],
+								data5: count >= 5 ? thisItem[index * count + 4] : [],
+								is_light: false
+							})
+						})
+
+						Object.keys(fzy).map((key) => {
+							fzyArr.push(fzy[key])
+						})
+						Object.keys(jfpl).map((key) => {
+							jfplArr.push(jfpl[key])
+						})
+						fzyArr.pop();
+						var jfplName = jfplArr.pop();
+						var indicator = ["北", "北北西", "北西", "西北西", "西", "西南西", "南西", "南南西", "南", "南南东", "东南", "东南东",
+							"东", "东北东", "北东", "北北东"
+						];
+
+						var fzyDataArr = [];
+						fzyArr.forEach((item, index) => {
+							var arr = [];
+							item.forEach((e, i) => {
+								arr.push(e.value)
+							});
+							fzyDataArr.push([{
+								indicator: indicator,
+								data: [{
+									value: arr
+								}],
+								name: jfplArr[index]
+							}])
+						});
+						that.fzyData = fzyDataArr;
+						that.tableData.data = data2;
+					}
+				});
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/",
+					subUrl: "benchmarking/djhxdbbottom",
+					data: {
+						wpid: that.value1,
+						wtids: that.value2,
+						date: that.value4
+					},
+					success(res) {
+						var data = res.data;
+
+						var arrName = [],
+							arrKey = [],
+							arrData = [],
+							tempArray = [];
+						data.forEach(ele => {
+							for (let key in ele) {
+								if (key !== "name") {
+									arrKey.push(key)
+									arrData.push(ele[key])
+								} else {
+									arrName.push(ele[key])
+								}
+							}
+						});
+						that.listName = arrName;
+						for (var i = 0; i < arrKey.length - 1; i++) { //冒泡排序
+							for (var j = 0; j < arrKey.length - 1 - i; j++) {
+								if (parseInt(arrKey[j]) > parseInt(arrKey[j + 1])) {
+									var temp = arrKey[j];
+									arrKey[j] = arrKey[j + 1];
+									arrKey[j + 1] = temp;
+									var temp2 = arrData[j];
+									arrData[j] = arrData[j + 1];
+									arrData[j + 1] = temp2;
+								}
+							}
+						}
+						for (var i = 0; i < data.length; i++) {
+							var arr = [];
+							arrData.forEach((e, index) => {
+								if ((index * data.length + i) < arrData.length) {
+									arr.push({
+										text: arrKey[index * data.length + i],
+										value: arrData[index * data.length + i],
+									})
+								}
+							})
+							tempArray.push({
+								title: arrName[i],
+								value: arr
+							})
+						}
+						that.list = tempArray
+					}
+
+				});
+			},
+			reset() { //重置
+				this.value1 = [];
+				this.value2 = [];
+				this.value4 = this.getTime(1);
+				this.AjaxCommon();
+			},
+			TypeClick(val) {
+				this.TypeClass = val;
+				// 重置状态start
+				this.value1 = [];
+				this.value2 = [];
+				this.value4 = this.getTime(1);
+				this.ajaxName=this.ajaxArr[val];
+				this.AjaxCommon();
+				// 重置状态end
+			},
+		}
+	};
+</script>
+
+<style lang="less">
+	.decision-page-3 {
+		.com-panel {
+			.panel-title {
+				color: @gray-l;
+			}
+
+			.tools {
+				display: flex;
+
+				.tool-block {
+					display: flex;
+					align-items: center;
+					margin-left: 0.741vh;
+
+					.legend {
+						flex: auto;
+						width: 0.741vh;
+						height: 0.741vh;
+						margin-right: 0.741vh;
+
+						&.long {
+							width: 2.963vh;
+							height: 0.37vh;
+						}
+					}
+
+					.legend-text {
+						color: @gray-l;
+						font-size: @fontsize-s;
+					}
+				}
+			}
+		}
+
+		.info {
+			overflow: auto;
+			height: calc(100vh - 150px);
+		}
+
+		.project-table {
+			overflow: auto;
+
+			.com-table {
+				tbody {
+					padding-right: 0px;
+				}
+
+				th,
+				td {
+					color: #b2bdc0;
+
+					&:nth-child(1) {
+						width: 32px;
+					}
+
+					&:nth-child(2) {
+						width: 183px;
+					}
+				}
+			}
+		}
+
+		.direction-info {
+			.com-table {
+				tbody {
+					padding-right: 0px;
+				}
+
+				th,
+				td {
+					color: #b2bdc0;
+					padding: 0;
+
+					&:nth-child(1) {
+						width: 32px;
+						background-color: fade(#536268, 20);
+					}
+
+					&:nth-child(2) {
+						width: 183px;
+						background-color: fade(#536268, 40);
+					}
+
+					.direction-title {
+						background-color: fade(#536268, 20);
+						font-size: @fontsize-s;
+						line-height: 2.963vh;
+					}
+
+					.direction-chart {
+						padding-top: 48px;
+
+						.legend {
+							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;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.hide {
+		opacity: 0;
+	}
+
+	.bg-1 {
+		background: #05bb4c
+	}
+
+	.bg-2 {
+		background: #f8de5b
+	}
+
+	.bg-3 {
+		background: #4b55ae
+	}
+
+	.bg-4 {
+		background: #fa8c16
+	}
+
+	.bg-5 {
+		background: #1DA0D7
+	}
+</style>

src/views/Decision/Decision4.vue

@@ -25,7 +25,7 @@
 				
 			</div>
 		</div>
-		
+		<toolbar-panel title="值际对标" :showLine="false"></toolbar-panel>
 		<div class="mg-b-16">
 			<div class="project-table">
 				<Table :data="tableData"></Table>

src/views/Decision/Decision4Czzl.vue

@@ -24,7 +24,7 @@
 
 			</div>
 		</div>
-
+		<toolbar-panel title="操作指令统计" :showLine="false"></toolbar-panel>
 		<div class="mg-b-16">
 			<div class="project-table">
 				<Table :data="tableData"></Table>
@@ -58,11 +58,13 @@
 	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 	import Panel from "../../components/coms/panel/panel.vue";
 	import Table from "../../components/coms/table/table.vue";
+	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
 	export default {
 		components: {
 			Panel,
 			Table,
-			SvgIcon
+			SvgIcon,
+			ToolbarPanel
 		},
 		data() {
 			let that = this;
@@ -79,6 +81,7 @@
 							field: "nameOfDuty",
 							is_num: false,
 							is_light: false,
+							width: "250px",
 						},
 						{
 							name: "启动",
@@ -134,7 +137,7 @@
 							name: "挂牌检修",
 							field: "gpmaintainCount",
 							is_num: false,
-							is_light: true,
+							is_light: false,
 							param: 6,
 							click: function(event, data) {
 								that.ajaxClick(data.nameOfDuty, this.param)

src/views/Decision/table.vue

@@ -0,0 +1,312 @@
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+          </td>
+        </tr>
+		<slot name="tr"></slot>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        width:'', // 宽度
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for(let i=0;i<domArray.length;i++){
+            domArray[i].checked=false;
+          }
+        },(time || 300));
+      });
+    },
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+        overflow: hidden; //隐藏文字
+        text-overflow: ellipsis; //显示 ...
+        white-space: nowrap; //不换行
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}
+</style>

src/views/Demo.vue

@@ -4,8 +4,8 @@
   <!-- 图表 -->
   <el-scrollbar v-if="currTab == 1" style="height:85%;">
     <h2>图表</h2>
-    <h2>07-14新增</h2>
-
+    <h2>07-16新增</h2>
+    <scatter-line-chart :height="'250px'" />
 
     <h2>07-12新增</h2>
     <h3>折现: zoom-line-chart</h3>
@@ -321,6 +321,7 @@ import Tab from "../components/coms/tabs/tab.vue";
 import multiArrowLineChart from "../components/chart/line/multi-arrow-line-chart.vue";
 import ZoomLineChart from "../components/chart/line/zoom-line-chart.vue";
 import AreaLineChart from "../components/chart/combination/area-line-chart.vue";
+import ScatterLineChart from "../components/chart/combination/scatter-line-chart.vue";
 
 export default {
   components: {
@@ -368,6 +369,7 @@ export default {
     multiArrowLineChart,
     ZoomLineChart,
     AreaLineChart,
+    ScatterLineChart,
   },
   methods: {
     select(data) {

src/views/HealthControl/Health0.vue

@@ -14,6 +14,7 @@
                       clearable
                       placeholder="请选择风场"
                       popper-class="select"
+                      @change="wpselect"
                     >
                       <el-option
                         v-for="item in options"
@@ -33,6 +34,7 @@
                       clearable
                       placeholder="请选择风机"
                       popper-class="select"
+                      @change="wtselect"
                     >
                       <el-option
                         v-for="item in options1"
@@ -45,11 +47,11 @@
                   </div>
                 </div>
               </div>
-              <div class="query-actions">
+              <!-- <div class="query-actions">
                 <button class="btn" type="button">
                   <i class="el-icon-back mg-r-8"></i><span>返回</span>
                 </button>
-              </div>
+              </div> -->
             </div>
           </el-col>
         </el-row>
@@ -59,7 +61,7 @@
               <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-text font-md green">{{value2}}</div>
               <div class="fan-code-label font-md gray-l">高频：</div>
               <div class="fan-code-value font-md green">{{stoptypemap && stoptypemap.top1type}}</div>
               <div class="fan-code-label font-md gray-l">中频：</div>
@@ -71,12 +73,12 @@
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
             </span>
             <div class="fan-code bg">
-              <div class="fan-code-label font-md gray-l">高频：</div>
+              <div class="fan-code-label font-md gray-l">风机评分：</div>
             </div>
             <div class="fan-code">
               <div class="fan-code-value nm font-md green">{{stoptypemap && stoptypemap.wtscore}}</div>
             </div>
-            <button class="btn mg-l-16" type="button">
+            <button class="btn mg-l-16" type="button"  @click="onClickReport()">
               <i class="el-icon-s-order mg-r-8"></i><span>健康报告</span>
             </button>
           </el-col>
@@ -97,9 +99,9 @@
           </el-col>
           <el-col :span="6"></el-col>
           <el-col :span="6"></el-col>
-          <el-col :span="6">
+          <!-- <el-col :span="6">
             <progress-bar title="风机" name="风机健康度" :progress='partmap && partmap.fj.smsyl' :color="partmap &&color(partmap.fj.jkzt)"></progress-bar>
-          </el-col>
+          </el-col> -->
         </el-row>
         <el-row>
           <el-col :span="6" class="mg-t-16">
@@ -197,6 +199,7 @@
         </el-row>
       </el-col>
     </el-row>
+    <health-report :show="reportshow" :params="reportparams" @closed="closed"/>
   </div>
 </template>
 
@@ -205,6 +208,7 @@ 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";
+import HealthReport from "../../components/other/healthReport/index.vue"
 export default {
   setup() {},
   components: {
@@ -212,9 +216,12 @@ export default {
     StandAloneImg,
     ProgressBar,
     Table,
+    HealthReport
   },
   data() {
     return {
+      reportshow: false, //是否显示健康报告
+      reportparams: undefined,
       bsxImg: require("@assets/png/bsx.png"),
       options: [
         {
@@ -707,13 +714,31 @@ export default {
   },
   created() {
       this.search()
-      this.wtid = this.$route.params.wtId;
-      this.wpid = this.$route.params.wpId;
+        this.wtid = this.$route.params.wtId;
+        this.wpid = this.$route.params.wpId;
   },
   methods: {
+    // 查看健康报告
+    onClickReport(){
+      console.warn('查看健康报告');
+      this.reportshow = true
+      this.reportparams = {wtId: this.value2, recorddate: new Date(new Date()).formatDate("yyyy-MM-dd")}
+    },
+    // 关闭健康报告
+    closed(){
+      this.reportshow = false
+    },
       color(val){
      return this.colorval[val]
     },
+    wpselect(){
+      console.warn('wpselect');
+      this.searchWindturbine('select')
+    },
+    wtselect(){
+      console.warn('wtselect');
+      this.searchWtHealthInfo()
+    },
     async search() {
       const { data } = await this.API.requestData({
         subUrl: "powercompare/windfarmAjax",
@@ -722,7 +747,7 @@ export default {
       this.value1 = this.wpid;
       this.searchWindturbine()
     },
-    async searchWindturbine() {
+    async searchWindturbine(statu) {
       const { data } = await this.API.requestData({
         subUrl: "/powercompare/windturbineAjax",
         data:{
@@ -730,13 +755,14 @@ export default {
         }
       });
       this.options1 = data.data;
-      this.value2 = this.wtid;
+      this.value2 = statu =='select' ?data.data[0].id : this.wtid;
       console.warn(data);
      this.searchWtHealthInfo()
     },
     async searchWtHealthInfo() {
       const { data } = await this.API.requestData({
         subUrl: "/healthsub//findWtHealthInfo",
+        showLoading: true,
         method:'POST',
         timeout: 30000, // 请求超时时间，默认 3s ，可缺省
         data:{
@@ -786,17 +812,25 @@ export default {
         }
       }
 
-      .fan-code-text {
-        padding-right: 20px;
-        border-right: 1px solid #536268;
-      }
+            .fan-code-text {
+                padding-right: 20px;
+                border-right: 1px solid #536268;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+            }
 
-      .fan-code-label {
-        margin-left: 20px;
-      }
+            .fan-code-label {
+                margin-left: 20px;
+                min-width: 50px;
+            }
 
-      .fan-code-value {
-        margin-left: 20px;
+            .fan-code-value {
+                margin-left: 20px;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+                max-width: 112px;
 
         &.nm {
           margin-left: 0;

src/views/HealthControl/Health1.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="info-chart">
           <panel class="info-chart-panel" :title="'损失电量分析'">
-            <vertival-bar-line-chart :height="'310px'" />
+            <vertival-bar-line-chart :height="'250px'" />
           </panel>
         </div>
       </div>
@@ -322,7 +322,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -444,7 +444,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
-      height: calc(100vh - 592px);
+      height: calc(100vh - 500px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);

src/views/HealthControl/Health10.vue

@@ -285,57 +285,79 @@ export default {
         value: [
           {
             title: "应发功率",
-            yAxisIndex: 0,
+            yAxisIndex: 1,
             value: [
               {
                 text: "05-02 00:00",
                 value: 11,
+                weather: 'sun',
+                direction: "n",
               },
               {
                 text: "05-04 00:00",
                 value: 11,
+                weather: 'rain',
+                direction: "s",
               },
               {
                 text: "05-06 00:00",
                 value: 13,
+                weather: 'sun',
+                direction: "w",
               },
               {
                 text: "05-08 00:00",
                 value: 12,
+                weather: 'cloud',
+                direction: "e",
               },
               {
                 text: "05-10 00:00",
                 value: 13,
+                weather: 'sun',
+                direction: "nw",
               },
               {
                 text: "05-12 00:00",
                 value: 12,
+                weather: 'sun',
+                direction: "ne",
               },
               {
                 text: "05-14 00:00",
                 value: 11,
+                weather: 'cloud',
+                direction: "sw",
               },
               {
                 text: "05-16 00:00",
                 value: 11,
+                weather: 'sun',
+                direction: "se",
               },
               {
                 text: "05-18 00:00",
                 value: 13,
+                weather: 'rain',
+                direction: "n",
               },
               {
                 text: "05-20 00:00",
                 value: 11,
+                weather: 'cloud',
+                direction: "n",
               },
               {
                 text: "05-22 00:00",
                 value: 12,
+                weather: 'sun',
+                direction: "n",
               },
             ],
           },
           {
             title: "实际功率",
-            yAxisIndex: 0,
+            yAxisIndex: 1,
             value: [
               {
                 text: "05-02 00:00",

src/views/HealthControl/Health2.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
+          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>
     </div>
@@ -238,7 +238,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -524,7 +524,7 @@ export default {
       padding: 4px 0;
     }
     tbody {
-      height: calc(100vh - 880px);
+      height: calc(100vh - 820px);
     }
     th,
     td {

src/views/HealthControl/Health3.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
+          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>
     </div>
@@ -272,7 +272,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -494,12 +494,8 @@ export default {
       }
 
       .table {
-        .com-table thead tr th {
-          padding: 0.3704vh 0;
-        }
-
         tbody {
-          height: 33vh;
+          height: calc(100vh - 640px);
         }
       }
     }

src/views/HealthControl/Health7.vue

@@ -27,13 +27,13 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :height="'310px'" />
+          <vertival-bar-line-chart :height="'250px'" />
         </panel>
       </div>
     </div>
     <div class="fc-info mg-b-16">
       <panel :title="'健康走势图'" :showLine="false">
-        <normal-line-chart :height="'150px'" />
+        <normal-line-chart :height="'250px'" />
       </panel>
     </div>
     <div class="data-list">
@@ -183,7 +183,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 350px;
+      height: 287px;
       margin-right: 1.4815vh;
 
       .tab {

src/views/HealthControl/Health8.vue

@@ -58,47 +58,50 @@
         <div style="height: calc(100vh - 174px)">
           <table style="width: 100%" border="0" cellspacing="0">
             <tbody>
-              <tr v-for="(item,index) in tableData" :key="index">
-                <td style="width: 50px">{{item.id}}</td>
-                <td style="width: 105px">{{item.wtname}}</td>
-                <td style="width: 105px">{{item.model}}</td>
+              <tr v-for="(item, index) in tableData" :key="index">
+                <td style="width: 50px">{{ item.id }}</td>
+                <td style="width: 105px">{{ item.wtname }}</td>
+                <td style="width: 105px">{{ item.model }}</td>
                 <td style="width: 350px">
                   <div class="percent-item">
-                    {{item.zxd}}%
+                    {{ item.zxd }}%
                     <div class="percent-bar" style="">
-                      <div class="percent-value" :style="{'width':`${item.zxd}%`}"></div>
+                      <div
+                        class="percent-value"
+                        :style="{ width: `${item.zxd}%` }"
+                      ></div>
                     </div>
                   </div>
                 </td>
                 <td class="score" style="width: 100px">
-                  <div>{{item.score}}</div>
+                  <div>{{ item.score }}</div>
                 </td>
                 <td>
-                  <table-line-chart :list='item.futureHealth'/>
+                  <table-line-chart :list="item.futureHealth" />
                 </td>
                 <td class="item">
-                  <div :class="[color(item.clx)]">{{item.clx}}</div>
+                  <div :class="[color(item.clx)]">{{ item.clx }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.fdj)]">{{item.fdj}}</div>
+                  <div :class="[color(item.fdj)]">{{ item.fdj }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.zz)]">{{item.zz}}</div>
+                  <div :class="[color(item.zz)]">{{ item.zz }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.bj)]">{{item.bj}}</div>
+                  <div :class="[color(item.bj)]">{{ item.bj }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.ph)]">{{item.ph}}</div>
+                  <div :class="[color(item.ph)]">{{ item.ph }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.jc)]">{{item.jc}}</div>
+                  <div :class="[color(item.jc)]">{{ item.jc }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.bpq)]">{{item.bpq}}</div>
+                  <div :class="[color(item.bpq)]">{{ item.bpq }}</div>
                 </td>
                 <td class="item">
-                  <div :class="[color(item.zk)]">{{item.zk}}</div>
+                  <div :class="[color(item.zk)]">{{ item.zk }}</div>
                 </td>
               </tr>
             </tbody>
@@ -139,39 +142,53 @@ export default {
         },
       ],
       value1: "",
-      tableData:'',
-      colorval:{
-        '优':'purple',
-        '良':'orange',
-        '差':'red',
-      }
+      tableData: "",
+      colorval: {
+        优: "purple",
+        良: "orange",
+        差: "red",
+      },
     };
+    futureHealth: null;
   },
   created() {
     this.search();
   },
   methods: {
-    color(val){
-     return this.colorval[val]
+    color(val) {
+      return this.colorval[val];
     },
     async search() {
-      const {data} = await this.API.requestData({
+      const { data } = await this.API.requestData({
         subUrl: "powercompare/windfarmAjax",
       });
-      this.options = data.data
-      this.value1 = data.data[0].id
-      this.searchWindTurbineHealthList()
+      this.options = data.data;
+      this.value1 = data.data[0].id;
+      this.searchWindTurbineHealthList();
     },
-    async searchWindTurbineHealthList(){
-      const {data} = await this.API.requestData({
+    async searchWindTurbineHealthList() {
+      const { data } = await this.API.requestData({
         subUrl: "wtHealthList/windTurbineHealthList",
-        method: "POST", 
-        data:{
-          wpId : this.value1
-        }
+        method: "POST",
+        data: {
+          wpId: this.value1,
+        },
       });
-        this.tableData = data.data
-    }
+      this.tableData = data.data;
+      console.warn(data.data);
+      data.data.forEach((k) => {
+        let arr =[]
+        k.futureHealth.forEach((e, index) => {
+          let obj = {
+            text: index,
+            value: e,
+          };
+          arr.push(obj)
+        });
+        k.futureHealth = arr
+      });
+      console.warn(this.tableData);
+    },
   },
 };
 </script>

src/views/HealthControl/fault-diagnosis.vue

@@ -32,24 +32,33 @@
         </div>
         <div class="white font-md mg-t-16">测点选择</div>
         <el-checkbox-group v-model="checkList" text-color="#05bb4c" fill="#05bb4c">
-            <el-checkbox class="cb-item" label="C01">转子位置，值为：223.42</el-checkbox>
-            <el-checkbox class="cb-item" label="C02">机舱震动×方向 ，值为： 0.00</el-checkbox>
-            <el-checkbox class="cb-item" label="C03">机舱震动×方向 ，值为： 0.00</el-checkbox>
-            <el-checkbox class="cb-item" label="C04">机舱震动×方向 ，值为： 0.00</el-checkbox>
+            <el-checkbox class="cb-item" label="C01">转子位置，值为：{{checkValue.C01}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C02">机舱震动×方向 ，值为：{{checkValue.C02}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C03">机舱震动×方向 ，值为：{{checkValue.C03}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C04">机舱震动×方向 ，值为：{{checkValue.C04}}</el-checkbox>
             <br>
-            <el-checkbox class="cb-item" label="C05">风向1，值为：203.08</el-checkbox>
-            <el-checkbox class="cb-item" label="C06">风向1，值为：203.08</el-checkbox>
-            <el-checkbox class="cb-item" label="C07">风向1，值为：203.08</el-checkbox>
-            <el-checkbox class="cb-item" label="C08">风向1，值为：203.08</el-checkbox>
+            <el-checkbox class="cb-item" label="C05">风向1，值为：{{checkValue.C05}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C06">风向1，值为：{{checkValue.C06}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C07">风向1，值为：{{checkValue.C07}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C08">风向1，值为：{{checkValue.C08}}</el-checkbox>
             <br>
-            <el-checkbox class="cb-item" label="C09">转子位置，值为：223.42</el-checkbox>
-            <el-checkbox class="cb-item" label="C10">转子位置，值为：223.42</el-checkbox>
-            <el-checkbox class="cb-item" label="C11">转子位置，值为：223.42</el-checkbox>
-            <el-checkbox class="cb-item" label="C12">转子位置，值为：223.42</el-checkbox>
+            <el-checkbox class="cb-item" label="C09">转子位置，值为：{{checkValue.C09}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C10">转子位置，值为：{{checkValue.C10}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C11">转子位置，值为：{{checkValue.C11}}</el-checkbox>
+            <el-checkbox class="cb-item" label="C12">转子位置，值为：{{checkValue.C12}}</el-checkbox>
         </el-checkbox-group>
+        <div class="time-axis-box">
+            <div class="time-axis-icon mg-r-16" @click="startAnimate">
+                <i :class="timeAxisIcon" class="green"></i>
+            </div>
+            <div class="time-axis-progress-box">
+                <div class="time-axis-progress" :style="'width: '+timeAxisProgress+'%;'"></div>
+                <div class="time-axis-progress-scale" v-for="index of 20" :key="index"></div>
+            </div>
+        </div>
         <div class="white font-md mg-t-16">风机故障回溯</div>
         <div class="fdp-sub-title font-sm">国电电力宁夏新能源集控系统</div>
-        <multiple-y-line-chart class="fdp-chart" height="32.407vh" :showLegend="true" />
+        <multiple-y-line-chart ref="chart" class="fdp-chart" height="32.407vh" :showLegend="true" />
     </div>
 </template>
 
@@ -85,17 +94,124 @@ export default {
             value2: [],
             value3: [],
             checkList: ["C01", "C02", "C03", "C04"],
+            checkValue: {
+                C01: 223.42,
+                C02: 0.00,
+                C03: 0.00,
+                C04: 0.00,
+                C05: 203.08,
+                C06: 203.08,
+                C07: 203.08,
+                C08: 203.08,
+                C09: 223.42,
+                C10: 223.42,
+                C11: 223.42,
+                C12: 223.42,
+            },
+            timeAxisIcon: "el-icon-video-play", // el-icon-video-play el-icon-video-pause
+            timeAxisProgress: 0,
+            timeAxisAnimate: false,
+            animationFrameId: null,
+            start: 0,
+            end: 10,
         };
     },
     // 函数
-    methods: {},
+    methods: {
+        startAnimate: function () {
+            if (this.timeAxisAnimate) {
+                this.timeAxisIcon = "el-icon-video-play";
+                if (this.animationFrameId) {
+                    window.cancelAnimationFrame(this.animationFrameId);
+                }
+            } else {
+                this.timeAxisIcon = "el-icon-video-pause";
+                this.animationFrameId = window.requestAnimationFrame(this.timeAxisAnimation);
+            }
+            this.timeAxisAnimate = !this.timeAxisAnimate;
+        },
+        endAnimate: function () {
+            this.timeAxisProgress = 0;
+            this.timeAxisIcon = "el-icon-video-play";
+            this.timeAxisAnimate = false;
+            this.start = 0;
+            this.end = 10;
+            this.$refs.chart.datazoom(this.start, this.end);
+            if (this.animationFrameId) {
+                window.cancelAnimationFrame(this.animationFrameId);
+            }
+            this.animationFrameId = null;
+        },
+        timeAxisAnimation: function () {
+            this.timeAxisProgress += 0.2;
+            if (Math.abs(this.timeAxisProgress - parseInt(this.timeAxisProgress)) <= 0.1) {
+                this.checkValue.C01 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C02 = (Math.random() * 100).toFixed(2);
+                this.checkValue.C03 = (Math.random() * 100).toFixed(2);
+                this.checkValue.C04 = (Math.random() * 100).toFixed(2);
+                this.checkValue.C05 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C06 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C07 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C08 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C09 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C10 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C11 = (Math.random() * 250 + 200).toFixed(2);
+                this.checkValue.C12 = (Math.random() * 250 + 200).toFixed(2);
+            }
+            this.start += 0.2;
+            this.end += 0.2;
+            this.$refs.chart.datazoom(this.start, this.end);
+            if (this.timeAxisProgress < 100) {
+                this.animationFrameId = window.requestAnimationFrame(this.timeAxisAnimation);
+            } else {
+                this.endAnimate();
+            }
+        },
+    },
 };
 </script>
 
 <style lang="less">
 .fault-diagnosis-pop-up-window {
     width: 100%;
-    height: 60.185vh;
+
+    .time-axis-box {
+        margin: 16px auto;
+        display: flex;
+        width: 256px;
+
+        .time-axis-icon {
+            font-size: 30px;
+            line-height: 1;
+            cursor: pointer;
+        }
+
+        .time-axis-progress-box {
+            width: 200px;
+            height: 30px;
+            display: flex;
+            position: relative;
+
+            .time-axis-progress {
+                position: absolute;
+                height: 100%;
+                left: 0;
+                top: 0;
+                background: fade(@green, 60);
+                transition: all .1s;
+            }
+
+            .time-axis-progress-scale {
+                width: 10px;
+                height: 100%;
+                border: 1px solid @green;
+
+                +.time-axis-progress-scale {
+                    border-left: none;
+                }
+            }
+        }
+    }
 
     .fdp-sub-title {
         color: #a8b2b5;

src/views/Home/Home.vue

@@ -627,7 +627,7 @@ export default {
             subUrl: "genreset/findGLDetail",
             targetName: "ssfs",
             dialogType: "powerLineChart",
-            max: res.data.jczbmap.zjts
+            max: 30
           }, {
             title: "保证功率",
             value: res.data.jczbmap.bzgl,

src/views/LightMatrix/LightMatrix.vue

@@ -391,10 +391,10 @@ export default {
 
 <style lang="less" scoped>
 @panelHeight: 60px;
-@titleHeight: 3.704vh;
+@titleHeight: 26px;
 
 .light-matrix {
-  width: calc(100% - 1.111vh);
+  // width: calc(100% - 1.111vh);
   height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;
@@ -666,16 +666,16 @@ export default {
 
     .panel-title {
       width: 100%;
-      height: @titleHeight;
       line-height: @titleHeight;
       background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: @fontsize-s;
+        font-size: 12px;
         color: @green;
         display: flex;
         align-items: center;
-        padding: 0 16px;
+        padding-left: 16px;
+        flex-wrap: wrap;
 
         i {
           margin-right: 0.7407vh;
@@ -683,7 +683,7 @@ export default {
 
         .sub-title-item {
           display: flex;
-          flex: 1;
+          flex: 0 0 110px;
 
           .sub-title {
             flex: 0 0 auto;
@@ -743,13 +743,13 @@ export default {
 
       .blank {
         margin-right: 4px;
-        flex: 1 0 105px;
+        flex: 1 0 112px;
       }
 
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 105px;
+        flex: 1 0 112px;
       }
 
       .card {

src/views/LightMatrix1/LightMatrix1.vue

@@ -353,7 +353,7 @@ export default {
 @titleHeight: 2.7778vh;
 
 .light-matrix {
-  width: calc(100% - 1.111vh);
+  // width: calc(100% - 1.111vh);
   height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;

src/views/LightMatrix2/LightMatrix2.vue

@@ -364,10 +364,10 @@ export default {
 
 <style lang="less" scoped>
 @panelHeight: 6.481vh;
-@titleHeight: 3.704vh;
+@titleHeight: 26px;
 
 .light-matrix {
-  width: calc(100% - 1.111vh);
+  // width: calc(100% - 1.111vh);
   height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;
@@ -515,16 +515,16 @@ export default {
 
     .panel-title {
       width: 100%;
-      height: @titleHeight;
       line-height: @titleHeight;
       background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: @fontsize-s;
+        font-size: 12px;
         color: @green;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        padding: 0 16px;
+        padding-left: 16px;
 
         i {
           margin-right: 0.7407vh;
@@ -532,7 +532,7 @@ export default {
 
         .sub-title-item {
           display: flex;
-          flex: 1;
+          flex: 0 0 110px;
 
           .sub-title {
             flex: 0 0 auto;

src/views/LightMatrix3/LightMatrix3.vue

@@ -79,6 +79,12 @@
                   </div>
                 </div>
                 <div class="card-right">
+                   <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-P"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fs }}</span>
+                  </div>
                   <div class="num">
                     <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                       <SvgIcon svgid="svg-W"></SvgIcon>
@@ -91,12 +97,7 @@
                     </i>
                     <span>{{ cItem.fdjzs.toFixed(2) }}</span>
                   </div>
-                  <div class="num">
-                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                      <SvgIcon svgid="svg-P"></SvgIcon>
-                    </i>
-                    <span>{{ cItem.fs }}</span>
-                  </div>
+          
                 </div>
               </div>
             </div>
@@ -407,10 +408,10 @@ export default {
 
 <style lang="less" scoped>
 @panelHeight: 60px;
-@titleHeight: 3.704vh;
+@titleHeight: 26px;
 
 .light-matrix {
-  width: calc(100% - 1.111vh);
+  // width: calc(100% - 1.111vh);
   height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;
@@ -694,16 +695,16 @@ export default {
 
     .panel-title {
       width: 100%;
-      height: @titleHeight;
       line-height: @titleHeight;
       background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: @fontsize-s;
+        font-size: 12px;
         color: @green;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        padding: 0 16px;
+        padding-left: 16px;
 
         i {
           margin-right: 0.7407vh;
@@ -711,7 +712,7 @@ export default {
 
         .sub-title-item {
           display: flex;
-          flex: 1;
+          flex: 0 0 110px;
 
           .sub-title {
             flex: 0 0 auto;
@@ -772,13 +773,13 @@ export default {
 
       .blank {
         margin-right: 4px;
-        flex: 1 0 105px;
+        flex: 1 0 120px;
       }
 
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 105px;
+        flex: 1 0 120px;
       }
 
       .card {

src/views/NewPages/Matrix-Detail.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="matrix-detail">
+    <Row class="panel-2" type="">
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
+            <div>{{ data.test }}</div>
+            <div>{{ data.num }}</div>
+          </div>
+        </div>
+      </Col>
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon :svgid="'svg-photovoltaic'" style="margin: 3px 0px -3px 1px;"></SvgIcon>
+            </span>
+          </div>
+          <div class="item" :class="data.color" v-for="(data, index) of panel2Data.datas" :key="index">
+            <div>{{ data.test }}</div>
+            <div>{{ data.num }}</div>
+          </div>
+        </div>
+      </Col>
+    </Row>
+    <div class="panel-box">
+      <div v-for="(table, k) of newTables" :key="k">
+        <div class="panel-title">
+          <div class="panel-title-name">
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </i>
+            <span>某某某风电场</span>
+            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
+              <span class="sub-title">{{ data.text }}</span>
+              <span class="sub-count" :class="data.color">{{ data.num }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-body">
+          <div class="card" v-for="j of table.count" :key="j" :class="'green'">
+            {{ "A" + j }}
+          </div>
+          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+          <i class="blank" v-for="i in table.count" :key="i"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Row from "@/components/coms/grid/row.vue";
+import Col from "@/components/coms/grid/col.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import util from "@/helper/util.js";
+export default {
+  // 名称
+  name: "LightMatrix1",
+  // 使用组件
+  components: {
+    Row,
+    Col,
+    SvgIcon,
+  },
+  // 数据
+  data() {
+    return {
+      panel1Data: {
+        first: {
+          icon: "svg-wind-site",
+        },
+        datas: [
+          {
+            color: "write",
+            test: "接入风机",
+            num: 256,
+          },
+          {
+            color: "blue",
+            test: "· 运行",
+            num: 256,
+          },
+          {
+            color: "green",
+            test: "· 待机",
+            num: 256,
+          },
+          {
+            color: "pink",
+            test: "· 限电",
+            num: 256,
+          },
+          {
+            color: "red",
+            test: "· 故障",
+            num: 256,
+          },
+          {
+            color: "orange",
+            test: "· 检修",
+            num: 256,
+          },
+          {
+            color: "write",
+            test: "· 受累",
+            num: 256,
+          },
+          {
+            color: "gray",
+            test: "· 离线",
+            num: 256,
+          },
+        ],
+      },
+      panel2Data: {
+        first: {
+          icon: "svg-photovoltaic",
+        },
+        datas: [
+          {
+            color: "write",
+            test: "接入风机",
+            num: 256,
+          },
+          {
+            color: "blue",
+            test: "· 运行",
+            num: 256,
+          },
+          {
+            color: "green",
+            test: "· 待机",
+            num: 256,
+          },
+          {
+            color: "pink",
+            test: "· 限电",
+            num: 256,
+          },
+          {
+            color: "red",
+            test: "· 故障",
+            num: 256,
+          },
+          {
+            color: "orange",
+            test: "· 检修",
+            num: 256,
+          },
+          {
+            color: "write",
+            test: "· 受累",
+            num: 256,
+          },
+          {
+            color: "gray",
+            test: "· 离线",
+            num: 256,
+          },
+        ],
+      },
+      tables: [
+        {
+          col: 42,
+          subTitleDatas: [
+            {
+              text: "接入台数",
+              num: 256,
+              color: "write",
+            },
+            {
+              text: "待机台数",
+              num: 256,
+              color: "green",
+            },
+            {
+              text: "并网台数",
+              num: 256,
+              color: "blue",
+            },
+            {
+              text: "限电台数",
+              num: 256,
+              color: "pink",
+            },
+            {
+              text: "故障台数",
+              num: 256,
+              color: "red",
+            },
+            {
+              text: "检修台数",
+              num: 256,
+              color: "orange",
+            },
+            {
+              text: "受累台数",
+              num: 256,
+              color: "write",
+            },
+            {
+              text: "离线台数",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "风速",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "预测功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "保证功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "应发功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "实际功率",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "AGC指令",
+              num: 256,
+              color: "gray",
+            },
+            {
+              text: "出线功率",
+              num: 256,
+              color: "gray",
+            },
+          ],
+          datas: [
+            {
+              tag: "A01",
+              color: "blue",
+            },
+          ],
+        },
+      ],
+      newTables: [
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43 * 2,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 3,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43,
+        },
+        {
+          count: 43 * 6,
+        },
+      ],
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    let tempData = [];
+    for (let i = 0; i < 200; i++) {
+      tempData.push(util.copy(this.tables[0].datas[0]));
+      if (i % 13 == 0) {
+        tempData[i].color = "green";
+      }
+      if (i % 17 == 0) {
+        tempData[i].color = "pink";
+      }
+      if (i % 23 == 0) {
+        tempData[i].color = "orange";
+      }
+      if (i % 29 == 0) {
+        tempData[i].color = "red";
+      }
+      if (i % 31 == 0) {
+        tempData[i].color = "write";
+      }
+      if (i % 37 == 0) {
+        tempData[i].color = "gray";
+      }
+    }
+    this.tables[0].datas = util.copy(tempData);
+    for (let i = 0; i < 5; i++) {
+      this.tables.push(util.copy(this.tables[0]));
+    }
+
+    this.newTables.forEach((value) => {
+      value.subTitleDatas = util.copy(this.tables[0].subTitleDatas);
+    });
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@panelHeight: 6.481vh;
+@titleHeight: 25px;
+
+.matrix-detail {
+  .panel-2 {
+    .left-50-16 {
+      width: calc(50% - 8px);
+    }
+  }
+
+  .panel {
+    width: 100%;
+    border: 1px solid @darkgray;
+    position: relative;
+    padding: 8px 16px;
+    background-color: fade(@darkgray, 20%);
+    display: flex;
+
+    .dot {
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background-color: @write;
+      position: absolute;
+
+      &.left {
+        left: 4px;
+      }
+
+      &.right {
+        right: 4px;
+      }
+
+      &.top {
+        top: 4px;
+      }
+
+      &.bottom {
+        bottom: 4px;
+      }
+    }
+
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      color: @write;
+      position: relative;
+
+      .loop {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        border: 1px solid @darkgray;
+        background-color: fade(@darkgray, 20);
+        left: calc(50% - 21px);
+        top: calc(50% - 21px);
+      }
+
+      &.write {
+        color: @write;
+      }
+
+      &.green {
+        color: @green;
+      }
+
+      &.blue {
+        color: @darkBlue;
+      }
+
+      &.pink {
+        color: @pink;
+      }
+
+      &.red {
+        color: @red;
+      }
+
+      &.orange {
+        color: @orange;
+      }
+
+      &.gray {
+        color: @gray;
+      }
+
+      div {
+        &:first-child {
+          font-size: 12px;
+        }
+        &:last-child {
+          font-size: 16px;
+          font-family: "Bicubik";
+        }
+      }
+    }
+
+    .item2 {
+      flex: 1;
+      display: flex;
+      width: 20%;
+      flex-wrap: wrap;
+
+      .name {
+        color: @gray;
+        width: 50%;
+        text-align: center;
+      }
+
+      .num2 {
+        width: 50%;
+        color: @yellow;
+        text-align: left;
+      }
+
+      .num1 {
+        width: 50%;
+        color: @yellow;
+        text-align: center;
+        position: relative;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 1.481vh;
+          height: 0.556vh;
+          background-color: @yellow;
+          left: 1.204vh;
+          top: 0.741vh;
+        }
+      }
+
+      .num3 {
+        width: 50%;
+        color: @yellow;
+        text-align: left;
+      }
+    }
+  }
+
+  .panel-box {
+    margin-top: 8px;
+    flex-grow: 1;
+
+    & > div {
+      margin: 4px 0;
+    }
+
+    .panel-title {
+      width: 100%;
+      height: @titleHeight;
+      line-height: @titleHeight;
+      background-color: fade(@darkgray, 40%);
+
+      .panel-title-name {
+        font-size: 12px;
+        color: @green;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+
+        i {
+          margin-right: 8px;
+        }
+
+        .sub-title-item {
+          display: flex;
+          flex: 1;
+
+          .sub-title {
+            flex: 0 0 auto;
+            color: @gray;
+            font-size: 12px;
+            margin: 0 8px 0 12px;
+          }
+
+          .sub-count {
+            flex: 1 0 auto;
+            font-size: 14px;
+            font-family: "Bicubik";
+            font-weight: 500;
+
+            &.write {
+              color: @write;
+            }
+
+            &.green {
+              color: @green;
+            }
+
+            &.blue {
+              color: @darkBlue;
+            }
+
+            &.pink {
+              color: @pink;
+            }
+
+            &.red {
+              color: @red;
+            }
+
+            &.orange {
+              color: @orange;
+            }
+
+            &.gray {
+              color: @gray;
+            }
+          }
+        }
+      }
+    }
+
+    .panel-body {
+      height: calc(100% - 7.407vh);
+      padding: 0;
+    //   margin: 4px 0;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      justify-content: flex-start;
+
+      .blank {
+        margin-right: 3px;
+        flex: 1 0 40px;
+      }
+
+      .card {
+        margin-right: 3px;
+        margin-top: 2px;
+        flex: 1 0 40px;
+      }
+
+      .card {
+        border-radius: 4px;
+        text-align: center;
+        border: 1px solid;
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+
+        &.write {
+          color: @black;
+          border-color: @write;
+          background-color: @write;
+        }
+
+        &.green {
+          color: @green;
+          border-color: @green;
+        }
+
+        &.blue {
+          color: @darkBlue;
+          border-color: @darkBlue;
+        }
+
+        &.pink {
+          color: @pink;
+          border-color: @pink;
+        }
+
+        &.red {
+          color: @write;
+          border-color: @red;
+          background-color: @red;
+        }
+
+        &.orange {
+          color: @orange;
+          border-color: @orange;
+        }
+
+        &.gray {
+          color: @write;
+          border-color: @darkgray;
+          background-color: @darkgray;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/dj1.vue

@@ -241,7 +241,7 @@
                     <span class="dot"></span>
                     <span>{{jfplStr}}</span>
                   </div>
-                  <direction-radar-chart :width="'60%'" :height="'152px'" :value="windResourcesData" :showLegend="true" />
+                  <direction-radar-chart :width="'80%'" :height="'180px'" :value="windResourcesData" :showLegend="true" />
                 </div>
               </panel>
             </div>
@@ -271,7 +271,7 @@
                 <span class="dot"></span>
                 <span>{{rzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -282,7 +282,7 @@
                 <span class="dot"></span>
                 <span>{{yzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -293,7 +293,7 @@
                 <span class="dot"></span>
                 <span>{{nzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -306,7 +306,7 @@
                 <span class="dot"></span>
                 <span>{{rfxplStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
             </div>
           </panel>
         </el-col>
@@ -317,7 +317,7 @@
                 <span class="dot"></span>
                 <span>{{yfxplStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
+              <radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
             </div>
           </panel>
         </el-col>
@@ -467,13 +467,14 @@ import AreaLineChart from "../../components/chart/combination/area-line-chart.vu
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
 import MarkerLineChart from "../../components/chart/line/multiple-line-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
-import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
+import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import RadarChart from "../../components/chart/radar/radar-chart.vue";
 import panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 export default {
-  components: { panel, AreaLineChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
-  setup () { },
-  data () {
+  components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart, RadarChart },
+  setup() {},
+  data() {
     return {
       tabIndex: 0,
       tableData: {
@@ -1322,7 +1323,7 @@ export default {
 
       .legend {
         font-size: 12px;
-        flex: 0 0 140px;
+        flex: 0 0 80px;
         height: 20px;
         display: flex;
         align-items: center;

src/views/NewPages/dj2.vue

@@ -8,41 +8,25 @@
               <div class="query-items">
                 <div class="query-item selections">
                   <button class="btn" type="button">风向走势图</button>
-                  <button class="btn" type="button">
+                 <!-- <button class="btn" type="button">
                     风资源玫瑰图
-                  </button>
+                  </button> -->
                 </div>
                 <div class="query-item">
-                  <div class="lable">风场：</div>
+                  <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 v-model="wpId" clearable placeholder="请选择" popper-class="select">
+                      <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
                     </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 class="query-item">
+                        <div class="lable">日期：</div>
+                        <div class="search-input">
+                          <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+                          </el-date-picker>
+                        </div>
+                      </div>
                 <div class="query-item selections">
                   <button class="btn active" type="button">搜索</button>
                 </div>
@@ -72,31 +56,95 @@ export default {
   },
   data() {
     return {
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+      wpArray: [],
+      wtArray: [],
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      wpId: "",
+      wtId: "",
+      chartData: [{
+        title: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["(m/s)"]
     };
   },
-  created() {},
+
+    // 函数
+  methods: {
+    // 请求服务
+    requestData () {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
+
+        }
+      });
+    }, // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "winddirection/getWinddirection",
+        data: {
+          wtId: that.wpId
+        },
+        success (res) {
+
+          const keyArray = [{
+            key: "value1",
+            title: "风速"
+          }, {
+            key: "value2",
+            title: "实际拟合功率"
+          }, {
+            key: "value3",
+            title: "最优拟合功率"
+          }, {
+            key: "value4",
+            title: "保证功率"
+          }];
+
+          let chartData = [{
+            title: "风速",
+            yAxisIndex: 1,
+            value: []
+          }, {
+            title: "实际拟合功率",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "最优拟合功率",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "保证功率",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          keyArray.forEach((keyEle, keyIndex) => {
+            res.data.forEach(ele => {
+              chartData[keyIndex].value.push({
+                text: "",
+                value: ele[keyEle.key]
+              });
+            });
+          });
+
+          that.chartData = chartData;
+        }
+      });
+    },
+
+  },
+  created() {
+    this.requestData();
+  },
 };
 </script>
 

src/views/NewPages/personnel.vue

@@ -17,6 +17,7 @@
         v-for="(item, index) in resData"
         :key="index"
         @click="todesc(item)"
+        :style="[item.objects && frontOneHour < item.objects['LAT'].ts ? 'order:-1' :'']"
       >
         <div class="personnel-box-item-h">
           <div class="personnel-box-item-header">
@@ -54,7 +55,14 @@
             {{ item.objects && item.username }}
           </div>
           <div class="personnel-box-item-icon">
-            <i :class="['el-icon-user-solid',item.objects && frontOneHour<item.objects['LAT'].ts? 'icolor':'']" ></i>
+            <i
+              :class="[
+                'el-icon-user-solid',
+                item.objects && frontOneHour < item.objects['LAT'].ts
+                  ? 'icolor'
+                  : '',
+              ]"
+            ></i>
           </div>
         </div>
       </div>
@@ -75,7 +83,7 @@
               <div class="search-input">
                 <el-date-picker
                   v-model="startdate"
-                  type="date"
+                  type="datetime"
                   placeholder="选择日期"
                   popper-class="date-select"
                   class="placeholder-left"
@@ -88,7 +96,7 @@
               <div class="search-input">
                 <el-date-picker
                   v-model="enddate"
-                  type="date"
+                  type="datetime"
                   placeholder="选择日期"
                   popper-class="date-select"
                   class="placeholder-left"
@@ -161,7 +169,7 @@
           height="45vh"
           :showLegend="true"
           :units="['半小时检测值']"
-          :list='chartList'
+          :list="chartList"
         />
       </div>
     </el-dialog>
@@ -211,12 +219,11 @@ export default {
       dialogVisible: false,
       resData: null,
       perData: null,
-      frontOneHour : new Date().getTime() - 10 * 60 * 1000,
-      startdate: new Date(
-        new Date(new Date().setDate(new Date().getDate() - 1))
-      ).formatDate("yyyy-MM-dd"),
-      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
-      chartList:[
+      frontOneHour: new Date().getTime() - 10 * 60 * 1000,  //前十分钟
+      startdate: new Date(new Date().getTime() - 60 * 60 * 1000
+      ).formatDate("yyyy-MM-dd hh:mm:ss"),
+      enddate: new Date(new Date()).formatDate("yyyy-MM-dd hh:mm:ss"),
+      chartList: [
         {
           title: "疲劳度",
           yAxisIndex: 0,
@@ -314,14 +321,14 @@ export default {
   },
   // 函数
   methods: {
-      imgurl(v){
-          try {
-              const url  = require(`@assets/person/${v}.jpg`)
-              return url
-          } catch (error) {
-              return require('@assets/logo.png')
-          }
-      },
+    imgurl(v) {
+      try {
+        const url = require(`@assets/person/${v}.jpg`);
+        return url;
+      } catch (error) {
+        return require("@assets/logo.png");
+      }
+    },
     clickBtn(btn, index) {
       this.search(btn.val);
       this.btnIndex = index;
@@ -332,28 +339,43 @@ export default {
     async todesc(item) {
       this.dialogVisible = true;
       this.perData = item;
-      this.searchper()
+      this.searchper();
     },
     async searchper() {
-      const { data } = await axios.get(  //http://192.168.10.12:8082/   //http://10.155.32.4:8010
-        `http://192.168.1.18:8087/bracelet/getInfo?userid=${this.perData.mobile}&beginDate=${new Date(this.startdate).formatDate("yyyy-MM-dd HH:mm:ss")}&endDate=${new Date(this.enddate).formatDate("yyyy-MM-dd HH:mm:ss")}`);
-      let arr=[]
-      data.data.forEach(e => {
-          let obj={
-            title: e.name,
-            yAxisIndex: 0,
-            value:[]
-          }
-          e.bs.forEach(i => {
-              let obj1={
-              text: "1",
-              value: i.val,
-            }
-              obj.value.push(obj1)
-          })
-          arr.psuh(obj)
+      const { data } = await axios.get(
+        //http://192.168.10.12:8082/   //http://10.155.32.4:8010
+        // `http://10.155.32.4:8034/bracelet/getInfo?userid=1864&beginDate=2021-07-15+12%3A01%3A22&endDate=2021-07-15+15%3A01%3A22`);
+      
+      `http://10.155.32.4:8034/bracelet/getInfo?userid=${this.perData.mobile}&beginDate=${new Date(this.startdate).formatDate("yyyy-MM-dd hh:mm:ss")}&endDate=${new Date(this.enddate).formatDate("yyyy-MM-dd hh:mm:ss")}`);
+      console.warn(data);
+      let arr = [];
+      let resarr = ["pld", "ssxy", "szxy", "xtpl", "xy"];
+      const objb = {
+        pld: "疲劳度",
+        ssxy: "收缩血压",
+        szxy: "舒张血压",
+        xtpl: "心跳频率",
+        xy: "血氧",
+      };
+      resarr.forEach((e) => {
+        let obj = {
+          title: objb[e],
+          yAxisIndex: 0,
+          value: [],
+        };
+        let vlarr = [];
+        data.forEach((k) => {
+          let obj1 = {
+            text: new Date(k.date).formatDate("hh:mm"),
+            value: k[e]
+          };
+          vlarr.push(obj1);
+        });
+        obj.value = vlarr;
+        arr.push(obj);
       });
-      this.chartList = arr
+      console.warn(arr);
+      this.chartList = arr;
     },
     async search(id) {
       const { data } = await axios.get(
@@ -387,8 +409,8 @@ export default {
 </script>
 
 <style lang="less">
-.icolor{
-    color: #05bb4c;
+.icolor {
+  color: #05bb4c;
 }
 .personnel {
   widows: 100%;

src/views/SandTable/SandTable.vue

@@ -1,31 +1,123 @@
 <template>
     <div class="sand-table">
         <img :src="require('@assets/png/3dback.png')" class="i3dback">
+        <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud">
         <StBack></StBack>
-        <ThreeModel class="three-model-layer" @when="when"></ThreeModel>
+        <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
         <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 class="com-panel-sand">
+                <div class="com-panel-sand-header font-sm white">
+                    <div class="sand-time">{{sandTime}}</div>
+                    <div class="sand-date mg-b-8">{{sandDate}}</div>
                 </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 class="com-panel-body">
+                    <div class="weather-box">
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-天气1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">天气</div>
+                                <div class="font-lg green">多云转晴</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-温度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">温度</div>
+                                <div>
+                                    <span class="font-lg green">26</span>
+                                    <span class="font-sm white mg-l-8">℃</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-风速" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">风向</div>
+                                <div>
+                                    <span class="font-lg green">4-5</span>
+                                    <span class="font-sm white mg-l-8">级 西北风</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-能见度" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">能见度</div>
+                                <div>
+                                    <span class="font-lg green">20</span>
+                                    <span class="font-sm white mg-l-8">KM</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-湿度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">湿度</div>
+                                <div>
+                                    <span class="font-lg green">75.0</span>
+                                    <span class="font-sm white mg-l-8">%</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-气压1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">气压</div>
+                                <div>
+                                    <span class="font-lg green">994</span>
+                                    <span class="font-sm white mg-l-8">kPa</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日出1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日出时间</div>
+                                <div class="font-lg green">04:36</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日落1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日落时间</div>
+                                <div class="font-lg green">18:50</div>
+                            </div>
+                        </div>
                     </div>
-                    <power-plan />
                 </div>
-            </PanelSand>
-            <PanelSand class="left-panel mg-t-16" title="板块标题">
-                <power-review />
-            </PanelSand>
+            </div>
         </div>
         <div class="sand-table-right" v-if="showPanel">
             <PanelSand class="right-panel" title="板块标题">
@@ -87,36 +179,88 @@
                 </template>
             </PanelSandToolbar>
         </div>
+        <div class="sand-table-bottom">
+            <div class="stb-chart-panel">
+                <PercentCard2></PercentCard2>
+            </div>
+            <div class="stb-chart-panel">
+                <PercentCard2 title="年计划完成率"></PercentCard2>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">日</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">今日预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">月</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">月预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-风速" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">风速</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-功率" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">功率</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import ThreeModel from "./component/ThreeModel.vue";
+import ThreeModel1 from "./component/ThreeModel1.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 StBack from "./component/st-back.vue";
 import Table from "@com/coms/table/table.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";
 
 export default {
     // 名称
     name: "SandTable",
     // 使用组件
     components: {
-        ThreeModel,
+        ThreeModel1,
         PanelSand,
         PanelSandToolbar,
-        Weather,
-        ListBarChart2,
-        PowerPlan,
-        PowerReview,
         Table,
         RadarPieChart,
         StBack,
+        SvgIcon,
+        PercentCard2,
     },
     // 数据
     data() {
@@ -196,6 +340,8 @@ export default {
                     },
                 ],
             },
+            sandTime: "00:00:00",
+            sandDate: "0000年00月00日 星期日",
         };
     },
     // 函数
@@ -206,6 +352,27 @@ export default {
         exchange: function () {
             this.exchangeBtn = !this.exchangeBtn;
         },
+        initDateTime: function () {
+            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+            const setDateTime = () => {
+                let myDate = new Date();
+                let year = myDate.getFullYear();
+                let month = myDate.getMonth() + 1;
+                month = month < 10 ? `0${month}` : month;
+                let day = myDate.getDate();
+                day = day < 10 ? `0${day}` : day;
+                let xq = days[myDate.getDay()];
+                let hour = myDate.getHours();
+                let minute = myDate.getMinutes();
+                minute = minute < 10 ? `0${minute}` : minute;
+                let second = myDate.getSeconds();
+                second = second < 10 ? `0${second}` : second;
+                this.sandTime = `${hour}:${minute}:${second}`;
+                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
+                window.requestAnimationFrame(setDateTime);
+            };
+            setDateTime();
+        },
     },
     // 生命周期钩子
     beforeCreate() {
@@ -219,6 +386,7 @@ export default {
     },
     mounted() {
         // 渲染后
+        this.initDateTime();
     },
     beforeUpdate() {
         // 数据更新前
@@ -235,6 +403,79 @@ export default {
     height: 91.667vh;
     position: relative;
 
+    .com-panel-sand {
+        background: #53626826;
+        padding: 0 1.481vh 1.481vh 1.481vh;
+        border-top: 1px solid #15a952;
+        position: relative;
+        // width: 18.519vh;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background: #15a952;
+            right: -2.5px;
+            top: -2.5px;
+        }
+
+        .com-panel-sand-header {
+            text-align: left;
+            position: relative;
+            padding: 0.833vh 0;
+            border-bottom: 1px solid #15a95266;
+
+            .sand-time {
+                color: #15A952;
+                font-weight: 400;
+                font-size: 24px;
+            }
+
+            .sand-date {
+                font-size: 12px;
+                font-weight: 400;
+                color: #FFFFFF;
+            }
+
+            &::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;
+            }
+        }
+
+        .weather-box {
+            .weather-item {
+                display: flex;
+                align-items: center;
+                margin-top: 16px;
+
+                .weather-icon {
+                    margin-right: 12px;
+                }
+            }
+        }
+    }
+
     .i3dback {
         position: fixed;
         z-index: -1;
@@ -244,6 +485,15 @@ export default {
         left: 0;
     }
 
+    .i3dcloud {
+        position: fixed;
+        z-index: 2;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+
     .left-panel {
         width: 36.852vh;
     }
@@ -273,6 +523,58 @@ export default {
         z-index: 2;
     }
 
+    .sand-table-bottom {
+        position: absolute;
+        left: 18vh;
+        bottom: 0;
+        z-index: 2;
+        display: flex;
+
+        .stb-chart-panel {
+            background: #53626826;
+            margin-right: 4px;
+            padding: 0 16px;
+            height: 64px;
+        }
+
+        .stb-count-panel {
+            margin: 0 16px;
+            display: flex;
+            height: 64px;
+            align-items: center;
+
+            .stb-count-panel-icon {
+                width: 37px;
+                height: 37px;
+                background: #5362684D;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                color: #94A4AB;
+
+                &::after,
+                &::before {
+                    content: '';
+                    position: absolute;
+                    width: 3px;
+                    height: 3px;
+                    background: #15A952;
+                    top: 17px;
+                }
+
+                &::after {
+                    left: -3px;
+                }
+
+                &::before {
+                    right: -3px;
+                }
+            }
+        }
+    }
+
     .pre-img-box {
         display: flex;
         align-items: center;

src/views/SandTable/SandTable_old.vue

@@ -0,0 +1,311 @@
+<template>
+    <div class="sand-table">
+        <img :src="require('@assets/png/3dback.png')" class="i3dback">
+        <StBack></StBack>
+        <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 StBack from "./component/st-back.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,
+        StBack,
+    },
+    // 数据
+    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;
+
+    .i3dback {
+        position: fixed;
+        z-index: -1;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+
+    .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/ThreeModel1.vue

@@ -0,0 +1,516 @@
+<template>
+    <div class="three-model">
+        <loading ref="pageLoading"></loading>
+        <div class="map-3d" :style="'transform: rotate('+mapDeg+'deg);'">
+            <img :src="require('@assets/png/3dmap.png')" alt="">
+        </div>
+        <div class="three-html-layer">
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[0].id"
+                v-show="htmlLayer[0].show"
+                :style="'left: ' + htmlLayer[0].x + 'px; top: ' + htmlLayer[0].y + 'px;'"
+            >
+                <div class="fan-name">麻黄山</div>
+            </div>
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[1].id"
+                v-show="htmlLayer[1].show"
+                :style="'left: ' + htmlLayer[1].x + 'px; top: ' + htmlLayer[1].y + 'px;'"
+            >
+                <div class="fan-name">牛首山</div>
+            </div>
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[2].id"
+                v-show="htmlLayer[2].show"
+                :style="'left: ' + htmlLayer[2].x + 'px; top: ' + htmlLayer[2].y + 'px;'"
+            >
+                <div class="fan-name">青山</div>
+            </div>
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[3].id"
+                v-show="htmlLayer[3].show"
+                :style="'left: ' + htmlLayer[3].x + 'px; top: ' + htmlLayer[3].y + 'px;'"
+            >
+                <div class="fan-name">石板泉</div>
+            </div>
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[4].id"
+                v-show="htmlLayer[4].show"
+                :style="'left: ' + htmlLayer[4].x + 'px; top: ' + htmlLayer[4].y + 'px;'"
+            >
+                <div class="fan-name">香山</div> 
+            </div>
+        </div>
+    </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";
+import { GeometryUtils } from "@node/three/examples/jsm/utils/GeometryUtils.js";
+let camera, scene, renderer, controls;
+let mixers = [];
+let clock = new THREE.Clock();
+let fanAnimates = [];
+let fans = [];
+let cylinder = null;
+export default {
+    // 名称
+    name: "ThreeModel1",
+    // 使用组件
+    components: {
+        loading,
+    },
+    // 传入参数
+    props: {},
+    // 自定义事件
+    emits: {
+        when: null,
+    },
+    // 数据
+    data() {
+        return {
+            pointer: false,
+            htmlLayer: [
+                { // 麻黄山
+                    id: "fan-mhs",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 50,
+                    oy: 10,
+                    position: null,
+                },
+                { // 牛首山
+                    id: "fan-nss",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 35,
+                    oy: 0,
+                    position: null,
+                },
+                { // 青山
+                    id: "fan-qs",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 60,
+                    oy: 10,
+                    position: null,
+                },
+                { // 石板泉
+                    id: "fan-sbq",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 45,
+                    oy: 0,
+                    position: null,
+                },
+                { // 香山
+                    id: "fan-qs",
+                    x: 0,
+                    y: 0,
+                    show: true,
+                    ox: 25,
+                    oy: 20,
+                    position: null,
+                },
+            ],
+            circleXY: [
+                { x: -(200*Math.sin(0/180*Math.PI)), y: -(200*Math.cos(0/180*Math.PI)) },
+                { x: -(200*Math.sin(-30/180*Math.PI)), y: -(200*Math.cos(-30/180*Math.PI)) },
+                { x: -(200*Math.sin(-60/180*Math.PI)), y: -(200*Math.cos(-60/180*Math.PI)) },
+                { x: -(200*Math.sin(-90/180*Math.PI)), y: -(200*Math.cos(-90/180*Math.PI)) },
+                { x: -(200*Math.sin(-120/180*Math.PI)), y: -(200*Math.cos(-120/180*Math.PI)) },
+                { x: -(200*Math.sin(-150/180*Math.PI)), y: -(200*Math.cos(-150/180*Math.PI)) },
+                { x: -(200*Math.sin(-180/180*Math.PI)), y: -(200*Math.cos(-180/180*Math.PI)) },
+            ],
+            colors: [
+                { colorName: 'green', state: 'dj', stateName: '待机', color: 0x05bb4c, },
+                { colorName: 'blue', state: 'yx', stateName: '运行', color: 0x4b55ae, },
+                { colorName: 'pink', state: 'xd', stateName: '限电', color: 0xc531c7, },
+                { colorName: 'red', state: 'gz', stateName: '故障', color: 0xBA3237, },
+                { colorName: 'orange', state: 'jx', stateName: '检修', color: 0xe17e23, },
+                { colorName: 'gray', state: 'lx', stateName: '离线', color: 0x606769, },
+                { colorName: 'white', state: 'sl', stateName: '受累', color: 0xffffff, },
+            ],
+            fanName: "",
+            playAnimation: true,
+            mapDeg: 0,
+        };
+    },
+    // 函数
+    methods: {
+        // Vector3 to screen
+        vector3ToScreen: function(position) {
+            const centerX = this.$el.scrollWidth / 2;
+            const centerY = this.$el.scrollHeight / 2;
+            const v3 = new THREE.Vector3(position.x, position.y, position.z);
+            const standardVec = v3.project(camera);
+            const screenX = Math.round(centerX * standardVec.x + centerX);
+            const screenY = Math.round(-centerY * standardVec.y + centerY);
+            return { x: screenX, y: screenY };
+        },
+        // 场景
+        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, 50, 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, 1);
+            // light.position.set(50, 50, 50);
+            scene.add(light);
+        },
+        // 控制器
+        initControls: function() {
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.enablePan = false;
+            controls.maxPolarAngle = 45 / 180 * Math.PI;
+            controls.minPolarAngle = 45 / 180 * Math.PI;
+            controls.maxAzimuthAngle = 45 / 180 *  Math.PI;
+            controls.minAzimuthAngle = 45 / 180 *  Math.PI;
+            controls.enableKeys = false;
+            controls.enableZoom = false;
+            controls.update();
+            // controls.maxAzimuthAngle = 50 / 180 *  Math.PI;
+            // controls.minAzimuthAngle = 40 / 180 *  Math.PI;
+            // controls.addEventListener("change", () => {
+            //     let cDeg = controls.getAzimuthalAngle() / Math.PI * 180;
+            //     this.mapDeg = cDeg - 40 - 5;
+            //     this.setEveryHTML();
+            // });
+        },
+        // 初始化一个风机动画
+        initFanAnimate: function(obj) {
+            let fanAnimateObj = {
+                speed: 0.05,
+                rotate: 0,
+                fan: obj.getObjectByName(`${obj.name}_leaf`),
+                fan1: obj.getObjectByName(`${obj.name}_leaf_1`),
+                fan2: obj.getObjectByName(`${obj.name}_leaf_2`),
+                fan3: obj.getObjectByName(`${obj.name}_leaf_3`),
+            };
+            let fanAnimateFunction = function() {
+                // fanAnimateObj.fan.rotateOnAxis(new THREE.Vector3(0, 1, 0), fanAnimateObj.speed);
+                fanAnimateObj.fan.rotateY(-fanAnimateObj.speed);
+                // fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
+                // fanAnimateObj.fan2.rotateZ(fanAnimateObj.speed);
+                // fanAnimateObj.fan3.rotateZ(fanAnimateObj.speed);
+                // fanAnimateObj.rotate += fanAnimateObj.speed;
+                // if (fanAnimateObj.rotate >= 360) {
+                //     fanAnimateObj.rotate = 0;
+                // }
+                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();
+            }
+            this.playAnimation = false;
+        },
+        // 开始风机动画
+        startFanAnimate: function () {
+            fans.forEach(fan => {
+                this.initFanAnimate(fan);
+            });
+            this.playAnimation = true;
+        },
+        // 内容
+        initContent: function() {
+            // 加载3D地面
+            let loaderGround = new GLTFLoader(); /*实例化加载器*/
+            loaderGround.load(
+                "static/3d/fanvar.gltf",
+                (gltf) => {
+                    gltf.scene.position.set(17, 10, -12);
+                    console.log(gltf);
+                    scene.add(gltf.scene);
+                    let rootNode = gltf.scene.children[0];
+                    let fan = gltf.scene.children[0].children[0];
+                    rootNode.remove(fan);
+                    this.setFanPosition(rootNode, fan);
+                    scene.onAfterRender = () => {
+                        this.$emit("when");
+                        this.$refs.pageLoading.hide();
+                    }
+
+                },
+                (xhr) => {},
+                function(error) {
+                    console.error("load error!" + error.getWebGLErrorMessage());
+                }
+            );
+        },
+        // 改变元素底盘的颜色（带底盘的）
+        changeObjectColor: function (obj, colorName) {
+            let chassis = obj.getObjectByName(`${obj.name}_chassis`);
+            let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
+            chassis.material = new THREE.MeshBasicMaterial({
+                color: color,
+                opacity: 0.8,
+                transparent: true,
+            });
+        },
+        // 设置风机name
+        setFanName: function (obj, name) {
+            obj.name = name;
+            obj.userData.name = name;
+            let fanBig1_1 = obj.getObjectByName("Box719");
+            let fanBig1_2 = obj.getObjectByName("Box720");
+            let fanBig1_3 = obj.getObjectByName("Box721");
+            fanBig1_1.name = `${name}_leaf_1`;
+            fanBig1_1.userData.name = `${name}_leaf_1`;
+            fanBig1_2.name = `${name}_leaf_2`;
+            fanBig1_2.userData.name = `${name}_leaf_2`;
+            fanBig1_3.name = `${name}_leaf_3`;
+            fanBig1_3.userData.name = `${name}_leaf_3`;
+            obj.children[obj.children.length - 1].name = `${name}_chassis`;
+            obj.children[obj.children.length - 1].userData.name = `${name}_chassis`;
+            obj.remove(fanBig1_1, fanBig1_2, fanBig1_3);
+            var group = new THREE.Group();
+            // var group = new THREE.Mesh(new THREE.BoxGeometry(0.01, 0.01, 0.01),
+            //     new THREE.MeshBasicMaterial({
+            //         color: 0xff0000
+            //     })
+            // );
+            group.position.set(group.position.x + 0.0067, group.position.y, group.position.z + 0.01);
+            fanBig1_1.position.set(fanBig1_1.position.x - 0.0067, fanBig1_1.position.y , fanBig1_1.position.z- 0.01);
+            fanBig1_2.position.set(fanBig1_2.position.x - 0.0067, fanBig1_2.position.y, fanBig1_2.position.z- 0.01);
+            fanBig1_3.position.set(fanBig1_3.position.x - 0.0067, fanBig1_3.position.y, fanBig1_3.position.z- 0.01);
+            group.add(fanBig1_1, fanBig1_2, fanBig1_3);
+            obj.add(group);
+            group.name = `${name}_leaf`;
+        },
+        // 设置风机位置 颜色
+        setFanPosition: function (rootNode, obj) {
+            // 麻黄山
+            let fan_mhs = obj.clone(true);
+            fan_mhs.position.set(8, 5, -3);
+            this.setFanName(fan_mhs, "fan_mhs");
+            rootNode.add(fan_mhs);
+            // this.initCylinderGeometry(fan_mhs.position);
+            this.htmlLayer[0].position = fan_mhs.position;
+            // 牛首山
+            let fan_nss = obj.clone(true);
+            fan_nss.position.set(-4, 4, -15);
+            this.setFanName(fan_nss, "fan_nss");
+            rootNode.add(fan_nss);
+            // this.initCylinderGeometry(fan_nss.position);
+            this.htmlLayer[1].position = fan_nss.position;
+            // 青山
+            let fan_qs = obj.clone(true);
+            fan_qs.position.set(12, 5, -11);
+            this.setFanName(fan_qs, "fan_qs");
+            rootNode.add(fan_qs);
+            // this.initCylinderGeometry(fan_qs.position);
+            this.htmlLayer[2].position = fan_qs.position;
+            // 石板泉
+            let fan_sbq = obj.clone(true);
+            fan_sbq.position.set(4, 5, -15);
+            this.setFanName(fan_sbq, "fan_sbq");
+            rootNode.add(fan_sbq);
+            // this.initCylinderGeometry(fan_sbq.position);
+            this.htmlLayer[3].position = fan_sbq.position;
+            // 香山
+            let fan_xs = obj.clone(true);
+            fan_xs.position.set(-9, 7, 21);
+            this.setFanName(fan_xs, "fan_xs");
+            rootNode.add(fan_xs);
+            // this.initCylinderGeometry(fan_xs.position);
+            this.htmlLayer[4].position = fan_xs.position;
+
+            // 改一下颜色
+            this.changeObjectColor(fan_mhs, 'green'); // 麻黄山
+            this.changeObjectColor(fan_nss, 'xd'); // 牛首山
+            this.changeObjectColor(fan_qs, '检修'); // 青山
+            this.changeObjectColor(fan_sbq, 'white'); // 石板泉
+            this.changeObjectColor(fan_xs, '运行'); // 香山
+
+            // 风机存入数组
+            fans.push(fan_mhs);
+            fans.push(fan_nss);
+            fans.push(fan_qs);
+            fans.push(fan_sbq);
+            fans.push(fan_xs);
+
+            // 开始风机动画
+            this.startFanAnimate();
+
+            // 设置位置
+            this.setEveryHTML();
+        },
+        // 创建一个圆柱
+        initCylinderGeometry: function(position, cr=2) {
+            let geometry = new THREE.CylinderGeometry(cr, cr, 7, 64);
+            //加载纹理
+            let texture = new THREE.TextureLoader().load("static/3d/beam-texture.png");
+            texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
+            texture.repeat.set(1, 1);
+            texture.needsUpdate = true;
+            let materials = [
+                //圆柱侧面材质，使用纹理贴图
+                new THREE.MeshBasicMaterial({
+                    map: texture,
+                    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,
+                }),
+            ];
+            cylinder = new THREE.Mesh(geometry, materials);
+            cylinder.position.set(position.x + 5.75, position.y + 8, position.z);
+            scene.add(cylinder);
+        },
+        // 设置每一个html的位置
+        setEveryHTML: function() {
+            this.htmlLayer.forEach(value => {
+                if (value.show && value.position) {
+                    const screen = this.vector3ToScreen(value.position);
+                    value.x = screen.x + value.ox;
+                    value.y = screen.y + value.oy;
+                }
+            });
+        },
+        // 初始化云
+        initCloud: function () {
+            
+        },
+        // 初始化
+        initThree: function() {
+            this.initScene();
+            // this.initAxesHelper();
+            this.initCamera();
+            this.initRender();
+            this.initLight();
+            this.initControls();
+            this.initContent();
+            this.initCloud();
+            renderer.setAnimationLoop(this.animate);
+        },
+        // 动画
+        animate: function() {
+            renderer.render(scene, camera);
+        },
+    },
+    // 生命周期钩子
+    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 {
+    position: relative;
+    overflow: hidden;
+
+    .map-3d {
+        position: absolute;
+        width: 1118px;
+        height: 678px;
+        left: calc(50% - 559px);
+        top: calc(50% - 339px);
+        z-index: -1;
+
+        map {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .three-html-layer {
+
+        .three-html-dom {
+            position: absolute;
+        }
+
+        .fan-name  {
+            display: inline-block;
+            height: 22px;
+            background: #222632;
+            border: 1px solid #646464;
+            border-radius: 10px;
+            padding: 0 10px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 22px;
+        }
+    
+    }
+}
+</style>

src/views/WindSite/components/boosterstation/mch/previewPicture.vue

@@ -0,0 +1,697 @@
+<template>
+	<div class="pop-up-main">
+		<div class="paln-box">
+			<div class="movableItem" :style="{width:width,height:height}" @mousewheel="rollImg($event)"
+				@mousedown="drag($event,1)" ref="bigImage">
+				<!-- 图片不可选中 或不可拖拽到新标签打开-->
+				<slot name="svg" oncontextmenu="return false;" onselectstart="return false;" draggable="false"></slot>
+				<template v-if="isEdit &&iconWidth">
+					<img ref="signImage" :src="iconImgUrl" @mousedown="dragSign($event,key)"
+						v-for="(item,key) in equipment" :key="key"
+						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:iconWidth,height:iconHeight}"
+						class="equipment" />
+				</template>
+				<el-popover width="200" placement="bottom-start" trigger="hover" :close-delay="100" content="暂无描述"
+					v-else-if="!isEdit&&iconWidth &&arrIcon.length==equipment.length " v-for="(item,key) in equipment"
+					:key="key" popper-class="preview-popover">
+					<!-- &&arrIcon.length==equipment.length -->
+					<template>
+						<div v-if="equipment[key].describe" class="describe">
+							<p class="describe-top">{{equipment[key].describe.deviceName}}</p>
+							<p class="describe-center">{{equipment[key].describe.remark}}</p>
+							<p class="describe-bottom">{{equipment[key].describe.location}}</p>
+						</div>
+					</template>
+					<!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
+						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
+						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
+						class="equipment" /> -->
+				</el-popover>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		props: {
+			equipment: {
+				type: Array,
+				default: () => {
+					return [{
+						iconImgUrl: "",
+						top: 0,
+						left: 0,
+					}, ];
+				},
+			},
+			isEdit: {
+				default: false,
+			},
+			imgUrl: {},
+		},
+
+		data() {
+			return {
+				// 定时器
+				timer: "",
+				// 图片加载失败
+				imgOnerror: false,
+				imgIndex: 0,
+				isChange: true,
+				// 图片显示默认大小
+				width: "1400px",
+				height: "850px",
+				// 可缩小倍数,为空则可无限缩小
+				minification: 3,
+				// 可放大倍数 为空则可无限放大
+				magnification: "",
+				bigMaxWidth: 1600,
+				bigMaxHeight: 800,
+
+				// 小图标信息
+				iconImgUrl: "",
+				iconWidth: "",
+				// 存储每个小图标处理好的宽高
+				iconHeight: "",
+				arrIcon: [],
+				iconMaxWidth: 32,
+				iconMaxHeight: 32,
+				tog: 1,
+			};
+		},
+		methods: {
+			// 获取图片大小
+			getImgInfo(
+				imgUrl,
+				MaxWidth,
+				MaxHeight,
+				StrWidth,
+				StrHeight,
+				Array = false,
+				arr,
+				num = 0
+			) {
+				var img = new Image();
+
+				// img.src = imgUrl;
+				img = document.getElementsByClassName("svg")
+				let _this = this;
+				img.onerror = () => {
+					// console.log("加载失败！！", _this.arrIcon.length);
+					console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
+					_this.imgOnerror = true;
+					_this.imgIndex =
+						_this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
+					this.timer = setTimeout(() => {
+						if (num <= 5) {
+							_this.getImgInfo(
+								imgUrl,
+								MaxWidth,
+								MaxHeight,
+								StrWidth,
+								StrHeight,
+								Array,
+								arr,
+								num + 1
+							);
+						}
+						clearInterval(this.timer);
+					}, 2000);
+				};
+				img.onload = function(e) {
+					//  显示时 初始 最大宽度
+					let maxWidth = MaxWidth;
+					//  显示时 初始 最大高度
+					let maxHeight = MaxHeight;
+					if (
+						e.path[0].naturalWidth <= maxWidth &&
+						e.path[0].naturalHeight <= maxHeight
+					) {
+						_this[StrWidth] = e.path[0].naturalWidth + "px";
+						_this[StrHeight] = e.path[0].naturalHeight + "px";
+					} else {
+						_this[StrWidth] = e.path[0].naturalWidth + "px";
+						_this[StrHeight] = e.path[0].naturalHeight + "px";
+						if (
+							e.path[0].naturalWidth > maxWidth &&
+							e.path[0].naturalHeight <= maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							_this[StrWidth] = "1600px";
+							_this[StrHeight] = maxWidth / ratio + "px";
+						} else if (
+							e.path[0].naturalWidth <= maxWidth &&
+							e.path[0].naturalHeight > maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							_this[StrWidth] = maxHeight * ratio + "px";
+							_this[StrHeight] = "800px";
+						} else if (
+							e.path[0].naturalWidth > maxWidth &&
+							e.path[0].naturalHeight > maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							let w = maxWidth;
+							let h = w / ratio;
+							if (h > maxHeight) {
+								let ratio2 = w / h;
+								h = maxHeight;
+								w = h * ratio2;
+							}
+							_this[StrWidth] = w + "px";
+							_this[StrHeight] = h + "px";
+						}
+					}
+					if (Array) {
+						_this[arr].push({
+							iconWidth: _this[StrWidth],
+							iconHeight: _this[StrHeight],
+						});
+						console.log(
+							"tow#################################arrIcon",
+							_this[arr].length
+						);
+					}
+					// _this[StrWidth] = `${e.path[0].naturalWidth}px`;
+					// _this[StrHeight] = `${e.path[0].naturalHeight}px`;
+					// vm.$set(vm.imgInfo, "width", img.width);
+					// vm.$set(vm.imgInfo, "height", img.height);
+					// console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
+
+					// console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
+					// console.log("打印图片信息", e); // 打印图片信息
+					// console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
+					// console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
+				};
+			},
+			// 缩放
+			rollImg() {
+				var that = this;
+				// var oImg = document.getElementsByClassName("movableItem")[0];
+				var oImg = this.$refs.bigImage;
+				console.log(
+					"length",
+					document.getElementsByClassName("movableItem").length
+				);
+				console.log("oImg", oImg);
+				var _this = this;
+
+				function fnWheel(obj, fncc) {
+					obj.onmousewheel = fn;
+					if (obj.addEventListener) {
+						obj.addEventListener("DOMMouseScroll", fn, false);
+					}
+
+					function fn(ev) {
+						var oEvent = ev || window.event;
+						var down = true;
+						if (oEvent.detail) {
+							down = oEvent.detail > 0;
+						} else {
+							down = oEvent.wheelDelta < 0;
+						}
+						if (fncc) {
+							fncc.call(this, down, oEvent);
+						}
+						if (oEvent.preventDefault) {
+							oEvent.preventDefault();
+						}
+						return false;
+					}
+				}
+				fnWheel(oImg, function(down, oEvent) {
+					var oldWidth = this.offsetWidth;
+					var oldHeight = this.offsetHeight;
+					var oldLeft = this.offsetLeft;
+					var oldTop = this.offsetTop;
+					var parent = oEvent.path[2];
+					// 获取父元素距离页面可视区域的位置
+					var parentLeft = parent.getBoundingClientRect().left;
+					var parentTop = parent.getBoundingClientRect().top;
+					// 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
+					var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
+					var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
+
+					let nowWidth = this.style.width.split("p")[0];
+					let initWidth = _this.width.split("p")[0];
+					let initHeight = _this.height.split("p")[0];
+
+					let miniFlag = true;
+					let magniFlag = true;
+					if (_this.minification) {
+						// 限制缩小范围
+						if (nowWidth <= parseInt(initWidth / _this.minification)) {
+							miniFlag = false;
+							console.log("限制缩小范围");
+							console.log(
+								"限制缩小范围",
+								nowWidth,
+								parseInt(initWidth / _this.minification)
+							);
+							this.style.width = parseInt(initWidth / _this.minification) + "px";
+							this.style.height =
+								parseInt(initHeight / _this.minification) + "px";
+						}
+						if (_this.magnification) {
+							// 限制放大范围
+							if (nowWidth >= parseInt(initWidth * _this.magnification)) {
+								magniFlag = false;
+								console.log("限制放大范围");
+								this.style.width =
+									parseInt(initWidth * _this.magnification) + "px";
+								this.style.height =
+									parseInt(initHeight * _this.magnification) + "px";
+							}
+						}
+					}
+
+					if (down && miniFlag) {
+						console.log("缩小");
+						this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
+						this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
+						
+						that.width = parseInt(this.offsetWidth * 0.9) + "px";
+						that.height = parseInt(this.offsetHeight * 0.9) + "px";
+					} else if (!down && magniFlag) {
+						console.log("放大");
+						this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
+						this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
+						that.width = parseInt(this.offsetWidth * 1.1) + "px";
+						that.height = parseInt(this.offsetHeight * 1.1) + "px";
+					}
+					var newWidth = this.offsetWidth;
+					var newHeight = this.offsetHeight;
+
+					// 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
+					this.style.left =
+						Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
+					this.style.top =
+						Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
+				});
+				// console.log(that.width)
+			},
+			// },
+			//拖拽
+			drag(ev) {
+				// var ie = document.all;
+				// console.log(ev / 0);
+
+				var nn6 = document.getElementById && !document.all;
+				var isdrag = false;
+				var y, x;
+				var nTY, nTX;
+				var oDragObj;
+
+				function moveMouse(e) {
+					if (isdrag) {
+						oDragObj.style.top =
+							(nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
+						oDragObj.style.left =
+							(nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
+						return false;
+					}
+				}
+
+				function initDrag(e) {
+					// console.log("点击图片initDrag");
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "movableItem"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "movableItem") {
+						isdrag = true;
+						oDragObj = oDragHandle;
+						// 父元素宽高
+						let width = e.path[2].offsetWidth;
+						let height = e.path[2].offsetHeight;
+						// 这里判断第一次获取不到style 样式 默认为 居中50%
+						if (oDragObj.style.top == "") {
+							// nTY = parseInt((50 * height) / 100 + 0);
+							nTY = 0;
+							nTX = parseInt((50 * width) / 100 + 0);
+						} else {
+							nTY = parseInt(oDragObj.style.top + 0);
+							nTX = parseInt(oDragObj.style.left + 0);
+						}
+						y = nn6 ? e.clientY : event.clientY;
+						x = nn6 ? e.clientX : event.clientX;
+						oDragObj.style.cursor = "move";
+						document.onmousemove = moveMouse;
+						return false;
+					}
+				}
+				document.onmousemove = initDrag;
+				// document.onmouseup = new Function("isdrag=false");
+				document.onmouseup = function(e) {
+					isdrag = false;
+					document.onmousemove = null;
+					document.onmouseup = null;
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "movableItem"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "movableItem") {
+						oDragObj = oDragHandle;
+						oDragObj.style.cursor = "Default";
+					}
+				};
+				ev = event || window.event;
+
+				// 取消事件冒泡行为
+				// window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
+			},
+			// 拖拽标记
+			// eslint-disable-next-line no-unused-vars
+			dragSign(ev, key) {
+				var nn6 = document.getElementById && !document.all;
+				var isdrag = false;
+				var y, x;
+				var nTY, nTX;
+				var oDragObj;
+				let _this = this;
+
+				function moveMouse(e) {
+
+					if (isdrag) {
+						this.equipmentKey = key;
+						// console.log("thisequipmentKey", this.equipmentKey);
+
+						let widthItem = e.path[1].style.width.split("p");
+						let heightItem = e.path[1].style.height.split("p");
+						let width = widthItem[0];
+						// eslint-disable-next-line no-unused-vars
+						let height = heightItem[0];
+						let top =
+							((nn6 ?
+									(nTY / 100) * height + e.clientY - y :
+									(nTY / 100) * height + event.clientY - y) /
+								height) *
+							100;
+						let left =
+							((nn6 ?
+									(nTX / 100) * width + e.clientX - x :
+									(nTX / 100) * width + event.clientX - x) /
+								width) *
+							100;
+
+						if (top >= 0 && top <= 100) {
+							_this.equipment[key].top = top;
+						}
+						if (left >= 0 && left <= 100) {
+							_this.equipment[key].left = left;
+						}
+
+						return false;
+					}
+				}
+				// eslint-disable-next-line no-unused-vars
+				function initDrag(e) {
+					// console.log("_this", _this);
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className.indexOf("equipment") == -1
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className.indexOf("equipment") != -1) {
+						isdrag = true;
+						oDragObj = oDragHandle;
+						// 父元素宽高
+						let width = e.path[1].offsetWidth;
+						let height = e.path[1].offsetHeight;
+						// console.log(width, height);
+						console.log("oDragObj.style", oDragObj.style);
+						// 这里判断第一次获取不到style 样式 默认为 居中50%
+						if (oDragObj.style.top == "") {
+							nTY = parseInt((50 * height) / 100 + 0);
+							nTX = parseInt((50 * width) / 100 + 0);
+						} else if (oDragObj.style.top.indexOf("%") != -1) {
+							nTY = oDragObj.style.top.split("%")[0];
+							nTX = oDragObj.style.left.split("%")[0];
+						} else {
+							nTY = parseInt(oDragObj.style.top + 0);
+							nTX = parseInt(oDragObj.style.left + 0);
+						}
+						y = nn6 ? e.clientY : event.clientY;
+						x = nn6 ? e.clientX : event.clientX;
+
+						oDragObj.style.cursor = "move";
+						document.onmousemove = moveMouse;
+						return false;
+					}
+				}
+
+				// document.onmousedown = initDrag;
+				document.onmousemove = initDrag;
+
+				document.onmouseup = function(e) {
+					isdrag = false;
+					document.onmousemove = null;
+					document.onmouseup = null;
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "equipment"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "equipment") {
+						oDragObj = oDragHandle;
+						oDragObj.style.cursor = "Default";
+					}
+				};
+
+				// _this.equipmentKey = key;
+				// _this.equipment[_this.equipmentKey].left = l;
+				// _this.equipment[_this.equipmentKey].top = t;
+				ev = event || window.event;
+
+				// 取消事件冒泡行为
+				window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
+			},
+		},
+		
+		watch: {
+			equipment() {
+				if (this.equipment.length != 0) {
+					this.arrIcon = [];
+					let finish = true;
+					this.equipment.filter((item) => {
+						if (!item.iconImgUrl) {
+							finish = false;
+						}
+						return true;
+					});
+					console.log("finish", finish);
+					if (finish) {
+						this.equipment.filter((item, index) => {
+							if (index >= this.imgIndex) {
+								console.log("iconImgUrl", this.equipment[index].iconImgUrl);
+								this.getImgInfo(
+									this.$baseUrl + item.iconImgUrl,
+									this.iconMaxWidth,
+									this.iconMaxHeight,
+									"iconWidth",
+									"iconHeight",
+									true,
+									"arrIcon"
+								);
+							}
+							// console.log("22filter", index);
+							return true;
+						});
+					}
+				}
+			},
+		},
+		created() {
+			this.getImgInfo(
+				this.imgUrl,
+				this.bigMaxWidth,
+				this.bigMaxHeight,
+				"width",
+				"height"
+			);
+			if (this.equipment.length != 0) {
+				this.arrIcon = [];
+				let finish = true;
+				this.equipment.filter((item) => {
+					if (!item.iconImgUrl) {
+						finish = false;
+					}
+					return true;
+				});
+				// console.log("finish", finish);
+				if (finish) {
+					this.equipment.filter((item, index) => {
+						if (index >= this.imgIndex) {
+							console.log("iconImgUrl", this.equipment[index].iconImgUrl);
+							this.getImgInfo(
+								this.$baseUrl + item.iconImgUrl,
+								this.iconMaxWidth,
+								this.iconMaxHeight,
+								"iconWidth",
+								"iconHeight",
+								true,
+								"arrIcon"
+							);
+						}
+						// console.log("22filter", index);
+						return true;
+					});
+				}
+			}
+
+			this.iconImgUrl = JSON.parse(
+				JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
+			);
+			// console.log("imgUrl", this.imgUrl);
+			// console.log("equipment", this.equipment);
+			// //禁止鼠标右键
+			// document.oncontextmenu = function() {
+			//   return false;
+			// };
+		},
+	};
+</script>
+<style lang="less">
+	.preview-popover {
+		background-color: #d3edf7dd;
+		padding: 12px;
+
+		.popper__arrow::after {
+			border-bottom-color: #d3edf7dd !important;
+		}
+
+		.describe {
+			p {
+				padding-bottom: 5px;
+
+				&:last-child {
+					padding-bottom: 0px;
+				}
+			}
+
+			.describe-top {
+				// color: sandybrown;
+				// color: red;
+				color: rgb(21, 110, 110);
+			}
+
+			.describe-center {
+				color: rgb(79, 21, 206);
+			}
+
+			.describe-bottom {
+				color: rgb(30, 31, 29);
+			}
+		}
+	}
+</style>
+<style lang="less" scoped>
+	.pop-up-main {
+		width: 100%;
+		height: calc(100vh - 10vh);
+		overflow-y:hidden ;
+
+		.paln-box {
+			width: 100%;
+			height: 100%;
+			position: relative;
+
+			.movableItem {
+				position: absolute;
+				// top: 75%;
+				left: 50%;
+				transform: translate(-50%, -10%);
+
+				img,
+				.svg {
+					z-index: 1;
+					width: 100%;
+					height: 100%;
+				}
+
+				.equipment {
+					position: absolute;
+					top: 0;
+					left: 0;
+					transform: translate(-50%, -50%);
+					z-index: 2;
+					font-size: 40px;
+					// color: red;
+					// background: blue;
+					zoom: 1;
+				}
+			}
+
+			.shuaxin {
+				position: absolute;
+				z-index: 2;
+				font-size: 40px;
+				top: 20px;
+				left: 20px;
+				cursor: pointer;
+
+				&:hover {
+					color: yellowgreen;
+				}
+			}
+
+			.equipment {
+				color: white;
+			}
+
+			&/deep/.el-button {
+				z-index: 2;
+				position: absolute;
+				bottom: 60px;
+				right: 20px;
+				width: 60px;
+				height: 35px;
+
+				span {
+					display: inline-block;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
+				i {
+					display: inline-block;
+					position: absolute;
+					top: 50%;
+					left: 25%;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+	}
+
+	// body {
+	// 		height: 100%;
+	// 		overflow: hidden;
+	// 		margin: 0;
+	// 		padding: 0;
+	// 	}
+</style>

src/views/WindSite/components/customNode.js

@@ -4048,9 +4048,9 @@ const registerFan = () => {
                     "text-anchor": "middle"
                 },
                 image: {
-                    width: 36,
+                    width: 50,
                     height: 50,
-                    refX: 2,
+                    refX: -5,
                     refY: -55,
                 },
             },
@@ -4066,7 +4066,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#05bb4c66";
         option.attrs.rect.stroke = "#05bb4c";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const gray = () =>{
@@ -4079,7 +4079,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#B3BDC066";
         option.attrs.rect.stroke = "#B3BDC0";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const blue = () =>{
@@ -4092,7 +4092,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#1a93cf66";
         option.attrs.rect.stroke = "#1a93cf";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const orange = () =>{
@@ -4105,7 +4105,7 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#e17e2366";
         option.attrs.rect.stroke = "#e17e23";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     const red = () =>{
@@ -4118,7 +4118,46 @@ const registerFan = () => {
         const option = commonOption();
         option.attrs.rect.fill = "#BA323766";
         option.attrs.rect.stroke = "#BA3237";
-        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.png`);
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const purple = () =>{
+        const color = "purple";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#c531c766";
+        option.attrs.rect.stroke = "#c531c7";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const purpleStop = () =>{
+        const color = "purple-stop";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#c531c766";
+        option.attrs.rect.stroke = "#c531c7";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
+        Graph.registerNode(shape, option, true);
+    }
+    const white = () =>{
+        const color = "white";
+        const shape = `${shapeName}-${color}`;
+        nodeSize[shape] = {
+            width: width,
+            height: height
+        };
+        const option = commonOption();
+        option.attrs.rect.fill = "#ffffff66";
+        option.attrs.rect.stroke = "#ffffff";
+        option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
         Graph.registerNode(shape, option, true);
     }
     green();
@@ -4126,6 +4165,9 @@ const registerFan = () => {
     blue();
     orange();
     red();
+    purple();
+    purpleStop();
+    white();
 }
 
 // 注册自定义节点

src/views/WindSite/pages/BoosterStation.vue

@@ -1,123 +1,152 @@
 <template>
-    <div class="booster-station">
-        <div class="btn-group-tabs">
-            <BtnGroup2
-                :btnGroups="btnGroups"
-                :rowIndex="0"
-                :index="1"
-                @select="select"
-            ></BtnGroup2>
-        </div>
-        <bsx6 class="booster-station-body"></bsx6>
+  <div class="booster-station">
+    <div class="btn-group-tabs">
+      <BtnGroup2
+        :btnGroups="btnGroups"
+        :rowIndex="rowIndex"
+        :index="selectIndex"
+        @select="select"
+      ></BtnGroup2>
     </div>
+    <!-- <bsx6 class="booster-station-body"></bsx6> -->
+    <BoosterMCH class="booster-station-body"></BoosterMCH>
+  </div>
 </template>
 
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
-import bsx6 from "../components/bsx6.vue";
+// import bsx6 from "../components/bsx6.vue";
+import BoosterMCH from "../components/boosterstation/mch/mch.vue";
+
 export default {
-    // 名称
-    name: "BoosterStation",
-    // 使用组件
-    components: {
-        bsx6,
-        BtnGroup2,
-    },
-    // 数据
-    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() {
-        // 创建后
+  // 名称
+  name: "BoosterStation",
+  // 使用组件
+  components: {
+    // bsx6,
+    BtnGroup2,
+    BoosterMCH,
+  },
+  // 数据
+  data() {
+    return {
+      wpId: undefined,
+      selectIndex: 0,
+      rowIndex: 0,
+      btnGroups: [
+        {
+          icon: "svg-wind-site",
+          btns: [],
+        },
+        {
+          icon: "svg-photovoltaic",
+          btns: [],
+        },
+      ],
+    };
+  },
+  created() {
+    let that = this;
+    that.wpId = that.$route.params.wpId;
+    that.$nextTick(() => {
+      that.getWp();
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/boosterstation/${res.code}`,
+      });
     },
-    beforeMount() {
-        // 渲染前
-    },
-    mounted() {
-        // 渲染后
+    getWp() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success(res) {
+          let btnGroup = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
+
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroup[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            } else {
+              btnGroup[1].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            }
+          });
+
+          that.btnGroups = btnGroup;
+          that.renderBtnActiveIndex();
+        },
+      });
     },
-    beforeUpdate() {
-        // 数据更新前
+    renderBtnActiveIndex() {
+      this.btnGroups.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
     },
-    updated() {
-        // 数据更新后
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+  watch: {
+    $route(res) {
+      this.wpId = res.params.wpId;
+      if (res.params.wpId) {
+        this.renderBtnActiveIndex();
+      }
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .booster-station {
-    width: 100%;
-    height: calc(100vh - 90px);
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
 
-    .btn-group-tabs {
-        display: flex;
-        flex-direction: row;
-    }
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
 
-    .booster-station-body {
-        flex-grow: 1;
-    }
+  .booster-station-body {
+    flex-grow: 1;
+  }
 }
 </style>

src/views/WindSite/pages/DraughtFanList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="draught-fan-list">
     <div class="btn-group-tabs">
-      <!-- <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2> -->
+        <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
     </div>
     <div class="df-table">
       <ComTable :data="data"></ComTable>
@@ -23,7 +23,7 @@ export default {
   // 数据
   data() {
     return {
-      btnGroups: [
+      btnGroupsss: [
         {
           icon: "fa fa-fire",
           btns: [
@@ -77,25 +77,25 @@ export default {
             name: "风机名称",
             field: "code",
             is_num: false,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "冷却风温度",
             field: "FDJLQFWD",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "有功功率",
             field: "FJGL",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "液压油温度",
             field: "YYYW",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "Pcspp温度",
@@ -216,11 +216,67 @@ export default {
         },
       });
     },
+    getWp () {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success (res) {
+          let btnGroups = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
+
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroups[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            } else {
+              btnGroups[1].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            }
+          });
+
+          that.btnGroupsss = btnGroups;
+          that.renderBtnActiveIndex();
+        },
+      });
+    },
+
+    renderBtnActiveIndex () {
+      this.btnGroupsss.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
+    },
+
+    select (res) {
+      debugger;
+      this.$router.replace({
+        path: `/monitor/windsite/draughtfanlist/${res.code}`,
+      });
+    },
+
   },
 
   created() {
     let that = this;
     that.wpId = that.$route.params.wpId;
+     that.getWp();
     that.$nextTick(() => {
       that.requestData(false);
       that.timmer = setInterval(() => {
@@ -234,8 +290,17 @@ export default {
   unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
+  },  watch: {
+    $route (res) {
+      this.wpId = res.params.wpId;
+      if (res.params.wpId) {
+        this.requestData(false);
+        this.renderBtnActiveIndex();
+      }
+    },
   },
 };
+
 </script>
 
 <style lang="less">
@@ -245,14 +310,10 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
+.btn-group-tabs {
+  display: flex;
+  flex-direction: row;
+}
 
   .df-table {
     border: 0.093vh solid fade(@darkgray, 50%);

src/views/WindSite/pages/GeneralAppearance.vue

@@ -1,217 +1,243 @@
 <template>
-    <div class="general-appearance">
-        <div class="btn-group-tabs">
-            <BtnGroup2
-                :btnGroups="btnGroups"
-                :rowIndex="0"
-                :index="1"
-                @select="select"
-            ></BtnGroup2>
+  <div class="general-appearance">
+    <div class="btn-group-tabs">
+      <BtnGroup2
+        :btnGroups="btnGroups"
+        :rowIndex="rowIndex"
+        :index="selectIndex"
+        @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">{{wpnumMap.jrts}}</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">{{wpnumMap.djts}}</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">{{wpnumMap.yxts}}</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">{{wpnumMap.xdts}}</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">{{wpnumMap.gzts}}</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">{{wpnumMap.whts}}</span>
         </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 class="sub-title-item">
+          <img src="../../../assets/map/fan/black.png" />
+          <span class="sub-title gray">离线台数</span>
+          <span class="sub-count font-num gray">{{wpnumMap.lxts}}</span>
         </div>
-        <gax6 class="general-appearance-body"></gax6>
+      </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,
+  // 名称
+  name: "GeneralAppearance",
+  // 使用组件
+  components: {
+    gax6,
+    BtnGroup2,
+  },
+  // 数据
+  data() {
+    return {
+      timmer: undefined,
+      wpId: undefined, //场站
+      wpnumMap: {}, //风机监视数量
+      selectIndex: 0,
+      rowIndex: 0,
+      btnGroups: [
+        {
+          icon: "svg-wind-site",
+          btns: [],
+        },
+        {
+          icon: "svg-photovoltaic",
+          btns: [],
+        },
+      ],
+    };
+  },
+  created() {
+    let that = this;
+    that.wpId = that.$route.params.wpId;
+    that.$nextTick(() => {
+      that.getWp();
+      that.requestData();
+      that.timmer = setInterval(() => {
+        that.requestData();
+      }, that.$store.state.websocketTimeSec);
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/generalappearance/${res.code}`,
+      });
     },
-    // 数据
-    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() {
-        // 渲染前
+    getWp() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success(res) {
+          let btnGroup = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
+
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroup[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            } else {
+              btnGroup[1].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            }
+          });
+
+          that.btnGroups = btnGroup;
+          that.renderBtnActiveIndex();
+        },
+      });
     },
-    mounted() {
-        // 渲染后
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitor/findGeneralAppearance",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          if (res.code == 200) that.wpnumMap = res.data.fczbmap.jczbmap;
+        },
+      });
     },
-    beforeUpdate() {
-        // 数据更新前
+    renderBtnActiveIndex() {
+      this.btnGroups.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
     },
-    updated() {
-        // 数据更新后
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  watch: {
+    $route(res) {
+      this.wpId = res.params.wpId;
+      if (res.params.wpId) {
+        this.requestData();
+        this.renderBtnActiveIndex();
+      }
     },
+  },
 };
 </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%;
-    height: calc(100vh - 90px);
+    background-color: fade(@darkgray, 40%);
+    margin-top: 1.481vh;
+    padding: 6px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
 
-    .btn-group-tabs {
-        display: flex;
-        flex-direction: row;
-    }
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
 
-    .general-appearance-body {
-        flex-grow: 1;
+      i,
+      span {
+        margin: 0 0 0 1.481vh;
+        line-height: 0;
+        font-size: 13px;
+      }
     }
 
-    .panel-title {
-        width: 100%;
-        background-color: fade(@darkgray, 40%);
-        margin-top: 1.481vh;
-        padding: 6px;
-        display: flex;
-        align-items: center;
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
 
-        .panel-title-name {
-            color: @green;
-            display: flex;
-            align-items: center;
-            line-height: 0;
-            font-size: 0;
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
 
-            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;
+      }
 
-            .sub-count {
-                font-size: 13px;
-                font-weight: 500;
-            }
-            
-            img {
-                height: 31px;
-            }
-        }
+      img {
+        height: 31px;
+      }
     }
+  }
 }
 </style>

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

@@ -428,9 +428,7 @@ export default {
     // 请求服务
     requestData (showLoading) {
       this.requestWpInfo(showLoading);
-      this.requestLoss(showLoading);
-      this.requestPower(showLoading);
-      this.requestMonthPower(showLoading);
+
     },
 
     // 获取场站监视数据
@@ -697,6 +695,9 @@ export default {
     that.$nextTick(() => {
       that.getWp();
       that.requestData(false);
+       that.requestLoss(false);
+      that.requestPower(false);
+      that.requestMonthPower(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);