169 Commits

Author SHA1 Message Date
guanj
1abd7dbc45 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-07-21 15:10:58 +08:00
guanj
472babe0ce 修改全局悬浮框添加最大高度 2026-07-21 15:10:48 +08:00
8054b44e88 适配辽宁现场调整 2026-07-21 10:45:50 +08:00
guanj
5eb5a01b50 调整电网一张图污染水平评估 2026-07-20 10:04:02 +08:00
guanj
e77c57f8d0 修改辽宁测试问题 2026-07-20 09:30:48 +08:00
guanj
22011188a1 修改辽宁全景展示 2026-07-17 16:13:49 +08:00
guanj
c72ba3e5db 添加一类监测点字段 2026-07-17 11:27:40 +08:00
guanj
7f1c3e31c0 监测点评估添加字段 2026-07-17 11:17:38 +08:00
guanj
6c70a776a0 列设置添加缓存
调整监测点台账导出id重复问题
2026-07-17 08:50:25 +08:00
guanj
dc3b3cfc74 全局下拉框添加filterable属性 2026-07-15 09:21:35 +08:00
guanj
04c5eb7185 调整退出问题 2026-07-14 14:49:10 +08:00
guanj
d0d62ab0af 修改菜单树无法展开问题 2026-07-14 14:39:59 +08:00
guanj
b3d671a93e 调整前端两套互不连通的 HTTP 请求层并存、两套布局框架并存、两套 Pinia 实例并存问题 2026-07-10 14:52:29 +08:00
guanj
888b8d1bf4 修改点击列问题 2026-07-10 08:57:37 +08:00
guanj
ee9cd057b8 优化菜单切换导致浏览器刷新问题 2026-07-09 15:40:56 +08:00
guanj
8bca4191f2 调整代码 2026-07-09 15:26:01 +08:00
guanj
69e6a1f93f 调整 2026-07-09 14:41:56 +08:00
guanj
71df1ac4be 修改冲突 2026-07-09 13:59:02 +08:00
guanj
cd2be0f4aa Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/views/pqs/business/terminal/terminaCkeck/index.vue
2026-07-09 13:57:58 +08:00
guanj
855c569535 全局表格添加列配置功能 2026-07-09 13:54:18 +08:00
6a84d28101 添加辽宁周期检测功能 2026-07-09 11:41:01 +08:00
guanj
1a69be62a0 修改监测点信息 2026-07-09 11:08:56 +08:00
guanj
02caca969e 修改用户性质 2026-07-09 10:33:22 +08:00
guanj
3f1af5e4cc 监测点信息添加终端型号 2026-07-08 16:08:02 +08:00
guanj
88e9812d5f 联调周期监测 2026-07-08 14:37:19 +08:00
guanj
83a827ba5b 修改文件上传问题 2026-07-08 11:14:32 +08:00
40b1092718 添加周期 2026-07-08 09:21:59 +08:00
guanj
83a1128884 用户管理添加监测报告,评估报告 2026-07-07 13:52:53 +08:00
1a44a2f9e0 添加周期 2026-07-07 10:18:22 +08:00
guanj
5044c88946 优化全景展示页面 2026-07-07 10:15:33 +08:00
guanj
51a862ed00 修改进程显示 2026-07-06 10:58:02 +08:00
guanj
1ca8e536dd 修改限值显示问题 2026-07-06 10:41:33 +08:00
guanj
2445cfbff3 修改辽宁全景展示问题 2026-07-06 10:12:51 +08:00
guanj
21ac0611cd 修改地图api 2026-06-29 14:41:12 +08:00
guanj
ff841cfa93 修改Socket路径问题 2026-06-26 10:17:43 +08:00
guanj
01cc29c8b2 修改电网一张图 2026-06-24 09:57:48 +08:00
guanj
a324f7afcf 修改算法库拖动问题 2026-06-23 21:36:43 +08:00
guanj
4272f7756e 修改配置 2026-06-23 21:28:35 +08:00
guanj
070e404bbb 修改辽宁反馈问题 2026-06-23 21:27:15 +08:00
ed60e2b7f3 台账新增修改添加objName 2026-06-23 16:09:41 +08:00
7785d4f708 台账新增修改添加objName 2026-06-23 15:12:58 +08:00
0c64711dd8 辽宁页面调整 2026-06-22 15:50:31 +08:00
guanj
d85dba8bf8 修改补召 2026-06-16 09:56:38 +08:00
guanj
56b8158f4a 优化波形 2026-06-16 08:36:22 +08:00
cdf
765507398e 辽宁单点登录 2026-06-15 17:57:14 +08:00
cdf
9224ea17b8 区域报告调整 2026-06-07 15:56:31 +08:00
cdf
dc08f7d1ac 辽宁统一认证登录 2026-06-03 17:41:37 +08:00
cdf
1652b5faf8 辽宁统一认证登录 2026-06-03 15:54:15 +08:00
guanj
fae2a7d735 修改辽宁嵌入 2026-06-02 16:33:08 +08:00
guanj
bf3a99cbf3 提交代码 2026-06-02 16:30:29 +08:00
guanj
2e7c0b7f44 修改辽宁免登录 2026-06-02 09:30:10 +08:00
guanj
98e0f9de02 修改关键字 2026-05-28 19:28:12 +08:00
guanj
21756e05d4 修改地图 2026-05-27 10:47:31 +08:00
guanj
abfdf29a38 修改页面样式 调整查询条件 2026-05-22 09:58:07 +08:00
guanj
120892808b 提交代码 2026-04-25 15:21:53 +08:00
guanj
0f5cb1d3c5 提交代码 2026-04-09 11:44:06 +08:00
cdf
dbaa42ff7e 通用台账查询页面调整 2026-04-09 11:42:54 +08:00
guanj
48472bdb85 微调 2026-04-03 14:48:10 +08:00
guanj
fafc5f82c4 修改itic点击波形图 2026-03-26 14:53:34 +08:00
cdf
93ee7e4034 通用台账查询页面调整 2026-03-23 09:19:43 +08:00
guanj
7d2ce51510 修改问题 2026-03-17 08:43:51 +08:00
guanj
9202da17f1 微调 2026-03-05 15:42:15 +08:00
guanj
30eddd0572 修改用户台账管理接口 2026-03-05 11:08:36 +08:00
sjl
15bd1ac6d2 事件报告导出 2026-03-02 15:35:29 +08:00
sjl
f5c76c1b7a 报告模版配置 2026-02-27 14:46:19 +08:00
sjl
b25515b5db 系统相关配置 2026-02-27 08:49:57 +08:00
guanj
bfa061fb03 冀北数据总览添加导出功能 2026-02-06 14:45:15 +08:00
sjl
15e3d4aec8 微调 2026-02-06 10:10:24 +08:00
sjl
59489aaafa 微调 2026-01-30 15:01:19 +08:00
guanj
5d0421dd40 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-29 14:10:32 +08:00
guanj
6d7ef7cf5d 修改终端型号 2026-01-29 14:10:18 +08:00
sjl
8d9ccf97a7 前置管理分配终端 2026-01-29 13:44:12 +08:00
sjl
7188e3e681 微调 2026-01-28 14:33:42 +08:00
sjl
a9fc77eb8b 区域概览未关联暂降次数和已关联处理事件合并 2026-01-28 10:33:59 +08:00
sjl
87af11288d 微调 2026-01-28 08:45:38 +08:00
sjl
0763187744 前置管理重启,稳态统计报表重置 2026-01-23 13:46:00 +08:00
sjl
ae641604ba 区域概览表格sarfi9总计 2026-01-23 09:20:57 +08:00
sjl
564e6ef4ab Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/views/pqs/voltageSags/Region/components/echart.vue
2026-01-23 09:07:11 +08:00
sjl
c84c5dae3b 微调 2026-01-23 09:04:08 +08:00
guanj
c902dabb73 微调 2026-01-23 09:03:37 +08:00
guanj
8d1497032f Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-23 08:51:12 +08:00
guanj
6aeac753ef 修改触发类型 2026-01-23 08:51:03 +08:00
sjl
56d65a6c17 9000系统测试用例调整 2026-01-22 16:15:33 +08:00
sjl
8b356c87a3 微调 2026-01-20 14:33:06 +08:00
guanj
c0feeaee7b 删除海南备份技术监督 2026-01-20 14:25:24 +08:00
guanj
6a112c8ae2 修改表格操作列 2026-01-20 14:18:41 +08:00
guanj
a19952b771 调整云南曲靖问题 2026-01-16 14:03:40 +08:00
guanj
0b76347853 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-12 14:49:30 +08:00
guanj
379951699d 修改日志 2026-01-12 14:49:21 +08:00
sjl
003737cf52 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-12 14:02:06 +08:00
sjl
20e6d3719a 微调 2026-01-12 14:01:43 +08:00
guanj
77617412dd Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue
修改冲突
2026-01-12 14:01:09 +08:00
guanj
68ea43c42b 修改在线监测数据问题 2026-01-12 13:56:49 +08:00
sjl
e65df4daad Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue
2026-01-12 11:24:34 +08:00
sjl
136248eec2 角色用户管理,区域概览 2026-01-12 11:22:42 +08:00
guanj
bfafb6dc5b 修改曲靖问题 2026-01-12 11:19:05 +08:00
sjl
0b91027da4 微调 2026-01-09 11:21:07 +08:00
guanj
22aeb0bf4c Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-09 11:20:10 +08:00
guanj
87bc9d9017 添加绑定监测点筛选 2026-01-09 11:20:02 +08:00
sjl
43d4d37cd0 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-09 10:45:07 +08:00
sjl
ad1528e53b 导出日志 2026-01-09 10:44:35 +08:00
guanj
c1e36440e7 修改实时数据 2026-01-09 10:40:55 +08:00
guanj
16f5213d7a Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-09 08:47:18 +08:00
guanj
ab891e6125 修改角色管理页面 2026-01-09 08:47:07 +08:00
sjl
36c8ab87a2 微调 2026-01-08 15:17:19 +08:00
guanj
6c3037f19b 修改云南曲靖项目 2026-01-08 14:52:01 +08:00
sjl
54517c0d5f 稳态合格率,畸变率表格调整 2026-01-08 14:50:29 +08:00
guanj
715cdb892f 修改树 2026-01-07 08:38:45 +08:00
sjl
953b96fe05 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/components/tree/pqs/bearingTree.vue
#	src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
2026-01-06 08:38:11 +08:00
sjl
cb19fef4c6 微调 2026-01-06 08:35:36 +08:00
guanj
98c887b79d 添加云南曲靖打包命令修改5层树逻辑 2026-01-05 10:13:53 +08:00
guanj
fd09e24cf0 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2026-01-04 09:01:56 +08:00
guanj
2a11891988 正则替换[] 2026-01-04 09:01:32 +08:00
sjl
e7d90c3a73 微调 2026-01-04 08:39:17 +08:00
sjl
72b1f39814 预告警单 2025-12-31 08:36:14 +08:00
sjl
38028b5cb0 预告警查看报告 2025-12-30 10:16:56 +08:00
sjl
409999b37b Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
# Conflicts:
#	src/components/PreviewFile/index.vue
2025-12-30 10:05:00 +08:00
sjl
0fc7b528d4 微调 2025-12-30 10:02:01 +08:00
guanj
06764c073a 修改算法库 2025-12-29 20:46:24 +08:00
guanj
26ff8087c6 修改冀北现场问题 2025-12-29 19:44:17 +08:00
sjl
83e57c92b4 区域,海南不调getLastData 2025-12-26 11:16:48 +08:00
sjl
a9245abb5c 稳态数据分析趋势图值显示 2025-12-25 18:56:57 +08:00
sjl
7a7c584217 微调 2025-12-25 18:21:25 +08:00
sjl
bf3d033f39 预览小眼睛放开 2025-12-25 15:11:52 +08:00
guanj
42ce7aec5a Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-12-25 13:19:37 +08:00
guanj
17589e30da 修改文件预览 2025-12-25 13:19:24 +08:00
sjl
eb38fdd601 稳态数据调整 2025-12-25 13:17:49 +08:00
sjl
454d612a32 完整性图表 2025-12-24 16:06:03 +08:00
sjl
4dde761784 暂态事件列表调整 2025-12-24 13:17:49 +08:00
GGJ
5f4f75d9dd 修改稳态告警统计,异常数据清洗详情 2025-12-24 11:22:57 +08:00
sjl
cf7e5fa991 数据完整性图表显示 2025-12-24 11:19:41 +08:00
sjl
4f0dc512e2 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-12-24 10:42:23 +08:00
sjl
a77b153ac8 微调 2025-12-24 10:42:17 +08:00
sjl
dbb6a9f72b 修改部分预览,数据完整性,暂态列表等bug调整 2025-12-24 10:41:04 +08:00
GGJ
9567fe1295 添加海南打包命令 2025-12-24 10:38:27 +08:00
sjl
a52021572a 解决下载路径为空 2025-12-22 15:13:43 +08:00
GGJ
d69a6e1e5d Merge branch 'master' of http://pqmcc.com:3000/Web/admin-sjzx
# Conflicts:
#	src/views/pqs/supervise/technology/feedbackPopup.vue
2025-12-19 14:08:17 +08:00
GGJ
a67535abbf 修改打包报错 2025-12-19 14:05:56 +08:00
sjl
dffc735edb 待办任务提交审核返回刷新 2025-12-19 13:27:18 +08:00
sjl
38806367b4 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-12-19 13:12:46 +08:00
sjl
6f770aa91d 修改文件查看只有冀北可行 2025-12-19 13:12:38 +08:00
GGJ
dc32cc3bb7 修改冀北现场反馈问题 2025-12-19 11:58:26 +08:00
sjl
d64d18f330 微调 2025-12-19 10:56:30 +08:00
sjl
909f43e257 电能质量异常管理,谐波测试计划管理bug修改 2025-12-18 16:09:44 +08:00
GGJ
92aa66436e 修改冀北现场问题 2025-12-17 09:22:19 +08:00
GGJ
264f33302f 修改冀北问题 2025-12-16 13:38:12 +08:00
sjl
7b9f5302d0 流程图时间和结果,流程审核表单默认勾选 2025-12-16 11:15:27 +08:00
sjl
72d836020b 编辑打开时,干扰源类型决定类别 2025-12-15 17:41:49 +08:00
sjl
67efef738a 干扰源接入,终端检测,台账管理bug修复 2025-12-15 16:19:33 +08:00
GGJ
6918611d06 添加上传全局提示 2025-12-15 10:35:34 +08:00
GGJ
9f5b2ecc46 修改冀北现场反馈问题 2025-12-15 09:33:34 +08:00
sjl
d30b8247cf 微调 2025-12-15 09:24:25 +08:00
GGJ
0b61c4b7ba 修改冀北现场问题 2025-12-14 12:47:53 +08:00
sjl
ff2b9db7b8 我的任务,干扰源分析,常态化干扰源用户管理,终端检测,bug调整 2025-12-12 15:44:56 +08:00
sjl
289900f9ff Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-12-12 09:29:16 +08:00
sjl
e87d05c587 微调 2025-12-12 09:29:09 +08:00
GGJ
46c55d48ec 修改冀北现场问题 2025-12-12 09:26:56 +08:00
GGJ
b36f765d07 修改技术监督 2025-12-11 15:03:11 +08:00
guanj
0fe2d2b911 修改冀北问题 2025-12-09 20:04:55 +08:00
guanj
8c41a8fc77 冀北问题修改 2025-12-08 16:28:34 +08:00
guanj
c779bec0cb 调整现场部署报错问题 2025-12-02 15:23:56 +08:00
guanj
5443996fa9 微调 2025-12-01 13:21:24 +08:00
guanj
dac950c4c1 修改冀北页面 2025-12-01 13:19:18 +08:00
guanj
a19cbf233e 修改冀北问题 2025-11-28 16:27:52 +08:00
guanj
028fd44490 调整代码 2025-11-20 15:12:01 +08:00
sjl
0a52d1afae 监测点框位置,tab切换缓存 2025-11-14 08:42:07 +08:00
sjl
e655611954 微调 2025-11-12 16:10:46 +08:00
sjl
b982cee382 微调 2025-11-12 15:42:31 +08:00
sjl
d6336f7ba8 污染值报表 2025-11-12 13:23:15 +08:00
713 changed files with 104522 additions and 113446 deletions

6
.env.LN Normal file
View File

@@ -0,0 +1,6 @@
# 辽宁嵌入
NODE_ENV = LN
VITE_NAME="LN"
# 电网一张图 地图图层
VITE_NARIMAP=null
VITE_NRGISCOMMON=null

6
.env.LNqr Normal file
View File

@@ -0,0 +1,6 @@
# 辽宁嵌入
NODE_ENV = LNqr
VITE_NAME="LNqr"
# 电网一张图 地图图层
VITE_NARIMAP=null
VITE_NRGISCOMMON=null

5
.env.hainan Normal file
View File

@@ -0,0 +1,5 @@
NODE_ENV = hainan
VITE_NAME="hainan"
# 电网一张图 地图图层
VITE_NARIMAP=null
VITE_NRGISCOMMON=null

6
.env.qujing Normal file
View File

@@ -0,0 +1,6 @@
# 云南曲靖
NODE_ENV = qujing
VITE_NAME="qujing"
# 电网一张图 地图图层
VITE_NARIMAP=null
VITE_NRGISCOMMON=null

156
README.md
View File

@@ -1,78 +1,78 @@
#### 介绍
```
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件请查看script setup文档了解更多信息。
```
#### 安装依赖&运行项目
> node version:^18.17.0 || >=20.5.0"
```shell
#项目使用pnpm包管理器
npm i pnpm -g
#安装依赖
pnpm i
#运行项目
npm run dev
#冀北现场启动命令 区分是否加载现场电网一张图内网api
npm run dev:jibei
#去除后台所有模块名 如除/xxxx-boot
npm run dev:removeMode
#因海南和冀北技术监督不同 通过修改文件的方式来区分
#海南打包 需要吧pqs目录下supervise_hn 文件夹改成supervise 原文件改成supervise_jb
#冀北打包 需要吧pqs目录下supervise_jb 文件夹改成supervise 原文件改成supervise_hn
```
#### 页面编写-示例
```
基础页面写法请查看`src/template`下的readme.md
```
#### 开发规范
> 初衷:养成合理的习惯,精力留在技术调研、业务开发中。
>
> 常见点如下描述,更多的规范待前端开发人员有时间后,慢慢丰富。
- 命名风格:所有的包(文件夹)、文件名以小驼峰的风格命名,比如 xxxAaa禁止 XxxAaa 或者 xxx-aaa。
- 命名语义:禁止中文命名或拼音,英文命名借用下工具,稍微准确一点,不要与实际业务相差太远。
- 功能组件创建风格:以**功能名称**命名文件夹,每个功能下以**index.vue**作为该功能的组件入口。正确示例参考:/src/views/auth/menu/index.vue。
![组件层级图](./src/assets/readme/moduleLevel.png)
- todo...:待后续补充。
#### 开发助手
##### 1、表格系列
- 页面表格以及表格页面按钮的弹出等功能参考:/views/pqs/voltageSags/sagGovern/index.vue
- 表格中需要替换数据:
```js
// 通过formatter函数返回实际需要返回的值
{
title: '数据来源', field: 'dataSource', minWidth: '130',
formatter: (row: any) => {
return row.dataSource == 0 ? '离线导入' : '监测点同步'
}
}****
```
##### 2、样式系列
- 获取当前主体的高度import { mainHeight } from '@/utils/layout'
- 弹框内输入框长度设置 1 行 1 个 class="form-one" 1 行 2 个 class="form-two"
#### 依赖变更记录
- 2024-04-25 新增 vform3by 洪圣文,用于页面表单设计保存为 json命令pnpm i vform3-builds
#### 介绍
```
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件请查看script setup文档了解更多信息。
```
#### 安装依赖&运行项目
> node version:^18.17.0 || >=20.5.0"
```shell
#项目使用pnpm包管理器
npm i pnpm -g
#安装依赖
pnpm i
#运行项目
npm run dev
#jb现场启动命令 区分是否加载现场电网一张图内网api
npm run dev:jibei
#去除后台所有模块名 如除/xxxx-boot
npm run dev:removeMode
#因海南和jb技术监督不同 通过修改文件的方式来区分
#海南打包 需要吧pqs目录下supervise_hn 文件夹改成supervise 原文件改成supervise_jb
#jb打包 需要吧pqs目录下supervise_jb 文件夹改成supervise 原文件改成supervise_hn
```
#### 页面编写-示例
```
基础页面写法请查看`src/template`下的readme.md
```
#### 开发规范
> 初衷:养成合理的习惯,精力留在技术调研、业务开发中。
>
> 常见点如下描述,更多的规范待前端开发人员有时间后,慢慢丰富。
- 命名风格:所有的包(文件夹)、文件名以小驼峰的风格命名,比如 xxxAaa禁止 XxxAaa 或者 xxx-aaa。
- 命名语义:禁止中文命名或拼音,英文命名借用下工具,稍微准确一点,不要与实际业务相差太远。
- 功能组件创建风格:以**功能名称**命名文件夹,每个功能下以**index.vue**作为该功能的组件入口。正确示例参考:/src/views/auth/menu/index.vue。
![组件层级图](./src/assets/readme/moduleLevel.png)
- todo...:待后续补充。
#### 开发助手
##### 1、表格系列
- 页面表格以及表格页面按钮的弹出等功能参考:/views/pqs/voltageSags/sagGovern/index.vue
- 表格中需要替换数据:
```js
// 通过formatter函数返回实际需要返回的值
{
title: '数据来源', field: 'dataSource', minWidth: '130',
formatter: (row: any) => {
return row.dataSource == 0 ? '离线导入' : '监测点同步'
}
}****
```
##### 2、样式系列
- 获取当前主体的高度import { mainHeight } from '@/utils/layout'
- 弹框内输入框长度设置 1 行 1 个 class="form-one" 1 行 2 个 class="form-two"
#### 依赖变更记录
- 2024-04-25 新增 vform3by 洪圣文,用于页面表单设计保存为 json命令pnpm i vform3-builds

View File

@@ -15,7 +15,7 @@
<script src="/static/luckysheet/plugin.js"></script>
<script src="/static/luckysheet/luckysheet.umd.js"></script>
<!-- 冀北地图 -->
<!-- jb地图 -->
<!--引入样式文件-->
<script src="%VITE_NARIMAP%"></script>
<!-- <script src="%VITE_NRGISCOMMON%"></script> -->

View File

