• 作者:老汪软件技巧
  • 发表时间:2024-09-01 07:01
  • 浏览量:

这次的项目是和别的部门联调接口,作为一个小小前端程序猿,在各种数据结构中辗转腾挪,也是我成长的必修课之一,(PS:要是让他们改成我想要的是不是会显得我很菜,那不行!东厂做不了的,我西厂来做!);回归正题先看看数据结构吧!首先我们看看我们要获得什么东西:

没错就这四条数据,然而我要在主列表中找相关带 Type 的值,然后生成一个新数组,再去赋值到我这个下拉选择框,ok,思路打通了,看看数据什么样的

这是主列表的数据,我要获得这些东西,本来后端大佬们能搞这些,但是主列表信息和明细中数据是特么不同的部门所以,调用 B 部门的接口我不仅需要展示这个 type 值,还有匹配一个这个值的代号,问题是,A 部门接口里没有这个代号怎么办啊,脑子又乱了,ok,冷静,既然要代号,首先我们要获得一个完整数据表对吧,总结下思路,我们把总数据表拿过来然后遍历这个 A 部门数据获得一个只有 type 值的新数组然后用其每项匹配总数据表,然后再获得一个新数组了,这样就完美的获得了一个纯净的数组来匹配下拉框;来看看实现过程

//点击明细处理数据
  clickOper({ type, data }: any) {
    let newValue: any = '';
    this.startNewTime = data.dataTime;
    const dateString = data.dataTime;
    const [datePart, timePart] = dateString.split(' ');
    const formattedDate = datePart;
    let newTime = formattedDate;
    let newTimeStr = `${newTime} ${23}:${59}:${59}`;
    this.endNewTime = newTimeStr;
    const typeList: any = [
      { key: 'NORMAL_OVER_SPEED', name: '普通超速', value: 1 },
      { key: 'SERIOUS_OVER_SPEED', name: '严重超速', value: 2 },
      { key: 'EXCEED_IDLE', name: '过长怠速', value: 3 },
      { key: 'SHARP_TURN', name: '急转弯', value: 4 },
      { key: 'SHARP_BRAKE', name: '急刹车', value: 5 },
      { key: 'RAPID_ACCELERATION', name: '急加速', value: 6 },
      { key: 'OVER_TURN_DRIVE', name: '超转行驶', value: 7 },
      { key: 'NEUTRAL_STALL', name: '空挡滑行', value: 8 },
      { key: 'IGNITION_OFF', name: '停车立即熄火', value: 9 },
      { key: 'LOW_TEMPERATURE_DRIVE', name: '冷车行驶', value: 10 },
      { key: 'LOW_OIL_DRIVE', name: '低油量行驶', value: 11 },
      { key: 'COOLING_SYSTEMERROR', name: '冷却系统异常', value: 12 },
      { key: 'LONG_BRAKE', name: '长时间刹车', value: 13 },
      { key: 'LONG_CLUTCH', name: '长时间离合', value: 14 },
      { key: 'HALF_CLUTCH', name: '粘离合', value: 15 },
      { key: 'ENGINE_IGNITIONOFF_ERROR', name: '发动机异常熄火', value: 16 },
      { key: 'PARKING_THROTTLE', name: '停车状态踩踏油门', value: 17 },
      { key: 'BATTERY_LOW_ERROR', name: '蓄电瓶低压异常', value: 24 },
      { key: 'BATTERY_HIGH_ERROR', name: '蓄电瓶高压异常', value: 25 },
      { key: 'PEDAL', name: '猛踩油门', value: 26 },
      { key: 'FUEL_HIGH_TEMPERATURE', name: '燃油温度过高', value: 27 },
      { key: 'NEUTRAL_GEAR', name: '下坡空挡滑行', value: 28 },
      { key: 'HIGH_STALL_LOW_SPEED', name: '高档低速', value: 29 },
      { key: 'STOP_AIR_CONDITIONER_ON', name: '停车长时间开空调', value: 30 },
      { key: 'NO_BEALT', name: '安全带未系', value: 32 },
      { key: 'NO_STEERING_LIGHT', name: '转弯未打转向灯', value: 33 },
      { key: 'WRONG_HIGH_BEAM', name: '远光灯使用不当', value: 34 },
      { key: 'LOW_STALL_HIGH_SPEED', name: '低档高速', value: 35 },
      { key: 'TIRED_DRIVING', name: '超时驾驶', value: 36 },
      { key: 'DRIVING_WITH_BARK', name: '带手刹行驶', value: 37 },
      { key: 'DRIVING_WITH_FAULT', name: '带故障行驶', value: 38 },
      { key: 'COLLISION', name: '碰撞报警', value: 39 },
      { key: 'ROLLOVER', name: '侧翻报警', value: 40 },
      { key: 'BATTERY_ABNORMAL_USE', name: '蓄电池异常使用', value: 41 },
      { key: 'EFFECTIVE_BRAKING', name: '有效制动', value: 42 },
      { key: 'MOTOR_OVER_DRIVE', name: '电机超转行驶', value: 43 },
      { key: 'BATTERY_TEMP_DRIVE', name: '电池温度低行驶', value: 44 }
    ];
    const filteredObj = Object.fromEntries(
      Object.entries(data).filter(([key, value]) => (key.slice(-4) === 'Type' ? value : null))
    );//很明显这是获得带 Type 的数组
    const array = Object.values(filteredObj);
    const newArray = array.map(item => {
      const foundItem = typeList.find((typeListItem: any) => typeListItem.key === item);
      return foundItem;
    });//然后去匹配上面那一坨
    this.options = newArray.map(({ name, value }: any) => ({ label: name, value: value }));然后整理出数组赋值给下拉框
    this.dialogVisible = true;
  }

