traffic-diagram 1.0.9

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

@@ -0,0 +1,1020 @@
+<template>
+  <div id="canvasWrapper">
+    <canvas class="crossing-box" ref="road"></canvas>
+    <transition enter-active-class="animate__animated animate__bounceInLeft">
+      <div class="legend-box" ref="legendBox" v-show="showLegend">
+        <div
+          class="legend-item"
+          v-for="(item, index) in this.laneDirections"
+          :key="index"
+          :style="{background: item.laneDirName === currentLaneDirName ? laneActiveColor : 'rgba(31, 200, 255, 10%)'}"
+          @click="chooseImg(item)"
+        >
+          <img :src="item.img" alt="" />
+          <div style="color: #fff">{{ item.laneDirName }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { fabric } from 'fabric';
+// 方向对应的图标
+import leftDirIcon from '@/assets/images/traffic-lane/left.png';
+import straightDirIcon from '@/assets/images/traffic-lane/straight.png';
+import rightDirIcon from '@/assets/images/traffic-lane/right.png';
+import straightLeftDirIcon from '@/assets/images/traffic-lane/straightLeft.png';
+import leftRightDirIcon from '@/assets/images/traffic-lane/leftRight.png';
+import straightRightDirIcon from '@/assets/images/traffic-lane/straightRight.png';
+import straightLeftRightDirIcon from '@/assets/images/traffic-lane/straightLeftRight.png';
+import turnAroundDirIcon from '@/assets/images/traffic-lane/turnAround.png';
+import otherDirIcon from '@/assets/images/traffic-lane/otherPic.png';
+export default {
+  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: leftDirIcon, laneDirName: '左转' },
+        { img: straightDirIcon, laneDirName: '直行' },
+        { img: rightDirIcon, laneDirName: '右转' },
+        { img: straightLeftDirIcon, laneDirName: '直左' },
+        { img: leftRightDirIcon, laneDirName: '左右' },
+        { img: straightRightDirIcon, laneDirName: '直右' },
+        { img: straightLeftRightDirIcon, laneDirName: '直左右' },
+        { img: turnAroundDirIcon, laneDirName: '掉头' },
+        { img: otherDirIcon, 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 = _.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.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.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.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.Image.fromURL(
+              laneDirItem.img,
+              img => {
+                img.scaleToWidth(this.laneWidth);
+                // 绘制车道白线
+                const fabricLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+                  stroke: '#fff', // 线条颜色
+                  strokeWidth: 1, // 线条宽度
+                });
+                // 绘制车道矩形
+                var rect = new 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.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.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.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.Image.fromURL(
+              laneDirItem.img,
+              img => {
+                img.scaleToWidth(this.laneWidth);
+                // 绘制车道白线
+                const fabricLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+                  stroke: '#fff', // 线条颜色
+                  strokeWidth: 1, // 线条宽度
+                });
+
+                // 绘制车道矩形
+                var rect = new 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.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.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.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.Image.fromURL(
+              laneDirItem.img,
+              img => {
+                img.scaleToWidth(this.laneWidth);
+                // 绘制车道白线
+                const fabricLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+                  stroke: '#fff', // 线条颜色
+                  strokeWidth: 1, // 线条宽度
+                });
+
+                // 绘制车道矩形
+                var rect = new 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.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.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.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.Image.fromURL(
+              laneDirItem.img,
+              img => {
+                img.scaleToWidth(this.laneWidth);
+                // 绘制车道白线
+                const fabricLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
+                  stroke: '#fff', // 线条颜色
+                  strokeWidth: 1, // 线条宽度
+                });
+                // 绘制车道矩形
+                var rect = new 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.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.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.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.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 = _.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 = _.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';
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.crossing-box {
+  margin: auto;
+  position: relative;
+}
+
+.legend-box {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  width: 180px;
+  background: rgba(13, 43, 80, 90%);
+  padding: 10px;
+  z-index: 999;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: all 0.3s ease;
+
+  .legend-item {
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    margin-bottom: 5px;
+    font-size: 12px;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(39, 255, 213, 70%);
+    }
+
+    img {
+      height: 20px;
+      margin-bottom: 5px;
+    }
+  }
+}
+
+::v-deep .canvas-container {
+  margin: auto;
+}
+</style>