traffic-diagram 1.1.1 → 1.1.2

package/lib/traffic-diagram.common.chunk-src.js

@@ -1811,9 +1811,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 /* harmony default export */ var src = __webpack_exports__["a"] = ({
-  install,
-  TrafficLane: traffic_lane,
-  GreenWave: green_wave
+  install
 });
 
 /***/ }),

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

@@ -1811,9 +1811,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 /* harmony default export */ var src = __webpack_exports__["a"] = ({
-  install,
-  TrafficLane: traffic_lane,
-  GreenWave: green_wave
+  install
 });
 
 /***/ }),

package/lib/traffic-diagram.umd.min.chunk-src.js

@@ -1 +1 @@
-(("undefined"!==typeof self?self:this)["webpackJsonptraffic_diagram"]=("undefined"!==typeof self?self:this)["webpackJsonptraffic_diagram"]||[]).push([[1],{2621:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAT9JREFUWEftlUEuBEEUhr//EOIKQoTEBisOwFKQWIvMAnEOEzYjVhIL9hzArNgSpxCH+KWle8x09HRVYWyqFr3ofu/9X//1XpX4wbJ9UqRLOk0to9RE2zvATZm/K+k2pVYSgO0V4LEmuCrpKRYiGsD2NPAKTNXE3oF5SW8xECkAz8BCg8iLpMU/A7B9B2y0CNxL2gyFCHbA9hlwGFj4XNJRSGwwQL2YbQ+960taDxGsx2SA7MC3Dti+lLQ/rqlim9D2A7AlqTiwBmsEwPYscA0sSRq7PYkAcyVEvyIYiNjeK8Wrb4OgBifWhscwcASrnI6k3udNWjwiD5lArdawnqROBdAFjltTfjfgC6B0YRtIutMTuEa3oCpgewa4ApYn3oTDf2H7QtLBxMcwxsrYMWyqnY/i7EB2IDuQHfh3Bz4Azh/GIdToBDMAAAAASUVORK5CYII="},4429:function(t,i,e){},"64e8":function(t,i){t.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=="},6521:function(t,i,e){},"6ddb":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlr0uBVEUhb/1Alq9SiRKnQgJiUSD5N5KwhOoJQo0PIAXoNC4hFBQKK7o6ahVGp3ekpPMyPxdc2cUEjmnO7P3XvvLyt4nI/746I/7EwGiA//TAduzxe2S1K/auEoHbE8DD5mCE0lrTVbW9i6wk6npSDorgRU/2B4FAu14EjuUtNmkeZprOwAEkHDegRlJL1mtkgO2L4DlJGmvYWND7m0J93BSiCtgRdJnqpsDsH0AbDVs2jR9X9J2CcD2OnDUVK1l/oak41D77YDtEeAcmG8pOmzZLdCV9JEDCBfbY8AlMJmo9YDnAcrZCQ9Dez8gbwLoJLFHYFXSa+UMJBBTwDUQtiGcnqRuUdx2OmAh1Jc0V5Fzmmn+BixJevpxCxKIReAmk1iCqAOwnW0epBYk3RUhWz/FdQDDDkQEiA5EB37jQO6nY9APR906tgaoEx42HgGiA9GBL9fygiG6SEn5AAAAAElFTkSuQmCC"},"8aaa":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPlJREFUWEftkDEuhEEARt+7gEKjcgFxAQoKCm5BQqOh4BQUNBqbcAsKCgouIC6g0ihc4JNNVrPZ3Zn/F43MlDPzfd/Lk1+cJAfDuHrZt8a+wSRrwOMov64+9enqBZBkHngDFkajH8CS+tkVoi/APbAxNvagbv45QJJz4HDK0IV61AWik4Eke8BVYWBfHdRCVAMkWQGeK4tX1Zeav1UASeaAV2CxphR4B5bVr9L/WoBbYKtUNvZ+p26XMkWAJKfAcaloyvuZejIrOxMgyQ5w3XP8J7ar3kzrKBqYFEySSfdq577OgeFwA2gGmoFmoBloBpqBZqAZ+FcGvgHC1IwhOqX0yQAAAABJRU5ErkJggg=="},"99fc":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlTEvBVEQhb9T8wPUOlHIS/RoRScRjYRoRaFQUFBIFAqVRoFoaYmORiIRyYvCL5DQC+3IJPsS1u67k312q532zsz59szcvSIYZrYOfEg6DZaE0hTJMrNZ4CrLHZf0EqmL5CQBzGwUeAaGsoZdSZ1I80hOBKALTOSaHUlaiwikcvoCmNklMF/SZFXSSUogdV4KYGZ7wHaiQUeSO1Q5CgHMbAk4D3R9kjQZyCtNiezALTCd63AnaWYQ4V5tC/DvDpjZLnAg6TMyojoAdoBlYEHSYwqiMgAwB4wBwzmRKcBd8FiRdNYPoipA6sN+nvs4NssKmgBw7etsJH/2oikAh9iQdJh3ogmAV2BR0n3RGAYFOAbeChr7TfC48Bsh6auOHfBr5gK/IvsPOMCWpP3UtlZ1oPQtyAAeJN2kxP28DoARSe8R8VoAosLta9g60DrQOtA60HPgG3HYvyHuUz0OAAAAAElFTkSuQmCC"},b209:function(t,i,e){"use strict";e("6521")},b635:function(t,i,e){"use strict";var a=function(){var t=this,i=t._self._c;return i("div",{attrs:{id:"canvasWrapper"}},[i("canvas",{ref:"road",staticClass:"crossing-box"}),i("transition",{attrs:{"enter-active-class":"animate__animated animate__bounceInLeft"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showLegend,expression:"showLegend"}],ref:"legendBox",staticClass:"legend-box"},t._l(this.laneDirections,(function(e,a){return i("div",{key:a,staticClass:"legend-item",style:{background:e.laneDirName===t.currentLaneDirName?t.laneActiveColor:"rgba(31, 200, 255, 10%)"},on:{click:function(i){return t.chooseImg(e)}}},[i("img",{attrs:{src:e.img,alt:""}}),i("div",{staticStyle:{color:"#fff"}},[t._v(t._s(e.laneDirName))])])})),0)])],1)},s=[],n=e("2ef0"),h=e.n(n),r=e("7a94"),o=e("e63c"),l=e.n(o),c=e("8aaa"),d=e.n(c),g=e("e418"),A=e.n(g),f=e("b943"),v=e.n(f),u=e("6ddb"),m=e.n(u),p=e("99fc"),w=e.n(p),W=e("2621"),b=e.n(W),D=e("cdd5"),x=e.n(D),C=e("64e8"),y=e.n(C),k={name:"TrafficLane",props:{laneDiagramData:{type:Array,default:()=>[]},canvasHeight:{type:Number,default:300},configType:{type:String,default:""},laneWidth:{type:Number,default:22},laneDividerLength:{type:Number,default:80},laneDirections:{type:Array,default:()=>[{img:l.a,laneDirName:"左转"},{img:d.a,laneDirName:"直行"},{img:A.a,laneDirName:"右转"},{img:v.a,laneDirName:"直左"},{img:m.a,laneDirName:"左右"},{img:w.a,laneDirName:"直右"},{img:b.a,laneDirName:"直左右"},{img:x.a,laneDirName:"掉头"},{img:y.a,laneDirName:"其他"}]},maxCongestionValue:{type:Number,default:1},clickEvent:{type:Boolean,default:!1},congestionFactorVisible:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},selectedLane:{type:String,default:""},laneActiveColor:{type:String,default:"#27ffd5"}},data(){return{data:[],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:!1,canvasWidth:300,chooseGroup:[],resizeHandler:null}},components:{},computed:{},created(){this.resizeHandler=h.a.debounce(()=>{this.canvas&&(this.canvas.dispose(),this.canvas=null,this.$nextTick(()=>{this.init()}))},200),window.addEventListener("resize",this.resizeHandler)},mounted(){this.init()},beforeDestroy(){window.removeEventListener("resize",this.resizeHandler),this.resizeHandler.cancel(),this.canvas&&(this.canvas.dispose(),this.canvas=null)},watch:{laneDiagramData:{handler(t){this.canvas&&(this.canvas.dispose(),this.canvas=null),this.$nextTick(()=>{this.init()})},deep:!0}},methods:{init(){const t=document.getElementById("canvasWrapper");this.canvasWidth=t.offsetWidth,this.canvas=new r["fabric"].Canvas(this.$refs.road,{backgroundColor:"rgba(17,94,7,0.4)",selection:!1,width:this.canvasWidth,height:this.canvasHeight});const i=this.laneDiagramData.filter(t=>"北"===t.inDirection).length,e=this.laneDiagramData.filter(t=>"西"===t.inDirection).length,a=this.laneDiagramData.filter(t=>"南"===t.inDirection).length,s=this.laneDiagramData.filter(t=>"东"===t.inDirection).length,n={x:this.canvasWidth/2-this.laneWidth*i,y:this.canvasHeight/2-this.laneWidth*(s||e)},h={x:0,y:this.canvasHeight/2-this.laneWidth*(s||e)},o={x:0,y:this.canvasHeight/2+this.laneWidth*e},l={x:this.canvasWidth/2-this.laneWidth*(i||a),y:this.canvasHeight/2+this.laneWidth*e},c={x:this.canvasWidth/2-this.laneWidth*(i||a),y:this.canvasHeight},d={x:this.canvasWidth/2+this.laneWidth*a,y:this.canvasHeight},g={x:this.canvasWidth/2+this.laneWidth*a,y:this.canvasHeight/2+this.laneWidth*(e||s)},A={x:this.canvasWidth,y:this.canvasHeight/2+this.laneWidth*(e||s)},f={x:this.canvasWidth,y:this.canvasHeight/2-this.laneWidth*s},v={x:this.canvasWidth/2+this.laneWidth*(a||i),y:this.canvasHeight/2-this.laneWidth*s},u={x:this.canvasWidth/2+this.laneWidth*(a||i),y:0},m={x:this.canvasWidth/2-this.laneWidth*i,y:0};var p=new r["fabric"].Polygon([n,0!==e?h:{},0!==e?o:{},l,0!==a?c:{},0!==a?d:{},g,0!==s?A:{},0!==s?f:{},v,0!==i?u:{},0!==i?m:n],{fill:"#989898",stroke:"#fff",strokeWidth:2,selectable:!1});this.canvas.add(p),p.on("mousedown",()=>{this.showLegend=!1});const w={x1:this.canvasWidth/2,y1:0,x2:this.canvasWidth/2,y2:this.canvasHeight/2-this.laneWidth*(s||e)},W={x1:0,y1:this.canvasHeight/2,x2:this.canvasWidth/2-this.laneWidth*(i||a),y2:this.canvasHeight/2},b={x1:this.canvasWidth/2,y1:this.canvasHeight,x2:this.canvasWidth/2,y2:this.canvasHeight/2+this.laneWidth*(e||s)},D={x1:this.canvasWidth,y1:this.canvasHeight/2,x2:this.canvasWidth/2+this.laneWidth*(a||i),y2:this.canvasHeight/2},x=[i?w:{},e?W:{},a?b:{},s?D:{}];x.forEach(t=>{const i=new r["fabric"].Line([t.x1,t.y1,t.x2,t.y2],{stroke:"#e6c130",strokeWidth:2});this.canvas.add(i)});const C=this.laneDividerLength;if(i>0){const t=this.laneDiagramData.filter(t=>"北"===t.inDirection);for(let i=0;i<t.length;i++){const a={x1:this.canvasWidth/2-this.laneWidth*(i+1),y1:this.canvasHeight/2-this.laneWidth*(s||e),x2:this.canvasWidth/2-this.laneWidth*(i+1),y2:this.canvasHeight/2-this.laneWidth*(s||e)-C},n=t[i],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o?r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([a.x1,a.y1,a.x2,a.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.laneWidth,height:this.canvasHeight/2-this.laneWidth*(s||e),fill:this.calcBgColor(h),left:this.canvasWidth/2-this.laneWidth*(i+1),top:0});this.currentGroup&&this.currentGroup.name==="N_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2-this.laneWidth*(i+1),top:(this.canvasHeight-this.laneWidth*(s||e)-this.laneWidth*e)/2-22,textAlign:"center",width:this.laneWidth,fill:"#fff",angle:180,originX:"right",originY:"bottom"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth/2-this.laneWidth*(i+1-.25),top:5,textAlign:"left",width:this.laneWidth,fill:"#fff",angle:90,originX:"left",originY:"bottom"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"N_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2-this.laneWidth*(i+1),top:(this.canvasHeight-this.laneWidth*(s||e)-this.laneWidth*e)/2-50,angle:180,originX:"right",originY:"bottom"}):console.error(`${n.inDirection}向 - ${n.laneDirName}车道，图标缺少！`)}}if(e>0){const t=this.laneDiagramData.filter(t=>"西"===t.inDirection);for(let e=0;e<t.length;e++){const s={x1:this.canvasWidth/2-this.laneWidth*(i||a),y1:this.canvasHeight/2+this.laneWidth*(e+1),x2:this.canvasWidth/2-this.laneWidth*(i||a)-C,y2:this.canvasHeight/2+this.laneWidth*(e+1)},n=t[e],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o?r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([s.x1,s.y1,s.x2,s.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.canvasWidth/2-this.laneWidth*(i||a),height:this.laneWidth,fill:this.calcBgColor(h),left:0,top:this.canvasHeight/2+this.laneWidth*e});this.currentGroup&&this.currentGroup.name==="W_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2-this.laneWidth*(i||a),top:this.canvasHeight/2+this.laneWidth*e,textAlign:"center",width:this.laneWidth,fill:"#fff",angle:90,originX:"left",originY:"top"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:5,top:this.canvasHeight/2+this.laneWidth*(e+.25),textAlign:"left",width:this.laneWidth,fill:"#fff",originX:"left",originY:"top"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"W_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2-this.laneWidth*(i||a)-30,top:this.canvasHeight/2+this.laneWidth*e,angle:90,originX:"left",originY:"top"}):console.error(`${n.inDirection}向 - ${n.laneDirName}车道，图标缺少！`)}}if(a>0){const t=this.laneDiagramData.filter(t=>"南"===t.inDirection);for(let i=0;i<t.length;i++){const a={x1:this.canvasWidth/2+this.laneWidth*(i+1),y1:this.canvasHeight/2+this.laneWidth*(e||s),x2:this.canvasWidth/2+this.laneWidth*(i+1),y2:this.canvasHeight/2+this.laneWidth*(e||s)+C},n=t[i],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o&&r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([a.x1,a.y1,a.x2,a.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.laneWidth,height:this.canvasHeight/2,fill:this.calcBgColor(h),left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s)});this.currentGroup&&this.currentGroup.name==="S_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s),textAlign:"center",width:this.laneWidth,fill:"#fff"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth/2+this.laneWidth*(i+.25),top:this.canvasHeight-5,textAlign:"left",width:this.laneWidth,fill:"#fff",angle:-90}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"S_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s)+30})}}if(s>0){const t=this.laneDiagramData.filter(t=>"东"===t.inDirection);for(let e=0;e<t.length;e++){const s={x1:this.canvasWidth/2+this.laneWidth*(a||i),y1:this.canvasHeight/2-this.laneWidth*(e+1),x2:this.canvasWidth/2+this.laneWidth*(a||i)+C,y2:this.canvasHeight/2-this.laneWidth*(e+1)},n=t[e],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o&&r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([s.x1,s.y1,s.x2,s.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.canvasWidth/2,height:this.laneWidth,fill:this.calcBgColor(h),left:this.canvasWidth/2+this.laneWidth*(a||i),top:this.canvasHeight/2-this.laneWidth*(e+1)});this.currentGroup&&this.currentGroup.name==="E_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2+this.laneWidth*(a||i),top:this.canvasHeight/2-this.laneWidth*(e+1),textAlign:"center",width:this.laneWidth,fill:"#fff",angle:-90,originX:"right",originY:"top"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth-5,top:this.canvasHeight/2-this.laneWidth*(e+1-.25),textAlign:"center",width:this.laneWidth,fill:"#fff",originX:"right",originY:"top"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"E_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2+this.laneWidth*(a||i)+30,top:this.canvasHeight/2-this.laneWidth*(e+1),angle:-90,originX:"right",originY:"top"})}}const y={x1:this.canvasWidth/2-this.laneWidth*i,y1:this.canvasHeight/2-this.laneWidth*(s||e),x2:this.canvasWidth/2,y2:this.canvasHeight/2-this.laneWidth*(s||e)},k={x1:this.canvasWidth/2-this.laneWidth*(i||a),y1:this.canvasHeight/2,x2:this.canvasWidth/2-this.laneWidth*(i||a),y2:this.canvasHeight/2+this.laneWidth*e},B={x1:this.canvasWidth/2,y1:this.canvasHeight/2+this.laneWidth*(e||s),x2:this.canvasWidth/2+this.laneWidth*a,y2:this.canvasHeight/2+this.laneWidth*(e||s)},N={x1:this.canvasWidth/2+this.laneWidth*(a||i),y1:this.canvasHeight/2-this.laneWidth*s,x2:this.canvasWidth/2+this.laneWidth*(a||i),y2:this.canvasHeight/2};let S=[];S.push(k),S.push(y),S.push(B),S.push(N),S.forEach(t=>{this.addFabricLine(t,"#fff",1)})},changeLane(t){t&&this.canvas&&(t.forEach(t=>{const i=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t);if(i){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill",this.laneActiveColor)}}),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&!t.includes(i.name)){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.canvas.renderAll())},changeLaneDir({laneDirCode:t,laneDirName:i}){if(this.canvas){const s=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t);var e=s.getObjects().find(t=>"rect"===t.type),a=s.getObjects().find(t=>"image"===t.type);const n=this.laneDirections.find(t=>t.laneDirName===i),h=n.img;a.setSrc(h,()=>{e.set("fill",this.laneActiveColor),this.canvas.renderAll()}),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&i.name!==t){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.canvas.renderAll()}},addFabricLine(t,i,e=1){const a=new r["fabric"].Line([t.x1,t.y1,t.x2,t.y2],{stroke:i,strokeWidth:e});this.canvas.add(a)},mousedownFun(t){const i=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t.target.name);var e=i.getObjects().find(t=>"rect"===t.type);if(this.multiple){if(e.choosen){e.set("fill","transparent"),e.set("choosen",!1);let t=this.chooseGroup.findIndex(t=>t===i.name);this.chooseGroup.splice(t,1)}else e.set("choosen",!0),e.set("fill",this.laneActiveColor),this.chooseGroup.push(i.name);this.$emit("chooseLane",this.chooseGroup)}else e.set("fill",this.laneActiveColor),this.currentGroup=i,this.currentGroupBK=h.a.cloneDeep(i),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&i.name!==t.target.name){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.$nextTick(()=>{const i=this.$refs.legendBox;i.style.top=t.target.top+"px",i.style.left=t.target.left+80+"px",this.currentLaneDirName=t.target.getObjects().filter(t=>"image"===t.type)[0].name,this.$emit("selectLane",{laneDirCode:this.currentGroup.name})});this.canvas.renderAll()},chooseImg(t){this.currentLaneDirName=t.laneDirName;var i=this.currentGroup.getObjects().find(t=>"image"===t.type);const e=t.img;i.setSrc(e,()=>{this.currentGroup=h.a.cloneDeep(this.currentGroupBK)}),this.$emit("changeLaneDir",{laneDirCode:this.currentGroup.name,laneDirName:t.laneDirName})},calcBgColor(t){if(t||0==t){const i=[{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 e="",a="";const s=t/this.maxCongestionValue;s>=0&&s<=.1?(e=i[0],a=i[1]):s>.1&&s<=.2?(e=i[1],a=i[2]):s>.2&&s<=.3?(e=i[2],a=i[3]):s>.3&&s<=.4?(e=i[3],a=i[4]):s>.4&&s<=.5?(e=i[4],a=i[5]):s>.5&&s<=.6?(e=i[5],a=i[6]):s>.6&&s<=.7?(e=i[6],a=i[7]):s>.7&&s<=.8?(e=i[7],a=i[8]):s>.8&&s<=.9?(e=i[8],a=i[9]):s>.9&&s<=1?(e=i[9],a=i[10]):s>1&&(e=i[10],a=i[10]);const n=Math.floor(e.r+(a.r-e.r)*s),h=Math.floor(e.g+(a.g-e.g)*s),r=Math.floor(e.b+(a.b-e.b)*s);return`rgb(${n}, ${h}, ${r})`}return"transparent"}}},B=k,N=(e("b209"),e("2877")),S=Object(N["a"])(B,a,s,!1,null,"638b02e2",null),E=S.exports,L=function(){var t=this,i=t._self._c;return i("div",{staticClass:"canvas-wrapper"},[i("canvas",{ref:"canvas_l",style:{width:t.yAxisWidth+"px"}}),i("canvas",{ref:"canvas",staticStyle:{flex:"1"}})])},H=[],R={name:"GreenWave",props:{crossData:{type:Array,default:()=>[]},canvasHeight:{type:Number,default:500},forwardDirection:{type:Boolean,default:!0},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},xAxisBottom:{type:Number,default:30},yAxisTop:{type:Number,default:30},yAxisWidth:{type:Number,default:200},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(t){this.drawRoad()},deep:!0}},mounted(){this.init()},created(){this.resizeHandler=h.a.debounce(()=>{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(),this.canvas&&(this.canvas.dispose(),this.canvas_l.dispose())},methods:{init(){const t=this.$el.offsetWidth-this.yAxisWidth;this.canvas&&this.canvas.dispose(),this.canvas=new r["fabric"].Canvas(this.$refs.canvas,{backgroundColor:"#fff",selection:!1,width:t,height:this.canvasHeight}),this.canvas_l&&this.canvas_l.dispose(),this.canvas_l=new r["fabric"].Canvas(this.$refs.canvas_l,{backgroundColor:"#fff",selection:!1,width:this.yAxisWidth,height:this.canvasHeight}),this.drawRoad()},drawBaseElement(){this.canvas.add(new r["fabric"].Line([0,this.canvas.height-this.xAxisBottom,this.canvas.width,this.canvas.height-this.xAxisBottom],{stroke:"#333",strokeWidth:1})),this.canvas.add(new r["fabric"].Line([0,this.canvas.height-this.xAxisBottom,0,this.yAxisTop],{stroke:"#333",strokeWidth:1}));const t=this.canvas.width;this.calculateLoopTime=this.loopTime||Math.ceil(t/this.interval/this.singleWaveWidth);for(let i=1;i<this.calculateLoopTime;i++)this.canvas.add(new r["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 r["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:t,left:i}){const e=this.initialPositions[t];let a="none";return e&&(a=i>e?"forward":"backward"),a},drawRoad(){this.groups_forward=[],this.groups_back=[],this.drawBaseElement(),this.canvas_l.add(new r["fabric"].Line([this.yAxisWidth/2,this.canvas.height-this.xAxisBottom,this.yAxisWidth/2,this.yAxisTop],{stroke:"lightgrey",strokeWidth:1,strokeDashArray:[5,2]}));const t=this.crossData.reduce((t,i)=>t+i.crossDistance,0);let i=0;const e=this.canvas.height-this.yAxisTop-this.xAxisBottom;this.crossData.forEach((a,s)=>{i+=a.crossDistance;let n=0;if(n=this.forwardDirection?(t-i)/t*e+this.yAxisTop:i/t*e+this.yAxisTop,this.canvas_l.add(new r["fabric"].Textbox(`【${a.crossRoadName}】`,{fontSize:14,left:0,top:n,textAlign:"center",width:this.yAxisWidth-1,backgroundColor:"#fff",originY:"bottom"})),0!==s){let s=0;s=this.forwardDirection?(t-i+a.crossDistance/2)/t*e+this.yAxisTop:(i-a.crossDistance/2)/t*e+this.yAxisTop;var h=new r["fabric"].Textbox(`${a.crossDistance},${a.forwardSpeed}km/h`,{fontSize:14,left:0,top:s,textAlign:"center",width:this.yAxisWidth-1,backgroundColor:"#fff",originY:"bottom"});this.canvas_l.add(h)}let o=[],l=[];for(let t=-1;t<this.calculateLoopTime;t++){const i=new r["fabric"].Line([(a.forwardPhaseDiff+this.interval*t)*this.singleWaveWidth,n,(a.forwardPhaseDiff+a.forwardGreen+this.interval*t)*this.singleWaveWidth,n],{stroke:this.forwardColor,strokeWidth:this.dragStrokeWidth,originY:"bottom"}),e=new r["fabric"].Line([(a.reversePhaseDiff+this.interval*t)*this.singleWaveWidth,n-this.dragStrokeWidth,(a.reversePhaseDiff+a.reverseGreen+this.interval*t)*this.singleWaveWidth,n-this.dragStrokeWidth],{stroke:this.backwardColor,strokeWidth:this.dragStrokeWidth,originY:"bottom"});o.push(i),l.push(e)}const c=new r["fabric"].Group(o,{...a,roadType:0,hoverCursor:"ew-resize",moveCursor:"ew-resize",lockRotation:!0,lockMovementY:!0,hasControls:!1,hasBorders:!1}),d=new r["fabric"].Group(l,{...a,roadType:1,hoverCursor:"ew-resize",moveCursor:"ew-resize",lockRotation:!0,lockMovementY:!0,hasControls:!1,hasBorders:!1});this.initialPositions[c.crossId]=c.left,this.initialPositions[d.crossId]=d.left,this.groups_forward.push(c),this.groups_back.push(d),this.canvas.add(c,d);c.on("moving",t=>{t.transform.target.left<=-1*this.interval*this.singleWaveWidth?t.transform.target.left=-1*this.interval*this.singleWaveWidth:t.transform.target.left>=0&&(t.transform.target.left=0);const i=t.transform.target,e=this.groups_forward.findIndex(t=>t.crossId===i.crossId);e!==this.groups_forward.length-1&&this.drawForward(i,this.groups_forward[e+1]),0!==e&&this.drawForward(this.groups_forward[e-1],i),this.groups_back[e].left=t.transform.target.left,this.groups_back[e].setCoords(),0!==e&&this.drawBackward(this.groups_back[e],this.groups_back[e-1]),e!==this.groups_back.length-1&&this.drawBackward(this.groups_back[e+1],this.groups_back[e]),this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth,current_group:c})}),c.on("mouseup",t=>{this.$emit("updateCrossParams",{rate:this.singleWaveWidth,current_group:c,direction:this.getGroupDirection(t.transform.target)})}),d.on("moving",t=>{t.transform.target.left<=-1*this.interval*this.singleWaveWidth?t.transform.target.left=-1*this.interval*this.singleWaveWidth:t.transform.target.left>=0&&(t.transform.target.left=0);const i=t.transform.target,e=this.groups_back.findIndex(t=>t.crossId===i.crossId);0!==e&&this.drawBackward(i,this.groups_back[e-1]),e!==this.groups_back.length-1&&this.drawBackward(this.groups_back[e+1],i),this.groups_forward[e].left=t.transform.target.left,this.groups_forward[e].setCoords(),e!==this.groups_forward.length-1&&this.drawForward(this.groups_forward[e],this.groups_back[e+1]),0!==e&&this.drawForward(this.groups_forward[e-1],this.groups_back[e]),this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth,current_group:d})}),d.on("mouseup",t=>{this.$emit("updateCrossParams",{rate:this.singleWaveWidth,current_group:d,direction:this.getGroupDirection(t.transform.target)})})});for(let a=0;a<this.groups_forward.length-1;a++)this.drawForward(this.groups_forward[a],this.groups_forward[a+1]);for(let a=this.groups_back.length-1;a>0;a--)this.drawBackward(this.groups_back[a],this.groups_back[a-1]);this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth})},drawForward(t,i){const e=i.crossDistance/1e3/t.forwardSpeed*3600;let a=t.aCoords.bl.y,s=i.aCoords.bl.y;t.forEachObject((n,h)=>{let r,o,l,c;const d=e*this.singleWaveWidth,g="polygon"+h;i.forEachObject((a,s)=>{const h=n.aCoords.tl.x+t.left+t.width/2,g=a.aCoords.tl.x+i.left+i.width/2;h+d>g&&h+d<g+a.width&&h+n.width+d>g+a.width?(r=h,o=h+e*this.singleWaveWidth,l=g+a.width,c=r+l-o):h+d>g&&h+d<g+a.width&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=h,o=h+d,l=h+n.width+d,c=h+n.width):h+d<g&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=g-e*this.singleWaveWidth,o=g,l=o+h+n.width-r,c=h+n.width):g-d>h&&g-d<h+n.width&&g+a.width-d>h&&g+a.width-d<h+n.width?(r=g-d,o=g,l=g+a.width,c=l-d):g-d>h&&g-d<h+n.width&&g+a.width-d>h+n.width?(r=g-d,o=g,c=h+n.width,l=c+d):g-d<h&&g+a.width-d>h&&g+a.width-d<h+n.width&&(r=h,o=r-d,l=g+a.width,c=l-d)}),n[g]&&(this.canvas.remove(n[g]),n[g]=null),r!==l&&o!==c&&(n[g]=this.drawPolygon([{x:r,y:a},{x:o,y:s},{x:l,y:s},{x:c,y:a}],this.forwardColor),this.canvas.add(n[g]))})},drawBackward(t,i){const e=t.crossDistance/1e3/t.reverseSpeed*3600;let a=t.aCoords.bl.y,s=i.aCoords.bl.y;t.forEachObject((n,h)=>{let r,o,l,c;const d=e*this.singleWaveWidth,g="polygon_back"+h;i.forEachObject((a,s)=>{const h=n.aCoords.tl.x+t.left+t.width/2,g=a.aCoords.tl.x+i.left+i.width/2;h+d>g&&h+d<g+a.width&&h+n.width+d>g+a.width?(r=h,c=h+e*this.singleWaveWidth,l=g+a.width,o=l-c+r):h+d>g&&h+d<g+a.width&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=h,c=h+d,l=h+n.width+d,o=h+n.width):h+d<g&&h+n.width+d>g&&h+n.width+d<g+a.width?(o=h+n.width,l=o+e*this.singleWaveWidth,c=g,r=o-(l-c)):g-d>h&&g-d<h+n.width&&g+a.width-d>h&&g+a.width-d<h+n.width?(r=g-d,c=g,l=g+a.width,o=l-d):g-d>h&&g-d<h+n.width&&g+a.width-d>h+n.width?(r=g-d,c=g,o=h+n.width,l=c+d):g-d<h&&g+a.width-d>h&&g+a.width-d<h+n.width&&(r=h,l=g+a.width,o=l-d,c=r+d)}),n[g]&&(this.canvas.remove(n[g]),n[g]=null),r!==l&&o!==c&&(n[g]=this.drawPolygon([{x:r,y:a},{x:o,y:a},{x:l,y:s},{x:c,y:s}],this.backwardColor),this.canvas.add(n[g]))})},drawPolygon(t=[],i=this.forwardColor){const e=new r["fabric"].Polygon(t,{fill:i,opacity:.5,selectable:!1,evented:!1,objectCaching:!1});return e}}},U=R,G=(e("d069"),Object(N["a"])(U,L,H,!1,null,"643da0e1",null)),Y=G.exports;const z=[E,Y],O=function(t){z.forEach(i=>{t.component(i.name,i)})};"undefined"!==typeof window&&window.Vue&&O(window.Vue);i["a"]={install:O,TrafficLane:E,GreenWave:Y}},b943:function(t,i){t.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(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAa1JREFUWEftlitPHVEUhb+VwC8gaRBVOBCtKKINCBTXUdGaPqjoQ1HfFAMYCB5UaUUfYFoBjqsqSqgoAgS4KkTThF8AySInOZcMkzuP28zcmtlmksk+63yzzt5nj/jHsP0cmABuA3eAA+AQ2JP0oaysyiYm82xvAzM5a3ck3S+j3TOAbZcRDjmSCvULE1JfvggslAUAliSFNZlRGsD2E+BzSuk7MC9p3/Y9YBmYSuU8lfQli6AXgI/AbELovaSXaWHbG8CLxPtPkp5VARAq/FZCaFLSXheA0Bk/Eu+PJIVO6Rq9OHCt+PIKLF2oebkNQONA40DjQONArgO294G7BeP3p6QwCa+isqvY9ts4YvMYwjheqQtgFDgucGBM0kktAEHU9i4wnQHRltTqMpJLT87CLrA9B6xlALyWtF43wA3gFBhMbXQO3JT0t1aAeAxfgQepjb5JetjNmcq6oCNu+xGwmdrssaStfgEMAH+AobjhGTAs6aIvAPEY3gGdv+ANSa+y2rPyI4gAoRVDS4ZoSWr3FSBC/A5PSSN5l1MtDkSA1Qjw5n8BjEeAX1UBXAINZgkw80nxDQAAAABJRU5ErkJggg=="},d069:function(t,i,e){"use strict";e("4429")},e418:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEDSURBVFhH7dQxagJBGMXxIZ7AG9jY2XkBG2srwRPY2KURA4GAnW3AxtY6hSAWQsDCVi9gkZA7BFKt/1leEYgsM7NfrObX7JudnZ236K6z8ALFaA861jaEYhSzAlMoRjEr0MUYGgYzK+DNoXgf/qmPKH55gqb/1wza848mdJm9Dt6hvW5aQZfbeoT2qDSClthoYwfdv9IJWmanB93/pgsUiz60LEjt13CJNXzeYo9yIlByAf/UA0ygU+4ZisGSCrzCvw0b6JTz//wzNAyWVOANP9CwlPoVNPsUf0ExikmBBRSjmRT4hmI0s58gVS6QC+QCuUAukAs0dKzUwicO8iGarsG5K5lGFC/j6SCaAAAAAElFTkSuQmCC"},e63c:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEASURBVFhH7dUhjsJAFMbxAoIVBMcVuAIJCk8wBMdB0CsxQLIO1F5jFZoLIDAo4AgYwv5f84mSlG1mOpQs9Gf6hnbyvZmUaeSjhR40zKWqq5MJVBavjSuetgNPXX0Htnozhn4uzg+UH/tGE7r9WH0o98YRI+ixx9lBmamWqEOPh7eCsu7aYwBNCcsOH+Vk+oKmhTWDMjJpSlgfOMMC7CDaIE5LoSmZnA4iC59Cw6iLOTQszgHJo3iIE7T4mG5lqunq5AILtLfexls0kGzqEyr/5PU1XEBlbl4NhOTdwBoqc/m/OxBKsAZc/npJwRqoQKWTcgde5yX0VTZQNvDuDUTRL5qDP5+BXe6aAAAAAElFTkSuQmCC"}}]);
+(("undefined"!==typeof self?self:this)["webpackJsonptraffic_diagram"]=("undefined"!==typeof self?self:this)["webpackJsonptraffic_diagram"]||[]).push([[1],{2621:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAT9JREFUWEftlUEuBEEUhr//EOIKQoTEBisOwFKQWIvMAnEOEzYjVhIL9hzArNgSpxCH+KWle8x09HRVYWyqFr3ofu/9X//1XpX4wbJ9UqRLOk0to9RE2zvATZm/K+k2pVYSgO0V4LEmuCrpKRYiGsD2NPAKTNXE3oF5SW8xECkAz8BCg8iLpMU/A7B9B2y0CNxL2gyFCHbA9hlwGFj4XNJRSGwwQL2YbQ+960taDxGsx2SA7MC3Dti+lLQ/rqlim9D2A7AlqTiwBmsEwPYscA0sSRq7PYkAcyVEvyIYiNjeK8Wrb4OgBifWhscwcASrnI6k3udNWjwiD5lArdawnqROBdAFjltTfjfgC6B0YRtIutMTuEa3oCpgewa4ApYn3oTDf2H7QtLBxMcwxsrYMWyqnY/i7EB2IDuQHfh3Bz4Azh/GIdToBDMAAAAASUVORK5CYII="},4429:function(t,i,e){},"64e8":function(t,i){t.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=="},6521:function(t,i,e){},"6ddb":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlr0uBVEUhb/1Alq9SiRKnQgJiUSD5N5KwhOoJQo0PIAXoNC4hFBQKK7o6ahVGp3ekpPMyPxdc2cUEjmnO7P3XvvLyt4nI/746I/7EwGiA//TAduzxe2S1K/auEoHbE8DD5mCE0lrTVbW9i6wk6npSDorgRU/2B4FAu14EjuUtNmkeZprOwAEkHDegRlJL1mtkgO2L4DlJGmvYWND7m0J93BSiCtgRdJnqpsDsH0AbDVs2jR9X9J2CcD2OnDUVK1l/oak41D77YDtEeAcmG8pOmzZLdCV9JEDCBfbY8AlMJmo9YDnAcrZCQ9Dez8gbwLoJLFHYFXSa+UMJBBTwDUQtiGcnqRuUdx2OmAh1Jc0V5Fzmmn+BixJevpxCxKIReAmk1iCqAOwnW0epBYk3RUhWz/FdQDDDkQEiA5EB37jQO6nY9APR906tgaoEx42HgGiA9GBL9fygiG6SEn5AAAAAElFTkSuQmCC"},"8aaa":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPlJREFUWEftkDEuhEEARt+7gEKjcgFxAQoKCm5BQqOh4BQUNBqbcAsKCgouIC6g0ihc4JNNVrPZ3Zn/F43MlDPzfd/Lk1+cJAfDuHrZt8a+wSRrwOMov64+9enqBZBkHngDFkajH8CS+tkVoi/APbAxNvagbv45QJJz4HDK0IV61AWik4Eke8BVYWBfHdRCVAMkWQGeK4tX1Zeav1UASeaAV2CxphR4B5bVr9L/WoBbYKtUNvZ+p26XMkWAJKfAcaloyvuZejIrOxMgyQ5w3XP8J7ar3kzrKBqYFEySSfdq577OgeFwA2gGmoFmoBloBpqBZqAZ+FcGvgHC1IwhOqX0yQAAAABJRU5ErkJggg=="},"99fc":function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVtJREFUWEftlTEvBVEQhb9T8wPUOlHIS/RoRScRjYRoRaFQUFBIFAqVRoFoaYmORiIRyYvCL5DQC+3IJPsS1u67k312q532zsz59szcvSIYZrYOfEg6DZaE0hTJMrNZ4CrLHZf0EqmL5CQBzGwUeAaGsoZdSZ1I80hOBKALTOSaHUlaiwikcvoCmNklMF/SZFXSSUogdV4KYGZ7wHaiQUeSO1Q5CgHMbAk4D3R9kjQZyCtNiezALTCd63AnaWYQ4V5tC/DvDpjZLnAg6TMyojoAdoBlYEHSYwqiMgAwB4wBwzmRKcBd8FiRdNYPoipA6sN+nvs4NssKmgBw7etsJH/2oikAh9iQdJh3ogmAV2BR0n3RGAYFOAbeChr7TfC48Bsh6auOHfBr5gK/IvsPOMCWpP3UtlZ1oPQtyAAeJN2kxP28DoARSe8R8VoAosLta9g60DrQOtA60HPgG3HYvyHuUz0OAAAAAElFTkSuQmCC"},b209:function(t,i,e){"use strict";e("6521")},b635:function(t,i,e){"use strict";var a=function(){var t=this,i=t._self._c;return i("div",{attrs:{id:"canvasWrapper"}},[i("canvas",{ref:"road",staticClass:"crossing-box"}),i("transition",{attrs:{"enter-active-class":"animate__animated animate__bounceInLeft"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showLegend,expression:"showLegend"}],ref:"legendBox",staticClass:"legend-box"},t._l(this.laneDirections,(function(e,a){return i("div",{key:a,staticClass:"legend-item",style:{background:e.laneDirName===t.currentLaneDirName?t.laneActiveColor:"rgba(31, 200, 255, 10%)"},on:{click:function(i){return t.chooseImg(e)}}},[i("img",{attrs:{src:e.img,alt:""}}),i("div",{staticStyle:{color:"#fff"}},[t._v(t._s(e.laneDirName))])])})),0)])],1)},s=[],n=e("2ef0"),h=e.n(n),r=e("7a94"),o=e("e63c"),l=e.n(o),c=e("8aaa"),d=e.n(c),g=e("e418"),A=e.n(g),f=e("b943"),v=e.n(f),u=e("6ddb"),m=e.n(u),p=e("99fc"),w=e.n(p),W=e("2621"),b=e.n(W),D=e("cdd5"),x=e.n(D),C=e("64e8"),y=e.n(C),k={name:"TrafficLane",props:{laneDiagramData:{type:Array,default:()=>[]},canvasHeight:{type:Number,default:300},configType:{type:String,default:""},laneWidth:{type:Number,default:22},laneDividerLength:{type:Number,default:80},laneDirections:{type:Array,default:()=>[{img:l.a,laneDirName:"左转"},{img:d.a,laneDirName:"直行"},{img:A.a,laneDirName:"右转"},{img:v.a,laneDirName:"直左"},{img:m.a,laneDirName:"左右"},{img:w.a,laneDirName:"直右"},{img:b.a,laneDirName:"直左右"},{img:x.a,laneDirName:"掉头"},{img:y.a,laneDirName:"其他"}]},maxCongestionValue:{type:Number,default:1},clickEvent:{type:Boolean,default:!1},congestionFactorVisible:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},selectedLane:{type:String,default:""},laneActiveColor:{type:String,default:"#27ffd5"}},data(){return{data:[],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:!1,canvasWidth:300,chooseGroup:[],resizeHandler:null}},components:{},computed:{},created(){this.resizeHandler=h.a.debounce(()=>{this.canvas&&(this.canvas.dispose(),this.canvas=null,this.$nextTick(()=>{this.init()}))},200),window.addEventListener("resize",this.resizeHandler)},mounted(){this.init()},beforeDestroy(){window.removeEventListener("resize",this.resizeHandler),this.resizeHandler.cancel(),this.canvas&&(this.canvas.dispose(),this.canvas=null)},watch:{laneDiagramData:{handler(t){this.canvas&&(this.canvas.dispose(),this.canvas=null),this.$nextTick(()=>{this.init()})},deep:!0}},methods:{init(){const t=document.getElementById("canvasWrapper");this.canvasWidth=t.offsetWidth,this.canvas=new r["fabric"].Canvas(this.$refs.road,{backgroundColor:"rgba(17,94,7,0.4)",selection:!1,width:this.canvasWidth,height:this.canvasHeight});const i=this.laneDiagramData.filter(t=>"北"===t.inDirection).length,e=this.laneDiagramData.filter(t=>"西"===t.inDirection).length,a=this.laneDiagramData.filter(t=>"南"===t.inDirection).length,s=this.laneDiagramData.filter(t=>"东"===t.inDirection).length,n={x:this.canvasWidth/2-this.laneWidth*i,y:this.canvasHeight/2-this.laneWidth*(s||e)},h={x:0,y:this.canvasHeight/2-this.laneWidth*(s||e)},o={x:0,y:this.canvasHeight/2+this.laneWidth*e},l={x:this.canvasWidth/2-this.laneWidth*(i||a),y:this.canvasHeight/2+this.laneWidth*e},c={x:this.canvasWidth/2-this.laneWidth*(i||a),y:this.canvasHeight},d={x:this.canvasWidth/2+this.laneWidth*a,y:this.canvasHeight},g={x:this.canvasWidth/2+this.laneWidth*a,y:this.canvasHeight/2+this.laneWidth*(e||s)},A={x:this.canvasWidth,y:this.canvasHeight/2+this.laneWidth*(e||s)},f={x:this.canvasWidth,y:this.canvasHeight/2-this.laneWidth*s},v={x:this.canvasWidth/2+this.laneWidth*(a||i),y:this.canvasHeight/2-this.laneWidth*s},u={x:this.canvasWidth/2+this.laneWidth*(a||i),y:0},m={x:this.canvasWidth/2-this.laneWidth*i,y:0};var p=new r["fabric"].Polygon([n,0!==e?h:{},0!==e?o:{},l,0!==a?c:{},0!==a?d:{},g,0!==s?A:{},0!==s?f:{},v,0!==i?u:{},0!==i?m:n],{fill:"#989898",stroke:"#fff",strokeWidth:2,selectable:!1});this.canvas.add(p),p.on("mousedown",()=>{this.showLegend=!1});const w={x1:this.canvasWidth/2,y1:0,x2:this.canvasWidth/2,y2:this.canvasHeight/2-this.laneWidth*(s||e)},W={x1:0,y1:this.canvasHeight/2,x2:this.canvasWidth/2-this.laneWidth*(i||a),y2:this.canvasHeight/2},b={x1:this.canvasWidth/2,y1:this.canvasHeight,x2:this.canvasWidth/2,y2:this.canvasHeight/2+this.laneWidth*(e||s)},D={x1:this.canvasWidth,y1:this.canvasHeight/2,x2:this.canvasWidth/2+this.laneWidth*(a||i),y2:this.canvasHeight/2},x=[i?w:{},e?W:{},a?b:{},s?D:{}];x.forEach(t=>{const i=new r["fabric"].Line([t.x1,t.y1,t.x2,t.y2],{stroke:"#e6c130",strokeWidth:2});this.canvas.add(i)});const C=this.laneDividerLength;if(i>0){const t=this.laneDiagramData.filter(t=>"北"===t.inDirection);for(let i=0;i<t.length;i++){const a={x1:this.canvasWidth/2-this.laneWidth*(i+1),y1:this.canvasHeight/2-this.laneWidth*(s||e),x2:this.canvasWidth/2-this.laneWidth*(i+1),y2:this.canvasHeight/2-this.laneWidth*(s||e)-C},n=t[i],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o?r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([a.x1,a.y1,a.x2,a.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.laneWidth,height:this.canvasHeight/2-this.laneWidth*(s||e),fill:this.calcBgColor(h),left:this.canvasWidth/2-this.laneWidth*(i+1),top:0});this.currentGroup&&this.currentGroup.name==="N_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2-this.laneWidth*(i+1),top:(this.canvasHeight-this.laneWidth*(s||e)-this.laneWidth*e)/2-22,textAlign:"center",width:this.laneWidth,fill:"#fff",angle:180,originX:"right",originY:"bottom"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth/2-this.laneWidth*(i+1-.25),top:5,textAlign:"left",width:this.laneWidth,fill:"#fff",angle:90,originX:"left",originY:"bottom"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"N_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2-this.laneWidth*(i+1),top:(this.canvasHeight-this.laneWidth*(s||e)-this.laneWidth*e)/2-50,angle:180,originX:"right",originY:"bottom"}):console.error(`${n.inDirection}向 - ${n.laneDirName}车道，图标缺少！`)}}if(e>0){const t=this.laneDiagramData.filter(t=>"西"===t.inDirection);for(let e=0;e<t.length;e++){const s={x1:this.canvasWidth/2-this.laneWidth*(i||a),y1:this.canvasHeight/2+this.laneWidth*(e+1),x2:this.canvasWidth/2-this.laneWidth*(i||a)-C,y2:this.canvasHeight/2+this.laneWidth*(e+1)},n=t[e],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o?r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([s.x1,s.y1,s.x2,s.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.canvasWidth/2-this.laneWidth*(i||a),height:this.laneWidth,fill:this.calcBgColor(h),left:0,top:this.canvasHeight/2+this.laneWidth*e});this.currentGroup&&this.currentGroup.name==="W_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2-this.laneWidth*(i||a),top:this.canvasHeight/2+this.laneWidth*e,textAlign:"center",width:this.laneWidth,fill:"#fff",angle:90,originX:"left",originY:"top"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:5,top:this.canvasHeight/2+this.laneWidth*(e+.25),textAlign:"left",width:this.laneWidth,fill:"#fff",originX:"left",originY:"top"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"W_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2-this.laneWidth*(i||a)-30,top:this.canvasHeight/2+this.laneWidth*e,angle:90,originX:"left",originY:"top"}):console.error(`${n.inDirection}向 - ${n.laneDirName}车道，图标缺少！`)}}if(a>0){const t=this.laneDiagramData.filter(t=>"南"===t.inDirection);for(let i=0;i<t.length;i++){const a={x1:this.canvasWidth/2+this.laneWidth*(i+1),y1:this.canvasHeight/2+this.laneWidth*(e||s),x2:this.canvasWidth/2+this.laneWidth*(i+1),y2:this.canvasHeight/2+this.laneWidth*(e||s)+C},n=t[i],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o&&r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([a.x1,a.y1,a.x2,a.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.laneWidth,height:this.canvasHeight/2,fill:this.calcBgColor(h),left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s)});this.currentGroup&&this.currentGroup.name==="S_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s),textAlign:"center",width:this.laneWidth,fill:"#fff"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth/2+this.laneWidth*(i+.25),top:this.canvasHeight-5,textAlign:"left",width:this.laneWidth,fill:"#fff",angle:-90}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"S_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2+this.laneWidth*i,top:this.canvasHeight/2+this.laneWidth*(e||s)+30})}}if(s>0){const t=this.laneDiagramData.filter(t=>"东"===t.inDirection);for(let e=0;e<t.length;e++){const s={x1:this.canvasWidth/2+this.laneWidth*(a||i),y1:this.canvasHeight/2-this.laneWidth*(e+1),x2:this.canvasWidth/2+this.laneWidth*(a||i)+C,y2:this.canvasHeight/2-this.laneWidth*(e+1)},n=t[e],h=Math.round(10*n.congestionFactor)/10,o=this.laneDirections.find(t=>t.laneDirName===n.laneDirName);o&&r["fabric"].Image.fromURL(o.img,t=>{t.scaleToWidth(this.laneWidth);const o=new r["fabric"].Line([s.x1,s.y1,s.x2,s.y2],{stroke:"#fff",strokeWidth:1});var l=new r["fabric"].Rect({width:this.canvasWidth/2,height:this.laneWidth,fill:this.calcBgColor(h),left:this.canvasWidth/2+this.laneWidth*(a||i),top:this.canvasHeight/2-this.laneWidth*(e+1)});this.currentGroup&&this.currentGroup.name==="E_L"+n.laneNo&&l.set("fill",this.laneActiveColor);var c=new r["fabric"].Textbox(""+Number(n.laneNo),{fontSize:18,left:this.canvasWidth/2+this.laneWidth*(a||i),top:this.canvasHeight/2-this.laneWidth*(e+1),textAlign:"center",width:this.laneWidth,fill:"#fff",angle:-90,originX:"right",originY:"top"});let d=new r["fabric"].Textbox(""+(h||"0"),{fontSize:12,left:this.canvasWidth-5,top:this.canvasHeight/2-this.laneWidth*(e+1-.25),textAlign:"center",width:this.laneWidth,fill:"#fff",originX:"right",originY:"top"}),g=[];g=this.congestionFactorVisible?[l,c,d,t,o]:[l,c,t,o];var A=new r["fabric"].Group(g,{name:"E_L"+n.laneNo,objectCaching:!1,selectable:!1});this.canvas.add(A),this.clickEvent&&(A.on("mousedown",t=>{"LaneConfig"===this.configType&&(this.showLegend=!0),this.mousedownFun(t)}),A.on("mousemove",t=>{this.canvas.setCursor("pointer")}))},{name:o.laneDirName,left:this.canvasWidth/2+this.laneWidth*(a||i)+30,top:this.canvasHeight/2-this.laneWidth*(e+1),angle:-90,originX:"right",originY:"top"})}}const y={x1:this.canvasWidth/2-this.laneWidth*i,y1:this.canvasHeight/2-this.laneWidth*(s||e),x2:this.canvasWidth/2,y2:this.canvasHeight/2-this.laneWidth*(s||e)},k={x1:this.canvasWidth/2-this.laneWidth*(i||a),y1:this.canvasHeight/2,x2:this.canvasWidth/2-this.laneWidth*(i||a),y2:this.canvasHeight/2+this.laneWidth*e},B={x1:this.canvasWidth/2,y1:this.canvasHeight/2+this.laneWidth*(e||s),x2:this.canvasWidth/2+this.laneWidth*a,y2:this.canvasHeight/2+this.laneWidth*(e||s)},N={x1:this.canvasWidth/2+this.laneWidth*(a||i),y1:this.canvasHeight/2-this.laneWidth*s,x2:this.canvasWidth/2+this.laneWidth*(a||i),y2:this.canvasHeight/2};let S=[];S.push(k),S.push(y),S.push(B),S.push(N),S.forEach(t=>{this.addFabricLine(t,"#fff",1)})},changeLane(t){t&&this.canvas&&(t.forEach(t=>{const i=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t);if(i){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill",this.laneActiveColor)}}),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&!t.includes(i.name)){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.canvas.renderAll())},changeLaneDir({laneDirCode:t,laneDirName:i}){if(this.canvas){const s=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t);var e=s.getObjects().find(t=>"rect"===t.type),a=s.getObjects().find(t=>"image"===t.type);const n=this.laneDirections.find(t=>t.laneDirName===i),h=n.img;a.setSrc(h,()=>{e.set("fill",this.laneActiveColor),this.canvas.renderAll()}),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&i.name!==t){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.canvas.renderAll()}},addFabricLine(t,i,e=1){const a=new r["fabric"].Line([t.x1,t.y1,t.x2,t.y2],{stroke:i,strokeWidth:e});this.canvas.add(a)},mousedownFun(t){const i=this.canvas.getObjects().find(i=>"group"===i.type&&i.name===t.target.name);var e=i.getObjects().find(t=>"rect"===t.type);if(this.multiple){if(e.choosen){e.set("fill","transparent"),e.set("choosen",!1);let t=this.chooseGroup.findIndex(t=>t===i.name);this.chooseGroup.splice(t,1)}else e.set("choosen",!0),e.set("fill",this.laneActiveColor),this.chooseGroup.push(i.name);this.$emit("chooseLane",this.chooseGroup)}else e.set("fill",this.laneActiveColor),this.currentGroup=i,this.currentGroupBK=h.a.cloneDeep(i),this.canvas.getObjects().forEach(i=>{if("group"===i.type&&i.name!==t.target.name){var e=i.getObjects().find(t=>"rect"===t.type);e.set("fill","transparent")}}),this.$nextTick(()=>{const i=this.$refs.legendBox;i.style.top=t.target.top+"px",i.style.left=t.target.left+80+"px",this.currentLaneDirName=t.target.getObjects().filter(t=>"image"===t.type)[0].name,this.$emit("selectLane",{laneDirCode:this.currentGroup.name})});this.canvas.renderAll()},chooseImg(t){this.currentLaneDirName=t.laneDirName;var i=this.currentGroup.getObjects().find(t=>"image"===t.type);const e=t.img;i.setSrc(e,()=>{this.currentGroup=h.a.cloneDeep(this.currentGroupBK)}),this.$emit("changeLaneDir",{laneDirCode:this.currentGroup.name,laneDirName:t.laneDirName})},calcBgColor(t){if(t||0==t){const i=[{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 e="",a="";const s=t/this.maxCongestionValue;s>=0&&s<=.1?(e=i[0],a=i[1]):s>.1&&s<=.2?(e=i[1],a=i[2]):s>.2&&s<=.3?(e=i[2],a=i[3]):s>.3&&s<=.4?(e=i[3],a=i[4]):s>.4&&s<=.5?(e=i[4],a=i[5]):s>.5&&s<=.6?(e=i[5],a=i[6]):s>.6&&s<=.7?(e=i[6],a=i[7]):s>.7&&s<=.8?(e=i[7],a=i[8]):s>.8&&s<=.9?(e=i[8],a=i[9]):s>.9&&s<=1?(e=i[9],a=i[10]):s>1&&(e=i[10],a=i[10]);const n=Math.floor(e.r+(a.r-e.r)*s),h=Math.floor(e.g+(a.g-e.g)*s),r=Math.floor(e.b+(a.b-e.b)*s);return`rgb(${n}, ${h}, ${r})`}return"transparent"}}},B=k,N=(e("b209"),e("2877")),S=Object(N["a"])(B,a,s,!1,null,"638b02e2",null),E=S.exports,L=function(){var t=this,i=t._self._c;return i("div",{staticClass:"canvas-wrapper"},[i("canvas",{ref:"canvas_l",style:{width:t.yAxisWidth+"px"}}),i("canvas",{ref:"canvas",staticStyle:{flex:"1"}})])},H=[],R={name:"GreenWave",props:{crossData:{type:Array,default:()=>[]},canvasHeight:{type:Number,default:500},forwardDirection:{type:Boolean,default:!0},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},xAxisBottom:{type:Number,default:30},yAxisTop:{type:Number,default:30},yAxisWidth:{type:Number,default:200},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(t){this.drawRoad()},deep:!0}},mounted(){this.init()},created(){this.resizeHandler=h.a.debounce(()=>{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(),this.canvas&&(this.canvas.dispose(),this.canvas_l.dispose())},methods:{init(){const t=this.$el.offsetWidth-this.yAxisWidth;this.canvas&&this.canvas.dispose(),this.canvas=new r["fabric"].Canvas(this.$refs.canvas,{backgroundColor:"#fff",selection:!1,width:t,height:this.canvasHeight}),this.canvas_l&&this.canvas_l.dispose(),this.canvas_l=new r["fabric"].Canvas(this.$refs.canvas_l,{backgroundColor:"#fff",selection:!1,width:this.yAxisWidth,height:this.canvasHeight}),this.drawRoad()},drawBaseElement(){this.canvas.add(new r["fabric"].Line([0,this.canvas.height-this.xAxisBottom,this.canvas.width,this.canvas.height-this.xAxisBottom],{stroke:"#333",strokeWidth:1})),this.canvas.add(new r["fabric"].Line([0,this.canvas.height-this.xAxisBottom,0,this.yAxisTop],{stroke:"#333",strokeWidth:1}));const t=this.canvas.width;this.calculateLoopTime=this.loopTime||Math.ceil(t/this.interval/this.singleWaveWidth);for(let i=1;i<this.calculateLoopTime;i++)this.canvas.add(new r["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 r["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:t,left:i}){const e=this.initialPositions[t];let a="none";return e&&(a=i>e?"forward":"backward"),a},drawRoad(){this.groups_forward=[],this.groups_back=[],this.drawBaseElement(),this.canvas_l.add(new r["fabric"].Line([this.yAxisWidth/2,this.canvas.height-this.xAxisBottom,this.yAxisWidth/2,this.yAxisTop],{stroke:"lightgrey",strokeWidth:1,strokeDashArray:[5,2]}));const t=this.crossData.reduce((t,i)=>t+i.crossDistance,0);let i=0;const e=this.canvas.height-this.yAxisTop-this.xAxisBottom;this.crossData.forEach((a,s)=>{i+=a.crossDistance;let n=0;if(n=this.forwardDirection?(t-i)/t*e+this.yAxisTop:i/t*e+this.yAxisTop,this.canvas_l.add(new r["fabric"].Textbox(`【${a.crossRoadName}】`,{fontSize:14,left:0,top:n,textAlign:"center",width:this.yAxisWidth-1,backgroundColor:"#fff",originY:"bottom"})),0!==s){let s=0;s=this.forwardDirection?(t-i+a.crossDistance/2)/t*e+this.yAxisTop:(i-a.crossDistance/2)/t*e+this.yAxisTop;var h=new r["fabric"].Textbox(`${a.crossDistance},${a.forwardSpeed}km/h`,{fontSize:14,left:0,top:s,textAlign:"center",width:this.yAxisWidth-1,backgroundColor:"#fff",originY:"bottom"});this.canvas_l.add(h)}let o=[],l=[];for(let t=-1;t<this.calculateLoopTime;t++){const i=new r["fabric"].Line([(a.forwardPhaseDiff+this.interval*t)*this.singleWaveWidth,n,(a.forwardPhaseDiff+a.forwardGreen+this.interval*t)*this.singleWaveWidth,n],{stroke:this.forwardColor,strokeWidth:this.dragStrokeWidth,originY:"bottom"}),e=new r["fabric"].Line([(a.reversePhaseDiff+this.interval*t)*this.singleWaveWidth,n-this.dragStrokeWidth,(a.reversePhaseDiff+a.reverseGreen+this.interval*t)*this.singleWaveWidth,n-this.dragStrokeWidth],{stroke:this.backwardColor,strokeWidth:this.dragStrokeWidth,originY:"bottom"});o.push(i),l.push(e)}const c=new r["fabric"].Group(o,{...a,roadType:0,hoverCursor:"ew-resize",moveCursor:"ew-resize",lockRotation:!0,lockMovementY:!0,hasControls:!1,hasBorders:!1}),d=new r["fabric"].Group(l,{...a,roadType:1,hoverCursor:"ew-resize",moveCursor:"ew-resize",lockRotation:!0,lockMovementY:!0,hasControls:!1,hasBorders:!1});this.initialPositions[c.crossId]=c.left,this.initialPositions[d.crossId]=d.left,this.groups_forward.push(c),this.groups_back.push(d),this.canvas.add(c,d);c.on("moving",t=>{t.transform.target.left<=-1*this.interval*this.singleWaveWidth?t.transform.target.left=-1*this.interval*this.singleWaveWidth:t.transform.target.left>=0&&(t.transform.target.left=0);const i=t.transform.target,e=this.groups_forward.findIndex(t=>t.crossId===i.crossId);e!==this.groups_forward.length-1&&this.drawForward(i,this.groups_forward[e+1]),0!==e&&this.drawForward(this.groups_forward[e-1],i),this.groups_back[e].left=t.transform.target.left,this.groups_back[e].setCoords(),0!==e&&this.drawBackward(this.groups_back[e],this.groups_back[e-1]),e!==this.groups_back.length-1&&this.drawBackward(this.groups_back[e+1],this.groups_back[e]),this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth,current_group:c})}),c.on("mouseup",t=>{this.$emit("updateCrossParams",{rate:this.singleWaveWidth,current_group:c,direction:this.getGroupDirection(t.transform.target)})}),d.on("moving",t=>{t.transform.target.left<=-1*this.interval*this.singleWaveWidth?t.transform.target.left=-1*this.interval*this.singleWaveWidth:t.transform.target.left>=0&&(t.transform.target.left=0);const i=t.transform.target,e=this.groups_back.findIndex(t=>t.crossId===i.crossId);0!==e&&this.drawBackward(i,this.groups_back[e-1]),e!==this.groups_back.length-1&&this.drawBackward(this.groups_back[e+1],i),this.groups_forward[e].left=t.transform.target.left,this.groups_forward[e].setCoords(),e!==this.groups_forward.length-1&&this.drawForward(this.groups_forward[e],this.groups_back[e+1]),0!==e&&this.drawForward(this.groups_forward[e-1],this.groups_back[e]),this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth,current_group:d})}),d.on("mouseup",t=>{this.$emit("updateCrossParams",{rate:this.singleWaveWidth,current_group:d,direction:this.getGroupDirection(t.transform.target)})})});for(let a=0;a<this.groups_forward.length-1;a++)this.drawForward(this.groups_forward[a],this.groups_forward[a+1]);for(let a=this.groups_back.length-1;a>0;a--)this.drawBackward(this.groups_back[a],this.groups_back[a-1]);this.$emit("computeData",{groups_forward:this.groups_forward,groups_back:this.groups_back,rate:this.singleWaveWidth})},drawForward(t,i){const e=i.crossDistance/1e3/t.forwardSpeed*3600;let a=t.aCoords.bl.y,s=i.aCoords.bl.y;t.forEachObject((n,h)=>{let r,o,l,c;const d=e*this.singleWaveWidth,g="polygon"+h;i.forEachObject((a,s)=>{const h=n.aCoords.tl.x+t.left+t.width/2,g=a.aCoords.tl.x+i.left+i.width/2;h+d>g&&h+d<g+a.width&&h+n.width+d>g+a.width?(r=h,o=h+e*this.singleWaveWidth,l=g+a.width,c=r+l-o):h+d>g&&h+d<g+a.width&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=h,o=h+d,l=h+n.width+d,c=h+n.width):h+d<g&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=g-e*this.singleWaveWidth,o=g,l=o+h+n.width-r,c=h+n.width):g-d>h&&g-d<h+n.width&&g+a.width-d>h&&g+a.width-d<h+n.width?(r=g-d,o=g,l=g+a.width,c=l-d):g-d>h&&g-d<h+n.width&&g+a.width-d>h+n.width?(r=g-d,o=g,c=h+n.width,l=c+d):g-d<h&&g+a.width-d>h&&g+a.width-d<h+n.width&&(r=h,o=r-d,l=g+a.width,c=l-d)}),n[g]&&(this.canvas.remove(n[g]),n[g]=null),r!==l&&o!==c&&(n[g]=this.drawPolygon([{x:r,y:a},{x:o,y:s},{x:l,y:s},{x:c,y:a}],this.forwardColor),this.canvas.add(n[g]))})},drawBackward(t,i){const e=t.crossDistance/1e3/t.reverseSpeed*3600;let a=t.aCoords.bl.y,s=i.aCoords.bl.y;t.forEachObject((n,h)=>{let r,o,l,c;const d=e*this.singleWaveWidth,g="polygon_back"+h;i.forEachObject((a,s)=>{const h=n.aCoords.tl.x+t.left+t.width/2,g=a.aCoords.tl.x+i.left+i.width/2;h+d>g&&h+d<g+a.width&&h+n.width+d>g+a.width?(r=h,c=h+e*this.singleWaveWidth,l=g+a.width,o=l-c+r):h+d>g&&h+d<g+a.width&&h+n.width+d>g&&h+n.width+d<g+a.width?(r=h,c=h+d,l=h+n.width+d,o=h+n.width):h+d<g&&h+n.width+d>g&&h+n.width+d<g+a.width?(o=h+n.width,l=o+e*this.singleWaveWidth,c=g,r=o-(l-c)):g-d>h&&g-d<h+n.width&&g+a.width-d>h&&g+a.width-d<h+n.width?(r=g-d,c=g,l=g+a.width,o=l-d):g-d>h&&g-d<h+n.width&&g+a.width-d>h+n.width?(r=g-d,c=g,o=h+n.width,l=c+d):g-d<h&&g+a.width-d>h&&g+a.width-d<h+n.width&&(r=h,l=g+a.width,o=l-d,c=r+d)}),n[g]&&(this.canvas.remove(n[g]),n[g]=null),r!==l&&o!==c&&(n[g]=this.drawPolygon([{x:r,y:a},{x:o,y:a},{x:l,y:s},{x:c,y:s}],this.backwardColor),this.canvas.add(n[g]))})},drawPolygon(t=[],i=this.forwardColor){const e=new r["fabric"].Polygon(t,{fill:i,opacity:.5,selectable:!1,evented:!1,objectCaching:!1});return e}}},U=R,G=(e("d069"),Object(N["a"])(U,L,H,!1,null,"643da0e1",null)),Y=G.exports;const z=[E,Y],O=function(t){z.forEach(i=>{t.component(i.name,i)})};"undefined"!==typeof window&&window.Vue&&O(window.Vue);i["a"]={install:O}},b943:function(t,i){t.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(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAa1JREFUWEftlitPHVEUhb+VwC8gaRBVOBCtKKINCBTXUdGaPqjoQ1HfFAMYCB5UaUUfYFoBjqsqSqgoAgS4KkTThF8AySInOZcMkzuP28zcmtlmksk+63yzzt5nj/jHsP0cmABuA3eAA+AQ2JP0oaysyiYm82xvAzM5a3ck3S+j3TOAbZcRDjmSCvULE1JfvggslAUAliSFNZlRGsD2E+BzSuk7MC9p3/Y9YBmYSuU8lfQli6AXgI/AbELovaSXaWHbG8CLxPtPkp5VARAq/FZCaFLSXheA0Bk/Eu+PJIVO6Rq9OHCt+PIKLF2oebkNQONA40DjQONArgO294G7BeP3p6QwCa+isqvY9ts4YvMYwjheqQtgFDgucGBM0kktAEHU9i4wnQHRltTqMpJLT87CLrA9B6xlALyWtF43wA3gFBhMbXQO3JT0t1aAeAxfgQepjb5JetjNmcq6oCNu+xGwmdrssaStfgEMAH+AobjhGTAs6aIvAPEY3gGdv+ANSa+y2rPyI4gAoRVDS4ZoSWr3FSBC/A5PSSN5l1MtDkSA1Qjw5n8BjEeAX1UBXAINZgkw80nxDQAAAABJRU5ErkJggg=="},d069:function(t,i,e){"use strict";e("4429")},e418:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEDSURBVFhH7dQxagJBGMXxIZ7AG9jY2XkBG2srwRPY2KURA4GAnW3AxtY6hSAWQsDCVi9gkZA7BFKt/1leEYgsM7NfrObX7JudnZ236K6z8ALFaA861jaEYhSzAlMoRjEr0MUYGgYzK+DNoXgf/qmPKH55gqb/1wza848mdJm9Dt6hvW5aQZfbeoT2qDSClthoYwfdv9IJWmanB93/pgsUiz60LEjt13CJNXzeYo9yIlByAf/UA0ygU+4ZisGSCrzCvw0b6JTz//wzNAyWVOANP9CwlPoVNPsUf0ExikmBBRSjmRT4hmI0s58gVS6QC+QCuUAukAs0dKzUwicO8iGarsG5K5lGFC/j6SCaAAAAAElFTkSuQmCC"},e63c:function(t,i){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEASURBVFhH7dUhjsJAFMbxAoIVBMcVuAIJCk8wBMdB0CsxQLIO1F5jFZoLIDAo4AgYwv5f84mSlG1mOpQs9Gf6hnbyvZmUaeSjhR40zKWqq5MJVBavjSuetgNPXX0Htnozhn4uzg+UH/tGE7r9WH0o98YRI+ixx9lBmamWqEOPh7eCsu7aYwBNCcsOH+Vk+oKmhTWDMjJpSlgfOMMC7CDaIE5LoSmZnA4iC59Cw6iLOTQszgHJo3iIE7T4mG5lqunq5AILtLfexls0kGzqEyr/5PU1XEBlbl4NhOTdwBoqc/m/OxBKsAZc/npJwRqoQKWTcgde5yX0VTZQNvDuDUTRL5qDP5+BXe6aAAAAAElFTkSuQmCC"}}]);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "traffic-diagram",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Vue components for visualizing traffic diagrams.",
-  "main": "lib/traffic-diagram.umd.js",
+  "main": "lib/traffic-diagram.umd.min.js",
   "module": "lib/traffic-diagram.common.js",
   "keywords": ["vue", "lane", "traffic", "greenwave", "intersection"],
   "private": false,

package/src/App.vue

@@ -20,14 +20,14 @@
   </div>
 </template>
 <script>
-import greenWave from './components/green-wave/index.vue';
-import trafficLane from './components/traffic-lane/index.vue';
+// import greenWave from './components/green-wave/index.vue';
+// import trafficLane from './components/traffic-lane/index.vue';
 
 export default {
-  components: {
-    greenWave,
-    trafficLane,
-  },
+  // components: {
+  //   greenWave,
+  //   trafficLane,
+  // },
 
   data() {
     return {

package/src/index.js

@@ -14,7 +14,5 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  install,
-  TrafficLane,
-  GreenWave
+  install
 };

package/src/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
+import install from './index';
+Vue.use(install);
 
 new Vue({
   render: h => h(App),

package/src/components/green-wave/index.js

@@ -1,8 +0,0 @@
-import GreenWave from './index.vue';
-
-/* istanbul ignore next */
-GreenWave.install = function(Vue) {
-  Vue.component(GreenWave.name, GreenWave);
-};
-
-export default GreenWave;

package/src/components/traffic-lane/index.js

@@ -1,8 +0,0 @@
-import TrafficLane from './index.vue';
-
-/* istanbul ignore next */
-TrafficLane.install = function(Vue) {
-  Vue.component(TrafficLane.name, TrafficLane);
-};
-
-export default TrafficLane;