traffic-diagram 1.0.9

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

@@ -0,0 +1,671 @@
+<template>
+  <div class="canvas-wrapper">
+    <canvas ref="canvas_l" :style="{ width: yAxisWidth + 'px' }" />
+    <canvas ref="canvas" style="flex: 1" />
+  </div>
+</template>
+<script>
+import _ from 'lodash';
+import { fabric } from 'fabric';
+export default {
+  name: 'green-wave',
+  props: {
+    /**
+     * 绿波路口数据
+     * - Possible values:
+     * - Array
+     * 字段描述：
+     * - crossId: string - 路口ID
+     * - crossRoadName: string - 路口名称
+     * - crossDistance: number - 路口距离
+     * - orderNumber: number - 排序编号
+     * - forwardGreen: number - 路口正向车道绿灯时长(A路口 -> B路口)
+     * - reverseGreen: number - 路口反向车道绿灯时长(B路口 -> A路口)
+     * - forwardSpeed: number - 路口正向车道速度(A路口 -> B路口)
+     * - reverseSpeed: number - 路口反向车道速度(B路口 -> A路口)
+     * - forwardPhaseDiff: number - 路口正向车道相位差时长(A路口 -> B路口)
+     * - reversePhaseDiff: number - 路口反向车道相位差时长(B路口 -> A路口)
+     * - greenFlag: boolean - 绿波标志
+     * - phaseDiffFlag: boolean - 相位标志
+     */
+    crossData: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 画布高度
+     */
+    canvasHeight: {
+      type: Number,
+      default: 500,
+    },
+    /**
+     * 是否正向(从上到下， 从左到右为正方向)
+     */
+    forwardDirection: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 绿波周期间隔(单位：秒)
+     */
+    interval: {
+      type: Number,
+      default: 70,
+    },
+    /**
+     * 正向绿波颜色
+     */
+    forwardColor: {
+      type: String,
+      default: '#058213',
+    },
+    /**
+     * 反向绿波颜色
+     */
+    backwardColor: {
+      type: String,
+      default: '#0eed28',
+    },
+    /**
+     * 拖拽线宽
+     */
+    dragStrokeWidth: {
+      type: Number,
+      default: 5,
+    },
+    /**
+     * 单绿波宽度
+     * 值越小宽度越小，值越大宽度越大
+     */
+    singleWaveWidth: {
+      type: Number,
+      default: 2,
+    },
+    /**
+     * X轴底部间距
+     */
+    xAxisBottom: {
+      type: Number,
+      default: 30,
+    },
+    /**
+     * Y轴顶部间距
+     */
+    yAxisTop: {
+      type: Number,
+      default: 30,
+    },
+    /**
+     * Y轴文本刻度宽度
+     */
+    yAxisWidth: {
+      type: Number,
+      default: 200,
+    },
+
+    /**
+     * 绿波循环次数
+     * - Possible values:
+     * - Number
+     * - 0 - 默认值，自动计算
+     * - 1 - 循环一次
+     */
+    loopTime: {
+      type: Number,
+      default: 0,
+    }
+  },
+  data() {
+    return {
+      groups_forward: [],
+      groups_back: [],
+      // 初始值，默认按照容器宽度
+      canvasWidth: 500,
+      canvas: null,
+      canvas_l: null,
+      initialPositions: {},
+      calculateLoopTime: 0,
+      resizeHandler: null,
+    };
+  },
+  computed: {
+    mulWatchData() {
+      return {
+        interval: this.interval,
+        crossData: this.crossData,
+        forwardDirection: this.forwardDirection,
+      };
+    }
+  },
+  watch: {
+    mulWatchData: {
+      handler(val) {
+        this.drawRoad();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  created() {
+    this.resizeHandler = _.debounce(() => {
+      if (this.canvas) {
+        this.canvas.dispose();
+        this.canvas_l.dispose();
+        this.canvas = null;
+        this.canvas_l = null;
+        this.init();
+      }
+    }, 200);
+
+    window.addEventListener('resize', this.resizeHandler);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler);
+    this.resizeHandler.cancel();
+
+    if (this.canvas) {
+      this.canvas.dispose();
+      this.canvas_l.dispose();
+    }
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    init() {
+      // Get container width dynamically
+      const containerWidth = this.$el.offsetWidth - this.yAxisWidth;
+
+      // Initialize main canvas
+      if (this.canvas) {
+        this.canvas.dispose();
+      }
+      this.canvas = new fabric.Canvas(this.$refs.canvas, {
+        backgroundColor: '#fff',
+        selection: false,
+        width: containerWidth,
+        height: this.canvasHeight,
+      });
+
+      // Initialize y-axis canvas
+      if (this.canvas_l) {
+        this.canvas_l.dispose();
+      }
+      this.canvas_l = new fabric.Canvas(this.$refs.canvas_l, {
+        backgroundColor: '#fff',
+        selection: false,
+        width: this.yAxisWidth,
+        height: this.canvasHeight,
+      });
+
+      this.drawRoad();
+    },
+    // 绘制路口
+    drawBaseElement() {
+      // 横纵坐标，周期线
+      this.canvas.add(
+        new fabric.Line([0, this.canvas.height - this.xAxisBottom, this.canvas.width, this.canvas.height - this.xAxisBottom], {
+          stroke: '#333',
+          strokeWidth: 1,
+        }),
+      );
+      // 纵轴线
+      this.canvas.add(
+        new fabric.Line([0, this.canvas.height - this.xAxisBottom, 0, this.yAxisTop], {
+          stroke: '#333',
+          strokeWidth: 1,
+        }),
+      );
+      // // 画周期
+      const contentWidth = this.canvas.width;
+
+      this.calculateLoopTime = this.loopTime || Math.ceil(contentWidth / this.interval / this.singleWaveWidth);
+
+      for (let i = 1; i < this.calculateLoopTime; i++) {
+        this.canvas.add(
+          new fabric.Line(
+            [this.interval * this.singleWaveWidth * i, this.canvas.height - this.xAxisBottom, this.interval * this.singleWaveWidth * i, this.yAxisTop],
+            {
+              stroke: 'lightgrey',
+              strokeWidth: 1,
+              strokeDashArray: [5, 2],
+            },
+          ),
+        );
+        this.canvas.add(
+          new fabric.Textbox(`${this.interval * i}s`, {
+            fontSize: 14,
+            left: this.interval * this.singleWaveWidth * i,
+            top: this.canvas.height - this.xAxisBottom + 5,
+            textAlign: 'center',
+            backgroundColor: '#fff',
+            originX: 'center',
+            originY: 'top',
+          }),
+        );
+      }
+    },
+
+    // 获取时距拖拽方向
+    getGroupDirection({ crossId, left }) {
+      const initialPos = this.initialPositions[crossId];
+      let direction = 'none';
+
+      if (initialPos) {
+        direction = left > initialPos ? 'forward' : 'backward';
+      }
+
+      return direction;
+    },
+
+    drawRoad() {
+      // this.canvas_l && this.canvas_l.clear();
+      // this.canvas && this.canvas.clear();
+      this.groups_forward = [];
+      this.groups_back = [];
+      this.drawBaseElement();
+      this.canvas_l.add(
+        new fabric.Line([this.yAxisWidth / 2, this.canvas.height - this.xAxisBottom, this.yAxisWidth / 2, this.yAxisTop], {
+          stroke: 'lightgrey',
+          strokeWidth: 1,
+          strokeDashArray: [5, 2],
+        }),
+      );
+      const totalDistance = this.crossData.reduce((pre, cur) => pre + cur.crossDistance, 0);
+      let yDis = 0;
+      const contentHeight = this.canvas.height - this.yAxisTop - this.xAxisBottom;
+      this.crossData.forEach((item, index) => {
+        yDis += item.crossDistance;
+        let top = 0;
+        if (this.forwardDirection) {
+          top = ((totalDistance - yDis) / totalDistance) * contentHeight + this.yAxisTop;
+        } else {
+          top = (yDis / totalDistance) * contentHeight + this.yAxisTop;
+        }
+        this.canvas_l.add(
+          new fabric.Textbox(`【${item.crossRoadName}】`, {
+            fontSize: 14,
+            left: 0,
+            top: top,
+            textAlign: 'center',
+            width: this.yAxisWidth - 1,
+            backgroundColor: '#fff',
+            originY: 'bottom',
+          }),
+        );
+        if (index !== 0) {
+          let text_top = 0;
+          if (this.forwardDirection) {
+            text_top = ((totalDistance - yDis + item.crossDistance / 2) / totalDistance) * contentHeight + this.yAxisTop;
+          } else {
+            text_top = ((yDis - item.crossDistance / 2) / totalDistance) * contentHeight + this.yAxisTop;
+          }
+          var text2 = new fabric.Textbox(`${item.crossDistance},${item.forwardSpeed}km/h`, {
+            fontSize: 14,
+            left: 0,
+            top: text_top,
+            textAlign: 'center',
+            width: this.yAxisWidth - 1,
+            backgroundColor: '#fff',
+            originY: 'bottom',
+          });
+          this.canvas_l.add(text2);
+        }
+
+        // 绘制绿灯
+        let list = [];
+        let list_back = [];
+        for (let i = -1; i < this.calculateLoopTime; i++) {
+          const cross = new fabric.Line(
+            [
+              (item.forwardPhaseDiff + this.interval * i) * this.singleWaveWidth,
+              top,
+              (item.forwardPhaseDiff + item.forwardGreen + this.interval * i) * this.singleWaveWidth,
+              top,
+            ],
+            {
+              stroke: this.forwardColor,
+              strokeWidth: this.dragStrokeWidth,
+              originY: 'bottom',
+            },
+          );
+          const cross_back = new fabric.Line(
+            [
+              (item.reversePhaseDiff + this.interval * i) * this.singleWaveWidth,
+              top - this.dragStrokeWidth,
+              (item.reversePhaseDiff + item.reverseGreen + this.interval * i) * this.singleWaveWidth,
+              top - this.dragStrokeWidth,
+            ],
+            {
+              stroke: this.backwardColor,
+              strokeWidth: this.dragStrokeWidth,
+              originY: 'bottom',
+            },
+          );
+          list.push(cross);
+          list_back.push(cross_back);
+        }
+        const group = new fabric.Group(list, {
+          ...item,
+          roadType: 0, // 正向
+          hoverCursor: 'ew-resize',
+          moveCursor: 'ew-resize',
+          lockRotation: true,
+          lockMovementY: true,
+          hasControls: false,
+          hasBorders: false,
+        });
+        const group_back = new fabric.Group(list_back, {
+          ...item,
+          roadType: 1, // 反向
+          hoverCursor: 'ew-resize',
+          moveCursor: 'ew-resize',
+          lockRotation: true,
+          lockMovementY: true,
+          hasControls: false,
+          hasBorders: false,
+        });
+
+        // 初始位置
+        this.initialPositions[group.crossId] = group.left;
+        this.initialPositions[group_back.crossId] = group_back.left;
+
+        this.groups_forward.push(group);
+        this.groups_back.push(group_back);
+        this.canvas.add(group, group_back);
+        let startDistance = 0;
+        let endDistance = 0;
+        let crossId = '';
+        group.on('moving', e => {
+          if (e.transform.target.left <= -1 * this.interval * this.singleWaveWidth) {
+            e.transform.target.left = -1 * this.interval * this.singleWaveWidth;
+          } else if (e.transform.target.left >= 0) {
+            e.transform.target.left = 0;
+          }
+          const target = e.transform.target;
+          const index = this.groups_forward.findIndex(ele => ele.crossId === target.crossId);
+          if (index !== this.groups_forward.length - 1) {
+            this.drawForward(target, this.groups_forward[index + 1]);
+          }
+          if (index !== 0) {
+            this.drawForward(this.groups_forward[index - 1], target);
+          }
+
+          // 查找反向绿波组
+          this.groups_back[index].left = e.transform.target.left;
+          this.groups_back[index].setCoords();
+          if (index !== 0) {
+            this.drawBackward(this.groups_back[index], this.groups_back[index - 1]);
+          }
+          if (index !== this.groups_back.length - 1) {
+            this.drawBackward(this.groups_back[index + 1], this.groups_back[index]);
+          }
+          this.$emit('computeData', {
+            groups_forward: this.groups_forward,
+            groups_back: this.groups_back,
+            rate: this.singleWaveWidth,
+            current_group: group,
+          });
+        });
+        group.on('mouseup', e => {
+          this.$emit('updateCrossParams', {
+            rate: this.singleWaveWidth,
+            current_group: group,
+            direction: this.getGroupDirection(e.transform.target),
+          });
+        });
+        group_back.on('moving', e => {
+          if (e.transform.target.left <= -1 * this.interval * this.singleWaveWidth) {
+            e.transform.target.left = -1 * this.interval * this.singleWaveWidth;
+          } else if (e.transform.target.left >= 0) {
+            e.transform.target.left = 0;
+          }
+          const target = e.transform.target;
+          const index = this.groups_back.findIndex(ele => ele.crossId === target.crossId);
+          if (index !== 0) {
+            this.drawBackward(target, this.groups_back[index - 1]);
+          }
+          if (index !== this.groups_back.length - 1) {
+            this.drawBackward(this.groups_back[index + 1], target);
+          }
+          // 查找正向绿波组
+          this.groups_forward[index].left = e.transform.target.left;
+          this.groups_forward[index].setCoords();
+          if (index !== this.groups_forward.length - 1) {
+            this.drawForward(this.groups_forward[index], this.groups_back[index + 1]);
+          }
+          if (index !== 0) {
+            this.drawForward(this.groups_forward[index - 1], this.groups_back[index]);
+          }
+
+          this.$emit('computeData', {
+            groups_forward: this.groups_forward,
+            groups_back: this.groups_back,
+            rate: this.singleWaveWidth,
+            current_group: group_back,
+          });
+        });
+        group_back.on('mouseup', e => {
+          this.$emit('updateCrossParams', {
+            rate: this.singleWaveWidth,
+            current_group: group_back,
+            direction: this.getGroupDirection(e.transform.target),
+          });
+        });
+      });
+
+      // 初始化正向绿波
+      for (let i = 0; i < this.groups_forward.length - 1; i++) {
+        this.drawForward(this.groups_forward[i], this.groups_forward[i + 1]);
+      }
+      // 初始化反向绿波
+      for (let i = this.groups_back.length - 1; i > 0; i--) {
+        this.drawBackward(this.groups_back[i], this.groups_back[i - 1]);
+      }
+      this.$emit('computeData', {
+        groups_forward: this.groups_forward,
+        groups_back: this.groups_back,
+        rate: this.singleWaveWidth,
+      });
+    },
+
+    drawForward(startGroup, endGroup) {
+      // 计算到下个路口所需的时间
+      const time = (endGroup.crossDistance / 1000 / startGroup.forwardSpeed) * 3600;
+      let y1 = startGroup.aCoords.bl.y;
+      let y2 = endGroup.aCoords.bl.y;
+      startGroup.forEachObject((item, index) => {
+        let x1, x2, x3, x4; // 左下开始顺时针
+        const need_t = time * this.singleWaveWidth;
+        const pk = 'polygon' + index;
+        endGroup.forEachObject((ng, gidx) => {
+          const start_x0 = item.aCoords.tl.x + startGroup.left + startGroup.width / 2; // 开始点
+          const end_x0 = ng.aCoords.tl.x + endGroup.left + endGroup.width / 2;
+          if (
+            start_x0 + need_t > end_x0 &&
+            start_x0 + need_t < end_x0 + ng.width &&
+            start_x0 + item.width + need_t > end_x0 + ng.width
+          ) {
+            x1 = start_x0;
+            x2 = start_x0 + time * this.singleWaveWidth;
+            x3 = end_x0 + ng.width;
+            x4 = x1 + x3 - x2;
+          } else if (
+            start_x0 + need_t > end_x0 &&
+            start_x0 + need_t < end_x0 + ng.width &&
+            start_x0 + item.width + need_t > end_x0 &&
+            start_x0 + item.width + need_t < end_x0 + ng.width
+          ) {
+            x1 = start_x0;
+            x2 = start_x0 + need_t;
+            x3 = start_x0 + item.width + need_t;
+            x4 = start_x0 + item.width;
+          } else if (
+            start_x0 + need_t < end_x0 &&
+            start_x0 + item.width + need_t > end_x0 &&
+            start_x0 + item.width + need_t < end_x0 + ng.width
+          ) {
+            x1 = end_x0 - time * this.singleWaveWidth;
+            x2 = end_x0;
+            x3 = x2 + start_x0 + item.width - x1;
+            x4 = start_x0 + item.width;
+          } else if (
+            end_x0 - need_t > start_x0 &&
+            end_x0 - need_t < start_x0 + item.width &&
+            end_x0 + ng.width - need_t > start_x0 &&
+            end_x0 + ng.width - need_t < start_x0 + item.width
+          ) {
+            x1 = end_x0 - need_t;
+            x2 = end_x0;
+            x3 = end_x0 + ng.width;
+            x4 = x3 - need_t;
+          } else if (
+            end_x0 - need_t > start_x0 &&
+            end_x0 - need_t < start_x0 + item.width &&
+            end_x0 + ng.width - need_t > start_x0 + item.width
+          ) {
+            x1 = end_x0 - need_t;
+            x2 = end_x0;
+            x4 = start_x0 + item.width;
+            x3 = x4 + need_t;
+          } else if (
+            end_x0 - need_t < start_x0 &&
+            end_x0 + ng.width - need_t > start_x0 &&
+            end_x0 + ng.width - need_t < start_x0 + item.width
+          ) {
+            x1 = start_x0;
+            x2 = x1 - need_t;
+            x3 = end_x0 + ng.width;
+            x4 = x3 - need_t;
+          }
+        });
+        if (item[pk]) {
+          this.canvas.remove(item[pk]);
+          item[pk] = null;
+        }
+        if (x1 !== x3 && x2 !== x4) {
+          item[pk] = this.drawPolygon(
+            [
+              { x: x1, y: y1 },
+              { x: x2, y: y2 },
+              { x: x3, y: y2 },
+              { x: x4, y: y1 },
+            ],
+            this.forwardColor,
+          );
+          this.canvas.add(item[pk]);
+        }
+      });
+    },
+    // 反向绿波图
+    drawBackward(startGroup, endGroup) {
+      // 计算到下个路口所需的时间
+      const time = (startGroup.crossDistance / 1000 / startGroup.reverseSpeed) * 3600;
+      let y1 = startGroup.aCoords.bl.y;
+      let y2 = endGroup.aCoords.bl.y;
+      startGroup.forEachObject((item, index) => {
+        let x1, x2, x3, x4; // 左上开始顺时针
+        const need_t = time * this.singleWaveWidth;
+        const pk = 'polygon_back' + index;
+        endGroup.forEachObject((ng, gidx) => {
+          const start_x0 = item.aCoords.tl.x + startGroup.left + startGroup.width / 2; // 开始点
+          const end_x0 = ng.aCoords.tl.x + endGroup.left + endGroup.width / 2;
+
+          if (
+            start_x0 + need_t > end_x0 &&
+            start_x0 + need_t < end_x0 + ng.width &&
+            start_x0 + item.width + need_t > end_x0 + ng.width
+          ) {
+            x1 = start_x0;
+            x4 = start_x0 + time * this.singleWaveWidth;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - x4 + x1;
+          } else if (
+            start_x0 + need_t > end_x0 &&
+            start_x0 + need_t < end_x0 + ng.width &&
+            start_x0 + item.width + need_t > end_x0 &&
+            start_x0 + item.width + need_t < end_x0 + ng.width
+          ) {
+            x1 = start_x0;
+            x4 = start_x0 + need_t;
+            x3 = start_x0 + item.width + need_t;
+            x2 = start_x0 + item.width;
+          } else if (
+            start_x0 + need_t < end_x0 &&
+            start_x0 + item.width + need_t > end_x0 &&
+            start_x0 + item.width + need_t < end_x0 + ng.width
+          ) {
+            x2 = start_x0 + item.width;
+            x3 = x2 + time * this.singleWaveWidth;
+            x4 = end_x0;
+            x1 = x2 - (x3 - x4);
+          } else if (
+            end_x0 - need_t > start_x0 &&
+            end_x0 - need_t < start_x0 + item.width &&
+            end_x0 + ng.width - need_t > start_x0 &&
+            end_x0 + ng.width - need_t < start_x0 + item.width
+          ) {
+            x1 = end_x0 - need_t;
+            x4 = end_x0;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - need_t;
+          } else if (
+            end_x0 - need_t > start_x0 &&
+            end_x0 - need_t < start_x0 + item.width &&
+            end_x0 + ng.width - need_t > start_x0 + item.width
+          ) {
+            x1 = end_x0 - need_t;
+            x4 = end_x0;
+            x2 = start_x0 + item.width;
+            x3 = x4 + need_t;
+          } else if (
+            end_x0 - need_t < start_x0 &&
+            end_x0 + ng.width - need_t > start_x0 &&
+            end_x0 + ng.width - need_t < start_x0 + item.width
+          ) {
+            x1 = start_x0;
+            x3 = end_x0 + ng.width;
+            x2 = x3 - need_t;
+            x4 = x1 + need_t;
+          }
+        });
+        if (item[pk]) {
+          this.canvas.remove(item[pk]);
+          item[pk] = null;
+        }
+        if (x1 !== x3 && x2 !== x4) {
+          item[pk] = this.drawPolygon(
+            [
+              { x: x1, y: y1 },
+              { x: x2, y: y1 },
+              { x: x3, y: y2 },
+              { x: x4, y: y2 },
+            ],
+            this.backwardColor,
+          );
+          this.canvas.add(item[pk]);
+        }
+      });
+    },
+    drawPolygon(points = [], color = this.forwardColor) {
+      const polygon = new fabric.Polygon(points, {
+        fill: color,
+        opacity: 0.5,
+        selectable: false,
+        evented: false,
+        objectCaching: false,
+      });
+      // polygon.sendToBack();
+      return polygon;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.canvas-wrapper {
+  display: flex;
+}
+</style>