@@ -1,99 +1,108 @@
{
"name": "canneng-admin",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --mode dev",
"dev:jibei": "vite --mode jibei",
"dev:removeMode": "vite --mode removeMode",
"build": "vite build --mode dev",
"build:jibei": "vite build --mode jibei",
"build:removeMode": "vite build --mode removeMode",
"preview": "vite preview"
},
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@element-plus/icons-vue": "^2.3.1",
"@form-create/designer": "^3.1.3",
"@form-create/element-ui": "^3.1.24",
"@fortawesome/fontawesome-free": "^6.5.1",
"@kjgl77/datav-vue3": "^1.7.4",
"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.8",
"@vue-office/pdf": "^2.0.2",
"@vueuse/core": "^10.7.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"@wangeditor/plugin-formula": "^1.0.11",
"axios": "^1.6.2",
"bpmn-js": "8.9.0",
"bpmn-js-properties-panel": "0.46.0",
"bpmn-js-token-simulation": "^0.10.0",
"bpmn-moddle": "^6.0.0",
"camunda-bpmn-moddle": "^7.0.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"diagram-js": "^11.4.1",
"diagram-js-minimap": "^2.0.4",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"echarts4": "npm:echarts@^4.9.0",
"element-plus": "^2.9.11",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"grid-layout-plus": "^1.1.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"js-pinyin": "^0.2.5",
"jsencrypt": "^3.3.2",
"katex": "^0.16.11",
"less": "^4.2.0",
"lodash-es": "^4.17.21",
"luckyexcel": "^1.0.1",
"luckysheet": "^2.1.13",
"mathjax": "^3.2.2",
"min-dash": "^4.2.1",
"mitt": "^3.0.1",
"mqtt": "^5.13.3",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"qs": "^6.12.0",
"screenfull": "^6.0.2",
"splitpanes": "^3.1.5",
"steady-xml": "0.1.0",
"svg-pan-zoom": "^3.6.2",
"use-element-plus-theme": "^0.0.5",
"vexip-ui": "^2.3.28",
"vue": "^3.3.11",
"vue-baidu-map-3x": "^1.0.35",
"vue-baidu-map-offline": "^1.0.7",
"vue-demi": "^0.14.8",
"vue-draggable-resizable": "3.0.0-beta.2",
"vue-i18n": "9.10.2",
"vue-katex": "^0.5.0",
"vue-router": "4",
"vue-types": "^5.1.1",
"vxe-table": "^4.5.17",
"vxe-table-plugin-export-xlsx": "^4.0.1",
"web-storage-cache": "^1.1.1",
"xe-utils": "^3.5.14",
"yarn": "^1.22.22"
},
"devDependencies": {
"@purge-icons/generated": "^0.9.0",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.10.5",
"@types/splitpanes": "^2.2.6",
"@vitejs/plugin-vue": "^4.5.2",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"sass": "^1.69.5",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.16.7",
"vite": "^5.0.8",
"vite-plugin-mkcert": "^1.17.3",
"vue-tsc": "^1.8.25"
}
"name": "canneng-admin",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --mode dev",
"dev:jibei": "vite --mode jibei",
"dev:hainan": "vite --mode hainan",
"dev:qujing": "vite --mode qujing",
"dev:LN": "vite --mode LN",
"dev:LNqr": "vite --mode LNqr",
"dev:removeMode": "vite --mode removeMode",
"build": "vite build --mode dev",
"build:jibei": "vite build --mode jibei",
"build:hainan": "vite build --mode hainan",
"build:qujing": "vite build --mode qujing",
"build:LN": "vite build --mode LN",
"build:LNqr": "vite build --mode LNqr",
"build:removeMode": "vite build --mode removeMode",
"preview": "vite preview"
},
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@element-plus/icons-vue": "^2.3.1",
"@form-create/designer": "^3.1.3",
"@form-create/element-ui": "^3.1.24",
"@fortawesome/fontawesome-free": "^6.5.1",
"@kjgl77/datav-vue3": "^1.7.4",
"@vue-office/docx": "^1.6.3",
"@vue-office/excel": "^1.7.8",
"@vue-office/pdf": "^2.0.2",
"@vueuse/core": "^10.7.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"@wangeditor/plugin-formula": "^1.0.11",
"axios": "^1.6.2",
"bpmn-js": "8.9.0",
"bpmn-js-properties-panel": "0.46.0",
"bpmn-js-token-simulation": "^0.10.0",
"bpmn-moddle": "^6.0.0",
"camunda-bpmn-moddle": "^7.0.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"diagram-js": "^11.4.1",
"diagram-js-minimap": "^2.0.4",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"echarts4": "npm:echarts@^4.9.0",
"element-plus": "^2.9.11",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"grid-layout-plus": "^1.1.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"js-pinyin": "^0.2.5",
"jsencrypt": "^3.3.2",
"katex": "^0.16.11",
"less": "^4.2.0",
"lodash-es": "^4.17.21",
"luckyexcel": "^1.0.1",
"luckysheet": "^2.1.13",
"mathjax": "^3.2.2",
"min-dash": "^4.2.1",
"mitt": "^3.0.1",
"mqtt": "^5.13.3",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"qs": "^6.12.0",
"screenfull": "^6.0.2",
"splitpanes": "^3.1.5",
"steady-xml": "0.1.0",
"svg-pan-zoom": "^3.6.2",
"use-element-plus-theme": "^0.0.5",
"vexip-ui": "^2.3.28",
"vue": "^3.3.11",
"vue-baidu-map-3x": "^1.0.35",
"vue-baidu-map-offline": "^1.0.7",
"vue-demi": "^0.14.8",
"vue-draggable-resizable": "3.0.0-beta.2",
"vue-i18n": "9.10.2",
"vue-katex": "^0.5.0",
"vue-router": "4",
"vue-types": "^5.1.1",
"vxe-pc-ui": "~4.15.19",
"vxe-table": "^4.19.22",
"vxe-table-plugin-export-xlsx": "^4.0.7",
"web-storage-cache": "^1.1.1",
"xe-utils": "^3.5.14",
"yarn": "^1.22.22"
},
"devDependencies": {
"@purge-icons/generated": "^0.9.0",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.10.5",
"@types/splitpanes": "^2.2.6",
"@vitejs/plugin-vue": "^4.5.2",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"sass": "^1.69.5",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.16.7",
"vite": "^5.0.8",
"vite-plugin-mkcert": "^1.17.3",
"vue-tsc": "^1.8.25"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/favicon3.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/favicon4.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -9,14 +9,20 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import useSetTheme from '@/utils/setTheme'
import { onMounted } from 'vue'
useSetTheme()
onMounted(async () => {
const fetchMqttUrl = async () => {
const response = await fetch('/')
const WebSocketUrl:any = response.headers.get('X-WebSocket-Url')
const WebSocketUrl2:any = response.headers.get('X-WebSocket-Url2')
const MqttUrl:any = response.headers.get('X-MqttUrl-Url')
localStorage.setItem('WebSocketUrl2', WebSocketUrl2)
const WebSocketUrl: any = response.headers.get('X-WebSocket-Url')
const WebSocketUrl2: any = response.headers.get('X-WebSocket-Url2')
const WebSocketUrl3: any = response.headers.get('X-WebSocket-Url3')
const MqttUrl: any = response.headers.get('X-MqttUrl-Url')
localStorage.setItem('WebSocketUrl', WebSocketUrl)
localStorage.setItem('WebSocketUrl2', WebSocketUrl2)
localStorage.setItem('WebSocketUrl3', WebSocketUrl3)
localStorage.setItem('MqttUrl', MqttUrl)
}
onMounted(() => {
fetchMqttUrl()
})
</script>

View File

@@ -1,5 +1,6 @@
import createAxios from '@/utils/request'
// 密码规则修改
export function ruleUpdate(data) {
return createAxios({
@@ -24,3 +25,77 @@ export function unlockRoot(data) {
data
})
}
//根据客户端名查询信息
export function getClientInfoByPath() {
return createAxios({
url: '/user-boot/authClient/getAuthClientByName/njcn',
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
//客户端会话配置更新
export function updateClientSessionConfig(data) {
return createAxios({
url: '/user-boot/authClient/sessionConfigUpdate',
method: 'post',
data
})
}
//获取用户配置
export function getUserConfig() {
return createAxios({
url: '/user-boot/password/getUserStrategyList',
method: 'post'
})
}
//查询系统列表
export function getSystemList() {
return createAxios({
url: '/system-boot/config/getSysConfigData',
method: 'get'
})
}
//激活系统配置
export function activeSystemConfig(data) {
return createAxios({
url: '/system-boot/config/updateSysConfig',
method: 'post',
data
})
}
//删除系统配置
export function deleteSystemConfig( data) {
return createAxios({
url: '/system-boot/config/removeSysConfigById',
method: 'get',
params: data
})
}
//新增系统配置
export function addSystemConfig(data) {
return createAxios({
url: '/system-boot/config/addSysConfig',
method: 'post',
data
})
}
//修改系统配置
export function updateSystemConfig(data) {
return createAxios({
url: '/system-boot/config/updateSysConfig',
method: 'post',
data
})
}

View File

@@ -1,4 +1,4 @@
import request from '@/config/axios'
import { requestData, requestDownload } from '@/utils/request'
// BPM 流程表达式 VO
export interface ProcessExpressionVO {
@@ -12,31 +12,36 @@ export interface ProcessExpressionVO {
export const ProcessExpressionApi = {
// 查询BPM 流程表达式分页
getProcessExpressionPage: async (params: any) => {
return await request.get({ url: `/bpm/process-expression/page`, params })
return await requestData({ url: '/bpm/process-expression/page', method: 'GET', params })
},
// 查询BPM 流程表达式详情
getProcessExpression: async (id: number) => {
return await request.get({ url: `/bpm/process-expression/get?id=` + id })
return await requestData({ url: '/bpm/process-expression/get?id=' + id, method: 'GET' })
},
// 新增BPM 流程表达式
createProcessExpression: async (data: ProcessExpressionVO) => {
return await request.post({ url: `/bpm/process-expression/create`, data })
return await requestData({ url: '/bpm/process-expression/create', method: 'POST', data })
},
// 修改BPM 流程表达式
updateProcessExpression: async (data: ProcessExpressionVO) => {
return await request.put({ url: `/bpm/process-expression/update`, data })
return await requestData({ url: '/bpm/process-expression/update', method: 'PUT', data })
},
// 删除BPM 流程表达式
deleteProcessExpression: async (id: number) => {
return await request.delete({ url: `/bpm/process-expression/delete?id=` + id })
return await requestData({ url: '/bpm/process-expression/delete?id=' + id, method: 'DELETE' })
},
// 导出BPM 流程表达式 Excel
exportProcessExpression: async (params) => {
return await request.download({ url: `/bpm/process-expression/export-excel`, params })
return await requestDownload({
url: '/bpm/process-expression/export-excel',
method: 'GET',
params,
responseType: 'blob'
})
}
}
}

View File

@@ -1,4 +1,4 @@
import request from '@/config/axios'
import { requestData } from '@/utils/request'
// BPM 流程监听器 VO
export interface ProcessListenerVO {
@@ -15,26 +15,26 @@ export interface ProcessListenerVO {
export const ProcessListenerApi = {
// 查询流程监听器分页
getProcessListenerPage: async (params: any) => {
return await request.get({ url: `/bpm/process-listener/page`, params })
return await requestData({ url: '/bpm/process-listener/page', method: 'GET', params })
},
// 查询流程监听器详情
getProcessListener: async (id: number) => {
return await request.get({ url: `/bpm/process-listener/get?id=` + id })
return await requestData({ url: '/bpm/process-listener/get?id=' + id, method: 'GET' })
},
// 新增流程监听器
createProcessListener: async (data: ProcessListenerVO) => {
return await request.post({ url: `/bpm/process-listener/create`, data })
return await requestData({ url: '/bpm/process-listener/create', method: 'POST', data })
},
// 修改流程监听器
updateProcessListener: async (data: ProcessListenerVO) => {
return await request.put({ url: `/bpm/process-listener/update`, data })
return await requestData({ url: '/bpm/process-listener/update', method: 'PUT', data })
},
// 删除流程监听器
deleteProcessListener: async (id: number) => {
return await request.delete({ url: `/bpm/process-listener/delete?id=` + id })
return await requestData({ url: '/bpm/process-listener/delete?id=' + id, method: 'DELETE' })
}
}

View File

@@ -1,47 +1,41 @@
import request from '@/config/axios'
export type UserGroupVO = {
id: number
name: string
description: string
userIds: number[]
status: number
remark: string
createTime: string
}
// 创建用户组
export const createUserGroup = async (data: UserGroupVO) => {
return await request.post({
url: '/bpm/user-group/create',
data: data
})
}
// 更新用户组
export const updateUserGroup = async (data: UserGroupVO) => {
return await request.put({
url: '/bpm/user-group/update',
data: data
})
}
// 删除用户组
export const deleteUserGroup = async (id: number) => {
return await request.delete({ url: '/bpm/user-group/delete?id=' + id })
}
// 获得用户组
export const getUserGroup = async (id: number) => {
return await request.get({ url: '/bpm/user-group/get?id=' + id })
}
// 获得用户组分页
export const getUserGroupPage = async (params) => {
return await request.get({ url: '/bpm/user-group/page', params })
}
// 获取用户组精简信息列表
export const getUserGroupSimpleList = async (): Promise<UserGroupVO[]> => {
return await request.get({ url: '/bpm/user-group/simple-list' })
}
import { requestData } from '@/utils/request'
export type UserGroupVO = {
id: number
name: string
description: string
userIds: number[]
status: number
remark: string
createTime: string
}
// 创建用户组
export const createUserGroup = async (data: UserGroupVO) => {
return await requestData({ url: '/bpm/user-group/create', method: 'POST', data })
}
// 更新用户组
export const updateUserGroup = async (data: UserGroupVO) => {
return await requestData({ url: '/bpm/user-group/update', method: 'PUT', data })
}
// 删除用户组
export const deleteUserGroup = async (id: number) => {
return await requestData({ url: '/bpm/user-group/delete?id=' + id, method: 'DELETE' })
}
// 获得用户组
export const getUserGroup = async (id: number) => {
return await requestData({ url: '/bpm/user-group/get?id=' + id, method: 'GET' })
}
// 获得用户组分页
export const getUserGroupPage = async (params) => {
return await requestData({ url: '/bpm/user-group/page', method: 'GET', params })
}
// 获取用户组精简信息列表
export const getUserGroupSimpleList = async (): Promise<UserGroupVO[]> => {
return await requestData({ url: '/bpm/user-group/simple-list', method: 'GET' })
}

View File

@@ -129,11 +129,27 @@ export function queryAllByType(params: any) {
//获取用户
export function selectUserList(data: any) {
return createAxios({
url: '/supervision-boot/userReport/selectUserList',
url: '/device-boot/userReport/selectUserList',
method: 'post',
data
})
}
//获取用户
export function selectUserAssessMentList(data: any) {
return createAxios({
url: '/supervision-boot/userReport/selectUserAssessMentList',
method: 'post',
data
})
}
//绑定用户
export function bindAssessmentId(data: any) {
return createAxios({
url: '/supervision-boot/userReport/bindAssessmentId',
method: 'get',
params: data
})
}
//查询列表
export function getStatusManageList(data: any) {
return createAxios({
@@ -190,3 +206,11 @@ export function exportTerminalBase() {
responseType: 'blob'
})
}
//一键分配终端
export function allotTerminal(data: any) {
return createAxios({
url: '/device-boot/nodeDevice/oneKeyDistribution',
method: 'post',
params: data
})
}

View File

@@ -1,7 +1,7 @@
import request from '@/utils/request'
// 获取区域中断终端
export function getAreaOffDev(data) {
export function getAreaOffDev(data:any) {
return request({
url: '/device-boot/device/getAreaOffDev',
method: 'post',
@@ -9,10 +9,28 @@ export function getAreaOffDev(data) {
})
}
// 获取区域中断终端
export function getYwZtSubstation(data) {
export function getYwZtSubstation(data:any) {
return request({
url: '/device-boot/ywZt/getYwZtSubstation',
method: 'GET',
params: data
})
}
//终端周期检测
export function terminalCheckPage(data:any) {
return request({
url: '/device-boot/alarm/terminalCheckPage',
method: 'post',
data
})
}
export function userCheckUpload(data:any) {
return request({
url: '/device-boot/userReport/userCheckUpload',
method: 'post',
data
})
}

View File

@@ -1,32 +1,57 @@
import request from '@/utils/request'
import { DEVICE_BOOT } from '@/utils/constantRequest'
const MAPPING_PATH = DEVICE_BOOT + '/line'
/**
* 查询终端详细信息
*/
export const getDeviceDetailData = (id: string) => {
return request({
url: MAPPING_PATH + '/getDeviceDetailData?id=' + id,
method: 'POST'
})
}
/**
* 查询监测点详细信息
*/
export const getLineDetailData = (id: string) => {
return request({
url: MAPPING_PATH + '/getLineDetailData?id=' + id,
method: 'POST'
})
}
export const getSubstationSelect = () => {
return request({
url: 'device-boot/substation/getSubstationSelect',
method: 'get'
})
}
import request from '@/utils/request'
import { DEVICE_BOOT } from '@/utils/constantRequest'
const MAPPING_PATH = DEVICE_BOOT + '/line'
/**
* 查询终端详细信息
*/
export const getDeviceDetailData = (id: string) => {
return request({
url: MAPPING_PATH + '/getDeviceDetailData?id=' + id,
method: 'POST'
})
}
/**
* 查询监测点详细信息
*/
export const getLineDetailData = (id: string) => {
return request({
url: MAPPING_PATH + '/getLineDetailData?id=' + id,
method: 'POST'
})
}
export const getSubstationSelect = () => {
return request({
url: 'device-boot/substation/getSubstationSelect',
method: 'get'
})
}
// 查询变电站详情
export const getSubstationSelectLine = (id: string) => {
return request({
url: '/device-boot/line/getSubstationData',
method: 'post',
data: [id]
})
}
// 查询监测点
export const getLineOverLimitData = (id: string) => {
return request({
url: '/device-boot/line/getLineOverLimitData?id=' + id,
method: 'post'
})
}
//导出数据总览
export function dataVerifyExcel(params: any) {
return request({
url: '/device-boot/dataVerify/dataVerifyExcel',
method: 'get',
params,
responseType: 'blob'
})
}

View File

@@ -31,4 +31,13 @@ export function getDevTypeList() {
method: 'post',
})
}
export const getDeviceTypeList = (params: any) => {
return createAxios({
url: '/device-boot/devType/pageDevTypeList',
method: 'POST',
data: params
})
}

View File

@@ -4,6 +4,10 @@ import request from '@/utils/request'
export function getSubLineGiveAnAlarm(data: any) {
return request({ url: '/harmonic-boot/gridDiagram/getSubLineGiveAnAlarm', method: 'post', data })
}
export function getAreaObjAlarm(data: any) {
return request({ url: '/harmonic-boot/gridDiagram/getAreaObjAlarm', method: 'post', data })
}
// 变电站详细列表
export function getPollutionAlarmPageData(data: any) {
return request({ url: '/harmonic-boot/gridDiagram/getPollutionAlarmPageData', method: 'post', data })
@@ -165,3 +169,24 @@ export function getSupervisionDetailsData(data: any) {
export function getSupervisionCityDetailsData(data: any) {
return request({ url: '/supervision-boot/gridDiagram/getSupervisionCityDetailsData', method: 'post', data })
}
//区域污染值统计
export function getAreaPollution(data: any) {
return request({ url: '/harmonic-boot/PollutionSubstation/getAreaPollution', method: 'post', data })
}
//场站级评估
export function downPollutionSubCalc(data: any) {
return request({ url: '/harmonic-boot/PollutionSubstation/downPollutionSubCalc', method: 'post', data })
}
//监测点评价
export function limitTableDetail(data: any) {
return request({ url: '/device-boot/dataVerify/limitTableDetail', method: 'post', data })
}
//重要及敏感用户详情
export function downPollutionSensitiveUser(data: any) {
return request({ url: '/harmonic-boot/PollutionSubstation/downPollutionSensitiveUser', method: 'post', data })
}
//干扰源类型统计
export function loadTypeVOList(data: any) {
return request({ url: '/device-boot/gridDiagram/loadTypeVOList', method: 'post', data })
}

View File

@@ -0,0 +1,103 @@
import request from '@/utils/request'
// 新增敏感用户
export function saveUser(data: any) {
return request({
url: '/device-boot/pqSensitiveUser/save',
method: 'post',
data: data
})
}
// 修改敏感用户
export function updateUser(data: any) {
return request({
url: '/device-boot/pqSensitiveUser/update',
method: 'post',
data: data
})
}
// 删除敏感用户
export function deleteUser(data: any) {
return request({
url: '/device-boot/pqSensitiveUser/delete',
method: 'post',
data: data
})
}
/**
* 干扰源接入功能删除流程
*/
export const deleteUserReport = (data: any) => {
return request({
url: '/device-boot/userReport/deleteUserReport',
method: 'POST',
data
})
}
/**
* 提交表单数据
*/
export const submitFormData = (data: any) => {
return request({
url: '/device-boot/userReport/add',
method: 'POST',
data: data
})
}
// 根据id获取用户档案录入的详细数据
export const getById = (data: any) => {
return request({
url: '/device-boot/userReport/getById',
method: 'get',
params: data
})
}
/**
* 提交表单数据
*/
export const addEditor = (data: any) => {
return request({
url: '/device-boot/userReportRenewal/addEditor',
method: 'POST',
data: data
})
}
// 根据id获取用户档案录入的详细数据
export const getByDeptDevLine = (params: any) => {
return request({
url: '/device-boot/line/getByDeptDevLine',
method: 'get',
params
})
}
/**
* 根据id获取用户档案录入的详细数据
*/
export const getUserReportUpdateById = (id: any) => {
return request({
url: '/device-boot/userReportRenewal/getUserReportUpdateById?businessId='+id,
method: 'POST',
})
}
// 根据id获取用户档案录入的详细数据
export const getUserReportById = (id: any) => {
return request({
url: '/device-boot/userReport/getUserReportById?id='+id,
method: 'get'
})
}
// 根据id查询文件信息集合
export const getFileById = (params: any) => {
return request({
url: '/device-boot/fileUrl/getFileById',
method: 'get',
params
})
}

View File

@@ -1,72 +1,137 @@
import createAxios from '@/utils/request'
//事件报告
export function getEventReport(data) {
return createAxios({
url: '/event-boot/report/getEventReport',
method: 'post',
data
})
}
// 生成报告
export function getAreaReport(data) {
return createAxios({
url: '/event-boot/report/getAreaReport',
method: 'post',
data,
responseType: 'blob'
})
}
//查询所有模板
export function getList(data) {
return createAxios({
url: '/system-boot/EventTemplate/getList',
method: 'post',
data
})
}
export function selectReleation(data) {
return createAxios({
url: '/system-boot/EventTemplate/selectReleation',
method: 'post',
params: data
})
}
export function getLineExport(data) {
return createAxios({
url: '/event-boot/report/getLineExport',
method: 'post',
data: data,
responseType: 'blob'
})
}
export function getVoltage(data: any) {
return createAxios({
url: '/event-boot/report/getVoltage',
method: 'post',
data
})
}
export function getGeneralSituation(data: any) {
return createAxios({
url: '/event-boot/report/getGeneralSituation',
method: 'post',
data
})
}
export function getTransientValue(data: any) {
return createAxios({
url: '/event-boot/transient/getTransientValue',
method: 'post',
data
})
}
// 周报导出
export function getExport(data: any) {
return createAxios({
url: '/event-boot/report/getExport',
method: 'post',
data,
responseType: 'blob'
})
}
import createAxios from '@/utils/request'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
//事件报告
// export function getEventReport(data) {
// return createAxios({
// url: '/event-boot/report/getEventReport',
// method: 'post',
// data
// })
// }
export function getEventReport(data) {
return createAxios({
url: '/event-boot/report/createEventReport',
method: 'post',
data,
responseType: 'blob'
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
// 生成报告
export function getAreaReport(data) {
return createAxios({
url: '/event-boot/report/getAreaReport',
method: 'post',
data,
responseType: 'blob'
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
async function readJsonBlob(blob) {
try {
// 1. Blob.text() 读取二进制 → 直接转为 字符串(自动处理编码)
const jsonStr = await blob.text()
// 2. JSON.parse 解析字符串 → 得到可用的 JS 对象/数组
const jsonData = JSON.parse(jsonStr)
// 3. 拿到数据,后续随便用
return {
code: true,
data: jsonData
}
} catch (err) {
return {
code: false,
data: {}
}
// console.error('解析Blob的JSON数据失败', err)
}
}
//查询所有模板
export function getList(data) {
return createAxios({
url: '/system-boot/EventTemplate/getList',
method: 'post',
data
})
}
export function selectReleation(data) {
return createAxios({
url: '/system-boot/EventTemplate/selectReleation',
method: 'post',
params: data
})
}
export function getLineExport(data) {
return createAxios({
url: '/event-boot/report/getLineExport',
method: 'post',
data: data,
responseType: 'blob'
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
export function getVoltage(data: any) {
return createAxios({
url: '/event-boot/report/getVoltage',
method: 'post',
data
})
}
export function getGeneralSituation(data: any) {
return createAxios({
url: '/event-boot/report/getGeneralSituation',
method: 'post',
data
})
}
export function getTransientValue(data: any) {
return createAxios({
url: '/event-boot/transient/getTransientValue',
method: 'post',
data
})
}
// 周报导出
export function getExport(data: any) {
return createAxios({
url: '/event-boot/report/getExport',
method: 'post',
data,
responseType: 'blob'
})
}

View File

@@ -1,106 +1,114 @@
import request from '@/utils/request'
export function getTypeIdData(data: any) {
return request({
url: '/system-boot/dictData/getTypeIdData',
method: 'post',
data: data
})
}
export function getOnlineRateData2(data:any) {
return request({
url: '/harmonic-boot/onlineRateData/getOnlineRateData',
method: 'post',
data: data
})
}
export function getAreaDept() {
return request({
url: '/user-boot/dept/loginDeptTree',
method: 'post'
})
}
export function getOnlineRateDataCensus(data:any) {
return request({
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
method: 'post',
data: data
})
}
export function IntegrityIcon(data:any) {
return request({
url: '/harmonic-boot/integrity/getIntegrityIcon',
method: 'post',
data: data
})
}
export function getDeptIdAreaTree() {
return request({
url: '/system-boot/area/getDeptIdAreaTree',
method: 'post'
})
}
export function getOnlineRateData(data:any) {
return request({
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
method: 'post',
data: data
})
}
export function getSubstationInfoById(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
method: 'post',
data: data
})
}
export function getLineInfoById(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
method: 'post',
data: data
})
}
export function getLineRank(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getLineRank',
method: 'post',
data: data
})
}
export function deptInfo(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/deptInfo',
method: 'post',
data: data
})
}
export function getXbLineInfoById(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getXbLineInfoById',
method: 'post',
data: data
})
}
export function getSubInfoById(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getSubInfoById',
method: 'post',
data: data
})
}
export function getXbLineRank(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getXbLineRank',
method: 'post',
data: data
})
}
// 数据补招
export function FullRecall(data:any) {
return request({
url: '/data-processing-boot/data/FullRecall',
method: 'post',
data: data
})
}
import request from '@/utils/request'
export function getTypeIdData(data: any) {
return request({
url: '/system-boot/dictData/getTypeIdData',
method: 'post',
data: data
})
}
export function getOnlineRateData2(data:any) {
return request({
url: '/harmonic-boot/onlineRateData/getOnlineRateData',
method: 'post',
data: data
})
}
export function getAreaDept() {
return request({
url: '/user-boot/dept/loginDeptTree',
method: 'post'
})
}
// 承载能力评估去除前缀
export function getAreaDeptRemoveMode(params) {
return request({
url: '/user-boot/dept/loginDeptTree',
method: 'GET',
params: params
})
}
export function getOnlineRateDataCensus(data:any) {
return request({
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
method: 'post',
data: data
})
}
export function IntegrityIcon(data:any) {
return request({
url: '/harmonic-boot/integrity/getIntegrityIcon',
method: 'post',
data: data
})
}
export function getDeptIdAreaTree() {
return request({
url: '/system-boot/area/getDeptIdAreaTree',
method: 'post'
})
}
export function getOnlineRateData(data:any) {
return request({
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
method: 'post',
data: data
})
}
export function getSubstationInfoById(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
method: 'post',
data: data
})
}
export function getLineInfoById(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
method: 'post',
data: data
})
}
export function getLineRank(data:any) {
return request({
url: '/harmonic-boot/PollutionSubstation/getLineRank',
method: 'post',
data: data
})
}
export function deptInfo(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/deptInfo',
method: 'post',
data: data
})
}
export function getXbLineInfoById(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getXbLineInfoById',
method: 'post',
data: data
})
}
export function getSubInfoById(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getSubInfoById',
method: 'post',
data: data
})
}
export function getXbLineRank(data:any) {
return request({
url: '/harmonic-boot/detailAnalysis/getXbLineRank',
method: 'post',
data: data
})
}
// 数据补招
export function FullRecall(data:any) {
return request({
url: '/data-processing-boot/data/FullRecall',
method: 'post',
data: data
})
}

View File

@@ -0,0 +1,119 @@
import request from '@/utils/request'
// 主要监测点列表查询>>分页
export function mainLineList(data: any) {
return request({
url: '/harmonic-boot/mainLine/list',
method: 'post',
data: data
})
}
// 主要监测点指标越限详情
export function statLimitRateDetails(data: any) {
return request({
url: '/harmonic-boot/mainLine/statLimitRateDetails',
method: 'post',
data: data
})
}
// 查询监测点列表=全部>>不分页
export function cslineList(data: any) {
return request({
url: '/cs-device-boot/csline/list',
method: 'post',
data: data
})
}
// 监测点详情 趋势图数据
export function trendData(data: any) {
return request({
url: '/cs-device-boot/csGroup/trendData',
method: 'post',
data: data
})
}
// 每日越限占比统计
export function totalLimitStatisticsDetails(data: any) {
return request({
url: '/harmonic-boot/totalLimitStatistics/details',
method: 'post',
data: data
})
}
// 总体指标越限统计列表
export function totalLimitStatisticsList(data: any) {
return request({
url: '/harmonic-boot/totalLimitStatistics/list',
method: 'post',
data: data
})
}
// 总体指标越限统计数据
export function totalLimitStatisticsData(data: any) {
return request({
url: '/harmonic-boot/totalLimitStatistics/data',
method: 'post',
data: data
})
}
// 指标越限程度数据
export function limitExtentData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitExtentData',
method: 'post',
data: data
})
}
// 指标日趋势图数据
export function limitExtentDayData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitExtentDayData',
method: 'post',
data: data
})
}
// 指标越限明细日历数据
export function limitCalendarData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitCalendarData',
method: 'post',
data: data
})
}
//指标拟合图数据
export function fittingData(data: any) {
return request({
url: '/cs-device-boot/csGroup/fittingData',
method: 'post',
data: data
})
}
//指标越限时间概率分布
export function limitTimeProbabilityData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'post',
data: data
})
}
//指标越限程度概率分布
export function limitProbabilityData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitProbabilityData',
method: 'post',
data: data
})
}

View File

@@ -1,18 +1,48 @@
import request from '@/utils/request'
export function getHistoryResult(data: any) {
return request({
url: '/harmonic-boot/harmonic/getHistoryResult',
method: 'post',
data: data
})
}
// word报告
export function exportModelJB(data: any) {
return request({
url: '/harmonic-boot/exportmodel/exportModelJB',
method: 'post',
responseType: 'blob',
data: data
})
}
import request from '@/utils/request'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
export function getHistoryResult(data: any) {
return request({
url: '/harmonic-boot/harmonic/getHistoryResult',
method: 'post',
data: data
})
}
// word报告
export function exportModelJB(data: any) {
return request({
url: '/harmonic-boot/exportmodel/exportModelJB',
method: 'post',
responseType: 'blob',
data: data
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
async function readJsonBlob(blob) {
try {
// 1. Blob.text() 读取二进制 → 直接转为 字符串(自动处理编码)
const jsonStr = await blob.text()
// 2. JSON.parse 解析字符串 → 得到可用的 JS 对象/数组
const jsonData = JSON.parse(jsonStr)
// 3. 拿到数据,后续随便用
return {
code: true,
data: jsonData
}
} catch (err) {
return {
code: false,
data: {}
}
// console.error('解析Blob的JSON数据失败', err)
}
}

View File

@@ -6,7 +6,7 @@ export function getUndocumentednonlinearData() {
method: 'get'
})
}
//获取入网评估报告审核数据
//获取系统接入方案审核数据
export function getReportreviewData() {
return createAxios({
url: '/Process-supervision/Reportreview/getReportreview',

View File

@@ -1,10 +1,60 @@
import createAxios from '@/utils/request'
export function exportModel(data: any) {
return createAxios({
url: '/harmonic-boot/exportmodel/exportModel',
method: 'post',
data: data,
responseType: 'blob'
})
}
import createAxios from '@/utils/request'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
export function exportModel(data: any) {
return createAxios({
url: '/harmonic-boot/exportmodel/exportModel',
method: 'post',
data: data,
responseType: 'blob'
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
export function areaHarmonicReport(data: any) {
return createAxios({
url: '/harmonic-boot/areaHarmonicReport/areaHarmonicReport',
method: 'post',
data: data,
responseType: 'blob'
}).then(async res => {
let load: any = await readJsonBlob(res)
if (load.code) {
if (load.data.code == 'A0011') {
ElMessage.warning('下载失败!')
} else {
ElMessage.warning(load.data.message)
}
} else {
return res
}
})
}
async function readJsonBlob(blob) {
try {
// 1. Blob.text() 读取二进制 → 直接转为 字符串(自动处理编码)
const jsonStr = await blob.text()
// 2. JSON.parse 解析字符串 → 得到可用的 JS 对象/数组
const jsonData = JSON.parse(jsonStr)
// 3. 拿到数据,后续随便用
return {
code: true,
data: jsonData
}
} catch (err) {
return {
code: false,
data: {}
}
// console.error('解析Blob的JSON数据失败', err)
}
}

View File

@@ -0,0 +1,42 @@
import request from "@/utils/request";
//查询所有模板
export function getList(data: any) {
return request({
url: "/system-boot/EventTemplate/getList",
method: "post",
data,
});
}
//字典树
export function getDictTree(data: any) {
return request({
url: "/system-boot/reportDict/DictTree",
method: "post",
params:data
});
}
//新增模板
export function addData(data: any) {
return request({
url: "/system-boot/EventTemplate/add",
method: "post",
data,
});
}
//修改模板
export function updateData(data: any) {
return request({
url: "/system-boot/EventTemplate/update",
method: "post",
data,
});
}
//删除模板
export function deleteData(data: any) {
return request({
url: "/system-boot/EventTemplate/delete",
method: "post",
data,
});
}

View File

@@ -0,0 +1,43 @@
import request from '@/utils/request'
//获取字典树数据
export function getDictTree(data) {
return request({
url: "/system-boot/reportDict/DictTree",
method: "post",
params:data
});
}
//查询字典列表
export function getReportDictList(data: any) {
return request({
url: "/system-boot/reportDict/getReportDictList",
method: "post",
data
});
}
//新增字典表
export function addDict(data: any) {
return request({
url: "/system-boot/reportDict/addDict",
method: "post",
data
});
}
//更新字典表
export function updateDict(data: any) {
return request({
url: "/system-boot/reportDict/updateDict",
method: "put",
data
});
}
//删除字典表
export function deleteDict(data: any) {
return request({
url: "/system-boot/reportDict/deleteDict",
method: "delete",
params:data
});
}

View File

@@ -0,0 +1,37 @@
import request from '@/utils/request'
//区域树形表格接口
export function areaTree(data: any) {
return request({
url: '/system-boot/area/areaTree',
method: 'post',
params: data,
})
}
export function areaAdd(data: any) {
return request({
url: '/system-boot/area/add',
method: 'post',
data: data,
})
}
export function areaDelete(data: any) {
return request({
url: '/system-boot/area/delete',
method: 'post',
data: data,
})
}
export function update(data: any) {
return request({
url: '/system-boot/area/update',
method: 'post',
data: data,
})
}
export function selectPid(data: any) {
return request({
url: '/system-boot/area/selectPid',
method: 'post',
data: data,
})
}

View File

@@ -1,70 +1,87 @@
import createAxios from '@/utils/request'
// 查询指标
export const queryStatistical = (id: string) => {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/system-boot/csstatisticalset/queryStatistical',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: form
})
}
// 绑定指标
export const addStatistical = (params: any) => {
return createAxios({
url: '/system-boot/csstatisticalset/addStatistical',
method: 'post',
data: params
})
}
// 新增驾驶舱页面
export const addDashboard = (data: any) => {
return createAxios({
url: '/system-boot/dashboard/addDashboard',
method: 'post',
data: data
})
}
// 修改驾驶舱页面
export const updateDashboard = (data: any) => {
return createAxios({
url: '/system-boot/dashboard/updateDashboard',
method: 'post',
data: data
})
}
// 删除驾驶舱页面
export const deleteDashboard = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/deleteDashboard',
method: 'post',
params
})
}
// 激活的驾驶舱页面
export const activatePage = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/activatePage',
method: 'post',
params
})
}
// 查询激活的驾驶舱页面
export const queryActivatePage = () => {
return createAxios({
url: '/system-boot/dashboard/queryActivatePage',
method: 'post'
})
}
// 更具id 查询驾驶舱页面
export const queryById = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/queryById',
method: 'post',
params
})
}
import createAxios from '@/utils/request'
// 查询指标
export const queryStatistical = (id:string) => {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/system-boot/csstatisticalset/queryStatistical',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: form
})
}
// 绑定指标
export const addStatistical = (params:any) => {
return createAxios({
url: '/system-boot/csstatisticalset/addStatistical',
method: 'post',
data: params
})
}
// 新增驾驶舱页面
export const addDashboard = (data: any) => {
return createAxios({
url: '/system-boot/dashboard/addDashboard',
method: 'post',
data: data
})
}
// 修改驾驶舱页面
export const updateDashboard = (data: any) => {
return createAxios({
url: '/system-boot/dashboard/updateDashboard',
method: 'post',
data: data
})
}
// 删除驾驶舱页面
export const deleteDashboard = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/deleteDashboard',
method: 'post',
params
})
}
// 激活的驾驶舱页面
export const activatePage = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/activatePage',
method: 'post',
params
})
}
// 查询激活的驾驶舱页面
export const queryActivatePage = () => {
return createAxios({
url: '/system-boot/dashboard/queryActivatePage',
method: 'post'
})
}
// 更具id 查询驾驶舱页面
export const queryById = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/queryById',
method: 'post',
params
})
}
// 更具id 查询驾驶舱页面
export const queryByPagePath = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/queryByPagePath',
method: 'post',
params
})
}
// 根据用户id查询用户驾驶舱
export const getDashboardPageByUserId = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/getDashboardPageByUserId',
method: 'post',
params
})
}

View File

