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) { } 即可。

！！！注意事项！！！

需要自行在全局style.css/style.less中引入ant的样式！

实在是懒得研究怎么把ant样式引入到项目里了……

自行在style.css/style.less中引入ant的样式！

如下：（css的就换成css）

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

需要在全局style.css/style.less中加入以下内容

.mapboxgl-ctrl-bottom-left {
    display: none;
}

用来隐藏mapbox的水印。

使用示例

hzz-basic-map

    <hzz-basic-map style="width: 100%;height: 100%;"
    [mapToken]="'pk.e………………GWVumZLq7Hw'" [poiToken]="'111……………………0e26f'"
    [showTool]="false" [showMapSwitcher]="true" [mapSwitcherStyle]="{'top': '10px','right': '10px'}"
    [dependencePath]="baseUrl" [mapId]='"map1"'
    (mapLoaded)='planMapLoaded1($event)'></hzz-basic-map>

mapToken：mapbox的token；

poiToken：高德地图的poi的token；

dependencePath：依赖所在路径（需包括mapbox-gl.css,mapbox-gl.js,turf.min.js）

mapId：随便什么字符串

mapLoaded：地图加载完成后的事件

showTool：是否显示工具条

showMapSwitcher：是否显示地图切换工具（工具条上那个方方）

mapSwitcherStyle：地图切换工具（工具条上那个方方）的样式（主要用来调整它的位置）

theseAmapIsOpen：初始化打开的专题图层，是个数组，直接传名字，默认为空

hzz-search-box

<hzz-search-box [region]="ds.schRegion" [rivers]="ds.schRivers"
			[basins]="ds.schBasins" (paramChange)="ds.schChange($event)" (onSearch)="ds.search()"></hzz-search-box>

region、rivers、basins：搜索下拉框中的行政区划、河流、流域，每个节点都需要含有value、label这两个字段，用与显示与取值，叶子节点需有isLeaf=true

paramChange：搜索参数改变时调用的方法，用来更新下拉框中参数

onSearch：点击【搜索】后的事件

hzz-sand-pagination

	<hzz-sand-pagination [(pageIndex)]="index" (pageChange)="search()" [total]="total"></hzz-sand-pagination>

pageIndex：当前页码，可双向绑定

pageSize：一页的数据条数，默认10

total：总计数据条数

pageChange：翻页的回调函数

hzz-approval-line

    <hzz-approval-line [approvalArr]="someArr" [data]="fakeApproval"></hzz-approval-line>

采砂审批流程组件

approvalArr：默认为：

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 }

其中showLabel为true时，会显示下面那三行字，false则不显示。

data:要显示的审批流程数据，类似于这样的结构：

  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会显示在审批流程节点气泡下

stateFieldName：状态字段名称，默认state

regionFieldName：状态字段名称，默认region

personFieldName：状态字段名称，默认approPerson

dateFieldName：状态字段名称，默认approDate

hzz-big-pagination

<hzz-big-pagination [(pageIndex)]="index" (pageChange)="search()"></hzz-big-pagination>

用法和上面那个一样的，只是这个大一些，多了个跳转第几页

pageIndex：当前页码，可双向绑定

pageSize：一页的数据条数，默认10

total：总计数据条数

pageChange：翻页的回调函数

hzz-region-tree

<hzz-region-tree [regionTree]="region" [regionNote]="region_note" [selectedNode]="selectedRegion" [search]="keyword"
    (titleClick)="titleClicked($event)" [isExpandOnClick]="false"></hzz-region-tree>

regionTree：区域树数据

regionNote：行政区划名后显示的附加信息，类似如下

  region_note: any = {
    '5101': '我是成都市',
    '510106': '我是金牛desu'
  }

selectedNode：选中的行政区划

search：搜索关键字（没有就不要这个）

titleClick：点击标题的回调函数

isExpandOnClick：点击标题是否展开，true为点击标题展开，直到县级点击才可选中，false为点击标题选中的同时切换展开收缩状态

