V1.0.17版本更新

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/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/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

@@ -26,11 +26,7 @@
     import "@arcgis/core/assets/esri/themes/light/main.css";
 
     const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/nxmap/MapServer"; // ArcMap地址
-<<<<<<< HEAD
-    // const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
-=======
     // const mapUrl = "http://172.16.6.30:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
->>>>>>> 84b3bdb1c8b5dee538537f2bc2e6fd922c5d99a0
     let basemap = null;
     let map = null;
     let view = null;

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/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/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/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

@@ -18,12 +18,12 @@
             @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>
 
@@ -70,6 +70,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
     canScroll: {
       type: Boolean,
       default: true,
@@ -82,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: {
@@ -172,7 +187,7 @@ export default {
     hover(row, col) {
       if (this.showHover) {
         this.hoverRow = row;
-        this.hoverCol = col;
+        if (this.showColHover) this.hoverCol = col;
       }
     },
     leave() {
@@ -207,105 +222,4 @@ export default {
 };
 </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>
+<style lang="less"></style>

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/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/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>
 
@@ -178,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;
@@ -195,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/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

@@ -812,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/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/HealthDay.vue

@@ -0,0 +1,546 @@
+<template>
+	<div class="decision-page-2">
+		<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="value2" @change="MoKuaiChange(value2)" multiple placeholder="请选择"
+							popper-class="select">
+							<el-option v-for="item in MoKuai" :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="value1" @change="ChangZhanChange(value1)" multiple 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-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>
+			<div class="query-actions">
+				<button class="btn" @click="dbfx">对比</button>
+			</div>
+		</div>
+
+		<div class="mg-b-16">
+			<div class="project-table">
+				<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
+			</div>
+		</div>
+		<el-dialog title="对标排名分析" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
+			:close-on-click-modal="false">
+			<dayinfo :radarValue="radarValue" :windNum="windNum" :windNum2="windNum2" :tabs="tabs"
+				:analyisDialog="analyisDialog" />
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	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 Dayinfo from "./dayinfo.vue";
+	export default {
+		components: {
+			Panel,
+			Table,
+			SvgIcon,
+			Dayinfo
+		},
+		data() {
+			let that = this;
+			return {
+				tableIdArr: [], //放checkbox的id数组
+				tableId: [],
+				checkLength: 0, //对标分析只能选择2个
+				tableData: {
+					column: [{
+							name: "",
+							field: "index",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "",
+							field: "check",
+							is_num: false,
+							is_light: false,
+							template:() => {
+								return "<input class='check curCheckBox' type='CheckBox' />";
+							},
+							click: function(event, data) {
+								var dataId = that.tableIdArr[data.index - 1];
+								if (event.target.checked == false && that.checkLength <= 2) {
+									that.tableId.forEach((item, i) => {
+										if (item == dataId) {
+											that.tableId.splice(i, 1)
+										}
+									})
+									that.checkLength--;
+								} else if (event.target.checked && that.checkLength < 2) {
+									that.tableId.push(dataId)
+									that.checkLength++;
+								} else if (that.checkLength == 2) {
+									event.target.checked = false;
+								}
+							},
+						},
+						{
+							name: "风机编号",
+							field: "name",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "等级",
+							field: "dj",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "综合排名",
+							field: "zhpm",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "发电量",
+							field: "fdl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "理论发电量",
+							field: "llfdl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "平均风速",
+							field: "pjfs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "平均功率",
+							field: "pjgl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "故障损失电量",
+							field: "gzssdl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "限电损失电量",
+							field: "xdssdl",
+							is_num: false,
+							is_light: true,
+							sortable: true,
+						},
+						{
+							name: "维护损失电量",
+							field: "whssdl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "性能损失电量",
+							field: "xnssdl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "利用小时数",
+							field: "lyxss",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "拟合优度",
+							field: "nhyd",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "设备可利用率",
+							field: "sbklyl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "等效可用系数",
+							field: "dxkyxs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "有效风时数",
+							field: "yxfss",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},{
+							name: "平均切入风速",
+							field: "pjqrfs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "静风频率",
+							field: "jfpl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}, {
+							name: "功率一致性系数",
+							field: "glyzxxs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						}
+					],
+					data: [],
+				},
+				ChangZhan: [], //场站
+				MoKuai: [], //项目
+				value1: [],
+				value2: [],
+				value3: "",
+				dialogVisible: false,
+				radarValue: [],
+				windNum: 'dd',
+				windNum2: 'dd',
+				tabs: [],
+				analyisDialog: [],
+				ajaxData:[],
+			};
+		},
+		created() {
+			this.ChangZhanVal();
+			this.value3 = this.getTime(1);
+			this.AjaxCommon();
+			this.MoKuaiVal();
+		},
+		methods: {
+			MoKuaiVal(val) {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL : "10.155.32.4:8034",
+					subUrl: "evaluation/modelMainList",
+					success(res) {
+						console.log(JSON.stringify(res))
+						that.MoKuai = res.data;
+					}
+				});
+			},
+			MoKuaiChange(val) {
+				this.value2 = val;
+				this.value3 = [];
+				this.AjaxCommon();
+				this.XianLuVal(val);
+				this.clearDb();
+			},
+			ChangZhanVal() {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL : "10.155.32.4:8034",
+					subUrl: "evaluation/wplist",
+					success(res) {
+						that.ChangZhan = res.data;
+					}
+				});
+			},
+			ChangZhanChange(val) {
+				this.value1 = val;
+				this.value2 = [];
+				this.value3 = [];
+				this.AjaxCommon();
+				this.MoKuaiVal(val);
+				this.clearDb();
+			},
+			BeginChange(val) {
+				this.value4 = val;
+				this.AjaxCommon();
+				this.clearDb();
+			},
+			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 : "10.155.32.4:8034",
+					subUrl: "evaluation/wxssl",
+					data: {
+						wpids: that.value1,
+						projectids: that.value2,
+						lineids: that.value3,
+						beginDate: that.value4,
+						endDate: that.value5,
+						target: '',
+						sort: ''
+					},
+					success(res) {
+						that.ajaxData = res.data;
+						var dataTab = []; //表格
+						res.data.forEach((item, index) => {
+							that.tableIdArr.push(item.id);
+							dataTab.push({ //表格
+								index: index + 1,
+								name: item.name,
+								dj: item.dj,
+								zhpm: item.zhpm,
+								fdl: item.fdl,
+								llfdl: item.llfdl,
+								pjfs: item.gzssdl,
+								pjgl: item.pjgl,
+								gzssdl: item.gzssdl,
+								lyxss: item.lyxss,
+								whssdl: item.whssdl,
+								xnssdl: item.xnssdl,
+								lyxss: item.lyxss,
+								nhyd: item.nhyd,
+								sbklyl: item.sbklyl,
+								dxkyxs: item.dxkyxs,
+								yxfss: item.yxfss,
+								pjqrfs: item.pjqrfs,
+								jfpl: item.jfpl,
+								glyzxxs: item.glyzxxs,
+								jxssl: item.jxssl,
+								qflpm: item.qflpm,
+								qfl: item.qfl,
+								xnsslpm: item.xnsslpm,
+								xnssl: item.xnssl,
+								slsslpm: item.slsslpm,
+								slssl: item.slssl,
+								is_light: false
+							})
+
+						})
+						that.tableData.data = dataTab;
+					}
+				});
+			},
+			AjaxDbfx() {
+				var that = this;
+				var data = that.ajaxData;
+				that.windNum = data[0].name;
+				that.windNum2 = data[1].name;
+				that.tabs = [{
+					name: "发电量",
+					windData1: data[0].fdl,
+					windData2: data[1].fdl
+				}, {
+					name: "故障损失电量",
+					windData1: data[0].gzssdl,
+					windData2: data[1].gzssdl
+				}, {
+					name: "检修损失电量",
+					windData1: data[0].jxssdl,
+					windData2: data[1].jxssdl
+				}, {
+					name: "性能未达标损失电量",
+					windData1: data[0].xnssdl,
+					windData2: data[1].xnssdl
+				}, {
+					name: "受累损失电量",
+					windData1: data[0].slssdl,
+					windData2: data[1].slssdl
+				}, {
+					name: "风能利用率",
+					windData1: data[0].fnlyl,
+					windData2: data[1].fnlyl
+				}, {
+					name: "故障损失率",
+					windData1: data[0].gzssl,
+					windData2: data[1].gzssl
+				}, {
+					name: "检修损失率",
+					windData1: data[0].jxssl,
+					windData2: data[1].jxssl
+				}, {
+					name: "弃风率",
+					windData1: data[0].qfl,
+					windData2: data[1].qfl
+				}, {
+					name: "性能损失率",
+					windData1: data[0].xnssl,
+					windData2: data[1].xnssl
+				}, {
+					name: "受累损失率",
+					windData1: data[0].slssl,
+					windData2: data[1].slssl
+				}];
+				
+				that.radarValue = [{
+					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率"],
+					data: [{
+						value: [data[0].fnlylpm, data[0].gzsslpm, data[0].jxsslpm, data[0].qflpm,
+							data[0].xnsslpm, data[0].slsslpm
+						]
+					}, {
+						value: [data[1].fnlylpm, data[1].gzsslpm, data[1].jxsslpm, data[1].qflpm,
+							data[1].xnsslpm, data[1].slsslpm
+						]
+					}]
+				}];
+				
+				var analyis = [],
+					gzssdl = [],
+					jxssdl = [],
+					xnssdl = [],
+					xdssdl = [],
+					slssdl = [];
+				data.forEach((item, index) => {
+					gzssdl.push({
+						text: item.name,
+						value: item.gzssdl
+					});
+					jxssdl.push({
+						text: item.name,
+						value: item.jxssdl
+					});
+					xnssdl.push({
+						text: item.name,
+						value: item.xnssdl
+					});
+					xdssdl.push({
+						text: item.name,
+						value: item.xdssdl
+					});
+					slssdl.push({
+						text: item.name,
+						value: item.slssdl
+					});
+				})
+				analyis.push({
+					title: "故障损失电量",
+					yAxisIndex: 0,
+					value: gzssdl
+				}, {
+					title: "检修损失电量",
+					yAxisIndex: 0,
+					value: jxssdl
+				}, {
+					title: "性能损失电量",
+					yAxisIndex: 0,
+					value: xnssdl
+				}, {
+					title: "限电损失电量",
+					yAxisIndex: 0,
+					value: xdssdl
+				}, {
+					title: "受累损失电量",
+					yAxisIndex: 0,
+					value: slssdl
+				})
+				that.analyisDialog = analyis;
+				
+			},
+			tooltip(param, callback) {
+				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+
+				var result = param[0].axisValue;
+				param.forEach((value, index) => {
+					result += "<br />" +
+						`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
+						value.seriesName + "：" + value.value;
+				});
+				callback(result);
+				return true;
+			},
+			dbfx() {
+				var that = this;
+				if (that.tableId.length == 2) {
+					that.dialogVisible = true;
+					this.AjaxDbfx();
+					this.clearDb();
+				}
+			},
+			clearDb(){//清空对标状态
+				this.$refs.curRef.clearCheckBox();
+				this.tableId = [];
+				this.checkLength = 0;
+			}
+		}
+	};
+</script>
+
+<style lang="less">
+	.decision-page-2 {
+		.content .project-table {
+			tbody {
+				height: calc(100vh - 24.5vh);
+			}
+		}
+
+		.project-table {
+			overflow: auto;
+
+			tbody {
+				height: 279px;
+			}
+
+			th,
+			td {
+				color: #b2bdc0;
+
+				&:nth-child(1) {
+					width: 50px;
+				}
+
+				&:nth-child(2) {
+					width: 50px;
+				}
+			}
+		}
+
+		.action {
+			text-decoration: underline;
+			color: @green;
+			cursor: pointer;
+		}
+	}
+</style>

src/views/HealthControl/HealthMonth.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/HealthControl/HealthYear.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

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/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

@@ -408,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;
@@ -695,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;
@@ -712,7 +712,7 @@ export default {
 
         .sub-title-item {
           display: flex;
-          flex: 1;
+          flex: 0 0 110px;
 
           .sub-title {
             flex: 0 0 auto;
@@ -773,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/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/pages/Home/wind-site-weather.vue

@@ -11,8 +11,8 @@
           <div class="temperature">{{ sourceMap.wd }} °</div>
           <div class="other">
             <div>{{ sourceMap.tqmc }}</div>
-            <div>{{ sourceMap.fx }}</div>
-            <div>{{ sourceMap.fs }}</div>
+            <span>{{ sourceMap.fx }}</span>
+            <span>{{ sourceMap.fs }}</span>
           </div>
         </div>
       </div>

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

@@ -14,7 +14,7 @@
       <div class="info-menu mg-b-16">
         <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
-      <el-row>
+      <el-row style="height: calc(100% - 45px);">
         <el-col :span="16" style="position:relative;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->

src/views/WindSite/pages/Tower.vue

@@ -9,7 +9,7 @@
         <WindTower :data="cftmap"></WindTower>
         <dash-pie-chart class="pie-left" title="空气密度" :value="cftmap.KQMD || 0" height="9.722vh" width="9.722vh" />
         <dash-pie-chart class="pie-right" title="压强" :value="cftmap.FCCFTYQ || 0" height="9.722vh" width="9.722vh" />
-        <Panel class="panel-top" title="日资源玫瑰图">
+        <Panel class="panel-top" title="日资源玫瑰图" :bgBlur="true">
             <div class="direction-chart">
                 <DirectionRadarChart width="100%" height="23vh" :value="rmgtmap" />
                 <div class="legend">
@@ -18,7 +18,7 @@
                 </div>
             </div>
         </Panel>
-        <Panel class="panel-bottom" title="月资源玫瑰图">
+        <Panel class="panel-bottom" title="月资源玫瑰图" :bgBlur="true">
             <div class="direction-chart">
                 <DirectionRadarChart width="100%" height="23vh" :value="ymgtmap" />
                 <div class="legend">
@@ -29,7 +29,7 @@
         </Panel>
       <toolbar-panel class="rose-chart" title="功率曲线">
             <template v-slot:tools>
-                <div class="tools">
+                <!--<div class="tools">
                     <div class="tool-block">
                         <div class="legend bg-green"></div>
                         <div class="legend-text">应发功率</div>
@@ -54,11 +54,11 @@
                         <div class="legend bg-pink"></div>
                         <div class="legend-text">风速</div>
                     </div>
-                </div>
+                </div>-->
             </template> 
             <template v-slot:default>
                 <!-- 日发电量 -->
-                <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" />
+                <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" :showLegend="true" />
             </template>
         </toolbar-panel>
     </div>

src/views/layout/Menu.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="menu">
     <ul class="menu-list">
-      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }"
-        @mouseenter="subMenuShow(menu.children, index)">
-        <router-link v-if="!menu.children" :to="menu.path">
-          <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
+      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
+        <router-link :to="menu.path">
+          <el-tooltip class="item" effect="dark" :content="menu.text" placement="bottom" :show-after="500">
             <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
               <SvgIcon :svgid="menu.icon"></SvgIcon>
             </div>
           </el-tooltip>
         </router-link>
-        <div v-if="menu.children" class="sub-menu-item">
+        <!-- <div v-if="menu.children" class="sub-menu-item">
           <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
             <SvgIcon :svgid="menu.icon"></SvgIcon>
           </div>
-        </div>
+        </div> -->
       </li>
     </ul>
   </div>