@@ -1,5 +1,5 @@
import createAxios from '@/utils/request'
import { ElMessage } from 'element-plus'
const SYSTEM_PREFIX = '/system-boot'
/**
@@ -7,8 +7,20 @@ const SYSTEM_PREFIX = '/system-boot'
* @param file
*/
export const uploadFile = (file: any, path: string) => {
const regex = /\[|\]/g
// 替换规则:[ 换成 (] 换成 )
const newFile = new File(
[file], // 原文件的二进制内容
file.name.replace(regex, match => (match === '[' ? '(' : ')')), // 新的文件名
{
type: file.type, // 复用原文件的MIME类型
lastModified: file.lastModified // 复用最后修改时间
}
)
let form = new FormData()
form.append('file', file)
form.append('file', newFile)
form.append('path', path)
return createAxios({
url: SYSTEM_PREFIX + '/file/upload',
@@ -17,6 +29,11 @@ export const uploadFile = (file: any, path: string) => {
'Content-Type': 'multipart/form-data'
},
data: form
}).then(res => {
if (res.code == `A0000`) {
ElMessage.success('文件上传成功!')
return res
}
})
}
@@ -50,7 +67,7 @@ export const downloadFile = (filePath: any) => {
/**
* 获取文件的短期url展示
*/
export const getFileUrl = (params:any) => {
export const getFileUrl = (params: any) => {
let form = new FormData()
// form.append('filePath', filePath)
return createAxios({

View File

@@ -1,49 +1,49 @@
import request from '@/config/axios'
export type DictDataVO = {
id: number | undefined
sort: number | undefined
label: string
value: string
dictType: string
status: number
colorType: string
cssClass: string
remark: string
createTime: Date
}
// 查询字典数据(精简)列表
export const getSimpleDictDataList = () => {
return request.get({ url: '/system/dict-data/simple-list' })
}
// 查询字典数据列表
export const getDictDataPage = (params: PageParam) => {
return request.get({ url: '/system/dict-data/page', params })
}
// 查询字典数据详情
export const getDictData = (id: number) => {
return request.get({ url: '/system/dict-data/get?id=' + id })
}
// 新增字典数据
export const createDictData = (data: DictDataVO) => {
return request.post({ url: '/system/dict-data/create', data })
}
// 修改字典数据
export const updateDictData = (data: DictDataVO) => {
return request.put({ url: '/system/dict-data/update', data })
}
// 删除字典数据
export const deleteDictData = (id: number) => {
return request.delete({ url: '/system/dict-data/delete?id=' + id })
}
// 导出字典类型数据
export const exportDictData = (params) => {
return request.download({ url: '/system/dict-data/export', params })
}
import { requestData, requestDownload } from '@/utils/request'
export type DictDataVO = {
id: number | undefined
sort: number | undefined
label: string
value: string
dictType: string
status: number
colorType: string
cssClass: string
remark: string
createTime: Date
}
// 查询字典数据(精简)列表
export const getSimpleDictDataList = () => {
return requestData({ url: '/system/dict-data/simple-list', method: 'GET' })
}
// 查询字典数据列表
export const getDictDataPage = (params: PageParam) => {
return requestData({ url: '/system/dict-data/page', method: 'GET', params })
}
// 查询字典数据详情
export const getDictData = (id: number) => {
return requestData({ url: '/system/dict-data/get?id=' + id, method: 'GET' })
}
// 新增字典数据
export const createDictData = (data: DictDataVO) => {
return requestData({ url: '/system/dict-data/create', method: 'POST', data })
}
// 修改字典数据
export const updateDictData = (data: DictDataVO) => {
return requestData({ url: '/system/dict-data/update', method: 'PUT', data })
}
// 删除字典数据
export const deleteDictData = (id: number) => {
return requestData({ url: '/system/dict-data/delete?id=' + id, method: 'DELETE' })
}
// 导出字典类型数据
export const exportDictData = (params) => {
return requestDownload({ url: '/system/dict-data/export', method: 'GET', params, responseType: 'blob' })
}

View File

@@ -1,44 +1,45 @@
import request from '@/config/axios'
export type DictTypeVO = {
id: number | undefined
name: string
type: string
status: number
remark: string
createTime: Date
}
// 查询字典(精简)列表
export const getSimpleDictTypeList = () => {
return request.get({ url: '/system/dict-type/list-all-simple' })
}
// 查询字典列表
export const getDictTypePage = (params: PageParam) => {
return request.get({ url: '/system/dict-type/page', params })
}
// 查询字典详情
export const getDictType = (id: number) => {
return request.get({ url: '/system/dict-type/get?id=' + id })
}
// 新增字典
export const createDictType = (data: DictTypeVO) => {
return request.post({ url: '/system/dict-type/create', data })
}
// 修改字典
export const updateDictType = (data: DictTypeVO) => {
return request.put({ url: '/system/dict-type/update', data })
}
// 删除字典
export const deleteDictType = (id: number) => {
return request.delete({ url: '/system/dict-type/delete?id=' + id })
}
// 导出字典类型
export const exportDictType = (params) => {
return request.download({ url: '/system/dict-type/export', params })
}
import { requestData, requestDownload } from '@/utils/request'
export type DictTypeVO = {
id: number | undefined
name: string
type: string
status: number
remark: string
createTime: Date
}
// 查询字典(精简)列表
export const getSimpleDictTypeList = () => {
return requestData({ url: '/system/dict-type/list-all-simple', method: 'GET' })
}
// 查询字典列表
export const getDictTypePage = (params: PageParam) => {
return requestData({ url: '/system/dict-type/page', method: 'GET', params })
}
// 查询字典详情
export const getDictType = (id: number) => {
return requestData({ url: '/system/dict-type/get?id=' + id, method: 'GET' })
}
// 新增字典
export const createDictType = (data: DictTypeVO) => {
return requestData({ url: '/system/dict-type/create', method: 'POST', data })
}
// 修改字典
export const updateDictType = (data: DictTypeVO) => {
return requestData({ url: '/system/dict-type/update', method: 'PUT', data })
}
// 删除字典
export const deleteDictType = (id: number) => {
return requestData({ url: '/system/dict-type/delete?id=' + id, method: 'DELETE' })
}
// 导出字典类型
export const exportDictType = (params) => {
return requestDownload({ url: '/system/dict-type/export', method: 'GET', params, responseType: 'blob' })
}

View File

@@ -1,49 +1,50 @@
import request from '@/config/axios'
import qs from 'qs'
export interface NotifyMessageVO {
id: number
userId: number
userType: number
templateId: number
templateCode: string
templateNickname: string
templateContent: string
templateType: number
templateParams: string
readStatus: boolean
readTime: Date
createTime: Date
}
// 查询站内信消息列表
export const getNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/page', params })
}
// 获得我的站内信分页
export const getMyNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/my-page', params })
}
// 批量标记已读
export const updateNotifyMessageRead = async (ids) => {
return await request.put({
url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false })
})
}
// 标记所有站内信为已读
export const updateAllNotifyMessageRead = async () => {
return await request.put({ url: '/system/notify-message/update-all-read' })
}
// 获取当前用户的最新站内信列表
export const getUnreadNotifyMessageList = async () => {
return await request.get({ url: '/system/notify-message/get-unread-list' })
}
// 获得当前用户的未读站内信数量
export const getUnreadNotifyMessageCount = async () => {
return await request.get({ url: '/system/notify-message/get-unread-count' })
}
import { requestData } from '@/utils/request'
import qs from 'qs'
export interface NotifyMessageVO {
id: number
userId: number
userType: number
templateId: number
templateCode: string
templateNickname: string
templateContent: string
templateType: number
templateParams: string
readStatus: boolean
readTime: Date
createTime: Date
}
// 查询站内信消息列表
export const getNotifyMessagePage = async (params: any) => {
return await requestData({ url: '/system/notify-message/page', method: 'GET', params })
}
// 获得我的站内信分页
export const getMyNotifyMessagePage = async (params: any) => {
return await requestData({ url: '/system/notify-message/my-page', method: 'GET', params })
}
// 批量标记已读
export const updateNotifyMessageRead = async (ids: any) => {
return await requestData({
url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false }),
method: 'PUT'
})
}
// 标记所有站内信为已读
export const updateAllNotifyMessageRead = async () => {
return await requestData({ url: '/system/notify-message/update-all-read', method: 'PUT' })
}
// 获取当前用户的最新站内信列表
export const getUnreadNotifyMessageList = async () => {
return await requestData({ url: '/system/notify-message/get-unread-list', method: 'GET' })
}
// 获得当前用户的未读站内信数量
export const getUnreadNotifyMessageCount = async () => {
return await requestData({ url: '/system/notify-message/get-unread-count', method: 'GET' })
}

View File

@@ -1,49 +1,49 @@
import request from '@/config/axios'
export interface NotifyTemplateVO {
id?: number
name: string
nickname: string
code: string
content: string
type?: number
params: string
status: number
remark: string
}
export interface NotifySendReqVO {
userId: number | null
templateCode: string
templateParams: Map<String, Object>
}
// 查询站内信模板列表
export const getNotifyTemplatePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-template/page', params })
}
// 查询站内信模板详情
export const getNotifyTemplate = async (id: number) => {
return await request.get({ url: '/system/notify-template/get?id=' + id })
}
// 新增站内信模板
export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
return await request.post({ url: '/system/notify-template/create', data })
}
// 修改站内信模板
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
return await request.put({ url: '/system/notify-template/update', data })
}
// 删除站内信模板
export const deleteNotifyTemplate = async (id: number) => {
return await request.delete({ url: '/system/notify-template/delete?id=' + id })
}
// 发送站内信
export const sendNotify = (data: NotifySendReqVO) => {
return request.post({ url: '/system/notify-template/send-notify', data })
}
import { requestData } from '@/utils/request'
export interface NotifyTemplateVO {
id?: number
name: string
nickname: string
code: string
content: string
type?: number
params: string
status: number
remark: string
}
export interface NotifySendReqVO {
userId: number | null
templateCode: string
templateParams: Map<String, Object>
}
// 查询站内信模板列表
export const getNotifyTemplatePage = async (params: PageParam) => {
return await requestData({ url: '/system/notify-template/page', method: 'GET', params })
}
// 查询站内信模板详情
export const getNotifyTemplate = async (id: number) => {
return await requestData({ url: '/system/notify-template/get?id=' + id, method: 'GET' })
}
// 新增站内信模板
export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
return await requestData({ url: '/system/notify-template/create', method: 'POST', data })
}
// 修改站内信模板
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
return await requestData({ url: '/system/notify-template/update', method: 'PUT', data })
}
// 删除站内信模板
export const deleteNotifyTemplate = async (id: number) => {
return await requestData({ url: '/system/notify-template/delete?id=' + id, method: 'DELETE' })
}
// 发送站内信
export const sendNotify = (data: NotifySendReqVO) => {
return requestData({ url: '/system/notify-template/send-notify', method: 'POST', data })
}

View File

@@ -1,215 +1,250 @@
import request from '@/utils/request'
import { LoginData } from '@/api/types'
import { useAdminInfo } from '@/stores/adminInfo'
import { sm3Digest } from '@/assets/commjs/sm3.js'
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
// 获取公钥
export function gongkey(params?: any) {
if (!params) {
const adminInfo = useAdminInfo()
params = {
loginName: encrypt(adminInfo.$state.loginName)
}
}
return request({
url: '/user-boot/user/generateSm2Key',
method: 'get',
params
})
}
export async function pwdSm3(pwd: any, loginName?: string) {
let publicKey = await gongkey(
loginName
? {
loginName: encrypt(loginName)
}
: false
)
let sm3Pwd = sm3Digest(pwd) //SM3加密
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
}
//登录获取token
export async function login(params: any) {
if (params.refresh_token == undefined) {
params.password = await pwdSm3(params.password, params.username)
}
params.username = encrypt(params.username)
return request({
url: '/pqs-auth/oauth/token',
method: 'post',
params
})
}
//获取用户信息
export function getUserById() {
const adminInfo = useAdminInfo()
return request({
url: '/user-boot/user/getUserById?id=' + adminInfo.userIndex,
method: 'get'
})
}
// 刷新token
// 导出一个名为refreshToken的函数该函数返回一个Promise对象
export function refreshToken(): Promise<any> {
// 调用useAdminInfo函数获取管理员信息并将其赋值给adminInfo变量
const adminInfo = useAdminInfo()
// 调用login函数传入一个对象作为参数该对象包含grant_type、refresh_token和username三个属性
// grant_type设置为'refresh_token',表示使用刷新令牌的方式获取新的访问令牌
// refresh_token使用adminInfo中的refresh_token属性
// username使用adminInfo中的loginName属性
// 返回login函数的调用结果即一个Promise对象
return login({
grant_type: 'refresh_token',
refresh_token: adminInfo.refresh_token,
username: adminInfo.loginName
})
}
/**
* 获取营销用户列表
* @returns {AxiosPromise}
*/
export const getMarketList = () => {
return request({
url: '/user-boot/user/getMarketList',
method: 'post'
})
}
export function add(data: any) {
return request({
url: '/user-boot/user/add',
method: 'post',
data: data
})
}
export function edit(data: any) {
return request({
url: '/user-boot/user/update',
method: 'put',
data: data
})
}
export async function passwordConfirm(pwd: string) {
return request({
url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd)),
method: 'get'
})
}
export function deluser(data: any) {
return request({
url: '/user-boot/user/delete',
method: 'delete',
params: data
})
}
export function activateUser(data: any) {
return request({
url: '/user-boot/user/activateUser',
method: 'put',
params: data
})
}
export async function updatePassword(params: any) {
return request({
url: '/user-boot/user/updatePassword',
method: 'put',
params: {
id: params.id,
newPassword: await pwdSm3(params.newPassword)
}
})
}
export async function updateFirstPassword(params: any) {
return request({
url: '/user-boot/user/updateFirstPassword',
method: 'put',
data: {
name: encrypt(params.name),
password: await pwdSm3(params.password, params.name)
}
})
}
export function checkUser(data: any) {
return request({
url: '/user-boot/user/check',
method: 'put',
data: data
})
}
export function existMonitorDeptTree() {
return request({
url: '/user-boot/dept/existMonitorDeptTree',
method: 'post'
})
}
// 获取用户
export function getUserByRoleType(data: any) {
return request({
url: '/user-boot/user/getUserByRoleType?roleType=' + data,
method: 'GET'
})
}
// 获取部门下所有用户
export function listAllUserByDeptId(data: any) {
return request({
url: '/user-boot/user/listAllUserByDeptId?deptId=' + data,
method: 'GET'
})
}
// 根据id获取所有用户信息
export function getUserListByIds(data: any) {
return request({
url: '/user-boot/user/getUserListByIds',
method: 'POST',
data
})
}
/**
* 查询所有用户不包括管理员
*/
export const getUserSimpleList = () => {
return request({
url: '/user-boot/user/simpleList',
method: 'GET'
})
}
/**
* 查询所有用户包括管理员
*/
export const getAllUserSimpleList = () => {
return request({
url: '/user-boot/user/getAllUserSimpleList',
method: 'GET'
})
}
export const getSysConfig = () => {
return request({
url: '/system-boot/config/getSysConfig',
method: 'get'
})
}
// 驾驶舱组件配置
export const componentTree = () => {
return request({
url: '/user-boot/component/componentTree',
method: 'GET'
})
}
import request from '@/utils/request'
import { LoginData } from '@/api/types'
import { useAdminInfo } from '@/stores/adminInfo'
import { sm3Digest } from '@/assets/commjs/sm3.js'
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
// 获取公钥
export function gongkey(params?: any) {
if (!params) {
const adminInfo = useAdminInfo()
params = {
loginName: encrypt(adminInfo.$state.loginName)
}
}
return request({
url: '/user-boot/user/generateSm2Key',
method: 'get',
params
})
}
export async function pwdSm3(pwd: any, loginName?: string) {
let publicKey = await gongkey(
loginName
? {
loginName: encrypt(loginName)
}
: false
)
let sm3Pwd = sm3Digest(pwd) //SM3加密
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
}
//登录获取token
export async function login(params: any) {
if (params.refresh_token == undefined) {
params.password = await pwdSm3(params.password, params.username)
}
params.username = encrypt(params.username)
return request({
url: '/pqs-auth/oauth/token',
method: 'post',
params
})
}
//辽宁嵌入登录获取token
export async function loginLNqr(data: any) {
return request({
url: '/pqs-auth/oauth/lnLogin',
method: 'get',
params: data
})
}
export async function lnRefreshToken(data: any) {
return request({
url: '/pqs-auth/oauth/lnRefreshToken',
method: 'get',
params: data
})
}
export async function logout() {
return request({
url: '/pqs-auth/oauth/logout',
method: 'DELETE',
})
}
//获取用户信息
export function getUserById() {
const adminInfo = useAdminInfo()
return request({
url: '/user-boot/user/getUserById?id=' + adminInfo.userIndex,
method: 'get'
})
}
// 刷新token
// 导出一个名为refreshToken的函数该函数返回一个Promise对象
export function refreshToken(): Promise<any> {
// 调用useAdminInfo函数获取管理员信息并将其赋值给adminInfo变量
const adminInfo = useAdminInfo()
// 调用login函数传入一个对象作为参数该对象包含grant_type、refresh_token和username三个属性
// grant_type设置为'refresh_token',表示使用刷新令牌的方式获取新的访问令牌
// refresh_token使用adminInfo中的refresh_token属性
// username使用adminInfo中的loginName属性
// 返回login函数的调用结果即一个Promise对象
return login({
grant_type: 'refresh_token',
refresh_token: adminInfo.refresh_token,
username: adminInfo.loginName
})
}
export function lnRefreshTokenTo(): Promise<any> {
// 调用useAdminInfo函数获取管理员信息并将其赋值给adminInfo变量
const adminInfo = useAdminInfo()
return lnRefreshToken({
refreshToken: adminInfo.refresh_token,
clientId: "njcn",
clientSecret:"njcnpqs"
})
}
/**
* 获取营销用户列表
* @returns {AxiosPromise}
*/
export const getMarketList = () => {
return request({
url: '/user-boot/user/getMarketList',
method: 'post'
})
}
export function add(data: any) {
return request({
url: '/user-boot/user/add',
method: 'post',
data: data
})
}
export function edit(data: any) {
return request({
url: '/user-boot/user/update',
method: 'put',
data: data
})
}
export async function passwordConfirm(pwd: string) {
return request({
url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd)),
method: 'get'
})
}
export function deluser(data: any) {
return request({
url: '/user-boot/user/delete',
method: 'delete',
params: data
})
}
export function activateUser(data: any) {
return request({
url: '/user-boot/user/activateUser',
method: 'put',
params: data
})
}
export async function updatePassword(params: any) {
return request({
url: '/user-boot/user/updatePassword',
method: 'put',
params: {
id: params.id,
newPassword: await pwdSm3(params.newPassword)
}
})
}
export async function updateFirstPassword(params: any) {
return request({
url: '/user-boot/user/updateFirstPassword',
method: 'put',
data: {
name: encrypt(params.name),
password: await pwdSm3(params.password, params.name)
}
})
}
export function checkUser(data: any) {
return request({
url: '/user-boot/user/check',
method: 'put',
data: data
})
}
export function existMonitorDeptTree() {
return request({
url: '/user-boot/dept/existMonitorDeptTree',
method: 'post'
})
}
// 获取用户
export function getUserByRoleType(data: any) {
return request({
url: '/user-boot/user/getUserByRoleType?roleType=' + data,
method: 'GET'
})
}
// 获取部门下所有用户
export function listAllUserByDeptId(data: any) {
return request({
url: '/user-boot/user/listAllUserByDeptId?deptId=' + data,
method: 'GET'
})
}
// 根据id获取所有用户信息
export function getUserListByIds(data: any) {
return request({
url: '/user-boot/user/getUserListByIds',
method: 'POST',
data
})
}
/**
* 查询所有用户不包括管理员
*/
export const getUserSimpleList = () => {
return request({
url: '/user-boot/user/simpleList',
method: 'GET'
})
}
/**
* 查询所有用户包括管理员
*/
export const getAllUserSimpleList = () => {
return request({
url: '/user-boot/user/getAllUserSimpleList',
method: 'GET'
})
}
export const getSysConfig = () => {
return request({
url: '/system-boot/config/getSysConfig',
method: 'get'
})
}
// 驾驶舱组件配置
export const componentTree = () => {
return request({
url: '/user-boot/component/componentTree',
method: 'GET'
})
}

View File

@@ -54,6 +54,54 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe782;</span>
<div class="name">253_ipower</div>
<div class="code-name">&amp;#xe782;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe665;</span>
<div class="name">电压</div>
<div class="code-name">&amp;#xe665;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe758;</span>
<div class="name">三相电压幅值不平衡</div>
<div class="code-name">&amp;#xe758;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">电压总谐波畸变率</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">闪变</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">停运事件管理</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">在运设备</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe666;</span>
<div class="name">异常类_14非智能表在运异常</div>
<div class="code-name">&amp;#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe82f;</span>
<div class="name">综合评价</div>
@@ -234,9 +282,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1744179175277') format('woff2'),
url('iconfont.woff?t=1744179175277') format('woff'),
url('iconfont.ttf?t=1744179175277') format('truetype');
src: url('iconfont.woff2?t=1765612648830') format('woff2'),
url('iconfont.woff?t=1765612648830') format('woff'),
url('iconfont.ttf?t=1765612648830') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@@ -262,6 +310,78 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-a-253_ipower"></span>
<div class="name">
253_ipower
</div>
<div class="code-name">.icon-a-253_ipower
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianya"></span>
<div class="name">
电压
</div>
<div class="code-name">.icon-dianya
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sanxiangdianyafuzhibupingheng"></span>
<div class="name">
三相电压幅值不平衡
</div>
<div class="code-name">.icon-sanxiangdianyafuzhibupingheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianyazongxiebojibianshuai"></span>
<div class="name">
电压总谐波畸变率
</div>
<div class="code-name">.icon-dianyazongxiebojibianshuai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shanbian"></span>
<div class="name">
闪变
</div>
<div class="code-name">.icon-shanbian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tingyunshijianguanli"></span>
<div class="name">
停运事件管理
</div>
<div class="code-name">.icon-tingyunshijianguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zaiyunshebei"></span>
<div class="name">
在运设备
</div>
<div class="code-name">.icon-zaiyunshebei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang"></span>
<div class="name">
异常类_14非智能表在运异常
</div>
<div class="code-name">.icon-yichanglei_14feizhinengbiaozaiyunyichang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zonghepingjia1"></span>
<div class="name">
@@ -532,6 +652,70 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-253_ipower"></use>
</svg>
<div class="name">253_ipower</div>
<div class="code-name">#icon-a-253_ipower</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianya"></use>
</svg>
<div class="name">电压</div>
<div class="code-name">#icon-dianya</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sanxiangdianyafuzhibupingheng"></use>
</svg>
<div class="name">三相电压幅值不平衡</div>
<div class="code-name">#icon-sanxiangdianyafuzhibupingheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianyazongxiebojibianshuai"></use>
</svg>
<div class="name">电压总谐波畸变率</div>
<div class="code-name">#icon-dianyazongxiebojibianshuai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shanbian"></use>
</svg>
<div class="name">闪变</div>
<div class="code-name">#icon-shanbian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tingyunshijianguanli"></use>
</svg>
<div class="name">停运事件管理</div>
<div class="code-name">#icon-tingyunshijianguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zaiyunshebei"></use>
</svg>
<div class="name">在运设备</div>
<div class="code-name">#icon-zaiyunshebei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yichanglei_14feizhinengbiaozaiyunyichang"></use>
</svg>
<div class="name">异常类_14非智能表在运异常</div>
<div class="code-name">#icon-yichanglei_14feizhinengbiaozaiyunyichang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zonghepingjia1"></use>

View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3482754 */
src: url('iconfont.woff2?t=1744179175277') format('woff2'),
url('iconfont.woff?t=1744179175277') format('woff'),
url('iconfont.ttf?t=1744179175277') format('truetype');
src: url('iconfont.woff2?t=1765612648830') format('woff2'),
url('iconfont.woff?t=1765612648830') format('woff'),
url('iconfont.ttf?t=1765612648830') format('truetype');
}
.iconfont {
@@ -13,6 +13,38 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-a-253_ipower:before {
content: "\e782";
}
.icon-dianya:before {
content: "\e665";
}
.icon-sanxiangdianyafuzhibupingheng:before {
content: "\e758";
}
.icon-dianyazongxiebojibianshuai:before {
content: "\e61e";
}
.icon-shanbian:before {
content: "\e612";
}
.icon-tingyunshijianguanli:before {
content: "\e65d";
}
.icon-zaiyunshebei:before {
content: "\e604";
}
.icon-yichanglei_14feizhinengbiaozaiyunyichang:before {
content: "\e666";
}
.icon-zonghepingjia1:before {
content: "\e82f";
}

File diff suppressed because one or more lines are too long

View File

@@ -5,6 +5,62 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "33424624",
"name": "253_ipower",
"font_class": "a-253_ipower",
"unicode": "e782",
"unicode_decimal": 59266
},
{
"icon_id": "12331657",
"name": "电压",
"font_class": "dianya",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "33073330",
"name": "三相电压幅值不平衡",
"font_class": "sanxiangdianyafuzhibupingheng",
"unicode": "e758",
"unicode_decimal": 59224
},
{
"icon_id": "37400988",
"name": "电压总谐波畸变率",
"font_class": "dianyazongxiebojibianshuai",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "43700638",
"name": "闪变",
"font_class": "shanbian",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "25458995",
"name": "停运事件管理",
"font_class": "tingyunshijianguanli",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "35341056",
"name": "在运设备",
"font_class": "zaiyunshebei",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "22630860",
"name": "异常类_14非智能表在运异常",
"font_class": "yichanglei_14feizhinengbiaozaiyunyichang",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "32402696",
"name": "综合评价",

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
src/assets/img/amplify.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/img/inlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/assets/img/reduce.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/img/region.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

295
src/assets/img/view.vue Normal file
View File

@@ -0,0 +1,295 @@
<template>
<div class="default-main">
<!-- <div class=" layoutHeader">
<div class="title">{{title}}</div>
<back-component />
</div> -->
<TableHeader :showSearch="false">
<template v-slot:select>
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
</el-form-item>
</template>
<template v-slot:operation>
<back-component />
</template>
</TableHeader>
<GridLayout
v-model:layout="layout"
:row-height="rowHeight"
:is-resizable="false"
:is-draggable="false"
:responsive="false"
:vertical-compact="false"
prevent-collision
:col-num="12"
>
<template #item="{ item }">
<div class="box">
<div class="title">
<div style="display: flex; align-items: center">
<Icon class="HelpFilled" :name="item.icon" />
{{ item.name }}
</div>
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
<img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
</div>
<div>
<component
:is="item.component"
v-if="item.component"
class="pd10"
:key="key"
:timeValue="datePickerRef.timeValue"
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
:width="rowWidth * item.w - 30 + 'px'"
:timeKey="item.timeKey"
/>
<div v-else class="pd10">组件加载失败...</div>
</div>
</div>
</template>
</GridLayout>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, type Component } from 'vue'
import { GridLayout } from 'grid-layout-plus'
import { useDebounceFn } from '@vueuse/core'
import { useRouter } from 'vue-router'
import TableHeader from '@/components/table/header/index.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import BackComponent from '@/components/icon/back/index.vue'
import { queryById } from '@/api/system-boot/csstatisticalset'
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
// defineOptions({
// name: 'cockpit/view'
// })
const { query } = useRoute()
// 定义类型
interface LayoutItem {
x: number
y: number
w: number
h: number
i: string | number
name: string
path: string
component?: Component | string
loading?: boolean
error?: any
}
const datePickerRef = ref()
const title = ref('')
const key = ref(0)
const img = new URL(`@/assets/img/amplify.png`, import.meta.url)
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url)
// 响应式数据
const rowHeight = ref(0)
const rowWidth = ref(0)
const layout: any = ref<LayoutItem[]>([
// {
// x: 4,
// y: 0,
// w: 4,
// h: 2,
// i: '1',
// name: '',
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
// },
])
const layoutCopy = ref<LayoutItem[]>([])
const flag = ref(true)
// 组件映射
const componentMap = reactive(new Map<string, Component | string>())
// 获取主内容区域高度
const getMainHeight = () => {
const elMain = document.querySelector('.el-main')
return (elMain?.offsetHeight || 0) - 70
}
// 获取主内容区域高度
const getMainWidth = () => {
const elMain = document.querySelector('.el-main')
return (elMain?.offsetWidth || 0) - 20
}
// 初始化行高
const initRowHeight = () => {
rowHeight.value = Math.max(0, (getMainHeight() - 72) / 6)
rowWidth.value = Math.max(0, getMainWidth() / 12)
}
// 动态注册组件
const registerComponent = (path: string): Component | string | null => {
if (!path) return null
const cacheKey = path
// 使用缓存的组件
if (componentMap.has(cacheKey)) {
return componentMap.get(cacheKey)!
}
try {
// 动态导入组件
const modules = import.meta.glob('@/**/*.vue')
if (!modules[path]) {
console.error(`组件加载失败: ${path}`)
return null
}
const AsyncComponent = defineAsyncComponent({
loader: modules[path],
loadingComponent: () => h('div', '加载中...'),
errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
delay: 200,
timeout: 10000
})
// 保存到映射中
componentMap.set(cacheKey, markRaw(AsyncComponent))
return AsyncComponent
} catch (error) {
console.error('注册组件失败:', error)
return null
}
}
// 缩放
const zoom = (value: any) => {
if (flag.value) {
layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
} else {
layout.value = layoutCopy.value.map((item, index) => ({
...item,
i: item.i || index, // 确保有唯一标识
component: registerComponent(item.path)
}))
}
flag.value = !flag.value
key.value += 1
}
// 获取布局数据
const fetchLayoutData = async () => {
try {
const { data } = await queryById({ id: query.id })
title.value = data.pageName + '_预览'
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
// 处理布局数据
layout.value = parsedLayout.map((item, index) => ({
...item,
i: item.i || index, // 确保有唯一标识
component: registerComponent(item.path)
}))
layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
} catch (error) {
console.error('获取布局数据失败:', error)
// 可以添加错误提示逻辑
}
}
// 计算组件高度
const seRowHeight = (value: any) => {
if (value == 6) return 0
if (value == 5) return 12
if (value == 4) return 20
if (value == 3) return 30
if (value == 2) return 40
if (value == 1) return 50
return 0
}
// 窗口大小变化处理 - 使用防抖
const handleResize = useDebounceFn(() => {
initRowHeight()
key.value += 1
}, 200)
// 生命周期钩子
onMounted(() => {
initRowHeight()
fetchLayoutData()
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
// 移除监听器防止内存泄漏
window.removeEventListener('resize', handleResize)
})
</script>
<style lang="scss" scoped>
.vgl-layout {
background-color: #f8f9fa;
border-radius: 4px;
overflow: hidden;
}
:deep(.vgl-item:not(.vgl-item--placeholder)) {
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
:deep(.vgl-item:hover:not(.vgl-item--placeholder)) {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}
:deep(.vgl-item--static) {
background-color: #f0f2f5;
}
.text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #606266;
}
:deep(.vgl-item) {
overflow: hidden;
}
.box {
overflow: hidden;
.title {
border-bottom: 1px solid #000;
font-size: 14px;
height: 30px;
font-weight: 600;
padding: 0px 10px;
color: #fff;
background-color: var(--el-color-primary);
display: flex;
align-items: center;
justify-content: space-between;
}
.HelpFilled {
height: 16px;
width: 16px;
color: #fff !important;
margin-right: 5px;
}
}
.layoutHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
font-size: 16px;
.title {
font-weight: 600;
}
}
</style>

BIN
src/assets/imgs/m0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/imgs/m1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/imgs/m2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/imgs/m3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/imgs/m4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/logo/海南.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/logo/灿能.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/logo/电网.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

BIN
src/assets/logo/电网1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

View File

@@ -1,46 +1,46 @@
<!-- 数据字典 Select 选择器 -->
<template>
<el-select class="w-1/1" v-bind="attrs">
<template v-if="valueType === 'int'">
<el-option
v-for="(dict, index) in getIntDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
<template v-if="valueType === 'str'">
<el-option
v-for="(dict, index) in getStrDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
<template v-if="valueType === 'bool'">
<el-option
v-for="(dict, index) in getBoolDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
</el-select>
</template>
<script lang="ts" setup>
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
// 接受父组件参数
interface Props {
dictType: string // 字典类型
valueType: string // 字典值类型
}
withDefaults(defineProps<Props>(), {
dictType: '',
valueType: 'str'
})
const attrs = useAttrs()
defineOptions({ name: 'DictSelect' })
</script>
<!-- 数据字典 Select 选择器 -->
<template>
<el-select class="w-1/1" v-bind="attrs" filterable>
<template v-if="valueType === 'int'">
<el-option
v-for="(dict, index) in getIntDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
<template v-if="valueType === 'str'">
<el-option
v-for="(dict, index) in getStrDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
<template v-if="valueType === 'bool'">
<el-option
v-for="(dict, index) in getBoolDictOptions(dictType)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</template>
</el-select>
</template>
<script lang="ts" setup>
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
// 接受父组件参数
interface Props {
dictType: string // 字典类型
valueType: string // 字典值类型
}
withDefaults(defineProps<Props>(), {
dictType: '',
valueType: 'str'
})
const attrs = useAttrs()
defineOptions({ name: 'DictSelect' })
</script>

View File

