• canvas 轮询http接口让小车实时运动

    需求:项目中的canvas图要对应线下的实体仓库,但线上图是线下的迷你版所以并不能真正的按线下的XY走;只能线上按好线和图,把XY对应的所有点告诉后台,后台传给我startNode,endNode做为起点和结束然后根据这个点位绘制出一条路径线

     

     

     

     父组件获取接口

    1.   methods: {
    2.     // 获取小车路径
    3.     getAgvLine() {
    4.       this.setIntervalVal = setInterval(() => {
    5.         api.getAgvLine().then(res => {
    6.           this.forkliftDataInit = res.map(item => {
    7.             console.log("获取小车成功", item.carId, item);
    8.             return {
    9.               ...item,
    10.               position: this.setAnimation(item)
    11.             };
    12.           });
    13.         });
    14.       }, 1000);
    15.     },}

    setAnimation方法写在了mixin文件中;

    carAnimation.js

    1. /*
    2.  * @Author: 周云芳 164591357@qq.com
    3.  * @Date: 2022-09-19 08:57:02
    4.  * @LastEditors: 周云芳 164591357@qq.com
    5.  * @LastEditTime: 2022-09-19 10:47:20
    6.  * @FilePath: \idps-detection-city\src\views\condition\mixins\carAnimation.js
    7.  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
    8.  */
    9. const CarAnimationMixin = {
    10.   methods: {
    11.     setAnimation(item) {
    12.       let directionX = null,
    13.         directionY = null,
    14.         rotateX = 0,
    15.         rotateY = 0,
    16.         currentY = item.currentPosition.top,
    17.         currentX = item.currentPosition.left, //当前坐标
    18.         lastY = item.lastPosition.top, //上一步的坐标
    19.         lastX = item.lastPosition.left;
    20.       if (Number(currentY) != Number(lastY)) {
    21.         //判断Y轴方向当前xy是否和上一步的xy坐标相等
    22.         directionX = Number(currentY) > Number(lastY) ? "bottom" : "top"; //判断转向
    23.         console.log("走Y", directionX);
    24.         if (directionX == "top") {
    25.           rotateX = "180";
    26.           currentY = Number(currentY);
    27.         } else if (directionX == "bottom") {
    28.           rotateX = "0";
    29.           currentY = Number(currentY);
    30.         }
    31.         let position = {
    32.           transform: `rotate(${rotateX}deg)`,
    33.           top: currentY + "px",
    34.           left: currentX + "px"
    35.         };
    36.         return position;
    37.       } else if (Number(currentX) != Number(lastX)) {
    38.         directionY = Number(currentX) > Number(lastX) ? "right" : "left";
    39.         console.log("directionY--X->", directionY);
    40.         if (directionY == "left") {
    41.           rotateY = "90";
    42.           currentX = Number(currentX);
    43.         } else if (directionY == "right") {
    44.           rotateY = "270";
    45.           currentX = Number(currentX);
    46.         }
    47.         let position = {
    48.           transform: `rotate(${rotateY}deg)`,
    49.           top: currentY + "px",
    50.           left: currentX + "px"
    51.         };
    52.         return position;
    53.       }
    54.       //针对停止车辆的位置摆放
    55.       if (currentY == lastY && currentX == lastX) {
    56.         let position = {
    57.           transform: `rotate(${rotateY}deg)`,
    58.           top: currentY + "px",
    59.           left: currentX + "px"
    60.         };
    61.         return position;
    62.       }
    63.     }
    64.   }
    65. };
    66. export default CarAnimationMixin;

    对应的线路图

     

     

    子组件引入并获取传入的值进行绘制小车要走的线路

    1.  
    2.   watch: {
    3.     forkliftDataInit: {
    4.       handler(params) {
    5.         // if (!params) return;
    6.         if (params && params.length > 0) {
    7.           this.forkliftData = JSON.parse(JSON.stringify(params));
    8.           setTimeout(() => {
    9.             this.canvasMain();
    10.           }, 0);
    11.         }
    12.       },
    13.       immediate: true,
    14.       deep: true
    15.     }
    16.   },
    17.  methods: {
    18.     // 叉车线路图
    19.     canvasMain() {
    20.       if (this.ctxMain) {
    21.         this.ctxMain.clearRect(0, 0, this.canvasWidth, 467); //清除画布
    22.       }
    23.       var c = document.getElementById("main_canvas");
    24.       this.ctxMain = c.getContext("2d");
    25.       this.ctxMain.strokeStyle = "#666";
    26.       this.ctxMain.lineWidth = 2;
    27.       //1. 使用`font`设置字体。
    28.       //   this.ctxMain.font = "20px serif";
    29.       //2. 使用`fillStyle`设置字体颜色。
    30.       //   this.ctxMain.fillStyle = "red";
    31.       // 货区A0
    32.       this.ctxMain.beginPath();
    33.       this.ctxMain.lineTo(307, 50);
    34.       this.ctxMain.lineTo(307, 150);
    35.       this.ctxMain.strokeStyle = this.getColor("J0");
    36.       //   this.ctxMain.fillText("J0", 310, 100);
    37.       this.ctxMain.stroke();
    38.       // 箭头
    39.       if (this.getArrow("J0")) {
    40.         this.ctxMain.beginPath();
    41.         this.ctxMain.moveTo(300, 55);
    42.         this.ctxMain.lineTo(307, 45);
    43.         this.ctxMain.lineTo(314, 55);
    44.         this.ctxMain.strokeStyle = this.getArrow("J0");
    45.         this.ctxMain.lineWidth = 4;
    46.         this.ctxMain.stroke();
    47.         this.ctxMain.lineWidth = 2;
    48.       }
    49.       // 货区1和货区2的中间线
    50.       this.ctxMain.beginPath();
    51.       this.ctxMain.moveTo(307, 150);
    52.       this.ctxMain.lineTo(364, 150);
    53.       this.ctxMain.strokeStyle = this.getColor("main-hq");
    54.       this.ctxMain.font = "16px serif";
    55.       //   this.ctxMain.fillText("main-hq", 310, 140);
    56.  
    57.       this.ctxMain.stroke();
    58.       //中间主线-1
    59.       this.ctxMain.beginPath();
    60.       this.ctxMain.moveTo(364, 150);
    61.       this.ctxMain.lineTo(420, 150);
    62.       this.ctxMain.strokeStyle = this.getColor("main-z1");
    63.       //   this.ctxMain.fillText("main-z1", 364, 165);
    64.       this.ctxMain.stroke();
    65.       //中间主线-2
    66.       this.ctxMain.beginPath();
    67.       this.ctxMain.moveTo(420, 150);
    68.       this.ctxMain.lineTo(448, 150);
    69.       this.ctxMain.strokeStyle = this.getColor("main-z2");
    70.       //   this.ctxMain.fillText("main-z2", 420, 165);
    71.  
    72.       this.ctxMain.stroke();
    73.       //中间主线-2-1
    74.       this.ctxMain.beginPath();
    75.       this.ctxMain.moveTo(448, 150);
    76.       this.ctxMain.lineTo(478, 150);
    77.       this.ctxMain.strokeStyle = this.getColor("main-z2-1");
    78.       //   this.ctxMain.fillText("main-z2-1", 448, 145);
    79.  
    80.       this.ctxMain.stroke();
    81.       //中间主线-3
    82.       this.ctxMain.beginPath();
    83.       this.ctxMain.moveTo(478, 150);
    84.       this.ctxMain.lineTo(557, 150);
    85.       this.ctxMain.strokeStyle = this.getColor("main-z3");
    86.       //   this.ctxMain.fillText("main-z3", 478, 165);
    87.  
    88.       this.ctxMain.stroke();
    89.       //中间主线-4
    90.       this.ctxMain.beginPath();
    91.       this.ctxMain.moveTo(557, 150);
    92.       this.ctxMain.lineTo(628, 150);
    93.       this.ctxMain.strokeStyle = this.getColor("main-z4");
    94.       //   this.ctxMain.fillText("main-z4", 557, 140);
    95.  
    96.       this.ctxMain.stroke();
    97.       //中间主线-5
    98.       this.ctxMain.beginPath();
    99.       this.ctxMain.moveTo(628, 150);
    100.       this.ctxMain.lineTo(720, 150);
    101.       this.ctxMain.strokeStyle = this.getColor("main-z5");
    102.       //   this.ctxMain.fillText("main-z5", 628, 140);
    103.  
    104.       this.ctxMain.stroke();
    105.       //中间主线-6
    106.       this.ctxMain.beginPath();
    107.       this.ctxMain.moveTo(720, 150);
    108.       //   this.ctxMain.lineTo(this.canvasWidth - 450, 150);
    109.       this.ctxMain.lineTo(764, 150);
    110.       this.ctxMain.strokeStyle = this.getColor("main-z6");
    111.       //   this.ctxMain.fillText("main-z6", 720, 140);
    112.  
    113.       this.ctxMain.stroke();
    114.       //中间主线-7
    115.       this.ctxMain.beginPath();
    116.       //   this.ctxMain.moveTo(this.canvasWidth - 450, 150);
    117.       //   this.ctxMain.lineTo(this.canvasWidth - 390, 150);
    118.       this.ctxMain.moveTo(764, 150);
    119.       this.ctxMain.lineTo(842, 150);
    120.       this.ctxMain.strokeStyle = this.getColor("main-z7");
    121.       //   this.ctxMain.fillText("main-z7", 760, 165);
    122.  
    123.       this.ctxMain.stroke();
    124.       // 中间主线-8
    125.       this.ctxMain.beginPath();
    126.       //   this.ctxMain.moveTo(this.canvasWidth - 390, 150);
    127.       //   this.ctxMain.lineTo(this.canvasWidth - 340, 150);
    128.       this.ctxMain.moveTo(this.canvasWidth - 390, 150);
    129.       this.ctxMain.lineTo(this.canvasWidth - 340, 150);
    130.       this.ctxMain.strokeStyle = this.getColor("main-z8");
    131.       //   this.ctxMain.fillText("main-z8", this.canvasWidth - 390, 165);
    132.  
    133.       this.ctxMain.stroke();
    134.       //中间主线-9
    135.       this.ctxMain.beginPath();
    136.       this.ctxMain.moveTo(this.canvasWidth - 340, 150);
    137.       this.ctxMain.lineTo(this.canvasWidth - 291, 150);
    138.       this.ctxMain.font = "14px serif";
    139.       this.ctxMain.strokeStyle = this.getColor("main-z9");
    140.       //   this.ctxMain.fillText("main-z9", this.canvasWidth - 340, 145);
    141.  
    142.       this.ctxMain.stroke();
    143.       //中间主线-10
    144.       this.ctxMain.beginPath();
    145.       this.ctxMain.moveTo(this.canvasWidth - 291, 150);
    146.       this.ctxMain.lineTo(this.canvasWidth - 270, 150);
    147.       this.ctxMain.strokeStyle = this.getColor("main-z10");
    148.       //   this.ctxMain.fillText("mainz10", this.canvasWidth - 291, 145);
    149.  
    150.       this.ctxMain.stroke();
    151.       //A4-4
    152.       this.ctxMain.beginPath();
    153.       this.ctxMain.moveTo(307, 150);
    154.       this.ctxMain.lineTo(307, 226);
    155.       this.ctxMain.strokeStyle = this.getColor("A4-4");
    156.       //   this.ctxMain.fillText("A4-4", 290, 226);
    157.  
    158.       this.ctxMain.stroke();
    159.       // 箭头
    160.       if (this.getArrow("A4-4")) {
    161.         this.ctxMain.beginPath();
    162.         this.ctxMain.moveTo(302, 216);
    163.         this.ctxMain.lineTo(307, 226);
    164.         this.ctxMain.lineTo(312, 216);
    165.         this.ctxMain.strokeStyle = this.getArrow("A4-4");
    166.         this.ctxMain.lineWidth = 4;
    167.         this.ctxMain.stroke();
    168.         this.ctxMain.lineWidth = 2;
    169.       }
    170.       //A4-3
    171.       this.ctxMain.beginPath();
    172.       this.ctxMain.moveTo(364, 150);
    173.       this.ctxMain.lineTo(364, 226);
    174.       this.ctxMain.strokeStyle = this.getColor("A4-3");
    175.       //   this.ctxMain.fillText("A4-3", 356, 226);
    176.  
    177.       this.ctxMain.stroke();
    178.       // 箭头
    179.       if (this.getArrow("A4-3")) {
    180.         this.ctxMain.beginPath();
    181.         this.ctxMain.moveTo(359, 216);
    182.         this.ctxMain.lineTo(364, 226);
    183.         this.ctxMain.lineTo(369, 216);
    184.         this.ctxMain.strokeStyle = this.getArrow("A4-3");
    185.         this.ctxMain.lineWidth = 4;
    186.         this.ctxMain.stroke();
    187.         this.ctxMain.lineWidth = 2;
    188.       }
    189.       //A4-2
    190.       this.ctxMain.beginPath();
    191.       this.ctxMain.moveTo(420, 150);
    192.       this.ctxMain.lineTo(420, 226);
    193.       this.ctxMain.strokeStyle = this.getColor("A4-2");
    194.       //   this.ctxMain.fillText("A4-2", 410, 230);
    195.  
    196.       this.ctxMain.stroke();
    197.       // 箭头
    198.       if (this.getArrow("A4-2")) {
    199.         this.ctxMain.beginPath();
    200.         this.ctxMain.moveTo(415, 216);
    201.         this.ctxMain.lineTo(420, 226);
    202.         this.ctxMain.lineTo(425, 216);
    203.         this.ctxMain.strokeStyle = this.getArrow("A4-2");
    204.  
    205.         this.ctxMain.lineWidth = 4;
    206.         this.ctxMain.stroke();
    207.         this.ctxMain.lineWidth = 2;
    208.       }
    209.       //A4-1
    210.       this.ctxMain.beginPath();
    211.       this.ctxMain.moveTo(478, 150);
    212.       this.ctxMain.lineTo(478, 226);
    213.       this.ctxMain.strokeStyle = this.getColor("A4-1");
    214.       //   this.ctxMain.fillText("A4-1", 478, 260);
    215.  
    216.       this.ctxMain.stroke();
    217.       // 箭头
    218.       if (this.getArrow("A4-1")) {
    219.         this.ctxMain.beginPath();
    220.         this.ctxMain.moveTo(473, 216);
    221.         this.ctxMain.lineTo(478, 226);
    222.         this.ctxMain.lineTo(483, 216);
    223.         this.ctxMain.strokeStyle = this.getArrow("A4-1");
    224.         this.ctxMain.lineWidth = 4;
    225.         this.ctxMain.stroke();
    226.         this.ctxMain.lineWidth = 2;
    227.       }
    228.       //A5-2
    229.       this.ctxMain.beginPath();
    230.       this.ctxMain.moveTo(557, 150);
    231.       this.ctxMain.lineTo(557, 230);
    232.       // this.ctxMain.lineTo(560, 230);
    233.       // this.ctxMain.lineTo(560, 230);
    234.       this.ctxMain.strokeStyle = this.getColor("A5-2");
    235.       //   this.ctxMain.fillText("A5-2", 557, 230);
    236.  
    237.       this.ctxMain.stroke();
    238.       // 箭头
    239.       if (this.getArrow("A5-2")) {
    240.         this.ctxMain.beginPath();
    241.         this.ctxMain.moveTo(552, 220);
    242.         this.ctxMain.lineTo(557, 230);
    243.         this.ctxMain.lineTo(562, 220);
    244.         this.ctxMain.strokeStyle = this.getArrow("A5-2");
    245.         this.ctxMain.lineWidth = 4;
    246.         this.ctxMain.stroke();
    247.         this.ctxMain.lineWidth = 2;
    248.       }
    249.       //A5-1
    250.       this.ctxMain.beginPath();
    251.       this.ctxMain.moveTo(628, 150);
    252.       this.ctxMain.lineTo(628, 230);
    253.       this.ctxMain.strokeStyle = this.getColor("A5-1");
    254.       //   this.ctxMain.fillText("A5-1", 628, 230);
    255.  
    256.       this.ctxMain.stroke();
    257.       // 箭头
    258.       if (this.getArrow("A5-1")) {
    259.         this.ctxMain.beginPath();
    260.         this.ctxMain.moveTo(623, 220);
    261.         this.ctxMain.lineTo(628, 230);
    262.         this.ctxMain.lineTo(633, 220);
    263.         this.ctxMain.strokeStyle = this.getArrow("A5-1");
    264.         this.ctxMain.lineWidth = 4;
    265.         this.ctxMain.stroke();
    266.         this.ctxMain.lineWidth = 2;
    267.       }
    268.       //A1
    269.       this.ctxMain.beginPath();
    270.       this.ctxMain.moveTo(448, 150);
    271.       this.ctxMain.lineTo(448, 86);
    272.       this.ctxMain.strokeStyle = this.getColor("A1");
    273.       //   this.ctxMain.fillText("A1", 448, 86);
    274.  
    275.       this.ctxMain.stroke();
    276.       // 箭头
    277.       if (this.getArrow("A1")) {
    278.         this.ctxMain.beginPath();
    279.         this.ctxMain.moveTo(438, 100);
    280.         this.ctxMain.lineTo(448, 80);
    281.         this.ctxMain.lineTo(458, 100);
    282.         this.ctxMain.strokeStyle = this.getArrow("A1");
    283.         this.ctxMain.lineWidth = 4;
    284.         this.ctxMain.stroke();
    285.         this.ctxMain.lineWidth = 2;
    286.       }
    287.       //A2
    288.       this.ctxMain.beginPath();
    289.       this.ctxMain.moveTo(628, 150);
    290.       this.ctxMain.lineTo(628, 92);
    291.       this.ctxMain.strokeStyle = this.getColor("A2");
    292.       //   this.ctxMain.fillText("A2", 628, 92);
    293.  
    294.       this.ctxMain.stroke();
    295.       // 箭头
    296.       if (this.getArrow("A2")) {
    297.         this.ctxMain.beginPath();
    298.         this.ctxMain.moveTo(622, 100);
    299.         this.ctxMain.lineTo(628, 90);
    300.         this.ctxMain.lineTo(634, 100);
    301.         this.ctxMain.strokeStyle = this.getArrow("A2");
    302.         this.ctxMain.lineWidth = 4;
    303.         this.ctxMain.stroke();
    304.         this.ctxMain.lineWidth = 2;
    305.       }
    306.       //A3
    307.       this.ctxMain.beginPath();
    308.       this.ctxMain.moveTo(this.canvasWidth - 270, 150);
    309.       this.ctxMain.lineTo(this.canvasWidth - 210, 150);
    310.       this.ctxMain.strokeStyle = this.getColor("A3");
    311.       //   this.ctxMain.fillText("A3", this.canvasWidth - 230, 165);
    312.  
    313.       this.ctxMain.stroke();
    314.       // 箭头
    315.       if (this.getArrow("A3")) {
    316.         this.ctxMain.beginPath();
    317.         this.ctxMain.moveTo(this.canvasWidth - 215, 144);
    318.         this.ctxMain.lineTo(this.canvasWidth - 205, 150);
    319.         this.ctxMain.lineTo(this.canvasWidth - 215, 156);
    320.         this.ctxMain.strokeStyle = this.getArrow("A3");
    321.         this.ctxMain.lineWidth = 4;
    322.         this.ctxMain.stroke();
    323.         this.ctxMain.lineWidth = 2;
    324.       }
    325.       //A6
    326.       this.ctxMain.beginPath();
    327.       this.ctxMain.moveTo(this.canvasWidth - 270, 150);
    328.       this.ctxMain.lineTo(this.canvasWidth - 270, 246);
    329.       this.ctxMain.lineTo(this.canvasWidth - 210, 246);
    330.       this.ctxMain.strokeStyle = this.getColor("A6");
    331.       this.ctxMain.font = "30px serif";
    332.       //   this.ctxMain.fillText("A6", this.canvasWidth - 285, 240);
    333.  
    334.       this.ctxMain.stroke();
    335.       // 箭头
    336.       if (this.getArrow("A6")) {
    337.         this.ctxMain.beginPath();
    338.         this.ctxMain.moveTo(this.canvasWidth - 215, 240);
    339.         this.ctxMain.lineTo(this.canvasWidth - 205, 246);
    340.         this.ctxMain.lineTo(this.canvasWidth - 215, 252);
    341.         this.ctxMain.strokeStyle = this.getArrow("A6");
    342.         this.ctxMain.lineWidth = 4;
    343.         this.ctxMain.stroke();
    344.         this.ctxMain.lineWidth = 2;
    345.       }
    346.       // 叉车3
    347.       this.ctxMain.beginPath();
    348.       this.ctxMain.moveTo(this.canvasWidth - 288, 95);
    349.       this.ctxMain.lineTo(this.canvasWidth - 294, 95);
    350.       this.ctxMain.lineTo(this.canvasWidth - 291, 95);
    351.       this.ctxMain.lineTo(this.canvasWidth - 291, 150);
    352.       this.ctxMain.strokeStyle = this.getColor("C3");
    353.       this.ctxMain.stroke();
    354.       // 箭头
    355.       if (this.getArrow("C3")) {
    356.         this.ctxMain.beginPath();
    357.         this.ctxMain.moveTo(this.canvasWidth - 299, 103);
    358.         this.ctxMain.lineTo(this.canvasWidth - 291, 93);
    359.         this.ctxMain.lineTo(this.canvasWidth - 284, 103);
    360.         this.ctxMain.strokeStyle = this.getArrow("C3");
    361.         this.ctxMain.lineWidth = 4;
    362.         this.ctxMain.stroke();
    363.         this.ctxMain.lineWidth = 2;
    364.       }
    365.       // 叉车2
    366.       this.ctxMain.beginPath();
    367.       this.ctxMain.moveTo(this.canvasWidth - 337, 95);
    368.       this.ctxMain.lineTo(this.canvasWidth - 343, 95);
    369.       this.ctxMain.lineTo(this.canvasWidth - 340, 95);
    370.       this.ctxMain.lineTo(this.canvasWidth - 340, 150);
    371.       this.ctxMain.strokeStyle = this.getColor("C2");
    372.       this.ctxMain.stroke();
    373.       // 箭头
    374.       if (this.getArrow("C2")) {
    375.         this.ctxMain.beginPath();
    376.         this.ctxMain.moveTo(this.canvasWidth - 348, 103);
    377.         this.ctxMain.lineTo(this.canvasWidth - 340, 93);
    378.         this.ctxMain.lineTo(this.canvasWidth - 332, 103);
    379.         this.ctxMain.strokeStyle = this.getArrow("C2");
    380.         this.ctxMain.lineWidth = 4;
    381.         this.ctxMain.stroke();
    382.         this.ctxMain.lineWidth = 2;
    383.       }
    384.       // 叉车1
    385.       this.ctxMain.beginPath();
    386.       this.ctxMain.moveTo(this.canvasWidth - 387, 95);
    387.       this.ctxMain.lineTo(this.canvasWidth - 393, 95);
    388.       this.ctxMain.lineTo(this.canvasWidth - 390, 95);
    389.       this.ctxMain.lineTo(this.canvasWidth - 390, 150);
    390.       this.ctxMain.strokeStyle = this.getColor("C1");
    391.       this.ctxMain.stroke();
    392.       // 箭头
    393.       if (this.getArrow("C1")) {
    394.         this.ctxMain.beginPath();
    395.         this.ctxMain.moveTo(this.canvasWidth - 398, 103);
    396.         this.ctxMain.lineTo(this.canvasWidth - 390, 93);
    397.         this.ctxMain.lineTo(this.canvasWidth - 382, 103);
    398.         this.ctxMain.strokeStyle = this.getArrow("C1");
    399.         this.ctxMain.lineWidth = 4;
    400.         this.ctxMain.stroke();
    401.         this.ctxMain.lineWidth = 2;
    402.       }
    403.     },
    404.     //获取箭头的状态和颜色
    405.     getArrow(type) {
    406.       if (!this.forkliftData) return;
    407.       let color = "";
    408.       let ccData = {
    409.         endNode1: "",
    410.         endNode2: "",
    411.         endNode3: ""
    412.       };
    413.       this.forkliftData.forEach(item => {
    414.         if (item.carId == "1") {
    415.           ccData.endNode1 = item.endNode;
    416.         } else if (item.carId == "2") {
    417.           ccData.endNode2 = item.endNode;
    418.         } else if (item.carId == "3") {
    419.           ccData.endNode3 = item.endNode;
    420.         }
    421.       });
    422.       if (ccData.endNode1 == type) {
    423.         color = "#00FF00";
    424.       } else if (ccData.endNode2 == type) {
    425.         color = "#00ffff";
    426.       } else if (ccData.endNode3 == type) {
    427.         color = "#FFE13B";
    428.       } else {
    429.         color = false;
    430.       }
    431.       return color;
    432.     },
    433.     //获取线条的颜色
    434.     getColor(type) {
    435.       //type为AO,A1...
    436.       if (!this.forkliftData) return;
    437.       let color = "";
    438.       let C1 = {},
    439.         C2 = {},
    440.         C3 = {};
    441.       // 车子开开始的位置和结束的位置
    442.       this.forkliftData.forEach(item => {
    443.         if (item.carId == "1") {
    444.           C1.startNode = item.startNode;
    445.           C1.endNode = item.endNode;
    446.         } else if (item.carId == "2") {
    447.           C2.startNode = item.startNode;
    448.           C2.endNode = item.endNode;
    449.         } else if (item.carId == "3") {
    450.           C3.startNode = item.startNode;
    451.           C3.endNode = item.endNode;
    452.         }
    453.       });
    454.       if (this.ccType(type, C1)) {
    455.         //判断小车类型和开始或类型和结束位置相同
    456.         color = "#00FF00";
    457.       } else if (this.ccType(type, C2)) {
    458.         //计算线条的数据返回True
    459.         color = "#00ffff";
    460.       } else if (this.ccType(type, C3)) {
    461.         color = "#FFE13B";
    462.       } else {
    463.         color = "#666";
    464.       }
    465.       //   if (this.ccType(type, C1)) {
    466.       //     this.trolley1.push(type);
    467.       //   }
    468.       //   if (this.ccType(type, C2)) {
    469.       //     this.trolley2.push(type);
    470.       //   }
    471.       //   if (this.ccType(type, C3)) {
    472.       //     this.trolley3.push(type);
    473.       //   }
    474.       return color;
    475.     },
    476.     //计算线条的数据
    477.     ccType(type, cc) {
    478.       //type为AO,A1...,cc=叉车开始及结束位置 {startNode: 'C2', endNode: 'A4-1'}
    479.       let status = false;
    480.       if (type.indexOf("main") < 0) {
    481.         if (cc.startNode == type || cc.endNode == type) {
    482.           status = true;
    483.         }
    484.       } else {
    485.         if (type == "main-hq" && this.mainHq(cc)) {
    486.           status = true;
    487.         }
    488.         if (type == "main-z1" && this.mainZ1(cc)) {
    489.           status = true;
    490.         }
    491.         if (type == "main-z2" && this.mainZ2(cc)) {
    492.           status = true;
    493.         }
    494.         if (type == "main-z2-1" && this.mainZ21(cc)) {
    495.           status = true;
    496.         }
    497.         if (type == "main-z3" && this.mainZ3(cc)) {
    498.           status = true;
    499.         }
    500.         if (type == "main-z4" && this.mainZ4(cc)) {
    501.           status = true;
    502.         }
    503.         if (type == "main-z5" && this.mainZ5(cc)) {
    504.           status = true;
    505.         }
    506.         if (type == "main-z6" && this.mainZ6(cc)) {
    507.           status = true;
    508.         }
    509.         if (type == "main-z7" && this.mainZ7(cc)) {
    510.           status = true;
    511.         }
    512.         if (type == "main-z8" && this.mainZ8(cc)) {
    513.           status = true;
    514.         }
    515.         if (type == "main-z9" && this.mainZ9(cc)) {
    516.           status = true;
    517.         }
    518.         if (type == "main-z10" && this.mainZ10(cc)) {
    519.           status = true;
    520.         }
    521.         if (type == "main-A7" && this.mainA7(cc)) {
    522.           status = true;
    523.         }
    524.       }
    525.       return status;
    526.     },
    527.     mainHq(cc) {
    528.       let status = false;
    529.       let left = ["J0", "A4-4"];
    530.       let right = [
    531.         "AAA",
    532.         "A4-3",
    533.         "A4-2",
    534.         "A4-1",
    535.         "A1",
    536.         "A2",
    537.         "A3",
    538.         "A5-2",
    539.         "A5-1",
    540.         "A6",
    541.         "A7",
    542.         "C1",
    543.         "C2",
    544.         "C3",
    545.         "cc4",
    546.         "A8"
    547.       ];
    548.       if (
    549.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    550.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    551.       ) {
    552.         status = true;
    553.       }
    554.       return status;
    555.     },
    556.     mainZ1(cc) {
    557.       let status = false;
    558.       let left = ["J0", "AAA", "A4-4", "A4-3"];
    559.       let right = [
    560.         "A4-2",
    561.         "A4-1",
    562.         "A1",
    563.         "A2",
    564.         "A3",
    565.         "A5-2",
    566.         "A5-1",
    567.         "A6",
    568.         "A7",
    569.         "C1",
    570.         "C2",
    571.         "C3",
    572.         "cc4",
    573.         "A8"
    574.       ];
    575.       if (
    576.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    577.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    578.       ) {
    579.         status = true;
    580.       }
    581.       return status;
    582.     },
    583.     mainZ2(cc) {
    584.       let status = false;
    585.       let left = ["J0", "AAA", "A4-4", "A4-3", "A4-2"];
    586.       let right = [
    587.         "A4-1",
    588.         "A1",
    589.         "A2",
    590.         "A3",
    591.         "A5-2",
    592.         "A5-1",
    593.         "A6",
    594.         "A7",
    595.         "C1",
    596.         "C2",
    597.         "C3",
    598.         "cc4",
    599.         "A8"
    600.       ];
    601.       if (
    602.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    603.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    604.       ) {
    605.         status = true;
    606.       }
    607.       return status;
    608.     },
    609.     mainZ21(cc) {
    610.       let status = false;
    611.       let left = ["J0", "AAA", "A1", "A4-4", "A4-3", "A4-2"];
    612.       let right = [
    613.         "A4-1",
    614.         "A2",
    615.         "A3",
    616.         "A5-2",
    617.         "A5-1",
    618.         "A6",
    619.         "A7",
    620.         "C1",
    621.         "C2",
    622.         "C3",
    623.         "cc4",
    624.         "A8"
    625.       ];
    626.       if (
    627.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    628.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    629.       ) {
    630.         status = true;
    631.       }
    632.       return status;
    633.     },
    634.     mainZ3(cc) {
    635.       let status = false;
    636.       let left = ["J0", "AAA", "A4-4", "A4-3", "A4-2", "A4-1", "A1"];
    637.       let right = [
    638.         "A2",
    639.         "A3",
    640.         "A5-2",
    641.         "A5-1",
    642.         "A6",
    643.         "A7",
    644.         "C1",
    645.         "C2",
    646.         "C3",
    647.         "cc4",
    648.         "A8"
    649.       ];
    650.       if (
    651.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    652.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    653.       ) {
    654.         status = true;
    655.       }
    656.       return status;
    657.     },
    658.     mainZ4(cc) {
    659.       let status = false;
    660.       let left = ["J0", "AAA", "A4-4", "A4-3", "A4-2", "A4-1", "A1", "A5-2"];
    661.       let right = [
    662.         "A2",
    663.         "A3",
    664.         "A5-1",
    665.         "A6",
    666.         "A7",
    667.         "C1",
    668.         "C2",
    669.         "C3",
    670.         "cc4",
    671.         "A8"
    672.       ];
    673.       if (
    674.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    675.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    676.       ) {
    677.         status = true;
    678.       }
    679.       return status;
    680.     },
    681.     mainZ5(cc) {
    682.       let status = false;
    683.       let left = [
    684.         "J0",
    685.         "AAA",
    686.         "A4-4",
    687.         "A4-3",
    688.         "A4-2",
    689.         "A4-1",
    690.         "A1",
    691.         "A5-2",
    692.         "A5-1",
    693.         "A2"
    694.       ];
    695.       let right = ["A3", "A6", "A7", "C1", "C2", "C3", "cc4", "A8"];
    696.       if (
    697.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    698.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    699.       ) {
    700.         status = true;
    701.       }
    702.       return status;
    703.     },
    704.     mainZ6(cc) {
    705.       let status = false;
    706.       let left = [
    707.         "J0",
    708.         "AAA",
    709.         "A4-4",
    710.         "A4-3",
    711.         "A4-2",
    712.         "A4-1",
    713.         "A1",
    714.         "A5-2",
    715.         "A5-1",
    716.         "A2",
    717.         "A7",
    718.         "A8"
    719.       ];
    720.       let right = ["A3", "A6", "C1", "C2", "C3", "cc4"];
    721.       if (
    722.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    723.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    724.       ) {
    725.         status = true;
    726.       }
    727.       return status;
    728.     },
    729.     mainZ7(cc) {
    730.       let status = false;
    731.       let left = [
    732.         "J0",
    733.         "AAA",
    734.         "A4-4",
    735.         "A4-3",
    736.         "A4-2",
    737.         "A4-1",
    738.         "A1",
    739.         "A5-2",
    740.         "A5-1",
    741.         "A2",
    742.         "A7",
    743.         "A8"
    744.       ];
    745.       let right = ["A3", "A6", "C2", "C3", "C1"];
    746.       if (
    747.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    748.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    749.       ) {
    750.         status = true;
    751.       }
    752.       return status;
    753.     },
    754.     mainZ8(cc) {
    755.       let status = false;
    756.       let left = [
    757.         "J0",
    758.         "AAA",
    759.         "A4-4",
    760.         "A4-3",
    761.         "A4-2",
    762.         "A4-1",
    763.         "A1",
    764.         "A5-2",
    765.         "A5-1",
    766.         "A2",
    767.         "A7",
    768.         "A8",
    769.         "C1"
    770.       ];
    771.       let right = ["A3", "A6", "C3", "C2"];
    772.       if (
    773.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    774.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    775.       ) {
    776.         status = true;
    777.       }
    778.       return status;
    779.     },
    780.     mainZ9(cc) {
    781.       let status = false;
    782.       let left = [
    783.         "J0",
    784.         "AAA",
    785.         "A4-4",
    786.         "A4-3",
    787.         "A4-2",
    788.         "A4-1",
    789.         "A1",
    790.         "A5-2",
    791.         "A5-1",
    792.         "A2",
    793.         "A7",
    794.         "A8",
    795.         "C1",
    796.         "C2"
    797.       ];
    798.       let right = ["A3", "A6", "C3"];
    799.       if (
    800.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    801.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    802.       ) {
    803.         status = true;
    804.       }
    805.       return status;
    806.     },
    807.     mainZ10(cc) {
    808.       let status = false;
    809.       let left = [
    810.         "J0",
    811.         "AAA",
    812.         "A4-4",
    813.         "A4-3",
    814.         "A4-2",
    815.         "A4-1",
    816.         "A1",
    817.         "A5-2",
    818.         "A5-1",
    819.         "A2",
    820.         "A7",
    821.         "A8",
    822.         "C1",
    823.         "C2",
    824.         "C3",
    825.         "cc4"
    826.       ];
    827.       let right = ["A3", "A6"];
    828.       if (
    829.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    830.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    831.       ) {
    832.         status = true;
    833.       }
    834.       return status;
    835.     },
    836.     mainA7(cc) {
    837.       let status = false;
    838.       let left = [
    839.         "J0",
    840.         "AAA",
    841.         "A4-4",
    842.         "A4-3",
    843.         "A4-2",
    844.         "A4-1",
    845.         "A1",
    846.         "A5-2",
    847.         "A5-1",
    848.         "A2",
    849.         "C1",
    850.         "C2",
    851.         "C3",
    852.         "cc4",
    853.         "A3",
    854.         "A6"
    855.       ];
    856.       let right = ["A7", "A8"];
    857.       if (
    858.         (left.indexOf(cc.startNode) >= 0 && right.indexOf(cc.endNode) >= 0) ||
    859.         (left.indexOf(cc.endNode) >= 0 && right.indexOf(cc.startNode) >= 0)
    860.       ) {
    861.         status = true;
    862.       }
    863.       return status;
    864.     },
    865. }

  • 相关阅读:
    Mysql（Mariadb） 数据库安装在ArchLinux
    国家网络安全周 | 金融日，一起 get金融行业数据安全
    【Pycharm 安装Django报错显示：ERROR: Failed building wheel for backports.zoneinfo】
    【Linux】--make/makefile--gcc/g++/gdb
    虚拟机构建单体项目及前后端分离项目
    2023年全球市场氮化铝外延片总体规模、主要生产商、主要地区、产品和应用细分研究报告
    18-JSON和浏览器数据存储
    发送短信验证码执行登录操作
    一日一技：用Python做游戏有多简单
    java代码审计（入门级）—基础漏洞合集
  • 原文地址：https://blog.csdn.net/qq_40190624/article/details/126929359