traffic-diagram 1.0.9

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "traffic-diagram",
+  "version": "1.0.9",
+  "description": "Vue components for visualizing traffic diagrams.",
+  "main": "dist/traffic-diagram.umd.js",
+  "module": "dist/traffic-diagram.common.js",
+  "keywords": ["vue", "lane", "traffic", "greenwave", "intersection"],
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --report",
+    "test": "vue-cli-service build --mode test",
+    "testServe": "vue-cli-service serve --mode test",
+    "eslint": "eslint --fix --ext .js,.vue src",
+    "stylelint": "stylelint src/**/*.{vue,css,scss} --fix --allow-empty-input",
+    "prepare": "",
+    "build:lib": "vue-cli-service build --target lib --name traffic-diagram src/index.js"
+  },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "src/**/*.{vue,js}": [
+            "eslint --fix"
+        ]
+    },
+    "dependencies": {
+        "fabric": "^5.5.2",
+        "lodash": "^4.17.21",
+        "sass-resources-loader": "^2.2.5",
+        "vue": "^2.6.14"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.5.19",
+        "@vue/cli-plugin-eslint": "^4.5.19",
+        "@vue/cli-service": "^4.5.19",
+        "esbuild-loader": "^2.21.0",
+        "sass": "^1.69.5",
+        "sass-loader": "^10.4.1",
+        "stylelint": "^13.13.1",
+        "stylelint-webpack-plugin": "^2.2.2",
+        "vue-template-compiler": "^2.6.14"
+    }
+}

package/src/App.vue

