初始化

package-lock.json

@@ -1226,6 +1226,11 @@
         "@types/node": "*"
       }
     },
+    "@types/component-emitter": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npm.taobao.org/@types/component-emitter/download/@types/component-emitter-1.2.10.tgz?cache=0&sync_timestamp=1605053057317&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fcomponent-emitter%2Fdownload%2F%40types%2Fcomponent-emitter-1.2.10.tgz",
+      "integrity": "sha1-71sVibnxZURkLkc9tepWORB+8+o="
+    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npm.taobao.org/@types/connect/download/@types/connect-3.4.34.tgz?cache=0&sync_timestamp=1607458722751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fconnect%2Fdownload%2F%40types%2Fconnect-3.4.34.tgz",
@@ -1301,8 +1306,7 @@
     "@types/json-schema": {
       "version": "7.0.7",
       "resolved": "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.7.tgz?cache=0&sync_timestamp=1611096164561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.7.tgz",
-      "integrity": "sha1-mKmTUWyFnrDVxMjwmDF6nqaNua0=",
-      "dev": true
+      "integrity": "sha1-mKmTUWyFnrDVxMjwmDF6nqaNua0="
     },
     "@types/mime": {
       "version": "1.3.2",
@@ -2130,7 +2134,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1609583891415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
       "integrity": "sha1-uvWmLoArB9l3A0WG+MO69a3ybfQ=",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2147,8 +2150,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1608062556009&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
-      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -2458,6 +2460,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/backo2/download/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2519,6 +2526,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz",
@@ -2555,8 +2567,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -3456,8 +3467,7 @@
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
-      "integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=",
-      "dev": true
+      "integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A="
     },
     "compressible": {
       "version": "2.0.18",
@@ -3587,6 +3597,14 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/copy-anything/download/copy-anything-2.0.1.tgz",
+      "integrity": "sha1-KvvObaaEvfy+yTdS+nYoGctIDZo=",
+      "requires": {
+        "is-what": "^3.7.1"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/copy-concurrently/download/copy-concurrently-1.0.5.tgz",
@@ -4129,7 +4147,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npm.taobao.org/debug/download/debug-4.3.1.tgz?cache=0&sync_timestamp=1607566551397&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.3.1.tgz",
       "integrity": "sha1-8NIpxQXgxtjEmsVT0bE9wYP2su4=",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -4605,6 +4622,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.2.1.tgz?cache=0&sync_timestamp=1610775915726&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.2.1.tgz",
+      "integrity": "sha1-mo6jsDNU+G+CTZdiXDNM8Wll7wM=",
+      "requires": {
+        "zrender": "4.0.7"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -4661,8 +4686,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -4679,6 +4703,38 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npm.taobao.org/engine.io-client/download/engine.io-client-4.1.0.tgz",
+      "integrity": "sha1-3OGb5u4exEQMWStF9vXO8orLSz8=",
+      "requires": {
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.1",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "xmlhttprequest-ssl": "~1.5.4",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.4.2",
+          "resolved": "https://registry.npm.taobao.org/ws/download/ws-7.4.2.tgz?cache=0&sync_timestamp=1609271380166&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fws%2Fdownload%2Fws-7.4.2.tgz",
+          "integrity": "sha1-eCEABI5U6zb+mEM2OrHGhnKyYd0="
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npm.taobao.org/engine.io-parser/download/engine.io-parser-4.0.2.tgz?cache=0&sync_timestamp=1607330889673&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fengine.io-parser%2Fdownload%2Fengine.io-parser-4.0.2.tgz",
+      "integrity": "sha1-5B0LP7Zve/SjZx0gOKFUAk7bUB4=",
+      "requires": {
+        "base64-arraybuffer": "0.1.4"
+      }
+    },
     "enhanced-resolve": {
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/enhanced-resolve/download/enhanced-resolve-4.5.0.tgz?cache=0&sync_timestamp=1610568624565&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fenhanced-resolve%2Fdownload%2Fenhanced-resolve-4.5.0.tgz",
@@ -4712,7 +4768,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/errno/download/errno-0.1.8.tgz",
       "integrity": "sha1-i7Ppx9Rjvkl2/4iPdrSAnrwugR8=",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -5290,8 +5345,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5333,8 +5387,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
-      "dev": true
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -5745,8 +5798,7 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz",
-      "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=",
-      "dev": true
+      "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs="
     },
     "gzip-size": {
       "version": "5.1.1",
@@ -5806,6 +5858,11 @@
         }
       }
     },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/has-cors/download/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
@@ -6175,7 +6232,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.24.tgz?cache=0&sync_timestamp=1594184325364&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficonv-lite%2Fdownload%2Ficonv-lite-0.4.24.tgz",
       "integrity": "sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -6207,6 +6263,12 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -6792,6 +6854,11 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-what": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npm.taobao.org/is-what/download/is-what-3.12.0.tgz?cache=0&sync_timestamp=1605079638099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-what%2Fdownload%2Fis-what-3.12.0.tgz",
+      "integrity": "sha1-9EBc5L1t1CDTztUaAm+5DgNwXlU="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz",
@@ -6925,8 +6992,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz?cache=0&sync_timestamp=1608000211395&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson-schema-traverse%2Fdownload%2Fjson-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6950,7 +7016,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz",
       "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -6988,6 +7053,11 @@
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz?cache=0&sync_timestamp=1600227034624&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fklona%2Fdownload%2Fklona-2.0.4.tgz",
+      "integrity": "sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A="
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/launch-editor/download/launch-editor-2.2.1.tgz",
@@ -7007,6 +7077,79 @@
         "launch-editor": "^2.2.1"
       }
     },
+    "less": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npm.taobao.org/less/download/less-4.1.0.tgz?cache=0&sync_timestamp=1610244750587&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless%2Fdownload%2Fless-4.1.0.tgz",
+      "integrity": "sha1-oScI0ZUSOdscnX6qQF8eusmnW40=",
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz",
+          "integrity": "sha1-XwMQ4YuL6JjMBwCSlaMK5B6R5vU=",
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1610756322518&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-1.6.0.tgz",
+          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-7.3.0.tgz",
+      "integrity": "sha1-+dbTbRhznWQgZ6Bftb1wyMYTF+U=",
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz?cache=0&sync_timestamp=1601922251376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-3.0.0.tgz",
+          "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
@@ -7530,8 +7673,7 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597336147792&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz",
-      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
-      "dev": true
+      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -7892,8 +8034,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
-      "dev": true
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
     "minipass": {
       "version": "3.1.3",
@@ -8004,8 +8145,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433856030&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
-      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
-      "dev": true
+      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -8072,6 +8212,28 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "needle": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npm.taobao.org/needle/download/needle-2.6.0.tgz",
+      "integrity": "sha1-JNu1XyUJ4jJLSpnWH0E5ggE8zb4=",
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.2.7.tgz?cache=0&sync_timestamp=1607566551397&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.7.tgz",
+          "integrity": "sha1-clgLfpFF+zm2Z2+cXl+xALk0F5o=",
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
@@ -8584,6 +8746,11 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/parse-node-version/download/parse-node-version-1.0.1.tgz",
+      "integrity": "sha1-4rXb7eAOf6m8NjYH9TMn6LBzGJs="
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz",
@@ -8607,6 +8774,16 @@
         }
       }
     },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npm.taobao.org/parseqs/download/parseqs-0.0.6.tgz",
+      "integrity": "sha1-jku1oZ0c3IRKCKyXTTTic6+mcNU="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npm.taobao.org/parseuri/download/parseuri-0.0.6.tgz",
+      "integrity": "sha1-4Ulugp46wv9H85pN0ESzKCPEolo="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
@@ -8712,8 +8889,7 @@
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/pify/download/pify-4.0.1.tgz",
-      "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE=",
-      "dev": true
+      "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -9436,8 +9612,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/prr/download/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -9509,8 +9684,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.5.1",
@@ -9819,6 +9993,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.1.10.tgz",
+      "integrity": "sha1-HaP5YapfkUzLz9N1LVL9Rb7raSw="
+    },
     "resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.19.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.19.0.tgz",
