ng-cw-v12
Version:
Angular UI component library
209 lines (203 loc) • 12.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class LocalService {
constructor() {
}
/**
* 精确乘法
* @param value1 第一个乘数
* @param value2 第二个乘数
* @returns 两数之积
*/
mathMultiply(value1, value2) {
// 将浮点数转换为字符串
let aStr = value1.toString();
let bStr = value2.toString();
// 找到小数点后的位置
let aDecimals = (aStr.split('.')[1] || '').length;
let bDecimals = (bStr.split('.')[1] || '').length;
// 将浮点数转换为整数
let aInt = parseInt(aStr.replace('.', ''));
let bInt = parseInt(bStr.replace('.', ''));
// 进行整数乘法
let resultInt = aInt * bInt;
// 计算最终的小数位数
let totalDecimals = aDecimals + bDecimals;
// 将结果转换回浮点数
return resultInt / Math.pow(10, totalDecimals);
}
/**
* 保留指定小数位数的百分比
* @param num 需要处理的数值
* @param len 要保留的小数位数
* @returns 处理后的百分比值，保留指定小数位数
*/
retainPercentDecimal(num, len) {
const n = Math.pow(10, len + 2);
return this.mathMultiply(Math.round(num * n) / n, 100);
}
// ---------------------日期类---------------------
/**
* 格式化时间
* @param type 格式化类型yyyy-MM-dd HH:mm:ss，注意MM为月份、mm为分钟
* @param time 可选。默认当前时间
* @returns yyyy-MM-dd HH:mm:ss
*/
formatDate(type, time) {
if (!time) {
time = new Date();
}
else {
time = new Date(time);
}
if (!type) {
return '';
}
const year = time.getFullYear();
const month = (time.getMonth() + 1).toString().padStart(2, '0');
const date = (time.getDate()).toString().padStart(2, '0');
const hours = (time.getHours()).toString().padStart(2, '0');
const minute = (time.getMinutes()).toString().padStart(2, '0');
const second = (time.getSeconds()).toString().padStart(2, '0');
return type.replace('yyyy', year).replace('MM', month).replace('dd', date).replace('HH', hours).replace('mm', minute).replace('ss', second);
}
/**
* 获取两日期间的所有日期
* @param startDate 开始日期
* @param endDate 结束日期
* @returns 日期数组
*/
getRangeDate(startDate, endDate) {
let datesArray = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
datesArray.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
return datesArray;
}
}
LocalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
LocalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class TimelineComponent {
constructor(ls) {
this.ls = ls;
this.ncMode = 'horizontal';
this.ncSelected = -1;
this.ncSelectedChange = new EventEmitter();
this.ncClick = new EventEmitter();
this.dateArr = [];
this.scaleArr = [];
this.dateObjectArr = [];
this.scaleObjectArr = [];
}
set ncDate(value) {
this.dateArr = value;
setTimeout(() => {
//加延迟，防止其他传入参数未获取到
this.init();
});
}
;
ngOnInit() {
}
init() {
//时间值
this.dateObjectArr = this.setLeftValue(this.dateArr);
//刻度值
this.scaleArr = [this.dateArr[0], this.dateArr[this.dateArr.length - 1]]; //['2022-03-01', '2024-05-11']
this.scaleArr = this.scaleArr.map(date => new Date(date));
let minYear = Math.min(...this.scaleArr.map(date => date.getFullYear())); //2022
let maxYear = Math.max(...this.scaleArr.map(date => date.getFullYear())); //2024
//插入year-01-01，'2023-01-01', '2024-01-01'
for (let year = minYear + 1; year <= maxYear; year++) {
let newYearDate = new Date(`${year}-01-01`);
this.scaleArr.push(newYearDate);
}
//排序
this.scaleArr.sort((a, b) => a - b);
//转化为字符串
this.scaleArr = this.scaleArr.map(date => this.ls.formatDate('yyyy-MM-dd', date)); //['2022-03-01','2023-01-01', '2024-01-01', '2024-05-11']
//获取left值
this.scaleObjectArr = this.setLeftValue(this.scaleArr);
//截取年份
for (let item of this.scaleObjectArr) {
item.date = item.date.substring(0, 4);
}
//删除用于计算的首尾值
this.scaleObjectArr.splice(0, 1);
this.scaleObjectArr.splice(this.scaleObjectArr.length - 1, 1);
}
//获取定位left值
setLeftValue(arr) {
let all = this.ls.getRangeDate(new Date(arr[0]), new Date(arr[arr.length - 1])).length;
let leftArr = [];
for (let i = 0; i < arr.length; i++) {
let value = i == 0 ? 0 : this.ls.getRangeDate(new Date(arr[0]), new Date(arr[i])).length;
leftArr.push({
date: arr[i],
left: this.ls.retainPercentDecimal(value / all, 2)
});
}
return leftArr;
}
itemClick(date, index) {
this.ncClick.emit({ date, index });
this.ncSelected = index;
this.ncSelectedChange.emit(this.ncSelected);
}
}
TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TimelineComponent, deps: [{ token: LocalService }], target: i0.ɵɵFactoryTarget.Component });
TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TimelineComponent, selector: "nc-timeline", inputs: { ncDate: "ncDate", ncMode: "ncMode", ncSelected: "ncSelected" }, outputs: { ncSelectedChange: "ncSelectedChange", ncClick: "ncClick" }, ngImport: i0, template: "<div class=\"timeline-container-horizontal\" *ngIf=\"ncMode == 'horizontal'\">\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item\" [class.timeline-item-selected]=\"ncSelected == i\"\r\n *ngFor=\"let item of dateObjectArr;let i = index;\" (click)=\"itemClick(dateArr[i], i)\"\r\n [ngStyle]=\"{'left': i == 0 ? '0' : 'calc(' + item.left + '%' + ' - 2px)'}\" [title]=\"dateArr[i]\">\r\n </div>\r\n <div class=\"scale\" *ngFor=\"let item of scaleObjectArr;let i = index;\"\r\n [ngStyle]=\"{'left': 'calc(' + item.left + '%' + ' - 2px)'}\">\r\n </div>\r\n <div class=\"scale-value\" *ngFor=\"let item of scaleObjectArr;let i = index;\"\r\n [ngStyle]=\"{'left': 'calc(' + item.left + '%' + ' - 16px)'}\">\r\n {{item.date}}\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"timeline-container-vertical\" *ngIf=\"ncMode == 'vertical'\">\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item\" [class.timeline-item-selected]=\"ncSelected == i\"\r\n *ngFor=\"let item of dateObjectArr;let i = index;\" (click)=\"itemClick(dateArr[i], i)\"\r\n [ngStyle]=\"{'top': i == 0 ? '0' : 'calc(' + item.left + '%' + ' - 2px)'}\" [title]=\"dateArr[i]\">\r\n </div>\r\n <div class=\"scale\" *ngFor=\"let item of scaleObjectArr;let i = index;\"\r\n [ngStyle]=\"{'top': 'calc(' + item.left + '%' + ' - 2px)'}\">\r\n </div>\r\n <div class=\"scale-value\" *ngFor=\"let item of scaleObjectArr;let i = index;\"\r\n [ngStyle]=\"{'top': 'calc(' + item.left + '%' + ' - 12px)'}\">\r\n {{item.date}}\r\n </div>\r\n </div>\r\n</div>", styles: [".timeline-container-horizontal{width:100%;height:100%;padding:20px}.timeline-container-horizontal .timeline{width:100%;height:100%;border-bottom:2px solid #969696;display:flex;position:relative}.timeline-container-horizontal .timeline .timeline-item{position:absolute;bottom:0;width:2px;height:100%;background-color:#969696;cursor:pointer}.timeline-container-horizontal .timeline .timeline-item:hover{background-color:#ffbc02}.timeline-container-horizontal .timeline .timeline-item-selected{background-color:#ff3918}.timeline-container-horizontal .timeline .scale{position:absolute;bottom:-6px;width:2px;height:6px;background-color:#969696}.timeline-container-horizontal .timeline .scale-value{position:absolute;bottom:-24px;color:#8e8e8e}.timeline-container-vertical{width:100%;height:100%;padding:20px 20px 20px 40px}.timeline-container-vertical .timeline{width:100%;height:100%;border-left:2px solid #969696;display:flex;position:relative}.timeline-container-vertical .timeline .timeline-item{position:absolute;left:0;height:2px;width:100%;background-color:#969696;cursor:pointer}.timeline-container-vertical .timeline .timeline-item:hover{background-color:#ffbc02}.timeline-container-vertical .timeline .timeline-item-selected{background-color:#ff3918}.timeline-container-vertical .timeline .scale{position:absolute;left:-6px;height:2px;width:6px;background-color:#969696}.timeline-container-vertical .timeline .scale-value{position:absolute;left:-38px;color:#8e8e8e}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TimelineComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-timeline',
templateUrl: './timeline.component.html',
styleUrls: ['./timeline.component.less']
}]
}], ctorParameters: function () { return [{ type: LocalService }]; }, propDecorators: { ncDate: [{
type: Input
}], ncMode: [{
type: Input
}], ncSelected: [{
type: Input
}], ncSelectedChange: [{
type: Output
}], ncClick: [{
type: Output
}] } });
class NcTimelineModule {
}
NcTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcTimelineModule, declarations: [TimelineComponent], imports: [CommonModule], exports: [TimelineComponent] });
NcTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcTimelineModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcTimelineModule, decorators: [{
type: NgModule,
args: [{
declarations: [
TimelineComponent
],
imports: [
CommonModule
],
exports: [
TimelineComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcTimelineModule, TimelineComponent };
//# sourceMappingURL=ng-cw-v12-timeline.js.map