基于 angular12 和 ng-zorro-antd 的一些在四川省河长制采砂平台中常用的组件。
npm install hzz-sand-components基于 angular12 和 ng-zorro-antd 的一些在四川省河长制采砂平台中常用的组件。
1、npm i hzz-sand-components @latest
2、app.modules.ts 中 import { HzzSandModule } from 'hzz-sand-components' ;
3、app.modules.ts 中@NgModule 中 imports 数组中添加 HzzSandModule ；
4、如果需要使用common-data.service，在需要使用的模块中 import { CommonDataService } from 'hzz-sand-components'; ，在构造函数中 constructor(public cs: CommonDataService) { } 即可。
实在是懒得研究怎么把ant样式引入到项目里了……
自行在style.css/style.less中引入ant的样式！
如下：（css的就换成css）
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
``css`
.mapboxgl-ctrl-bottom-left {
display: none;
}
用来隐藏mapbox的水印。
`html`
[showTool]="false" [showMapSwitcher]="true" [mapSwitcherStyle]="{'top': '10px','right': '10px'}"
[dependencePath]="baseUrl" [mapId]='"map1"'
(mapLoaded)='planMapLoaded1($event)'>
mapToken：mapbox的token；
poiToken：高德地图的poi的token；
dependencePath：依赖所在路径（需包括mapbox-gl.css,mapbox-gl.js,turf.min.js）
mapId：随便什么字符串
mapLoaded：地图加载完成后的事件
showTool：是否显示工具条
showMapSwitcher：是否显示地图切换工具（工具条上那个方方）
mapSwitcherStyle：地图切换工具（工具条上那个方方）的样式（主要用来调整它的位置）
theseAmapIsOpen：初始化打开的专题图层，是个数组，直接传名字，默认为空
`html`
region、rivers、basins：搜索下拉框中的行政区划、河流、流域，每个节点都需要含有value、label这两个字段，用与显示与取值，叶子节点需有isLeaf=true
paramChange：搜索参数改变时调用的方法，用来更新下拉框中参数
onSearch：点击【搜索】后的事件
`html`
pageIndex：当前页码，可双向绑定
pageSize：一页的数据条数，默认10
total：总计数据条数
pageChange：翻页的回调函数
html
`采砂审批流程组件
：默认为：`JavaScript
approvalArr: any = {
1: { name: '入库', color: '#409EFF', showLabel: false },
2: { name: '通过', color: '#21A664', showLabel: true },
3: { name: '驳回', color: '#FF5F40', showLabel: true },
4: { name: '待审批', color: '#CCCCCC', showLabel: false }
`其中
为true时，会显示下面那三行字，false则不显示。data:要显示的审批流程数据，类似于这样的结构：`JavaScript
fakeApproval: any = [
{ state: 1, approPerson: '张三', approDate: '2023-12-28', region: '仪陇县' },
{ state: 2, approPerson: '李四', approDate: '2023-12-29', region: '南充市' },
{ state: 3, approPerson: '曹冲', approDate: '2023-12-30', region: '四川省' },
{ state: 3, approPerson: '李四', approDate: '2024-01-03', region: '南充市' },
{ state: 1, approPerson: '张三', approDate: '2024-01-05', region: '仪陇县' },
{ state: 2, approPerson: '李四', approDate: '2024-01-09', region: '南充市' },
{ state: 4, region: '四川省' }
]
`
state对应approvalArr中的键，approPerson审批人员，approDate审批时间，region会显示在审批流程节点气泡下：状态字段名称，默认state：状态字段名称，默认region：状态字段名称，默认approPerson：状态字段名称，默认approDatehzz-big-pagination
html
`用法和上面那个一样的，只是这个大一些，多了个跳转第几页
：当前页码，可双向绑定pageSize：一页的数据条数，默认10total：总计数据条数pageChange：翻页的回调函数hzz-region-tree
`html
`：区域树数据regionNote：行政区划名后显示的附加信息，类似如下`js
region_note: any = {
'5101': '我是成都市',
'510106': '我是金牛desu'
}
`：选中的行政区划search：搜索关键字（没有就不要这个）titleClick：点击标题的回调函数isExpandOnClick：点击标题是否展开，true为点击标题展开，直到县级点击才可选中，false为点击标题选中的同时切换展开收缩状态initOpenPac：从外部传入的展开并选中的pachzz-placeholder-pic
`html
`：第一行文字（加粗的那行）lineTwo：第二行文字（下面灰色的那行）picSize：图片宽高(单位为px)hzz-video-player
三次封装同事的二次封装的库
`html
`：视频播放链接tip：视频上的提示文字，展示在右上角autoplay：是否自动播放playing: 播放状态改变的回调common-data.service
一些常用的方法，具体参考注释，这里的是
通义千问整理的，有些不那么准确。$3
1. dateToString
- - 参数:
- - - datee: 任意类型，表示日期。
- con(可选): 字符串，默认值为 '-'，日期分隔符。
- - 返回值类型: 字符串
- 功能概述: 将日期转换为字符串格式，格式为 "YYYY-MM-DD"。
- 示例:
`
Typescript
1const dateString = this.dateToString(new Date(), '-'); // "2023-04-01"
2. stringToDate
- - 参数:
- - - date: 任意类型，表示日期的字符串形式。
- connet(可选): 字符串，默认值为 '-'，日期分隔符。
- - 返回值类型: Date 对象
- 功能概述: 将字符串格式的日期转换为 Date 对象。
- 示例:
Typescript
1const dateObj = this.stringToDate("2023-04-01"); // 代表2023年4月1日的Date对象
3. convertToDate
- - 参数:
- - - dateStr: 字符串，格式如 "3月1日"。
- - 返回值类型: Date 对象
- 功能概述: 将特定格式的中文日期字符串转换为 Date 对象。
- 示例:
Typescript
1const date = this.convertToDate("3月1日"); // 假设当前年为2023，返回2023-03-01的Date对象
4. dateAddYear
- - 参数:
- - - yearStr: 字符串，指定的年份。
- date: Date 对象。
- - 返回值类型: Date 对象
- 功能概述: 给定的 Date 对象加上指定年份后生成新 Date 对象。
- 示例:
Typescript
const newDate = this.dateAddYear("2025", new Date()); // 返回2025年当前日期的Date对象
`5. isDateInRange
- 参数:
- - date: {any} 需要检查的日期。
- range: {any[]} 一个表示范围的数组，包含两个元素，分别代表范围的起始和结束日期（应确保范围的起始日期小于或等于结束日期）。
- - 返回值类型:boolean
- 功能概述: 检查给定的日期是否落在指定的范围内。
- 示例:
Typescript
isDateInRange(new Date(2023, 3, 15), [new Date(2023, 3, 1), new Date(2023, 3, 31)]) // 返回true对象
`6. getDaysBetween
- 参数:
-
: 字符串，表示第一个日期（格式如 "YYYY-MM-DD"）。
- dateString2: 字符串，表示第二个日期（格式同上）。- 返回值类型: 数字
- 功能概述: 计算两个日期字符串之间相隔的天数。如果日期1晚于日期2，则返回0；如果两者相同，返回1；否则返回实际天数差。
- 示例:
`Typescript
const daysDifference = this.getDaysBetween("2023-01-01", "2023-01-10");
console.log(daysDifference); // 输出: 9
`$3
1. exportExcel
- - 参数:
- - - datas: 二维数组，要导出的数据。
- fileName: 字符串，文件名。
- sheetNames: 一维数组，sheet名称列表。
- - 返回值类型: 无
- 功能概述: 导出Excel文件，支持多个sheet。
- 示例:
Typescript
this.exportExcel([[{name: "张三"}]], "employees.xlsx", ["Staff"]); // 导出员工信息Excel
`2. triggerDownload(url: string, filename: string)
- 功能: 该方法允许通过提供一个文件的URL和期望的文件名来触发文件下载。它内部通过创建一个隐藏的
标签，设置其href属性为文件URL并指定download属性来指定下载文件名，然后模拟点击这个标签来触发浏览器的下载行为。下载完成后，该标签会被移除以清理DOM，并通过revokeObjectURL方法释放创建的URL对象，防止内存泄漏。 - 参数:
-
url: 字符串，表示文件的下载地址。
- filename: 字符串，指定了下载时保存文件的名称（包含扩展名）。 - 示例:
`Typescript
const downloadUrl = "http://example.com/path/to/file.pdf";
this.triggerDownload(downloadUrl, "myFile.pdf");
`3. urlToFIle
- 参数:
-
: 字符串，下载内容的URL。
- headers: HttpHeaders，HTTP请求头，用于自定义请求。- 返回值类型: Promise
- 功能概述: 异步地从指定URL下载内容。如果内容类型是JSON，尝试解析JSON并抛出错误；如果是文件，则返回文件的URL。该方法适用于处理二进制数据的下载，并且能正确处理不同类型的响应内容。一般来说我们自己用的url是fid转的blob的本地路径，这里的示例是通义千问生的我懒得改了
- 示例:
`Typescript
try {
const fileUrl = await this.urlToFIle("http://example.com/document.pdf", headers);
console.log(fileUrl); // 输出文件的URL
} catch (error) {
console.error(error);
}
`$3
1. showMessage
- - 参数:
- - - type: 数字，消息类型。
- info: 字符串，消息内容。
- duration(可选): 数字，显示时长。
- - 返回值类型: 无
- 功能概述: 显示不同类型的提示消息。
- 示例:
Typescript
this.showMessage(1, "操作成功", 2000); // 显示2秒的成功提示
`2. showLoading 和 removeLoading
- - showLoading参数:
- - - loadingText: 字符串，加载提示文字。
- 返回值类型: 数字，消息ID。
- - removeLoading参数:
- - - id: 数字，之前调用 showLoading 返回的ID。
- - 功能概述: 控制加载状态提示的显示与移除。
- 示例:
Typescript
const loadingId = this.showLoading("正在加载...");
// 操作完成
this.removeLoading(loadingId);
`$3
1. structuralClone
- - 参数:
- - - obj: 任意类型，待克隆的对象。
- - 返回值类型: Promise，承诺返回深拷贝后的对象。
- 功能概述: 实现对象的深度克隆。
- 示例:
Typescript
const clonedObj = await this.structuralClone(originalObj);
`2. generateYears
- - 参数:
- - - startYearStr: 字符串，起始年份。
- endYearStr: 字符串，结束年份。
- - 返回值类型: 字符串数组
- 功能概述: 生成指定范围内的年份字符串数组。
- 示例:
Typescript
const years = this.generateYears("2000", "2010"); // ["2000", "2001", ..., "2010"]
`$3
1. random
- - 参数:
- - - x: 数字，随机字符串的长度。
- - 返回值类型: 字符串
- 功能概述: 生成指定长度的随机字符串。
- 示例:
Typescript
const randomStr = this.random(5); // 生成长度为5的随机字符串
`2. digitalToDegrees
- - 参数:
- - - digital: 数字，经纬度的小数形式。
- - 返回值类型: 字符串
- 功能概述: 将小数形式的经纬度转换为度分秒形式。
- 示例:
Typescript
const degrees = this.digitalToDegrees(109.86330555555556); // "109°51′47.9″"
`$3
1. mergeAdjacentRanges
- - 参数:
- - - periods: 二维数组，表示一系列时间段。
- - 返回值类型: 二维数组
- 功能概述: 合并相邻或重叠的时间段。
- 示例:
Typescript
const mergedPeriods = this.mergeAdjacentRanges([[1, 3], [2, 4], [5, 7]]);
// 返回 [[1, 4], [5, 7]]
`2. calculateAndRenderBlankRows
- - 参数:
- - - div: HTMLElement，表格容器。
- data: 二维数组，表格数据。
- singleRowHeight: 数字，单行高度。
- - 返回值类型: 一维数组，空白行数据。
- 功能概述: 根据容器高度和已有数据计算并生成空白行数据。
- 示例:
Typescript
const blankRows = this.calculateAndRenderBlankRows(containerElement, myData, 30); // 假设单行高度为30px
`3. verifyFields
- - 参数:
- - - obj:对象或者值
- regular 验证规则
- - 返回值类型:[是否符合规则，如果不符合的话返回的错误信息]。
- 功能概述: 对象字段值合法验证
- 注意：1、当obj为对象时,regular格式为{ aa:[0,/xx/,'提示xxxx'],bb:[] } ,
其中aa为obj的某个字段名，数组第一个为是否必填项0:非必填,1:必填,第二个是验证正则，第三个是错误后提示
当obj不是对象时，regular格式为 [0,/xx/,'提示xxxx']
js测试代码如下
javascript
var regu = {
vol: [1, RegVer.number, '库容数值不合法'],
hnnm: [1, RegVer.name, '河流名称非法'],
ns_wr_slco: [0, RegVer.number, ''],
tel: [0, RegVer.phone, '电话不合法'],
type:[1,/^[0-2]$/,'类型不合法']
};
var v = verifyFields(obj, regu);
if (!v[0]) {
console.log(v[1]);
} else {
console.log("success");
}
`$3
- 方法名: trimObj1 和 filterNull
- 参数和返回值类型因具体实现而异，主要用于对象处理，如去除空格、剔除非null值字段。
- 功能概述: 分别用于清理对象属性值的空格和移除值为null的属性。
$3
1. trimObj(obj: any)
- 功能: 对传入的对象中每一个字符串类型的属性值执行trim操作，去除前后空格。
- 示例:
Typescript
const data = { name: " 张三 ", description: "测试描述 " };
this.trimObj(data);
// data 现在变为 { name: "张三", description:描述" }
`2. trimObj1(obj: any)
- 功能: 该方法遍历对象中的每一个属性，如果属性值为字符串类型，则去除该字符串的前后空格及其中的换行符，使得字符串更加整洁。
- 示例:
Typescript
const myObj = { name: ' John Doe\n', bio: ' Developer \r\n'};
this.trimObj1(myObj);
// 结果: { name: 'John Doe', bio: 'Developer'}
`3. filterNull(obj: any)
- 功能: 此方法遍历对象的属性，检查其值是否为
，若是，则直接从对象中删除该属性，有助于清理对象中无用的 null 值属性，保持数据的纯净度。 - 示例:
`Typescript
const data = { id: 1, value: null, status: 'active' };
this.filterNull(data);
// 结果: { id: 1, status: 'active' }
``