@@ -9957,14 +10136,12 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
-      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
-      "dev": true
+      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
-      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk=",
-      "dev": true
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "schema-utils": {
       "version": "2.7.1",
@@ -9995,8 +10172,7 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npm.taobao.org/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1606851912015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz",
-      "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
-      "dev": true
+      "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc="
     },
     "semver-compare": {
       "version": "1.0.0",
@@ -10375,6 +10551,30 @@
         }
       }
     },
+    "socket.io-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/socket.io-client/download/socket.io-client-3.1.0.tgz?cache=0&sync_timestamp=1610673431944&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsocket.io-client%2Fdownload%2Fsocket.io-client-3.1.0.tgz",
+      "integrity": "sha1-2jkCyAoCoWz1d2nF4/nUyyeLblY=",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "backo2": "~1.0.2",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-client": "~4.1.0",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npm.taobao.org/socket.io-parser/download/socket.io-parser-4.0.4.tgz?cache=0&sync_timestamp=1610669809014&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsocket.io-parser%2Fdownload%2Fsocket.io-parser-4.0.4.tgz",
+      "integrity": "sha1-nqIbDWFQjRgZbvBKLGuatjD0wrA=",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.21",
       "resolved": "https://registry.npm.taobao.org/sockjs/download/sockjs-0.3.21.tgz",
@@ -11181,8 +11381,7 @@
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887512458&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz",
-      "integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=",
-      "dev": true
+      "integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA="
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -11404,7 +11603,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.4.1.tgz?cache=0&sync_timestamp=1610237530009&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furi-js%2Fdownload%2Furi-js-4.4.1.tgz",
       "integrity": "sha1-mxpSWVIlhZ5V9mnZKPiMbFfyp34=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -11584,6 +11782,21 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1609359858533&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",
+      "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M="
+    },
+    "vue-echarts": {
+      "version": "5.0.0-beta.0",
+      "resolved": "https://registry.npm.taobao.org/vue-echarts/download/vue-echarts-5.0.0-beta.0.tgz",
+      "integrity": "sha1-Q43UsPxczqKBcJwffGMhsFNSvfQ=",
+      "requires": {
+        "core-js": "^3.4.4",
+        "lodash": "^4.17.15",
+        "resize-detector": "^0.1.10"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.4.1",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.4.1.tgz?cache=0&sync_timestamp=1611231583255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.4.1.tgz",
@@ -12495,6 +12708,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xmlhttprequest-ssl": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npm.taobao.org/xmlhttprequest-ssl/download/xmlhttprequest-ssl-1.5.5.tgz",
+      "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",
@@ -12553,6 +12771,11 @@
       "integrity": "sha1-tCiQ8UVmeW+Fro46JSkNIF8VSlQ=",
       "dev": true
     },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npm.taobao.org/yeast/download/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "yorkie": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz",
@@ -12620,6 +12843,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.0.7.tgz?cache=0&sync_timestamp=1610460198160&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-4.0.7.tgz",
+      "integrity": "sha1-Fa6WCCL17+1BCZXTflEH/j3hDm0="
     }
   }
 }

package.json

@@ -9,7 +9,13 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "echarts": "4.2.1",
+    "less": "^4.1.0",
+    "less-loader": "^7.3.0",
+    "socket.io-client": "^3.1.0",
+    "vue": "^2.6.11",
+    "vue-count-to": "^1.0.13",
+    "vue-echarts": "^5.0.0-beta.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

public/index.html

