websocket调试

.env.development

@@ -1,2 +1,2 @@
 // 开发服务
-VUE_APP_API_URL=http://192.168.10.15:8082/
+VUE_APP_API_URL=http://10.155.32.4:8082/

README.md

@@ -132,7 +132,7 @@ Vue文件引入方式：
   export default main
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
   @import "../assets/css/main.scss";
 </style>
 ```

package-lock.json

@@ -1693,6 +1693,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431251047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1719,6 +1729,53 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1735,6 +1792,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz",
@@ -1751,6 +1818,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -3219,6 +3298,15 @@
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
       "dev": true
     },
+    "bufferutil": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.3.tgz",
+      "integrity": "sha512-yEYTwGndELGvfXsImMBLop58eaGW+YdONi1fNjTINSY98tmMmFijBG6WXgdkfuLNt4imzQNtIE+eBp1PVpMCSw==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "^4.2.0"
+      }
+    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/builtin-status-codes/download/builtin-status-codes-3.0.0.tgz",
@@ -4581,6 +4669,15 @@
       "resolved": "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz?cache=0&sync_timestamp=1601073714105&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdashdash%2Fdownload%2Fdashdash-1.14.1.tgz",
@@ -5456,6 +5553,35 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz",
@@ -5783,6 +5909,21 @@
         }
       }
     },
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
+      "requires": {
+        "type": "^2.0.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
+          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
+        }
+      }
+    },
     "ext-list": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
@@ -8114,8 +8255,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/is-typedarray/download/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -9023,6 +9163,11 @@
       "integrity": "sha1-tKr7k+OustgXTKU88WOrfXMIMF8=",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
@@ -9044,6 +9189,12 @@
       "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
+    "node-gyp-build": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.2.3.tgz",
+      "integrity": "sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==",
+      "optional": true
+    },
     "node-ipc": {
       "version": "9.1.4",
       "resolved": "https://registry.npm.taobao.org/node-ipc/download/node-ipc-9.1.4.tgz?cache=0&sync_timestamp=1614360132246&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-ipc%2Fdownload%2Fnode-ipc-9.1.4.tgz",
@@ -11963,6 +12114,14 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha1-NBeKx7uO4pTMXVVK2LUPf1RZ/Y4=",
+      "requires": {
+        "websocket": "^1.0.34"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/stream-browserify/download/stream-browserify-2.0.2.tgz",
@@ -12566,6 +12725,11 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "type-fest": {
       "version": "0.6.0",
       "resolved": "https://registry.npm.taobao.org/type-fest/download/type-fest-0.6.0.tgz?cache=0&sync_timestamp=1618335162053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftype-fest%2Fdownload%2Ftype-fest-0.6.0.tgz",
@@ -12587,6 +12751,15 @@
       "resolved": "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz",
@@ -12966,6 +13139,15 @@
       "integrity": "sha1-1QyMrHmhn7wg8pEfVuuXP04QBw8=",
       "dev": true
     },
+    "utf-8-validate": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.4.tgz",
+      "integrity": "sha512-MEF05cPSq3AwJ2C7B7sHAA6i53vONoZbMGX8My5auEVm6W+dJ2Jd/TZPyGJ5CH42V2XtbI5FD28HeHeqlPzZ3Q==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "^4.2.0"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npm.taobao.org/util/download/util-0.11.1.tgz",
@@ -13097,87 +13279,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618561008172&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697726574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
@@ -13860,6 +13961,37 @@
         }
       }
     },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "optional": true,
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "optional": true
+        }
+      }
+    },
     "websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -13991,6 +14123,12 @@
       "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-4.0.3.tgz?cache=0&sync_timestamp=1617822642544&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fy18n%2Fdownload%2Fy18n-4.0.3.tgz",
       "integrity": "sha1-tfJZyCzW4zaSHv17/Yv1YN6e7t8="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=",
+      "optional": true
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.1.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "crypto-js": "^4.0.0",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.1",
+    "stompjs": "^2.3.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue": "^2.6.11",
     "vue-json-excel": "^0.3.0",

src/api/config.js

@@ -0,0 +1,13 @@
+/**
+ * 国电电力宁夏新能源集中监控系统
+ * */
+
+//测试 - 国电
+export default {
+  webSoketUrl: 'ws://10.155.32.4:8082/gyee-websocket', // webSoket
+}
+
+//生产 - 国电
+// export default {
+//   webSoketUrl: '192.168.4.203:9008', // webSoket
+// }

src/assets/css/base.scss

@@ -1,7 +1,5 @@
 @charset "utf-8";
 
-@import 'default.scss'; // 用于覆盖上面定义的变量
-
 /* 公共样式 */
 body {
   font-size: $font-size-base;

src/assets/css/default.scss

@@ -1,3 +1,6 @@
 
+// 全局
 $font-size-base: 14px; // 主字号
-$font-color-base: #222; // 全局基础文字颜色
+$font-color-base: #222; // 文字颜色
+$border-color-base: #DDD; // 边框颜色
+$border-radius-base: 2px; // 默认圆角

src/assets/css/font.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "fontNameRegular";
+  src: url("../fonts/UnidreamLED.ttf");
+}

src/assets/css/index/index.scss

@@ -0,0 +1,94 @@
+
+.page{
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  >.mapControl{
+    width: 35%;
+    height: 100%;
+    float: left;
+  }
+  >.data{
+    width: 65%;
+    height: 100%;
+    float: left;
+    padding: 10px;
+    >.item{
+      width: 100%;
+      height: calc((100% - #{15px})/4);
+      display: table;
+      border: 1px solid $border-color-base;
+      border-radius: $border-radius-base;
+      margin-bottom: 5px;
+      >.title{
+        width: 30px;
+        padding: 0 5px;
+        height: 100%;
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        border-right: 1px solid $border-color-base;
+      }
+      >.con{
+        height: 100%;
+        display: block;
+        overflow: hidden;
+        .one{
+          float: left;
+          width: 20%;
+          height: 20%;
+          overflow: hidden;
+          border-bottom: 1px solid $border-color-base;
+          .name{
+            width: 110px;
+            height: 100%;
+            float: left;
+            padding: 0 3px;
+            border-right: 1px solid $border-color-base;
+            display: table;
+            >div{
+              display: table-cell;
+              vertical-align: middle;
+              text-align-last: justify;
+            }
+          }
+          .number{
+            width: calc(100% - #{160px});
+            height: 100%;
+            float: left;
+            border-right: 1px solid $border-color-base;
+            display: table;
+            >div{
+              font-family: "fontNameRegular";
+              font-size: 16px;
+              display: table-cell;
+              vertical-align: middle;
+              text-align: center;
+            }
+          }
+          .unit{
+            width: 50px;
+            height: 100%;
+            float: left;
+            border-right: 1px solid $border-color-base;
+            display: table;
+            >div{
+              display: table-cell;
+              vertical-align: middle;
+              text-align: center;
+            }
+          }
+          &:nth-child(21), &:nth-child(22), &:nth-child(23), &:nth-child(24), &:nth-child(25){
+            border-bottom: 0;
+          }
+          &:nth-child(5), &:nth-child(10), &:nth-child(15), &:nth-child(20), &:nth-child(25){
+            .unit{
+              border-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/assets/js/index/index.js

@@ -0,0 +1,21 @@
+import bdMap from "@components/index/map"
+import websocket from "@tools/webSocket"
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  components: {
+    bdMap
+  },
+  created: function() {
+    this.init();
+  },
+  methods: {
+    // 初始化
+    init() {
+      // websocket.init("/topic/popup");
+    },
+  }
+}

src/components/index/map.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="sjdpMap">
+    <!-- <div class="title">
+      <div class="font"><font v-for="(item, i) in orgHistory" :key="i">{{item.name}}{{orgHistory.length-1 >i?"/":""}}</font></div>
+      <img @click="orgBack" v-if="orgHistory.length > 1" class="ico" src="../../../static/mapBoard/goBack.png" />
+    </div> -->
+    <div class="date" v-if="dateTag">
+      <font>日期范围：</font>
+      <div class="input">
+        <a-range-picker v-model="date" @change="pushFunc" @calendarChange="initDisabledDate" :placeholder="['起始日期', '截止日期']" :disabled-date="disabledDate"/>
+      </div>
+    </div>
+    <div id="container" class="map"></div>
+    <!-- <div class="mapExample">
+      <div class="one" v-if="userinfo.type <= 0">
+        <img src="../../../static/mapBoard/mapExample_1.png" />
+        <font>总中心</font>
+      </div>
+      <div class="one" v-if="userinfo.type <= 1">
+        <img src="../../../static/mapBoard/mapExample_2.png" />
+        <font>分中心</font>
+      </div>
+      <div class="one" v-if="userinfo.type <= 2">
+        <img src="../../../static/mapBoard/mapExample_3.png" />
+        <font>隧管站</font>
+      </div>
+      <div class="one" v-if="userinfo.type <= 3">
+        <img src="../../../static/mapBoard/mapExample_4.png" />
+        <font>隧道</font>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import BMPGL_style from '@components/index/map_style'
+import BMPGL from '@components/index/mapInit'
+export default {
+  data() {
+    return {
+      userinfo: "", // 用户信息 - 从缓存中取
+      orgData: [], // 组织机构数据
+      orgLevel: 0, // 记录当前组织的等级
+      orgHistory: [], // 记录当前层级到顶级的所有组织id
+      orgNowChoose: [], // 组织机构 - 当前选择的组织id集合
+      sdFId: [], // 选隧道 - 存隧管站ID
+
+      timer: null, // 处理同一个元素上的单击和双击冲突
+
+      date: ["", ""], // 日期
+      disabledDate: "", // 日期控件可选的范围控制函数变量
+      startDate: "2019-10-10 00:00:00", // 默认项目其实日期
+
+      moveTag: false, // 是否移动
+
+      map: null, // 地图
+    }
+  },
+  props:{
+    dateTag: Boolean, // 是否开启日期选择
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+
+    //初始化
+    init() {
+      this.initMap();
+    },
+    // 初始化地图
+    initMap(){
+      let _this = this;
+      // 地图实力存在需要先销毁
+      // 销毁地图，当使用 WebGL 渲染地图时，如果确认不再使用该地图实例，则需要调用本方法销毁 WebGL 上下文，
+      // 否则频繁创建新地图实例会导致浏览器报：too many WebGL context 的警告
+      if(this.map !== null){
+        this.map.destroy();
+      }
+
+      BMPGL.init().then(BMapGL => {
+        // 创建地图实例
+        this.map = new BMapGL.Map('container');
+        this.map.centerAndZoom(new BMapGL.Point(106.152924,37.387416), 8);
+        this.map.enableScrollWheelZoom(true);
+
+        // 改变地图风格
+        this.map.setMapStyleV2({
+          styleJson: BMPGL_style
+        });
+
+        // 描边
+        // var bd1 = new BMapGL.Boundary();
+        // bd1.get('宁夏', function (rs) {
+        //   let count = rs.boundaries.length;
+        //   for (let i = 0; i < count; i++) {
+        //     let path = [];
+        //     let str = rs.boundaries[i].replace(' ', '');
+        //     let points = str.split(';');
+        //     for (let j = 0; j < points.length; j++) {
+        //       let lng = points[j].split(',')[0];
+        //       let lat = points[j].split(',')[1];
+        //       path.push(new BMapGL.Point(lng, lat));
+        //     }
+        //     let prism = new BMapGL.Prism(path, 5000, {
+        //       topFillColor: '#1e6aff',
+        //       topFillOpacity: 0.4,
+        //       sideFillColor: '#04367b',
+        //       sideFillOpacity: 0.4
+        //     });
+        //     _this.map.addOverlay(prism);
+        //   }
+        // });
+
+        // 描边
+        var bd1 = new BMapGL.Boundary();
+        bd1.get('银川', function (rs) {
+          let count = rs.boundaries.length;
+          for (let i = 0; i < count; i++) {
+            let path = [];
+            let str = rs.boundaries[i].replace(' ', '');
+            let points = str.split(';');
+            for (let j = 0; j < points.length; j++) {
+              let lng = points[j].split(',')[0];
+              let lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
+            }
+            let prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#00E6FF',
+              topFillOpacity: 0.4,
+              sideFillColor: '#04367b',
+              sideFillOpacity: 0.4
+            });
+            _this.map.addOverlay(prism);
+          }
+        });
+
+        // 描边
+        var bd1 = new BMapGL.Boundary();
+        bd1.get('吴忠', function (rs) {
+          let count = rs.boundaries.length;
+          for (let i = 0; i < count; i++) {
+            let path = [];
+            let str = rs.boundaries[i].replace(' ', '');
+            let points = str.split(';');
+            for (let j = 0; j < points.length; j++) {
+              let lng = points[j].split(',')[0];
+              let lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
+            }
+            let prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#3D8BFF',
+              topFillOpacity: 0.4,
+              sideFillColor: '#04367b',
+              sideFillOpacity: 0.4
+            });
+            _this.map.addOverlay(prism);
+          }
+        });
+
+        // 描边
+        var bd1 = new BMapGL.Boundary();
+        bd1.get('石嘴山', function (rs) {
+          let count = rs.boundaries.length;
+          for (let i = 0; i < count; i++) {
+            let path = [];
+            let str = rs.boundaries[i].replace(' ', '');
+            let points = str.split(';');
+            for (let j = 0; j < points.length; j++) {
+              let lng = points[j].split(',')[0];
+              let lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
+            }
+            let prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#7AAFFF',
+              topFillOpacity: 0.4,
+              sideFillColor: '#04367b',
+              sideFillOpacity: 0.4
+            });
+            _this.map.addOverlay(prism);
+          }
+        });
+
+        // 描边
+        var bd1 = new BMapGL.Boundary();
+        bd1.get('中卫', function (rs) {
+          let count = rs.boundaries.length;
+          for (let i = 0; i < count; i++) {
+            let path = [];
+            let str = rs.boundaries[i].replace(' ', '');
+            let points = str.split(';');
+            for (let j = 0; j < points.length; j++) {
+              let lng = points[j].split(',')[0];
+              let lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
+            }
+            let prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#FFB13D',
+              topFillOpacity: 0.4,
+              sideFillColor: '#04367b',
+              sideFillOpacity: 0.4
+            });
+            _this.map.addOverlay(prism);
+          }
+        });
+
+        // 描边
+        var bd1 = new BMapGL.Boundary();
+        bd1.get('固原', function (rs) {
+          let count = rs.boundaries.length;
+          for (let i = 0; i < count; i++) {
+            let path = [];
+            let str = rs.boundaries[i].replace(' ', '');
+            let points = str.split(';');
+            for (let j = 0; j < points.length; j++) {
+              let lng = points[j].split(',')[0];
+              let lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
+            }
+            let prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#D24EE9',
+              topFillOpacity: 0.4,
+              sideFillColor: '#04367b',
+              sideFillOpacity: 0.4
+            });
+            _this.map.addOverlay(prism);
+          }
+        });
+
+        // // 创建点标记
+        // let _this = this;
+        // this.orgData.forEach((item)=>{
+
+        //   let quanStyle = item.type === undefined?4:item.type;
+
+        //   let sizeDefault = [20, 20];
+        //   let size = [54, 54];
+        //   let mouseoverColor = ""; // 离开
+        //   let mouseoutColor = ""; // 进入
+        //   switch(quanStyle) {
+        //     case 1:
+        //       size = [54, 54];
+        //       mouseoverColor = "mapExample_1"; // 离开
+        //       mouseoutColor = "mapD_1"; // 进入
+        //       break;
+        //     case 2:
+        //       size = [54, 54];
+        //       mouseoverColor = "mapExample_2"; // 离开
+        //       mouseoutColor = "mapD_2"; // 进入
+        //       break;
+        //     case 3:
+        //       size = [48, 48];
+        //       mouseoverColor = "mapExample_3"; // 离开
+        //       mouseoutColor = "mapD_3"; // 进入
+        //       break;
+        //     case 4:
+        //       size = [44, 44];
+        //       mouseoverColor = "mapExample_4"; // 离开
+        //       mouseoutColor = "mapD_4"; // 进入
+        //       break;
+        //   }
+
+        //   // 创建图标
+        //   var myIcon = new BMapGL.Icon("/static/mapBoard/"+mouseoutColor+".png", new BMapGL.Size(size[0], size[1]));
+        //   // 创建Marker标注，使用小车图标
+        //   var pt = new BMapGL.Point(item.latitude, item.longitude);
+        //   var marker = new BMapGL.Marker(pt, {
+        //     icon: myIcon
+        //   });
+        //   // 将标注添加到地图
+        //   this.map.addOverlay(marker);
+        //   // 添加鼠标事件
+        //   marker.addEventListener('mouseover', function() {
+        //     var opts = {
+        //       width : 0,     // 信息窗口宽度
+        //       height: 0,
+        //       offset: new BMapGL.Size(10, -10), // 偏移
+        //       title : item.name , // 信息窗口标题
+        //     }
+        //     var infoWindow = new BMapGL.InfoWindow(item.remark !== undefined?item.remark:item.lineName, opts);  // 创建信息窗口对象
+        //     _this.map.openInfoWindow(infoWindow, new BMapGL.Point(item.latitude, item.longitude)); //开启信息窗口
+        //   });
+        //   marker.addEventListener('mouseout', function(e) {
+        //     _this.map.closeInfoWindow();
+        //   })
+        //   marker.addEventListener('click', function(e) {
+        //     _this.changeOrgID(item);
+        //     let mouseTag = e.target.getIcon().imageUrl.indexOf("/mapD_") >= 0;
+        //     if(mouseTag){
+        //       if(_this.orgNowChoose.length > 1){
+        //         var myIcon1 = new BMapGL.Icon("/static/mapBoard/"+mouseoverColor+".png", new BMapGL.Size(sizeDefault[0], sizeDefault[1]));
+        //         e.target.setIcon(myIcon1);
+        //       }
+        //     }else{
+        //       var myIcon1 = new BMapGL.Icon("/static/mapBoard/"+mouseoutColor+".png", new BMapGL.Size(size[0], size[1]));
+        //       e.target.setIcon(myIcon1);
+        //     }
+        //   })
+        //   marker.addEventListener('dblclick', function(e) {
+        //     _this.getOrg(item)
+        //   })
+        //   this.map.addOverlay(marker);
+        // });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+
+    },
+    
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.sjdpMap{
+  width: 100%;
+  height: 100%;
+
+  .map{
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    ::v-deep .anchorBL{
+      display: none;
+    }
+  }
+  .mapExample{
+    position: absolute;
+    bottom: 30px;
+    right: 60px;
+    >.one{
+      overflow: hidden;
+      margin-top: 10px;
+      >img{
+        float: left;
+      }
+      >font{
+        line-height: 20px;
+        float: left;
+        margin-left: 9px;
+      }
+    }
+  }
+}
+</style>

src/components/index/mapInit.js

@@ -0,0 +1,21 @@
+/*
+ *  初始地图接口数据
+ * */
+export function init() {
+  let ak = "bxxBdZbwUaKERLhkKzIXtXTFTEDXDKpe";
+  return new Promise(function(resolve, reject) {
+    window.init = function() {
+      // eslint-disable-next-line
+      resolve(BMapGL);
+    };
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+export default {
+  init,
+};

src/main.js

@@ -48,6 +48,9 @@ Vue.use(vuescroll, {
   name: "VueScroll", // 在这里自定义组件名字，默认是vueScroll
 });
 
+// 引入外部字体
+import '@assets/css/font.scss'
+
 Vue.config.productionTip = false
 
 new Vue({

src/tools/webSocket.js

@@ -0,0 +1,54 @@
+import Stomp from 'stompjs'
+import myconfig from '@api/config'
+import store from '@store/index'
+
+// ============================一般使用的变量============================
+let number = 0;
+
+// ============================  大函数体   ============================
+export function init(topic) {
+  let wsClient = null;
+  var url = myconfig.webSoketUrl;
+  // let socket = new SockJS(url);  // 这个地址要找你们后端
+  // wsClient = Stomp.over(socket);
+  wsClient = Stomp.client(url);
+  wsClient.debug = null;
+  wsClient.connect({ topic: topic }, wsClient2 => connectCallBackSubscribe(wsClient, topic), error => reconnect(error, wsClient));
+}
+// 断线重连
+export function reconnect(error, wsClient) {
+  //连接失败时再次调用函数
+  number++;
+  wsClient.connected = false;
+  clearTimeout(setTimeout(init('/topic/popup'), 1000 * 5));
+  debugX("DataAdapter reconnect:" + number + " 次");
+  return;
+}
+// 链接并推送数据
+export function connectCallBackSubscribe(wsClient, topic) {
+  number = 0;
+  wsClient.connected = true;
+  wsClient.subscribe(topic, stompMessage => reflexWindturbineBasicInformation(stompMessage));
+}
+// ============================  解析函数体  ============================
+export function reflexWindturbineBasicInformation(stompMessage) {
+  var newdata = JSON.parse(stompMessage.body);
+  // store.dispatch('getupdate', newdata);
+  console.log(newdata)
+
+}
+// ============================  其他  ============================
+export function debugX(text) {
+  console.log(text);
+}
+
+export function close(params) {
+  // console.log("关闭socket")
+  socket.close();
+}
+
+
+export default {
+  init,
+  close
+}

src/views/index/index.vue

@@ -1,68 +1,183 @@
 <template>
-  <div class="home">
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
-    首页<br>
+  <div class="page">
+    
+    <!-- 左侧地图区域 -->
+    <div class="mapControl">
+      <bdMap></bdMap>
+    </div>
+    
+    <!-- 右侧数据区域 -->
+    <div class="data">
+      <!-- 综合指标 -->
+      <div class="item comprehensiveKPI">
+        <div class="title">综合指标</div>
+        <div class="con">
+          
+          <div class="one">
+            <div class="name"><div>装机容量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>MW</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>上网电量(日)</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>日发电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>月发电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>年发电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          
+          <div class="one">
+            <div class="name"><div>年等效可用系数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>%</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>利用小时(月)</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>小时</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>日故障损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>月故障损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>年故障损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          
+          <div class="one">
+            <div class="name"><div>装机台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>运行台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>日维护损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>月维护损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>年维护损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          
+          <div class="one">
+            <div class="name"><div>待机台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>维护台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>日性能损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>月性能损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>年性能损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          
+          <div class="one">
+            <div class="name"><div>故障台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>中断台数</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>台</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>日限电损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>月限电损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          <div class="one">
+            <div class="name"><div>年限电损失电量</div></div>
+            <div class="number"><div>734</div></div>
+            <div class="unit"><div>万kwh</div></div>
+          </div>
+          
+        </div>
+      </div>
+      <!-- 完成电量 -->
+      <div class="item comprehensiveKPI">
+        <div class="title">完成电量</div>
+        <div class="con">
+          内容
+        </div>
+      </div>
+      <!-- 功率曲线 -->
+      <div class="item comprehensiveKPI">
+        <div class="title">功率曲线</div>
+        <div class="con">
+          内容
+        </div>
+      </div>
+      <!-- 日发电量 -->
+      <div class="item comprehensiveKPI">
+        <div class="title">日发电量</div>
+        <div class="con">
+          内容
+        </div>
+      </div>
+
+    </div>
+
   </div>
 </template>
 
 
 <script>
-
+  import index from '@assets/js/index/index'
+  export default index
 </script>
 
 <style lang="scss" scoped>
+  @import "@assets/css/index/index.scss";
 </style>

vue.config.js

@@ -41,6 +41,13 @@ module.exports = {
     //     });
     // }
   },
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `@import "./src/assets/css/default";`,
+      },
+    },
+  },
   // 去掉console.log
   configureWebpack: config => {
     if (IS_PROD) {