@@ -23,7 +23,7 @@ export function upper(str) {
}
export function makeOptionsRule(t, to, userOptions) {
console.log(userOptions[0])
//console.log(userOptions[0])
const options = [
{ label: t('props.optionsType.struct'), value: 0 },
{ label: t('props.optionsType.json'), value: 1 },

View File

@@ -1,11 +1,19 @@
<template>
<div style="overflow: auto; height: 100vh">
<vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
<vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" :options="excelOptions" />
<vue-office-docx v-if="urlKey.includes('.doc') || urlKey.includes('.docx')" :src="url" />
<vue-office-excel
v-if="urlKey.includes('.xls') || urlKey.includes('.xlsx')"
:src="url"
:options="excelOptions"
/>
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
<img v-if="url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')"
:src="url" />
<iframe v-if="urlKey.includes('.pdf')||urlKey.includes('.txt')" :src="url" style="width: 100%; height: 99%"></iframe>
<img
v-if="
urlKey.includes('.png') || urlKey.includes('.jpg') || urlKey.includes('.gif') || urlKey.includes('.bmp')
"
:src="url"
/>
</div>
</template>
<script lang="ts" setup>
@@ -18,15 +26,34 @@ import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
const { push, options, currentRoute } = useRouter()
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
import { downloadFile } from '@/api/system-boot/file'
import { previewFile } from '@/utils/fileDownLoad'
const { push, options, currentRoute } = useRouter()
const VITE_FLAG = false//import.meta.env.VITE_NAME == 'jibei'
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
const url = ref('')
const excelOptions = ref({})
const urlKey = currentRoute.value?.href?.split('?')[1]
if (VITE_FLAG) {
url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
excelOptions.value = ref({
xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
})
} else {
setTimeout(async () => {
const previewUrl = await previewFile(currentRoute.value?.href?.split('?')[1])
url.value = previewUrl
excelOptions.value = ref({
xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
})
}, 0)
}
const url = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
console.log("🚀 ~ url:", url)
const excelOptions = ref({
xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
})
onMounted(() => {
// 从路由参数获取文件路径
console.log()
})
</script>

View File

@@ -1,310 +1,310 @@
<template>
<div class="w100">
<!-- el-select 的远程下拉只在有搜索词时才会加载数据显示出 option 列表 -->
<!-- 使用 el-popover 在无数据/无搜索词时显示一个无数据的提醒 -->
<el-popover
width="100%"
placement="bottom"
popper-class="remote-select-popper"
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
:teleported="false"
:content="$t('utils.No data')"
>
<template #reference>
<el-select
ref="selectRef"
class="w100"
@focus="onFocus"
@blur="onBlur"
:loading="state.loading || state.accidentBlur"
:filterable="true"
:remote="true"
clearable
remote-show-suffix
:remote-method="onLogKeyword"
v-model="state.value"
@change="onChangeSelect"
:multiple="multiple"
:key="state.selectKey"
@clear="onClear"
@visible-change="onVisibleChange"
v-bind="$attrs"
>
<el-option
class="remote-select-option"
v-for="item in state.options"
:label="item[field]"
:value="item[state.primaryKey].toString()"
:key="item[state.primaryKey]"
>
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
<template #content>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
</template>
<div>{{ item[field] }}</div>
</el-tooltip>
</el-option>
<el-pagination
v-if="state.total"
:currentPage="state.currentPage"
:page-size="state.pageSize"
class="select-pagination"
layout="->, prev, next"
:total="state.total"
@current-change="onSelectCurrentPageChange"
/>
</el-select>
</template>
</el-popover>
</div>
</template>
<script setup lang="ts">
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
import { getSelectData } from '@/api/common'
import { uuid } from '@/utils/random'
import type { ElSelect } from 'element-plus'
import { isEmpty } from 'lodash-es'
import { getArrayKey } from '@/utils/common'
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
type valType = string | number | string[] | number[]
interface Props extends /* @vue-ignore */ ElSelectProps {
pk?: string
field?: string
params?: anyObj
multiple?: boolean
remoteUrl: string
modelValue: valType
labelFormatter?: (optionData: anyObj, optionKey: string) => string
tooltipParams?: anyObj
}
const props = withDefaults(defineProps<Props>(), {
pk: 'id',
field: 'name',
params: () => {
return {}
},
remoteUrl: '',
modelValue: '',
multiple: false,
tooltipParams: () => {
return {}
},
})
const state: {
// 主表字段名(不带表别名)
primaryKey: string
options: anyObj[]
loading: boolean
total: number
currentPage: number
pageSize: number
params: anyObj
keyword: string
value: valType
selectKey: string
initializeData: boolean
accidentBlur: boolean
focusStatus: boolean
} = reactive({
primaryKey: props.pk,
options: [],
loading: false,
total: 0,
currentPage: 1,
pageSize: 10,
params: props.params,
keyword: '',
value: props.modelValue ? props.modelValue : '',
selectKey: uuid(),
initializeData: false,
accidentBlur: false,
focusStatus: false,
})
let io: null | IntersectionObserver = null
const instance = getCurrentInstance()
const emits = defineEmits<{
(e: 'update:modelValue', value: valType): void
(e: 'row', value: any): void
}>()
const onChangeSelect = (val: valType) => {
emits('update:modelValue', val)
if (typeof instance?.vnode.props?.onRow == 'function') {
let pkArr = props.pk.split('.')
let pk = pkArr[pkArr.length - 1]
if (typeof val == 'number' || typeof val == 'string') {
const dataKey = getArrayKey(state.options, pk, val.toString())
emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
} else {
const valueArr = []
for (const key in val) {
let dataKey = getArrayKey(state.options, pk, val[key].toString())
if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
}
emits('row', valueArr)
}
}
}
const onVisibleChange = (val: boolean) => {
// 保持面板状态和焦点状态一致
if (!val) {
nextTick(() => {
selectRef.value?.blur()
})
}
}
const onFocus = () => {
state.focusStatus = true
if (selectRef.value?.query != state.keyword) {
state.keyword = ''
state.initializeData = false
// el-select 自动清理搜索词会产生意外的脱焦
state.accidentBlur = true
}
if (!state.initializeData) {
getData()
}
}
const onBlur = () => {
state.focusStatus = false
}
const onClear = () => {
state.keyword = ''
state.initializeData = false
}
const onLogKeyword = (q: string) => {
if (state.keyword != q) {
state.keyword = q
getData()
}
}
const getData = (initValue: valType = '') => {
state.loading = true
state.params.page = state.currentPage
state.params.initKey = props.pk
state.params.initValue = initValue
getSelectData(props.remoteUrl, state.keyword, state.params)
.then((res) => {
let initializeData = true
let opts = res.data.options ? res.data.options : res.data.list
if (typeof props.labelFormatter == 'function') {
for (const key in opts) {
opts[key][props.field] = props.labelFormatter(opts[key], key)
}
}
state.options = opts
state.total = res.data.total ?? 0
if (initValue) {
// 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
state.selectKey = uuid()
initializeData = false
}
state.loading = false
state.initializeData = initializeData
if (state.accidentBlur) {
nextTick(() => {
const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
inputEl && inputEl.focus()
state.accidentBlur = false
})
}
})
.catch(() => {
state.loading = false
})
}
const onSelectCurrentPageChange = (val: number) => {
state.currentPage = val
getData()
}
const initDefaultValue = () => {
if (state.value) {
// number[]转string[]确保默认值能够选中
if (typeof state.value === 'object') {
for (const key in state.value as string[]) {
state.value[key] = state.value[key].toString()
}
} else if (typeof state.value === 'number') {
state.value = state.value.toString()
}
getData(state.value)
}
}
onMounted(() => {
if (props.pk.indexOf('.') > 0) {
let pk = props.pk.split('.')
state.primaryKey = pk[1] ? pk[1] : pk[0]
}
initDefaultValue()
setTimeout(() => {
if (window?.IntersectionObserver) {
io = new IntersectionObserver((entries) => {
for (const key in entries) {
if (!entries[key].isIntersecting) selectRef.value?.blur()
}
})
if (selectRef.value?.$el instanceof Element) {
io.observe(selectRef.value.$el)
}
}
}, 500)
})
onUnmounted(() => {
io?.disconnect()
})
watch(
() => props.modelValue,
(newVal) => {
if (String(state.value) != String(newVal)) {
state.value = newVal ? newVal : ''
initDefaultValue()
}
}
)
const getSelectRef = () => {
return selectRef.value
}
const focus = () => {
selectRef.value?.focus()
}
const blur = () => {
selectRef.value?.blur()
}
defineExpose({
blur,
focus,
getSelectRef,
})
</script>
<style scoped lang="scss">
:deep(.remote-select-popper) {
text-align: center;
}
.remote-select-option {
white-space: pre;
}
</style>
<template>
<div class="w100">
<!-- el-select 的远程下拉只在有搜索词时才会加载数据显示出 option 列表 -->
<!-- 使用 el-popover 在无数据/无搜索词时显示一个无数据的提醒 -->
<el-popover
width="100%"
placement="bottom"
popper-class="remote-select-popper"
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
:teleported="false"
:content="$t('utils.No data')"
>
<template #reference>
<el-select
ref="selectRef"
class="w100"
@focus="onFocus"
@blur="onBlur"
:loading="state.loading || state.accidentBlur"
:filterable="true"
:remote="true"
clearable
remote-show-suffix
:remote-method="onLogKeyword"
v-model="state.value"
@change="onChangeSelect"
:multiple="multiple"
:key="state.selectKey"
@clear="onClear"
@visible-change="onVisibleChange"
v-bind="$attrs"
>
<el-option
class="remote-select-option"
v-for="item in state.options"
:label="item[field]"
:value="item[state.primaryKey].toString()"
:key="item[state.primaryKey]"
>
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
<template #content>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
</template>
<div>{{ item[field] }}</div>
</el-tooltip>
</el-option>
<el-pagination
v-if="state.total"
:currentPage="state.currentPage"
:page-size="state.pageSize"
class="select-pagination"
layout="->, prev, next"
:total="state.total"
@current-change="onSelectCurrentPageChange"
/>
</el-select>
</template>
</el-popover>
</div>
</template>
<script setup lang="ts">
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
// import { getSelectData } from '@/api/common'
import { uuid } from '@/utils/random'
import type { ElSelect } from 'element-plus'
import { isEmpty } from 'lodash-es'
// import { getArrayKey } from '@/utils/common'
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
type valType = string | number | string[] | number[]
interface Props extends /* @vue-ignore */ ElSelectProps {
pk?: string
field?: string
params?: anyObj
multiple?: boolean
remoteUrl: string
modelValue: valType
labelFormatter?: (optionData: anyObj, optionKey: string) => string
tooltipParams?: anyObj
}
const props = withDefaults(defineProps<Props>(), {
pk: 'id',
field: 'name',
params: () => {
return {}
},
remoteUrl: '',
modelValue: '',
multiple: false,
tooltipParams: () => {
return {}
},
})
const state: {
// 主表字段名(不带表别名)
primaryKey: string
options: anyObj[]
loading: boolean
total: number
currentPage: number
pageSize: number
params: anyObj
keyword: string
value: valType
selectKey: string
initializeData: boolean
accidentBlur: boolean
focusStatus: boolean
} = reactive({
primaryKey: props.pk,
options: [],
loading: false,
total: 0,
currentPage: 1,
pageSize: 10,
params: props.params,
keyword: '',
value: props.modelValue ? props.modelValue : '',
selectKey: uuid(),
initializeData: false,
accidentBlur: false,
focusStatus: false,
})
let io: null | IntersectionObserver = null
const instance = getCurrentInstance()
const emits = defineEmits<{
(e: 'update:modelValue', value: valType): void
(e: 'row', value: any): void
}>()
const onChangeSelect = (val: valType) => {
emits('update:modelValue', val)
if (typeof instance?.vnode.props?.onRow == 'function') {
let pkArr = props.pk.split('.')
let pk = pkArr[pkArr.length - 1]
if (typeof val == 'number' || typeof val == 'string') {
// const dataKey = getArrayKey(state.options, pk, val.toString())
// emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
} else {
// const valueArr = []
// for (const key in val) {
// let dataKey = getArrayKey(state.options, pk, val[key].toString())
// if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
// }
// emits('row', valueArr)
}
}
}
const onVisibleChange = (val: boolean) => {
// 保持面板状态和焦点状态一致
if (!val) {
nextTick(() => {
selectRef.value?.blur()
})
}
}
const onFocus = () => {
state.focusStatus = true
if (selectRef.value?.query != state.keyword) {
state.keyword = ''
state.initializeData = false
// el-select 自动清理搜索词会产生意外的脱焦
state.accidentBlur = true
}
if (!state.initializeData) {
getData()
}
}
const onBlur = () => {
state.focusStatus = false
}
const onClear = () => {
state.keyword = ''
state.initializeData = false
}
const onLogKeyword = (q: string) => {
if (state.keyword != q) {
state.keyword = q
getData()
}
}
const getData = (initValue: valType = '') => {
state.loading = true
state.params.page = state.currentPage
state.params.initKey = props.pk
state.params.initValue = initValue
// getSelectData(props.remoteUrl, state.keyword, state.params)
// .then((res) => {
// let initializeData = true
// let opts = res.data.options ? res.data.options : res.data.list
// if (typeof props.labelFormatter == 'function') {
// for (const key in opts) {
// opts[key][props.field] = props.labelFormatter(opts[key], key)
// }
// }
// state.options = opts
// state.total = res.data.total ?? 0
// if (initValue) {
// // 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
// state.selectKey = uuid()
// initializeData = false
// }
// state.loading = false
// state.initializeData = initializeData
// if (state.accidentBlur) {
// nextTick(() => {
// const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
// inputEl && inputEl.focus()
// state.accidentBlur = false
// })
// }
// })
// .catch(() => {
// state.loading = false
// })
}
const onSelectCurrentPageChange = (val: number) => {
state.currentPage = val
getData()
}
const initDefaultValue = () => {
if (state.value) {
// number[]转string[]确保默认值能够选中
if (typeof state.value === 'object') {
for (const key in state.value as string[]) {
state.value[key] = state.value[key].toString()
}
} else if (typeof state.value === 'number') {
state.value = state.value.toString()
}
getData(state.value)
}
}
onMounted(() => {
if (props.pk.indexOf('.') > 0) {
let pk = props.pk.split('.')
state.primaryKey = pk[1] ? pk[1] : pk[0]
}
initDefaultValue()
setTimeout(() => {
if (window?.IntersectionObserver) {
io = new IntersectionObserver((entries) => {
for (const key in entries) {
if (!entries[key].isIntersecting) selectRef.value?.blur()
}
})
if (selectRef.value?.$el instanceof Element) {
io.observe(selectRef.value.$el)
}
}
}, 500)
})
onUnmounted(() => {
io?.disconnect()
})
watch(
() => props.modelValue,
(newVal) => {
if (String(state.value) != String(newVal)) {
state.value = newVal ? newVal : ''
initDefaultValue()
}
}
)
const getSelectRef = () => {
return selectRef.value
}
const focus = () => {
selectRef.value?.focus()
}
const blur = () => {
selectRef.value?.blur()
}
defineExpose({
blur,
focus,
getSelectRef,
})
</script>
<style scoped lang="scss">
:deep(.remote-select-popper) {
text-align: center;
}
.remote-select-option {
white-space: pre;
}
</style>

View File

@@ -1,414 +1,414 @@
<script lang="ts">
import type { PropType, VNode } from 'vue'
import type { modelValueTypes, InputAttr, InputData } from '@/components/baInput'
import { createVNode, resolveComponent, defineComponent, computed, reactive } from 'vue'
import { inputTypes } from '@/components/baInput'
import Array from '@/components/baInput/components/array.vue'
import RemoteSelect from '@/components/baInput/components/remoteSelect.vue'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
import Editor from '@/components/baInput/components/editor.vue'
import { getArea } from '@/api/common'
export default defineComponent({
name: 'baInput',
props: {
// 输入框类型,支持的输入框见 inputTypes
type: {
type: String,
required: true,
validator: (value: string) => {
return inputTypes.includes(value)
},
},
// 双向绑定值
modelValue: {
type: null,
required: true,
},
// 输入框的附加属性
attr: {
type: Object as PropType<InputAttr>,
default: () => {},
},
// 额外数据,radio、checkbox的选项等数据
data: {
type: Object as PropType<InputData>,
default: () => {},
},
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const onValueUpdate = (value: modelValueTypes) => {
emit('update:modelValue', value)
}
// 子级元素属性
let childrenAttr = props.data && props.data.childrenAttr ? props.data.childrenAttr : {}
// string number textarea password
const sntp = () => {
return () =>
createVNode(resolveComponent('el-input'), {
type: props.type == 'string' ? 'text' : props.type,
...props.attr,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// radio checkbox
const rc = () => {
if (!props.data || !props.data.content) {
console.warn('请传递 ' + props.type + '的 content')
}
let vNode: VNode[] = []
for (const key in props.data.content) {
vNode.push(
createVNode(
resolveComponent('el-' + props.type),
{
label: key,
...childrenAttr,
},
() => props.data.content[key]
)
)
}
return () => {
const valueComputed = computed(() => {
if (props.type == 'radio') {
if (props.modelValue == undefined) return ''
return '' + props.modelValue
} else {
let modelValueArr: anyObj = []
for (const key in props.modelValue) {
modelValueArr[key] = '' + props.modelValue[key]
}
return modelValueArr
}
})
return createVNode(
resolveComponent('el-' + props.type + '-group'),
{
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
)
}
}
// select selects
const select = () => {
let vNode: VNode[] = []
if (!props.data || !props.data.content) {
console.warn('请传递 ' + props.type + '的 content')
}
for (const key in props.data.content) {
vNode.push(
createVNode(resolveComponent('el-option'), {
key: key,
label: props.data.content[key],
value: key,
...childrenAttr,
})
)
}
return () => {
const valueComputed = computed(() => {
if (props.type == 'select') {
if (props.modelValue == undefined) return ''
return '' + props.modelValue
} else {
let modelValueArr: anyObj = []
for (const key in props.modelValue) {
modelValueArr[key] = '' + props.modelValue[key]
}
return modelValueArr
}
})
return createVNode(
resolveComponent('el-select'),
{
class: 'w100',
multiple: props.type == 'select' ? false : true,
clearable: true,
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
)
}
}
// datetime
const datetime = () => {
let valueFormat = 'YYYY-MM-DD HH:mm:ss'
switch (props.type) {
case 'date':
valueFormat = 'YYYY-MM-DD'
break
case 'year':
valueFormat = 'YYYY'
break
}
return () =>
createVNode(resolveComponent('el-date-picker'), {
class: 'w100',
type: props.type,
'value-format': valueFormat,
...props.attr,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// remoteSelect remoteSelects
const remoteSelect = () => {
return () =>
createVNode(RemoteSelect, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
multiple: props.type == 'remoteSelect' ? false : true,
...props.attr,
})
}
const buildFun = new Map([
['string', sntp],
['number', sntp],
['textarea', sntp],
['password', sntp],
['radio', rc],
['checkbox', rc],
[
'switch',
() => {
const valueType = computed(() => typeof props.modelValue)
const valueComputed = computed(() => {
if (valueType.value === 'boolean') {
return props.modelValue
} else {
let valueTmp = parseInt(props.modelValue as string)
return isNaN(valueTmp) || valueTmp <= 0 ? false : true
}
})
return () =>
createVNode(resolveComponent('el-switch'), {
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': (value: boolean) => {
let newValue: boolean | string | number = value
switch (valueType.value) {
case 'string':
newValue = value ? '1' : '0'
break
case 'number':
newValue = value ? 1 : 0
}
emit('update:modelValue', newValue)
},
})
},
],
['datetime', datetime],
[
'year',
() => {
return () => {
const valueComputed = computed(() => (!props.modelValue ? null : '' + props.modelValue))
return createVNode(resolveComponent('el-date-picker'), {
class: 'w100',
type: props.type,
'value-format': 'YYYY',
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
}
},
],
['date', datetime],
[
'time',
() => {
const valueComputed = computed(() => {
if (props.modelValue instanceof Date) {
return props.modelValue
} else if (!props.modelValue) {
return ''
} else {
let date = new Date()
return new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + props.modelValue)
}
})
return () =>
createVNode(resolveComponent('el-time-picker'), {
class: 'w100',
clearable: true,
format: 'HH:mm:ss',
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
},
],
['select', select],
['selects', select],
[
'array',
() => {
return () =>
createVNode(Array, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
['remoteSelect', remoteSelect],
['remoteSelects', remoteSelect],
[
'city',
() => {
type Node = { value?: number; label?: string; leaf?: boolean }
let maxLevel = props.data && props.data.level ? props.data.level - 1 : 2
const lastLazyValue: {
value: string | number[] | unknown
nodes: Node[]
key: string
currentRequest: any
} = reactive({
value: 'ready',
nodes: [],
key: '',
currentRequest: null,
})
// 请求到的node备份-s
let nodeEbak: anyObj = {}
const getNodes = (level: number, key: string) => {
if (nodeEbak[level] && nodeEbak[level][key]) {
return nodeEbak[level][key]
}
return false
}
const setNodes = (level: number, key: string, nodes: Node[] = []) => {
if (!nodeEbak[level]) {
nodeEbak[level] = {}
}
nodeEbak[level][key] = nodes
}
// 请求到的node备份-e
return () =>
createVNode(resolveComponent('el-cascader'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
class: 'w100',
clearable: true,
props: {
lazy: true,
lazyLoad(node: any, resolve: any) {
// lazyLoad会频繁触发,在本地存储请求结果,供重复触发时直接读取
const { level, pathValues } = node
let key = pathValues.join(',')
key = key ? key : 'init'
let locaNode = getNodes(level, key)
if (locaNode) {
return resolve(locaNode)
}
if (lastLazyValue.key == key && lastLazyValue.value == props.modelValue) {
if (lastLazyValue.currentRequest) {
return lastLazyValue.currentRequest
}
return resolve(lastLazyValue.nodes)
}
let nodes: Node[] = []
lastLazyValue.key = key
lastLazyValue.value = props.modelValue
lastLazyValue.currentRequest = getArea(pathValues).then((res) => {
let toStr = false
if (props.modelValue && typeof (props.modelValue as anyObj)[0] === 'string') {
toStr = true
}
for (const key in res.data) {
if (toStr) {
res.data[key].value = res.data[key].value.toString()
}
res.data[key].leaf = level >= maxLevel
nodes.push(res.data[key])
}
lastLazyValue.nodes = nodes
lastLazyValue.currentRequest = null
setNodes(level, key, nodes)
resolve(nodes)
})
},
},
...props.attr,
})
},
],
['image', upload],
['images', upload],
['file', upload],
['files', upload],
[
'icon',
() => {
return () =>
createVNode(IconSelector, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'color',
() => {
return () =>
createVNode(resolveComponent('el-color-picker'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'editor',
() => {
return () =>
createVNode(Editor, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'default',
() => {
console.warn('暂不支持' + props.type + '的输入框类型,你可以自行在 BaInput 组件内添加逻辑')
},
],
])
let action = buildFun.get(props.type) || buildFun.get('default')
return action!.call(this)
},
})
</script>
<style scoped lang="scss">
.ba-upload-image :deep(.el-upload--picture-card) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ba-upload-file :deep(.el-upload-list) {
margin-left: -10px;
}
</style>
<script lang="ts">
import type { PropType, VNode } from 'vue'
import type { modelValueTypes, InputAttr, InputData } from '@/components/baInput'
import { createVNode, resolveComponent, defineComponent, computed, reactive } from 'vue'
import { inputTypes } from '@/components/baInput'
import Array from '@/components/baInput/components/array.vue'
import RemoteSelect from '@/components/baInput/components/remoteSelect.vue'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
import Editor from '@/components/baInput/components/editor.vue'
// import { getArea } from '@/api/common'
export default defineComponent({
name: 'baInput',
props: {
// 输入框类型,支持的输入框见 inputTypes
type: {
type: String,
required: true,
validator: (value: string) => {
return inputTypes.includes(value)
},
},
// 双向绑定值
modelValue: {
type: null,
required: true,
},
// 输入框的附加属性
attr: {
type: Object as PropType<InputAttr>,
default: () => {},
},
// 额外数据,radio、checkbox的选项等数据
data: {
type: Object as PropType<InputData>,
default: () => {},
},
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const onValueUpdate = (value: modelValueTypes) => {
emit('update:modelValue', value)
}
// 子级元素属性
let childrenAttr = props.data && props.data.childrenAttr ? props.data.childrenAttr : {}
// string number textarea password
const sntp = () => {
return () =>
createVNode(resolveComponent('el-input'), {
type: props.type == 'string' ? 'text' : props.type,
...props.attr,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// radio checkbox
const rc = () => {
if (!props.data || !props.data.content) {
console.warn('请传递 ' + props.type + '的 content')
}
let vNode: VNode[] = []
for (const key in props.data.content) {
vNode.push(
createVNode(
resolveComponent('el-' + props.type),
{
label: key,
...childrenAttr,
},
() => props.data.content[key]
)
)
}
return () => {
const valueComputed = computed(() => {
if (props.type == 'radio') {
if (props.modelValue == undefined) return ''
return '' + props.modelValue
} else {
let modelValueArr: anyObj = []
for (const key in props.modelValue) {
modelValueArr[key] = '' + props.modelValue[key]
}
return modelValueArr
}
})
return createVNode(
resolveComponent('el-' + props.type + '-group'),
{
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
)
}
}
// select selects
const select = () => {
let vNode: VNode[] = []
if (!props.data || !props.data.content) {
console.warn('请传递 ' + props.type + '的 content')
}
for (const key in props.data.content) {
vNode.push(
createVNode(resolveComponent('el-option'), {
key: key,
label: props.data.content[key],
value: key,
...childrenAttr,
})
)
}
return () => {
const valueComputed = computed(() => {
if (props.type == 'select') {
if (props.modelValue == undefined) return ''
return '' + props.modelValue
} else {
let modelValueArr: anyObj = []
for (const key in props.modelValue) {
modelValueArr[key] = '' + props.modelValue[key]
}
return modelValueArr
}
})
return createVNode(
resolveComponent('el-select'),
{
class: 'w100',
multiple: props.type == 'select' ? false : true,
clearable: true,
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
)
}
}
// datetime
const datetime = () => {
let valueFormat = 'YYYY-MM-DD HH:mm:ss'
switch (props.type) {
case 'date':
valueFormat = 'YYYY-MM-DD'
break
case 'year':
valueFormat = 'YYYY'
break
}
return () =>
createVNode(resolveComponent('el-date-picker'), {
class: 'w100',
type: props.type,
'value-format': valueFormat,
...props.attr,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// remoteSelect remoteSelects
const remoteSelect = () => {
return () =>
createVNode(RemoteSelect, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
multiple: props.type == 'remoteSelect' ? false : true,
...props.attr,
})
}
const buildFun = new Map([
['string', sntp],
['number', sntp],
['textarea', sntp],
['password', sntp],
['radio', rc],
['checkbox', rc],
[
'switch',
() => {
const valueType = computed(() => typeof props.modelValue)
const valueComputed = computed(() => {
if (valueType.value === 'boolean') {
return props.modelValue
} else {
let valueTmp = parseInt(props.modelValue as string)
return isNaN(valueTmp) || valueTmp <= 0 ? false : true
}
})
return () =>
createVNode(resolveComponent('el-switch'), {
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': (value: boolean) => {
let newValue: boolean | string | number = value
switch (valueType.value) {
case 'string':
newValue = value ? '1' : '0'
break
case 'number':
newValue = value ? 1 : 0
}
emit('update:modelValue', newValue)
},
})
},
],
['datetime', datetime],
[
'year',
() => {
return () => {
const valueComputed = computed(() => (!props.modelValue ? null : '' + props.modelValue))
return createVNode(resolveComponent('el-date-picker'), {
class: 'w100',
type: props.type,
'value-format': 'YYYY',
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
}
},
],
['date', datetime],
[
'time',
() => {
const valueComputed = computed(() => {
if (props.modelValue instanceof Date) {
return props.modelValue
} else if (!props.modelValue) {
return ''
} else {
let date = new Date()
return new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + props.modelValue)
}
})
return () =>
createVNode(resolveComponent('el-time-picker'), {
class: 'w100',
clearable: true,
format: 'HH:mm:ss',
...props.attr,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
},
],
['select', select],
['selects', select],
[
'array',
() => {
return () =>
createVNode(Array, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
['remoteSelect', remoteSelect],
['remoteSelects', remoteSelect],
[
'city',
() => {
type Node = { value?: number; label?: string; leaf?: boolean }
let maxLevel = props.data && props.data.level ? props.data.level - 1 : 2
const lastLazyValue: {
value: string | number[] | unknown
nodes: Node[]
key: string
currentRequest: any
} = reactive({
value: 'ready',
nodes: [],
key: '',
currentRequest: null,
})
// 请求到的node备份-s
let nodeEbak: anyObj = {}
const getNodes = (level: number, key: string) => {
if (nodeEbak[level] && nodeEbak[level][key]) {
return nodeEbak[level][key]
}
return false
}
const setNodes = (level: number, key: string, nodes: Node[] = []) => {
if (!nodeEbak[level]) {
nodeEbak[level] = {}
}
nodeEbak[level][key] = nodes
}
// 请求到的node备份-e
return () =>
createVNode(resolveComponent('el-cascader'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
class: 'w100',
clearable: true,
props: {
lazy: true,
lazyLoad(node: any, resolve: any) {
// lazyLoad会频繁触发,在本地存储请求结果,供重复触发时直接读取
const { level, pathValues } = node
let key = pathValues.join(',')
key = key ? key : 'init'
let locaNode = getNodes(level, key)
if (locaNode) {
return resolve(locaNode)
}
if (lastLazyValue.key == key && lastLazyValue.value == props.modelValue) {
if (lastLazyValue.currentRequest) {
return lastLazyValue.currentRequest
}
return resolve(lastLazyValue.nodes)
}
let nodes: Node[] = []
lastLazyValue.key = key
lastLazyValue.value = props.modelValue
lastLazyValue.currentRequest = getArea(pathValues).then((res) => {
let toStr = false
if (props.modelValue && typeof (props.modelValue as anyObj)[0] === 'string') {
toStr = true
}
for (const key in res.data) {
if (toStr) {
res.data[key].value = res.data[key].value.toString()
}
res.data[key].leaf = level >= maxLevel
nodes.push(res.data[key])
}
lastLazyValue.nodes = nodes
lastLazyValue.currentRequest = null
setNodes(level, key, nodes)
resolve(nodes)
})
},
},
...props.attr,
})
},
],
['image', upload],
['images', upload],
['file', upload],
['files', upload],
[
'icon',
() => {
return () =>
createVNode(IconSelector, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'color',
() => {
return () =>
createVNode(resolveComponent('el-color-picker'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'editor',
() => {
return () =>
createVNode(Editor, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
})
},
],
[
'default',
() => {
console.warn('暂不支持' + props.type + '的输入框类型,你可以自行在 BaInput 组件内添加逻辑')
},
],
])
let action = buildFun.get(props.type) || buildFun.get('default')
return action!.call(this)
},
})
</script>
<style scoped lang="scss">
.ba-upload-image :deep(.el-upload--picture-card) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ba-upload-file :deep(.el-upload-list) {
margin-left: -10px;
}
</style>

View File

@@ -707,7 +707,7 @@ const processSave = async () => {
// return result.value || '&nbsp;'
// }
onBeforeMount(() => {
console.log(props, 'propspropspropsprops')
//console.log(props, 'propspropspropsprops')
})
onMounted(() => {
initBpmnModeler()

View File

@@ -103,7 +103,7 @@ const highlightDiagram = async () => {
let findProcessTask = false //是否已经高亮了进行中的任务
//进行中高亮之后的任务 key 集合,用于过滤掉 taskList 进行中后面的任务,避免进行中后面的数据 Hover 还有数据
let removeTaskDefinitionKeyList = []
// debugger
//
//芋道这里取值是rootElements[0].flowElements
bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
@@ -135,7 +135,6 @@ const highlightDiagram = async () => {
// 处理 outgoing 出线
const outgoing = getActivityOutgoing(activity)
outgoing?.forEach((nn: any) => {
// debugger
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
// 如果目标活动存在则根据该活动是否结束进行【bpmn:SequenceFlow】连线的高亮设置
if (targetActivity) {
@@ -279,6 +278,27 @@ const getResultCss = (status) => {
return ''
}
const getTaskNameItemType = (itemStatus: any) => {
if (itemStatus === 1) {
return '审批中'
}else if (itemStatus === 2) {
return '审批通过'
}else if (itemStatus === 3) {
return '审批不通过'
}else if (itemStatus === 4) {
return '已取消'
}else if (itemStatus === 5) {
return '退回'
} else if (itemStatus === 6) {
return '委派'
} else if (itemStatus === 7) {
return '审批通过中'
} else if (itemStatus === 0) {
return '待审批'
}
return ''
}
const getActivityOutgoing = (activity) => {
// 如果有 outgoing则直接使用它
if (activity.outgoing && activity.outgoing.length > 0) {
@@ -316,7 +336,9 @@ const elementHover = (element) => {
!overlays.value && (overlays.value = bpmnModeler.get('overlays'))
// 展示信息
// console.log(activityLists.value, 'activityLists.value')
// console.log(element.value, 'element.value')
if (element.value.type === 'bpmn:SequenceFlow') {
return
}
const activity = activityLists.value.find((m) => m.key === element.value.id)
// console.log(activity, 'activityactivityactivityactivity')
if (!activity) {
@@ -330,22 +352,22 @@ const elementHover = (element) => {
if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
html = `<p>发起人:${processInstance.value.startUser.name}</p>
<p>部门:${processInstance.value.startUser.deptName}</p>
<p>创建时间:${formatDate(processInstance.value.createTime)}`
<p>创建时间:${formatDate(processInstance.value.startTime)}`
} else if (element.value.type === 'bpmn:UserTask') {
let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
if (!task) {
return
}
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
let dataResult = ''
optionData.forEach((element) => {
if (element.value == task.status) {
dataResult = element.label
}
})
// let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
// let dataResult = ''
// optionData.forEach((element) => {
// if (element.value == task.status) {
// dataResult = element.label
// }
// })
html = `<p>审批人:${task.assigneeUser.name}</p>
<p>部门:${task.assigneeUser.deptName}</p>
<p>结果:${dataResult}</p>
<p>结果:${getTaskNameItemType(task.status)}</p>
<p>创建时间:${formatDate(task.createTime)}</p>`
// html = `<p>审批人:${task.assigneeUser.nickname}</p>
// <p>部门:${task.assigneeUser.deptName}</p>
@@ -368,20 +390,20 @@ const elementHover = (element) => {
html += `<p>结束时间:${formatDate(activity.endTime)}</p>`
}
} else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
let dataResult = ''
optionData.forEach((element) => {
if (element.value == processInstance.value.status) {
dataResult = element.label
}
})
html = `<p>结果:${dataResult}</p>`
// let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
// let dataResult = ''
// optionData.forEach((element) => {
// if (element.value == processInstance.value.status) {
// dataResult = element.label
// }
// })
// html = `<p>结果:${dataResult}</p>`
// html = `<p>结果:${getIntDictOptions(
// DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
// processInstance.value.status
// )}</p>`
if (processInstance.value.endTime) {
html += `<p>结束时间:${formatDate(processInstance.value.endTime)}</p>`
html = `<p>结束时间:${formatDate(processInstance.value.endTime)}</p>`
}
}
elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
@@ -660,7 +682,7 @@ watch(
}
.element-overlays {
width: 200px;
width: 250px;
padding: 8px;
color: #fafafa;
background: rgb(0 0 0 / 60%);

View File

@@ -15,7 +15,7 @@ const addTask = (event, options: any = {}) => {
const ElementFactory = bpmnInstances().elementFactory
const create = bpmnInstances().modeler.get('create')
console.log(ElementFactory, create)
//console.log(ElementFactory, create)
const shape = ElementFactory.createShape(assign({ type: 'bpmn:UserTask' }, options))
@@ -23,8 +23,8 @@ const addTask = (event, options: any = {}) => {
shape.businessObject.di.isExpanded = options.isExpanded
}
console.log(event, 'event')
console.log(shape, 'shape')
//console.log(event, 'event')
//console.log(shape, 'shape')
create.start(event, shape)
}
</script>

View File

@@ -172,7 +172,7 @@ const unwatchBpmn = watch(
return
}
console.log('props.bpmnModeler 有值了!!!')
//console.log('props.bpmnModeler 有值了!!!')
const w = window as any
w.bpmnInstances = {
modeler: props.bpmnModeler,

View File

@@ -2,14 +2,14 @@
<div class="panel-tab__content">
<el-form :model="flowConditionForm" label-width="90px" size="small">
<el-form-item label="流转类型">
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
<el-select v-model="flowConditionForm.type" @change="updateFlowType" filterable>
<el-option label="普通流转路径" value="normal" />
<el-option label="默认流转路径" value="default" />
<el-option label="条件流转路径" value="condition" />
</el-select>
</el-form-item>
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
<el-select v-model="flowConditionForm.conditionType">
<el-select v-model="flowConditionForm.conditionType" filterable>
<el-option label="表达式" value="expression" />
<el-option label="脚本" value="script" />
</el-select>
@@ -33,7 +33,7 @@
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
</el-form-item>
<el-form-item label="脚本类型" key="scriptType">
<el-select v-model="flowConditionForm.scriptType">
<el-select v-model="flowConditionForm.scriptType" filterable>
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
@@ -179,7 +179,7 @@ onBeforeUnmount(() => {
watch(
() => props.businessObject,
(val) => {
console.log(val, 'val')
//console.log(val, 'val')
nextTick(() => {
resetFlowCondition()
})

View File

@@ -1,481 +1,481 @@
<template>
<div class="panel-tab__content">
<el-form label-width="80px">
<el-form-item label="流程表单">
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<el-select v-model="formKey" clearable @change="updateElementFormKey">
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
</el-select>
</el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column-->
<!-- label="字段类型"-->
<!-- prop="type"-->
<!-- min-width="80px"-->
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="默认值"-->
<!-- prop="defaultValue"-->
<!-- min-width="80px"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <el-drawer-->
<!-- v-model="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :size="`${width}px`"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="formFieldForm" label-width="90px">-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <el-select-->
<!-- v-model="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- clearable-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button> </el-button>-->
<!-- <el-button type="primary" @click="saveField"> </el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<!-- <el-dialog-->
<!-- v-model="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <template #footer>-->
<!-- <el-button @click="fieldOptionModelVisible = false"> </el-button>-->
<!-- <el-button type="primary" @click="saveFieldOption"> </el-button>-->
<!-- </template>-->
<!-- </el-dialog>-->
</div>
</template>
<script lang="ts" setup>
import { getFormSimpleList } from '@/api/bpm-boot/form'
defineOptions({ name: 'ElementForm' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const formKey = ref('')
const businessKey = ref('')
const optionModelTitle = ref('')
const fieldList = ref<any[]>([])
const formFieldForm = ref<any>({})
const fieldType = ref({
long: '长整型',
string: '字符串',
boolean: '布尔类',
date: '日期类',
enum: '枚举类',
custom: '自定义类型'
})
const formFieldIndex = ref(-1) // 编辑中的字段, -1 为新增
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项, -1 为新增
const fieldModelVisible = ref(false)
const fieldOptionModelVisible = ref(false)
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
const fieldEnumList = ref<any[]>([]) // 枚举值列表
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
const bpmnELement = ref()
const elExtensionElements = ref()
const formData = ref()
const otherExtensions = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetFormList = () => {
bpmnELement.value = bpmnInstances().bpmnElement
formKey.value = bpmnELement.value.businessObject.formKey
// if (formKey.value?.length > 0) {
// formKey.value = parseInt(formKey.value)
// }
// 获取元素扩展属性 或者 创建扩展属性
elExtensionElements.value =
bpmnELement.value.businessObject.get('extensionElements') ||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
// 获取元素表单配置 或者 创建新的表单配置
formData.value =
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
// 业务标识 businessKey 绑定在 formData 中
businessKey.value = formData.value.businessKey
// 保留剩余扩展元素,便于后面更新该元素对应属性
otherExtensions.value = elExtensionElements.value.values.filter(
(ex) => ex.$type !== `${prefix}:FormData`
)
// 复制原始值,填充表格
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
// 更新元素扩展属性,避免后续报错
updateElementExtensions()
}
const updateElementFormKey = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
formKey: formKey.value
})
}
const updateElementBusinessKey = () => {
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
businessKey: businessKey.value
})
}
// 根据类型调整字段type
const changeFieldTypeType = (type) => {
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
formFieldForm.value['type'] = type === 'custom' ? '' : type
}
// 打开字段详情侧边栏
const openFieldForm = (field, index) => {
formFieldIndex.value = index
if (index !== -1) {
const FieldObject = formData.value.fields[index]
formFieldForm.value = JSON.parse(JSON.stringify(field))
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
// 初始化约束条件列表
fieldConstraintsList.value = JSON.parse(
JSON.stringify(FieldObject?.validation?.constraints || [])
)
// 初始化自定义属性列表
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
} else {
formFieldForm.value = {}
// 初始化枚举值列表
fieldEnumList.value = []
// 初始化约束条件列表
fieldConstraintsList.value = []
// 初始化自定义属性列表
fieldPropertiesList.value = []
}
fieldModelVisible.value = true
}
// 打开字段 某个 配置项 弹窗
const openFieldOptionForm = (option, index, type) => {
fieldOptionModelVisible.value = true
fieldOptionType.value = type
formFieldOptionIndex.value = index
if (type === 'property') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '属性配置')
}
if (type === 'enum') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '枚举值配置')
}
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '约束条件配置')
}
// 保存字段 某个 配置项
const saveFieldOption = () => {
if (formFieldOptionIndex.value === -1) {
if (fieldOptionType.value === 'property') {
fieldPropertiesList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'constraint') {
fieldConstraintsList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'enum') {
fieldEnumList.value.push(fieldOptionForm.value)
}
} else {
fieldOptionType.value === 'property' &&
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'constraint' &&
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'enum' &&
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
}
fieldOptionModelVisible.value = false
fieldOptionForm.value = {}
}
// 保存字段配置
const saveField = () => {
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
defaultValue && (Field.defaultValue = defaultValue)
datePattern && (Field.datePattern = datePattern)
// 构建属性
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
return bpmnInstances().moddle.create(`${prefix}:Property`, {
id: fp.id,
value: fp.value
})
})
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: fieldPropertyList
})
}
// 构建校验规则
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
name: fc.name,
config: fc.config
})
})
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
constraints: fieldConstraintList
})
}
// 构建枚举值
if (fieldEnumList.value && fieldEnumList.value.length) {
Field.values = fieldEnumList.value.map((fe) => {
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
})
}
// 更新数组 与 表单配置实例
if (formFieldIndex.value === -1) {
fieldList.value.push(formFieldForm.value)
formData.value.fields.push(Field)
} else {
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
formData.value.fields.splice(formFieldIndex.value, 1, Field)
}
updateElementExtensions()
fieldModelVisible.value = false
}
// 移除某个 字段的 配置项
const removeFieldOptionItem = (option, index, type) => {
// console.log(option, 'option')
if (type === 'property') {
fieldPropertiesList.value.splice(index, 1)
return
}
if (type === 'enum') {
fieldEnumList.value.splice(index, 1)
return
}
fieldConstraintsList.value.splice(index, 1)
}
// 移除 字段
const removeField = (field, index) => {
console.log(field, 'field')
fieldList.value.splice(index, 1)
formData.value.fields.splice(index, 1)
updateElementExtensions()
}
const updateElementExtensions = () => {
// 更新回扩展元素
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
values: otherExtensions.value.concat(formData.value)
})
// 更新到元素上
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
extensionElements: newElExtensionElements
})
}
const formList = ref([]) // 流程表单的下拉框的数据
onMounted(async () => {
await getFormSimpleList().then(res => {
formList.value = res.data
})
})
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetFormList()
})
},
{ immediate: true }
)
</script>
<template>
<div class="panel-tab__content">
<el-form label-width="80px">
<el-form-item label="流程表单">
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<el-select v-model="formKey" clearable @change="updateElementFormKey" filterable>
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
</el-select>
</el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column-->
<!-- label="字段类型"-->
<!-- prop="type"-->
<!-- min-width="80px"-->
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="默认值"-->
<!-- prop="defaultValue"-->
<!-- min-width="80px"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <el-drawer-->
<!-- v-model="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :size="`${width}px`"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="formFieldForm" label-width="90px">-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <el-select-->
<!-- v-model="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- clearable-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button> </el-button>-->
<!-- <el-button type="primary" @click="saveField"> </el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<!-- <el-dialog-->
<!-- v-model="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <template #footer>-->
<!-- <el-button @click="fieldOptionModelVisible = false"> </el-button>-->
<!-- <el-button type="primary" @click="saveFieldOption"> </el-button>-->
<!-- </template>-->
<!-- </el-dialog>-->
</div>
</template>
<script lang="ts" setup>
import { getFormSimpleList } from '@/api/bpm-boot/form'
defineOptions({ name: 'ElementForm' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const formKey = ref('')
const businessKey = ref('')
const optionModelTitle = ref('')
const fieldList = ref<any[]>([])
const formFieldForm = ref<any>({})
const fieldType = ref({
long: '长整型',
string: '字符串',
boolean: '布尔类',
date: '日期类',
enum: '枚举类',
custom: '自定义类型'
})
const formFieldIndex = ref(-1) // 编辑中的字段, -1 为新增
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项, -1 为新增
const fieldModelVisible = ref(false)
const fieldOptionModelVisible = ref(false)
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
const fieldEnumList = ref<any[]>([]) // 枚举值列表
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
const bpmnELement = ref()
const elExtensionElements = ref()
const formData = ref()
const otherExtensions = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetFormList = () => {
bpmnELement.value = bpmnInstances().bpmnElement
formKey.value = bpmnELement.value.businessObject.formKey
// if (formKey.value?.length > 0) {
// formKey.value = parseInt(formKey.value)
// }
// 获取元素扩展属性 或者 创建扩展属性
elExtensionElements.value =
bpmnELement.value.businessObject.get('extensionElements') ||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
// 获取元素表单配置 或者 创建新的表单配置
formData.value =
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
// 业务标识 businessKey 绑定在 formData 中
businessKey.value = formData.value.businessKey
// 保留剩余扩展元素,便于后面更新该元素对应属性
otherExtensions.value = elExtensionElements.value.values.filter(
(ex) => ex.$type !== `${prefix}:FormData`
)
// 复制原始值,填充表格
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
// 更新元素扩展属性,避免后续报错
updateElementExtensions()
}
const updateElementFormKey = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
formKey: formKey.value
})
}
const updateElementBusinessKey = () => {
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
businessKey: businessKey.value
})
}
// 根据类型调整字段type
const changeFieldTypeType = (type) => {
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
formFieldForm.value['type'] = type === 'custom' ? '' : type
}
// 打开字段详情侧边栏
const openFieldForm = (field, index) => {
formFieldIndex.value = index
if (index !== -1) {
const FieldObject = formData.value.fields[index]
formFieldForm.value = JSON.parse(JSON.stringify(field))
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
// 初始化约束条件列表
fieldConstraintsList.value = JSON.parse(
JSON.stringify(FieldObject?.validation?.constraints || [])
)
// 初始化自定义属性列表
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
} else {
formFieldForm.value = {}
// 初始化枚举值列表
fieldEnumList.value = []
// 初始化约束条件列表
fieldConstraintsList.value = []
// 初始化自定义属性列表
fieldPropertiesList.value = []
}
fieldModelVisible.value = true
}
// 打开字段 某个 配置项 弹窗
const openFieldOptionForm = (option, index, type) => {
fieldOptionModelVisible.value = true
fieldOptionType.value = type
formFieldOptionIndex.value = index
if (type === 'property') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '属性配置')
}
if (type === 'enum') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '枚举值配置')
}
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '约束条件配置')
}
// 保存字段 某个 配置项
const saveFieldOption = () => {
if (formFieldOptionIndex.value === -1) {
if (fieldOptionType.value === 'property') {
fieldPropertiesList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'constraint') {
fieldConstraintsList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'enum') {
fieldEnumList.value.push(fieldOptionForm.value)
}
} else {
fieldOptionType.value === 'property' &&
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'constraint' &&
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'enum' &&
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
}
fieldOptionModelVisible.value = false
fieldOptionForm.value = {}
}
// 保存字段配置
const saveField = () => {
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
defaultValue && (Field.defaultValue = defaultValue)
datePattern && (Field.datePattern = datePattern)
// 构建属性
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
return bpmnInstances().moddle.create(`${prefix}:Property`, {
id: fp.id,
value: fp.value
})
})
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: fieldPropertyList
})
}
// 构建校验规则
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
name: fc.name,
config: fc.config
})
})
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
constraints: fieldConstraintList
})
}
// 构建枚举值
if (fieldEnumList.value && fieldEnumList.value.length) {
Field.values = fieldEnumList.value.map((fe) => {
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
})
}
// 更新数组 与 表单配置实例
if (formFieldIndex.value === -1) {
fieldList.value.push(formFieldForm.value)
formData.value.fields.push(Field)
} else {
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
formData.value.fields.splice(formFieldIndex.value, 1, Field)
}
updateElementExtensions()
fieldModelVisible.value = false
}
// 移除某个 字段的 配置项
const removeFieldOptionItem = (option, index, type) => {
// console.log(option, 'option')
if (type === 'property') {
fieldPropertiesList.value.splice(index, 1)
return
}
if (type === 'enum') {
fieldEnumList.value.splice(index, 1)
return
}
fieldConstraintsList.value.splice(index, 1)
}
// 移除 字段
const removeField = (field, index) => {
console.log(field, 'field')
fieldList.value.splice(index, 1)
formData.value.fields.splice(index, 1)
updateElementExtensions()
}
const updateElementExtensions = () => {
// 更新回扩展元素
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
values: otherExtensions.value.concat(formData.value)
})
// 更新到元素上
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
extensionElements: newElExtensionElements
})
}
const formList = ref([]) // 流程表单的下拉框的数据
onMounted(async () => {
await getFormSimpleList().then(res => {
formList.value = res.data
})
})
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetFormList()
})
},
{ immediate: true }
)
</script>