initOpenPac：从外部传入的展开并选中的pac

hzz-placeholder-pic

<hzz-placeholder-pic [lineOne]="'找不到就算了'" [lineTwo]="'我也没办法你看着办吧'" [picSize]="200"></hzz-placeholder-pic>

lineOne：第一行文字（加粗的那行）

lineTwo：第二行文字（下面灰色的那行）

picSize：图片宽高(单位为px)

common-data.service

一些常用的方法，具体参考注释，这里的是通义千问整理的，有些不那么准确。

日期与时间处理

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 对象。
  • 示例:

const newDate = this.dateAddYear("2025", new Date()); // 返回2025年当前日期的Date对象

5. isDateInRange

• 参数:

• • date: {any} 需要检查的日期。
  • range: {any[]} 一个表示范围的数组，包含两个元素，分别代表范围的起始和结束日期（应确保范围的起始日期小于或等于结束日期）。

• • 返回值类型:boolean
  • 功能概述: 检查给定的日期是否落在指定的范围内。
  • 示例:

isDateInRange(new Date(2023, 3, 15), [new Date(2023, 3, 1), new Date(2023, 3, 31)]) // 返回true对象

6. getDaysBetween

• 参数:

  • dateString1: 字符串，表示第一个日期（格式如 "YYYY-MM-DD"）。
  • dateString2: 字符串，表示第二个日期（格式同上）。

• 返回值类型: 数字

• 功能概述: 计算两个日期字符串之间相隔的天数。如果日期1晚于日期2，则返回0；如果两者相同，返回1；否则返回实际天数差。

• 示例:

const daysDifference = this.getDaysBetween("2023-01-01", "2023-01-10");
console.log(daysDifference); // 输出: 9

文件操作与下载

1. exportExcel

• • 参数:

• • • datas: 二维数组，要导出的数据。
    • fileName: 字符串，文件名。
    • sheetNames: 一维数组，sheet名称列表。

• • 返回值类型: 无
  • 功能概述: 导出Excel文件，支持多个sheet。
  • 示例:

this.exportExcel([[{name: "张三"}]], "employees.xlsx", ["Staff"]); // 导出员工信息Excel

2. triggerDownload(url: string, filename: string)

   • 功能: 该方法允许通过提供一个文件的URL和期望的文件名来触发文件下载。它内部通过创建一个隐藏的<a>标签，设置其href属性为文件URL并指定download属性来指定下载文件名，然后模拟点击这个标签来触发浏览器的下载行为。下载完成后，该标签会被移除以清理DOM，并通过revokeObjectURL方法释放创建的URL对象，防止内存泄漏。

   • 参数:

     • url: 字符串，表示文件的下载地址。
     • filename: 字符串，指定了下载时保存文件的名称（包含扩展名）。

   • 示例:

const downloadUrl = "http://example.com/path/to/file.pdf";
this.triggerDownload(downloadUrl, "myFile.pdf");

3. urlToFIle

• 参数:

  • downloadurl: 字符串，下载内容的URL。
  • headers: HttpHeaders，HTTP请求头，用于自定义请求。

• 返回值类型: Promise

• 功能概述: 异步地从指定URL下载内容。如果内容类型是JSON，尝试解析JSON并抛出错误；如果是文件，则返回文件的URL。该方法适用于处理二进制数据的下载，并且能正确处理不同类型的响应内容。一般来说我们自己用的url是fid转的blob的本地路径，这里的示例是通义千问生的我懒得改了

• 示例:

try {
  const fileUrl = await this.urlToFIle("http://example.com/document.pdf", headers);
  console.log(fileUrl); // 输出文件的URL
} catch (error) {
  console.error(error);
}

消息与UI操作

1. showMessage

• • 参数:

• • • type: 数字，消息类型。
    • info: 字符串，消息内容。
    • duration(可选): 数字，显示时长。

• • 返回值类型: 无
  • 功能概述: 显示不同类型的提示消息。
  • 示例:

