traffic-diagram 1.0.9

package/dist/traffic-diagram.umd.chunk-src.js

@@ -0,0 +1,2015 @@
+((typeof self !== 'undefined' ? self : this)["webpackJsonptraffic_diagram"] = (typeof self !== 'undefined' ? self : this)["webpackJsonptraffic_diagram"] || []).push([[1],{
+
+/***/ "17cf":
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__.p + "static/img/demo.18a57edc.gif";
+
+/***/ }),
+
+/***/ "1ed1":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "2621":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAT9JREFUWEftlUEuBEEUhr//EOIKQoTEBisOwFKQWIvMAnEOEzYjVhIL9hzArNgSpxCH+KWle8x09HRVYWyqFr3ofu/9X//1XpX4wbJ9UqRLOk0to9RE2zvATZm/K+k2pVYSgO0V4LEmuCrpKRYiGsD2NPAKTNXE3oF5SW8xECkAz8BCg8iLpMU/A7B9B2y0CNxL2gyFCHbA9hlwGFj4XNJRSGwwQL2YbQ+960taDxGsx2SA7MC3Dti+lLQ/rqlim9D2A7AlqTiwBmsEwPYscA0sSRq7PYkAcyVEvyIYiNjeK8Wrb4OgBifWhscwcASrnI6k3udNWjwiD5lArdawnqROBdAFjltTfjfgC6B0YRtIutMTuEa3oCpgewa4ApYn3oTDf2H7QtLBxMcwxsrYMWyqnY/i7EB2IDuQHfh3Bz4Azh/GIdToBDMAAAAASUVORK5CYII="
+
+/***/ }),
+
+/***/ "2e1d":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA4BJREFUSEuVll9oFHcQx7/f3bvr3eWS3KnppaGkDeiLQu2L2soq/QO2tCJ90MRoW6FS6lsfRFIFS19aBBGfg9W21ohRQWhpMYYaaMBW6JN/IijSslq8XMz9Sc6cudzu6O7enfd3c87j/mbmMzO/+c0s4SbHsj2KKL2E+Y4AKwl2WOoCmSIwIVAumzTP4vPAv43csO7BYLZbVeTQUye9AFTXIEhDIOcMgwP4IqBX69YAfCfm+k1wECKtro5rDzMKuCe3OzBUflQB8Byf20tFDkPw7DutivAaIKsXBRIiJvfldwePFHVLjnwnMzsgPFXh3NH6NjcfPOzzZ/+ByPJmIKB8nPs0dNrSdQA/Zbt9av4mhaFKB/xt/m5wC76h6f05s5rgFUKCi0GEkskZnlXYFdBtgH9o9gyAvnJDIW7Pe0Jr0ct08bv/1MwukD8uBiicDz/e2bqd/pOpHvrUO7XdQh1iXs/2t222DFqGkq+bqud7AK89LZu3CYghOWMFW87NDIjgUH0D0ed621+xszw7oynAeEnPvvyyZqjjgMB+tpxPj4DYVBcg0B9tLQISmqqqJYBAOUjINkCsjBrJKEMXUvcIvFxPQwg981HYzqDl9GRU/IE1FPOxrWvkbjxqN2dDWf8PFGyraw/cZ+uv6QWKeBqEoM9scQBu0vZLahjOq68QIfNs/z21ABdA+sNICRC+kAznX/B0WV68mYX/kxOR2fCa1NcCHASg1ARBzjN8MXEPDUoEQE+9v8QGBC9NdflM9RaANtuRmF+SygcCvOeS3X1GLk2PAA0uGdCTm5bagMhoQoNIWRcx75K5EwMwyqV/JAYAs0GbQp9+d1kBENcURXkGWOxiHMIBto/Eejw+7x1Casay1UXTbxUAY3FNRfMAAY28oq6wR8WyP6fOsGpUFFLUH27ssDPoGItrUNl0BgIMP9zYsd0GRMYT3V7mbwKoHnZ6XCsAxuMaWfaSXUvEzIKoq5IbljjDzpLolakdoFSNa9En10edDMbjmqI2AbB2giGfxLWovXgqFk7n35N7QZQWjgBpEkedcrGbIp+5B27Pp32xN6K1C6do2HU11m+SgwSea2UKkaFgz4O1TuRFqbv0O/968Co9/K7w/N2XPmAIcB55+Sr25kv/VWdY/6+ieC9XYz2qij4Qb4NcCZEX7SMyDpEJCMYMA8OT6zob/rY8AZd9TmuVGM/hAAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "5369":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA1pJREFUSEuVlk9oXFUUxr/vvpmxk5npm6RNEw0EA9ZFFaGbqkULVShSBBUxTdJSwSqty1JCWjeupAURiiA6SIvWpjZTCwWlEoMUFNRuuhDrpgulxnTS/JtJppkmmfc+mRczzr/3Mt7V455zz++cc8895xFB69Nsj1G0l3CfE7CNYHtJXdAUyZsSr7kspPFW8g8/M2woSBW6LaNTBHoBWIFOkI6gS47DIRyO3q7VrQNEzi72u2AKUiLQcL0wb8Ajy4eiw5WiKkDozOIxGr0PoWFkIrIQQ4TiDeGE5HKweKjlgzV52VDkXH4A4nk/4yCKrqu9BoyBuAzA+EFAHVg+GL9Qkq8CPi90R6ziTYqNPfM0+fbSgdgnpc/IF/NDhDnll0JR+WUn9Bhej972ABuGFy4C2Od/gKeXBuJHK+WRC/fOGLlvBNzTyP39iT5uOJftYcS6FVAtDogrENxCX6IXqYmWqJ34DEAYwEvlLNSTHC07WxlLzx8XcLKZilns3UikZ+0WhLLN6BM4wdhXuVEQexocUK139161PUDMsmoBdbr/2htj/Ep2nEJXJUA0v0o6a6DTlfsLryTZmp61i2FTDRAGRQwQ2F5lBxhn4uvcCqXQfwKdn2fhMCYmVuyuR6qqKvdicg4Q7W9yyUpDub/tPB6FlcjnPqJQvniRRdpXsyuoBJAf52AfxV4uNZPnsk76r6idiH8IF2+W98glJr+dGQdZlSIAN0SljPhuJWTuhbautqszG13DP6vheg/gQQBP1Dg1ztbvZkaB5i55bs8mto7N2pCq74AUpLr2ImCMm76fPo4my3Tm+c0ewBi3qTKF8A7t0UxPKBK+RSi4LQOY3r0KsELrAwQ6RWNt9cLa/MPURQa0irW8Tu1q9wChB5x1IxAwMr2rvc8DtP442x02zm/rzYC7z2zxAOFoMRhALqy41uNzz7atNrvS6vgp0w+aYd92DWBy5yogEgsAsDRRuX9yZ/uXXhOuLKvOXyaPgfAdOCAuSQgTeLnhG/GMYzDzVEf9wFk78ND1TL9Lpgj8r5EpIk/hyJ0dHf4jcw3S+fOdhxHiSQKvrTv0AUfCZTgayjz9YM0DrElRbdgd1zM9loV9IHaD3AZpi6cj3QX5O4RrjoORySc7fX9b/gEvpkFrljgF/wAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "5453":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA1RJREFUSEullttrXFUUxr/vnMk008k0l3aSqBjNQxGqoL54ow0kQlEoikiTxooXihhfLaHVf6CCl0chiLdiNIkGb8WaliaQOVT7pIIWpA9qDXSSyWWSmWSSyZzz2XOOGSaTzJyI+2nYa+3vt9da+6w1RLX1XrrdUKSbcLoEHCAYd90FpQhcFYxxh7kRvNTwRyUZbmsYyLWZht64KdINwKx6CdIW9Llt8xRejlwv990CCH+w0uuAA5BiVYW3GrMG2Jc/ERksNW0ChN5fOUlDb0LYPrIgIiE57C+c2P32hmtRKHw2+wzET8rE1wHUBOhu9qGroGfzz9V96p7zAR/n2sJm4TeKdRtiAn4R+K4BDVQDOFAfwVcI3Fs8S2XzduhuPB+57gFqBzNDAHqKDuL3a2vRbvyNZdyBsLsfqc3Fbcd+ATBgGvwotxpJef5/IY/bEd21a3mE1GMllxlePR47xtqz6XaGzWvF1yI4DBlPrhyNngtKeal999DyEcn5GoTx776tvL2f0ZGl0wLObBIjC4LTb5jmBGznVRGOY/PD1Z7YpBfxaKbDkF6kvHDecWy782Z63yp/0gReY/SLxTEQhyvc9icA9/s2ji8/vedR91d0dOkSoC5/Gz9DuK/C+Yus+yo9ReG24HTQyjxVf8j1i325mAB0MOiMgCnGvl1cpxQKdpaVeaLRB3yzkCAYDCALrP8uvY6dAARr6YgP2HNuIUEiEAByjQ3n56ZABqdIsNKPN3mAhvPzCewE4Kao8cLcGFCxyKWZsxYO7/UAjRfmEkBwBAIucu+l2dMof6bbFESUNd8V9wBN46kEFVwDCK+zfizZHgrXXCNUvS1D1mynD9g3kUogoMgC7YJh7vdaxb7J1BBLWsX2L0pWqqPZA8QnZ3YAwPBsR/yYB2hMzLfVGPavATPAmjnoA5otF1ClBmRm3THvWTjU5Dc7d7VcTvaCxmCVWZAV8bv38Qp3ASh23k0Ru+1aPD79SPwz/0MvWa0/Tp8E8b8GDoT+5EMtWwfOBufWK8lehxwg8J9Gpogshb4bD7RUHpkbkNYfbtyJEM8QOBo49AFbwihsnUo+fMuf5Q+k6uxtuZJsN030gOgEeQBSsydAzkC6CmHCtjE8/WBrxb8t/wCthUJrjd12rgAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "64e8":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAhxJREFUWEfFlz+oj1EYxz/fLMJAYbhRMvg3KNlYSCxiuMMtG0ooBhQjBgMpFrndgQxK3U2mO1w2C8VgVbiyWFgNXz31qp/rd855z/m95alfv+F9nuf7eZ/zPOecV/xnU4u+7W3ALmBD9/sOfAK+AEuSfvbN2xvA9nrgBDANHCgIzAFzkt6WQHoB2D4NXAW2lxIuex4QZ3MxWQDb+zvh45XCo+4PJF1IxScBbN8Ark8gPBp6U1Lk+8dKFYi1PJOBeAdsBKYKoIuSDlUDRIDtF8DRkeBF4AkQSZc6n5iIi8C5BMgvYLWk+P/Lik1oe02IATuAW5JujxOxHZPxMlOJg5JeVQN0b7gFWCspSj7WbMeUjIXrAqYkfWsCKDWi7T3AU2Bnwnde0kxTD/QQXxW7H7Au47tP0uvBAWxvBj4XIGckzad8ik2YWfO9wJtJxCO2CcB2jN2HScUnAXgOHMsAZMs+GlddAduHgYUhxJsqYDt2u4cJgLgLRGP2tpYKXAHuJhRmJZ3vrd7ShIUtN3nqDT6GNW+Z861egqGE/+RpBrC9EtgKrIjdUNKPFrgmANtxxYrTb7Tj70i6VgtRDWD7FPAoIXRP0uUaiBaA98DujMgmSV/7QrQAuJB87M1nsDG0HSdgnIQpG3vzGRIgd/V6Jim+nnpb9RJEZtsngcfLVO5LutRbuXNsAuggjnSfarEPfJQUR3S1NQNUKyUCfgPzkqIhIsJLqwAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "6ddb":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlr0uBVEUhb/1Alq9SiRKnQgJiUSD5N5KwhOoJQo0PIAXoNC4hFBQKK7o6ahVGp3ekpPMyPxdc2cUEjmnO7P3XvvLyt4nI/746I/7EwGiA//TAduzxe2S1K/auEoHbE8DD5mCE0lrTVbW9i6wk6npSDorgRU/2B4FAu14EjuUtNmkeZprOwAEkHDegRlJL1mtkgO2L4DlJGmvYWND7m0J93BSiCtgRdJnqpsDsH0AbDVs2jR9X9J2CcD2OnDUVK1l/oak41D77YDtEeAcmG8pOmzZLdCV9JEDCBfbY8AlMJmo9YDnAcrZCQ9Dez8gbwLoJLFHYFXSa+UMJBBTwDUQtiGcnqRuUdx2OmAh1Jc0V5Fzmmn+BixJevpxCxKIReAmk1iCqAOwnW0epBYk3RUhWz/FdQDDDkQEiA5EB37jQO6nY9APR906tgaoEx42HgGiA9GBL9fygiG6SEn5AAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "78da":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA55JREFUSEudVV1om2UUfp73y7o2bZq/tqtBooN5o8UbBxPBDgrWwgLCKl3tpjIQxxRkqNUO7wSdKCpD6Bxjwspql26j4BZtu9mC7KrIrjZ3Ieo6f9M2+dI0W7sm33skaY1J+iXdei6/c97nec9znu+8RKU4kdiqpKaL0G0CPEqgCQREMEPyuggntaXDOFhzsxwMbRPHF4OGgSMU2QPAqHgJwBIybFk4jAM1t0pr1xBUfZV6QcM4DhHXOsDFaXJBUV5d3u88U5goInCcvPMWlXwCyQqxgWBWPb6d2e/87L/TeaCqgVQPhKc3DP4/ooCyb/mluq+zn1YITi0Gq5R1jcD9yVKmSQEWlrXRgpdrbuUIqgdTg4D0VBJFgBQFRzNKIgpMAnxcCd4EZHuZc+Glva5uVg8ktrLK+Hkdt5gW0Lrc7bpWBDYsRo2VGgSRdVtpWCKObawNJ98V4qPKt5dDi13uo86h2wEY1geABMRQJxY7XedwOlbv3LzpVwj8ayxK9LH23PwYiPZKBBb0w0ud3una8/PfAejI1Qo0M+mWVHfDDef55FlCnl+DIRhn3UjidwIPViJwpLXH7PLNu0YS2T/2obxhtA4lO32RupFEP4GDpRgC/EHXhUSaAkclAmNphaD+m8Q0gGC+VnQo+ZwvUn8h0Q+xISAzdH9rpmFLIMMAtwDYqW5LjsAdMadB3oDoaoA7RSSUDPki7ovxfpBrOgB5l57R2J8AAzbtHZtP/n3IUx84JiJTNHgHGk8kpj29nqA5AmKXBkLJDl/EPRq3lQhZibzjsVEAz9pINGy2+3P2847FewE0me3ed0CK91L8IkR2QeuQ2dEY8Y7N2XcAjNM7MdurhB/bzoDqw1ib773CnO/yzB5SnQKwWWsJmc80Rvzfz/XDZsiA6qP3UjyoHPoXwn7QovBlrNX/Okjtn5h5A0p9ToFasaqE5toaIw0T2Q6KhyyAlVnOPJJbFQ0/zA4QeLGck4Q4Q/AmRPqKakReUUomLVHvE9hbmBNgaK61sWeF4MpsgMB1QjyV7HrPOXIhrY0W82nfyrLLRtOV6G4YPJtv/57RSgoJgXBf9KnGgnW9WtM8FX1NBF9smCQHjt5/ntzyaf5vL73oA1PR3SBPQu5PruwboEQO/LWjeagQ0/ZpbLg6G9hk6SOrb0TFNQLAAhFegj5sbg+s/+gXsgd+jAchd7tFoY2Cx0A2rdpzBuRPEExaFsLRHc2/lRvZvxxUd2W5o+D/AAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "8aaa":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPlJREFUWEftkDEuhEEARt+7gEKjcgFxAQoKCm5BQqOh4BQUNBqbcAsKCgouIC6g0ihc4JNNVrPZ3Zn/F43MlDPzfd/Lk1+cJAfDuHrZt8a+wSRrwOMov64+9enqBZBkHngDFkajH8CS+tkVoi/APbAxNvagbv45QJJz4HDK0IV61AWik4Eke8BVYWBfHdRCVAMkWQGeK4tX1Zeav1UASeaAV2CxphR4B5bVr9L/WoBbYKtUNvZ+p26XMkWAJKfAcaloyvuZejIrOxMgyQ5w3XP8J7ar3kzrKBqYFEySSfdq577OgeFwA2gGmoFmoBloBpqBZqAZ+FcGvgHC1IwhOqX0yQAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "948f":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA6VJREFUaEPVmL1rFkEQxp/nD1BUBAtBU0TwAwSx8KtR0C5KGgMqihgQtVBEbGKhaayCSAiCiBFBghgLJVhYxUIwoFgpCFpEixSKhQbUbmTCXtj33N3bu917Jdu9997NPL/9mJ0ZYokPLnH9aA1ARA4DGAKwAsB9ktfamKxWAIz4RyXBw21AZAfwiC9YskNkBagQ3wpENoBI8dkhsgDUFJ8VIhmgofhsEEkAInIIwFNHeJwEoGHUHk8A9DveTTrYqQAvAewpiVLxtwBMl57vA3AFwP7S818AVpP83eSeSAV4A2C75XiS5ICI7PUAvAXwHMBOWyzJxjoaf6gCRGSrEboKwDjJQfPcCUDyhYj0AHgIYIeB+H9bqJhFEekl+cn67QWw3ukhOdtk23SsXqoB1/e+LaQrkNtf1BYSEU3E+ozzaZKXQ0KaApgtOQ5gDsBtks+qgCsBjPirliGNFutJfvMZTwD4DkDPUzEGSGpU844ggEN8YWgTyQ85AURkHYDPDptBCC9AQPwMyV0tbSG9P87WgXACiMhFADcchl4DOGpHnNyHWES0jijf4urGuRL/AIjICa2gHMI0gvST/FF1sJqeASvERkN0AIiIRpoph0B95lqREIsrlahit/8/F7MSiwCeWavjsJvvLm4nG+AjgN5uqkjxVeRPNsA7AFtSjHbx2zmSa9WfDXAMwIMuikhxdZOkRsrOvlDgHBQ5fh2nbR3iCZI62QvDFUZdmaS+u5DrxxC0GEbvkTxla/BdZL5wGgWRAhC4yDS5O1OewFAqcQTAhGPGFwsX32o0BRCRuwA6Ztj4GCV5weWvKpk7rWmt48MNoXSiCYAWRQA0lJfHSCh9j0mnLwEYsazOk1weOgtNANSeiPwEsMyyfZ2kNgK8oxLAGNZ6QBOsLwDOt5XMiUjhR90+jmkGRwHERB77naYrUNePM4zWNSIiKwGssQucGAAR2QhgluSfuj4rw2isQREZBXDS7NsZAMd1e4UARGQzAI022huaBzBYVTYmn4FAuCwngFrwHACwzdPY+gpAc30753pFcnfspEXfAzEGRaTcmdPPtPAZ9gCMORLGKZLaY200kg5xoG7WAuhgSdF7T7bbF9M+8dElAZgQqz0ju+1SZyYr2yZVxpIBEiCSxWcJo8UMBbaTaxKziM8KYFbC146xIbKJzw5gIHxtGf07q/hWAAyEq57ILr41AAOhld0ds3eGUm7b1m7iqhDXjf+zhNFuCPX5+AtWAppAsGluPQAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "9518":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_9b8515cc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("e7e7");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_9b8515cc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_9b8515cc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "99fc":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlTEvBVEQhb9T8wPUOlHIS/RoRScRjYRoRaFQUFBIFAqVRoFoaYmORiIRyYvCL5DQC+3IJPsS1u67k312q532zsz59szcvSIYZrYOfEg6DZaE0hTJMrNZ4CrLHZf0EqmL5CQBzGwUeAaGsoZdSZ1I80hOBKALTOSaHUlaiwikcvoCmNklMF/SZFXSSUogdV4KYGZ7wHaiQUeSO1Q5CgHMbAk4D3R9kjQZyCtNiezALTCd63AnaWYQ4V5tC/DvDpjZLnAg6TMyojoAdoBlYEHSYwqiMgAwB4wBwzmRKcBd8FiRdNYPoipA6sN+nvs4NssKmgBw7etsJH/2oikAh9iQdJh3ogmAV2BR0n3RGAYFOAbeChr7TfC48Bsh6auOHfBr5gK/IvsPOMCWpP3UtlZ1oPQtyAAeJN2kxP28DoARSe8R8VoAosLta9g60DrQOtA60HPgG3HYvyHuUz0OAAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "9b08":
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__.p + "static/img/demo.c7910627.gif";
+
+/***/ }),
+
+/***/ "a75a":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAy5JREFUSEullltIFGEUx///2XXTdF1XXdcKJCFfquduVFCBRBH0UJpZSUQUPiaSRUQRYRQRRC8iRUVWWmF016igwvK9evGhCKH1suuumpd1Z07NbqM7O+t66XsZ5pwz53fO953vnCFSrcbRYkWUMkLbLMBygh7dXCB9BL4JlLcatRYczvg+nRsmVTSMFtkUufDXSRkAW8ogSFUgD1SVx3Ek42eirQXguDFSoYENEHGmdGxVDivg0fChjKZ4lQlgvz5SQ0UuQZA8s5mIhIjG2sihhZcN00lHjtvDeyG8M2/nUx4FlH3hA1l3dVEMcGu0yGGLfKUwKz5IgZwN73eeMWSOO4N1FKV+pkSEMhxW7StQlfEzCkhvGroPoDzhw3Njlc7ThmzB3aFqgtcgMtvtax6rdO5h+u1gMR22rvhqEQ3nx/Y6TxnO0++F9pPKTQDKTNHH6VUJqyXMbBmsE2AqbUH9SHn2SZOjq10L4FxmjfwgxgGKbruwZTD6TKigE8x8GGoDURpVCC/83pV9Yg5RTppmPgpZAABeM+txsJuCJbqlRjn2e6f7ynwAztagBSBAN51PQxMUsUed6nUMHBnakdM4V0j2kyQAMkLXi+AEDEDMqypUqga3uSZvZPazQDXJq/GFENruNp2J6/mAdYvIcea89HeDjG5R3IpAYVmw1N1qyFxtgYsU1Brvwa25JkDOq0CyM+imu93fBvw7ZHMNjFOTnYGtea8McW67/6YAVfr7QGmeCeBu9yc7g9fMe9Nfh/gyneXm+7fkmwB5b/qtGQhO0tXmK7Y70roISd2WE8D9m8yA/HdmgIBqRLGVRKPIf993n9ZWkTKXvo0eUwae932mDARo7t/o2RM1cn8IFKUp6pe5zIDe9QUmQMHH3ikAOTSh2VYObMiNNTt9eTt8FaDSNNt23bPODPB2/ANQn6is7FnnuRe7WnGr8HNPDYj/GjgQ1PrWeK0Dx+As7vRVaGQDgTmNTCGGKTj6a5V3+pFpQAo//VoKO+sJ7J5x6Os3X/AIqhz3rV30I7EyUg4Pb6ev2GZDOYhNIJdDpCDWs9gLkW8QvFNVNPesLpz2t+UPhD0oayTUbjEAAAAASUVORK5CYII="
+
+/***/ }),
+
+/***/ "acb9":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_52147a10_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1ed1");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_52147a10_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_52147a10_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "b15d":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA1hJREFUSEulVk1vE1cUPeeNYzCO80Vch1aKyAIhUdTdQEFQiaoKCxaoUoCEoFYIoWQPCNpVd1Sq+AEBtRKBJASKiqANSSO+xZfVZcsGVS0oEk7tEDtOHbDz5sI4TDzjOA6Gt3zv3nPux9G9jyh3Ts20KFG7CetzAdYRDNvmAokTeCRQ1y1a53Ew8M9iMCz50DPTbCj5/jXIbgBG2SBILZALWvMougJPi20XEPh/ynRYYA9EQmWBFz5OK7A7eyDQ537yEPh+zByikh8gKJ3ZUoyEiMUjswdWnHBM54H8vdN7ITz7zuAFRAFlX/ar6n77ao7g9Eyz35j9i8LqckEKMJD9O7gP39Gy7fyn021Uqh+QKrefUKaz2vcxvg48zRMs70ufA7BnqQrMKQgnX3aGuhxbf19ml6LVDxFfkf/gi85QO5f3JlvoNx4vqRaPt5yYaa857FwFBtJ7QJwF4CbRktVrGDw/dUyA4x5/ZZiZtuAf+bshWYbxEk3fzxdun8CFdDshZyAFEgLfMPhzagREq6eGImamrW6OoIITvJjaC6DXVY1RVl9KjlHwkRtHK5iZne9A8EuyleBlQpa96dcYQ1dSORY1iAIzVSFB6NeprbT0MMAVTrBCzrJ2KJlbqACaqR2FDGqHklGImG8cLUBOpXY0dDtANcOpDdTWKIAaT0XJl6y7OjEG0lMi0cpDUDc8GQXmCX5LPqn/El3M2WD1V59/IsQNAA0l2jXG+t8nRgBvky0YZqq1kEHD6ERUBCbIB5NW9gtsb/rfBgtdn1pbpXO3RBAppQUBRrnyWuIYimRKJWZiW3heRSuvJaIAnBK9va4E37J2JNbi81c9JsQ1lr0EjTcTUdgZVHAE1LPKWJMfFY234+foGhWiYCa2FDJovB2PssIMBBhMfBZuzxPU33neXKX0n84OsEAPQfhuPMqCipbOg0znLGP95NaGuWFnn8i9WAeo+uxxrQ2aiY2FDCL34m4VlSegvVHZOb45PGAbehZL04PxQyDea+FAcCT2aWThwnHC+vBhrMMiewhUtDKFmKag+9mGyOIr0yFpuv9sNXw8TmDXW4xxLYKL0HI0tmnVv8X1K7t7Iw9jLYYBe9ZvA7kOIh/kAcj/IPIIghtaY3B8Y9Oi35ZXd/FNayYX77gAAAAASUVORK5CYII="
+
+/***/ }),
+
+/***/ "b635":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "c", function() { return /* reexport */ traffic_lane; });
+__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ green_wave; });
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
+
+// CONCATENATED MODULE: ./src/libs/bus.js
+/* harmony default export */ var bus = (Vue => {
+  const eventHub = new Vue();
+  Vue.prototype.bus = {
+    /**
+     * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型
+     * @method $on  事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
+     * @method $off  取消事件订阅，移除自定义事件监听器。  https://cn.vuejs.org/v2/api/#vm-off  https://github.com/vuejs/vue/issues/3399
+     * @method $emit  事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
+     * @method $once  事件订阅, 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
+     */
+    $on(...event) {
+      eventHub.$on(...event);
+    },
+    $off(...event) {
+      eventHub.$off(...event);
+    },
+    $once(...event) {
+      eventHub.$once(...event);
+    },
+    $emit(...event) {
+      eventHub.$emit(...event);
+    }
+  };
+});
+// CONCATENATED MODULE: ./src/libs/pics-load-tool.js
+/**
+ * des: 将需要静态引用的图片放在img目录中，在需要的地方直接引用
+ * 注意：文件名只接受中英文和下划线，推荐英文加下划线组合方式
+ * export {文件名，文件名}
+ */
+
+const picLists = __webpack_require__("6452").keys();
+const picMap = list => {
+  const picName = {};
+  list.forEach(e => {
+    try {
+      const key = e.replace(/(.*\/)*([^.]+).*/gi, '$2');
+      picName[key] = __webpack_require__("216e")(`./images${e.slice(1)}`);
+    } catch (error) {
+      console.error(`Error loading image: ${e}`, error);
+    }
+  });
+  return picName;
+};
+const pics = picMap(picLists);
+/* harmony default export */ var pics_load_tool = (pics);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"f2351f80-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/traffic-lane/index.vue?vue&type=template&id=52147a10&scoped=true
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    attrs: {
+      "id": "canvasWrapper"
+    }
+  }, [_c('canvas', {
+    ref: "road",
+    staticClass: "crossing-box"
+  }), _c('transition', {
+    attrs: {
+      "enter-active-class": "animate__animated animate__bounceInLeft"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showLegend,
+      expression: "showLegend"
+    }],
+    ref: "legendBox",
+    staticClass: "legend-box"
+  }, _vm._l(this.laneDirections, function (item, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "legend-item",
+      style: {
+        background: item.laneDirName === _vm.currentLaneDirName ? _vm.laneActiveColor : 'rgba(31, 200, 255, 10%)'
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.chooseImg(item);
+        }
+      }
+    }, [_c('img', {
+      attrs: {
+        "src": item.img,
+        "alt": ""
+      }
+    }), _c('div', {
+      staticStyle: {
+        "color": "#fff"
+      }
+    }, [_vm._v(_vm._s(item.laneDirName))])]);
+  }), 0)])], 1);
+};
+var staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/traffic-lane/index.vue?vue&type=template&id=52147a10&scoped=true
+
+// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
+var lodash = __webpack_require__("2ef0");
+var lodash_default = /*#__PURE__*/__webpack_require__.n(lodash);
+
+// EXTERNAL MODULE: ./node_modules/fabric/dist/fabric.js
+var fabric = __webpack_require__("7a94");
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/left.png
+var left = __webpack_require__("e63c");
+var left_default = /*#__PURE__*/__webpack_require__.n(left);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/straight.png
+var straight = __webpack_require__("8aaa");
+var straight_default = /*#__PURE__*/__webpack_require__.n(straight);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/right.png
+var right = __webpack_require__("e418");
+var right_default = /*#__PURE__*/__webpack_require__.n(right);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/straightLeft.png
+var straightLeft = __webpack_require__("b943");
+var straightLeft_default = /*#__PURE__*/__webpack_require__.n(straightLeft);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/leftRight.png
+var leftRight = __webpack_require__("6ddb");
+var leftRight_default = /*#__PURE__*/__webpack_require__.n(leftRight);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/straightRight.png
+var straightRight = __webpack_require__("99fc");
+var straightRight_default = /*#__PURE__*/__webpack_require__.n(straightRight);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/straightLeftRight.png
+var straightLeftRight = __webpack_require__("2621");
+var straightLeftRight_default = /*#__PURE__*/__webpack_require__.n(straightLeftRight);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/turnAround.png
+var turnAround = __webpack_require__("cdd5");
+var turnAround_default = /*#__PURE__*/__webpack_require__.n(turnAround);
+
+// EXTERNAL MODULE: ./src/assets/images/traffic-lane/otherPic.png
+var otherPic = __webpack_require__("64e8");
+var otherPic_default = /*#__PURE__*/__webpack_require__.n(otherPic);
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/traffic-lane/index.vue?vue&type=script&lang=js
+
+
+// 方向对应的图标
+
+
+
+
+
+
+
+
+
+/* harmony default export */ var traffic_lanevue_type_script_lang_js = ({
+  name: 'traffic-lane',
+  props: {
+    /**
+     * 画布数据
+     * - Possible values:
+     * - Array
+     * 字段描述：
+     * - id: string - 车道ID
+     * - laneDirCode: string - 车道方向编码
+     * - laneDirName: string - 车道方向名称
+     * - inDirection: string - 车道入口方向
+     * - laneNo: number - 车道编号            
+     * - congestionFactor: number - 拥堵值
+     */
+    laneDiagramData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 画布宽度
+     */
+    canvasHeight: {
+      type: Number,
+      default: 300
+    },
+    /**
+     * 配置项（只有进行车道-流向配置时可在canvas图上点击替换方向图标
+     * - Possible values:
+     * - LaneConfig
+     */
+    configType: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 车道宽度
+     */
+    laneWidth: {
+      // 车道宽度
+      type: Number,
+      default: 22
+    },
+    /**
+     * 车道分隔线长度
+     */
+    laneDividerLength: {
+      type: Number,
+      default: 80
+    },
+    /**
+     * 车道-流向配置项
+     */
+    laneDirections: {
+      type: Array,
+      default: () => [{
+        img: left_default.a,
+        laneDirName: '左转'
+      }, {
+        img: straight_default.a,
+        laneDirName: '直行'
+      }, {
+        img: right_default.a,
+        laneDirName: '右转'
+      }, {
+        img: straightLeft_default.a,
+        laneDirName: '直左'
+      }, {
+        img: leftRight_default.a,
+        laneDirName: '左右'
+      }, {
+        img: straightRight_default.a,
+        laneDirName: '直右'
+      }, {
+        img: straightLeftRight_default.a,
+        laneDirName: '直左右'
+      }, {
+        img: turnAround_default.a,
+        laneDirName: '掉头'
+      }, {
+        img: otherPic_default.a,
+        laneDirName: '其他'
+      }]
+    },
+    /**
+     * 最大拥堵值
+     */
+    maxCongestionValue: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * 是否可点击
+     */
+    clickEvent: {
+      // 是否添加点击事件
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否显示拥堵指标值
+     */
+    congestionFactorVisible: {
+      // 是否在车道上显示指标值
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否可多选车道
+     */
+    multiple: {
+      // 是否可多选车道
+      type: Boolean,
+      default: false
+    },
+    // 已被选择的车道
+    selectedLane: {
+      type: String,
+      default: ''
+    },
+    // 线段激活颜色
+    laneActiveColor: {
+      type: String,
+      default: '#27ffd5'
+    }
+  },
+  data() {
+    return {
+      data: [],
+      // laneWidth: 22, // 车道宽度
+      canvas: null,
+      laneDirCodeOption: [{
+        laneDirCode: '101',
+        img: 'left',
+        laneDirName: '左转'
+      }, {
+        laneDirCode: '102',
+        img: 'straight',
+        laneDirName: '直行'
+      }, {
+        laneDirCode: '103',
+        img: 'right',
+        laneDirName: '右转'
+      }, {
+        laneDirCode: '104',
+        img: 'straightLeft',
+        laneDirName: '直左'
+      }, {
+        laneDirCode: '109',
+        img: 'leftRight',
+        laneDirName: '左右'
+      }, {
+        laneDirCode: '105',
+        img: 'straightRight',
+        laneDirName: '直右'
+      }, {
+        laneDirCode: '106',
+        img: 'straightLeftRight',
+        laneDirName: '直左右'
+      }, {
+        laneDirCode: '107',
+        img: 'turnAround',
+        laneDirName: '掉头'
+      }, {
+        laneDirCode: '108',
+        img: 'otherPic',
+        laneDirName: '其他'
+      }],
+      currentLaneDirName: '',
+      currentGroup: null,
+      currentGroupBK: null,
+      showLegend: false,
+      canvasWidth: 300,
+      chooseGroup: [],
+      resizeHandler: null
+    };
+  },
+  components: {},
+  computed: {},
+  created() {
+    // 使用lodash的debounce函数添加防抖处理，限制resize事件触发频率
+    this.resizeHandler = lodash_default.a.debounce(() => {
+      if (this.canvas) {
+        this.canvas.dispose();
+        this.canvas = null;
+        this.$nextTick(() => {
+          this.init();
+        });
+      }
+    }, 200);
+
+    // 保存事件处理函数引用，以便后续移除
+    window.addEventListener('resize', this.resizeHandler);
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    // 移除resize事件监听器，防止内存泄漏
+    window.removeEventListener('resize', this.resizeHandler);
+
+    // 取消防抖函数
+    this.resizeHandler.cancel();
+
+    // 销毁canvas实例
+    if (this.canvas) {
+      this.canvas.dispose();
+      this.canvas = null;
+    }
+  },
+  watch: {
+    laneDiagramData: {
+      handler(val) {
+        if (this.canvas) {
+          this.canvas.dispose();
+          this.canvas = null;
+        }
+        this.$nextTick(() => {
+          this.init();
+        });
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init() {
+      const el = document.getElementById('canvasWrapper');
+      this.canvasWidth = el.offsetWidth;
+      this.canvas = new fabric["fabric"].Canvas(this.$refs.road, {
+        backgroundColor: 'rgba(17,94,7,0.4)',
+        selection: false,
+        width: this.canvasWidth,
+        height: this.canvasHeight
+      });
+
+      // 找到各方向进口车道数
+      const nLaneNum = this.laneDiagramData.filter(item => item.inDirection === '北').length;
+      const wLaneNum = this.laneDiagramData.filter(item => item.inDirection === '西').length;
+      const sLaneNum = this.laneDiagramData.filter(item => item.inDirection === '南').length;
+      const eLaneNum = this.laneDiagramData.filter(item => item.inDirection === '东').length;
+
+      // 路口底图点位，从北与西交叉点开始（标准十字路口）
+      const point1 = {
+        x: this.canvasWidth / 2 - this.laneWidth * nLaneNum,
+        y: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum)
+      };
+      const point2 = {
+        x: 0,
+        y: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum)
+      };
+      const point3 = {
+        x: 0,
+        y: this.canvasHeight / 2 + this.laneWidth * wLaneNum
+      };
+      const point4 = {
+        x: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+        y: this.canvasHeight / 2 + this.laneWidth * wLaneNum
+      };
+      const point5 = {
+        x: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+        y: this.canvasHeight
+      };
+      const point6 = {
+        x: this.canvasWidth / 2 + this.laneWidth * sLaneNum,
+        y: this.canvasHeight
+      };
+      const point7 = {
+        x: this.canvasWidth / 2 + this.laneWidth * sLaneNum,
+        y: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum)
+      };
+      const point8 = {
+        x: this.canvasWidth,
+        y: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum)
+      };
+      const point9 = {
+        x: this.canvasWidth,
+        y: this.canvasHeight / 2 - this.laneWidth * eLaneNum
+      };
+      const point10 = {
+        x: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+        y: this.canvasHeight / 2 - this.laneWidth * eLaneNum
+      };
+      const point11 = {
+        x: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+        y: 0
+      };
+      const point12 = {
+        x: this.canvasWidth / 2 - this.laneWidth * nLaneNum,
+        y: 0
+      };
+      // 画路口图连线
+      var raodBase = new fabric["fabric"].Polygon([point1, wLaneNum !== 0 ? point2 : {}, wLaneNum !== 0 ? point3 : {}, point4, sLaneNum !== 0 ? point5 : {}, sLaneNum !== 0 ? point6 : {}, point7, eLaneNum !== 0 ? point8 : {}, eLaneNum !== 0 ? point9 : {}, point10, nLaneNum !== 0 ? point11 : {}, nLaneNum !== 0 ? point12 : point1], {
+        fill: '#989898',
+        stroke: '#fff',
+        strokeWidth: 2,
+        selectable: false
+      });
+      this.canvas.add(raodBase);
+      raodBase.on('mousedown', () => {
+        // 点击路口灰色底图部分，关闭图例弹窗
+        this.showLegend = false;
+      });
+      // 绘制黄实线
+      const nYellowLine = {
+        x1: this.canvasWidth / 2,
+        y1: 0,
+        x2: this.canvasWidth / 2,
+        y2: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum)
+      }; // 北方向
+      const wYellowLine = {
+        x1: 0,
+        y1: this.canvasHeight / 2,
+        x2: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+        y2: this.canvasHeight / 2
+      }; // 西方向
+      const sYellowLine = {
+        x1: this.canvasWidth / 2,
+        y1: this.canvasHeight,
+        x2: this.canvasWidth / 2,
+        y2: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum)
+      }; // 南方向
+      const eYellowLine = {
+        x1: this.canvasWidth,
+        y1: this.canvasHeight / 2,
+        x2: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+        y2: this.canvasHeight / 2
+      }; // 东方向
+      const lines = [nLaneNum ? nYellowLine : {}, wLaneNum ? wYellowLine : {}, sLaneNum ? sYellowLine : {}, eLaneNum ? eYellowLine : {} // 东方向
+      ];
+      lines.forEach(line => {
+        const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+          stroke: '#e6c130',
+          // 线条颜色
+          strokeWidth: 2 // 线条宽度
+        });
+        this.canvas.add(fabricLine);
+      });
+
+      // 绘制车道线
+      const laneLineLength = this.laneDividerLength; // 车道线长度
+      // 绘制各方向车道组（北西南东）
+      if (nLaneNum > 0) {
+        const nData = this.laneDiagramData.filter(item => item.inDirection === '北');
+        for (let i = 0; i < nData.length; i++) {
+          const line = {
+            x1: this.canvasWidth / 2 - this.laneWidth * (i + 1),
+            y1: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum),
+            x2: this.canvasWidth / 2 - this.laneWidth * (i + 1),
+            y2: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum) - laneLineLength
+          };
+
+          // 添加图标
+          const temp = nData[i];
+          const value = Math.round(temp.congestionFactor * 10) / 10;
+          const laneDirItem = this.laneDirections.find(item => item.laneDirName === temp.laneDirName);
+          if (laneDirItem) {
+            fabric["fabric"].Image.fromURL(laneDirItem.img, img => {
+              img.scaleToWidth(this.laneWidth);
+              // 绘制车道白线
+              const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+                stroke: '#fff',
+                // 线条颜色
+                strokeWidth: 1 // 线条宽度
+              });
+              // 绘制车道矩形
+              var rect = new fabric["fabric"].Rect({
+                width: this.laneWidth,
+                height: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum),
+                fill: this.calcBgColor(value),
+                left: this.canvasWidth / 2 - this.laneWidth * (i + 1),
+                top: 0
+              });
+              if (this.currentGroup && this.currentGroup.name === `N_L${temp.laneNo}`) {
+                rect.set('fill', this.laneActiveColor);
+              }
+              // 绘制文本
+              var text = new fabric["fabric"].Textbox(`${Number(temp.laneNo)}`, {
+                fontSize: 18,
+                left: this.canvasWidth / 2 - this.laneWidth * (i + 1),
+                top: (this.canvasHeight - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum) - this.laneWidth * wLaneNum) / 2 - 22,
+                textAlign: 'center',
+                width: this.laneWidth,
+                fill: '#fff',
+                angle: 180,
+                originX: 'right',
+                originY: 'bottom'
+              });
+              let text2 = new fabric["fabric"].Textbox(`${value ? value : '0'}`, {
+                fontSize: 12,
+                left: this.canvasWidth / 2 - this.laneWidth * (i + 1 - 0.25),
+                top: 5,
+                textAlign: 'left',
+                width: this.laneWidth,
+                fill: '#fff',
+                angle: 90,
+                originX: 'left',
+                originY: 'bottom'
+              });
+              let groupList = [];
+              if (this.congestionFactorVisible) {
+                groupList = [rect, text, text2, img, fabricLine];
+              } else {
+                groupList = [rect, text, img, fabricLine];
+              }
+              var group = new fabric["fabric"].Group(groupList, {
+                name: `N_L${temp.laneNo}`,
+                objectCaching: false,
+                selectable: false
+              });
+              this.canvas.add(group);
+              if (this.clickEvent) {
+                group.on('mousedown', e => {
+                  if (this.configType === 'LaneConfig') {
+                    this.showLegend = true;
+                  }
+                  this.mousedownFun(e);
+                });
+                group.on('mousemove', e => {
+                  this.canvas.setCursor('pointer');
+                });
+              }
+            }, {
+              name: laneDirItem.laneDirName,
+              left: this.canvasWidth / 2 - this.laneWidth * (i + 1),
+              top: (this.canvasHeight - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum) - this.laneWidth * wLaneNum) / 2 - 50,
+              angle: 180,
+              originX: 'right',
+              originY: 'bottom'
+            });
+          } else {
+            console.error(`${temp.inDirection}向 - ${temp.laneDirName}车道，图标缺少！`);
+          }
+        }
+      }
+      if (wLaneNum > 0) {
+        const wData = this.laneDiagramData.filter(item => item.inDirection === '西');
+        for (let i = 0; i < wData.length; i++) {
+          const line = {
+            x1: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+            y1: this.canvasHeight / 2 + this.laneWidth * (i + 1),
+            x2: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum) - laneLineLength,
+            y2: this.canvasHeight / 2 + this.laneWidth * (i + 1)
+          };
+
+          // 添加图标
+          const temp = wData[i];
+          const value = Math.round(temp.congestionFactor * 10) / 10;
+          const laneDirItem = this.laneDirections.find(item => item.laneDirName === temp.laneDirName);
+          if (laneDirItem) {
+            fabric["fabric"].Image.fromURL(laneDirItem.img, img => {
+              img.scaleToWidth(this.laneWidth);
+              // 绘制车道白线
+              const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+                stroke: '#fff',
+                // 线条颜色
+                strokeWidth: 1 // 线条宽度
+              });
+
+              // 绘制车道矩形
+              var rect = new fabric["fabric"].Rect({
+                // width: laneLineLength,
+                width: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+                height: this.laneWidth,
+                fill: this.calcBgColor(value),
+                left: 0,
+                top: this.canvasHeight / 2 + this.laneWidth * i
+              });
+              if (this.currentGroup && this.currentGroup.name === `W_L${temp.laneNo}`) {
+                rect.set('fill', this.laneActiveColor);
+              }
+              var text = new fabric["fabric"].Textbox(`${Number(temp.laneNo)}`, {
+                // 绘制文本
+                fontSize: 18,
+                left: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+                top: this.canvasHeight / 2 + this.laneWidth * i,
+                textAlign: 'center',
+                width: this.laneWidth,
+                fill: '#fff',
+                angle: 90,
+                originX: 'left',
+                originY: 'top'
+              });
+              let text2 = new fabric["fabric"].Textbox(`${value ? value : '0'}`, {
+                // 绘制文本
+                fontSize: 12,
+                left: 5,
+                top: this.canvasHeight / 2 + this.laneWidth * (i + 0.25),
+                textAlign: 'left',
+                width: this.laneWidth,
+                fill: '#fff',
+                originX: 'left',
+                originY: 'top'
+              });
+              let groupList = [];
+              if (this.congestionFactorVisible) {
+                groupList = [rect, text, text2, img, fabricLine];
+              } else {
+                groupList = [rect, text, img, fabricLine];
+              }
+              var group = new fabric["fabric"].Group(groupList, {
+                name: `W_L${temp.laneNo}`,
+                objectCaching: false,
+                selectable: false
+              });
+              this.canvas.add(group);
+              if (this.clickEvent) {
+                group.on('mousedown', e => {
+                  if (this.configType === 'LaneConfig') {
+                    this.showLegend = true;
+                  }
+                  this.mousedownFun(e);
+                });
+                group.on('mousemove', e => {
+                  this.canvas.setCursor('pointer');
+                });
+              }
+            }, {
+              name: laneDirItem.laneDirName,
+              left: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum) - 30,
+              top: this.canvasHeight / 2 + this.laneWidth * i,
+              angle: 90,
+              originX: 'left',
+              originY: 'top'
+            });
+          } else {
+            console.error(`${temp.inDirection}向 - ${temp.laneDirName}车道，图标缺少！`);
+          }
+        }
+      }
+      if (sLaneNum > 0) {
+        const sData = this.laneDiagramData.filter(item => item.inDirection === '南');
+        for (let i = 0; i < sData.length; i++) {
+          const line = {
+            x1: this.canvasWidth / 2 + this.laneWidth * (i + 1),
+            y1: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum),
+            x2: this.canvasWidth / 2 + this.laneWidth * (i + 1),
+            y2: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum) + laneLineLength
+          };
+
+          // 添加图标
+          const temp = sData[i];
+          const value = Math.round(temp.congestionFactor * 10) / 10;
+          const laneDirItem = this.laneDirections.find(item => item.laneDirName === temp.laneDirName);
+          if (laneDirItem) {
+            fabric["fabric"].Image.fromURL(laneDirItem.img, img => {
+              img.scaleToWidth(this.laneWidth);
+              // 绘制车道白线
+              const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+                stroke: '#fff',
+                // 线条颜色
+                strokeWidth: 1 // 线条宽度
+              });
+
+              // 绘制车道矩形
+              var rect = new fabric["fabric"].Rect({
+                width: this.laneWidth,
+                // height: laneLineLength,
+                height: this.canvasHeight / 2,
+                fill: this.calcBgColor(value),
+                left: this.canvasWidth / 2 + this.laneWidth * i,
+                top: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum)
+              });
+              if (this.currentGroup && this.currentGroup.name === `S_L${temp.laneNo}`) {
+                rect.set('fill', this.laneActiveColor);
+              }
+              var text = new fabric["fabric"].Textbox(`${Number(temp.laneNo)}`, {
+                // 绘制文本
+                fontSize: 18,
+                left: this.canvasWidth / 2 + this.laneWidth * i,
+                top: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum),
+                textAlign: 'center',
+                width: this.laneWidth,
+                fill: '#fff'
+              });
+              let text2 = new fabric["fabric"].Textbox(`${value ? value : '0'}`, {
+                // 绘制文本
+                fontSize: 12,
+                left: this.canvasWidth / 2 + this.laneWidth * (i + 0.25),
+                top: this.canvasHeight - 5,
+                textAlign: 'left',
+                width: this.laneWidth,
+                fill: '#fff',
+                angle: -90
+              });
+              let groupList = [];
+              if (this.congestionFactorVisible) {
+                groupList = [rect, text, text2, img, fabricLine];
+              } else {
+                groupList = [rect, text, img, fabricLine];
+              }
+              var group = new fabric["fabric"].Group(groupList, {
+                name: `S_L${temp.laneNo}`,
+                objectCaching: false,
+                selectable: false
+              });
+              this.canvas.add(group);
+              if (this.clickEvent) {
+                group.on('mousedown', e => {
+                  if (this.configType === 'LaneConfig') {
+                    this.showLegend = true;
+                  }
+                  this.mousedownFun(e);
+                });
+                group.on('mousemove', e => {
+                  this.canvas.setCursor('pointer');
+                });
+              }
+            }, {
+              name: laneDirItem.laneDirName,
+              left: this.canvasWidth / 2 + this.laneWidth * i,
+              top: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum) + 30
+            });
+          }
+        }
+      }
+      if (eLaneNum > 0) {
+        const eData = this.laneDiagramData.filter(item => item.inDirection === '东');
+        for (let i = 0; i < eData.length; i++) {
+          const line = {
+            x1: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+            y1: this.canvasHeight / 2 - this.laneWidth * (i + 1),
+            x2: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum) + laneLineLength,
+            y2: this.canvasHeight / 2 - this.laneWidth * (i + 1)
+          };
+
+          // 添加图标
+          const temp = eData[i];
+          const value = Math.round(temp.congestionFactor * 10) / 10;
+          const laneDirItem = this.laneDirections.find(item => item.laneDirName === temp.laneDirName);
+          if (laneDirItem) {
+            fabric["fabric"].Image.fromURL(laneDirItem.img, img => {
+              img.scaleToWidth(this.laneWidth);
+              // 绘制车道白线
+              const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+                stroke: '#fff',
+                // 线条颜色
+                strokeWidth: 1 // 线条宽度
+              });
+              // 绘制车道矩形
+              var rect = new fabric["fabric"].Rect({
+                width: this.canvasWidth / 2,
+                height: this.laneWidth,
+                fill: this.calcBgColor(value),
+                left: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+                top: this.canvasHeight / 2 - this.laneWidth * (i + 1)
+              });
+              if (this.currentGroup && this.currentGroup.name === `E_L${temp.laneNo}`) {
+                rect.set('fill', this.laneActiveColor);
+              }
+              var text = new fabric["fabric"].Textbox(`${Number(temp.laneNo)}`, {
+                // 绘制文本
+                fontSize: 18,
+                left: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+                top: this.canvasHeight / 2 - this.laneWidth * (i + 1),
+                textAlign: 'center',
+                width: this.laneWidth,
+                fill: '#fff',
+                angle: -90,
+                originX: 'right',
+                originY: 'top'
+              });
+              let text2 = new fabric["fabric"].Textbox(`${value ? value : '0'}`, {
+                // 绘制文本
+                fontSize: 12,
+                left: this.canvasWidth - 5,
+                top: this.canvasHeight / 2 - this.laneWidth * (i + 1 - 0.25),
+                textAlign: 'center',
+                width: this.laneWidth,
+                fill: '#fff',
+                // angle: -90,
+                originX: 'right',
+                originY: 'top'
+              });
+              let groupList = [];
+              if (this.congestionFactorVisible) {
+                groupList = [rect, text, text2, img, fabricLine];
+              } else {
+                groupList = [rect, text, img, fabricLine];
+              }
+              var group = new fabric["fabric"].Group(groupList, {
+                name: `E_L${temp.laneNo}`,
+                objectCaching: false,
+                selectable: false
+              });
+              this.canvas.add(group);
+              if (this.clickEvent) {
+                group.on('mousedown', e => {
+                  if (this.configType === 'LaneConfig') {
+                    this.showLegend = true;
+                  }
+                  this.mousedownFun(e);
+                });
+                group.on('mousemove', e => {
+                  this.canvas.setCursor('pointer');
+                });
+              }
+            }, {
+              name: laneDirItem.laneDirName,
+              left: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum) + 30,
+              top: this.canvasHeight / 2 - this.laneWidth * (i + 1),
+              angle: -90,
+              originX: 'right',
+              originY: 'top'
+            });
+          }
+        }
+      }
+      // 北停止线
+      const nStopLine = {
+        x1: this.canvasWidth / 2 - this.laneWidth * nLaneNum,
+        y1: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum),
+        x2: this.canvasWidth / 2,
+        y2: this.canvasHeight / 2 - this.laneWidth * (eLaneNum ? eLaneNum : wLaneNum)
+      };
+      // 西停止线
+      const wStopLine = {
+        x1: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+        y1: this.canvasHeight / 2,
+        x2: this.canvasWidth / 2 - this.laneWidth * (nLaneNum ? nLaneNum : sLaneNum),
+        y2: this.canvasHeight / 2 + this.laneWidth * wLaneNum
+      };
+
+      // 南停止线
+      const sStopLine = {
+        x1: this.canvasWidth / 2,
+        y1: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum),
+        x2: this.canvasWidth / 2 + this.laneWidth * sLaneNum,
+        y2: this.canvasHeight / 2 + this.laneWidth * (wLaneNum ? wLaneNum : eLaneNum)
+      };
+
+      // 东停止线
+      const eStopLine = {
+        x1: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+        y1: this.canvasHeight / 2 - this.laneWidth * eLaneNum,
+        x2: this.canvasWidth / 2 + this.laneWidth * (sLaneNum ? sLaneNum : nLaneNum),
+        y2: this.canvasHeight / 2
+      };
+      let laneLines = [];
+      laneLines.push(wStopLine);
+      laneLines.push(nStopLine);
+      laneLines.push(sStopLine);
+      laneLines.push(eStopLine);
+      laneLines.forEach(line => {
+        this.addFabricLine(line, '#fff', 1);
+      });
+    },
+    changeLane(laneDirCodes) {
+      if (laneDirCodes) {
+        if (this.canvas) {
+          laneDirCodes.forEach(item => {
+            // 根据车道编号获取canvas上指定group
+            const currentGroup = this.canvas.getObjects().find(o => o.type === 'group' && o.name === item);
+            // 获取当前group下车道对象
+            if (currentGroup) {
+              var rect = currentGroup.getObjects().find(o => {
+                return o.type === 'rect';
+              });
+              rect.set('fill', this.laneActiveColor);
+            }
+          });
+          this.canvas.getObjects().forEach(o => {
+            if (o.type === 'group' && !laneDirCodes.includes(o.name)) {
+              var rect = o.getObjects().find(o => {
+                return o.type === 'rect';
+              });
+              rect.set('fill', 'transparent');
+            }
+          });
+          this.canvas.renderAll();
+        }
+      }
+    },
+    // 更改车道流向（canvas对应更新）
+    changeLaneDir({
+      laneDirCode,
+      laneDirName
+    }) {
+      // 根据车道编号获取canvas上指定group
+      if (this.canvas) {
+        const currentGroup = this.canvas.getObjects().find(o => o.type === 'group' && o.name === laneDirCode);
+        // 获取当前group下车道对象
+        var rect = currentGroup.getObjects().find(o => {
+          return o.type === 'rect';
+        });
+        // 获取当前group下图标
+        var image = currentGroup.getObjects().find(o => {
+          return o.type === 'image';
+        });
+        const laneDirItem = this.laneDirections.find(item => item.laneDirName === laneDirName);
+        const imgSrc = laneDirItem.img;
+        image.setSrc(imgSrc, () => {
+          rect.set('fill', this.laneActiveColor);
+          this.canvas.renderAll();
+        });
+        this.canvas.getObjects().forEach(o => {
+          if (o.type === 'group' && o.name !== laneDirCode) {
+            var rect = o.getObjects().find(o => {
+              return o.type === 'rect';
+            });
+            rect.set('fill', 'transparent');
+          }
+        });
+        this.canvas.renderAll();
+      }
+    },
+    addFabricLine(line, color, strokeWidth = 1) {
+      // 绘制线
+      const fabricLine = new fabric["fabric"].Line([line.x1, line.y1, line.x2, line.y2], {
+        stroke: color,
+        // 线条颜色
+        strokeWidth: strokeWidth // 线条宽度
+      });
+      this.canvas.add(fabricLine);
+    },
+    mousedownFun(e) {
+      // 鼠标点击事件
+      // 根据车道编号获取canvas上指定group
+      const currentGroup = this.canvas.getObjects().find(o => o.type === 'group' && o.name === e.target.name);
+      // 获取当前group下车道对象
+      var rect = currentGroup.getObjects().find(o => {
+        return o.type === 'rect';
+      });
+      if (this.multiple) {
+        // 车道可多选
+        if (rect.choosen) {
+          rect.set('fill', 'transparent');
+          rect.set('choosen', false);
+          let index = this.chooseGroup.findIndex(item => item === currentGroup.name);
+          this.chooseGroup.splice(index, 1);
+        } else {
+          rect.set('choosen', true);
+          rect.set('fill', this.laneActiveColor);
+          this.chooseGroup.push(currentGroup.name);
+        }
+        this.$emit('chooseLane', this.chooseGroup);
+      } else {
+        rect.set('fill', this.laneActiveColor);
+        this.currentGroup = currentGroup;
+        this.currentGroupBK = lodash_default.a.cloneDeep(currentGroup);
+        this.canvas.getObjects().forEach(o => {
+          if (o.type === 'group' && o.name !== e.target.name) {
+            var rect = o.getObjects().find(o => {
+              return o.type === 'rect';
+            });
+            rect.set('fill', 'transparent');
+          }
+        });
+        this.$nextTick(() => {
+          const ele = this.$refs.legendBox;
+          ele.style.top = e.target.top + 'px';
+          ele.style.left = e.target.left + 80 + 'px';
+          this.currentLaneDirName = e.target.getObjects().filter(item => item.type === 'image')[0].name;
+          // 选择右侧表格一行数据
+          this.$emit('selectLane', {
+            laneDirCode: this.currentGroup.name
+          });
+        });
+      }
+      this.canvas.renderAll();
+    },
+    chooseImg(item) {
+      // 选择图片
+      this.currentLaneDirName = item.laneDirName;
+      // 获取当前group下图标
+      var image = this.currentGroup.getObjects().find(o => {
+        return o.type === 'image';
+      });
+      const imgSrc = item.img;
+      image.setSrc(imgSrc, () => {
+        this.currentGroup = lodash_default.a.cloneDeep(this.currentGroupBK);
+      });
+      this.$emit('changeLaneDir', {
+        laneDirCode: this.currentGroup.name,
+        laneDirName: item.laneDirName
+      });
+    },
+    calcBgColor(value) {
+      if (value || value == 0) {
+        const colorList = [{
+          r: 0,
+          g: 104,
+          b: 55
+        }, {
+          r: 26,
+          g: 152,
+          b: 80
+        }, {
+          r: 102,
+          g: 189,
+          b: 99
+        }, {
+          r: 166,
+          g: 217,
+          b: 106
+        }, {
+          r: 217,
+          g: 239,
+          b: 139
+        }, {
+          r: 255,
+          g: 255,
+          b: 191
+        }, {
+          r: 254,
+          g: 224,
+          b: 139
+        }, {
+          r: 253,
+          g: 174,
+          b: 97
+        }, {
+          r: 244,
+          g: 109,
+          b: 67
+        }, {
+          r: 215,
+          g: 48,
+          b: 39
+        }, {
+          r: 165,
+          g: 0,
+          b: 38
+        }];
+        let startColor = '';
+        let endColor = '';
+        const percentage = value / this.maxCongestionValue; // 获取百分比
+        if (percentage >= 0 && percentage <= 0.1) {
+          startColor = colorList[0];
+          endColor = colorList[1];
+        } else if (percentage > 0.1 && percentage <= 0.2) {
+          startColor = colorList[1];
+          endColor = colorList[2];
+        } else if (percentage > 0.2 && percentage <= 0.3) {
+          startColor = colorList[2];
+          endColor = colorList[3];
+        } else if (percentage > 0.3 && percentage <= 0.4) {
+          startColor = colorList[3];
+          endColor = colorList[4];
+        } else if (percentage > 0.4 && percentage <= 0.5) {
+          startColor = colorList[4];
+          endColor = colorList[5];
+        } else if (percentage > 0.5 && percentage <= 0.6) {
+          startColor = colorList[5];
+          endColor = colorList[6];
+        } else if (percentage > 0.6 && percentage <= 0.7) {
+          startColor = colorList[6];
+          endColor = colorList[7];
+        } else if (percentage > 0.7 && percentage <= 0.8) {
+          startColor = colorList[7];
+          endColor = colorList[8];
+        } else if (percentage > 0.8 && percentage <= 0.9) {
+          startColor = colorList[8];
+          endColor = colorList[9];
+        } else if (percentage > 0.9 && percentage <= 1) {
+          startColor = colorList[9];
+          endColor = colorList[10];
+        } else if (percentage > 1) {
+          startColor = colorList[10];
+          endColor = colorList[10];
+        }
+        // 插值计算 RGB 值
+        const r = Math.floor(startColor.r + (endColor.r - startColor.r) * percentage);
+        const g = Math.floor(startColor.g + (endColor.g - startColor.g) * percentage);
+        const b = Math.floor(startColor.b + (endColor.b - startColor.b) * percentage);
+        return `rgb(${r}, ${g}, ${b})`;
+      } else {
+        return 'transparent';
+      }
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/traffic-lane/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_traffic_lanevue_type_script_lang_js = (traffic_lanevue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/traffic-lane/index.vue?vue&type=style&index=0&id=52147a10&prod&scoped=true&lang=scss
+var traffic_lanevue_type_style_index_0_id_52147a10_prod_scoped_true_lang_scss = __webpack_require__("acb9");
+
+// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__("2877");
+
+// CONCATENATED MODULE: ./src/components/traffic-lane/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var component = Object(componentNormalizer["a" /* default */])(
+  components_traffic_lanevue_type_script_lang_js,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  "52147a10",
+  null
+  
+)
+
+/* harmony default export */ var traffic_lane = (component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"f2351f80-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/green-wave/index.vue?vue&type=template&id=9b8515cc&scoped=true
+var green_wavevue_type_template_id_9b8515cc_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "canvas-wrapper"
+  }, [_c('canvas', {
+    ref: "canvas_l",
+    style: {
+      width: _vm.yAxisWidth + 'px'
+    }
+  }), _c('canvas', {
+    ref: "canvas",
+    staticStyle: {
+      "flex": "1"
+    }
+  })]);
+};
+var green_wavevue_type_template_id_9b8515cc_scoped_true_staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/green-wave/index.vue?vue&type=template&id=9b8515cc&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/green-wave/index.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ var green_wavevue_type_script_lang_js = ({
+  name: 'green-wave',
+  props: {
+    /**
+     * 绿波路口数据
+     * - Possible values:
+     * - Array
+     * 字段描述：
+     * - crossId: string - 路口ID
+     * - crossRoadName: string - 路口名称
+     * - crossDistance: number - 路口距离
+     * - orderNumber: number - 排序编号
+     * - forwardGreen: number - 路口正向车道绿灯时长(A路口 -> B路口)
+     * - reverseGreen: number - 路口反向车道绿灯时长(B路口 -> A路口)
+     * - forwardSpeed: number - 路口正向车道速度(A路口 -> B路口)
+     * - reverseSpeed: number - 路口反向车道速度(B路口 -> A路口)
+     * - forwardPhaseDiff: number - 路口正向车道相位差时长(A路口 -> B路口)
+     * - reversePhaseDiff: number - 路口反向车道相位差时长(B路口 -> A路口)
+     * - greenFlag: boolean - 绿波标志
+     * - phaseDiffFlag: boolean - 相位标志
+     */
+    crossData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 画布高度
+     */
+    canvasHeight: {
+      type: Number,
+      default: 500
+    },
+    /**
+     * 是否正向(从上到下， 从左到右为正方向)
+     */
+    forwardDirection: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 绿波周期间隔(单位：秒)
+     */
+    interval: {
+      type: Number,
+      default: 70
+    },
+    /**
+     * 正向绿波颜色
+     */
+    forwardColor: {
+      type: String,
+      default: '#058213'
+    },
+    /**
+     * 反向绿波颜色
+     */
+    backwardColor: {
+      type: String,
+      default: '#0eed28'
+    },
+    /**
+     * 拖拽线宽
+     */
+    dragStrokeWidth: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * 单绿波宽度
+     * 值越小宽度越小，值越大宽度越大
+     */
+    singleWaveWidth: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * X轴底部间距
+     */
+    xAxisBottom: {
+      type: Number,
+      default: 30
+    },
+    /**
+     * Y轴顶部间距
+     */
+    yAxisTop: {
+      type: Number,
+      default: 30
+    },
+    /**
+     * Y轴文本刻度宽度
+     */
+    yAxisWidth: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * 绿波循环次数
+     * - Possible values:
+     * - Number
+     * - 0 - 默认值，自动计算
+     * - 1 - 循环一次
+     */
+    loopTime: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      groups_forward: [],
+      groups_back: [],
+      // 初始值，默认按照容器宽度
+      canvasWidth: 500,
+      canvas: null,
+      canvas_l: null,
+      initialPositions: {},
+      calculateLoopTime: 0,
+      resizeHandler: null
+    };
+  },
+  computed: {
+    mulWatchData() {
+      return {
+        interval: this.interval,
+        crossData: this.crossData,
+        forwardDirection: this.forwardDirection
+      };
+    }
+  },
+  watch: {
+    mulWatchData: {
+      handler(val) {
+        this.drawRoad();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  created() {
+    this.resizeHandler = lodash_default.a.debounce(() => {
+      if (this.canvas) {
+        this.canvas.dispose();
+        this.canvas_l.dispose();
+        this.canvas = null;
+        this.canvas_l = null;
+        this.init();
+      }
+    }, 200);
+    window.addEventListener('resize', this.resizeHandler);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler);
+    this.resizeHandler.cancel();
+    if (this.canvas) {
+      this.canvas.dispose();
+      this.canvas_l.dispose();
+    }
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    init() {
+      // Get container width dynamically
+      const containerWidth = this.$el.offsetWidth - this.yAxisWidth;
+
+      // Initialize main canvas
+      if (this.canvas) {
+        this.canvas.dispose();
+      }
+      this.canvas = new fabric["fabric"].Canvas(this.$refs.canvas, {
+        backgroundColor: '#fff',
+        selection: false,
+        width: containerWidth,
+        height: this.canvasHeight
+      });
+
+      // Initialize y-axis canvas
+      if (this.canvas_l) {
+        this.canvas_l.dispose();
+      }
+      this.canvas_l = new fabric["fabric"].Canvas(this.$refs.canvas_l, {
+        backgroundColor: '#fff',
+        selection: false,
+        width: this.yAxisWidth,
+        height: this.canvasHeight
+      });
+      this.drawRoad();
+    },
+    // 绘制路口
+    drawBaseElement() {
+      // 横纵坐标，周期线
+      this.canvas.add(new fabric["fabric"].Line([0, this.canvas.height - this.xAxisBottom, this.canvas.width, this.canvas.height - this.xAxisBottom], {
+        stroke: '#333',
+        strokeWidth: 1
+      }));
+      // 纵轴线
+      this.canvas.add(new fabric["fabric"].Line([0, this.canvas.height - this.xAxisBottom, 0, this.yAxisTop], {
+        stroke: '#333',
+        strokeWidth: 1
+      }));
+      // // 画周期
+      const contentWidth = this.canvas.width;
+      this.calculateLoopTime = this.loopTime || Math.ceil(contentWidth / this.interval / this.singleWaveWidth);
+      for (let i = 1; i < this.calculateLoopTime; i++) {
+        this.canvas.add(new fabric["fabric"].Line([this.interval * this.singleWaveWidth * i, this.canvas.height - this.xAxisBottom, this.interval * this.singleWaveWidth * i, this.yAxisTop], {
+          stroke: 'lightgrey',
+          strokeWidth: 1,
+          strokeDashArray: [5, 2]
+        }));
+        this.canvas.add(new fabric["fabric"].Textbox(`${this.interval * i}s`, {
+          fontSize: 14,
+          left: this.interval * this.singleWaveWidth * i,
+          top: this.canvas.height - this.xAxisBottom + 5,
+          textAlign: 'center',
+          backgroundColor: '#fff',
+          originX: 'center',
+          originY: 'top'
+        }));
+      }
+    },
+    // 获取时距拖拽方向
+    getGroupDirection({
+      crossId,
+      left
+    }) {
+      const initialPos = this.initialPositions[crossId];
+      let direction = 'none';
+      if (initialPos) {
+        direction = left > initialPos ? 'forward' : 'backward';
+      }
+      return direction;
+    },
+    drawRoad() {
+      // this.canvas_l && this.canvas_l.clear();
+      // this.canvas && this.canvas.clear();
+      this.groups_forward = [];
+      this.groups_back = [];
+      this.drawBaseElement();
+      this.canvas_l.add(new fabric["fabric"].Line([this.yAxisWidth / 2, this.canvas.height - this.xAxisBottom, this.yAxisWidth / 2, this.yAxisTop], {
+        stroke: 'lightgrey',
+        strokeWidth: 1,
+        strokeDashArray: [5, 2]
+      }));
+      const totalDistance = this.crossData.reduce((pre, cur) => pre + cur.crossDistance, 0);
+      let yDis = 0;
+      const contentHeight = this.canvas.height - this.yAxisTop - this.xAxisBottom;
+      this.crossData.forEach((item, index) => {
+        yDis += item.crossDistance;
+        let top = 0;
+        if (this.forwardDirection) {
+          top = (totalDistance - yDis) / totalDistance * contentHeight + this.yAxisTop;
+        } else {
+          top = yDis / totalDistance * contentHeight + this.yAxisTop;
+        }
+        this.canvas_l.add(new fabric["fabric"].Textbox(`【${item.crossRoadName}】`, {
+          fontSize: 14,
+          left: 0,
+          top: top,
+          textAlign: 'center',
+          width: this.yAxisWidth - 1,
+          backgroundColor: '#fff',
+          originY: 'bottom'
+        }));
+        if (index !== 0) {
+          let text_top = 0;
+          if (this.forwardDirection) {
+            text_top = (totalDistance - yDis + item.crossDistance / 2) / totalDistance * contentHeight + this.yAxisTop;
+          } else {
+            text_top = (yDis - item.crossDistance / 2) / totalDistance * contentHeight + this.yAxisTop;
+          }
+          var text2 = new fabric["fabric"].Textbox(`${item.crossDistance},${item.forwardSpeed}km/h`, {
+            fontSize: 14,
+            left: 0,
+            top: text_top,
+            textAlign: 'center',
+            width: this.yAxisWidth - 1,
+            backgroundColor: '#fff',
+            originY: 'bottom'
+          });
+          this.canvas_l.add(text2);
+        }
+
+        // 绘制绿灯
+        let list = [];
+        let list_back = [];
+        for (let i = -1; i < this.calculateLoopTime; i++) {
+          const cross = new fabric["fabric"].Line([(item.forwardPhaseDiff + this.interval * i) * this.singleWaveWidth, top, (item.forwardPhaseDiff + item.forwardGreen + this.interval * i) * this.singleWaveWidth, top], {
+            stroke: this.forwardColor,
+            strokeWidth: this.dragStrokeWidth,
+            originY: 'bottom'
+          });
+          const cross_back = new fabric["fabric"].Line([(item.reversePhaseDiff + this.interval * i) * this.singleWaveWidth, top - this.dragStrokeWidth, (item.reversePhaseDiff + item.reverseGreen + this.interval * i) * this.singleWaveWidth, top - this.dragStrokeWidth], {
+            stroke: this.backwardColor,
+            strokeWidth: this.dragStrokeWidth,
+            originY: 'bottom'
+          });
+          list.push(cross);
+          list_back.push(cross_back);
+        }
+        const group = new fabric["fabric"].Group(list, {
+          ...item,
+          roadType: 0,
+          // 正向
+          hoverCursor: 'ew-resize',
+          moveCursor: 'ew-resize',
+          lockRotation: true,
+          lockMovementY: true,
+          hasControls: false,
+          hasBorders: false
+        });
+        const group_back = new fabric["fabric"].Group(list_back, {
+          ...item,
+          roadType: 1,
+          // 反向
+          hoverCursor: 'ew-resize',
+          moveCursor: 'ew-resize',
+          lockRotation: true,
+          lockMovementY: true,
+          hasControls: false,
+          hasBorders: false
+        });
+
+        // 初始位置
+        this.initialPositions[group.crossId] = group.left;
+        this.initialPositions[group_back.crossId] = group_back.left;
+        this.groups_forward.push(group);
+        this.groups_back.push(group_back);
+        this.canvas.add(group, group_back);
+        let startDistance = 0;
+        let endDistance = 0;
+        let crossId = '';
+        group.on('moving', e => {
+          if (e.transform.target.left <= -1 * this.interval * this.singleWaveWidth) {
+            e.transform.target.left = -1 * this.interval * this.singleWaveWidth;
+          } else if (e.transform.target.left >= 0) {
+            e.transform.target.left = 0;
+          }
+          const target = e.transform.target;
+          const index = this.groups_forward.findIndex(ele => ele.crossId === target.crossId);
+          if (index !== this.groups_forward.length - 1) {
+            this.drawForward(target, this.groups_forward[index + 1]);
+          }
+          if (index !== 0) {
+            this.drawForward(this.groups_forward[index - 1], target);
+          }
+
+          // 查找反向绿波组
+          this.groups_back[index].left = e.transform.target.left;
+          this.groups_back[index].setCoords();
+          if (index !== 0) {
+            this.drawBackward(this.groups_back[index], this.groups_back[index - 1]);
+          }
+          if (index !== this.groups_back.length - 1) {
+            this.drawBackward(this.groups_back[index + 1], this.groups_back[index]);
+          }
+          this.$emit('computeData', {
+            groups_forward: this.groups_forward,
+            groups_back: this.groups_back,
+            rate: this.singleWaveWidth,
+            current_group: group
+          });
+        });
+        group.on('mouseup', e => {
+          this.$emit('updateCrossParams', {
+            rate: this.singleWaveWidth,
+            current_group: group,
+            direction: this.getGroupDirection(e.transform.target)
+          });
+        });
+        group_back.on('moving', e => {
+          if (e.transform.target.left <= -1 * this.interval * this.singleWaveWidth) {
+            e.transform.target.left = -1 * this.interval * this.singleWaveWidth;
+          } else if (e.transform.target.left >= 0) {
+            e.transform.target.left = 0;
+          }
+          const target = e.transform.target;
+          const index = this.groups_back.findIndex(ele => ele.crossId === target.crossId);
+          if (index !== 0) {
+            this.drawBackward(target, this.groups_back[index - 1]);
+          }
+          if (index !== this.groups_back.length - 1) {
+            this.drawBackward(this.groups_back[index + 1], target);
+          }
+          // 查找正向绿波组
+          this.groups_forward[index].left = e.transform.target.left;
+          this.groups_forward[index].setCoords();
+          if (index !== this.groups_forward.length - 1) {
+            this.drawForward(this.groups_forward[index], this.groups_back[index + 1]);
+          }
+          if (index !== 0) {
+            this.drawForward(this.groups_forward[index - 1], this.groups_back[index]);
+          }
+          this.$emit('computeData', {
+            groups_forward: this.groups_forward,
+            groups_back: this.groups_back,
+            rate: this.singleWaveWidth,
+            current_group: group_back
+          });
+        });
+        group_back.on('mouseup', e => {
+          this.$emit('updateCrossParams', {
+            rate: this.singleWaveWidth,
+            current_group: group_back,
+            direction: this.getGroupDirection(e.transform.target)
+          });
+        });
+      });
+
+      // 初始化正向绿波
+      for (let i = 0; i < this.groups_forward.length - 1; i++) {
+        this.drawForward(this.groups_forward[i], this.groups_forward[i + 1]);
+      }
+      // 初始化反向绿波
+      for (let i = this.groups_back.length - 1; i > 0; i--) {
+        this.drawBackward(this.groups_back[i], this.groups_back[i - 1]);
+      }
+      this.$emit('computeData', {
+        groups_forward: this.groups_forward,
+        groups_back: this.groups_back,
+        rate: this.singleWaveWidth
+      });
+    },
+    drawForward(startGroup, endGroup) {
+      // 计算到下个路口所需的时间
+      const time = endGroup.crossDistance / 1000 / startGroup.forwardSpeed * 3600;
+      let y1 = startGroup.aCoords.bl.y;
+      let y2 = endGroup.aCoords.bl.y;
+      startGroup.forEachObject((item, index) => {
+        let x1, x2, x3, x4; // 左下开始顺时针
+        const need_t = time * this.singleWaveWidth;
+        const pk = 'polygon' + index;
+        endGroup.forEachObject((ng, gidx) => {
+          const start_x0 = item.aCoords.tl.x + startGroup.left + startGroup.width / 2; // 开始点
+          const end_x0 = ng.aCoords.tl.x + endGroup.left + endGroup.width / 2;
+          if (start_x0 + need_t > end_x0 && start_x0 + need_t < end_x0 + ng.width && start_x0 + item.width + need_t > end_x0 + ng.width) {
+            x1 = start_x0;
+            x2 = start_x0 + time * this.singleWaveWidth;
+            x3 = end_x0 + ng.width;
+            x4 = x1 + x3 - x2;
+          } else if (start_x0 + need_t > end_x0 && start_x0 + need_t < end_x0 + ng.width && start_x0 + item.width + need_t > end_x0 && start_x0 + item.width + need_t < end_x0 + ng.width) {
+            x1 = start_x0;
+            x2 = start_x0 + need_t;
+            x3 = start_x0 + item.width + need_t;
+            x4 = start_x0 + item.width;
+          } else if (start_x0 + need_t < end_x0 && start_x0 + item.width + need_t > end_x0 && start_x0 + item.width + need_t < end_x0 + ng.width) {
+            x1 = end_x0 - time * this.singleWaveWidth;
+            x2 = end_x0;
+            x3 = x2 + start_x0 + item.width - x1;
+            x4 = start_x0 + item.width;
+          } else if (end_x0 - need_t > start_x0 && end_x0 - need_t < start_x0 + item.width && end_x0 + ng.width - need_t > start_x0 && end_x0 + ng.width - need_t < start_x0 + item.width) {
+            x1 = end_x0 - need_t;
+            x2 = end_x0;
+            x3 = end_x0 + ng.width;
+            x4 = x3 - need_t;
+          } else if (end_x0 - need_t > start_x0 && end_x0 - need_t < start_x0 + item.width && end_x0 + ng.width - need_t > start_x0 + item.width) {
+            x1 = end_x0 - need_t;
+            x2 = end_x0;
+            x4 = start_x0 + item.width;
+            x3 = x4 + need_t;
+          } else if (end_x0 - need_t < start_x0 && end_x0 + ng.width - need_t > start_x0 && end_x0 + ng.width - need_t < start_x0 + item.width) {
+            x1 = start_x0;
+            x2 = x1 - need_t;
+            x3 = end_x0 + ng.width;
+            x4 = x3 - need_t;
+          }
+        });
+        if (item[pk]) {
+          this.canvas.remove(item[pk]);
+          item[pk] = null;
+        }
+        if (x1 !== x3 && x2 !== x4) {
+          item[pk] = this.drawPolygon([{
+            x: x1,
+            y: y1
+          }, {
+            x: x2,
+            y: y2
+          }, {
+            x: x3,
+            y: y2
+          }, {
+            x: x4,
+            y: y1
+          }], this.forwardColor);
+          this.canvas.add(item[pk]);
+        }
+      });
+    },
+    // 反向绿波图
+    drawBackward(startGroup, endGroup) {
+      // 计算到下个路口所需的时间
+      const time = startGroup.crossDistance / 1000 / startGroup.reverseSpeed * 3600;
+      let y1 = startGroup.aCoords.bl.y;
+      let y2 = endGroup.aCoords.bl.y;
+      startGroup.forEachObject((item, index) => {
+        let x1, x2, x3, x4; // 左上开始顺时针
+        const need_t = time * this.singleWaveWidth;
+        const pk = 'polygon_back' + index;
+        endGroup.forEachObject((ng, gidx) => {
+          const start_x0 = item.aCoords.tl.x + startGroup.left + startGroup.width / 2; // 开始点
+          const end_x0 = ng.aCoords.tl.x + endGroup.left + endGroup.width / 2;
+          if (start_x0 + need_t > end_x0 && start_x0 + need_t < end_x0 + ng.width && start_x0 + item.width + need_t > end_x0 + ng.width) {
+            x1 = start_x0;
+            x4 = start_x0 + time * this.singleWaveWidth;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - x4 + x1;
+          } else if (start_x0 + need_t > end_x0 && start_x0 + need_t < end_x0 + ng.width && start_x0 + item.width + need_t > end_x0 && start_x0 + item.width + need_t < end_x0 + ng.width) {
+            x1 = start_x0;
+            x4 = start_x0 + need_t;
+            x3 = start_x0 + item.width + need_t;
+            x2 = start_x0 + item.width;
+          } else if (start_x0 + need_t < end_x0 && start_x0 + item.width + need_t > end_x0 && start_x0 + item.width + need_t < end_x0 + ng.width) {
+            x2 = start_x0 + item.width;
+            x3 = x2 + time * this.singleWaveWidth;
+            x4 = end_x0;
+            x1 = x2 - (x3 - x4);
+          } else if (end_x0 - need_t > start_x0 && end_x0 - need_t < start_x0 + item.width && end_x0 + ng.width - need_t > start_x0 && end_x0 + ng.width - need_t < start_x0 + item.width) {
+            x1 = end_x0 - need_t;
+            x4 = end_x0;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - need_t;
+          } else if (end_x0 - need_t > start_x0 && end_x0 - need_t < start_x0 + item.width && end_x0 + ng.width - need_t > start_x0 + item.width) {
+            x1 = end_x0 - need_t;
+            x4 = end_x0;
+            x2 = start_x0 + item.width;
+            x3 = x4 + need_t;
+          } else if (end_x0 - need_t < start_x0 && end_x0 + ng.width - need_t > start_x0 && end_x0 + ng.width - need_t < start_x0 + item.width) {
+            x1 = start_x0;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - need_t;
+            x4 = x1 + need_t;
+          }
+        });
+        if (item[pk]) {
+          this.canvas.remove(item[pk]);
+          item[pk] = null;
+        }
+        if (x1 !== x3 && x2 !== x4) {
+          item[pk] = this.drawPolygon([{
+            x: x1,
+            y: y1
+          }, {
+            x: x2,
+            y: y1
+          }, {
+            x: x3,
+            y: y2
+          }, {
+            x: x4,
+            y: y2
+          }], this.backwardColor);
+          this.canvas.add(item[pk]);
+        }
+      });
+    },
+    drawPolygon(points = [], color = this.forwardColor) {
+      const polygon = new fabric["fabric"].Polygon(points, {
+        fill: color,
+        opacity: 0.5,
+        selectable: false,
+        evented: false,
+        objectCaching: false
+      });
+      // polygon.sendToBack();
+      return polygon;
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/green-wave/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_green_wavevue_type_script_lang_js = (green_wavevue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/green-wave/index.vue?vue&type=style&index=0&id=9b8515cc&prod&lang=scss&scoped=true
+var green_wavevue_type_style_index_0_id_9b8515cc_prod_lang_scss_scoped_true = __webpack_require__("9518");
+
+// CONCATENATED MODULE: ./src/components/green-wave/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var green_wave_component = Object(componentNormalizer["a" /* default */])(
+  components_green_wavevue_type_script_lang_js,
+  green_wavevue_type_template_id_9b8515cc_scoped_true_render,
+  green_wavevue_type_template_id_9b8515cc_scoped_true_staticRenderFns,
+  false,
+  null,
+  "9b8515cc",
+  null
+  
+)
+
+/* harmony default export */ var green_wave = (green_wave_component.exports);
+// CONCATENATED MODULE: ./src/index.js
+
+
+
+
+
+
+// 初始化事件总线
+bus(external_commonjs_vue_commonjs2_vue_root_Vue_default.a);
+
+// 注册全局图片对象
+external_commonjs_vue_commonjs2_vue_root_Vue_default.a.prototype.pics = pics_load_tool;
+window.pics = pics_load_tool;
+
+// 组件安装方法
+traffic_lane.install = function (Vue) {
+  Vue.component('traffic-lane', traffic_lane);
+};
+green_wave.install = function (Vue) {
+  Vue.component('green-wave', green_wave);
+};
+
+// 导出组件
+/* harmony default export */ var src = __webpack_exports__["a"] = ({
+  trafficLane: traffic_lane,
+  greenWave: green_wave
+});
+
+
+/***/ }),
+
+/***/ "b943":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVZJREFUWEftlL8rRmEUxz/fleyUv8AgJaUsbGJlFQaLyWBQBu/AYDDIKsoiZZMVu5JBNrM/gPmrp+5bt9u973u793mv6J7x6ZznfM73/BCRzfYGMCLptMzXKuNU1sf2BPCW+C9Luu8XGxvgBZhKkn4Dk5I+ekFEA7B9Bmxnkr1K6gLlckQBsL0JnBdUeitppUiF2gC2Q4VB+l52KGk/zyEGwDMw3W/YgDVJV1m/2gDdD20/APOZBI+SFpoawn8OYHsY2JV0kCfpQFtgewa4AS4ldRoFsL0OXCRJQ/VPGYAv4B24iz6Eto+D7CVWrMil2hYk/Q6SL9VIHkIrA+wAJzWTVwcIkbbngGtgvAZINQVS120oTD6wmrzlbcAYsFUAWQ8gBbIHHAGdvDtgOwCGmclaHICkJYvA7K8copQSo5I+Gz1EZQdwoKe4DEQL0CrQKtAq8GcV+AFONbshRCVOIgAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "cdd5":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAa1JREFUWEftlitPHVEUhb+VwC8gaRBVOBCtKKINCBTXUdGaPqjoQ1HfFAMYCB5UaUUfYFoBjqsqSqgoAgS4KkTThF8AySInOZcMkzuP28zcmtlmksk+63yzzt5nj/jHsP0cmABuA3eAA+AQ2JP0oaysyiYm82xvAzM5a3ck3S+j3TOAbZcRDjmSCvULE1JfvggslAUAliSFNZlRGsD2E+BzSuk7MC9p3/Y9YBmYSuU8lfQli6AXgI/AbELovaSXaWHbG8CLxPtPkp5VARAq/FZCaFLSXheA0Bk/Eu+PJIVO6Rq9OHCt+PIKLF2oebkNQONA40DjQONArgO294G7BeP3p6QwCa+isqvY9ts4YvMYwjheqQtgFDgucGBM0kktAEHU9i4wnQHRltTqMpJLT87CLrA9B6xlALyWtF43wA3gFBhMbXQO3JT0t1aAeAxfgQepjb5JetjNmcq6oCNu+xGwmdrssaStfgEMAH+AobjhGTAs6aIvAPEY3gGdv+ANSa+y2rPyI4gAoRVDS4ZoSWr3FSBC/A5PSSN5l1MtDkSA1Qjw5n8BjEeAX1UBXAINZgkw80nxDQAAAABJRU5ErkJggg=="
+
+/***/ }),
+
+/***/ "d420":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA0xJREFUSEullk1oVFcUx///+yZjviZptNMZFYKB2oKWWVorY0VEFwoqStRo1YWIgrgS0bYUpt1EaV25CqUBg1ETvxUMaaiCAdusa+jCRUsIOEmTmcSZydTJu/fYN5OExLz3BvFs3uKce37n475zLuEnP+eblKh9pNksgrUEw465QMYIDArUY0PTjeNVf3u5oauiLd9oKblAYB8AyzcIUgvkptY8hxNVQ2/bLgIE26daDNgGkZCv48XKrAJPFo5Vdc5XLQAEfpk6QyU/QuCeWTkiIWJ41j5WfWnWdM5RsCN7EMKr/s7lJyHDFBz1ZNHxIF8VjtRec2xKgCv5xqBlD1JY63qwGJn5tnCkrhUJUcGPp9op4gkRSragA2txtGqoCKjszNwAsN89Kmoxcur14VDbnD4hqvKTXDt8IAC6/jsUOsDKjokmBq0XHrelAIPD+YOh7kVwB/Jprp30zESLCqxmTfer8wK0ukUvxMV8c915z3onRFWvydwFsNPNhsDXrLk12QtimysASEztrf8+dOfVMkef2VM37nxrurPR3JJ8DrvCmerbkz8Q+M4jiD7W3psYpmClO4AJ25KOCsMeA92c2730T8cudCcVF6rLRlXssPT0aRCuWQowzNDDyWmKBDwA9wFZTyCijYnNAR6k4oTqBzAkxHMKtruXmK9Z/2hiGh6A+YdsSCy3YyaDB6m4sugA/IW0+UHP+DBI1xIt+OU1YukZQEOPUyKUBzglavh1vBdwb/KC8MhYemspg4a+VBwiZQEC9HHZb2NOg1yv6XyAMXYsvTU6AxiNK1Xsgb8IvmF9b7IpEKx4QYjvWNb2PMCT0bhVarKnCKhtZa0ujooPn/57g56jouTDFh1LbyplEH4yGkeZJgvQNfZl+EAR0NCfaqxQ+rnfDqA2sZFZQP9onH5NJjPTxvosvXFpadg5EnmWbAFVp+e4FrNFL7H+cmwtm+tgzD3X+jjjWnhoZEP4uqNfsFiif4ycAfFeCweCs8n1kcULZzaaFQPJFkO2EXinlSlEloKTL9dFvFfmLCT6+8tVCLD1/5dDc9mlD2gR3IaWc8kvlv/zdtl8d29kINlkWdgPYjNE1oD8aMbBGASDAB5rja6Rz6Oez5Y3mtVTetwb13sAAAAASUVORK5CYII="
+
+/***/ }),
+
+/***/ "e418":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEDSURBVFhH7dQxagJBGMXxIZ7AG9jY2XkBG2srwRPY2KURA4GAnW3AxtY6hSAWQsDCVi9gkZA7BFKt/1leEYgsM7NfrObX7JudnZ236K6z8ALFaA861jaEYhSzAlMoRjEr0MUYGgYzK+DNoXgf/qmPKH55gqb/1wza848mdJm9Dt6hvW5aQZfbeoT2qDSClthoYwfdv9IJWmanB93/pgsUiz60LEjt13CJNXzeYo9yIlByAf/UA0ygU+4ZisGSCrzCvw0b6JTz//wzNAyWVOANP9CwlPoVNPsUf0ExikmBBRSjmRT4hmI0s58gVS6QC+QCuUAukAs0dKzUwicO8iGarsG5K5lGFC/j6SCaAAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "e63c":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEASURBVFhH7dUhjsJAFMbxAoIVBMcVuAIJCk8wBMdB0CsxQLIO1F5jFZoLIDAo4AgYwv5f84mSlG1mOpQs9Gf6hnbyvZmUaeSjhR40zKWqq5MJVBavjSuetgNPXX0Htnozhn4uzg+UH/tGE7r9WH0o98YRI+ixx9lBmamWqEOPh7eCsu7aYwBNCcsOH+Vk+oKmhTWDMjJpSlgfOMMC7CDaIE5LoSmZnA4iC59Cw6iLOTQszgHJo3iIE7T4mG5lqunq5AILtLfexls0kGzqEyr/5PU1XEBlbl4NhOTdwBoqc/m/OxBKsAZc/npJwRqoQKWTcgde5yX0VTZQNvDuDUTRL5qDP5+BXe6aAAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "e7e7":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "e9a7":
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__.p + "static/img/demo.160f90e8.png";
+
+/***/ }),
+
+/***/ "fcf3":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAv9JREFUSEuNlj9sFEcUxr9v5vDhA4ONjH22EC0tf4yMBFeALNJSREggYYQwSFAFiBSUNGniKghoQALzxwIiESkhbQQIhG0BwkYUKVJT2Jc7MOA7H5y9Ox/ZNeafz7czxWp355v5zZs3770h5tvFmU1WwU8itxFohVAG8RQy58LD6d8/6j57sRcquwEeBbABRJOAF5SGQ6Z+waGGsUjK6GEH3vZROg8gVWsikYPhwaUHQCru/1nGrnl3ldK+WnoAgcgjYV/jAJdcrnRLGIk4i4jnf38fHMycij5SlyonAPyaoA9JbGXq0vQtErsSxIjMD55nOmLA2so4gdWJY4i/uOTqdMFHHE0mq/WYAWj5LGnyWA8Umb5edtCcL5IajXYEgWatMUNJ2rifENM3SlMEmrwGiD0wrgrRCyCgxMabpSEI23wAigByVRo/AKARNt58s4fkbz4ARxMDDOBngbQ33vtlf0wNAupNhDjbE2qmaq1NBgjXpr9d2fvBuWLTn6VjoE4CWvT4OaDHyFXBek5m0QH907tWnI0C88vTc0+p5aXyOkrNtawpZYJ/msvkLNn1dT8NHAJXKLe0/IvtDOb7FwKq5XXWVdvhYBZMMmtH3WzZMNO4ccECDFzoTKG8rBZAYvPfk8cB/oA6EUoh52DSpLtTx19FQP2vv1n1aYtabk8OQh5OJnNOLm3AeoAPbF17tbO1ly13i3sMPI+pczljTfr/uPEAAM6avWy9/3IIkleghXA5o2iL/ABxoK1+UJyCb6oIlXPWpA3kZQGiVNE2XJgrIh5NkZONa7Aydz3kc/mu/WHxJaRVPgMUaj0aAIZ+6RrkJNsf/XeLSC44IIr5SltntJBspjAOeRac9of5blqOMKlkOh2b2JI9EwE6nuS/g3i6ntUCQoXaGkdyx2i+D8KiRZ/S4Pjm7KeiL7FzrHBF0v5FIAGIIxNd2YGPqaLj8XgXUuZHAPG1RdG1xeCpZM7lN7XVvLZkxwq7SXcUDhtJLI/qNoBhBK5/ortzNIK/B/tDQpBruQwSAAAAAElFTkSuQmCC"
+
+/***/ }),
+
+/***/ "fe4f":
+/***/ (function(module, exports) {
+
+module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA2pJREFUSEuVlk1sFGUYx///md21ZXf7BWXrRxqbQKKFeFvBBE0wEW96IXwUqIfGyIkLkionYtSQGA/GUzWaSKy0FKPRWCkESSQKGA4YpQc5aABh2l3a3Xbbrbs789eZdVu6uzOr723yPu/ze76fIYLOh/keQ8YuwnlWQC/BTldcUIrApGB859A5hZebf/dTw7oXQ/lu09Dxf5TsAmAGGkHagsZsm4N4pflmtWwNIPLx4l4HHIIUD1Rce5kzwIOFgebh+69WAUIfLR6moXcg1Pds5eXPIJ6okSMkh0dKA2verYguK4qcyPVB/LSxcv1WCEWTkWL+KKjBGkfoatD+Qn/sM/euDPgk3x0xS9cpxoLCInABcrYW+uO/4piMBzYsjEN4vvqNqFzBDm3CS803PUDT8PwIgN0NkikIB5b2xVZiPJxpb4L5E4ANdd6OLu2L72HTiUwPI+aNhtUCFgD9YpfQX9gfn/QMOzl/lsDjIB6pA7BVsDcyOjY3KOG4r/VuTO9PumEmF3dGr7rya07NWQASAT3wOqOnsxMgdtQVknFN1Bihtyr3kpKLO9s8QPRzFyBfAIBzjH2RuUXUuihyJGe2DETzqRaYkc1eB9NoMpdweb6vJe1+x7/MWpA/QMBtxr/OFimFqjw4OfdCW1+jRmv5KhvogcgSW8czRdQCbApvZK6+92Z776F4MRZ+2IWFw8U/Z5/ryFbArd9kgkNE/sW2MzO3UCdEXpMQ30IYF/C+p5TIFJeKjy28mJhyP9vOzDbKwW22n703AfgkuWxqCcByCB2YyeyOcpI7zt2zJP8qkpvktednBgHHv0yrEkFDyfT2Tg+w9nw6sEwhHGXrhNUTioRvEAoey8ugFcC6C/4AgXbJMDd6o2Ld96kRNhoV/wJkIJneVvag82LKgk+IBIymn+nc4wHaL850h1m6DiBw2LmyDrgMWP+DC6jXB8wVZW6afbqjPOzck/gx1Qeq4bi2TSbTW8oeJC5N13rg7gRbB6a3JbyhuGqxdF2eOgwicOHIwAcU7nhWCa+u8ro8t45YWxO1C6fiyUNXrL0OOUTgf61METkKB+8+Wba8cuquxq5Ldx9liG/jvyx9wBZwGiW9Zj314B9VVR28exNXrB7TxG4Q20H2Qlpf7mhOQ5qEcMG2MTq1pcv3t+VvhEpbaxd54pUAAAAASUVORK5CYII="
+
+/***/ })
+
+}]);