View File

@@ -1,463 +1,459 @@
<template>
<div class='panel-tab__content'>
<el-table :data='elementListenersList' size='small' border>
<el-table-column label='序号' width='80px' type='index' />
<el-table-column label='事件类型' min-width='100px' prop='event' />
<el-table-column
label='监听器类型'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => listenerTypeObject[row.listenerType]'
/>
<el-table-column label='操作' width='100px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<XButton
type="primary"
preIcon="ep:plus"
title="添加监听器"
size="small"
@click="openListenerForm(null)"
/>
<!-- <Plus type='primary'-->
<!-- title='添加监听器'-->
<!-- size='small'-->
<!-- @click='openListenerForm(null)' />-->
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
<!-- <Select-->
<!-- type='success'-->
<!-- title='选择监听器'-->
<!-- size='small'-->
<!-- @click='openProcessListenerDialog'-->
<!-- />-->
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model='listenerFormModelVisible'
title='执行监听器'
:size='`${width}px`'
append-to-body
destroy-on-close
>
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
<el-form-item
label='事件类型'
prop='event'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.event'>
<el-option label='start' value='start' />
<el-option label='end' value='end' />
</el-select>
</el-form-item>
<el-form-item
label='监听器类型'
prop='listenerType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.listenerType'>
<el-option
v-for='i in Object.keys(listenerTypeObject)'
:key='i'
:label='listenerTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label='Java类'
prop='class'
key='listener-class'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.class' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label='表达式'
prop='expression'
key='listener-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.expression' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label='代理表达式'
prop='delegateExpression'
key='listener-delegate'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.delegateExpression' clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label='脚本格式'
prop='scriptFormat'
key='listener-script-format'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model='listenerForm.scriptFormat' clearable />
</el-form-item>
<el-form-item
label='脚本类型'
prop='scriptType'
key='listener-script-type'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model='listenerForm.scriptType'>
<el-option label='内联脚本' value='inlineScript' />
<el-option label='外部脚本' value='externalScript' />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label='脚本内容'
prop='value'
key='listener-script'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model='listenerForm.value' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label='资源地址'
prop='resource'
key='listener-resource'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model='listenerForm.resource' clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class='listener-filed__title'>
<span><Menu />注入字段</span>
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
</p>
<el-table
:data='fieldsListOfListener'
size='small'
max-height='240'
fit
border
style='flex: none'
>
<el-table-column label='序号' width='80px' type='index' />
<el-table-column label='字段名称' min-width='100px' prop='name' />
<el-table-column
label='字段类型'
min-width='80px'
show-overflow-tooltip
:formatter='(row) => fieldTypeObject[row.fieldType]'
/>
<el-table-column
label='字段值/表达式'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => row.string || row.expression'
/>
<el-table-column label='操作' width='130px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button
size='small'
link
style='color: #ff4d4f'
@click='removeListenerField(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<el-button @click='listenerFormModelVisible = false'> </el-button>
<el-button type='primary' @click='saveListenerConfig'> </el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title='字段配置'
v-model='listenerFieldFormModelVisible'
width='600px'
append-to-body
destroy-on-close
>
<el-form
:model='listenerFieldForm'
label-width='96spx'
ref='listenerFieldFormRef'
style='height: 136px'
>
<el-form-item
label='字段名称:'
prop='name'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.name' clearable />
</el-form-item>
<el-form-item
label='字段类型:'
prop='fieldType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerFieldForm.fieldType'>
<el-option
v-for='i in Object.keys(fieldTypeObject)'
:key='i'
:label='fieldTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label='字段值:'
prop='string'
key='field-string'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.string' clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label='表达式:'
prop='expression'
key='field-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.expression' clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size='small' @click='listenerFieldFormModelVisible = false'> </el-button>
<el-button size='small' type='primary' @click='saveListenerFiled'> </el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
</template>
<script lang='ts' setup>
import { ElMessageBox } from 'element-plus'
import XButton from '@/components/XButton/src/XButton.vue'
import { Plus, Select, Menu } from '@element-plus/icons-vue'
import { createListenerObject, updateElementExtensions } from '../../utils'
import {
initListenerType,
initListenerForm,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from './ProcessListenerDialog.vue'
defineOptions({ name: 'ElementListeners' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const elementListenersList = ref<any[]>([]) // 监听器列表
const listenerForm = ref<any>({}) // 监听器详情表单
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
const fieldsListOfListener = ref<any[]>([])
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
const listenerTypeObject = ref(listenerType)
const fieldTypeObject = ref(fieldType)
const bpmnElement = ref()
const otherExtensionList = ref()
const bpmnElementListeners = ref()
const listenerFormRef = ref()
const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:ExecutionListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
// 打开 监听器详情 侧边栏
const openListenerForm = (listener, index?) => {
// debugger
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) {
listenerFormRef.value.clearValidate()
}
})
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) {
listenerFieldFormRef.value.clearValidate()
}
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
// debugger
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = (index) => {
// debugger
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
}
// 移除监听器
const removeListener = (index) => {
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.catch(() => console.info('操作取消'))
}
// 保存监听器配置
const saveListenerConfig = async () => {
// debugger
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('execution')
}
const selectProcessListener = (listener) => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, false, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
}
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)
</script>
<template>
<div class='panel-tab__content'>
<el-table :data='elementListenersList' size='small' border>
<el-table-column label='序号' width='80px' type='index' />
<el-table-column label='事件类型' min-width='100px' prop='event' />
<el-table-column
label='监听器类型'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => listenerTypeObject[row.listenerType]'
/>
<el-table-column label='操作' width='100px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<XButton
type="primary"
preIcon="ep:plus"
title="添加监听器"
size="small"
@click="openListenerForm(null)"
/>
<!-- <Plus type='primary'-->
<!-- title='添加监听器'-->
<!-- size='small'-->
<!-- @click='openListenerForm(null)' />-->
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
<!-- <Select-->
<!-- type='success'-->
<!-- title='选择监听器'-->
<!-- size='small'-->
<!-- @click='openProcessListenerDialog'-->
<!-- />-->
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model='listenerFormModelVisible'
title='执行监听器'
:size='`${width}px`'
append-to-body
destroy-on-close
>
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
<el-form-item
label='事件类型'
prop='event'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.event' filterable>
<el-option label='start' value='start' />
<el-option label='end' value='end' />
</el-select>
</el-form-item>
<el-form-item
label='监听器类型'
prop='listenerType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.listenerType' filterable>
<el-option
v-for='i in Object.keys(listenerTypeObject)'
:key='i'
:label='listenerTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label='Java类'
prop='class'
key='listener-class'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.class' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label='表达式'
prop='expression'
key='listener-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.expression' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label='代理表达式'
prop='delegateExpression'
key='listener-delegate'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.delegateExpression' clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label='脚本格式'
prop='scriptFormat'
key='listener-script-format'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model='listenerForm.scriptFormat' clearable />
</el-form-item>
<el-form-item
label='脚本类型'
prop='scriptType'
key='listener-script-type'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model='listenerForm.scriptType' filterable>
<el-option label='内联脚本' value='inlineScript' />
<el-option label='外部脚本' value='externalScript' />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label='脚本内容'
prop='value'
key='listener-script'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model='listenerForm.value' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label='资源地址'
prop='resource'
key='listener-resource'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model='listenerForm.resource' clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class='listener-filed__title'>
<span><Menu />注入字段</span>
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
</p>
<el-table
:data='fieldsListOfListener'
size='small'
max-height='240'
fit
border
style='flex: none'
>
<el-table-column label='序号' width='80px' type='index' />
<el-table-column label='字段名称' min-width='100px' prop='name' />
<el-table-column
label='字段类型'
min-width='80px'
show-overflow-tooltip
:formatter='(row) => fieldTypeObject[row.fieldType]'
/>
<el-table-column
label='字段值/表达式'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => row.string || row.expression'
/>
<el-table-column label='操作' width='130px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button
size='small'
link
style='color: #ff4d4f'
@click='removeListenerField(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<el-button @click='listenerFormModelVisible = false'> </el-button>
<el-button type='primary' @click='saveListenerConfig'> </el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title='字段配置'
v-model='listenerFieldFormModelVisible'
width='600px'
append-to-body
destroy-on-close
>
<el-form
:model='listenerFieldForm'
label-width='96spx'
ref='listenerFieldFormRef'
style='height: 136px'
>
<el-form-item
label='字段名称:'
prop='name'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.name' clearable />
</el-form-item>
<el-form-item
label='字段类型:'
prop='fieldType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerFieldForm.fieldType' filterable>
<el-option
v-for='i in Object.keys(fieldTypeObject)'
:key='i'
:label='fieldTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label='字段值:'
prop='string'
key='field-string'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.string' clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label='表达式:'
prop='expression'
key='field-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.expression' clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size='small' @click='listenerFieldFormModelVisible = false'> </el-button>
<el-button size='small' type='primary' @click='saveListenerFiled'> </el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
</template>
<script lang='ts' setup>
import { ElMessageBox } from 'element-plus'
import XButton from '@/components/XButton/src/XButton.vue'
import { Plus, Select, Menu } from '@element-plus/icons-vue'
import { createListenerObject, updateElementExtensions } from '../../utils'
import {
initListenerType,
initListenerForm,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from './ProcessListenerDialog.vue'
defineOptions({ name: 'ElementListeners' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const elementListenersList = ref<any[]>([]) // 监听器列表
const listenerForm = ref<any>({}) // 监听器详情表单
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
const fieldsListOfListener = ref<any[]>([])
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
const listenerTypeObject = ref(listenerType)
const fieldTypeObject = ref(fieldType)
const bpmnElement = ref()
const otherExtensionList = ref()
const bpmnElementListeners = ref()
const listenerFormRef = ref()
const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:ExecutionListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
// 打开 监听器详情 侧边栏
const openListenerForm = (listener, index?) => {
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) {
listenerFormRef.value.clearValidate()
}
})
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) {
listenerFieldFormRef.value.clearValidate()
}
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = (index) => {
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
}
// 移除监听器
const removeListener = (index) => {
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.catch(() => console.info('操作取消'))
}
// 保存监听器配置
const saveListenerConfig = async () => {
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('execution')
}
const selectProcessListener = (listener) => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, false, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
}
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)
</script>

View File

@@ -1,491 +1,491 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="80px" type="index" />
<el-table-column
label="事件类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerEventTypeObject[row.event]"
/>
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column
label="监听器类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template #default="scope">
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<XButton
size="small"
type="primary"
preIcon="ep:plus"
title="添加监听器"
@click="openListenerForm(null)"
/>
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="任务监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item
label="事件类型"
prop="event"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.event">
<el-option
v-for="i in Object.keys(listenerEventTypeObject)"
:key="i"
:label="listenerEventTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
label="监听器ID"
prop="id"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType">
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType">
<el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)"
>添加字段</el-button
>
</p>
<el-table
:data="fieldsListOfListener"
size="small"
max-height="240"
fit
border
style="flex: none"
>
<el-table-column label="序号" width="80px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="(row) => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template #default="scope">
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" @click="listenerFormModelVisible = false"> </el-button>
<el-button size="small" type="primary" @click="saveListenerConfig"> </el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="listenerFieldForm"
size="small"
label-width="96px"
ref="listenerFieldFormRef"
style="height: 136px"
>
<el-form-item
label="字段名称:"
prop="name"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item
label="字段类型:"
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType">
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值:"
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式:"
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false"> </el-button>
<el-button size="small" type="primary" @click="saveListenerFiled"> </el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
</template>
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { createListenerObject, updateElementExtensions } from '../../utils'
import {
initListenerForm,
initListenerType,
eventType,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
defineOptions({ name: 'UserTaskListeners' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const elementListenersList = ref<any[]>([])
const listenerEventTypeObject = ref(eventType)
const listenerTypeObject = ref(listenerType)
const listenerFormModelVisible = ref(false)
const listenerForm = ref<any>({})
const fieldTypeObject = ref(fieldType)
const fieldsListOfListener = ref<any[]>([])
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
const bpmnElement = ref()
const bpmnElementListeners = ref()
const otherExtensionList = ref()
const listenerFormRef = ref()
const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
// console.log(
// bpmnInstances().bpmnElement,
// 'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
// )
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values.filter(
(ex) => ex.$type === `${prefix}:TaskListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
const openListenerForm = (listener, index?) => {
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate()
})
}
// 移除监听器
const removeListener = (listener, index?) => {
console.log(listener, 'listener')
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.catch(() => console.info('操作取消'))
}
// 保存监听器
const saveListenerConfig = async () => {
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = (field, index) => {
console.log(field, 'field')
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('task')
}
const selectProcessListener = (listener) => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, true, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
}
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)
</script>
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="80px" type="index" />
<el-table-column
label="事件类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerEventTypeObject[row.event]"
/>
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column
label="监听器类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template #default="scope">
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<XButton
size="small"
type="primary"
preIcon="ep:plus"
title="添加监听器"
@click="openListenerForm(null)"
/>
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="任务监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item
label="事件类型"
prop="event"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.event" filterable>
<el-option
v-for="i in Object.keys(listenerEventTypeObject)"
:key="i"
:label="listenerEventTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
label="监听器ID"
prop="id"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType" filterable>
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType" filterable>
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType" filterable>
<el-option label="统计时间" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)"
>添加字段</el-button
>
</p>
<el-table
:data="fieldsListOfListener"
size="small"
max-height="240"
fit
border
style="flex: none"
>
<el-table-column label="序号" width="80px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="(row) => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template #default="scope">
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" @click="listenerFormModelVisible = false"> </el-button>
<el-button size="small" type="primary" @click="saveListenerConfig"> </el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="listenerFieldForm"
size="small"
label-width="96px"
ref="listenerFieldFormRef"
style="height: 136px"
>
<el-form-item
label="字段名称:"
prop="name"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item
label="字段类型:"
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType" filterable>
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值:"
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式:"
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false"> </el-button>
<el-button size="small" type="primary" @click="saveListenerFiled"> </el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
</template>
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { createListenerObject, updateElementExtensions } from '../../utils'
import {
initListenerForm,
initListenerType,
eventType,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
defineOptions({ name: 'UserTaskListeners' })
const props = defineProps({
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
const elementListenersList = ref<any[]>([])
const listenerEventTypeObject = ref(eventType)
const listenerTypeObject = ref(listenerType)
const listenerFormModelVisible = ref(false)
const listenerForm = ref<any>({})
const fieldTypeObject = ref(fieldType)
const fieldsListOfListener = ref<any[]>([])
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
const bpmnElement = ref()
const bpmnElementListeners = ref()
const otherExtensionList = ref()
const listenerFormRef = ref()
const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
// console.log(
// bpmnInstances().bpmnElement,
// 'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
// )
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values.filter(
(ex) => ex.$type === `${prefix}:TaskListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
const openListenerForm = (listener, index?) => {
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate()
})
}
// 移除监听器
const removeListener = (listener, index?) => {
//console.log(listener, 'listener')
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.catch(() => console.info('操作取消'))
}
// 保存监听器
const saveListenerConfig = async () => {
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = (field, index) => {
console.log(field, 'field')
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('task')
}
const selectProcessListener = (listener) => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, true, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
}
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)
</script>

View File

@@ -20,7 +20,7 @@ export function initListenerForm(listener) {
self.eventDefinitionType = key.replace('time', '').toLowerCase()
}
}
console.log(k)
//console.log(k)
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body
}
}

View File