this.showMessage(1, "操作成功", 2000); // 显示2秒的成功提示

2. showLoading 和 removeLoading

• • showLoading参数:

• • • loadingText: 字符串，加载提示文字。
    • 返回值类型: 数字，消息ID。

• • removeLoading参数:

• • • id: 数字，之前调用 showLoading 返回的ID。

• • 功能概述: 控制加载状态提示的显示与移除。
  • 示例:

const loadingId = this.showLoading("正在加载...");
// 操作完成
this.removeLoading(loadingId);

数据处理与验证

1. structuralClone

• • 参数:

• • • obj: 任意类型，待克隆的对象。

• • 返回值类型: Promise，承诺返回深拷贝后的对象。
  • 功能概述: 实现对象的深度克隆。
  • 示例:

const clonedObj = await this.structuralClone(originalObj);

2. generateYears

• • 参数:

• • • startYearStr: 字符串，起始年份。
    • endYearStr: 字符串，结束年份。

• • 返回值类型: 字符串数组
  • 功能概述: 生成指定范围内的年份字符串数组。
  • 示例:

const years = this.generateYears("2000", "2010"); // ["2000", "2001", ..., "2010"]

数学与字符串操作

1. random

• • 参数:

• • • x: 数字，随机字符串的长度。

• • 返回值类型: 字符串
  • 功能概述: 生成指定长度的随机字符串。
  • 示例:

const randomStr = this.random(5); // 生成长度为5的随机字符串

2. digitalToDegrees

• • 参数:

• • • digital: 数字，经纬度的小数形式。

• • 返回值类型: 字符串
  • 功能概述: 将小数形式的经纬度转换为度分秒形式。
  • 示例:

const degrees = this.digitalToDegrees(109.86330555555556); // "109°51′47.9″"

其他实用功能

1. mergeAdjacentRanges

• • 参数:

• • • periods: 二维数组，表示一系列时间段。

• • 返回值类型: 二维数组
  • 功能概述: 合并相邻或重叠的时间段。
  • 示例:

const mergedPeriods = this.mergeAdjacentRanges([[1, 3], [2, 4], [5, 7]]);
// 返回 [[1, 4], [5, 7]]

2. calculateAndRenderBlankRows

• • 参数:

• • • div: HTMLElement，表格容器。
    • data: 二维数组，表格数据。
    • singleRowHeight: 数字，单行高度。

• • 返回值类型: 一维数组，空白行数据。
  • 功能概述: 根据容器高度和已有数据计算并生成空白行数据。
  • 示例:

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测试代码如下

  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");
      }

trimObj1 & filterNull

• 方法名: trimObj1 和 filterNull
• 参数和返回值类型因具体实现而异，主要用于对象处理，如去除空格、剔除非null值字段。
• 功能概述: 分别用于清理对象属性值的空格和移除值为null的属性。

字符串处理

1. trimObj(obj: any)

   • 功能: 对传入的对象中每一个字符串类型的属性值执行trim操作，去除前后空格。

   • 示例:

const data = { name: "  张三  ", description: "测试描述  " };
this.trimObj(data);
// data 现在变为 { name: "张三", description:描述" }

2. trimObj1(obj: any)

   • 功能: 该方法遍历对象中的每一个属性，如果属性值为字符串类型，则去除该字符串的前后空格及其中的换行符，使得字符串更加整洁。

   • 示例:

const myObj = { name: ' John Doe\n', bio: ' Developer \r\n'};
this.trimObj1(myObj);
// 结果: { name: 'John Doe', bio: 'Developer'}

3. filterNull(obj: any)

   • 功能: 此方法遍历对象的属性，检查其值是否为 null，若是，则直接从对象中删除该属性，有助于清理对象中无用的 null 值属性，保持数据的纯净度。

   • 示例:

const data = { id: 1, value: null, status: 'active' };
this.filterNull(data);
// 结果: { id: 1, status: 'active' }