@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>数据看板</title>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -1,28 +1,526 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<template>
+    <div id="app">
+        <div class="header">
+            <div class="logo">
+
+            </div>
+            <div class="title">
+                中德线上销售业务实时数据
+            </div>
+            <div class="date">
+                {{date}}
+            </div>
+        </div>
+
+        <div class="content">
+            <div class="column1">
+                <div class="row1">
+                    <slot-temp>
+                        <div class="shop">
+                            京东旗舰店
+                        </div>
+                        <div class="echarts">
+                            <div class="echarts1">
+                                <vue-chart 
+                                    style="width: 100%;height: 100%;"
+                                    autoresize
+                                    :options="JDProMonth"
+                                />
+                                <div class="money">
+                                    <div>
+                                        {{JDProMonthTarget}}
+                                   
+                                    </div>
+                                    <div>万</div>
+                                </div>
+                                <Label label="本月销售目标" text-color="#09ACEA" back-color="#0062EF"/>
+                                <Label :label="`已完成: ${JDProMonthRate} ${JDProMonthSell}万`" text-color="#09ACEA" back-color="#FF0382"/>
+                            </div>
+                            <div class="echarts1">
+                                <vue-chart 
+                                style="width: 100%;height: 100%;"
+                                autoresize
+                                :options="JDProYear"
+                                />
+                                <div class="money">
+                                    <div>{{JDProYearTarget}}</div>
+                                    <div>万</div>
+                                </div>
+                                <Label label="本年销售目标" text-color="#09ACEA" back-color="#033188"/>
+                                <Label :label="`已完成: ${JDProYearRate} ${JDProYearSell}万`" text-color="#09ACEA" back-color="#009DEF" />
+                            </div>
+                        </div>
+                    </slot-temp>
+                </div>
+                <div class="row2">
+                    <slot-temp>
+                        <div class="shop">
+                              京东自营店
+                        </div>
+                        <div class="echarts">
+                            <div class="echarts1">
+                                <vue-chart 
+                                style="width: 100%;height: 100%;"
+                                autoresize
+                                :options="JDSelfMonth"
+                                />
+                                <div class="money">
+                                    <div>{{JDSelfMonthTarget}}</div>
+                                    <div>万</div>
+                                </div>
+                                <Label label="本月销售目标" text-color="#09ACEA" back-color="#FF0382" />
+                                <Label :label="`已完成: ${JDSelfMonthRate} ${JDSelfMonthSell}万`" text-color="#09ACEA" back-color="#0062EF"/>
+                            </div>
+                            <div class="echarts1">
+                                <vue-chart 
+                                style="width: 100%;height: 100%;"
+                                autoresize
+                                :options="JDProYear"
+                                />
+                                <div class="money">
+                                    <div>{{JDSelfYearTarget}}</div>
+                                    <div>万</div>
+                                </div>
+                                <Label label="本年销售目标" text-color="#09ACEA" back-color="#009DEF"/>
+                                <Label :label="`已完成: ${JDSelfYearRate} ${JDSelfYearSell}万`" text-color="#09ACEA" back-color="#033188"/>
+                            </div>
+                        </div>
+                    </slot-temp>
+                </div>
+                <div class="row3">
+                    <slot-temp>
+                        <div class="shop">
+                            天猫旗舰店
+                        </div>
+                        <div class="echarts">
+                            <div class="echarts1">
+                                <div class="columnar">
+                                    <div class="month">
+                                        <div class="label">
+                                            本月
+                                        </div>
+                                        <img style="width: 0.56vw; height: 2.6vh; object-fit: contain" :src="require('@/assets/rect.png')" alt="">
+                                        <div class="columnar-perture">
+                                            <div class="columnar-perture-box">
+                                                <div class="top-line" :style="{width: (TMMonthSell / TMMonthTarget) * 12.62 + 'vw'}" />
+                                                <div class="price">{{TMMonthSell + '万'   }}</div>
+                                            </div>
+                                            
+                                            <div class="columnar-perture-box">
+                                                 <div class="bottom-line" />
+                                                 <div class="price"> {{TMMonthTarget + '万'   }} </div>
+                                            </div>
+                                           
+                                        </div>
+                                    </div>
+                                    <div class="year">
+                                        <div class="label">
+                                            本年
+                                        </div>
+                                        <img style="width: 0.56vw; height: 2.8vh; object-fit: contain" :src="require('@/assets/rect.png')" alt="">
+                                        <div class="columnar-perture">
+                                             <div class="columnar-perture-box">
+                                                <div class="top-line" :style="{width: (TMYearSell / TMYearTarget) * 12.62 + 'vw'}" />
+                                                <div class="price">{{TMYearSell + '万'   }}</div>
+                                            </div>
+                                            
+                                            <div class="columnar-perture-box">
+                                                 <div class="bottom-line" />
+                                                 <div class="price"> {{TMYearTarget + '万'   }} </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="tip">
+                                    <Label label="当前销量" text-color="#09ACEA" back-color="#0062EF"/>
+                                    <Label label="目标销量" text-color="#09ACEA" back-color="#FF0382"/>
+                                </div>
+                            </div>
+                        </div>
+                    </slot-temp>
+                </div>
+                
+            </div>
+            <div class="column2">
+                <div class="row1">
+                    <div class="total-sell">
+                        <div class="title">
+                            年度总销售额
+                        </div>
+                        <div class="total-count">
+                            <CountTo  
+                                separator=','
+                                :key="allYearPrice" 
+                                style="font-size: 1.25rem" 
+                                :startVal='initYearPrice' 
+                                :endVal='allYearPrice' 
+                                :duration='2000' />
+                                <span>元</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="row2">
+                    <div class="header">
+                        <div class="label">
+                            订单数量
+                        </div>
+                        <div class="tip">
+                            <Label style="margin-right: 0.3vw; width: 6vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(1, 255, 233)" />
+                            <Label style="margin-right: 0.3vw;width: 6vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(140, 5, 233)" />
+                            <Label style="width: 6vw" label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(221, 178, 55)" />
+                        </div>
+                    </div>
+                    <div class="echarts">
+                        <vue-chart
+                            style="width: 100%;height: 100%;"
+                            autoresize
+                            :options="yearOrderNum"
+                        />
+                    </div>
+                </div>
+                <div class="row3">
+                    <slot-temp width="24.89vw" label="本周用户访问量" >
+                        <div class="echarts">
+                            <vue-chart
+                                style="width: 100%;height: 100%;"
+                                autoresize
+                                :options="weekUvNum"
+                            />
+                            <div class="Label">
+                                <Label style="margin-right: 0.3vw;width: 6vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(0, 157, 239)" />
+                                <Label style="margin-right: 0.3vw;width: 6vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(120, 55, 217)" />
+                                <Label label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="#FF0382" />
+                            </div>
+                        </div>
+                        
+                    </slot-temp>
+                    <slot-temp label="店铺订单分布">
+                        <div class="echarts2">
+                            <div class="echarts2-box">
+                                <vue-chart
+                                    style="width: 100%;height: 100%;"
+                                    autoresize
+                                    :options="ShopDistribution"
+                                />
+                            </div>
+                            
+                            <div class="label2">
+                                <Label style="margin-right: 0.3vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(0, 157, 239)" />
+                                <Label style="margin-right: 0.3vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(120, 55, 217)" />
+                                <Label label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="#FF0382" />
+                            </div>
+                        </div>
+                    </slot-temp>
+                </div>
+            </div>
+            <div class="column3">
+
+                    <div
+                        v-for="item in salePricesList"
+                        :key="item.id"
+                    >
+                        <slot-temp 
+                            :label="item.Label" 
+                            img="box2" 
+                            height="17.4vh"
+                            
+                        >
+                            <div class="row1">
+                                <div class="price">
+                                    <span>¥</span>
+                                     <CountTo
+                                        :key="item.price" 
+                                        style="font-size: 0.375rem" 
+                                        :startVal='0' 
+                                        :endVal='Number(item.price )' 
+                                        :duration='2000' />
+                                        <span v-if="item.Label !== '今日实时销售额'">万</span>
+                                        <span v-else>元</span>
+                             
+                                </div>
+                                <div class="rate">
+                                    <div class="rate-count">
+                                        <span class="rate-cate"> {{item.Label === '今日实时销售额' ? '日增' : item.Label === '本月销售额' ? '环比' : '同比'}} </span>
+                                        <span class="up-text">{{ item.rate > 0 ? '+' : '' }}{{item.rate }}%</span>
+                                        <img class="arrow-img" :src="item.arrow" alt="">
+                                    </div>
+                                    <img class="line-img" :src="item.url" />
+                                </div>
+                            </div>
+                        </slot-temp>
+                        <div class="empty"></div>
+                    </div>
+                    <slot-temp label="商品销售排行榜(本月)" img="box2" >
+                        <div class="row1 row3" style="width: 20vw">
+                            <vue-chart
+                                style="width: 100%;height: 87%;"
+                                autoresize
+                                :options="sellRank"
+                            />
+                        </div>
+                    </slot-temp>
+                
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import options from './echartsData'
+import Label from '@/components/label'
+import SlotTemp from '@/components/SlotTemp'
+import CountTo from 'vue-count-to'
+export default {
+  name: 'App',
+  components: {
+      Label,
+      SlotTemp,
+      CountTo
+  },
+  created () {
+      this.getCurSystemDate()
+      this.initSSE()
+  },
+  mounted () {
+
+  },
+  data () {
+      return {
+          date: 0,
+        //   京东旗舰店
+          JDProMonth: JSON.parse( JSON.stringify(options.pre) ),
+          JDProYear: JSON.parse( JSON.stringify(options.pre) ),
+          JDProYearTarget: 0,
+          JDProMonthTarget: 0,
+          JDProMonthRate: 0,
+          JDProYearRate: 0,
+          JDProMonthSell: 0,
+          JDProYearSell: 0,
+        // 京东自营
+          JDSelfMonth: JSON.parse( JSON.stringify(options.pre) ),
+          JDSelfYear: JSON.parse( JSON.stringify(options.pre) ),
+          JDSelfYearTarget: 0,
+          JDSelfMonthTarget: 0,
+          JDSelfMonthRate: 0,
+          JDSelfYearRate: 0,
+          JDSelfMonthSell: 0,
+          JDSelfYearSell: 0,
+        // 天猫旗舰
+          TMMonthSell: 0,
+          TMMonthTarget: 0,
+          TMYearSell: 0,
+          TMYearTarget: 0,
+
+
+
+          ShopDistribution: JSON.parse( JSON.stringify(options.ShopDistribution) ),
+          yearOrderNum: JSON.parse( JSON.stringify(options.line) ),
+
+          weekUvNum: JSON.parse( JSON.stringify(options.columnar)),
+
+          sellRank: JSON.parse(JSON.stringify(options.sellColumnar)),
+          allYearPrice: 0, // 全年总销售额
+          initYearPrice: 0,
+          //   日 月 年销售额
+          salePricesList: []
+      }
+  },
+  methods: {
+      initSSE () {
+        const evtSource = new EventSource('https://open.luojigou.vip/data-panel/msg')
+
+        evtSource.onmessage = e => {
+            console.log(e.data);
+            const { shopSaleData, 
+                    allYearPrice, 
+                    weekUvNum, 
+                    allYearOrderNum, 
+                    shopOrderDistributionData, 
+                    salePrices,
+                  } = JSON.parse(e.data)
+
+            console.log(allYearPrice, 'allYearPrice');
+
+   
+            this.allYearPrice = allYearPrice
+            this.initColumn1(shopSaleData)
+            this.initWeekUvNum(weekUvNum)
+            this.initYearOrderNum(JSON.parse(JSON.stringify(allYearOrderNum)))
+            this.initShopDistribution(shopOrderDistributionData)
+            this.initSalePrice(salePrices)
+        }
+
+        evtSource.onopen = () => {
+
+        }
+
+        evtSource.onerror = () => {
+        console.log('error');
+        }
+      },
+      // 初始化销售额
+      initSalePrice (salePrices) {
+        this.salePricesList = salePrices.map( item => {
+            
+           
+
+            if (item.code === 'toDay') {
+                item.Label = '今日实时销售额'
+                item.price = ((item.price ) + 0.00).toFixed(2) 
+            } else if (item.code === 'nowMonth') {
+                item.Label = '本月销售额'
+                item.price = ((item.price / 10000) + 0.00).toFixed(2) 
+            } else {
+                item.Label = '上月销售额'
+                item.price = ((item.price / 10000) + 0.00).toFixed(2) 
+            }
+
+            
+            
+            if (item.rate > 0) {
+                item.url = require('@/assets/up.png')
+                item.arrow = require('@/assets/up-arrow.png')
+            }  else {
+                item.url = require('@/assets/down.png')
+                item.arrow = require('@/assets/down-arrow.png')
+            }
+
+            return item
+        })
+      },    
+
+      initShopDistribution (shopOrderDistributionData) {
+          
+          const total = shopOrderDistributionData.tMallNum  + shopOrderDistributionData.jdFlagshipNum  + shopOrderDistributionData.jdSelfNum + 0.00
+          this.ShopDistribution.series[0].data[0].value = shopOrderDistributionData.tMallNum 
+          
+          this.ShopDistribution.series[0].data[0].name = ((100 * (shopOrderDistributionData.tMallNum / total)+0.000) * 1).toFixed(2)+'%'
+
+          this.ShopDistribution.series[0].data[1].value = shopOrderDistributionData.jdFlagshipNum 
+
+          this.ShopDistribution.series[0].data[1].name = ((100 * (shopOrderDistributionData.jdFlagshipNum  / total)+0.000)*1).toFixed(2)+'%'
+
+          this.ShopDistribution.series[0].data[2].value = shopOrderDistributionData.jdSelfNum  
+
+          this.ShopDistribution.series[0].data[2].name = ((100 * (shopOrderDistributionData.jdSelfNum / total)+0.000)*1).toFixed(2) +'%'
+
+          console.log( 100 * (shopOrderDistributionData.jdSelfNum  / total).toFixed(2) ,shopOrderDistributionData.tMallNum ,  shopOrderDistributionData.jdFlagshipNum ,  '---------------------------------' , total);
+      },
+     
+      initYearOrderNum (allYearOrderNum) {
+              this.yearOrderNum.series[0].data = allYearOrderNum.map(item => {
+                  return item.jdFlagshipNum
+              })
+              this.yearOrderNum.series[1].data = allYearOrderNum.map(item => {
+                  return item.jdSelfNum
+              })
+              this.yearOrderNum.series[2].data = allYearOrderNum.map(item => {
+                  return item.tMallNum
+              })
+              this.$forceUpdate()
+      },
+
+      initWeekUvNum (weekUvNum) {
+          this.weekUvNum.series[0].data = weekUvNum.map( item => {
+              return item.jdFlagshipNum
+          })
+          this.weekUvNum.series[1].data = weekUvNum.map( item => {
+              return item.jdSelfNum
+          })
+          this.weekUvNum.series[2].data = weekUvNum.map( item => {
+              return item.tMallNum
+          })
+
+       
+      },
+      initColumn1 (shopSaleData) {
+        //   const [ TMPro  ] = shopSaleData
+        shopSaleData.forEach(  item => {
+            const { code, monthPrice, monthTargetPrice, yearPrice, yearTargetPrice } = item
+       
+            if (code === '10001') {
+                this.JDProMonthTarget = (monthTargetPrice / 10000 ).toFixed(2)
+                this.JDProMonthSell =  (monthPrice / 10000 ).toFixed(2)
+                
+                this.JDProYearTarget = yearTargetPrice / 10000
+
+                this.JDProMonth.series[0].data[0].value = (monthTargetPrice + monthPrice)
+                this.JDProMonth.series[0].data[1].value = monthPrice
+
+                this.JDProYear.series[0].data[0].value = (yearTargetPrice + yearPrice)
+                this.JDProYear.series[0].data[1].value = yearPrice
+
+                this.JDProYear.color = [ '#033188', '#009DEF' ]
+
+                this.JDProMonthRate = (100 * (monthPrice / monthTargetPrice)+0.00).toFixed(0) + '%'
+
+                this.JDProYearRate = (100 * (yearPrice / yearTargetPrice)+ 0.00).toFixed(0) + '%'
+            
+                this.JDProYearSell = (yearPrice / 10000).toFixed(2)
+
+            } else if ( code === '10002') {
+                this.JDSelfMonthTarget = (monthTargetPrice / 10000 ).toFixed(2)
+                this.JDSelfMonthSell =  (monthPrice / 10000 ).toFixed(2)
+                
+                this.JDSelfYearTarget = yearTargetPrice / 10000
+
+                this.JDSelfMonth.series[0].data[0].value = (monthTargetPrice + monthPrice)
+                this.JDSelfMonth.series[0].data[1].value = monthPrice
+
+                this.JDSelfYear.series[0].data[0].value = (yearTargetPrice + yearPrice)
+                this.JDSelfYear.series[0].data[1].value = yearPrice
+                this.JDSelfYear.color = [ '#033188', '#009DEF' ]
+
+                this.JDSelfMonthRate = (100 * (monthPrice / monthTargetPrice) + 0.00).toFixed(2) + '%'
+
+                this.JDSelfYearRate = (100 * (yearPrice / yearTargetPrice) +0.00).toFixed(2) + '%'
+            
+                this.JDSelfYearSell = (yearPrice / 10000).toFixed(2)
+            } else {
+                this.TMMonthTarget = ( monthTargetPrice / 10000).toFixed(0) 
+                this.TMMonthSell = (monthPrice / 10000).toFixed(0) 
+
+                this.TMYearTarget = ( yearTargetPrice / 10000).toFixed(0) 
+                this.TMYearSell =  ( yearPrice / 10000).toFixed(0) 
+            }
+            
+        })
+      },
+    numFormat (num) {
+    num = num.toString().split(".");  // 分隔小数点
+            var arr=num[0].split("").reverse();  // 转换成字符数组并且倒序排列
+            var res=[];
+        for(var i=0,len=arr.length;i<len;i++){
+            if(i%3===0&&i!==0){
+                res.push(",");   // 添加分隔符
+            }
+                res.push(arr[i]);
+            }
+                res.reverse(); // 再次倒序成为正确的顺序
+            if(num[1]){  // 如果有小数的话添加小数部分
+                res=res.join("").concat("."+num[1]);
+            }else{
+                res=res.join("");
+            }
+        return res;
+    },
+      // 获取当前系统时间
+    getCurSystemDate ( ) {
+      setInterval( () => {
+        let date = new Date();
+        var YY = date.getFullYear() + '-';
+        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
+        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+        this.date =  YY + MM + DD + ' ' +  hh + mm + ss
+      }, 1000 )
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import './app.less';
+</style>

src/Appe.vue

@@ -0,0 +1,400 @@
+<template>
+  <div id="app">
+     <div class="header">
+       <div class="company-name">
+         中德智慧看板
+       </div>
+       <div class="total-peice">
+         <!-- ¥{{totalPrice}} -->
+         <CountTo :number="totalPrice" ref="CountTo"/>
+        </div>
+       <div class="date">
+        当前时间: {{date}}
+       </div>
+     </div>
+     <div class="row">
+       <div class="column">
+          <div class="box1">
+          <div class="title">
+            京东旗舰店
+          </div>
+            <vue-chart style="width: 100%;height: 90%;"
+            autoresize
+            :options="jdPoP"
+            />
+            
+          </div>
+          <div class="footer"></div>
+        </div>
+        <div class="column">
+          <div class="box1">
+          <div class="title">
+            京东自营店
+          </div>
+            <vue-chart style="width: 100%;height: 90%;"
+            autoresize
+            :options="jdSelf"
+            />
+            
+          </div>
+          <div class="footer"></div>
+        </div>
+        <div class="column">
+          <div class="box1">
+          <div class="title">
+            天猫旗舰店
+          </div>
+            <vue-chart style="width: 100%;height: 90%;"
+            autoresize
+            :options="tmPop"
+            />
+            
+          </div>
+          <div class="footer"></div>
+        </div>
+     </div>
+     <div class="line">
+       <div class="tip">
+         <div class="tip-box">
+           <div class="tip-item"  v-for="item in colorList" :key="item.color">
+             <div :style="{background: item.color}" class="tip-color"></div>
+             <div class="label">{{item.label}}</div>
+          </div>
+         </div>
+       </div>
+       <div class="echarts">
+          <vue-chart style="width: 100%;height: 90%;"
+            autoresize
+            :options="line"
+            />
+       </div>
+       <div class="footer">
+
+       </div>
+     </div>
+     
+  </div>
+</template>
+
+<script>
+// 10001 京东pop(旗舰) 10002 京东自营店 20001 天猫旗舰店
+
+import CountTo from './countTo'
+import options from './echartsData'
+export default {
+  name: 'App',
+  components: {
+    CountTo
+  },
+  watch: {
+    newTotalPrice () {
+      this.time = setTimeout( () => {
+        this.totalPrice = this.newTotalPrice
+      }, 1000)
+      clearTimeout(this.time)
+    }
+  },
+  created () {
+    this.getCurSystemDate()
+    this.initWebSocket()
+  },
+  data () {
+    return {
+      jdPoP: JSON.parse( JSON.stringify( options.pre)),
+      jdSelf: JSON.parse( JSON.stringify( options.pre)),
+      tmPop: JSON.parse( JSON.stringify( options.pre)),
+      line: options.line,
+      date: '',
+      totalPrice: 0,
+      newTotalPrice: 0,
+      orderNum: ['0', '0', ',', '0', '0', '0', ',', '0', '0', '0'],
+      // ['rgb(31, 172, 255)', 'rgb(105, 225, 176)', 'rgb(255, 149, 145)']
+      colorList: [
+        {
+          label: '订单数',
+          color: 'rgb(31, 172, 255)'
+        },
+        {
+          label: '用户访问量',
+          color: 'rgb(105, 225, 176)'
+        },
+        {
+          label: '订单金额',
+          color: 'rgb(255, 149, 145)'
+        },
+      ]
+    }
+  },
+  methods: {
+    initWebSocket () {
+    const evtSource = new EventSource('https://open.luojigou.vip/data-panel/msg')
+
+    evtSource.onmessage = e => {
+      const { data } = e
+      const { upData, downDate } = JSON.parse(data)   
+      console.log(downDate, 'downDate');
+      this.initPreData(upData)
+      this.initLineData(downDate)
+    }
+
+    evtSource.onopen = () => {
+
+    }
+
+    evtSource.onerror = () => {
+      console.log('error');
+    }
+
+    },
+    // 转换名称
+    initName (label) {
+      switch (label) {
+        case '10001':
+          
+          return 'jdPoP'
+        case '10002':
+          
+          return 'jdSelf'
+        case '20001':
+          
+          return 'tmPop'
+      
+        default:
+          throw new Error('传回的店铺标识不匹配')
+      }
+    },
+    // 折线数据
+    initLineData (data) {
+
+      this.line.yAxis[0].max = Math.floor(Math.max.apply(this, data.map(item => item.orderNum))) + 1000
+      this.line.yAxis[1].max = Math.floor(Math.max.apply(this, data.map(item => item.uvNum))) + 1500
+      this.line.yAxis[2].max = Math.floor(Math.max.apply(this, data.map(item => item.orderPrice ))) + 20000
+
+      this.line.series[0].data = data.map(item => item.orderNum)
+      this.line.series[1].data = data.map(item => item.uvNum)
+      this.line.series[2].data = data.map(item => item.orderPrice)
+      this.totalPrice = data.map(item =>  Number(item.orderPrice)).reduce( (pre, next) => pre + next )
+      this.$refs['CountTo'].dispatch(this.totalPrice)
+      this.line.xAxis.data = data.map(item => {
+        let date = item.orderDate.substr(4)
+        return [date.substr(0, 2), date.substr(2)].join('-')
+      })
+
+      console.log(this.line);
+    },
+    // 饼图转换数据
+    initPreData (data) {
+      console.log(data, 'data');
+      const tmPop =  data['20001']
+      const jdPoP =  data['10001']
+      // eslint-disable-next-line no-prototype-builtins
+      const jdSelf =  data['10002']
+      console.log( [tmPop, jdPoP, jdSelf]);
+      [tmPop, jdPoP, jdSelf].map( item => {
+        item.name = this.initName(item.label)
+        return item
+      }).forEach( (item) => {
+
+        this[item.name].series[0].data[0].value = ( item.monthPrice / 10000 ).toFixed(2)
+        this[item.name].series[0].data[0].label.formatter = `{b|{b}：} {c|{c}万} \n {per|{d}%} \n  {r|月度目标: ${( item.monthTargetPrice / 10000 ).toFixed(2)}万}`
+        this[item.name].series[0].data[1].value =  (( item.monthTargetPrice / 10000 ) - ( item.monthPrice  / 10000 )).toFixed(2) 
+
+
+        this[item.name].series[1].data[0].value = ( item.yearPrice  / 10000 ).toFixed(2)
+        this[item.name].series[1].data[0].label.formatter = `{b|{b}：} {c|{c}万} {per|{d}%} \n  {r|年度目标: ${( item.yearTargetPrice / 10000 ).toFixed(2)}万}`
+        this[item.name].series[1].data[1].value = (( item.yearTargetPrice / 10000 ) - ( item.yearPrice  / 10000 )).toFixed(2)
+      })
+
+    },
+
+    // 获取当前系统时间
+    getCurSystemDate ( ) {
+      setInterval( () => {
+        let date = new Date();
+        var YY = date.getFullYear() + '-';
+        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
+        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+        this.date =  YY + MM + DD + ' ' +  hh + mm + ss
+      }, 1000 )
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import './app.less';
+// #app {
+//   width: 100vw;
+//   height: 100vh;
+//   background: url('./assets/data-bg.jpg') no-repeat ;
+//   background-size: 100% 100%;
+// }
+
+.header {
+  background: url('./assets/head_bg.png') no-repeat  top center;
+  position: relative;
+  height: 1.25rem;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 3vw;
+  .company-name {
+    font-size: 0.25rem;
+    margin-top: -0.3rem;
+    color: rgba(255, 255, 255, 0.7)
+  }
+  .total-peice {
+    font-size: 0.875rem;
+    margin-left: 8vw;
+    margin-bottom: 1vh;
+  }
+  .date {
+    font-size: 0.25rem;
+    margin-top: -0.3rem;
+    color: rgba(255, 255, 255, 0.7)
+  }
+}
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5vw;
+  margin-top: 5vh;
+}
+
+.column {
+  position: relative;
+  width: 28vw;
+  height: 30vh;
+  // margin-left: 5vw;
+  padding: 0.5em 0.5em;
+  background: url('./assets/line.png') no-repeat;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+
+.box1 {
+  width: 28vw;
+  height: 30vh;
+  position: relative;
+  .title {
+    color: #fff;
+    font-size: 0.3rem;
+    text-align: center;
+  }
+   .footer {
+    width: calc(20vw - 3em);
+    height: 1px;
+    position: relative;
+  }
+}
+.column::before  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+}
+.column::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+}
+
+.footer::before  {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-bottom: 2px solid #02a6b5;
+}
+.footer::after  {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-right: 2px solid #02a6b5;
+}
+
+
+.line {
+  width: 96vw;
+  height: 40vh;
+  position: relative;
+  background: url('./assets/line.png') no-repeat;
+  box-sizing: border-box;
+  margin: 0 auto;
+  margin-top: 5vh;
+  overflow: hidden;
+  .echarts {
+    width: 100%;
+    height: 100%;
+    margin-top: 2vh;
+  }
+  .tip {
+    width: 100%;
+    height: 2vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .tip-box {
+      display: flex;
+      .tip-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 0.3vw;
+        .tip-color {
+          width: 1vw;
+          height: 1vh;
+          border-radius: 0.1vw;
+        }
+        .label {
+          color: #fff;
+          font-size: 0.125rem;
+          margin-left: 0.2vw;
+        }
+      }
+    }
+  }
+}
+
+.line::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid #02a6b5;
+  border-top: 2px solid #02a6b5;
+}
+.line::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid #02a6b5;
+  border-top: 2px solid #02a6b5;
+}
+</style>

src/app.less

@@ -0,0 +1,341 @@
+#app {
+    width: 100vw;
+    height: 100vh;
+    background: url('./assets/bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    font-family: PingFangSC-Medium, PingFang SC;
+}
+
+
+
+.header {
+    width: 100vw;
+    padding-top: 3.25vh;
+    padding-left: 1.67vw;
+    padding-right: 1.37vw;
+    box-sizing: border-box;
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+
+    .title {
+        width: 66.67vw;
+        height: 4.22vh;
+        background: url('./assets/header.png') no-repeat top center;
+        background-size: 100% 100%;
+        margin-left: 4.9vw;
+        margin-right: 6.72vw;
+        font-size: 0.4rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 4.22vh;
+    }
+
+    .logo {
+        width: 9.37vw;
+        height: 5.4vh;
+        background: url('./assets/logo.png') no-repeat;
+        background-size: contain;
+    }
+
+    .date {
+        color: #ffffff;
+        font-size: 0.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2EA4D4;
+        
+    }
+}
+
+
+.content {
+    margin-left: 1.98vw;
+    margin-top: 5.09vh;
+    display: flex;
+    // align-items: center;
+}
+
+.column1 {
+    .row1 {
+        
+    }
+    .row2 {
+        margin-top: 2.22vh;
+    }
+
+    .row3 {
+        margin-top: 2.22vh;
+        position: relative;
+        .echarts {
+            .echarts1 {
+                width: 100vw;
+                .columnar {
+                    width: 100%;
+                    margin-bottom: 2.2vh;
+                    margin-top: 1.9vh;
+                    .label {
+                        font-size: 0.16rem;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                        margin-bottom: 1.9vh;
+                        width: 0.5vw;
+                    }
+                    .month {
+                        width: 100%;
+                        display: flex;
+                        .label {
+                            width: 3vw;
+                        }
+                    }
+                    .year {
+                        width: 100%;
+                        display: flex;
+                        .label {
+                            width: 3vw;
+                        }
+                            
+                    }
+                    .columnar-perture{
+                        margin-bottom: 1.7vh;
+                        margin-left: 0.5vw;
+                        margin-top: -0.5vh;
+                        .columnar-perture-box {
+                            display: flex;
+                            align-items: center;
+                            color: #FFFFFF;
+                            font-size: 0.2rem;
+                            height: 0.92vh;
+                            margin-top: 0.6vh;
+                            margin-bottom: 0.46vh;
+                            .top-line {
+                                height: 0.92vh;
+                                background: #009DEF;
+                                // margin-bottom: 0.2vh;
+                            }
+                            .bottom-line {
+                                width: 12.00vw;
+                                height: 0.92vh;
+                                background: #FF0382;
+                            }
+                            .price {
+                                width: 3vw;
+                                font-size: 0.175rem;
+                                font-weight: 400;
+                                color: #09ACEA;
+                                margin-left: 0.5vw; 
+                                margin-top: -0.1vh;
+                                display: flex;
+                            }
+                        }
+                        
+                    }
+                
+                }
+                .tip {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    position: absolute;
+                    bottom: -3vh;
+                }
+            }
+        }
+    }
+    .shop {
+        font-size: 0.15 rem;
+        font-weight: 500;
+        color: #09ACEA;
+        margin-top: 1.5vh;
+    }
+    .echarts {
+        width: 18.2vw;
+        height: 16vh;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .echarts1 {
+            width: 8.1vw;
+            height: 16vh;
+            position: relative;
+            .money {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: #ffffff;
+                font-weight: bold;
+                font-size: 0.22rem;
+                div {
+                    text-align: center;
+                }
+            }
+      
+        }
+    }
+}
+
+
+
+.column2 {
+    width: 51.61vw;
+
+    .row1 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        height: 27vh;
+        .total-sell {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            .title {
+                width: 19.89vw;
+                height: 5.27vh;
+                background: url('./assets//text-bg.png') no-repeat;
+                background-size: 100% 100%;
+                font-size: 0.275rem;
+                font-weight: 500;
+                color: #FFFFFF;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0;
+            }
+            .total-count {
+                font-size: 1.25rem;
+                font-weight: 600;
+                color: #E1FBFF;
+                span {
+                    font-size: 0.2rem;
+                    margin-left: 0.1rem;
+                }
+            }
+        }
+    }
+
+    .row2 {
+        margin-top: -2vh;
+        height: 33.4vh;
+        position: relative;
+        .header {
+           display: flex;
+           justify-content: space-between;
+           align-items: center;
+           width: 51.61vw;
+            .label {
+                font-size: 0.15rem;
+                font-weight: 500;
+                color: #FFFFFF;
+                margin-bottom: 1vh;
+                // position: absolute;
+                // bottom: -3vh;
+            }
+            .tip {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+        }
+        .echarts {
+            width: 100%;
+            height: 25.12vh;
+        }
+    }
+    .row3 {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2vw;
+        height: 27vh;
+        box-sizing: border-box;
+        .echarts {
+            width: 22vw;
+            height: 20vh;
+        }
+        .Label {
+            display: flex;
+            justify-content: flex-start;
+            align-self: start;
+            position: absolute;
+            bottom: 2vh;
+        }
+        .echarts2 {
+            width: 18vw;
+            height: 18vh;
+            position: relative;
+            
+            .echarts2-box {
+                width: 16vw;
+                height: 20vh;
+                margin-left: 3.8vw;
+            }
+            .label2 {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                top: 2vh;
+            }
+        }
+    }
+}
+
+.column3 {
+    .row1 {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .price {
+            font-size: 0.375rem;
+            font-weight: 600;
+            color: #FFFFFF;
+            span {
+                font-size: 0.275rem;
+                font-weight: 600;
+                color: #FFFFFF;
+            }
+        }
+        .rate {
+            // margin-left: 2.3vw;
+            margin-top: -1.5vh;
+            position: absolute;
+            right: 1vw;
+            .rate-count {
+                text-align: center;
+                .rate-cate {
+                    color: #FFFFFF;
+                    font-size: 0.225rem;
+                }
+                .up-text {
+                    color: rgb(2, 163, 184);
+                }
+                .arrow-img {
+                    width: 0.5vw;
+                    height: 1vh;
+                    margin-left: 0.5vw;
+                }
+            }
+            .line-img {
+                width: 8.1vw;
+                height: 10.37vh;
+            }
+        }
+    }
+    .row3 {
+        // margin-top: 2.2vh;
+        margin-bottom: 2vh;
+    }
+    .empty {
+        width: 1px;
+        height: 2.2vh;
+    }
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/SlotTemp.vue

@@ -0,0 +1,57 @@
+<template>
+      <div class="box1" 
+        :style="{width: width,height, background: `url(${require('@/assets/' + img + '.png')}) no-repeat`, backgroundSize: '100% 100%'}"
+      >
+          <div class="label">
+              {{label}}
+          </div>
+        
+            <slot>
+              
+            </slot>
+      </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SlotTemp',
+  props: {
+    width: String,
+
+    height: {
+      type: String,
+      default: '27vh'
+    },
+
+    img: {
+      type: String,
+      default: 'box1'
+    },
+    label: {
+      type: String,
+      default: '销售目标'
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+ .box1 {
+        // background: url(../assets/box1.png) no-repeat;
+        background-size: 100% 100%;
+        width: 21.8vw;
+        padding: 0.65vh 1.3vw 1.2vh 1.3vw;
+        box-sizing: border-box;
+        .label {
+            font-size: 0.22rem;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+        .shop {
+          font-size: 0.15 rem;
+          font-weight: 500;
+          color: #09ACEA;
+          margin-top: 1.5vh;
+        }
+    }
+</style>

src/components/child.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <input type="text" @change="e =>  $emit('change' ,e)">
+        {{log()}}
+        {{a}}
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'child',
+  props: {
+      a: String
+  },
+  methods: {
+      log () {
+          console.log('child');
+      }
+  }
+}
+</script>
+<style scoped lang="less">
+
+</style>

src/components/label.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="label">
+        <div class="chunk" :style="{background: backColor}"></div>
+        <div class="target-text" :style="{color: textColor}">{{label}}</div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'label',
+  props: {
+      label: String,
+      backColor: String,
+      textColor: String
+  }
+}
+</script>
+<style scoped lang="less">
+.label {
+    width: 10vw;
+    display: flex;
+    align-items: center;
+    .chunk {
+        width: 0.6vw;
+        height: 0.8vh;
+        margin-right: 0.1vw;
+    }
+    .target-text {
+        font-size: 0.16rem;
+        font-weight: 400;
+        
+    }
+}
+</style>

src/countTo.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="chartNum">
+                <div class="box-item">
+                    <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+                        v-for="(item,index) in orderNum"
+                
+                        :key="index">
+                        <span v-if="!isNaN(item)">
+                          <i ref="numberItem">0123456789</i>
+                        </span>
+                        <span class="comma" v-else >{{item}}</span>
+                    </li>
+                </div>
+            </div>
+</template>
+<script>
+    export default {
+        name: 'CountTo',
+        props: {
+            number: Number
+        },
+        data() {
+            return {
+                orderNum: ['0', '0', ',', '0', '0', '0', ',', '0', '0', '0'], // 默认订单总数
+            }
+        },
+        watch: {
+            number: {
+                handler () {
+                   
+                },
+                immediate: true
+            }
+        },
+        mounted () {
+        //      // 这里输入数字即可调用
+        //    this.setNumberTransform()
+        //             // this.toOrderNum(Math.floor(this.number))
+                    
+        //             let a = 1212
+        //             this.time = setInterval( () => {
+        //                 a += 223
+        //                 this.setNumberTransform()
+        //                 // Math.floor(this.number)
+        //                 this.toOrderNum(a)
+        //        
+        //             }, 1000)
+            
+        },
+        methods: {
+
+            // 调用
+            dispatch (data) {
+                this.setNumberTransform()
+                this.toOrderNum(Math.floor(data))
+            },
+               // 设置文字滚动
+            setNumberTransform () {
+              const numberItems = this.$refs['numberItem'] // 拿到数字的ref，计算元素数量
+              const numberArr = this.orderNum.filter(item => !isNaN(item))
+              console.log(numberArr, 'numberArr', numberItems);
+              // 结合CSS 对数字字符进行滚动,显示订单数量
+              for (let index = 0; index < numberItems.length; index++) {
+                const elem = numberItems[index]
+                elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
+              }
+            },
+            // 处理总订单数字
+            toOrderNum(num) {
+              num = num.toString()
+              console.log(num, '处理总订单数字');
+              let str = ''
+                for(let i = 0; i< num.length; i += 2) {
+                    str += num.slice(i, i +2)
+                }
+          
+                // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)  + ',' + num.slice(8, 11) + ',' + num.slice(11, 14)
+                this.orderNum = this.numFormat(str).split('') 
+                      console.log(  this.orderNum , '  this.orderNum ');
+                this.$forceUpdate()
+
+            },
+                numFormat (num) {
+                    num=num.toString().split(".");  // 分隔小数点
+                        var arr=num[0].split("").reverse();  // 转换成字符数组并且倒序排列
+                        var res=[];
+                        for(var i=0,len=arr.length;i<len;i++){
+                        if(i%3===0&&i!==0){
+                            res.push(",");   // 添加分隔符
+                        }
+                        res.push(arr[i]);
+                        }
+                        res.reverse(); // 再次倒序成为正确的顺序
+                        if(num[1]){  // 如果有小数的话添加小数部分
+                        res=res.join("").concat("."+num[1]);
+                        }else{
+                        res=res.join("");
+                        }
+                    return res;
+                },
+        }
+    }
+</script>
+<style scoped lang='less'>
+     /*订单总量滚动数字设置*/
+    .box-item {
+        position: relative;
+        height: 1.25rem;
+        font-size: 0.875rem;
+        line-height: 41px;
+        text-align: center;
+        list-style: none;
+        color: rgb(107 191 209);
+        writing-mode: vertical-lr;
+        text-orientation: upright;
+        /*文字禁止编辑*/
+        -moz-user-select: none; /*火狐*/
+        -webkit-user-select: none; /*webkit浏览器*/
+        -ms-user-select: none; /*IE10*/
+        -khtml-user-select: none; /*早期浏览器*/
+        user-select: none;
+        /* overflow: hidden; */
+        font-family: Italiana, sans-serif;
+    }
+    /* 默认逗号设置 */
+    .mark-item {
+        width: 10px;
+        height: 100px;
+        margin-right: 0.5vw;
+        // margin-left: 0.5vw;
+        line-height: 0.5vw;
+        font-size: 0.675rem;
+        position: relative;
+        & > span {
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+        }
+    }
+    /*滚动数字设置*/
+    .number-item {
+        width: 3vw;
+        height: 9vh;
+        background: #ffffff;;
+        list-style: none;
+        margin-right: 5px;
+        background:rgb(10, 20, 71);
+        border-radius:4px;
+        overflow: hidden;
+        & > span {
+            position: relative;
+            display: inline-block;
+            margin-right: 2vw;
+            width: 100%;
+            height: 100%;
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            overflow: hidden;
+            & > i {
+                font-style: normal;
+                position: absolute;
+                top: 11%;
+                left: 50%;
+                transform: translate(-50%,0);
+                transition: transform 1s ease-in-out;
+                letter-spacing: 10vw;
+            }
+        }
+    }
+    .number-item:last-child {
+        margin-right: 0;
+    }
+
+    .comma {
+        margin-top: -2vh;
+    }
+</style>

src/echartsData.js

@@ -0,0 +1,304 @@
+
+export default {
+    pre: {
+        color: ['#F25268', '#0062EF'],
+        series: [
+            {                                 
+          
+                type: 'pie',
+                radius: [ '90%', '70%'],
+                data: [
+                    {
+                        value: 0,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false,
+                            length: 0
+                        },
+                    },
+                    {
+                        value: 0,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                    },
+                    {
+                        value: 0,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                    },
+                ]
+            }
+        ]
+    },
+    ShopDistribution: {
+        color: ['#F25268', '#0062EF', '#7837D9'],
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+            {
+                name: '直达',
+                type: 'pie',
+                selectedMode: 'single',
+                radius: [ '90%', '70%'],
+                data: [
+                    {
+                        value: 0,
+                        name: '天猫旗舰店',
+                        labelLine: {
+                            show: true,
+                            length: 20
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '京东旗舰店',
+                        labelLine: {
+                            show: true
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '京东自营店',
+                        labelLine: {
+                            show: true
+                        },
+                    },
+                ]
+            }
+        ]
+    },
+    line: {
+        color: ['rgb(1, 255, 233)', 'rgb(140, 5, 233)', 'rgb(221, 178, 55)'],
+        // title: {
+        //     text: '折线图堆叠'
+        // },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+
+         },
+        legend: {
+            right: 10,
+            data: ['京东旗舰店', '京东自营店', '天猫旗舰店']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                lineStyle: {
+                    color: '#333'
+                }
+            },
+            axisLabel: {
+                show : true,
+                textStyle: {
+                    color: 'rgb(31, 172, 255)'
+                }
+            },
+            boundaryGap: false,
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+        },
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgb(17, 36, 94)'
+                    }
+                },
+                axisLabel: {
+                    show : true,
+                    textStyle: {
+                        color: 'rgb(31, 172, 255)'
+                    }
+                },
+            }
+        ],
+        series: [
+            {
+                name: '京东旗舰店',
+                type: 'line',
+                smooth: true,
+                areaStyle: {
+                    color: 'rgb(11, 41, 104)'
+                },
+                data: [4111120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: '京东自营店',
+                type: 'line',
+                smooth: true,
+                data: [220, 132, 101, 134, 90, 230, 2222210]
+            },
+            {
+                name: '天猫旗舰店',
+                type: 'line',
+                smooth: true,
+                data: [120, 132, 1333301, 134, 90, 230, 210]
+            },
+        ]
+    },
+    columnar: {
+        color: ['#3398DB'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '1%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                axisTick: {
+                    alignWithLabel: true
+                },
+                axisLine: {
+                    show: true,
+                    textStyle: {
+                        color: 'rgb(31, 172, 255)'
+                    }
+                },
+                axisLabel: {
+                    show : true,
+                    textStyle: {
+                        color: 'rgb(31, 172, 255)'
+                    }
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgb(17, 36, 94)'
+                    }
+                },
+                axisLabel: {
+                    show : true,
+                    textStyle: {
+                        color: 'rgb(31, 172, 255)'
+                    }
+                },
+            }
+        ],
+        series: [
+            {
+                name: 'Forest',
+                type: 'bar',
+                barGap: 0,
+                barWidth: '20%',
+                color: 'rgb(0, 157,239)',
+                data: [10, 52, 200, 334, 390, 330, 220]
+            },
+            {
+                name: 'Steppe',
+                type: 'bar',
+                barGap: 0,
+                barWidth: '10%',
+                color: 'rgb(120, 55, 217)',
+                data: [101, 52, 100, 34, 190, 230, 120]
+            },
+            {
+                name: 'Steppecc',
+                type: 'bar',
+                barGap: 0,
+                barWidth: '10%',
+                color: 'rgb(255, 3, 170)',
+                data: [120, 520, 150, 24, 90, 30, 170]
+            },
+        ]
+    },
+    sellColumnar: {
+        color: ['#3398DB'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '6%',
+            top: '11%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['逻辑狗3-7岁', '逻辑狗3-12岁', '春夏秋冬', '教材版3-4', '网络版4-5'],
+                axisTick: {
+                    alignWithLabel: true
+                },
+                axisLine: {
+                    show: false
+                },
+                axisLabel: {
+                    fontSize: 10,
+                    interval: 0,
+                    color: '#09ACEA'
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    color: '#09ACEA'
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: [
+            {
+                name: '直接访问',
+                type: 'bar',
+                barWidth: '20%',
+                showBackground: true,
+                backgroundStyle: {
+                    color: '#2D2A73'
+                },
+                data: [124, 72, 24, 16, 16]
+            }
+        ]
+    }
+}

src/main.js

@@ -1,8 +1,23 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+import './utils/flexible'
+import './utils/nomarlize.less'
+
+import Echarts from 'vue-echarts'
+import 'echarts/lib/chart/map'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/bar'
+Vue.component('vue-chart', Echarts)
+
+
 Vue.config.productionTip = false
 
 new Vue({
   render: h => h(App),
+  components: {
+    App
+  }
 }).$mount('#app')
+

src/utils/flexible.js

@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+    var docEl = document.documentElement;
+    var dpr = window.devicePixelRatio || 1;
+  
+    // adjust body font size
+    function setBodyFontSize() {
+      if (document.body) {
+        document.body.style.fontSize = 12 * dpr + "px";
+      } else {
+        document.addEventListener("DOMContentLoaded", setBodyFontSize);
+      }
+    }
+    setBodyFontSize();
+  
+    // set 1rem = viewWidth / 10
+    function setRemUnit() {
+      var rem = docEl.clientWidth / 24;
+      docEl.style.fontSize = rem + "px";
+    }
+  
+    setRemUnit();
+  
+    // reset rem unit on page resize
+    window.addEventListener("resize", setRemUnit);
+    window.addEventListener("pageshow", function(e) {
+      if (e.persisted) {
+        setRemUnit();
+      }
+    });
+  
+    // detect 0.5px supports
+    if (dpr >= 2) {
+      var fakeBody = document.createElement("body");
+      var testElement = document.createElement("div");
+      testElement.style.border = ".5px solid transparent";
+      fakeBody.appendChild(testElement);
+      docEl.appendChild(fakeBody);
+      if (testElement.offsetHeight === 1) {
+        docEl.classList.add("hairlines");
+      }
+      docEl.removeChild(fakeBody);
+    }
+  })(window, document);