@@ -1,280 +1,280 @@
<template>
<div class="panel-tab__content">
<el-form label-width="90px">
<el-form-item label="快捷配置">
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
</el-form-item>
<el-form-item label="会签类型">
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
<el-option label="并行多重事件" value="ParallelMultiInstance" />
<el-option label="时序多重事件" value="SequentialMultiInstance" />
<el-option label="无" value="Null" />
</el-select>
</el-form-item>
<template
v-if="
loopCharacteristics === 'ParallelMultiInstance' ||
loopCharacteristics === 'SequentialMultiInstance'
"
>
<el-form-item label="循环数量" key="loopCardinality">
<el-input
v-model="loopInstanceForm.loopCardinality"
clearable
@change="updateLoopCardinality"
/>
</el-form-item>
<el-form-item label="集合" key="collection" v-show="false">
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
</el-form-item>
<!-- add by 芋艿:由于「元素变量」暂时用不到,所以这里 display 为 none -->
<el-form-item label="元素变量" key="elementVariable" style="display: none">
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
</el-form-item>
<el-form-item label="完成条件" key="completionCondition">
<el-input
v-model="loopInstanceForm.completionCondition"
clearable
@change="updateLoopCondition"
/>
</el-form-item>
<!-- add by 芋艿:由于「异步状态」暂时用不到,所以这里 display 为 none -->
<el-form-item label="异步状态" key="async" style="display: none">
<el-checkbox
v-model="loopInstanceForm.asyncBefore"
label="异步前"
@change="updateLoopAsync('asyncBefore')"
/>
<el-checkbox
v-model="loopInstanceForm.asyncAfter"
label="异步后"
@change="updateLoopAsync('asyncAfter')"
/>
<el-checkbox
v-model="loopInstanceForm.exclusive"
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
label="排除"
@change="updateLoopAsync('exclusive')"
/>
</el-form-item>
<el-form-item
label="重试周期"
prop="timeCycle"
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
key="timeCycle"
>
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
</el-form-item>
</template>
</el-form>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ElementMultiInstance' })
const props = defineProps({
businessObject: Object,
type: String
})
const prefix = inject('prefix')
const loopCharacteristics = ref('')
//默认配置,用来覆盖原始不存在的选项,避免报错
const defaultLoopInstanceForm = ref({
completionCondition: '',
loopCardinality: '',
extensionElements: [],
asyncAfter: false,
asyncBefore: false,
exclusive: false
})
const loopInstanceForm = ref<any>({})
const bpmnElement = ref(null)
const multiLoopInstance = ref(null)
const bpmnInstances = () => (window as any)?.bpmnInstances
const getElementLoop = (businessObject) => {
if (!businessObject.loopCharacteristics) {
loopCharacteristics.value = 'Null'
loopInstanceForm.value = {}
return
}
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
loopCharacteristics.value = 'StandardLoop'
loopInstanceForm.value = {}
return
}
if (businessObject.loopCharacteristics.isSequential) {
loopCharacteristics.value = 'SequentialMultiInstance'
} else {
loopCharacteristics.value = 'ParallelMultiInstance'
}
// 合并配置
loopInstanceForm.value = {
...defaultLoopInstanceForm.value,
...businessObject.loopCharacteristics,
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
}
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
// 更新表单
if (
businessObject.loopCharacteristics.extensionElements &&
businessObject.loopCharacteristics.extensionElements.values &&
businessObject.loopCharacteristics.extensionElements.values.length
) {
loopInstanceForm.value['timeCycle'] =
businessObject.loopCharacteristics.extensionElements.values[0].body
}
}
const changeLoopCharacteristicsType = (type) => {
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
// 取消多实例配置
if (type === 'Null') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: null
})
return
}
// 配置循环
if (type === 'StandardLoop') {
const loopCharacteristicsObject = bpmnInstances().moddle.create(
'bpmn:StandardLoopCharacteristics'
)
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: loopCharacteristicsObject
})
multiLoopInstance.value = null
return
}
// 时序
if (type === 'SequentialMultiInstance') {
multiLoopInstance.value = bpmnInstances().moddle.create(
'bpmn:MultiInstanceLoopCharacteristics',
{ isSequential: true }
)
} else {
multiLoopInstance.value = bpmnInstances().moddle.create(
'bpmn:MultiInstanceLoopCharacteristics',
{ collection: '${coll_userList}' }
)
}
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: toRaw(multiLoopInstance.value)
})
}
// 循环基数
const updateLoopCardinality = (cardinality) => {
let loopCardinality = null
if (cardinality && cardinality.length) {
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
body: cardinality
})
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
loopCardinality
}
)
}
// 完成条件
const updateLoopCondition = (condition) => {
let completionCondition = null
if (condition && condition.length) {
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
body: condition
})
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
completionCondition
}
)
}
// 重试周期
const updateLoopTimeCycle = (timeCycle) => {
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
values: [
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
body: timeCycle
})
]
})
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
extensionElements
}
)
}
// 直接更新的基础信息
const updateLoopBase = () => {
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
collection: loopInstanceForm.value.collection || null,
elementVariable: loopInstanceForm.value.elementVariable || null
}
)
}
// 各异步状态
const updateLoopAsync = (key) => {
const { asyncBefore, asyncAfter } = loopInstanceForm.value
let asyncAttr = Object.create(null)
if (!asyncBefore && !asyncAfter) {
// this.$set(this.loopInstanceForm, "exclusive", false);
loopInstanceForm.value['exclusive'] = false
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
} else {
asyncAttr[key] = loopInstanceForm.value[key]
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
asyncAttr
)
}
const changeConfig = (config) => {
if (config === '依次审批') {
changeLoopCharacteristicsType('SequentialMultiInstance')
updateLoopCardinality('1')
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
} else if (config === '会签') {
changeLoopCharacteristicsType('ParallelMultiInstance')
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
} else if (config === '或签') {
changeLoopCharacteristicsType('ParallelMultiInstance')
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
}
}
onBeforeUnmount(() => {
multiLoopInstance.value = null
bpmnElement.value = null
})
watch(
() => props.businessObject,
(val) => {
bpmnElement.value = bpmnInstances().bpmnElement
getElementLoop(val)
},
{ immediate: true }
)
</script>
<template>
<div class="panel-tab__content">
<el-form label-width="90px">
<el-form-item label="快捷配置">
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
</el-form-item>
<el-form-item label="会签类型">
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType" filterable>
<el-option label="并行多重事件" value="ParallelMultiInstance" />
<el-option label="时序多重事件" value="SequentialMultiInstance" />
<el-option label="无" value="Null" />
</el-select>
</el-form-item>
<template
v-if="
loopCharacteristics === 'ParallelMultiInstance' ||
loopCharacteristics === 'SequentialMultiInstance'
"
>
<el-form-item label="循环数量" key="loopCardinality">
<el-input
v-model="loopInstanceForm.loopCardinality"
clearable
@change="updateLoopCardinality"
/>
</el-form-item>
<el-form-item label="集合" key="collection" v-show="false">
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
</el-form-item>
<!-- add by 芋艿:由于「元素变量」暂时用不到,所以这里 display 为 none -->
<el-form-item label="元素变量" key="elementVariable" style="display: none">
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
</el-form-item>
<el-form-item label="完成条件" key="completionCondition">
<el-input
v-model="loopInstanceForm.completionCondition"
clearable
@change="updateLoopCondition"
/>
</el-form-item>
<!-- add by 芋艿:由于「异步状态」暂时用不到,所以这里 display 为 none -->
<el-form-item label="异步状态" key="async" style="display: none">
<el-checkbox
v-model="loopInstanceForm.asyncBefore"
label="异步前"
@change="updateLoopAsync('asyncBefore')"
/>
<el-checkbox
v-model="loopInstanceForm.asyncAfter"
label="异步后"
@change="updateLoopAsync('asyncAfter')"
/>
<el-checkbox
v-model="loopInstanceForm.exclusive"
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
label="排除"
@change="updateLoopAsync('exclusive')"
/>
</el-form-item>
<el-form-item
label="重试周期"
prop="timeCycle"
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
key="timeCycle"
>
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
</el-form-item>
</template>
</el-form>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ElementMultiInstance' })
const props = defineProps({
businessObject: Object,
type: String
})
const prefix = inject('prefix')
const loopCharacteristics = ref('')
//默认配置,用来覆盖原始不存在的选项,避免报错
const defaultLoopInstanceForm = ref({
completionCondition: '',
loopCardinality: '',
extensionElements: [],
asyncAfter: false,
asyncBefore: false,
exclusive: false
})
const loopInstanceForm = ref<any>({})
const bpmnElement = ref(null)
const multiLoopInstance = ref(null)
const bpmnInstances = () => (window as any)?.bpmnInstances
const getElementLoop = (businessObject) => {
if (!businessObject.loopCharacteristics) {
loopCharacteristics.value = 'Null'
loopInstanceForm.value = {}
return
}
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
loopCharacteristics.value = 'StandardLoop'
loopInstanceForm.value = {}
return
}
if (businessObject.loopCharacteristics.isSequential) {
loopCharacteristics.value = 'SequentialMultiInstance'
} else {
loopCharacteristics.value = 'ParallelMultiInstance'
}
// 合并配置
loopInstanceForm.value = {
...defaultLoopInstanceForm.value,
...businessObject.loopCharacteristics,
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
}
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
// 更新表单
if (
businessObject.loopCharacteristics.extensionElements &&
businessObject.loopCharacteristics.extensionElements.values &&
businessObject.loopCharacteristics.extensionElements.values.length
) {
loopInstanceForm.value['timeCycle'] =
businessObject.loopCharacteristics.extensionElements.values[0].body
}
}
const changeLoopCharacteristicsType = (type) => {
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
// 取消多实例配置
if (type === 'Null') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: null
})
return
}
// 配置循环
if (type === 'StandardLoop') {
const loopCharacteristicsObject = bpmnInstances().moddle.create(
'bpmn:StandardLoopCharacteristics'
)
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: loopCharacteristicsObject
})
multiLoopInstance.value = null
return
}
// 时序
if (type === 'SequentialMultiInstance') {
multiLoopInstance.value = bpmnInstances().moddle.create(
'bpmn:MultiInstanceLoopCharacteristics',
{ isSequential: true }
)
} else {
multiLoopInstance.value = bpmnInstances().moddle.create(
'bpmn:MultiInstanceLoopCharacteristics',
{ collection: '${coll_userList}' }
)
}
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: toRaw(multiLoopInstance.value)
})
}
// 循环基数
const updateLoopCardinality = (cardinality) => {
let loopCardinality = null
if (cardinality && cardinality.length) {
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
body: cardinality
})
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
loopCardinality
}
)
}
// 完成条件
const updateLoopCondition = (condition) => {
let completionCondition = null
if (condition && condition.length) {
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
body: condition
})
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
completionCondition
}
)
}
// 重试周期
const updateLoopTimeCycle = (timeCycle) => {
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
values: [
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
body: timeCycle
})
]
})
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
extensionElements
}
)
}
// 直接更新的基础信息
const updateLoopBase = () => {
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
{
collection: loopInstanceForm.value.collection || null,
elementVariable: loopInstanceForm.value.elementVariable || null
}
)
}
// 各异步状态
const updateLoopAsync = (key) => {
const { asyncBefore, asyncAfter } = loopInstanceForm.value
let asyncAttr = Object.create(null)
if (!asyncBefore && !asyncAfter) {
// this.$set(this.loopInstanceForm, "exclusive", false);
loopInstanceForm.value['exclusive'] = false
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
} else {
asyncAttr[key] = loopInstanceForm.value[key]
}
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
multiLoopInstance.value,
asyncAttr
)
}
const changeConfig = (config) => {
if (config === '依次审批') {
changeLoopCharacteristicsType('SequentialMultiInstance')
updateLoopCardinality('1')
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
} else if (config === '会签') {
changeLoopCharacteristicsType('ParallelMultiInstance')
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
} else if (config === '或签') {
changeLoopCharacteristicsType('ParallelMultiInstance')
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
}
}
onBeforeUnmount(() => {
multiLoopInstance.value = null
bpmnElement.value = null
})
watch(
() => props.businessObject,
(val) => {
bpmnElement.value = bpmnInstances().bpmnElement
getElementLoop(val)
},
{ immediate: true }
)
</script>

View File

@@ -68,7 +68,7 @@ const modelConfig = computed(() => {
const bpmnInstances = () => (window as any)?.bpmnInstances
const initDataList = () => {
console.log(window, 'window')
//console.log(window, 'window')
rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
messageIdMap.value = {}
signalIdMap.value = {}

View File

@@ -1,125 +1,125 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
"
>
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option
v-for="key in Object.keys(messageMap)"
:value="key"
:label="messageMap[key]"
:key="key"
/>
</el-select>
<XButton
type="primary"
preIcon="ep:plus"
style="margin-left: 8px"
@click="openMessageModel"
/>
</div>
</el-form-item>
<el-dialog
v-model="messageModelVisible"
:close-on-click-modal="false"
title="创建新消息"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="newMessageForm" size="small" label-width="90px">
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
<el-form-item label="消息名称">
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage"> </el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ReceiveTask' })
const props = defineProps({
id: String,
type: String
})
const message = useMessage()
const bindMessageId = ref('')
const newMessageForm = ref<any>({})
const messageMap = ref<any>({})
const messageModelVisible = ref(false)
const bpmnElement = ref<any>()
const bpmnMessageRefsMap = ref<any>()
const bpmnRootElements = ref<any>()
const bpmnInstances = () => (window as any).bpmnInstances
const getBindMessage = () => {
bpmnElement.value = bpmnInstances().bpmnElement
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
}
const openMessageModel = () => {
messageModelVisible.value = true
newMessageForm.value = {}
}
const createNewMessage = () => {
if (messageMap.value[newMessageForm.value.id]) {
message.error('该消息已存在请修改id后重新保存')
return
}
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
bpmnRootElements.value.push(newMessage)
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
messageModelVisible.value = false
}
const updateTaskMessage = (messageId) => {
if (messageId === '-1') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: null
})
} else {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: bpmnMessageRefsMap.value[messageId]
})
}
}
onMounted(() => {
bpmnMessageRefsMap.value = Object.create(null)
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
bpmnRootElements.value
.filter((el) => el.$type === 'bpmn:Message')
.forEach((m) => {
bpmnMessageRefsMap.value[m.id] = m
messageMap.value[m.id] = m.name
})
messageMap.value['-1'] = '无'
})
onBeforeUnmount(() => {
bpmnElement.value = null
})
watch(
() => props.id,
() => {
// bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
getBindMessage()
})
},
{ immediate: true }
)
</script>
<template>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
"
>
<el-select v-model="bindMessageId" @change="updateTaskMessage" filterable>
<el-option
v-for="key in Object.keys(messageMap)"
:value="key"
:label="messageMap[key]"
:key="key"
/>
</el-select>
<XButton
type="primary"
preIcon="ep:plus"
style="margin-left: 8px"
@click="openMessageModel"
/>
</div>
</el-form-item>
<el-dialog
v-model="messageModelVisible"
:close-on-click-modal="false"
title="创建新消息"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="newMessageForm" size="small" label-width="90px">
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
<el-form-item label="消息名称">
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage"> </el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ReceiveTask' })
const props = defineProps({
id: String,
type: String
})
const message = useMessage()
const bindMessageId = ref('')
const newMessageForm = ref<any>({})
const messageMap = ref<any>({})
const messageModelVisible = ref(false)
const bpmnElement = ref<any>()
const bpmnMessageRefsMap = ref<any>()
const bpmnRootElements = ref<any>()
const bpmnInstances = () => (window as any).bpmnInstances
const getBindMessage = () => {
bpmnElement.value = bpmnInstances().bpmnElement
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
}
const openMessageModel = () => {
messageModelVisible.value = true
newMessageForm.value = {}
}
const createNewMessage = () => {
if (messageMap.value[newMessageForm.value.id]) {
message.error('该消息已存在请修改id后重新保存')
return
}
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
bpmnRootElements.value.push(newMessage)
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
messageModelVisible.value = false
}
const updateTaskMessage = (messageId) => {
if (messageId === '-1') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: null
})
} else {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: bpmnMessageRefsMap.value[messageId]
})
}
}
onMounted(() => {
bpmnMessageRefsMap.value = Object.create(null)
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
bpmnRootElements.value
.filter((el) => el.$type === 'bpmn:Message')
.forEach((m) => {
bpmnMessageRefsMap.value[m.id] = m
messageMap.value[m.id] = m.name
})
messageMap.value['-1'] = '无'
})
onBeforeUnmount(() => {
bpmnElement.value = null
})
watch(
() => props.id,
() => {
// bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
getBindMessage()
})
},
{ immediate: true }
)
</script>

View File

@@ -1,99 +1,99 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="脚本格式">
<el-input
v-model="scriptTaskForm.scriptFormat"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="scriptTaskForm.scriptType">
<el-option label="内联脚本" value="inline" />
<el-option label="外部资源" value="external" />
</el-select>
</el-form-item>
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
<el-input
v-model="scriptTaskForm.script"
type="textarea"
resize="vertical"
:autosize="{ minRows: 2, maxRows: 4 }"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
<el-input
v-model="scriptTaskForm.resource"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="结果变量">
<el-input
v-model="scriptTaskForm.resultVariable"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ScriptTask' })
const props = defineProps({
id: String,
type: String
})
const defaultTaskForm = ref({
scriptFormat: '',
script: '',
resource: '',
resultVariable: ''
})
const scriptTaskForm = ref<any>({})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetTaskForm = () => {
for (let key in defaultTaskForm.value) {
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
scriptTaskForm.value[key] = value
}
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
}
const updateElementTask = () => {
let taskAttr = Object.create(null)
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
if (scriptTaskForm.value.scriptType === 'inline') {
taskAttr.script = scriptTaskForm.value.script || null
taskAttr.resource = null
} else {
taskAttr.resource = scriptTaskForm.value.resource || null
taskAttr.script = null
}
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
}
onBeforeUnmount(() => {
bpmnElement.value = null
})
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
</script>
<template>
<div style="margin-top: 16px">
<el-form-item label="脚本格式">
<el-input
v-model="scriptTaskForm.scriptFormat"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="scriptTaskForm.scriptType" filterable>
<el-option label="内联脚本" value="inline" />
<el-option label="外部资源" value="external" />
</el-select>
</el-form-item>
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
<el-input
v-model="scriptTaskForm.script"
type="textarea"
resize="vertical"
:autosize="{ minRows: 2, maxRows: 4 }"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
<el-input
v-model="scriptTaskForm.resource"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="结果变量">
<el-input
v-model="scriptTaskForm.resultVariable"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ScriptTask' })
const props = defineProps({
id: String,
type: String
})
const defaultTaskForm = ref({
scriptFormat: '',
script: '',
resource: '',
resultVariable: ''
})
const scriptTaskForm = ref<any>({})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetTaskForm = () => {
for (let key in defaultTaskForm.value) {
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
scriptTaskForm.value[key] = value
}
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
}
const updateElementTask = () => {
let taskAttr = Object.create(null)
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
if (scriptTaskForm.value.scriptType === 'inline') {
taskAttr.script = scriptTaskForm.value.script || null
taskAttr.resource = null
} else {
taskAttr.resource = scriptTaskForm.value.resource || null
taskAttr.script = null
}
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
}
onBeforeUnmount(() => {
bpmnElement.value = null
})
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
</script>

View File

@@ -1,185 +1,188 @@
<template>
<el-form label-width='100px'>
<el-form-item label='规则类型' prop='candidateStrategy'>
<el-select
v-model='userTaskForm.candidateStrategy'
clearable
style='width: 100%'
@change='changeCandidateStrategy'
>
<el-option
v-for='dict in RuleTypeList'
:key='dict.code'
:label='dict.name'
:value='dict.code'
/>
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 10'
label='指定角色'
prop='candidateParam'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 20'
label='指定部门'
prop='candidateParam'
span='24'
>
<el-tree-select
ref='treeRef'
v-model='userTaskForm.candidateParam'
:data='deptTreeOptions'
:props='defaultProps'
empty-text='加载中请稍后'
multiple
node-key='id'
show-checkbox
@change='updateElementTask'
/>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 30'
label='指定用户'
prop='candidateParam'
span='24'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option
v-for='item in userOptions'
:key='item.id'
:label='item.name'
:value='item.id'
/>
</el-select>
</el-form-item>
</el-form>
</template>
<script lang='ts' setup>
import { defaultProps, handleTree } from '@/utils/tree'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const RuleTypeList = ref()
import { getRoleSimpleList } from '@/api/user-boot/role'
import { getUserSimpleList } from '@/api/user-boot/user'
defineOptions({ name: 'UserTask' })
const props = defineProps({
id: String,
type: String
})
const userTaskForm = ref({
candidateStrategy: '', // 分配规则
candidateParam: [] // 分配选项
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
export interface optionVO {
id: string
name: string
}
const roleOptions = ref<optionVO[]>([]) // 角色列表
const userOptions = ref<optionVO[]>([]) // 用户列表
const deptTreeOptions = ref() // 部门树
const resetTaskForm = () => {
const businessObject = bpmnElement.value.businessObject
if (!businessObject) {
return
}
if (businessObject.candidateStrategy != undefined) {
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
} else {
userTaskForm.value.candidateStrategy = undefined
}
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
if (userTaskForm.value.candidateStrategy === 60) {
// 特殊:流程表达式,只有一个 input 输入框
userTaskForm.value.candidateParam = [businessObject.candidateParam]
} else {
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
}
} else {
userTaskForm.value.candidateParam = []
}
}
/** 更新 candidateStrategy 字段时,需要清空 candidateParam并触发 bpmn 图更新 */
const changeCandidateStrategy = () => {
userTaskForm.value.candidateParam = []
updateElementTask()
}
/** 选中某个 options 时候,更新 bpmn 图 */
const updateElementTask = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
candidateStrategy: userTaskForm.value.candidateStrategy,
candidateParam: userTaskForm.value.candidateParam.join(',')
})
}
// 打开监听器弹窗
const processExpressionDialogRef = ref()
const openProcessExpressionDialog = async () => {
processExpressionDialogRef.value.open()
}
const selectProcessExpression = (expression) => {
userTaskForm.value.candidateParam = [expression.expression]
}
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
onMounted(async () => {
// 获得角色列表
await getRoleSimpleList().then(res => {
roleOptions.value = res.data
})
// 获得用户列表
await getUserSimpleList().then(res => {
userOptions.value = res.data
})
//传入type的名称
RuleTypeList.value = dictData.getBasicData('rule_type')
//
// // 获得部门列表
// const deptOptions = await DeptApi.getSimpleDeptList()
// deptTreeOptions.value = handleTree(deptOptions, 'id')
})
onBeforeUnmount(() => {
bpmnElement.value = null
})
</script>
<template>
<el-form label-width='100px'>
<el-form-item label='规则类型' prop='candidateStrategy'>
<el-select
v-model='userTaskForm.candidateStrategy'
clearable
style='width: 100%'
@change='changeCandidateStrategy'
filterable
>
<el-option
v-for='dict in RuleTypeList'
:key='dict.code'
:label='dict.name'
:value='dict.code'
/>
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 10'
label='指定角色'
prop='candidateParam'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
filterable
>
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 20'
label='指定部门'
prop='candidateParam'
span='24'
>
<el-tree-select
ref='treeRef'
v-model='userTaskForm.candidateParam'
:data='deptTreeOptions'
:props='defaultProps'
empty-text='加载中请稍后'
multiple
node-key='id'
show-checkbox
@change='updateElementTask'
/>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 30'
label='指定用户'
prop='candidateParam'
span='24'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
filterable
>
<el-option
v-for='item in userOptions'
:key='item.id'
:label='item.name'
:value='item.id'
/>
</el-select>
</el-form-item>
</el-form>
</template>
<script lang='ts' setup>
import { defaultProps, handleTree } from '@/utils/tree'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const RuleTypeList = ref()
import { getRoleSimpleList } from '@/api/user-boot/role'
import { getUserSimpleList } from '@/api/user-boot/user'
defineOptions({ name: 'UserTask' })
const props = defineProps({
id: String,
type: String
})
const userTaskForm = ref({
candidateStrategy: '', // 分配规则
candidateParam: [] // 分配选项
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
export interface optionVO {
id: string
name: string
}
const roleOptions = ref<optionVO[]>([]) // 角色列表
const userOptions = ref<optionVO[]>([]) // 用户列表
const deptTreeOptions = ref() // 部门树
const resetTaskForm = () => {
const businessObject = bpmnElement.value.businessObject
if (!businessObject) {
return
}
if (businessObject.candidateStrategy != undefined) {
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
} else {
userTaskForm.value.candidateStrategy = undefined
}
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
if (userTaskForm.value.candidateStrategy === 60) {
// 特殊:流程表达式,只有一个 input 输入框
userTaskForm.value.candidateParam = [businessObject.candidateParam]
} else {
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
}
} else {
userTaskForm.value.candidateParam = []
}
}
/** 更新 candidateStrategy 字段时,需要清空 candidateParam并触发 bpmn 图更新 */
const changeCandidateStrategy = () => {
userTaskForm.value.candidateParam = []
updateElementTask()
}
/** 选中某个 options 时候,更新 bpmn 图 */
const updateElementTask = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
candidateStrategy: userTaskForm.value.candidateStrategy,
candidateParam: userTaskForm.value.candidateParam.join(',')
})
}
// 打开监听器弹窗
const processExpressionDialogRef = ref()
const openProcessExpressionDialog = async () => {
processExpressionDialogRef.value.open()
}
const selectProcessExpression = (expression) => {
userTaskForm.value.candidateParam = [expression.expression]
}
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
onMounted(async () => {
// 获得角色列表
await getRoleSimpleList().then(res => {
roleOptions.value = res.data
})
// 获得用户列表
await getUserSimpleList().then(res => {
userOptions.value = res.data
})
//传入type的名称
RuleTypeList.value = dictData.getBasicData('rule_type')
//
// // 获得部门列表
// const deptOptions = await DeptApi.getSimpleDeptList()
// deptTreeOptions.value = handleTree(deptOptions, 'id')
})
onBeforeUnmount(() => {
bpmnElement.value = null
})
</script>

View File