@@ -0,0 +1,269 @@
+<template>
+  <div id="app">
+    <traffic-line
+      v-if="mockLaneData.length"
+      :laneDiagramData="mockLaneData"
+      :canvasHeight="500"
+      :laneWidth="25"
+      :clickEvent="true"
+      :congestionFactorVisible="true"
+      configType="LaneConfig"
+      @changeLaneDir="changeLaneDir">
+    </traffic-line>
+    <green-wave
+      v-if="mockGreenWaveData.crossData.length"
+      :forwardDirection="true"
+      :canvasHeight="650"
+      :interval="mockGreenWaveData.cycle"
+      :crossData="mockGreenWaveData.crossData">
+    </green-wave>
+  </div>
+</template>
+<script>
+import greenWave from './components/green-wave/index.vue';
+import trafficLine from './components/traffic-lane/index.vue';
+
+export default {
+  components: {
+    greenWave,
+    trafficLine,
+  },
+
+  data() {
+    return {
+      mockLaneData: [],
+      mockGreenWaveData: {
+        crossData: [],
+        cycle: 0
+      },
+    };
+  },
+
+  mounted() {
+    this.initData();
+  },
+
+  methods: {
+    initData() {
+      this.initLaneData();
+      this.initGreenWaveData();
+    },
+
+    /**
+     * 初始化车道数据
+     */
+    initLaneData() {
+      this.mockLaneData = [
+        {
+          "id": "52b17035c5560d0021fd4e386642d6bf",
+          "laneDirCode": "E_L01",
+          "laneDirName": "直行",
+          "inDirection": "东",
+          "laneNo": "01",
+          "congestionFactor": 0.5, // 拥堵系数
+        },
+        {
+          "id": "28c2d680f39454b5b7a7a3ffa77a23bd",
+          "laneDirCode": "E_L02",
+          "laneDirName": "直行",
+          "inDirection": "东",
+          "laneNo": "02",
+          "phaseNo": "6",
+        },
+        {
+          "id": "a21ddda40adfe8a055b74c8937261ae3",
+          "laneDirCode": "E_L03",
+          "laneDirName": "右转",
+          "inDirection": "东",
+          "laneNo": "03",
+        },
+        {
+          "id": "c79958b2864ead9f6075a6dd9dbe3094",
+          "laneDirCode": "N_L01",
+          "laneDirName": "左转",
+          "inDirection": "北",
+          "laneNo": "01",
+        },
+        {
+          "id": "fd330e2c5d646de3a8051e2bc047d547",
+          "laneDirCode": "N_L02",
+          "laneDirName": "直行",
+          "inDirection": "北",
+          "laneNo": "02",
+        },
+        {
+          "id": "0d1bdeea13bd295df1776fc5aac5f786",
+          "laneDirCode": "N_L03",
+          "laneDirName": "右转",
+          "inDirection": "北",
+          "laneNo": "03",
+        },
+        {
+          "id": "8e351adcde8a164ca7515772079effed",
+          "laneDirCode": "S_L01",
+          "laneDirName": "左转",
+          "inDirection": "南",
+          "laneNo": "01",
+        },
+        {
+          "id": "50268ea834b4102ea81548bb0586c030",
+          "laneDirCode": "S_L02",
+          "laneDirName": "直行",
+          "inDirection": "南",
+          "laneNo": "02",
+        },
+        {
+          "id": "964db6841a3ad07bacb813c4a5aaa263",
+          "laneDirCode": "S_L03",
+          "laneDirName": "右转",
+          "inDirection": "南",
+          "laneNo": "03",
+        },
+        {
+          "id": "6a9fa57f3df1c12f03e3ccf448a095a9",
+          "laneDirCode": "W_L01",
+          "laneDirName": "左转",
+          "inDirection": "西",
+          "laneNo": "01",
+        },
+        {
+          "id": "b1924d04c9c1af8067716c687d24a941",
+          "laneDirCode": "W_L02",
+          "laneDirName": "直行",
+          "inDirection": "西",
+          "laneNo": "02",
+        },
+        {
+          "id": "059195bca3cc13dcc7adf85edc26a79a",
+          "laneDirCode": "W_L03",
+          "laneDirName": "右转",
+          "inDirection": "西",
+          "laneNo": "03",
+        }
+      ];
+    },
+    /**
+     * 初始化绿波数据
+     */
+    initGreenWaveData() {
+      Object.assign(this.mockGreenWaveData, {
+        crossData: [
+          {
+            "crossId": "306069",
+            "crossRoadName": "国庆路与羌溪路路口",
+            "forwardGreen": 40,
+            "reverseGreen": 40,
+            "forwardPhaseDiff": 700,
+            "reversePhaseDiff": 500,
+            "forwardSpeed": 50,
+            "reverseSpeed": 50,
+            "lightFlag": null,
+            "cycleFlag": null,
+            "createTime": "2025-12-16 16:22:50",
+            "crossDistance": 0,
+            "orderNumber": 1,
+            "greenFlag": true,
+            "phaseDiffFlag": null,
+            "transMap": {}
+          },
+          {
+            "id": "9fe40fac9b1d30e3e132abf4bcbaa57e",
+            "subzoneSchemeInfoId": "1b6823b6d58d2dc10ead6c0e7d914095",
+            "crossId": "656559",
+            "crossRoadName": "国庆路与万桥路路口",
+            "forwardGreen": 40,
+            "reverseGreen": 40,
+            "forwardPhaseDiff": 13,
+            "reversePhaseDiff": 13,
+            "forwardSpeed": 50,
+            "reverseSpeed": 50,
+            "lightFlag": null,
+            "cycleFlag": null,
+            "createTime": "2025-12-16 16:22:50",
+            "crossDistance": 197,
+            "orderNumber": 2,
+            "greenFlag": true,
+            "phaseDiffFlag": true,
+            "transMap": {}
+          },
+          {
+            "id": "96536e49b833ad9be145153be48e3734",
+            "subzoneSchemeInfoId": "1b6823b6d58d2dc10ead6c0e7d914095",
+            "crossId": "996706",
+            "crossRoadName": "国庆路与慧学巷路口",
+            "forwardGreen": 40,
+            "reverseGreen": 40,
+            "forwardPhaseDiff": 40,
+            "reversePhaseDiff": 40,
+            "forwardSpeed": 50,
+            "reverseSpeed": 50,
+            "lightFlag": null,
+            "cycleFlag": null,
+            "createTime": "2025-12-16 16:22:50",
+            "crossDistance": 204,
+            "orderNumber": 3,
+            "greenFlag": true,
+            "phaseDiffFlag": true,
+            "transMap": {}
+          },
+          {
+            "id": "74be7031280014a1fff29875f4863dc4",
+            "subzoneSchemeInfoId": "1b6823b6d58d2dc10ead6c0e7d914095",
+            "crossId": "100996",
+            "crossRoadName": "国庆路与济川路路口",
+            "forwardGreen": 40,
+            "reverseGreen": 40,
+            "forwardPhaseDiff": 20,
+            "reversePhaseDiff": 20,
+            "forwardSpeed": 50,
+            "reverseSpeed": 50,
+            "lightFlag": null,
+            "cycleFlag": null,
+            "createTime": "2025-12-16 16:22:50",
+            "crossDistance": 208,
+            "orderNumber": 4,
+            "greenFlag": true,
+            "phaseDiffFlag": true,
+            "transMap": {}
+          },
+          {
+            "id": "734e600b0d6aece11fda87ff3cf83c21",
+            "subzoneSchemeInfoId": "1b6823b6d58d2dc10ead6c0e7d914095",
+            "crossId": "922333",
+            "crossRoadName": "国庆路与润泰路路口",
+            "forwardGreen": 40,
+            "reverseGreen": 40,
+            "forwardPhaseDiff": 20,
+            "reversePhaseDiff": 20,
+            "forwardSpeed": 50,
+            "reverseSpeed": 50,
+            "lightFlag": null,
+            "cycleFlag": null,
+            "createTime": "2025-12-16 16:22:50",
+            "crossDistance": 676,
+            "orderNumber": 5,
+            "greenFlag": true,
+            "phaseDiffFlag": true,
+            "transMap": {}
+          }
+        ],
+        cycle: 70
+      });
+    },
+    changeLaneDir(data) {
+      const tempIndex = this.mockLaneData.findIndex(item => item.laneDirCode === data.laneDirCode);
+      const temp = this.mockLaneData[tempIndex];
+      temp.laneDirName = data.laneDirName;
+      this.$set(this.mockLaneData, tempIndex, temp);
+    },
+  },
+};
+</script>
+<style lang="scss">
+#app {
+  color: #2c3e50;
+  font-family: 'Source Han Sans CN' !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>