src/utils/nomarlize.less

@@ -0,0 +1,370 @@
+html body {
+    margin: 0;
+    padding: 0;
+
+}
+
+
+html,
+body,
+#app, #root {
+  height: 100%;
+}
+
+.colorWeak {
+  filter: invert(80%);
+}
+
+.ant-layout.layout-basic {
+  height: 100vh;
+  min-height: 100vh;
+}
+
+canvas {
+  display: block;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+// 数据列表 操作
+.table-operator {
+  margin-bottom: 18px;
+
+  button {
+    margin-right: 8px;
+  }
+}
+// 数据列表 搜索条件
+.table-page-search-wrapper {
+
+  .ant-form-inline {
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 24px;
+      margin-right: 0;
+
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+      }
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+// @media (max-width: @screen-xs) {
+//   .ant-table {
+//     width: 100%;
+//     overflow-x: auto;
+//     &-thead > tr,
+//     &-tbody > tr {
+//       > th,
+//       > td {
+//         white-space: pre;
+//         > span {
+//           display: block;
+//         }
+//       }
+//     }
+//   }
+// }
+
+
+.cp {
+  cursor: pointer;
+}
+
+
+img {
+  object-fit: cover;
+}
+
+.card {
+  height: 100%;
+  width: 75%;
+  min-width: 800px;
+}
+
+.template-edit-style {
+  background: #f9f9f9;
+  padding: 20px 0;
+  
+}
+
+
+.user-nick-name {
+  display: inline-block;
+  text-align: center;
+  border: 1px solid #ffadd2;
+  background: #fff0f6;
+  color: #eb2f96;
+  font-size: 12px;
+  padding: 1px 3px;
+  border-radius: 1px;
+  cursor: pointer;
+  line-height: initial;
+  margin-right: 2px;
+}
+
+
+@borderColor: rgb(216, 216, 216);
+.create-view {
+  height: 640px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 20px 15px;
+  border-top: 1px solid @borderColor;
+  border-right: 1px solid @borderColor;
+  border-bottom: 1px solid @borderColor;
+}
+
+.create-view-box {
+  background: #f9f9f9;
+  box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.58);
+  height: 568px;
+  width: 320px;
+
+
+  .header-img {
+    position: relative;
+
+    > img {
+      width: 100%;
+    }
+
+    .header-title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      text-align: center;
+      font-size: 18px;
+      color: #fff;
+      padding-top: 23px;
+    }
+  }
+
+  .view-container {
+    font-size: 12px;
+    max-height: 485px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0 15px;
+
+    .inform-video {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .inform-image {
+      width: 150px;
+      margin-left: 15px;
+      border-radius: 4px;
+      height: 100%;
+    }
+
+    .inform-container {
+      display: flex;
+      margin-bottom: 20px;
+
+      &.audio-type {
+        .inform-content {
+          padding: 4px 8px;
+        }
+      }
+
+      &.image-text-container {
+        &.overlay {
+          transition: all .2s;
+          margin-bottom: 0;
+          font-size: 14px;
+
+          &:last-child {
+            margin-bottom: 20px;
+
+            .inform-content {
+              border-bottom-left-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+          }
+
+          &:first-child {
+            .inform-content {
+              padding: 0;
+              border-top: none;
+              border-top-left-radius: 0;
+              border-top-right-radius: 0;
+            }
+
+            .inform-title {
+              width: 100%;
+              padding: 6px 10px;
+              line-height: 24px;
+              color: #fff;
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
+              background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+              margin-bottom: 0;
+            }
+
+            .desc-image {
+              height: auto !important;
+              width: 100% !important;
+              display: block;
+              max-height: 145px;
+            }
+          }
+
+          &:not(:first-child) {
+            .inform-content {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .inform-title {
+              margin-bottom: 0;
+            }
+
+            .inform-desc {
+              width: 50px;
+            }
+          }
+
+          .inform-content {
+            border-radius: 0;
+            border-top: 0;
+          }
+
+          .inform-box {
+            padding-left: 0;
+          }
+        }
+      }
+
+      .avatar-image {
+        width: 36px;
+        height: 36px;
+        object-position: center;
+        object-fit: cover;
+      }
+
+      .inform-box {
+        flex: 1;
+        padding-left: 15px;
+      }
+
+
+      .inform-content {
+        position: relative;
+        border: 1px solid @borderColor;
+        background: #fff;
+        padding: 8px;
+        border-radius: 4px;
+
+        .audio-class {
+          font-size: 14px;
+        }
+
+
+        .inform-title {
+          line-height: initial;
+          margin-bottom: 10px;
+
+          &.no-bottom {
+            margin-bottom: 0;
+          }
+        }
+
+        .inform-desc {
+          display: flex;
+
+          p {
+            flex: 1;
+            color: #999999;
+            overflow: hidden;
+            line-height: 17px;
+            font-size: 12px;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            padding-right: 5px;
+            word-break: break-word;
+          }
+
+          .desc-image {
+            width: 48px;
+            height: 48px;
+            object-fit: cover;
+            object-position: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+ //滚动条的宽度
+ .custom-scroll-line::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  }
+  //滚动条的滑块
+  .custom-scroll-line ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.65);
+  border-radius: 3px;
+  }
+     // 如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果
+    //滚动条的宽度
+  ::-webkit-scrollbar {
+    width: 5px; 
+    height: 5px;
+  }
+  //滚动条的滑块
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.65);
+    border-radius: 3px;
+  }
+
+
+  .anticon:hover {
+    cursor: pointer;
+  }

vue.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    publicPath: './',
+    outputDir: 'dist',
+    assetsDir: 'static',
+    runtimeCompiler: true,
+    devServer: {
+        proxy: {
+            '/api': {
+              target: 'http://192.168.1.21:39092/msg',
+              changeOrigin: true,
+              ws: true,
+              pathRewrite: {
+                '^/api': ''
+              }
+            }
+        },
+    }
+}