@@ -39,7 +39,7 @@ function xml2json(xml) {
function xmlObj2json(xml) {
const xmlObj = xmlStr2XmlObj(xml)
console.log(xmlObj)
// console.log(xmlObj)
let jsonObj = {}
if (xmlObj.childNodes.length > 0) {
jsonObj = xml2json(xmlObj)

View File

@@ -0,0 +1,518 @@
<template>
<div>
<!--异常数据清洗 -->
<TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<div
class="monitoringPoints"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto'
}"
v-loading="tableStore.table.loading"
>
<div style="flex: 1">
<div class="title">监测点统计</div>
<div>
<div class="statistics">
<div class="divBox">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">监测点总数</span>
<span class="divBox_num" style="color: #57bc6e">
{{ monitoringPoints.runNum }}
</span>
</div>
<div class="divBox mt10">
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
<span class="divBox_title">异常测点数</span>
<span class="divBox_num" style="color: #ff6600">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
</div>
<div class="echartTitle">
<div class="title">异常占比</div>
<div>
{{
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
? 0
: Math.floor((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 10000) /
100
}}%
</div>
</div>
<div style="height: 30px">
<MyEchart :options="percentage"></MyEchart>
</div>
</div>
</div>
<div style="flex: 2" class="ml15">
<div class="title">异常指标统计</div>
<div class="mb5" style="height: 40px">
<el-segmented
style="height: 100%"
v-model="segmented"
:options="segmentedList"
block
@change="change"
>
<template #default="scope">
<div>
<div
class="segmentedIcon"
:style="{
backgroundColor:
scope.item.num > 0 ? '#FF9100' : scope.item.num > 99 ? '#ff0000' : '#007D7B'
}"
>
{{ scope.item.num > 99 ? '99+' : scope.item.num }}
</div>
<div>{{ scope.item.label }}</div>
</div>
</template>
</el-segmented>
</div>
<div class="header">
<span style="width: 170px; text-align: left">指标名称</span>
<span style="flex: 1">合理范围</span>
<span style="width: 90px">异常测点数</span>
</div>
<div
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
overflow: 'auto'
}"
>
<div v-for="o in abnormal.filter(item => item.remark == segmented)" class="abnormal mb10">
<span style="width: 170px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
{{ o.targetName }}
</span>
<span style="flex: 1; text-align: center">
<!-- 合理范围 -->
<span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
</span>
<span style="width: 90px; text-align: center">
<span style="color: #388e3c" :class="` ${o.ids.length > 0 ? 'text-red' : ''}`" class="text">
{{ o.ids.length }}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object },
searchKey: { type: [String, Number] }
})
const headerHeight = ref(57)
const TableHeaderRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0
})
const segmented = ref('base')
const percentage = ref({})
const segmentedList = ref([
{
label: '基础指标',
value: 'base',
num: 0
},
{
label: '稳态指标',
value: 'harmonic',
num: 0
},
{
label: '暂态指标',
value: 'event',
num: 0
}
])
const abnormal: any = ref([])
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const tableStore: any = new TableStore({
url: '/device-boot/dataVerify/getMonitorVerifyData',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
},
loadCallback: () => {
segmentedList.value[0].num = 0
segmentedList.value[1].num = 0
segmentedList.value[2].num = 0
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
abnormal.value = tableStore.table.data.targetList
abnormal.value.forEach(item => {
const { remark, ids } = item
if (remark === 'base') segmentedList.value[0].num += ids.length
else if (remark === 'harmonic') segmentedList.value[1].num += ids.length
else if (remark === 'event') segmentedList.value[2].num += ids.length
})
echart()
}
})
tableStore.table.params.deptId = dictData.state.area[0].id
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1
tableStore.table.params.lineRunFlag = 0
const echart = () => {
percentage.value = {
color: ['#FF9100'],
options: {
dataZoom: null,
toolbox: {
show: false
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%'
},
tooltip: {
show: false
},
legend: {
show: false
},
yAxis: {
show: false,
data: ['']
},
xAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '异常总数',
type: 'bar',
barWidth: 12,
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '异常占比',
type: 'bar',
barWidth: 13,
data: [
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#FF9100' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
symbolRepeat: 50,
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
z: 1,
zlevel: 0
},
{
name: '',
type: 'bar',
barGap: '-110%',
data: [100],
barWidth: 18,
itemStyle: {
normal: {
color: 'transparent',
barBorderColor: 'rgb(148,217,249)',
barBorderWidth: 1
}
},
z: 2
}
]
}
}
}
const change = () => {
tableStore.table.loading = true
setTimeout(() => {
tableStore.table.loading = false
}, 500)
}
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
watch(
() => prop.searchKey,
val => {
tableStore.index()
}
)
// watch(
// () => prop.timeValue,
// val => {
// tableStore.index()
// },
// {
// deep: true
// }
// )
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.monitoringPoints {
display: flex;
.statistics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
.divBox {
width: 100%;
height: 70px;
padding: 10px;
display: flex;
.iconfont {
font-size: 40px;
margin-right: 5px;
}
.divBox_title {
font-weight: 550;
}
.divBox_num {
font-size: 20px;
font-weight: 550;
margin-left: auto;
font-family: AlimamaDongFangDaKai;
}
align-items: center;
// text-align: center;
border-radius: 5px;
&:nth-child(1) {
background-color: #eef8f0;
}
&:nth-child(2) {
background-color: #fff6ed;
}
&:nth-child(3) {
background-color: #e5f8f6;
}
}
}
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
text-align: center;
// font-feature-settings: 'tnum';
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
div:nth-child(2) {
font-size: 16px;
color: #ff6600;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 0 5px 5px;
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
}
.segmentedIcon {
position: absolute;
top: 1px;
right: calc(50% - 44px);
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
</style>

View File

@@ -0,0 +1,500 @@
<template>
<div>
<!--监测点数据完整性 -->
<TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<div
class="monitoringPoints"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto'
}"
v-loading="tableStore.table.loading"
>
<div style="flex: 1">
<div class="title">监测点统计</div>
<div>
<div class="statistics">
<div class="divBox">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">监测点总数</span>
<span class="divBox_num" style="color: #57bc6e">
{{ monitoringPoints.runNum }}
</span>
</div>
<div class="divBox mt10">
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
<span class="divBox_title">低于90%监测点数</span>
<span class="divBox_num" style="color: #57bc6e">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
</div>
<div class="echartTitle">
<div class="title">总的数据完整性</div>
<div>
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
</div>
</div>
<div style="height: 30px">
<MyEchart :options="percentage"></MyEchart>
</div>
</div>
</div>
<div style="flex: 2" class="ml15">
<div class="title">完整性统计</div>
<div class="mb5" style="height: 40px">
<el-segmented
style="height: 100%"
v-model="segmented"
:props="props"
:options="segmentedList"
block
@change="tableStore.index()"
></el-segmented>
</div>
<div class="header">
<span style="width: 110px; text-align: left">
{{
segmented == 'Power_Network'
? '区域'
: segmented == 'Manufacturer'
? '终端厂家'
: '电网标志'
}}
</span>
<span style="width: 90px">监测点总数</span>
<span style="flex: 1">低于90%监测点数</span>
<span style="width: 80px">完整性(%)</span>
</div>
<div
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
overflow: 'auto'
}"
>
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 110px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
{{ o.citName }}
</span>
<!-- 监测点总数 -->
<span style="width: 90px; color: #388e3c" class="text">
{{ o.citTotalNum }}
</span>
<!-- 低于90%监测点数 -->
<span style="flex: 1; color: #388e3c" class="text">
{{ o.citBelowNum }}
</span>
<span
style="width: 80px; color: #388e3c"
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
class="text"
>
{{ o.citTotalOnlineRate }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object },
searchKey: { type: [String, Number] }
})
const headerHeight = ref(57)
const TableHeaderRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0,
totalOnlineRate: 0
})
const segmented = ref('Power_Network')
const percentage = ref({})
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const props = {
value: 'code',
label: 'name'
}
const abnormal: any = ref([])
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const tableStore: any = new TableStore({
url: '/device-boot/LineIntegrityData/data',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
},
loadCallback: () => {
monitoringPoints.value.runNum = tableStore.table.data.totalNum
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
if (tableStore.table.params.statisticalType.name == '终端厂家') {
return k.citTotalNum != 0
} else {
return !k.citName.includes('上送')
}
})
}
})
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.lineRunFlag = 0
const echart = () => {
percentage.value = {
color: ['#FF9100'],
options: {
dataZoom: null,
toolbox: {
show: false
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%'
},
tooltip: {
show: false
},
legend: {
show: false
},
yAxis: {
show: false,
data: ['']
},
xAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 12,
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '',
type: 'bar',
barWidth: 13,
data: [
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#57bc6e ' // 0% 处的颜色
},
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
symbolRepeat: 50,
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
z: 1,
zlevel: 0
},
{
name: '',
type: 'bar',
barGap: '-110%',
data: [100],
barWidth: 18,
itemStyle: {
normal: {
color: 'transparent',
barBorderColor: 'rgb(148,217,249)',
barBorderWidth: 1
}
},
z: 2
}
]
}
}
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
echart()
}, 100)
tableStore.index()
})
watch(
() => prop.searchKey,
val => {
tableStore.index()
}
)
// watch(
// () => prop.timeValue,
// val => {
// tableStore.index()
// },
// {
// deep: true
// }
// )
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.monitoringPoints {
display: flex;
.statistics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
.divBox {
width: 100%;
height: 70px;
padding: 10px;
display: flex;
.iconfont {
font-size: 40px;
margin-right: 5px;
}
.divBox_title {
font-weight: 550;
}
.divBox_num {
font-size: 20px;
font-weight: 550;
margin-left: auto;
font-family: AlimamaDongFangDaKai;
}
align-items: center;
// text-align: center;
border-radius: 5px;
&:nth-child(1) {
background-color: #eef8f0;
}
&:nth-child(2) {
background-color: #fff6ed;
}
&:nth-child(3) {
background-color: #e5f8f6;
}
}
}
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
text-align: center;
// font-feature-settings: 'tnum';
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
div:nth-child(2) {
font-size: 16px;
color: #ff6600;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 0 5px 5px;
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
</style>

View File

@@ -0,0 +1,500 @@
<template>
<div>
<!--终端在线率 -->
<TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
>
</TableHeader>
<div
class="monitoringPoints"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto'
}"
v-loading="tableStore.table.loading"
>
<div style="flex: 1">
<div class="title">终端统计</div>
<div>
<div class="statistics">
<div class="divBox">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">终端总数</span>
<span class="divBox_num" style="color: #57bc6e">
{{ monitoringPoints.runNum }}
</span>
</div>
<div class="divBox mt10">
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
<span class="divBox_title">低于90%终端数</span>
<span class="divBox_num" style="color: #57bc6e">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
</div>
<div class="echartTitle">
<div class="title">总的数据在线率</div>
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
</div>
<div style="height: 30px">
<MyEchart :options="percentage"></MyEchart>
</div>
</div>
</div>
<div style="flex: 2" class="ml15">
<div class="title">在线率统计</div>
<div class="mb5" style="height: 40px">
<el-segmented
style="height: 100%"
v-model="segmented"
:props="props"
:options="segmentedList"
block
@change="tableStore.index()"
></el-segmented>
</div>
<div class="header">
<span style="width: 110px; text-align: left">
{{
segmented == 'Power_Network'
? '区域'
: segmented == 'Manufacturer'
? '终端厂家'
: '电网标志'
}}
</span>
<span style="width: 90px">终端总数</span>
<span style="flex: 1">低于90%终端数</span>
<span style="width: 80px">在线率(%)</span>
</div>
<div
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
overflow: 'auto'
}"
>
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 110px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
{{ o.citName }}
</span>
<!-- 终端总数 -->
<span style="width: 90px; color: #388e3c" class="text">
{{ o.citTotalNum }}
</span>
<!-- 低于90%终端数 -->
<span style="flex: 1; color: #388e3c" class="text">
{{ o.citBelowNum }}
</span>
<span
style="width: 80px; color: #388e3c"
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
class="text"
>
{{ o.citTotalOnlineRate }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object },
searchKey: { type: [String, Number] }
})
const headerHeight = ref(57)
const TableHeaderRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0,
totalOnlineRate: 0
})
const segmented = ref('Power_Network')
const percentage = ref({})
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const props = {
value: 'code',
label: 'name'
}
const abnormal: any = ref([])
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const tableStore: any = new TableStore({
url: '/device-boot/onLineRate/deviceOnlineRateInfo',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
},
loadCallback: () => {
monitoringPoints.value.runNum = tableStore.table.data.totalNum
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
if (tableStore.table.params.statisticalType.name == '终端厂家') {
return k.citTotalNum != 0
} else {
return !k.citName.includes('上送')
}
})
}
})
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.lineRunFlag = 0
const echart = () => {
percentage.value = {
color: ['#FF9100'],
options: {
dataZoom: null,
toolbox: {
show: false
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%'
},
tooltip: {
show: false
},
legend: {
show: false
},
yAxis: {
show: false,
data: ['']
},
xAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 12,
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '',
type: 'bar',
barWidth: 13,
data: [
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#57bc6e' // 0% 处的颜色
},
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
symbolRepeat: 50,
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
z: 1,
zlevel: 0
},
{
name: '',
type: 'bar',
barGap: '-110%',
data: [100],
barWidth: 18,
itemStyle: {
normal: {
color: 'transparent',
barBorderColor: 'rgb(148,217,249)',
barBorderWidth: 1
}
},
z: 2
}
]
}
}
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
echart()
}, 100)
tableStore.index()
})
watch(
() => prop.searchKey,
val => {
tableStore.index()
}
)
// watch(
// () => prop.timeValue,
// val => {
// tableStore.index()
// },
// {
// deep: true
// }
// )
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.monitoringPoints {
display: flex;
.statistics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
.divBox {
width: 100%;
height: 70px;
padding: 10px;
display: flex;
.iconfont {
font-size: 40px;
margin-right: 5px;
}
.divBox_title {
font-weight: 550;
}
.divBox_num {
font-size: 20px;
font-weight: 550;
margin-left: auto;
font-family: AlimamaDongFangDaKai;
}
align-items: center;
// text-align: center;
border-radius: 5px;
&:nth-child(1) {
background-color: #eef8f0;
}
&:nth-child(2) {
background-color: #fff6ed;
}
&:nth-child(3) {
background-color: #e5f8f6;
}
}
}
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
text-align: center;
// font-feature-settings: 'tnum';
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
div:nth-child(2) {
font-size: 16px;
color: #ff6600;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 0 5px 5px;
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
</style>

View File

@@ -0,0 +1,483 @@
<template>
<div>
<!--监测点数据完整性 -->
<TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<div
class="monitoringPoints"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto'
}"
v-loading="tableStore.table.loading"
>
<div style="flex: 1">
<div class="title">终端统计</div>
<div
class="box1"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 30px )`,
overflow: 'auto'
}"
>
<div class="statistics">
<div class="divBox div1">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">终端总数</span>
<span class="divBox_num text-style" style="color: #57bc6e">
{{ statisticsList.allNum }}
</span>
</div>
<div class="divBox div2">
<span class="iconfont icon-zaiyunshebei" style="color: #67c23a"></span>
<span class="divBox_title">在运终端数</span>
<span class="divBox_num text-style" style="color: #67c23a">
{{ statisticsList.runNum }}
</span>
</div>
</div>
<div class="statistics">
<div class="divBox div3">
<span
class="iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang"
style="color: #ffbf00"
></span>
<span class="divBox_title">调试终端数</span>
<span class="divBox_num text-style" style="color: #ffbf00">
{{ statisticsList.checkNum }}
</span>
</div>
<div class="divBox div4">
<span class="iconfont icon-tingyunshijianguanli" style="color: #f56c6c"></span>
<span class="divBox_title">停运终端数</span>
<span class="divBox_num text-style" style="color: #f56c6c">
{{ statisticsList.stopRunNum }}
</span>
</div>
</div>
</div>
</div>
<div style="flex: 2" class="ml15">
<div class="title">终端运行统计</div>
<div class="mb5" style="height: 40px">
<el-segmented
style="height: 100%"
v-model="segmented"
:props="props"
:options="segmentedList"
block
@change="tableStore.index()"
></el-segmented>
</div>
<div class="header">
<span style="width: 110px; text-align: left">
{{
segmented == 'Power_Network'
? '区域'
: segmented == 'Manufacturer'
? '终端厂家'
: '电网标志'
}}
</span>
<span style="width: 90px">终端总数</span>
<span style="flex: 1">完整性(%)</span>
<span style="flex: 1">在线率(%)</span>
<span style="flex: 1">异常率(%)</span>
</div>
<div
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
overflow: 'auto'
}"
>
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 110px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
{{ o.name }}
</span>
<!-- 终端总数 -->
<span style="width: 90px; color: #388e3c" class="text">
{{ o.count }}
</span>
<!-- -->
<sp
style="flex: 1; color: #388e3c"
class="text"
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
>
{{ o.integrity }}
</sp>
<span
style="flex: 1; color: #388e3c"
:class="` ${o.online < 90 ? 'text-red' : ''}`"
class="text"
>
{{ o.online }}
</span>
<span
style="flex: 1; color: #388e3c"
:class="` ${o.qualified > 10 ? 'text-red' : ''}`"
class="text"
>
{{ o.qualified }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object },
searchKey: { type: [String, Number] }
})
const headerHeight = ref(57)
const TableHeaderRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0,
totalOnlineRate: 0
})
const segmented = ref('Power_Network')
const percentage = ref({})
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const props = {
value: 'code',
label: 'name'
}
const statisticsList: any = ref({
allNum: 0,
runNum: 0,
checkNum: 0,
stopRunNum: 0
})
const abnormal: any = ref([])
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
}
const totalData = ref([])
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const tableStore: any = new TableStore({
url: '/device-boot/deviceRunEvaluate/getRunEvaluateInfo',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
},
loadCallback: () => {
totalData.value = Array.from(
tableStore.table.data
.map((item: any) => item.list)
.flat()
.reduce((map: any, item: any) => {
if (!map.has(item.id)) {
map.set(item.id, item)
}
return map
}, new Map())
.values()
)
// tableStore.table.data
statisticsList.value.allNum = totalData.value.length
statisticsList.value.runNum = totalData.value.filter(item => item.runFlag === '运行').length
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
abnormal.value = tableStore.table.data.filter((k: any) => {
if (tableStore.table.params.statisticalType.name == '终端厂家') {
return k.count != 0
} else {
return !k.name.includes('上送')
}
})
}
})
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.lineRunFlag = 0
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
watch(
() => prop.searchKey,
val => {
tableStore.index()
}
)
// watch(
// () => prop.timeKey,
// val => {
// tableStore.index()
// }
// )
// watch(
// () => prop.timeValue,
// val => {
// tableStore.index()
// },
// {
// deep: true
// }
// )
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.monitoringPoints {
display: flex;
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
text-align: center;
// font-feature-settings: 'tnum';
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
div:nth-child(2) {
font-size: 16px;
color: #ff6600;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 0 5px 5px;
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
.hexagon {
position: relative;
width: 100px;
height: 55px;
background-color: #19a094;
margin: 50px auto;
&::before {
border-bottom: 27.5px solid #19a094;
}
&::after {
border-top: 27.5px solid #19a094;
}
}
.hexagon::before,
.hexagon::after {
content: '';
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon::before {
bottom: 98%;
}
.hexagon::after {
top: 98%;
}
.hexagon1 {
background-color: #2e8b57;
&::before {
border-bottom: 27.5px solid #2e8b57;
}
&::after {
border-top: 27.5px solid #2e8b57;
}
}
.hexagon2 {
background-color: #ffbf00;
&::before {
border-bottom: 27.5px solid #ffbf00;
}
&::after {
border-top: 27.5px solid #ffbf00;
}
}
.hexagon3 {
background-color: #a52a2a;
&::before {
border-bottom: 27.5px solid #a52a2a;
}
&::after {
border-top: 27.5px solid #a52a2a;
}
}
.statistics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.divBox {
width: 100%;
height: 70px;
padding: 10px;
display: flex;
margin-bottom: 10px;
.iconfont {
font-size: 40px;
margin-right: 5px;
}
.divBox_title {
font-weight: 550;
}
.divBox_num {
font-size: 20px;
font-weight: 550;
margin-left: auto;
font-family: AlimamaDongFangDaKai;
}
align-items: center;
// text-align: center;
border-radius: 5px;
}
.div1 {
background-color: #eef8f0;
}
.div2 {
background-color: #67c23a24;
}
.div3 {
background-color: #ffbf0024;
}
.div4 {
background-color: #f56c6c24;
}
}
</style>

View File

@@ -0,0 +1,450 @@
<template>
<div>
<!--终端运行评价 -->
<TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<div
class="monitoringPoints"
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto'
}"
v-loading="tableStore.table.loading"
>
<div style="flex: 1">
<div class="title">终端统计</div>
<div style="height: 135px" class="box1">
<div class="boxDiv hexagon">
<div style="color: #fff">100</div>
<div class="mt10 divBot">总数</div>
</div>
<div class="boxDiv hexagon hexagon1">
<div style="color: #fff">50</div>
<div class="mt10 divBot">在运</div>
</div>
</div>
<div style="height: 135px" class="box1">
<div class="boxDiv hexagon hexagon2">
<div style="color: #fff">25</div>
<div class="mt10 divBot">检修</div>
</div>
<div class="boxDiv hexagon hexagon3">
<div style="color: #fff">25</div>
<div class="mt10 divBot">停运</div>
</div>
</div>
</div>
<div style="flex: 2" class="ml15">
<div class="title">终端运行评价</div>
<div class="mb5" style="height: 40px">
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
<template #default="scope">
<div>
<div>{{ typeof scope.item === 'object' ? scope.item.label : scope.item }}</div>
</div>
</template>
</el-segmented>
</div>
<div class="header">
<span style="width: 110px; text-align: left">
{{ segmented == 0 ? '区域' : segmented == 1 ? '终端厂家' : '电网标志' }}
</span>
<span style="flex: 1">在运终端数</span>
<span style="width: 80px">评价</span>
</div>
<div
:style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
overflow: 'auto'
}"
>
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 110px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.integrity < 90 ? '#FF9100' : '' }"></div>
{{ o.targetName }}
</span>
<!-- 在运终端数 -->
<span style="flex: 1; color: #388e3c" class="text">
{{ o.rangeDesc }}
</span>
<span
style="width: 80px; color: #388e3c"
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
class="text"
>
{{ o.integrity }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object }
})
const headerHeight = ref(57)
const TableHeaderRef = ref()
const monitoringPoints = ref({
runNum: 110,
abnormalNum: 10
})
const segmented = ref(0)
const percentage = ref({})
const segmentedList = ref([
{
label: '区域',
value: 0,
num: 0
},
{
label: '终端厂家',
value: 1,
num: 0
},
{
label: '电网标志',
value: 2,
num: 0
}
])
const abnormal: any = ref([
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: '优秀'
},
{
targetName: '唐山',
rangeDesc: 21,
length: 21,
integrity: 92
}
])
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const value = ref(new Date())
const list = ref()
const tableStore: any = new TableStore({
url: '/device-boot/deviceRunEvaluate/getRunEvaluateInfo',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
},
loadCallback: () => {
list.value = tableStore.table.data
}
})
tableStore.table.params.deptId = dictData.state.area[0].id
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
watch(
() => prop.timeKey,
val => {
tableStore.index()
}
)
watch(
() => prop.timeValue,
val => {
tableStore.index()
},
{
deep: true
}
)
</script>
<style lang="scss" scoped>
.monitoringPoints {
display: flex;
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
text-align: center;
// font-feature-settings: 'tnum';
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
div:nth-child(2) {
font-size: 16px;
color: #ff6600;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 0 5px 5px;
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
.box1 {
display: flex;
align-items: center;
justify-content: space-around;
.boxDiv {
// flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin: 0 5px;
div:nth-child(1) {
position: absolute;
font-size: 30px;
top: -10px;
font-weight: 700;
}
.divBot {
font-size: 16px;
position: absolute;
top: 20px;
}
color: #fff;
}
}
.hexagon {
position: relative;
width: 100px;
height: 55px;
background-color: #19a094;
margin: 50px auto;
&::before {
border-bottom: 27.5px solid #19a094;
}
&::after {
border-top: 27.5px solid #19a094;
}
}
.hexagon::before,
.hexagon::after {
content: '';
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon::before {
bottom: 98%;
}
.hexagon::after {
top: 98%;
}
.hexagon1 {
background-color: #2e8b57;
&::before {
border-bottom: 27.5px solid #2e8b57;
}
&::after {
border-top: 27.5px solid #2e8b57;
}
}
.hexagon2 {
background-color: #ffbf00;
&::before {
border-bottom: 27.5px solid #ffbf00;
}
&::after {
border-top: 27.5px solid #ffbf00;
}
}
.hexagon3 {
background-color: #a52a2a;
&::before {
border-bottom: 27.5px solid #a52a2a;
}
&::after {
border-top: 27.5px solid #a52a2a;
}
}
</style>

View File

@@ -15,8 +15,9 @@ import { color, gradeColor3 } from './color'
import { useConfig } from '@/stores/config'
const config = useConfig()
// import { nextTick } from 'process'
const emit = defineEmits(['triggerPoint', 'group'])
const emit = defineEmits(['triggerPoint', 'group', 'echartClick'])
color[0] = config.layout.elementUiPrimary[0]
const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
@@ -70,6 +71,8 @@ const initChart = () => {
const value =
item.value === 3.14159 || item.value === 0.14159
? '暂无数据'
: item.value === 0.14158
? 0
: Math.round(item.value * 100) / 100 // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;">
<span>${item.marker}
@@ -153,6 +156,8 @@ const initChart = () => {
chart.on('click', function (params) {
if (params.seriesName == '暂态触发点') {
emit('triggerPoint', params.data)
} else {
emit('echartClick', params)
}
})
@@ -164,7 +169,7 @@ const handlerBar = (options: any) => {
if (Array.isArray(options.series)) {
options.series.forEach((item: any) => {
if (item.type === 'bar') {
item.barMinHeight = 10
item.barMinHeight = 0
item.barMaxWidth = 20
item.itemStyle = Object.assign(
{

View File

@@ -7,7 +7,7 @@
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
import { onBeforeUnmount, ref, watch, onMounted, } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts-liquidfill'
@@ -19,14 +19,21 @@ const myCharts = ref()
const showCircle = ref(false)
const fetchConfig = async (name: string) => {
const res = await import(`../../assets/map/${name.replace(/市$/, "")}.json`)
return res.default
try {
// 处理城市名称(去掉末尾的"市")并尝试导入对应文件
const res = await import(`../../assets/map/${name.replace(/市$/, '')}.json`)
return res.default
} catch (error) {
const chinaRes = await import(`../../assets/map/中国.json`) // 请确认中国文件的实际命名
return chinaRes.default
}
// const res = await import(`../../assets/map/${name.replace(/市$/, "")}.json`)
// return res.default
// GetEchar(res.default)
}
// fetchConfig()
const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
onMounted(() => { })
const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap')
@@ -36,6 +43,7 @@ const GetEchar = async (name: string) => {
name == dictData.state.area?.[0].name ? (showCircle.value = false) : (showCircle.value = true)
echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
let option = {
title: {
left: 'center',
@@ -91,6 +99,7 @@ const GetEchar = async (name: string) => {
// top: 10,
// bottom: 0,
roam: true,
label: {
normal: {
show: true,
@@ -170,6 +179,7 @@ const GetEchar = async (name: string) => {
}, 0)
window.addEventListener('resize', resizeHandler)
const flag1 = ref(true)
// 点击事件
myCharts.value.off('click')
myCharts.value.on('click', (e: any) => {

View File

@@ -1,441 +1,499 @@
<template>
<div v-loading="loading">
<div>
<div id="boxi" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="wave"></div>
</div>
<el-tabs type="border-card">
<el-tab-pane label="暂态波形上送" :style="'height:' + vhh">
<el-table stripe :data="Data" :height="height" border style="width: 100%"
header-cell-class-name="table_header">
<el-table-column align="center" prop="number" label="事件段"></el-table-column>
<el-table-column align="center" prop="number" label="波形起始点相位(°)">
<el-table-column align="center" prop="number" label="A相"></el-table-column>
<el-table-column align="center" prop="number" label="B相"></el-table-column>
<el-table-column align="center" prop="number" label="C相"></el-table-column>
</el-table-column>
<el-table-column align="center" prop="number" label="跳变段电压变化率(V/ms)">
<el-table-column align="center" prop="number" label="A相"></el-table-column>
<el-table-column align="center" prop="number" label="B相"></el-table-column>
<el-table-column align="center" prop="number" label="C相"></el-table-column>
</el-table-column>
<el-table-column align="center" prop="number" label="相位跳变(°)">
<el-table-column align="center" prop="number" label="A相"></el-table-column>
<el-table-column align="center" prop="number" label="B相"></el-table-column>
<el-table-column align="center" prop="number" label="C相"></el-table-column>
</el-table-column>
<el-table-column align="center" prop="number" label="总分段数目"></el-table-column>
<el-table-column align="center" prop="number" label="三相电压不平衡度(%)" width="180"></el-table-column>
<el-table-column align="center" prop="number" label="暂降类型"></el-table-column>
<el-table-column align="center" prop="number" label="暂降原因"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
import { mainHeight } from '@/utils/layout'
import * as echarts from 'echarts'
import url from '@/assets/img/point.png'
import $ from 'jquery'
export default {
props: {
flag: {
type: Boolean,
default: false
},
DColor: {
type: Boolean,
default: false
},
boxoList: {
type: [Object, Array]
},
GJList: {
type: [Object, Array]
}
},
data() {
return {
loading: true,
valA: 0,
isOpen: false,
time: '',
type: '',
severity: '',
iphasic: '',
eventValue: '',
persistTime: '',
lineName: '',
subName: '',
waveDatas: [],
Data: [],
height: null,
vhh: null,
ptpass: '',
waveHeight: undefined,
$wave: undefined,
color: '#006565',
charts: {},
arrpoints: [],
titles: '',
vh: null,
vw: null,
zoom: ''
}
},
created() { },
watch: {
value: function (a, b) {
if (a == 2) {
// $("#wave1").remove();
this.initWaves()
} else {
$('#wave1').remove()
this.initWaves()
}
}
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
this.$wave = $('#wave').eq(0)
this.$nextTick(() => {
this.query()
})
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.zoom = 1 / document.body.style.zoom
if (this.flag) {
// console.log(123);
this.vh = mainHeight(250).height
} else {
// console.log(3333);
this.vh = mainHeight(270).height
}
},
query() {
this.loading = true
this.initWave()
},
//开始画图
initWave() {
//清除之前增加的div
// $("#wave ~ .bx1").remove();
$('div.bx1').remove()
//设置暂降触发点的位置 一次值与二次值Y轴不同不是计算出来的
// var height = $(window).height() - 90;
var picHeight
var show = true
//var v = $("#interval").val();
var isvisible = false
picHeight = this.vh
// this.$wave.css('height', picHeight)
// this.$wave.css('width', '100%')
$('#wave').css('height', picHeight)
$('#wave').css('width', this.vw)
var adata = []
var bdata = []
var cdata = []
var max = 0
var min = 0
//绘制横向第一个波形图
this.GJList.smp_x.forEach((item, ind) => {
if (this.GJList.smp_a[ind] > max) {
max = this.GJList.smp_a[ind]
} else if (this.GJList.smp_a[ind] < min) {
min = this.GJList.smp_a[ind]
}
if (this.GJList.smp_b[ind] > max) {
max = this.GJList.smp_b[ind]
} else if (this.GJList.smp_b[ind] < min) {
min = this.GJList.smp_b[ind]
}
if (this.GJList.smp_c[ind] > max) {
max = this.GJList.smp_c[ind]
} else if (this.GJList.smp_c[ind] < min) {
min = this.GJList.smp_c[ind]
}
adata.push([item, this.GJList.smp_a[ind]])
bdata.push([item, this.GJList.smp_b[ind]])
cdata.push([item, this.GJList.smp_c[ind]])
})
//绘制瞬时波形图
// const echarts = require('echarts')
let wave = document.getElementById('wave')
let _this = this
var myChartes = echarts.init(wave)
let echartsColor = {
WordColor: '#000',
thread: '#000000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
var option = {
tooltip: {
top: '10px',
trigger: 'axis',
borderColor: 'grey',
backgroundColor: '#fff',
style: {
color: '#000',
fontSize: '15px',
padding: 10
},
formatter: function (params) {
// console.log(params)
var tips = ''
tips += '时刻:' + params[0].data[0] + '</br/>'
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') {
tips += params[i].seriesName + ':' + params[i].value[1] + '<br/>'
}
}
return tips
},
// axisPointer: {
// type: "cross",
// label: {
// color: "#fff",
// fontSize: 16,
// },
// },
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0
},
title: {
left: 'center',
text: '发生时刻:' + this.boxoList.startTime + ' PT变化:' + this.boxoList.measurementPointName,
textStyle: {
fontSize: 16,
color: _this.DColor ? '#fff' : echartsColor.WordColor
}
},
legend: {
left: '5%',
top: '20',
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
textStyle: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [2, 0, 0, 0] //[上、右、下、左]
}
},
toolbox: {
show: false,
feature: {
//restore: {},
saveAsImage: {
iconStyle: {
borderColor: _this.DColor ? '#fff' : echartsColor.WordColor
}
}
}
},
xAxis: {
type: 'value',
name: '时刻',
boundaryGap: false,
min: this.GJList.smp_x[0],
max: this.GJList.smp_x[this.GJList.smp_x.length - 1] + 1,
title: {
text: 'ms',
textStyle: {
fontSize: 12,
color: _this.DColor ? '#fff' : echartsColor.WordColor
},
enabled: true,
align: 'high'
},
splitLine: {
show: false
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: _this.DColor ? '#fff' : echartsColor.thread
},
onZero: false //-----------重点
},
axisLabel: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
formatter: function (value, index) {
if (_this.valA != (value - 0).toFixed(0)) {
_this.valA = (value - 0).toFixed(0)
return (value - 0).toFixed(0)
}
}
//rotate:39
}
// data: this.syncExtremes,
},
yAxis: {
type: 'value',
name: 'kV',
title: {
align: 'high',
offset: 0,
text: 'kV',
rotation: 0,
y: -10
},
boundaryGap: [0, '100%'],
showLastLabel: true,
max: (max + 10).toFixed(2),
min: (min - 10).toFixed(2),
opposite: false,
nameTextStyle: {
color: _this.DColor ? '#fff' : echartsColor.WordColor
},
//minInterval: 1,
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: _this.DColor ? '#fff' : echartsColor.thread
},
onZero: false //-----------重点
},
axisLabel: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
formatter: function (value, index) {
return (value - 0).toFixed(2)
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [_this.DColor ? '#fff' : echartsColor.thread],
type: 'dashed',
opacity: 0.5
}
}
},
grid: {
left: '1%',
right: '40px',
bottom: '40px',
top: '55px',
containLabel: true
},
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100
}
],
series: [
{
name: 'A相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#DAA520'
},
data: adata
},
{
name: 'B相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#2E8B57'
},
data: bdata
},
{
name: 'C相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#A52a2a'
},
data: cdata
},
{
name: '暂降触发点',
type: 'scatter',
symbol: 'image://' + url,
itemStyle: {
width: 16,
height: 16
},
data: [[0, min]]
}
]
}
myChartes.setOption(option)
// window.echartsArr.push(myChartes)
setTimeout(() => {
myChartes.resize()
this.loading = false
}, 400)
//第一个波形图数据绘制完毕后,绘制后续的波形图
// let waveDatasTemp = waveDatas.slice(1);
// waveDatasTemp.reverse();
}
}
}
</script>
<template>
<div v-loading="loading">
<div>
<div id="boxi" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="wave"></div>
</div>
<el-tabs type="border-card">
<el-tab-pane label="暂态波形上送" :style="'height:' + vhh">
<vxe-table
stripe
:data="Data"
:height="height"
border
style="width: 100%"
header-cell-class-name="table_header"
>
<vxe-column align="center" field="number" title="事件段"></vxe-column>
<vxe-colgroup align="center" field="number1" title="波形起始点相位(°)">
<vxe-column align="center" field="number2" title="A相"></vxe-column>
<vxe-column align="center" field="number3" title="B相"></vxe-column>
<vxe-column align="center" field="number4" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" field="number" title="跳变段电压变化率(V/ms)">
<vxe-column align="center" field="number5" title="A相"></vxe-column>
<vxe-column align="center" field="number6" title="B相"></vxe-column>
<vxe-column align="center" field="number7" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" field="number" title="相位跳变(°)">
<vxe-column align="center" field="number8" title="A相"></vxe-column>
<vxe-column align="center" field="number9" title="B相"></vxe-column>
<vxe-column align="center" field="number10" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-column align="center" field="number11" title="总分段数目"></vxe-column>
<vxe-column
align="center"
field="number12"
title="三相电压不平衡度(%)"
width="180"
></vxe-column>
<vxe-column align="center" field="number13" title="触发类型"></vxe-column>
<vxe-column align="center" field="number14" title="暂降原因"></vxe-column>
</vxe-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
import { mainHeight } from '@/utils/layout'
import * as echarts from 'echarts'
import url from '@/assets/img/point.png'
import $ from 'jquery'
export default {
props: {
flag: {
type: Boolean,
default: false
},
DColor: {
type: Boolean,
default: false
},
boxoList: {
type: [Object, Array]
},
GJList: {
type: [Object, Array]
}
},
data() {
return {
loading: true,
valA: 0,
isOpen: false,
time: '',
type: '',
severity: '',
iphasic: '',
eventValue: '',
persistTime: '',
lineName: '',
subName: '',
waveDatas: [],
Data: [
{
number: 1,
number1: 0,
number2: 0,
number3: 0,
number4: 0,
number5: 0,
number6: 0,
number7: 0,
number8: 0,
number9: 0,
number10: 0,
number11: 1,
number12: 0,
number13: '其他',
number14: '其他'
}
],
height: null,
vhh: null,
ptpass: '',
waveHeight: undefined,
$wave: undefined,
color: '#006565',
charts: {},
arrpoints: [],
titles: '',
vh: null,
vw: null,
zoom: ''
}
},
created() {},
watch: {
value: function (a, b) {
if (a == 2) {
// $("#wave1").remove();
this.initWaves()
} else {
$('#wave1').remove()
this.initWaves()
}
}
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
this.$wave = $('#wave').eq(0)
this.$nextTick(() => {
this.query()
})
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.zoom = 1 / document.body.style.zoom
if (this.flag) {
// console.log(123);
this.vh = mainHeight(280).height
} else {
// console.log(3333);
this.vh = mainHeight(305).height
}
},
query() {
this.loading = true
this.initWave()
},
//开始画图
initWave() {
//清除之前增加的div
// $("#wave ~ .bx1").remove();
$('div.bx1').remove()
//设置暂降触发点的位置 一次值与二次值Y轴不同不是计算出来的
// var height = $(window).height() - 90;
var picHeight
var show = true
//var v = $("#interval").val();
var isvisible = false
picHeight = this.vh
// this.$wave.css('height', picHeight)
// this.$wave.css('width', '100%')
$('#wave').css('height', picHeight)
$('#wave').css('width', this.vw)
var adata = []
var bdata = []
var cdata = []
var max = 0
var min = 0
//绘制横向第一个波形图
this.GJList.smp_x.forEach((item, ind) => {
if (this.GJList.smp_a[ind] > max) {
max = this.GJList.smp_a[ind]
} else if (this.GJList.smp_a[ind] < min) {
min = this.GJList.smp_a[ind]
}
if (this.GJList.smp_b[ind] > max) {
max = this.GJList.smp_b[ind]
} else if (this.GJList.smp_b[ind] < min) {
min = this.GJList.smp_b[ind]
}
if (this.GJList.smp_c[ind] > max) {
max = this.GJList.smp_c[ind]
} else if (this.GJList.smp_c[ind] < min) {
min = this.GJList.smp_c[ind]
}
adata.push([item, this.GJList.smp_a[ind]])
bdata.push([item, this.GJList.smp_b[ind]])
cdata.push([item, this.GJList.smp_c[ind]])
})
//绘制瞬时波形图
// const echarts = require('echarts')
let wave = document.getElementById('wave')
let _this = this
var myChartes = echarts.init(wave)
let echartsColor = {
WordColor: '#000',
thread: '#000000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
console.log('🚀 ~ this.boxoList:', this.boxoList)
var option = {
tooltip: {
top: '10px',
trigger: 'axis',
borderColor: 'grey',
backgroundColor: '#fff',
style: {
color: '#000',
fontSize: '15px',
padding: 10
},
formatter: function (params) {
// console.log(params)
var tips = ''
tips += '时刻:' + params[0].data[0] + '</br/>'
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') {
tips += params[i].seriesName + ':' + params[i].value[1] + '<br/>'
}
}
return tips
},
// axisPointer: {
// type: "cross",
// label: {
// color: "#fff",
// fontSize: 16,
// },
// },
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0
},
title: {
left: 'center',
text: '发生时刻:' + this.boxoList.startTime + ' PT变化:' + this.boxoList.pt,
textStyle: {
fontSize: 16,
color: _this.DColor ? '#fff' : echartsColor.WordColor
}
},
legend: {
left: '5%',
top: '20',
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
textStyle: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [2, 0, 0, 0] //[上、右、下、左]
}
},
toolbox: {
show: false,
feature: {
//restore: {},
saveAsImage: {
iconStyle: {
borderColor: _this.DColor ? '#fff' : echartsColor.WordColor
}
}
}
},
xAxis: {
type: 'value',
name: '时刻',
boundaryGap: false,
min: this.GJList.smp_x[0],
max: this.GJList.smp_x[this.GJList.smp_x.length - 1] + 1,
title: {
text: 'ms',
textStyle: {
fontSize: 12,
color: _this.DColor ? '#fff' : echartsColor.WordColor
},
enabled: true,
align: 'high'
},
splitLine: {
show: false
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: _this.DColor ? '#fff' : echartsColor.thread
},
onZero: false //-----------重点
},
axisLabel: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
formatter: function (value, index) {
if (_this.valA != (value - 0).toFixed(0)) {
_this.valA = (value - 0).toFixed(0)
return (value - 0).toFixed(0)
}
}
//rotate:39
}
// data: this.syncExtremes,
},
yAxis: {
type: 'value',
name: 'kV',
title: {
align: 'high',
offset: 0,
text: 'kV',
rotation: 0,
y: -10
},
boundaryGap: [0, '100%'],
showLastLabel: true,
max: (max + 10).toFixed(2),
min: (min - 10).toFixed(2),
opposite: false,
nameTextStyle: {
color: _this.DColor ? '#fff' : echartsColor.WordColor
},
//minInterval: 1,
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: _this.DColor ? '#fff' : echartsColor.thread
},
onZero: false //-----------重点
},
axisLabel: {
color: _this.DColor ? '#fff' : echartsColor.WordColor,
formatter: function (value, index) {
return (value - 0).toFixed(2)
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [_this.DColor ? '#fff' : echartsColor.thread],
type: 'dashed',
opacity: 0.5
}
}
},
grid: {
left: '1%',
right: '40px',
bottom: '40px',
top: '55px',
containLabel: true
},
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100
}
],
series: [
{
name: '跳变期',
type: 'line',
data: [],
showSymbol: true, // 强制显示标记
symbol: 'rect', // 标记形状为方块
symbolSize: 10, // 方块大小
itemStyle: {
color: '#888888', // 方块颜色为灰色
borderWidth: 0
},
markArea: {
silent: true, // 不响应交互
itemStyle: { color: '#ccc' },
data: [
[
{ xAxis: '0' }, // 第一个跳变期起始
{ xAxis: '5' } // 第一个跳变期结束
],
[
{ xAxis: '210' }, // 第二个跳变期起始
{ xAxis: '220' } // 第二个跳变期结束
]
]
}
},
{
name: 'A相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#DAA520'
},
data: adata
},
{
name: 'B相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#2E8B57'
},
data: bdata
},
{
name: 'C相',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#A52a2a'
},
data: cdata
},
{
name: '暂降触发点',
type: 'scatter',
symbol: 'image://' + url,
itemStyle: {
width: 16,
height: 16
},
data: [[0, min]]
}
]
}
myChartes.setOption(option)
// window.echartsArr.push(myChartes)
setTimeout(() => {
myChartes.resize()
this.loading = false
}, 400)
//第一个波形图数据绘制完毕后,绘制后续的波形图
// let waveDatasTemp = waveDatas.slice(1);
// waveDatasTemp.reverse();
}
}
}
</script>

View File

@@ -1,14 +1,17 @@
export let color = [
'#07CCCA',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B'
]
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#A52a2a']
export const color = [
'#07CCCA',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B266FF',
'#FF6680',
'#40A0FF',
'#33CC99'
]
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#A52a2a']

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,322 @@
// 辅助函数
const getMax = (temp, tempA, tempB, tempC) => {
temp = temp > tempA ? temp : tempA
temp = temp > tempB ? temp : tempB
if (tempC !== undefined) {
temp = temp > tempC ? temp : tempC
}
return temp
}
const getMaxTwo = (temp, tempA, tempB) => {
temp = temp > tempA ? temp : tempA
temp = temp > tempB ? temp : tempB
return temp
}
const getMin = (temp, tempA, tempB, tempC) => {
temp = temp < tempA ? temp : tempA
temp = temp < tempB ? temp : tempB
if (tempC !== undefined) {
temp = temp < tempC ? temp : tempC
}
return temp
}
const getMinOpen = (temp, tempA, tempB) => {
temp = temp < tempA ? temp : tempA
temp = temp < tempB ? temp : tempB
return temp
}
// 数据处理函数
const fliteWaveData = (wp, step, iphasicValue, isOpen) => {
const rmsData = wp.listRmsData
const pt = Number(wp.pt) / 1000
const ct = Number(wp.ct)
const titleList = wp.waveTitle
let xishu = pt
let aTitle = '',
bTitle = '',
cTitle = '',
unit = '电压'
let rmsvFirstX = 0,
rmsvFirstY = 0,
rmsvSecondX = 0,
rmsvSecondY = 0,
firstZhou = 'a',
secondeZhou = 'a'
let ifmax = 0,
ifmin = 0,
ismax = 0,
ismin = 0,
rfmax = 0,
rfmin = 0,
rsmax = 0,
rsmin = 0
const shunshiFA = []
const shunshiFB = []
const shunshiFC = []
const shunshiSA = []
const shunshiSB = []
const shunshiSC = []
const rmsFA = []
const rmsFB = []
const rmsFC = []
const rmsSA = []
const rmsSB = []
const rmsSC = []
if (titleList[iphasicValue * step + 1]?.substring(0, 1) !== 'U') {
xishu = ct
unit = '电流'
}
for (let i = 1; i <= iphasicValue; i++) {
switch (i) {
case 1:
aTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
break
case 2:
bTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
break
case 3:
cTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
break
}
}
if (rmsData[0] && rmsData[0][iphasicValue * step + 1] !== undefined) {
rfmax = rmsData[0][iphasicValue * step + 1] * xishu
rfmin = rmsData[0][iphasicValue * step + 1] * xishu
rmsvFirstY = rmsData[0][iphasicValue * step + 1] * xishu
rmsvFirstX = rmsData[0][0]
rsmax = rmsData[0][iphasicValue * step + 1]
rsmin = rmsData[0][iphasicValue * step + 1]
rmsvSecondY = rmsData[0][iphasicValue * step + 1]
rmsvSecondX = rmsData[0][0]
}
for (let rms = 0; rms < rmsData.length; rms++) {
if (!rmsData[rms] || rmsData[rms][iphasicValue * step + 1] === undefined) {
break
}
switch (iphasicValue) {
case 1:
const rmsFirstA = rmsData[rms][iphasicValue * step + 1] * xishu
rmsFA.push([rmsData[rms][0], rmsFirstA])
rfmax = rfmax > rmsFirstA ? rfmax : rmsFirstA
rfmin = rfmin < rmsFirstA ? rfmin : rmsFirstA
if (rfmin < rmsvFirstY) {
rmsvFirstY = rfmin
firstZhou = 'a'
rmsvFirstX = rmsData[rms][0]
}
const rmsSecondA = rmsData[rms][iphasicValue * step + 1]
rmsSA.push([rmsData[rms][0], rmsSecondA])
rsmax = rsmax > rmsSecondA ? rsmax : rmsSecondA
rsmin = rsmin < rmsSecondA ? rsmin : rmsSecondA
if (rsmin < rmsvSecondY) {
rmsvSecondY = rsmin
secondeZhou = 'a'
rmsvSecondX = rmsData[rms][0]
}
break
case 2:
const rmsFirstA2 = rmsData[rms][iphasicValue * step + 1] * xishu
const rmsFirstB2 = rmsData[rms][iphasicValue * step + 2] * xishu
rmsFA.push([rmsData[rms][0], rmsFirstA2])
rmsFB.push([rmsData[rms][0], rmsFirstB2])
rfmax = getMaxTwo(rfmax, rmsFirstA2, rmsFirstB2)
rfmin = getMinOpen(rfmin, rmsFirstA2, rmsFirstB2)
if (rfmin < rmsvFirstY) {
rmsvFirstY = rfmin
if (rfmin === rmsFirstA2) {
firstZhou = 'a'
} else if (rfmin === rmsFirstB2) {
firstZhou = 'b'
}
rmsvFirstX = rmsData[rms][0]
}
const rmsSecondA2 = rmsData[rms][iphasicValue * step + 1]
const rmsSecondB2 = rmsData[rms][iphasicValue * step + 2]
rmsSA.push([rmsData[rms][0], rmsSecondA2])
rmsSB.push([rmsData[rms][0], rmsSecondB2])
rsmax = getMaxTwo(rsmax, rmsSecondA2, rmsSecondB2)
rsmin = getMinOpen(rsmin, rmsSecondA2, rmsSecondB2)
if (rsmin < rmsvSecondY) {
rmsvSecondY = rsmin
if (rsmin === rmsSecondA2) {
secondeZhou = 'a'
} else if (rsmin === rmsSecondB2) {
secondeZhou = 'b'
}
rmsvSecondX = rmsData[rms][0]
}
break
case 3:
const rmsFirstA3 = rmsData[rms][iphasicValue * step + 1] * xishu
const rmsFirstB3 = rmsData[rms][iphasicValue * step + 2] * xishu
const rmsFirstC3 = rmsData[rms][iphasicValue * step + 3] * xishu
rmsFA.push([rmsData[rms][0], rmsFirstA3])
rmsFB.push([rmsData[rms][0], rmsFirstB3])
rmsFC.push([rmsData[rms][0], rmsFirstC3])
rfmax = getMax(rfmax, rmsFirstA3, rmsFirstB3, rmsFirstC3)
rfmin = isOpen
? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3)
: getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3)
if (rfmin < rmsvFirstY) {
rmsvFirstY = rfmin
if (rfmin === rmsFirstA3) {
firstZhou = 'a'
} else if (rfmin === rmsFirstB3) {
firstZhou = 'b'
} else {
firstZhou = 'c'
}
rmsvFirstX = rmsData[rms][0]
}
const rmsSecondA3 = rmsData[rms][iphasicValue * step + 1]
const rmsSecondB3 = rmsData[rms][iphasicValue * step + 2]
const rmsSecondC3 = rmsData[rms][iphasicValue * step + 3]
rmsSA.push([rmsData[rms][0], rmsSecondA3])
rmsSB.push([rmsData[rms][0], rmsSecondB3])
rmsSC.push([rmsData[rms][0], rmsSecondC3])
rsmax = getMax(rsmax, rmsSecondA3, rmsSecondB3, rmsSecondC3)
rsmin = isOpen
? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3)
: getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3)
if (rsmin < rmsvSecondY) {
rmsvSecondY = rsmin
if (rsmin === rmsSecondA3) {
secondeZhou = 'a'
} else if (rsmin === rmsSecondB3) {
secondeZhou = 'b'
} else {
secondeZhou = 'c'
}
rmsvSecondX = rmsData[rms][0]
}
break
}
}
const instantF = { max: ifmax, min: ifmin }
const instantS = { max: ismax, min: ismin }
const RMSF = { max: rfmax, min: rfmin }
const RMSS = { max: rsmax, min: rsmin }
const RMSFMinDetail = { rmsvFirstX, rmsvFirstY, firstZhou }
const RMSSMinDetail = { rmsvSecondX, rmsvSecondY, secondeZhou }
const shunshiF = { shunshiFA, shunshiFB, shunshiFC }
const shunshiS = { shunshiSA, shunshiSB, shunshiSC }
const RMSFWave = { rmsFA, rmsFB, rmsFC }
const RMSSWave = { rmsSA, rmsSB, rmsSC }
const title = { aTitle, bTitle, cTitle, unit }
return {
instantF,
instantS,
RMSF,
RMSS,
RMSFMinDetail,
RMSSMinDetail,
shunshiF,
shunshiS,
RMSFWave,
RMSSWave,
title,
unit
}
}
// 监听消息
self.onmessage = function (e) {
const { wp, isOpen, value, boxoList, requestId } = e.data
try {
const iphasicValue = wp.iphasic || 1
const picCounts = (wp.waveTitle.length - 1) / iphasicValue
const waveDatas = []
for (let i = 0; i < picCounts; i++) {
const data = fliteWaveData(wp, i, iphasicValue, isOpen, boxoList)
waveDatas.push(data)
}
// 处理标题
let titles = ''
if (boxoList.systemType == 'pms') {
titles =
'变电站名称:' +
boxoList.powerStationName +
' 监测点名称:' +
boxoList.measurementPointName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'%  持续时间:' +
boxoList.duration +
's'
} else if (boxoList.systemType == 'ZL') {
titles =
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
' 监测点名称:' +
boxoList.equipmentName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
boxoList.evtParamVVaDepth +
'% 持续时间:' +
boxoList.evtParamTm +
's'
} else if (boxoList.systemType == 'YPT') {
titles =
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
' 监测点名称:' +
boxoList.lineName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'% 持续时间:' +
boxoList.persistTime +
's'
} else {
titles =
' 变电站名称:' +
boxoList.subName +
' 监测点名称:' +
boxoList.lineName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'% 持续时间:' +
boxoList.duration +
's'
}
// 发送处理结果回主线程
self.postMessage({
requestId,
titles: titles,
success: true,
waveDatas,
time: wp.time,
type: wp.waveType,
severity: wp.yzd,
iphasic: iphasicValue
})
} catch (error) {
self.postMessage({
requestId,
success: false,
error: error.message
})
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,207 @@
// waveData.worker.js
self.addEventListener('message', function (e) {
const { wp, value, iphasic, isOpen, boxoList, requestId } = e.data
// 处理波形数据的函数
const fliteWaveData = (wp, step) => {
// 将原有的fliteWaveData函数实现复制到这里
const shunData = wp.listWaveData
const pt = Number(wp.pt) / 1000
const ct = Number(wp.ct)
const titleList = wp.waveTitle
let xishu = pt
let aTitle = '',
bTitle = '',
cTitle = '',
unit = '电压'
let ifmax = 0,
ifmin = 0,
ismax = 0,
ismin = 0
const shunshiFA = []
const shunshiFB = []
const shunshiFC = []
const shunshiSA = []
const shunshiSB = []
const shunshiSC = []
if (shunData.length > 0) {
if (titleList[iphasic * step + 1]?.substring(0, 1) !== 'U') {
xishu = ct
unit = '电流'
}
for (let i = 1; i <= iphasic; i++) {
switch (i) {
case 1:
aTitle = titleList[iphasic * step + i]?.substring(1) || ''
break
case 2:
bTitle = titleList[iphasic * step + i]?.substring(1) || ''
break
case 3:
cTitle = titleList[iphasic * step + i]?.substring(1) || ''
break
}
}
if (shunData[0][iphasic * step + 1] !== undefined) {
ifmax = shunData[0][iphasic * step + 1] * xishu
ifmin = shunData[0][iphasic * step + 1] * xishu
ismax = shunData[0][iphasic * step + 1]
ismin = shunData[0][iphasic * step + 1]
}
for (let shun = 0; shun < shunData.length; shun++) {
if (shunData[shun][iphasic * step + 1] === undefined) {
break
}
switch (iphasic) {
case 1:
const shunFirstA = shunData[shun][iphasic * step + 1] * xishu
shunshiFA.push([shunData[shun][0], shunFirstA])
ifmax = Math.max(ifmax, shunFirstA)
ifmin = Math.min(ifmin, shunFirstA)
const shunSecondA = shunData[shun][iphasic * step + 1]
shunshiSA.push([shunData[shun][0], shunSecondA])
ismax = Math.max(ismax, shunSecondA)
ismin = Math.min(ismin, shunSecondA)
break
case 2:
const shunFirstA2 = shunData[shun][iphasic * step + 1] * xishu
const shunFirstB2 = shunData[shun][iphasic * step + 2] * xishu
shunshiFA.push([shunData[shun][0], shunFirstA2])
shunshiFB.push([shunData[shun][0], shunFirstB2])
ifmax = Math.max(ifmax, shunFirstA2, shunFirstB2)
ifmin = Math.min(ifmin, shunFirstA2, shunFirstB2)
const shunSecondA2 = shunData[shun][iphasic * step + 1]
const shunSecondB2 = shunData[shun][iphasic * step + 2]
shunshiSA.push([shunData[shun][0], shunSecondA2])
shunshiSB.push([shunData[shun][0], shunSecondB2])
ismax = Math.max(ismax, shunSecondA2, shunSecondB2)
ismin = Math.min(ismin, shunSecondA2, shunSecondB2)
break
case 3:
const shunFirstA3 = shunData[shun][iphasic * step + 1] * xishu
const shunFirstB3 = shunData[shun][iphasic * step + 2] * xishu
const shunFirstC3 = shunData[shun][iphasic * step + 3] * xishu
shunshiFA.push([shunData[shun][0], shunFirstA3])
shunshiFB.push([shunData[shun][0], shunFirstB3])
shunshiFC.push([shunData[shun][0], shunFirstC3])
ifmax = Math.max(ifmax, shunFirstA3, shunFirstB3, shunFirstC3)
ifmin = isOpen
? Math.min(ifmin, shunFirstA3, shunFirstC3)
: Math.min(ifmin, shunFirstA3, shunFirstB3, shunFirstC3)
const shunSecondA3 = shunData[shun][iphasic * step + 1]
const shunSecondB3 = shunData[shun][iphasic * step + 2]
const shunSecondC3 = shunData[shun][iphasic * step + 3]
shunshiSA.push([shunData[shun][0], shunSecondA3])
shunshiSB.push([shunData[shun][0], shunSecondB3])
shunshiSC.push([shunData[shun][0], shunSecondC3])
ismax = Math.max(ismax, shunSecondA3, shunSecondB3, shunSecondC3)
ismin = isOpen
? Math.min(ismin, shunSecondA3, shunSecondC3)
: Math.min(ismin, shunSecondA3, shunSecondB3, shunSecondC3)
break
}
}
}
const instantF = { max: ifmax, min: ifmin }
const instantS = { max: ismax, min: ismin }
const shunshiF = { shunshiFA, shunshiFB, shunshiFC }
const shunshiS = { shunshiSA, shunshiSB, shunshiSC }
const title = { aTitle, bTitle, cTitle, unit }
return { instantF, instantS, shunshiF, shunshiS, title, unit }
}
// 处理标题
let titles = ''
if (boxoList.systemType == 'pms') {
titles =
'变电站名称:' +
boxoList.powerStationName +
' 监测点名称:' +
boxoList.measurementPointName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'% 持续时间:' +
boxoList.duration +
's'
} else if (boxoList.systemType == 'ZL') {
titles =
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
' 监测点名称:' +
boxoList.equipmentName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
boxoList.evtParamVVaDepth +
'% 持续时间:' +
boxoList.evtParamTm +
's'
} else if (boxoList.systemType == 'YPT') {
titles =
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
' 监测点名称:' +
boxoList.lineName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'% 持续时间:' +
boxoList.persistTime +
's'
} else {
titles =
'变电站名称:' +
boxoList.subName +
' 监测点名称:' +
boxoList.lineName +
' 发生时刻:' +
boxoList.startTime +
' 暂降(骤升)幅值:' +
(boxoList.featureAmplitude * 100).toFixed(2) +
'% 持续时间:' +
boxoList.duration +
's'
}
const iphasicValue = wp.iphasic || 1
const picCounts = (wp.waveTitle.length - 1) / iphasicValue
const waveDatas = []
for (let i = 0; i < picCounts; i++) {
const data = fliteWaveData(wp, i)
waveDatas.push(data)
}
const time = wp.time
const type = wp.waveType
let severity = wp.yzd
if (severity < 0) {
severity = '/'
type = '/'
}
// 将处理结果发送回主线程
self.postMessage({
requestId,
success: true,
waveDatas,
time,
type,
severity,
titles,
iphasic: iphasicValue
})
})

File diff suppressed because it is too large Load Diff

View File

@@ -1,345 +0,0 @@
<template>
<div>
<!-- <MyEChart style="height: 400px;width: 100%" v-for="item in echartsList" :options="item" /> -->
<div id="container0" style="height:400px;width:100%;"></div>
<div id="container1" style="height:400px;width:100%;"></div>
</div>
</template>
<script setup lang='ts'>
import MyEChart from '@/components/echarts/MyEchart.vue'
import Highcharts from 'highcharts';
import { ref, reactive, onUnmounted } from 'vue'
const props = defineProps({
wp: {
type: Object,
},
boxoList: {
type: Object,
},
value: {
type: Number,
default: 1
},
})
// let data = [[-100, -3.41, -3.39, -3.34, 1, 2, 3], [-99.92, -5.19, -5.23, -5.19, 4, 5, 6], [-99.84, -7.28, -7.26, -7.26, 10, 20, 30]]
const echartsList: any = ref([])
const SA:any = ref([])
const SB:any = ref([])
const SC:any = ref([])
const info = () => {
let result = props.wp?.listWaveData.map(item => {
let A = [[item[0], item[1]], [item[0], item[4]],];
let B = [[item[0], item[2]], [item[0], item[5]],]; // 注意item[7] 会是 undefined需要确保数据长度或调整索引
let C = [[item[0], item[3]], [item[0], item[6]],]; // 根据要求,这里 C 的第二个和第三个子数组的第二个元素取自 subArray[4] 和 subArray[6]
// 由于 subArray[7] 在原始数据中不存在,我们可以使用 subArray[5] 的下一个有效索引 subArray[6](对于 B 的第三个子数组的第二个元素)
return { A, B, C };
}).reduce((acc, { A, B, C }) => {
acc.A[0].push(A[0]);
acc.A[1].push(A[1]);
acc.B[0].push(B[0]);
acc.B[1].push(B[1]);
acc.C[0].push(C[0]);
acc.C[1].push(C[1]);
return acc;
}, { A: [[],[]], B: [[],[]], C: [[],[]] });
SA.value = result.A;
SB.value = result.B;
SC.value = result.C;
console.log( SA.value );
console.log( SB.value );
console.log( SC.value);
let num = (props.wp?.waveTitle.length - 1) / 3
for (let i = 0; i < num; i++) {
// A.value = []
// B.value = []
// C.value = []
// props.wp?.listWaveData.forEach((item: any,) => {
// A.value.push([item[0], item[i * 3 + 1]])
// B.value.push([item[0], item[i * 3 + 2]])
// C.value.push([item[0], item[i * 3 + 3]])
// })
setTimeout(() => {
// echartsList.value.push({
// title: {
// text: i == 0 ? '123' : '',
// x: 'center',
// },
// tooltip: {
// axisPointer: {
// type: 'cross',
// label: {
// color: '#fff',
// fontSize: 16
// }
// },
// textStyle: {
// color: '#fff',
// fontStyle: 'normal',
// opacity: 0.35,
// fontSize: 14
// },
// backgroundColor: 'rgba(0,0,0,0.55)',
// borderWidth: 0,
// },
// dataZoom: [
// {
// type: 'inside',
// height: 13,
// start: 0,
// bottom: '20px',
// end: 25
// },
// {
// start: 0,
// height: 13,
// bottom: '20px',
// end: 25
// }
// ],
// xAxis: {
// // data: data.filter(item => item.phaseType == 'A').map(item => item.time),
// name: '时间',
// type: 'value',
// axisLine: {
// show: true,
// onZero: false //-----------重点
// },
// // splitLine: {
// // show: false,
// // }
// },
// yAxis: {
// type: 'value',
// name: name,
// // splitLine: {
// // show: false,
// // }
// // max: max,
// // min: min
// },
// // legend: {
// // data: ['A', 'B', 'C']
// // // selectedMode: false,
// // },
// grid: {
// top: '30px',
// left: '30px'
// },
// color: ['#DAA520', '#2E8B57', '#A52a2a'],
// series: [
// {
// name: 'A相',
// type: 'line',
// smooth: true,
// symbol: 'none',
// // 开启渐进式渲染
// progressive: 2000,
// // 渲染阈值,大于此值则启动渐进渲染
// progressiveThreshold: 5000,
// sampling: 'average',
// data: A
// },
// {
// name: 'B相',
// type: 'line',
// smooth: true,
// symbol: 'none',
// // 开启渐进式渲染
// progressive: 2000,
// // 渲染阈值,大于此值则启动渐进渲染
// progressiveThreshold: 5000,
// sampling: 'average',
// data: B
// },
// {
// name: 'C相',
// type: 'line',
// smooth: true,
// symbol: 'none',
// // 开启渐进式渲染
// progressive: 2000,
// // 渲染阈值,大于此值则启动渐进渲染
// progressiveThreshold: 5000,
// sampling: 'average',
// data: C
// }
// ],
// options: {
// animation: false,
// dataZoom: [{
// type: 'inside',
// height: 13,
// start: 0,
// bottom: '20px',
// end: 10
// },
// {
// start: 0,
// height: 13,
// bottom: '20px',
// end: 10
// }]
// }
// })
Highcharts.chart(`container${i}`, {
chart: {
zooming: {
type: 'x'
}
},
title: {
text: '123',
align: 'left'
},
subtitle: {
text: 'Using the Boost module',
align: 'left'
},
accessibility: {
screenReaderSection: {
beforeChartFormat: '<{headingTagName}>' +
'{chartTitle}</{headingTagName}><div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>' +
'{yAxisDescription}</div>'
}
},
tooltip: {
},
xAxis: {
type: 'datetime'
},
series: [
{
name: 'A相',
type: 'line',
lineWidth: 0.5,
data: SA.value[i]
},
{
name: 'B相',
type: 'line',
lineWidth: 0.5,
data: SB.value[i]
},
{
name: 'C相',
type: 'line',
lineWidth: 0.5,
data: SC.value[i]
}
],
});
}, 0);
}
}
var init = () => {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
// don't display the year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
// tooltip: {
// headerFormat: '<b>{series.name}</b><br>',
// pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
// },
plotOptions: {
series: {
marker: {
symbol: 'circle',
fillColor: '#FFFFFF',
enabled: true,
radius: 2.5,
lineWidth: 1,
lineColor: null
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
series: [
]
});
}
onMounted(() => {
info()
// init();
})
onUnmounted(() => {
SA.value = []
SB.value = []
SC.value = []
})
</script>
<style lang="scss" scoped></style>

View File

@@ -1,190 +1,177 @@
<template>
<div v-if="view2">
<el-row>
<el-col :span="12">
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select
style="min-width: 200px; width: 200px"
@change="changeView"
v-model="value"
placeholder="请选择值类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
@click="AdvancedAnalytics">高级分析</el-button> -->
</el-col>
<el-col :span="12">
<el-button
@click="backbxlb"
class="el-icon-refresh-right"
icon="el-icon-CloseBold"
style="float: right"
>
返回
</el-button>
</el-col>
</el-row>
<div v-loading="loading" style="height: calc(100vh - 190px)">
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi
ref="shushiboxiRef"
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
class="boxbx pt10 pb10"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi
ref="rmsboxiRef"
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
</div>
</div>
<div v-if="view3" class="pd10">
<span style="font-weight: 500; font-size: 22px">高级分析</span>
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
</div>
</template>
<script setup lang="ts">
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import analytics from '@/components/echarts/analytics.vue'
import { ref, reactive } from 'vue'
import { analysis } from '@/api/advance-boot/analyse'
import { mainHeight } from '@/utils/layout'
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
const emit = defineEmits(['backbxlb'])
interface Props {
// boxoList: any
// wp: any,
senior?: boolean
}
const props = withDefaults(defineProps<Props>(), {
senior: false
})
const parentHeight = ref(0)
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
const value = ref(1)
const options = ref([
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
])
const shushiboxiRef = ref()
const bxecharts = ref(mainHeight(95).height as any)
const view2 = ref(true)
const boxoList = ref(null)
const wp = ref(null)
const showBoxi = ref(true)
const view3 = ref(false)
const view4 = ref(false)
const GJList = ref([])
const open = async (row: any) => {
loading.value = true
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
.then(res => {
row.loading = false
if (res != undefined) {
boxoList.value = row
wp.value = res.data
loading.value = false
view4.value = true
}
})
.catch(() => {
loading.value = false
})
}
const bxhandleClick = (tab: any) => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
loading.value = true
if (tab.name == 'ssbx') {
bxactiveName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
bxactiveName.value = 'rmsbx'
}
setTimeout(() => {
loading.value = false
}, 0)
// console.log(tab, event);
}
const backbxlb = () => {
boxoList.value = null
wp.value = null
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
emit('backbxlb')
}
const setHeight = (h: any, vh: any) => {
if (h != false) {
parentHeight.value = h
}
setTimeout(() => {
bxecharts.value = mainHeight(vh).height
}, 100)
}
// 高级分析
const AdvancedAnalytics = () => {
analysis({
eventIndex: boxoList.value.eventId
}).then(res => {
GJList.value = res.data
view3.value = true
view2.value = false
})
}
const changeView = () => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
showBoxi.value = false
setTimeout(() => {
showBoxi.value = true
}, 0)
}
const gaoBack = () => {
view2.value = true
view3.value = false
}
defineExpose({ open, setHeight })
</script>
<style lang="scss" scoped></style>
<template>
<div v-if="view2">
<el-row>
<el-col :span="12">
<!-- <span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select
style="min-width: 200px; width: 200px"
@change="changeView"
v-model="value"
placeholder="请选择值类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> -->
<el-radio-group v-model.trim="value" @change="changeView">
<el-radio-button label="一次值" :value="1" />
<el-radio-button label="二次值" :value="2" />
</el-radio-group>
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary" @click="AdvancedAnalytics">
高级分析
</el-button> -->
</el-col>
<el-col :span="12">
<el-button @click="backbxlb" icon="el-icon-Back" style="float: right">返回</el-button>
</el-col>
</el-row>
<div v-loading="loading" style="height: calc(100vh - 190px)" class="mt10">
<el-tabs v-if="view4" type="border-card" v-model="bxactiveName"
@tab-click="bxhandleClick">
<el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
<shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
:parentHeight="parentHeight" :boxoList="boxoList" :wp="wp"></shushiboxi>
</el-tab-pane>
<el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
<rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
:parentHeight="parentHeight" :boxoList="boxoList" :wp="wp"></rmsboxi>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
</div>
</div>
<div v-if="view3" class="pd10">
<span style="font-weight: 500; font-size: 22px">高级分析</span>
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
</div>
</template>
<script setup lang="ts">
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import analytics from '@/components/echarts/analytics.vue'
import { ref, shallowRef } from 'vue'
import { analysis } from '@/api/advance-boot/analyse'
import { mainHeight } from '@/utils/layout'
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
import { buildWaveStoreKey, registerWaveRaw, buildSlimWp, releaseWaveRaw } from '@/utils/waveRawStore'
import { clearWaveCache } from '@/utils/waveCache'
const emit = defineEmits(['backbxlb'])
interface Props {
// boxoList: any
// wp: any,
senior?: boolean
}
const props = withDefaults(defineProps<Props>(), {
senior: false
})
const parentHeight = ref(0)
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
const value = ref(1)
const options = ref([
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
])
const shushiboxiRef = ref()
const bxecharts = ref(mainHeight(145).height as any)
const view2 = ref(true)
const boxoList: any = ref(null)
const wp = shallowRef<any>(null)
const showBoxi = ref(true)
const view3 = ref(false)
const view4 = ref(false)
const GJList = ref({})
const open = async (row: any) => {
loading.value = true
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
.then(res => {
row.loading = false
if (res != undefined) {
boxoList.value = row
boxoList.value.pt = res.data.pt
const storeKey = buildWaveStoreKey(row)
registerWaveRaw(storeKey, res.data)
wp.value = buildSlimWp(res.data, storeKey)
loading.value = false
view4.value = true
}
})
.catch(() => {
loading.value = false
backbxlb()
})
}
const bxhandleClick = (tab: any) => {
loading.value = true
if (tab.name == 'ssbx') {
bxactiveName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
bxactiveName.value = 'rmsbx'
}
setTimeout(() => {
loading.value = false
}, 0)
// console.log(tab, event);
}
const backbxlb = () => {
const storeKey = wp.value?.waveStoreKey
releaseWaveRaw(storeKey, 'all')
clearWaveCache()
boxoList.value = null
wp.value = null
emit('backbxlb')
}
const setHeight = (h: any, vh: any) => {
if (h != false) {
parentHeight.value = h
}
setTimeout(() => {
bxecharts.value = mainHeight(vh).height
}, 100)
}
// 高级分析
const AdvancedAnalytics = () => {
analysis({
eventIndex: boxoList.value.eventId
}).then(res => {
// GJList.value = res.data
// view3.value = true
// view2.value = false
})
GJList.value = {}
view3.value = true
view2.value = false
}
const changeView = () => {
shushiboxiRef.value?.backbxlb?.()
rmsboxiRef.value?.backbxlb?.()
showBoxi.value = false
setTimeout(() => {
showBoxi.value = true
}, 0)
}
const gaoBack = () => {
view2.value = true
view3.value = false
}
defineExpose({ open, setHeight })
</script>
<style lang="scss" scoped></style>

Some files were not shown because too many files have changed in this diff Show More