嗯,不错,自认为很完美了

_数据记录和结果处理怎么写_记录及数据处理系统的作用

还有获取总时长:

显而易见,我们要获取每条数据的时差,然后累计每项;封装的方法如下

//获取时差
  getTimeDifference(startTime: any, endTime: any) {
    const start: any = new Date(startTime);
    const end: any = new Date(endTime);
    const diff = end - start;
    const seconds = Math.floor((diff / 1000) % 60);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    return `${hours}${minutes}${seconds} 秒`;
  }
  //获取总时长
  timeStringToSeconds(timeString: string): number {
    const timeParts = timeString.match(/(\d+)\s时\s(\d+)\s分\s(\d+)\s秒/);
    if (!timeParts) {
      throw new Error('Invalid time format');
    }
    const hours = parseInt(timeParts[1], 10);
    const minutes = parseInt(timeParts[2], 10);
    const seconds = parseInt(timeParts[3], 10);
    return hours * 3600 + minutes * 60 + seconds;
  }
  // 将秒数转换为标准时间字符串的函数
  secondsToTimeString(seconds: number): string {
    const hours = Math.floor(seconds / 3600);
    seconds %= 3600;
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${hours}${minutes}${remainingSeconds} 秒`;
  }
  // 计算总时间的函数
  calculateTotalTime(timeArray: string[]): string {
    let totalSeconds = 0;
    for (const timeString of timeArray) {
      totalSeconds += this.timeStringToSeconds(timeString);
    }
    return this.secondsToTimeString(totalSeconds);
  }

怎么用呢,ok 来在调用接口获取数据后


        const newArr = this.timediffs.filter((item: any) => !item.hasOwnProperty('__ob__'));
        const newDuringMileageAll = this.duringMileageAll.filter((item: any) => !item.hasOwnProperty('__ob__'));
        console.log(newDuringMileageAll);
        this.allTime = this.calculateTotalTime(newArr);
        this.allMileage = this.addDistances(newDuringMileageAll);

经过一些列烦气八所的折腾数据,反正实现了


上一条查看详情 +深入源码解析Spring Cloud Gateway限流原理
下一条 查看详情 +没有了