- 作者:老汪软件技巧
- 发表时间: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);
经过一些列烦气八所的折腾数据,反正实现了