79 Commits

Author SHA1 Message Date
guanj
a765cdf9ee 修改测试bug 优化页面 2026-01-04 14:55:31 +08:00
guanj
cc0f8bc8b6 优化驾驶舱页面 2025-12-20 23:44:46 +08:00
guanj
7e4db9d4cd 修改菜单 2025-12-17 17:41:35 +08:00
sjl
67e2fa57d0 在线设备录入校验 2025-12-17 16:47:11 +08:00
stt
ad1fc11e61 删除打印 2025-12-10 13:33:06 +08:00
stt
6824864db2 没有波形图的时候显示暂无波形 2025-12-10 13:21:48 +08:00
stt
37ed693cea 实时数据页面样式修改 2025-12-10 10:30:32 +08:00
stt
0419af8e50 指标越限程度宽度修改 2025-12-09 15:21:42 +08:00
stt
5268b93dd0 监测点管理页面 2025-12-09 14:56:33 +08:00
guanj
4e6bd55089 修改报表样式 2025-12-09 13:58:37 +08:00
stt
4e0db29ab1 复位按钮隐藏 2025-12-09 11:36:52 +08:00
stt
9b0fd76f48 修改"下一个"按钮的状态 2025-12-08 15:23:38 +08:00
stt
f92b07c555 修改"下一个"按钮的状态 2025-12-08 14:21:27 +08:00
guanj
a77db278ac 修改驾驶舱时间问题 2025-12-08 13:30:46 +08:00
stt
51a0ae49a9 zoom缩放导致echarts偏移问题 2025-12-08 11:39:39 +08:00
stt
814e9917d6 弹框显示越限和不越限,不显示数值 2025-12-08 10:55:24 +08:00
stt
21f1c41196 宽度调整 2025-12-08 10:35:31 +08:00
stt
c188446e76 样式修改 2025-12-08 10:32:11 +08:00
stt
e2a5d084a5 下拉框添加filterable属性 2025-12-08 09:42:08 +08:00
stt
4ae27a9d6d 所以下拉框加filterable属性 2025-12-08 09:31:16 +08:00
stt
7783569f91 不越限样式调整 2025-12-08 09:01:00 +08:00
stt
f1ac67070f 指标越限明显样式调整 2025-12-08 08:55:36 +08:00
stt
77a9a2adfc Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-08 08:54:48 +08:00
stt
accc1f30f6 暂态事件样式调整 2025-12-08 08:54:44 +08:00
guanj
94649b3348 微调 2025-12-08 08:37:07 +08:00
stt
e3de350dc5 指标拟合图y轴展示修改 2025-12-05 16:18:48 +08:00
stt
4963dd495a 样式修改 2025-12-05 16:06:39 +08:00
stt
40fa6eba20 暂降方向统计页面联调 2025-12-05 14:55:32 +08:00
stt
f32934e0e6 Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-05 11:05:08 +08:00
stt
460962cead 删除多余代码 2025-12-05 11:05:05 +08:00
guanj
fa75fc2923 联调实时数据 2025-12-05 10:44:35 +08:00
stt
f953b560c7 暂态电能质量分析时间修改 2025-12-04 20:27:05 +08:00
stt
8f3426eb1f 稳态治理效果分析时间修改 2025-12-04 20:08:37 +08:00
stt
c2a2a4afd6 稳态电能质量分析时间修改 2025-12-04 19:47:31 +08:00
stt
d2357d4ad2 稳态电能质量分析时间修改 2025-12-04 19:11:21 +08:00
stt
1b23355134 实时数据页面提交 2025-12-04 16:29:46 +08:00
guanj
ce9caa8729 Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-04 15:25:31 +08:00
guanj
2d0349c1b6 微调 2025-12-04 15:25:22 +08:00
stt
8355fc6aed Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-04 14:51:25 +08:00
stt
23bc2d8f05 组件查询时间加必填校验 2025-12-04 14:51:21 +08:00
guanj
43caddffa3 修改 echart样式 2025-12-04 10:33:48 +08:00
stt
3accaf3079 日期下拉默认修改 2025-12-04 10:30:19 +08:00
guanj
5687367602 Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-04 09:37:58 +08:00
guanj
b8ee530557 修改驾驶舱zoom缩放问题 2025-12-04 09:37:38 +08:00
stt
0518127792 公共时间修改 2025-12-03 16:30:42 +08:00
guanj
5db43cd4b1 微调 2025-12-03 15:37:08 +08:00
guanj
bf0657cbbc 在线设备录入添加参数
修改组件管理时间线配置
2025-12-03 14:56:57 +08:00
stt
bcb1535d4d 日历只月的时候调接口 2025-12-03 13:26:03 +08:00
stt
aa07112605 敏感用户管理加单位 2025-12-03 09:05:13 +08:00
guanj
c09bea9e04 修改波形样式 2025-12-02 16:03:04 +08:00
stt
22cd6088a3 敏感用户列表联调 2025-12-02 15:55:20 +08:00
stt
faf7ba98a6 区分项目 2025-12-01 15:04:44 +08:00
guanj
b90f70c72d Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-12-01 15:02:50 +08:00
guanj
d38b426527 添加项目区分 2025-12-01 15:02:33 +08:00
stt
79a246cd87 接口路径修改 2025-12-01 14:15:16 +08:00
stt
58ee36c6a5 接口路径修改 2025-12-01 09:33:12 +08:00
stt
515dcfe76c 联调修改 2025-11-28 16:33:32 +08:00
stt
031fab286b 电压暂升的时候显示/ 2025-11-28 14:34:16 +08:00
stt
58bc269940 F47曲线详情,暂态事件明细详情联调 2025-11-28 14:06:33 +08:00
stt
80182cdc6f 治理报告联调接口 2025-11-28 11:22:33 +08:00
stt
8ce2968bee 修改样式 2025-11-27 16:21:52 +08:00
guanj
1a146afcd7 修改 波形样式 2025-11-27 15:45:42 +08:00
guanj
800ec7f0cf 修改波形样式 2025-11-27 15:25:33 +08:00
stt
e824f4823a rem改成px 2025-11-27 15:08:04 +08:00
stt
2476d2401e 加上YPT的代码 2025-11-27 15:04:32 +08:00
stt
f043b6dc1a F47曲线不可容忍事件也有小圆圈 2025-11-27 15:00:35 +08:00
stt
09bf34700a 趋势对比线条颜色修改 2025-11-27 14:58:06 +08:00
stt
f32673c92a 去掉小圆点 2025-11-27 14:47:04 +08:00
stt
2c7b5a8583 波形图标题修改 2025-11-27 14:38:30 +08:00
stt
3745d91a9d 指标拟合图没有数据的时候也要展示x,y轴 2025-11-27 14:36:27 +08:00
guanj
9117a6e3c6 修改接口名称 2025-11-26 16:25:26 +08:00
stt
e759f443d3 查看波形图联调修改 2025-11-26 15:37:56 +08:00
stt
af3f9fe607 接口路径修改 2025-11-26 14:33:23 +08:00
stt
d97e97f51c 接口路径修改 2025-11-26 14:31:34 +08:00
stt
5e1a628d53 接口路径修改 2025-11-26 14:20:19 +08:00
stt
acc5e93731 波形图去掉背景色,文字颜色改成黑色 2025-11-26 13:45:14 +08:00
stt
93586255fc 接口路径调整 2025-11-26 13:11:56 +08:00
stt
cf51ba9ff0 日历表格调整 2025-11-26 09:31:32 +08:00
stt
67d9aaf958 暂态事件概率分布联调修改 2025-11-25 16:12:20 +08:00
117 changed files with 11520 additions and 7762 deletions

3
.env.ypt Normal file
View File

@@ -0,0 +1,3 @@
# 云平台
NODE_ENV = ypt
VITE_NAME="ypt"

View File

@@ -1,2 +1,3 @@
NODE_ENV = zl # 治理
VITE_NAME="zl" NODE_ENV = zl
VITE_NAME="zl"

View File

@@ -6,8 +6,10 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"dev:zl": "vite --mode zl", "dev:zl": "vite --mode zl",
"dev:ypt": "vite --mode ypt",
"build": "vite build", "build": "vite build",
"build:zl": "vite build --mode zl", "build:zl": "vite build --mode zl",
"build:ypt": "vite build --mode ypt",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {

View File

@@ -15,6 +15,13 @@ export function getLineTree() {
method: 'POST' method: 'POST'
}) })
} }
// 监测点列表治理
export function objTree() {
return createAxios({
url: '/cs-device-boot/csLedger/objTree',
method: 'POST'
})
}
//云设备录入树 //云设备录入树

View File

@@ -0,0 +1,28 @@
import request from '@/utils/request'
// 新增敏感用户
export function saveUser(data: any) {
return request({
url: '/cs-harmonic-boot/pqSensitiveUser/save',
method: 'post',
data: data
})
}
// 修改敏感用户
export function updateUser(data: any) {
return request({
url: '/cs-harmonic-boot/pqSensitiveUser/update',
method: 'post',
data: data
})
}
// 删除敏感用户
export function deleteUser(data: any) {
return request({
url: '/cs-harmonic-boot/pqSensitiveUser/delete',
method: 'post',
data: data
})
}

View File

@@ -1,22 +1,31 @@
import createAxios from '@/utils/request' import createAxios from '@/utils/request'
// 查询设备数据趋势 // 查询设备数据趋势
export function getDeviceDataTrend(data: any) { export function getDeviceDataTrend(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/datatrend/querydatatrend', url: '/cs-harmonic-boot/datatrend/querydatatrend',
method: 'POST', method: 'POST',
data data
}) })
} }
// 波形下载 // 波形下载
export function getFileZip(params: any) { export function getFileZip(params: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/event/getFileZip', url: '/cs-harmonic-boot/event/getFileZip',
method: 'get', method: 'get',
params, params,
responseType: 'blob' responseType: 'blob'
}) })
} }
export function exportModel(data: any) {
return createAxios({
url: '/cs-harmonic-boot/exportmodel/exportModel',
method: 'post',
data: data,
responseType: 'blob'
})
}

View File

@@ -1,50 +1,67 @@
import createAxios from '@/utils/request' import createAxios from '@/utils/request'
//新增组态项目 //新增组态项目
export function add(data: any) { export function add(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/csconfiguration/add', url: '/cs-harmonic-boot/csconfiguration/add',
method: 'post', method: 'post',
data data
}) })
} }
//组态项目分页查询 //组态项目分页查询
export function coFqueryPage(data: any) { export function coFqueryPage(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/csconfiguration/queryPage', url: '/cs-harmonic-boot/csconfiguration/queryPage',
method: 'post', method: 'post',
data data
}) })
} }
//修改组态项目 //修改组态项目
export function audit(data: any) { export function audit(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/csconfiguration/audit', url: '/cs-harmonic-boot/csconfiguration/audit',
method: 'post', method: 'post',
data data
}) })
} }
//组态页面分页查询 //组态页面分页查询
export function queryPageData(data: any) { export function queryPageData(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/cspage/queryPage', url: '/cs-harmonic-boot/cspage/queryPage',
method: 'post', method: 'post',
data data
}) })
} }
//查询工程列表 //查询工程列表
export function deviceTree(data: any) { export function deviceTree(data: any) {
return createAxios({ return createAxios({
url: '/cs-device-boot/csLedger/deviceTree', url: '/cs-device-boot/csLedger/deviceTree',
method: 'post', method: 'post',
data data
}) })
} }
//三层设备树(项目层根节点为治理设备和便携式设备组态) //三层设备树(项目层根节点为治理设备和便携式设备组态)
export function getztProjectTree() { export function getztProjectTree() {
return createAxios({ return createAxios({
url: '/cs-device-boot/csLedger/getztProjectTree', url: '/cs-device-boot/csLedger/getztProjectTree',
method: 'post', method: 'post',
}) })
} }
//根据用户id获取组件信息
export function getByUserId(data: any) {
return createAxios({
url: '/cs-harmonic-boot/cspage/getByUserId',
method: 'post',
params: data
})
}
//c保存组态界面与用户的关系
export function savePageIdWithUser(data: any) {
return createAxios({
url: '/cs-harmonic-boot/cspage/savePageIdWithUser',
method: 'post',
params: data
})
}

View File

@@ -1,27 +1,36 @@
import createAxios from '@/utils/request' import createAxios from '@/utils/request'
// 获取设备补召页面数据 // 获取设备补召页面数据
export function getMakeUpData(data: any) { export function getMakeUpData(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/offlineDataUpload/makeUpData?lineId='+data, url: '/cs-harmonic-boot/offlineDataUpload/makeUpData?lineId='+data,
method: 'POST' method: 'POST'
}) })
} }
//查询装置目录-文件 //查询装置目录-文件
export function getAskDirOrFile(data: any) { export function getAskDirOrFile(data: any) {
return createAxios({ return createAxios({
url: `/cs-harmonic-boot/offlineDataUpload/askDirOrFile?fileType=${data.fileType}&nDid=${data.nDid}&path=${data.path}&prjName=${data.prjName}`, url: `/cs-harmonic-boot/offlineDataUpload/askDirOrFile?fileType=${data.fileType}&nDid=${data.nDid}&path=${data.path}&prjName=${data.prjName}`,
method: 'POST' method: 'POST'
}) })
} }
//设备补召操作 //设备补召操作
// 获取设备补召页面数据 // 获取设备补召页面数据
export function offlineDataUploadMakeUp(data: any) { export function offlineDataUploadMakeUp(data: any) {
return createAxios({ return createAxios({
url: '/cs-harmonic-boot/offlineDataUpload/makeUp', url: '/cs-harmonic-boot/offlineDataUpload/makeUp',
method: 'POST', method: 'POST',
data data
}) })
} }
//设备补召操作
// 根据id集合获取敏感负荷用户列表
export function getListByIds() {
return createAxios({
url: '/cs-harmonic-boot/pqSensitiveUser/getListByIds',
method: 'POST',
})
}

View File

@@ -3,7 +3,7 @@ import request from '@/utils/request'
// 主要监测点列表查询>>分页 // 主要监测点列表查询>>分页
export function mainLineList(data: any) { export function mainLineList(data: any) {
return request({ return request({
url: '/harmonic-boot/mainLine/list', url: '/cs-harmonic-boot/mainLine/list',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -11,7 +11,7 @@ export function mainLineList(data: any) {
// 主要监测点指标越限详情 // 主要监测点指标越限详情
export function statLimitRateDetails(data: any) { export function statLimitRateDetails(data: any) {
return request({ return request({
url: '/harmonic-boot/mainLine/statLimitRateDetails', url: '/cs-harmonic-boot/mainLine/statLimitRateDetails',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -38,7 +38,7 @@ export function trendData(data: any) {
// 每日越限占比统计 // 每日越限占比统计
export function totalLimitStatisticsDetails(data: any) { export function totalLimitStatisticsDetails(data: any) {
return request({ return request({
url: '/harmonic-boot/totalLimitStatistics/details', url: '/cs-harmonic-boot/totalLimitStatistics/details',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -47,7 +47,7 @@ export function totalLimitStatisticsDetails(data: any) {
// 总体指标越限统计列表 // 总体指标越限统计列表
export function totalLimitStatisticsList(data: any) { export function totalLimitStatisticsList(data: any) {
return request({ return request({
url: '/harmonic-boot/totalLimitStatistics/list', url: '/cs-harmonic-boot/totalLimitStatistics/list',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -56,7 +56,7 @@ export function totalLimitStatisticsList(data: any) {
// 总体指标越限统计数据 // 总体指标越限统计数据
export function totalLimitStatisticsData(data: any) { export function totalLimitStatisticsData(data: any) {
return request({ return request({
url: '/harmonic-boot/totalLimitStatistics/data', url: '/cs-harmonic-boot/totalLimitStatistics/data',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -65,7 +65,7 @@ export function totalLimitStatisticsData(data: any) {
// 指标越限程度数据 // 指标越限程度数据
export function limitExtentData(data: any) { export function limitExtentData(data: any) {
return request({ return request({
url: '/harmonic-boot/limitRateDetailD/limitExtentData', url: '/cs-harmonic-boot/limitRateDetailD/limitExtentData',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -73,7 +73,7 @@ export function limitExtentData(data: any) {
// 指标日趋势图数据 // 指标日趋势图数据
export function limitExtentDayData(data: any) { export function limitExtentDayData(data: any) {
return request({ return request({
url: '/harmonic-boot/limitRateDetailD/limitExtentDayData', url: '/cs-harmonic-boot/limitRateDetailD/limitExtentDayData',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -82,7 +82,7 @@ export function limitExtentDayData(data: any) {
// 指标越限明细日历数据 // 指标越限明细日历数据
export function limitCalendarData(data: any) { export function limitCalendarData(data: any) {
return request({ return request({
url: '/harmonic-boot/limitRateDetailD/limitCalendarData', url: '/cs-harmonic-boot/limitRateDetailD/limitCalendarData',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -100,7 +100,7 @@ export function fittingData(data: any) {
//指标越限时间概率分布 //指标越限时间概率分布
export function limitTimeProbabilityData(data: any) { export function limitTimeProbabilityData(data: any) {
return request({ return request({
url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData', url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -109,7 +109,7 @@ export function limitTimeProbabilityData(data: any) {
//指标越限程度概率分布 //指标越限程度概率分布
export function limitProbabilityData(data: any) { export function limitProbabilityData(data: any) {
return request({ return request({
url: '/harmonic-boot/limitRateDetailD/limitProbabilityData', url: '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -119,7 +119,7 @@ export function limitProbabilityData(data: any) {
// 电网侧指标越限统计列表 // 电网侧指标越限统计列表
export function gridSideLimitStatisticsList(data: any) { export function gridSideLimitStatisticsList(data: any) {
return request({ return request({
url: '/harmonic-boot/gridSideLimitStatistics/list', url: '/cs-harmonic-boot/gridSideLimitStatistics/list',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -128,7 +128,7 @@ export function gridSideLimitStatisticsList(data: any) {
// 电网侧指标越限统计数据 // 电网侧指标越限统计数据
export function gridSideLimitStatisticsData(data: any) { export function gridSideLimitStatisticsData(data: any) {
return request({ return request({
url: '/harmonic-boot/gridSideLimitStatistics/data', url: '/cs-harmonic-boot/gridSideLimitStatistics/data',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -234,4 +234,40 @@ export function netEventTable(data: any) {
}) })
} }
// 分页查询暂降事件
export function pageEvent(data: any) {
return request({
url: '/cs-harmonic-boot/event/pageEvent',
method: 'post',
data: data
})
}
// 暂态事件波形分析
export function analyseWave(data: any) {
return request({
url: '/cs-harmonic-boot/event/analyseWave',
method: 'get',
params: data
})
}
// 暂态监测点下拉框接口
export function getSimpleLine() {
return request({
url: '/cs-device-boot/csline/getSimpleLine',
method: 'get'
})
}
export function getLineExport(data:any) {
return request({
url: '/cs-harmonic-boot/eventReport/getLineExport',
method: 'post',
data: data,
responseType: 'blob'
})
}

View File

@@ -3,14 +3,15 @@ import createAxios from '@/utils/request'
// 获取参数指标 // 获取参数指标
export function getIndex() { export function getIndex() {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/reportChooseTree', // url: '/harmonic-boot/customReport/reportChooseTree',
url: '/cs-harmonic-boot/customReport/reportChooseTree',
method: 'get' method: 'get'
}) })
} }
//、查询数据激活报表模板 //、查询数据激活报表模板
export function updateTemplateActive(data) { export function updateTemplateActive(data) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/updateTemplateActive', url: '/cs-harmonic-boot/customReport/updateTemplateActive',
method: 'post', method: 'post',
data data
}) })
@@ -19,7 +20,8 @@ export function updateTemplateActive(data) {
//获取报表模板 //部门树查询 //获取报表模板 //部门树查询
export function getTemplateList(data:any) { export function getTemplateList(data:any) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/getTemplateList', // url: '/harmonic-boot/customReport/getTemplateList',
url: '/cs-harmonic-boot/customReport/getTemplateList',
// url:'/api3/harmonic-boot/customReport/getTemplateList', // url:'/api3/harmonic-boot/customReport/getTemplateList',
method: 'post', method: 'post',
data data
@@ -28,7 +30,7 @@ export function getTemplateList(data:any) {
//删除报表模板 //删除报表模板
export function delTemplate(data:any) { export function delTemplate(data:any) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/delTemplate', url: '/cs-harmonic-boot/customReport/delTemplate',
method: 'post', method: 'post',
data data
}) })
@@ -37,7 +39,7 @@ export function delTemplate(data:any) {
//修改获取数据 //修改获取数据
export function getCustomReportTemplateById(params) { export function getCustomReportTemplateById(params) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/getCustomReportTemplateById', url: '/cs-harmonic-boot/customReport/getCustomReportTemplateById',
method: 'get', method: 'get',
params params
}) })
@@ -46,7 +48,7 @@ export function getCustomReportTemplateById(params) {
//修改获取数据 //修改获取数据
export function viewCustomReportTemplateById(params) { export function viewCustomReportTemplateById(params) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/viewCustomReportTemplateById', url: '/cs-harmonic-boot/customReport/viewCustomReportTemplateById',
method: 'get', method: 'get',
params params
}) })
@@ -54,16 +56,17 @@ export function viewCustomReportTemplateById(params) {
//修改模板 //修改模板
export function dateTemplateup(data) { export function dateTemplateup(data) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/updateTemplate', url: '/cs-harmonic-boot/customReport/updateTemplate',
method: 'POST', method: 'POST',
data data
}) })
} }
//新增报表模板 //新增报表模板
export function addTemplate(data) { export function addTemplate(data:any) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/addTemplate', // url: '/harmonic-boot/customReport/addTemplate',
url: '/cs-harmonic-boot/customReport/addTemplate',
method: 'post', method: 'post',
data: data data: data
}) })
@@ -71,7 +74,7 @@ export function addTemplate(data) {
//模板对应指标替换 //模板对应指标替换
export function getCustomReport(data: any) { export function getCustomReport(data: any) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/getCustomReport', url: '/cs-harmonic-boot/customReport/getCustomReport',
method: 'POST', method: 'POST',
data data
}) })
@@ -79,7 +82,7 @@ export function getCustomReport(data: any) {
//绑定模板 //绑定模板
export function updateBindTemplate(data) { export function updateBindTemplate(data) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/updateBindTemplate', url: '/cs-harmonic-boot/customReport/updateBindTemplate',
method: 'post', method: 'post',
data data
}) })
@@ -87,7 +90,7 @@ export function updateBindTemplate(data) {
//根据模板ID查询数据 //根据模板ID查询数据
export function getDataByTempId(params) { export function getDataByTempId(params) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/getDataByTempId', url: '/cs-harmonic-boot/customReport/getDataByTempId',
method: 'get', method: 'get',
params params
}) })
@@ -95,7 +98,7 @@ export function getDataByTempId(params) {
//根据部门查询模板 //根据部门查询模板
export function getTemplateByDept(params) { export function getTemplateByDept(params) {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/getTemplateByDept', url: '/cs-harmonic-boot/customReport/getTemplateByDept',
method: 'get', method: 'get',
params params
}) })
@@ -144,7 +147,7 @@ export function updateFile(data) {
//合格率报告 //合格率报告
export function pageTable(data) { export function pageTable(data) {
return createAxios({ return createAxios({
url: '/harmonic-boot/qualifiedReport/pageTable', url: '/cs-harmonic-boot/qualifiedReport/pageTable',
method: 'post', method: 'post',
data data
}) })
@@ -152,14 +155,16 @@ export function pageTable(data) {
//合格率报告 //合格率报告
export function targetLimitChooseTree() { export function targetLimitChooseTree() {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/targetLimitChooseTree', // url: '/harmonic-boot/customReport/targetLimitChooseTree',
url: '/cs-harmonic-boot/customReport/targetLimitChooseTree',
method: 'get' method: 'get'
}) })
} }
//监测点指标 //监测点指标
export function terminalChooseTree() { export function terminalChooseTree() {
return createAxios({ return createAxios({
url: '/harmonic-boot/customReport/terminalChooseTree', // url: '/harmonic-boot/customReport/terminalChooseTree',
url: '/cs-harmonic-boot/customReport/terminalChooseTree',
method: 'get' method: 'get'
}) })
} }

View File

@@ -1,118 +1,126 @@
import request from '@/utils/request' import request from '@/utils/request'
// 新增字典数据 // 新增字典数据
export const addCsDictData = (data: any) => { export const addCsDictData = (data: any) => {
return request({ return request({
url: '/system-boot/csDictData/add', url: '/system-boot/csDictData/add',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 查询字典数据 // 查询字典数据
export const queryCsDictDataPage = (data: any) => { export const queryCsDictDataPage = (data: any) => {
return request({ return request({
url: '/system-boot/csDictData/list', url: '/system-boot/csDictData/list',
method: 'post', method: 'post',
data: Object.assign( data: Object.assign(
{ {
orderBy: '', orderBy: '',
pageNum: 0, pageNum: 0,
pageSize: 0, pageSize: 0,
searchBeginTime: '', searchBeginTime: '',
searchEndTime: '', searchEndTime: '',
searchState: 0, searchState: 0,
searchValue: '', searchValue: '',
dataType: '', dataType: '',
sortBy: '' sortBy: ''
}, },
data data
) )
}) })
} }
//删除字典数据 //删除字典数据
export const delCsDictData = (id: string) => { export const delCsDictData = (id: string) => {
let form = new FormData() let form = new FormData()
form.append('id', id) form.append('id', id)
return request({ return request({
url: '/system-boot/csDictData/delete', url: '/system-boot/csDictData/delete',
method: 'post', method: 'post',
data: form, data: form,
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/x-www-form-urlencoded'
} }
}) })
} }
// 修改字典数据 // 修改字典数据
export const updateCsDictData = (data: any) => { export const updateCsDictData = (data: any) => {
return request({ return request({
url: '/system-boot/csDictData/update', url: '/system-boot/csDictData/update',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 执行算法 // 执行算法
export const timerRun = (params: any) => { export const timerRun = (params: any) => {
return request({ return request({
url: '/system-boot/timer/run', url: '/system-boot/timer/run',
method: 'GET', method: 'GET',
params params
}) })
} }
// 任务表达式 // 任务表达式
export const getActionClasses = () => { export const getActionClasses = () => {
return request({ return request({
url: '/system-boot/timer/getActionClasses', url: '/system-boot/timer/getActionClasses',
method: 'GET' method: 'GET'
}) })
} }
// 新增任务 // 新增任务
export const addTimer = (data: any) => { export const addTimer = (data: any) => {
return request({ return request({
url: '/system-boot/timer/add', url: '/system-boot/timer/add',
method: 'POST', method: 'POST',
data data
}) })
} }
// 修改任务 // 修改任务
export const updateTimer = (data: any) => { export const updateTimer = (data: any) => {
return request({ return request({
url: '/system-boot/timer/update', url: '/system-boot/timer/update',
method: 'POST', method: 'POST',
data data
}) })
} }
// 补招配置 // 补招配置
export const runTimer = (data: any) => { export const runTimer = (data: any) => {
return request({ return request({
url: '/system-boot/timer/run', url: '/system-boot/timer/run',
method: 'GET', method: 'GET',
params: data params: data
}) })
} }
// 删除任务 // 删除任务
export const deleteTimer = (data: any) => { export const deleteTimer = (data: any) => {
return request({ return request({
url: '/system-boot/timer/delete', url: '/system-boot/timer/delete',
method: 'POST', method: 'POST',
data: data data: data
}) })
} }
// 关闭任务 // 关闭任务
export const stop = (params: any) => { export const stop = (params: any) => {
return request({ return request({
url: '/system-boot/timer/stop', url: '/system-boot/timer/stop',
method: 'get', method: 'get',
params params
}) })
} }
// 启动任务 // 启动任务
export const start = (params: any) => { export const start = (params: any) => {
return request({ return request({
url: '/system-boot/timer/start', url: '/system-boot/timer/start',
method: 'get', method: 'get',
params params
}) })
}
// 查询监测对象类型
export const getDicDataByTypeCode = (params: any) => {
return request({
url: '/system-boot/dictData/getDicDataByTypeCode',
method: 'get',
params
})
} }

View File

@@ -54,6 +54,14 @@ export const activatePage = (params: any) => {
params params
}) })
} }
// 全局的驾驶舱页面
export const scopePage = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/scopePage',
method: 'post',
params
})
}
// 查询激活的驾驶舱页面 // 查询激活的驾驶舱页面
export const queryActivatePage = () => { export const queryActivatePage = () => {
return createAxios({ return createAxios({

View File

@@ -88,8 +88,9 @@ export const updateStatistical = (data: any) => {
// 单位绑定 // 单位绑定
export function codeDicTree(data: any) { export function codeDicTree(data: any) {
return createAxios({ return createAxios({
url: '/system-boot/dictTree/codeDicTree', // url: '/system-boot/dictTree/codeDicTree',
method: 'get', url: '/system-boot/dictTree/queryByCodeList',
method: 'post',
params: data params: data
}) })
} }

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<!--F47曲线 --> <!--F47曲线 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
<el-descriptions class="mt2" direction="vertical" :column="4" border> <el-descriptions class="mt2" direction="vertical" :column="4" border>
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item> <el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item> <el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
@@ -9,6 +9,7 @@
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item> <el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
<my-echart <my-echart
v-loading="tableStore.table.loading"
ref="chartRef" ref="chartRef"
class="tall" class="tall"
:options="echartList" :options="echartList"
@@ -18,10 +19,9 @@
}" }"
@chart-click="handleChartClick" @chart-click="handleChartClick"
/> />
<el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%"> <el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
<waveFormAnalysis <waveFormAnalysis
v-loading="loading" v-loading="loading"
v-if="isWaveCharts"
ref="waveFormAnalysisRef" ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false" @handleHideCharts="isWaveCharts = false"
:wp="wp" :wp="wp"
@@ -33,28 +33,27 @@
import { ref, onMounted, provide, reactive, watch, h } from 'vue' import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue' import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { analyseWave } from '@/api/common' import { analyseWave } from '@/api/common'
import { ElMessage } from 'element-plus'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number]}, w: { type: [String, Number] },
h: { type: [String, Number]}, h: { type: [String, Number] },
width: { type: [String, Number]}, width: { type: [String, Number] },
height: { type: [String, Number]}, height: { type: [String, Number] },
timeKey: { type: [String, Number]}, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const TableHeaderRef = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const route = useRoute() const dialogTitle = ref('波形分析')
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -77,7 +76,7 @@ const fullscreen = computed(() => {
} }
}) })
const echartList = ref({}) const echartList = ref()
const chartRef = ref() const chartRef = ref()
// 波形 // 波形
@@ -104,16 +103,14 @@ const tableStore: any = new TableStore({
showPage: false, showPage: false,
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
const gongData = gongfunction(tableStore.table.data) const gongData = gongfunction(tableStore.table.data)
data.gs = tableStore.table.data.length data.gs = tableStore.table.data.length
data.krr = gongData.pointI.length data.krr = gongData.pointI.length
data.bkrr = gongData.pointIun.length data.bkrr = gongData.pointIun.length
// console.log(gongData,'789000')
echartList.value = { echartList.value = {
title: { title: {
text: `F47曲线` text: `F47曲线`
@@ -229,7 +226,7 @@ const tableStore: any = new TableStore({
{ {
name: '不可容忍事件', name: '不可容忍事件',
type: 'scatter', type: 'scatter',
symbol: 'rect', symbol: 'circle',
symbolSize: 8, symbolSize: 8,
data: gongData.pointFun, data: gongData.pointFun,
legendSymbol: 'rect' legendSymbol: 'rect'
@@ -244,6 +241,25 @@ const tableRef = ref()
provide('tableRef', tableRef) provide('tableRef', tableRef)
provide('tableStore', tableStore) provide('tableStore', tableStore)
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
function gongfunction(arr: any) { function gongfunction(arr: any) {
let standI = 0 let standI = 0
let unstandI = 0 let unstandI = 0
@@ -263,8 +279,9 @@ function gongfunction(arr: any) {
let yy = arr[i].eventValue let yy = arr[i].eventValue
let time = arr[i].time let time = arr[i].time
let eventId = arr[i].eventId let eventId = arr[i].eventId
let lineName = arr[i].lineName
// let index =arr[i].eventDetailIndex; // let index =arr[i].eventDetailIndex;
point = [xx, yy, time, eventId] point = [xx, yy, time, eventId, lineName]
if (xx <= 0.003) { if (xx <= 0.003) {
let line = 0 let line = 0
@@ -413,38 +430,51 @@ onMounted(() => {
const handleChartClick = (params: any) => { const handleChartClick = (params: any) => {
if (params.seriesName === '可容忍事件') { if (params.seriesName === '可容忍事件') {
// 处理可容忍事件点击 // 处理可容忍事件点击
ElMessage.info(`点击了可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`) dialogTitle.value = '可容忍事件波形分析'
handleTolerableEventClick(params) handleTolerableEventClick(params)
} else if (params.seriesName === '不可容忍事件') { } else if (params.seriesName === '不可容忍事件') {
dialogTitle.value = '不可容忍事件波形分析'
// 处理不可容忍事件点击 // 处理不可容忍事件点击
ElMessage.info(`点击了不可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`) // ElMessage.info(`点击了不可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
handleIntolerableEventClick(params) handleTolerableEventClick(params)
} }
} }
// 可容忍事件点击处理函数 // 可容忍事件点击处理函数
const handleTolerableEventClick = async (row: any) => { const handleTolerableEventClick = async (row: any) => {
console.log('可容忍事件详情:', row)
isWaveCharts.value = true
loading.value = true loading.value = true
isWaveCharts.value = true nextTick(() => {
await analyseWave(row.id) if (waveFormAnalysisRef.value) {
//waveFormAnalysisRef.value.setHeight(false, 360)
// waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
}
})
const messageInstance = ElMessage.info(`正在加载,请稍等...`)
await analyseWave(row.value[3]) //eventId
.then(res => { .then(res => {
row.loading1 = false row.loading1 = false
if (res != undefined) { if (res != undefined) {
boxoList.value = row boxoList.value = {
boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null persistTime: row.value[0], //持续时间
boxoList.value.systemType = 'WX' featureAmplitude: (row.value[1] / 100).toFixed(2), //残余电压
startTime: row.value[2], //时间
lineName: row.value[4] //监测点名称
}
boxoList.value.systemType = 'YPT'
wp.value = res.data wp.value = res.data
} }
isWaveCharts.value = true
loading.value = false loading.value = false
}) })
.catch(() => { .catch(() => {
messageInstance.close()
row.loading1 = false row.loading1 = false
loading.value = false loading.value = false
}) })
nextTick(() => { nextTick(() => {
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true) waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
}) })
} }

View File

@@ -0,0 +1,308 @@
<template>
<div>
<!--暂态越限时间分布 -->
<TableHeader
ref="TableHeaderRef"
:timeKeyList="prop.timeKey"
:showReset="false"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<my-echart
class="tall"
:options="echartList1"
:style="{
width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}"
/>
<!-- <my-echart
class="mt10"
:options="echartList1"
:style="{
width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
}"
/> -->
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: Array as () => string[] },
timeValue: { type: Object },
interval: { type: Number }
})
const TableHeaderRef = ref()
const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
if (datePickerValue && datePickerValue.timeValue) {
// 更新时间参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
}
}
// 计算是否全屏展示
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 config = useConfig()
const echartList = ref({})
const echartList1 = ref({})
const processDataForChart = (rawData: any[]) => {
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
const chartData = rawData.map(item => [item.x, item.y, item.z])
return chartData
}
const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/csevent/getEventCoords',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
setTime()
},
loadCallback: () => {
const processedData = processDataForChart(tableStore.table.data.innerList || [])
const trendList = tableStore.table.data.trendList || []
const xlist = tableStore.table.data.xlist || []
// 处理趋势图数据
const seriesData = trendList.map((item: any) => {
// 根据接口返回的name字段确定系列名称和颜色
let name = ''
let color = ''
switch (item.name) {
case 'Evt_Sys_DipStr':
name = '电压暂降'
color = '#FFBF00'
break
case 'Evt_Sys_IntrStr':
name = '电压中断'
color = '#FF9100'
break
case 'Evt_Sys_SwlStr':
name = '电压暂升'
color = config.layout.elementUiPrimary[0]
break
default:
name = item.name
color = '#000000'
}
return {
name: name,
type: 'line',
showSymbol: false,
color: color,
data: item.trendList?.map((value: number, index: number) => [xlist[index], value]) || []
}
})
// 获取x轴和y轴的标签值
const xLabels = [
'0-10%',
'10%-20%',
'20%-30%',
'30%-40%',
'40%-50%',
'50%-60%',
'60%-70%',
'70%-80%',
'80%-90%',
'90%-100%'
]
const yLabels = ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s']
echartList.value = {
options: {
xAxis: null,
yAxis: null,
dataZoom: null,
backgroundColor: '#fff',
tooltip: {
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter: function (params: any) {
var tips = ''
tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
tips += '事件次数: ' + params.value[2] + '</br>'
return tips
}
},
title: {
text: '暂态事件概率分布',
x: 'center'
},
visualMap: {
max: 500,
show: false,
inRange: {
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
}
},
xAxis3D: {
type: 'category',
name: '特征幅值',
data: xLabels,
nameGap: 40
},
yAxis3D: {
type: 'category',
name: '持续时间',
data: yLabels,
nameGap: 40,
splitLine: {
lineStyle: {
type: 'dashed',
opacity: 0.5
}
}
},
zAxis3D: {
type: 'value',
minInterval: 10,
name: '暂态事件次数',
nameGap: 30
},
grid3D: {
viewControl: {
projection: 'perspective',
distance: 260
},
boxWidth: 200,
boxDepth: 80,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: 'bar3D',
data: processedData,
shading: 'realistic',
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
}
}
]
}
}
echartList1.value = {
title: {
text: '暂态越限时间概率分布'
},
xAxis: {
type: 'category',
data: xlist,
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
name: '次'
},
grid: {
left: '10px',
right: '20px'
},
series: seriesData
}
}
})
const tableRef = ref()
provide('tableRef', tableRef)
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch(
() => prop.timeKey,
val => {
tableStore.index()
}
)
watch(
() => prop.timeValue,
(newVal, oldVal) => {
tableStore.index()
},
{
deep: true
}
)
</script>
<style lang="scss" scoped></style>

View File

@@ -1,35 +1,42 @@
<template> <template>
<div> <div>
<!--暂降方向统计 --> <!--暂降方向统计 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
<my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: `calc(${prop.height} )` }" /> ref="TableHeaderRef"
:showReset="false"
@selectChange="selectChange"
datePicker
:timeKeyList="prop.timeKey"
v-if="fullscreen"
></TableHeader>
<my-echart
v-loading="tableStore.table.loading"
class="tall"
:options="echartList"
:style="{ width: prop.width, height: `calc(${prop.height} )` }"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue' import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router' import { getTime } from '@/utils/formatTime'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const route = useRoute() const TableHeaderRef = ref()
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -53,85 +60,99 @@ const fullscreen = computed(() => {
} }
}) })
const data = [ const echartList = ref({})
{
name: '来自电网',
value: 4
},
{
name: '来自负荷',
value: 41
}
]
const echartList = ref({
title: {},
tooltip: { // const data = [
trigger: 'item' // {
}, // name: '来自电网',
legend: { // value: 4
orient: 'vertical', // },
top: 'center', // {
right: '5%', // name: '来自负荷',
formatter: function (e: any) { // value: 41
return e + ' ' + data.filter(item => item.name == e)[0].value + '次' // }
} // ]
},
xAxis: {
show: false
},
yAxis: {
show: false
},
grid: {
left: '10px',
right: '20px'
},
options: {
dataZoom: null,
title: [
{
text: '暂降方向统计',
left: 'center'
},
{
text: data[0].value + data[1].value + '次',
left: 'center',
top: 'center'
}
],
series: [
{
type: 'pie',
center: 'center',
radius: ['55%', '75%'],
label: {
show: false,
position: 'outside',
textStyle: {
//数值样式
}
},
name: '事件统计',
data: data
}
]
}
})
const OverLimitDetailsRef = ref() const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/user-boot/dept/deptTree', url: '/cs-harmonic-boot/csevent/getEventDirectionData',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => {} loadCallback: () => {
if (!tableStore.table.data || !Array.isArray(tableStore.table.data)) {
return []
}
const chartData = ref(
tableStore.table.data.map((item: any) => ({
name: item.source === 'load' ? '来自负荷' : '来自电网',
value: item.times
}))
)
const total = chartData.value.reduce((sum: any, item: any) => sum + item.value, 0)
echartList.value = {
title: {},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: '50',
right: '10',
formatter: function (name: string) {
const item = chartData.value.find((i: any) => i.name === name)
return item ? `${name} ${item.value}` : name
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
grid: {
left: '10px',
right: '20px'
},
options: {
dataZoom: null,
title: [
{
text: '暂降方向统计',
left: 'center'
},
{
text: total + '次',
left: 'center',
top: 'center'
}
],
series: [
{
type: 'pie',
center: 'center',
radius: ['55%', '75%'],
label: {
show: false,
position: 'outside',
textStyle: {
//数值样式
}
},
name: '事件统计',
data: chartData.value
}
]
}
}
}
}) })
const tableRef = ref() const tableRef = ref()
@@ -139,10 +160,28 @@ provide('tableRef', tableRef)
provide('tableStore', tableStore) provide('tableStore', tableStore)
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
// 点击行 // 点击行
const cellClickEvent = ({ row, column }: any) => { const cellClickEvent = ({ row, column }: any) => {
if (column.field != 'name') { if (column.field != 'name') {
console.log(row)
OverLimitDetailsRef.value.open(row) OverLimitDetailsRef.value.open(row)
} }
} }
@@ -159,12 +198,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -17,7 +17,7 @@ import { yMethod } from '@/utils/echartMethod'
const prop = defineProps({ const prop = defineProps({
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object }
}) })

View File

@@ -1,7 +1,14 @@
<template> <template>
<div> <div>
<!--指标越限程度 --> <!--指标越限程度 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
ref="TableHeaderRef"
:showReset="false"
@selectChange="selectChange"
datePicker
:timeKeyList="prop.timeKey"
v-if="fullscreen"
></TableHeader>
<my-echart <my-echart
class="tall" class="tall"
:options="echartList" :options="echartList"
@@ -25,18 +32,20 @@ import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime' import { getTimeOfTheMonth } from '@/utils/formatTime'
import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue' import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue'
import { useRoute } from 'vue-router' import { getTime } from '@/utils/formatTime'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const TableHeaderRef = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const dialogTrendChart = ref(false) const dialogTrendChart = ref(false)
@@ -66,7 +75,7 @@ const echartList = ref()
const dailyTrendChartRef = ref() const dailyTrendChartRef = ref()
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/limitRateDetailD/limitExtentData', url: '/cs-harmonic-boot/limitRateDetailD/limitExtentData',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
@@ -89,7 +98,7 @@ const tableStore: any = new TableStore({
{ {
title: '越限最大值', title: '越限最大值',
field: 'maxValue', field: 'maxValue',
minWidth: '60', minWidth: '70',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
const extentValue = const extentValue =
@@ -107,7 +116,7 @@ const tableStore: any = new TableStore({
{ {
title: '越限程度(%)', title: '越限程度(%)',
field: 'extent', field: 'extent',
minWidth: '60', minWidth: '70',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
// 保留两个小数 // 保留两个小数
@@ -146,8 +155,7 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
// 定义 x 轴标签顺序 // 定义 x 轴标签顺序
@@ -207,6 +215,25 @@ const cellClickEvent = ({ row, column }: any) => {
} }
} }
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
@@ -219,12 +246,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

File diff suppressed because one or more lines are too long

View File

@@ -1,38 +1,25 @@
<template> <template>
<div> <div>
<!--治理效果报表 --> <!--治理效果报表 -->
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen"> <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select> <template v-slot:select>
<el-form-item label="报表模板"> <el-form-item label="报表模板">
<el-select <el-select filterable v-model="tableStore.table.params.tempId" placeholder="请选择报表模板" clearable>
v-model="tableStore.table.params.tempId"
placeholder="请选择报表模板"
clearable
>
<el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="监测对象"> <el-form-item label="监测对象">
<el-select <el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象" clearable>
v-model="tableStore.table.params.sensitiveUserId" <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
placeholder="请选择监测对象"
clearable
>
<el-option
v-for="item in idList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button> <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
</template> </template>
</TableHeader> </TableHeader>
<div style="display: flex;"> <div style="display: flex">
<div <div
id="luckysheet" id="luckysheet"
:style="{ :style="{
width: `calc(${prop.width} )`, width: `calc(${prop.width} )`,
@@ -43,44 +30,25 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h, computed } from 'vue' import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { exportExcel } from '@/views/govern/reportForms/export.js' import { exportExcel } from '@/views/govern/reportForms/export.js'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useConfig } from '@/stores/config'
import Json from './index.json'
import JsonAfter from './index.json'
import { getTemplateList } from '@/api/harmonic-boot/luckyexcel' import { getTemplateList } from '@/api/harmonic-boot/luckyexcel'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit' import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const tableStore: any = new TableStore({ const TableHeaderRef = ref()
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
showPage: false,
exportName: '主要监测点列表',
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
},
loadCallback: () => {}
})
const tableRef = ref()
provide('tableRef', tableRef)
tableStore.table.params.power = '1'
provide('tableStore', tableStore)
// 报表模板列表 // 报表模板列表
const templateList = ref() const templateList = ref()
@@ -93,19 +61,24 @@ const initListByIds = () => {
getListByIds({}).then((res: any) => { getListByIds({}).then((res: any) => {
if (res.data.length > 0) { if (res.data.length > 0) {
idList.value = res.data idList.value = res.data
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) { if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
tableStore.table.params.sensitiveUserId = idList.value[0].id tableStore.table.params.sensitiveUserId = idList.value[0].id
} }
templateListData()
} }
}) })
} }
const templateListData = () => { const templateListData = () => {
getTemplateList({}).then(res => { getTemplateList({}).then(res => {
templateList.value = res.data templateList.value = res.data.filter(item => item.name === '稳态治理报表')
if (!tableStore.table.params.tempId && templateList.value?.length > 0) { if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
tableStore.table.params.tempId = res.data[0].id tableStore.table.params.tempId = templateList.value[0].id
} }
nextTick(() => {
tableStore.index()
})
}) })
} }
// 下载表格 // 下载表格
@@ -115,19 +88,6 @@ const downloadExcel = () => {
onMounted(() => { onMounted(() => {
initListByIds() initListByIds()
templateListData()
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
allowEdit: false, // 禁止所有编辑操作(必填)
data: Json
})
tableStore.index()
}) })
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
@@ -149,6 +109,62 @@ const fullscreen = computed(() => {
return false return false
} }
}) })
const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
method: 'POST',
showPage: false,
exportName: '治理效果报表',
column: [],
beforeSearchFun: () => {
setTime()
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
tableStore.table.params.sensitiveUserId = idList.value[0].id
}
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
tableStore.table.params.tempId = templateList.value[0].id
}
},
loadCallback: () => {
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
allowEdit: false, // 禁止所有编辑操作(必填)
data: tableStore.table.data
})
}
})
const tableRef = ref()
provide('tableRef', tableRef)
provide('tableStore', tableStore)
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
tableStore.table.params.startTime = time[0]
tableStore.table.params.endTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
@@ -158,12 +174,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -1,238 +0,0 @@
<template>
<div>
<!--治理效果报表 -->
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="监测对象">
<el-select
v-model="tableStore.table.params.power"
placeholder="请选择监测对象"
clearable
style="width: 130px"
>
<el-option
v-for="item in powerList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
</template>
</TableHeader>
<!-- 左右布局展示治理前后报表 -->
<div class="report-container">
<!-- 治理前报表 -->
<div class="report-panel before">
<div class="panel-header">治理前报表</div>
<div
id="luckysheet-before"
:style="{
width: '100%',
height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
}"
></div>
</div>
<!-- 治理后报表 -->
<div class="report-panel after">
<div class="panel-header">治理后报表</div>
<div
id="luckysheet-after"
:style="{
width: '100%',
height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
}"
></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, watch, computed } from 'vue'
import TableStore from '@/utils/tableStore'
import { exportExcel } from '@/views/govern/reportForms/export.js'
import TableHeader from '@/components/table/header/index.vue'
import Json from './index.json'
import JsonAfter from './index1.json'
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 powerList: any = ref([
{
label: '1#变压器',
value: '1'
},
{
label: '2#变压器',
value: '2'
}
])
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
showPage: false,
exportName: '治理效果报表',
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
},
loadCallback: () => {}
})
const tableRef = ref()
provide('tableRef', tableRef)
tableStore.table.params.power = '1'
provide('tableStore', tableStore)
// 下载表格
const downloadExcel = () => {
// 可以选择导出治理前、治理后或两个报表
const beforeSheets = luckysheetBefore.getAllSheets()
const afterSheets = luckysheetAfter.getAllSheets()
exportExcel([...beforeSheets, ...afterSheets], '治理效果对比报表')
}
// 治理前和治理后的Luckysheet实例
let luckysheetBefore: any
let luckysheetAfter: any
onMounted(() => {
// 创建治理前报表
luckysheetBefore = luckysheet.create({
container: 'luckysheet-before',
title: '治理前',
lang: 'zh',
showtoolbar: false,
showinfobar: false,
showsheetbar: true,
allowEdit: false,
data: Json
})
// 创建治理后报表
luckysheetAfter = luckysheet.create({
container: 'luckysheet-after',
title: '治理后',
lang: 'zh',
showtoolbar: false,
showinfobar: false,
showsheetbar: true,
allowEdit: false,
data: JsonAfter // 使用治理后的数据
})
tableStore.index()
})
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
if (datePickerValue && datePickerValue.timeValue) {
// 更新时间参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
// 可以在这里更新报表数据
updateReportData()
}
}
// 更新报表数据的方法
const updateReportData = () => {
// 这里可以根据时间参数更新治理前后的报表数据
// 示例:重新加载数据或更新现有数据
console.log('更新报表数据:', {
beginTime: tableStore.table.params.searchBeginTime,
endTime: tableStore.table.params.searchEndTime
})
}
// 计算是否全屏展示
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
}
})
watch(
() => prop.timeKey,
val => {
tableStore.index()
updateReportData()
}
)
watch(
() => prop.timeValue,
(newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
updateReportData()
}
},
{
deep: true
}
)
</script>
<style lang="scss" scoped>
.report-container {
display: flex;
height: calc(100% - 57px);
.report-panel {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid var(--el-border-color);
&.before {
margin-right: 5px;
}
&.after {
margin-left: 5px;
}
.panel-header {
padding: 10px 15px;
background-color: var(--el-color-primary-light-9);
font-weight: bold;
border-bottom: 1px solid var(--el-border-color);
text-align: center;
}
// 确保Luckysheet容器占满剩余空间
:deep(#luckysheet-before),
:deep(#luckysheet-after) {
flex: 1;
}
}
}
:deep(.el-select) {
min-width: 80px;
}
</style>

View File

@@ -16,6 +16,7 @@
v-model="searchForm.index" v-model="searchForm.index"
placeholder="请选择统计指标" placeholder="请选择统计指标"
@change="onIndexChange($event)" @change="onIndexChange($event)"
filterable
> >
<el-option <el-option
v-for="item in indexOptions" v-for="item in indexOptions"
@@ -36,6 +37,7 @@
style="min-width: 120px !important" style="min-width: 120px !important"
placeholder="请选择" placeholder="请选择"
v-model="searchForm.valueType" v-model="searchForm.valueType"
filterable
> >
<el-option value="max" label="最大值"></el-option> <el-option value="max" label="最大值"></el-option>
<el-option value="min" label="最小值"></el-option> <el-option value="min" label="最小值"></el-option>
@@ -59,6 +61,7 @@
placeholder="请选择谐波次数" placeholder="请选择谐波次数"
style="width: 100px" style="width: 100px"
class="mr20" class="mr20"
filterable
> >
<el-option <el-option
v-for="vv in item.countOptions" v-for="vv in item.countOptions"

View File

@@ -9,6 +9,7 @@
v-model="tableStore.table.params.lineId" v-model="tableStore.table.params.lineId"
placeholder="请选择监测点" placeholder="请选择监测点"
style="width: 150px" style="width: 150px"
filterable
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
@@ -48,7 +49,7 @@ const loop50 = (key: string) => {
list.push({ list.push({
title: i + '次', title: i + '次',
field: key + i + 'Overtime', field: key + i + 'Overtime',
width: '80', width: '60',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>`
@@ -58,7 +59,7 @@ const loop50 = (key: string) => {
return list return list
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/totalLimitStatistics/details', url: '/cs-harmonic-boot/totalLimitStatistics/details',
method: 'POST', method: 'POST',
publicHeight: 30, publicHeight: 30,
showPage: false, showPage: false,
@@ -86,7 +87,7 @@ const tableStore: any = new TableStore({
{ {
title: '闪变越限(%)', title: '闪变越限(%)',
field: 'flickerOvertime', field: 'flickerOvertime',
width: '80', width: '90',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`

View File

@@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<!--电网侧指标越限统计 --> <!--电网侧指标越限统计 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker :timeKeyList="prop.timeKey"
v-if="fullscreen"
></TableHeader>
<my-echart <my-echart
class="tall" class="tall"
:options="echartList" :options="echartList"
@@ -27,23 +33,25 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import OverLimitDetails from '@/components/cockpit/gridSideStatistics/components/overLimitDetails.vue' import OverLimitDetails from '@/components/cockpit/gridSideStatistics/components/overLimitDetails.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { gridSideLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit' import { gridSideLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const echartList = ref({}) const echartList = ref({})
const TableHeaderRef = ref()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -117,7 +125,7 @@ const initEcharts = () => {
const OverLimitDetailsRef = ref() const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/gridSideLimitStatistics/list', url: '/cs-harmonic-boot/gridSideLimitStatistics/list',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
@@ -188,8 +196,7 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)` tableStore.table.height = `calc(${prop.height} - 80px)`
@@ -216,6 +223,25 @@ const cellClickEvent = ({ row, column }: any) => {
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
@@ -226,12 +252,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -0,0 +1,463 @@
<template>
<div>
<!--指标越限时间分布
-->
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
<template v-slot:select>
<el-form-item label="监测点">
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
<el-option
v-for="item in lineList"
:key="item.lineId"
:label="item.name"
:value="item.lineId"
/>
</el-select>
</el-form-item>
</template>
</TableHeader>
<div v-loading="tableStore.table.loading">
<my-echart
class="tall"
:options="echartList1"
:style="{
width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}"
/>
<!-- <my-echart
class="mt10"
:options="echartList1"
:style="{
width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
}"
/> -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: Array as () => string[] },
timeValue: { type: Object },
interval: { type: Number }
})
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
const lineList = ref()
const headerHeight = ref(57)
const TableHeaderRef = ref()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
if (datePickerValue && datePickerValue.timeValue) {
// 更新时间参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
}
}
// 计算是否全屏展示
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 echartList = ref()
const echartList1 = ref()
const probabilityData = ref()
const initLineList = async () => {
cslineList({}).then(res => {
lineList.value = res.data
tableStore.table.params.lineId = lineList.value[0].lineId
tableStore.index()
})
}
// 越限程度概率分布
const initProbabilityData = () => {
// 只有当 lineList 已加载且有数据时才设置默认 lineId
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
tableStore.table.params.lineId = lineList.value[0].lineId
}
const params = {
searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1],
lineId: tableStore.table.params.lineId
}
limitProbabilityData(params).then((res: any) => {
probabilityData.value = res.data
// 处理接口返回的数据,转换为图表所需格式
if (res.data && Array.isArray(res.data)) {
// 定义指标类型顺序
const indicatorOrder = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相电压不平衡度', '频率偏差']
// 按照指定顺序排序数据
const sortedData = [...res.data].sort((a, b) => {
return indicatorOrder.indexOf(a.indexName) - indicatorOrder.indexOf(b.indexName)
})
// 构造 series 数据
const seriesData: any = []
let maxValue: any = 0 // 用于存储数据中的最大值
// 遍历每个越限程度区间0-20%, 20-40%, 40-60%, 60-80%, 80-100%
for (let xIndex = 0; xIndex < 5; xIndex++) {
// 遍历每个指标类型
sortedData.forEach((item, yIndex) => {
// 从 extentGrades 中获取对应区间的值
const extentGrade = item.extentGrades[xIndex]
const value = extentGrade ? (Object.values(extentGrade)[0] as number) : 0
seriesData.push([xIndex, yIndex, value])
// 更新最大值
if (value > maxValue) {
maxValue = value
}
})
}
// 计算 z 轴最大值(最大值加 5
const zAxisMax = Math.ceil(maxValue) + 5
// 构造 yAxis 数据(指标类型名称)
const yAxisData = sortedData.map(item => item.indexName)
echartList.value = {
options: {
backgroundColor: '#fff',
tooltip: {
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter: function (params: any) {
var yIndex = params.value[1] //获取y轴索引
var tips = ''
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
tips += '越限程度: ' + params.seriesName + '</br>'
tips += '越限次数: ' + params.value[2] + '</br>'
return tips
}
},
title: {
text: '指标越限概率分布',
x: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal'
}
},
// 移除或隐藏 visualMap 组件
visualMap: {
show: false, // 设置为 false 隐藏右侧颜色条
min: 0,
// max: 100,
max: zAxisMax, // 使用计算出的最大值加5
inRange: {
color: ['#313695', '#00BB00', '#ff8000', '#d73027', '#a50026']
}
},
// 添加 legend 配置并设置为不显示
legend: {
show: false // 隐藏图例
},
xAxis3D: {
type: 'category',
name: '越限程度',
nameLocation: 'middle',
nameGap: 50,
data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%']
},
yAxis3D: {
type: 'category',
name: '指标类型',
nameLocation: 'middle',
nameGap: 50,
data: yAxisData,
splitLine: {
lineStyle: {
type: 'dashed',
opacity: 0.5
}
}
},
zAxis3D: {
type: 'value',
name: '越限次数',
nameLocation: 'middle',
nameGap: 30,
minInterval: 10
// max: 100
},
grid3D: {
viewControl: {
projection: 'perspective',
distance: 260,
rotateSensitivity: 10,
zoomSensitivity: 2
},
boxWidth: 150,
boxDepth: 100,
boxHeight: 100,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.4
}
}
},
series: [
{
type: 'bar3D',
name: '0-20%',
data: seriesData.filter((item: any) => item[0] === 0),
shading: 'realistic',
label: {
show: false
},
itemStyle: {
opacity: 0.9
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: 14,
color: '#000'
}
},
itemStyle: {
color: '#ff8000'
}
}
},
{
type: 'bar3D',
name: '20-40%',
data: seriesData.filter((item: any) => item[0] === 1),
shading: 'realistic',
label: {
show: false
},
itemStyle: {
opacity: 0.9
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: 14,
color: '#000'
}
},
itemStyle: {
color: '#ff8000'
}
}
},
{
type: 'bar3D',
name: '40-60%',
data: seriesData.filter((item: any) => item[0] === 2),
shading: 'realistic',
label: {
show: false
},
itemStyle: {
opacity: 0.9
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: 14,
color: '#000'
}
},
itemStyle: {
color: '#ff8000'
}
}
},
{
type: 'bar3D',
name: '60-80%',
data: seriesData.filter((item: any) => item[0] === 3),
shading: 'realistic',
label: {
show: false
},
itemStyle: {
opacity: 0.9
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: 14,
color: '#000'
}
},
itemStyle: {
color: '#ff8000'
}
}
},
{
type: 'bar3D',
name: '80-100%',
data: seriesData.filter((item: any) => item[0] === 4),
shading: 'realistic',
label: {
show: false
},
itemStyle: {
opacity: 0.9
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: 14,
color: '#000'
}
},
itemStyle: {
color: '#ff8000'
}
}
}
]
}
}
}
})
}
const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
setTime()
// 只有当 lineList 已加载且有数据时才设置默认 lineId
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
tableStore.table.params.lineId = lineList.value[0].lineId
}
},
loadCallback: () => {
// 处理返回的数据,将其转换为图表所需格式
const indexNames: any = [...new Set(tableStore.table.data.map((item: any) => item.indexName))]
const timePeriods = [...new Set(tableStore.table.data.map((item: any) => item.timePeriod))]
// 构建系列数据
const seriesData = indexNames.map((indexName: string) => {
const dataIndex = tableStore.table.data.filter((item: any) => item.indexName === indexName)
return {
name: indexName,
type: 'line',
symbol: 'none',
data: dataIndex.map((item: any) => [item.timePeriod, item.times])
}
})
echartList1.value = {
title: {
text: '指标越限时间概率分布'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: indexNames
},
xAxis: {
type: 'category',
name: '时间段',
data: timePeriods
},
yAxis: {
type: 'value'
// name: '次数'
},
series: seriesData
}
initProbabilityData()
}
})
provide('tableStore', tableStore)
onMounted(() => {
initLineList()
})
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch(
() => prop.timeKey,
val => {
tableStore.index()
}
)
watch(
() => prop.timeValue,
(newVal, oldVal) => {
tableStore.index()
},
{
deep: true
}
)
const addMenu = () => {}
</script>
<style lang="scss" scoped></style>

View File

@@ -1,7 +1,14 @@
<template> <template>
<div> <div>
<!--指标越限明细 --> <!--指标越限明细 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
:timeKeyList="prop.timeKey"
></TableHeader>
<el-calendar <el-calendar
v-model="value" v-model="value"
:style="{ :style="{
@@ -25,7 +32,7 @@
<template #content> <template #content>
<span v-html="getTextForDate(data.day)"></span> <span v-html="getTextForDate(data.day)"></span>
</template> </template>
<div class="details" v-html="getTextForDate(data.day)"></div> <div class="details" v-html="fullscreen ? getTextForDate(data.day) : '有越限'"></div>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
@@ -37,20 +44,24 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { dayjs } from 'element-plus' import { dayjs } from 'element-plus'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const list = ref() const list = ref()
const TableHeaderRef = ref()
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一 dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
const value = ref(new Date()) const value = ref(new Date())
@@ -82,46 +93,15 @@ const getTextForDate = (date: string) => {
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
// url: '/user-boot/role/selectRoleDetail?id=0', url: '/cs-harmonic-boot/limitRateDetailD/limitCalendarData',
url: '/harmonic-boot/limitRateDetailD/limitCalendarData',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
value.value = tableStore.table.params.searchBeginTime value.value = tableStore.table.params.searchBeginTime
// 将后端返回的数据整合到 list 中
// tableStore.table.data = [
// {
// "time": "2025-11-13",
// "items": [
// "闪变越限",
// "谐波电流越限"
// ],
// "status": 1
// },
// {
// "time": "2025-11-14",
// "items": [
// "频率偏差越限",
// "三相电压不平衡越限",
// "谐波电压越限",
// "谐波电流越限",
// "频率偏差越限",
// "三相电压不平衡越限",
// "谐波电压越限",
// "谐波电流越限",
// "频率偏差越限",
// "三相电压不平衡越限",
// "谐波电压越限",
// "谐波电流越限"
// ],
// "status": 2
// }
// ]
if (tableStore.table.data && tableStore.table.data.length > 0) { if (tableStore.table.data && tableStore.table.data.length > 0) {
list.value = tableStore.table.data.map((item: any) => { list.value = tableStore.table.data.map((item: any) => {
// 将 items 数组转换为带换行的文本 // 将 items 数组转换为带换行的文本
@@ -162,30 +142,39 @@ const setBackground = (value: string) => {
provide('tableStore', tableStore) provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
tableStore.index() nextTick(() => {
})
watch(
() => prop.timeKey,
val => {
tableStore.index() tableStore.index()
})
})
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
} }
) }
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true
} }
) )
const addMenu = () => {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-calendar) { :deep(.el-calendar) {

View File

@@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<!--指标越限概率分布 --> <!--指标越限概率分布 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"> <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
<template v-slot:select> <template v-slot:select>
<el-form-item label="监测点"> <el-form-item label="监测点">
<el-select size="small" v-model="tableStore.table.params.lineId"> <el-select size="small" filterable v-model="tableStore.table.params.lineId">
<el-option <el-option
v-for="item in lineList" v-for="item in lineList"
:key="item.lineId" :key="item.lineId"
@@ -21,17 +21,17 @@
:options="echartList" :options="echartList"
:style="{ :style="{
width: prop.width, width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}" }"
/> />
<my-echart <!-- <my-echart
class="mt10" class="mt10"
:options="echartList1" :options="echartList1"
:style="{ :style="{
width: prop.width, width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
}" }"
/> /> -->
</div> </div>
</div> </div>
</template> </template>
@@ -41,14 +41,16 @@ import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit' import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]')) // const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
@@ -57,6 +59,8 @@ const lineList = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const TableHeaderRef = ref()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -187,43 +191,18 @@ const initProbabilityData = () => {
type: 'category', type: 'category',
name: '越限程度', name: '越限程度',
nameLocation: 'middle', nameLocation: 'middle',
nameGap: 30, nameGap: 50,
data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'], data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%']
axisLine: {
lineStyle: {
color: '#111'
}
},
axisLabel: {
color: '#111',
margin: 15
},
nameTextStyle: {
color: '#111'
}
}, },
yAxis3D: { yAxis3D: {
type: 'category', type: 'category',
name: '指标类型', name: '指标类型',
nameLocation: 'middle', nameLocation: 'middle',
nameGap: 30, nameGap: 50,
data: yAxisData, data: yAxisData,
nameTextStyle: {
color: '#111'
},
axisLine: {
show: true,
lineStyle: {
color: '#111'
}
},
axisLabel: {
color: '#111',
margin: 15
},
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: ['#111'],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -234,25 +213,14 @@ const initProbabilityData = () => {
name: '越限次数', name: '越限次数',
nameLocation: 'middle', nameLocation: 'middle',
nameGap: 30, nameGap: 30,
nameTextStyle: { minInterval: 10
color: '#111'
},
axisLine: {
lineStyle: {
color: '#111'
}
},
axisLabel: {
color: '#111'
},
min: 0,
max: zAxisMax // 使用计算出的最大值加5
// max: 100 // max: 100
}, },
grid3D: { grid3D: {
viewControl: { viewControl: {
projection: 'perspective', projection: 'perspective',
distance: 250, distance: 260,
rotateSensitivity: 10, rotateSensitivity: 10,
zoomSensitivity: 2 zoomSensitivity: 2
}, },
@@ -397,13 +365,12 @@ const initProbabilityData = () => {
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData', url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
// 只有当 lineList 已加载且有数据时才设置默认 lineId // 只有当 lineList 已加载且有数据时才设置默认 lineId
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) { if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
tableStore.table.params.lineId = lineList.value[0].lineId tableStore.table.params.lineId = lineList.value[0].lineId
@@ -420,13 +387,14 @@ const tableStore: any = new TableStore({
return { return {
name: indexName, name: indexName,
type: 'line', type: 'line',
symbol: 'none',
data: dataIndex.map((item: any) => [item.timePeriod, item.times]) data: dataIndex.map((item: any) => [item.timePeriod, item.times])
} }
}) })
echartList1.value = { echartList1.value = {
title: { title: {
text: '越限时间概率分布' text: '指标越限时间概率分布'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
@@ -454,6 +422,25 @@ provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
initLineList() initLineList()
}) })
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
@@ -463,12 +450,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -16,6 +16,7 @@
v-model="searchForm.index" v-model="searchForm.index"
placeholder="请选择统计指标" placeholder="请选择统计指标"
@change="onIndexChange($event)" @change="onIndexChange($event)"
filterable
> >
<el-option <el-option
v-for="item in indexOptions" v-for="item in indexOptions"
@@ -36,6 +37,7 @@
style="min-width: 120px !important" style="min-width: 120px !important"
placeholder="请选择" placeholder="请选择"
v-model="searchForm.valueType" v-model="searchForm.valueType"
filterable
> >
<el-option value="max" label="最大值"></el-option> <el-option value="max" label="最大值"></el-option>
<el-option value="min" label="最小值"></el-option> <el-option value="min" label="最小值"></el-option>
@@ -59,6 +61,7 @@
placeholder="请选择谐波次数" placeholder="请选择谐波次数"
style="width: 100px" style="width: 100px"
class="mr20" class="mr20"
filterable
> >
<el-option <el-option
v-for="vv in item.countOptions" v-for="vv in item.countOptions"

View File

@@ -9,6 +9,7 @@
v-model="tableStore.table.params.lineId" v-model="tableStore.table.params.lineId"
placeholder="请选择监测点" placeholder="请选择监测点"
style="width: 150px" style="width: 150px"
filterable
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
@@ -53,7 +54,7 @@ const loop50 = (key: string) => {
list.push({ list.push({
title: i + '次', title: i + '次',
field: key + i + 'Overtime', field: key + i + 'Overtime',
width: '80', width: '60',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>`
@@ -63,7 +64,7 @@ const loop50 = (key: string) => {
return list return list
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/mainLine/statLimitRateDetails', url: '/cs-harmonic-boot/mainLine/statLimitRateDetails',
method: 'POST', method: 'POST',
publicHeight: 30, publicHeight: 30,
showPage: false, showPage: false,
@@ -91,7 +92,7 @@ const tableStore: any = new TableStore({
{ {
title: '闪变越限(分钟)', title: '闪变越限(分钟)',
field: 'flickerOvertime', field: 'flickerOvertime',
width: '80', width: '90',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`

View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<!--主要监测点列表 --> <!--主要监测点列表 -->
<TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen" datePicker ref="tableHeaderRef"> <TableHeader :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange" v-if="fullscreen" datePicker ref="TableHeaderRef">
<template v-slot:select> <template v-slot:select>
<el-form-item label="关键词"> <el-form-item label="关键词">
<el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输关键字" /> <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输关键字" />
@@ -22,19 +22,19 @@ import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime' import { getTime } from '@/utils/formatTime'
import OverLimitDetails from '@/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue' import OverLimitDetails from '@/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache' import { useTimeCacheStore } from '@/stores/timeCache'
import { log } from 'console'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const OverLimitDetailsRef = ref() const OverLimitDetailsRef = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
@@ -42,7 +42,7 @@ const headerHeight = ref(57)
const route = useRoute() const route = useRoute()
const timeCacheStore = useTimeCacheStore() const timeCacheStore = useTimeCacheStore()
const tableHeaderRef = ref() const TableHeaderRef = ref()
// 计算是否全屏展示 // 计算是否全屏展示
const fullscreen = computed(() => { const fullscreen = computed(() => {
@@ -67,7 +67,7 @@ const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/mainLine/list', url: '/cs-harmonic-boot/mainLine/list',
method: 'POST', method: 'POST',
showPage: fullscreen.value ? true : false, showPage: fullscreen.value ? true : false,
exportName: '主要监测点列表', exportName: '主要监测点列表',
@@ -104,8 +104,7 @@ const tableStore: any = new TableStore({
{ title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true } { title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)` tableStore.table.height = `calc(${prop.height} - 80px)`
@@ -128,25 +127,34 @@ const cellClickEvent = ({ row, column }: any) => {
} }
} }
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
// TableHeaderRef.value?.setInterval(time[2] - 0)
// TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
// 在组件挂载时设置缓存值到 DatePicker // 在组件挂载时设置缓存值到 DatePicker
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
watch(
() => prop.timeKey,
val => {
tableStore.index()
}
)
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -1,10 +1,16 @@
<template> <template>
<div> <div>
<!--指标拟合图 --> <!--指标拟合图 -->
<TableHeader datePicker @selectChange="selectChange" v-if="fullscreen"> <TableHeader
datePicker
@selectChange="selectChange"
v-if="fullscreen"
ref="TableHeaderRef"
:timeKeyList="prop.timeKey"
>
<template v-slot:select> <template v-slot:select>
<el-form-item label="监测点"> <el-form-item label="监测点">
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable> <el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
<el-option <el-option
v-for="item in lineList" v-for="item in lineList"
:key="item.lineId" :key="item.lineId"
@@ -14,7 +20,12 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="用户功率"> <el-form-item label="用户功率">
<el-select v-model="tableStore.table.params.power" placeholder="请选择用户功率" clearable> <el-select
filterable
v-model="tableStore.table.params.power"
placeholder="请选择用户功率"
clearable
>
<el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -23,6 +34,7 @@
style="min-width: 120px !important" style="min-width: 120px !important"
placeholder="请选择" placeholder="请选择"
v-model="tableStore.table.params.valueType" v-model="tableStore.table.params.valueType"
filterable
> >
<el-option value="max" label="最大值"></el-option> <el-option value="max" label="最大值"></el-option>
<el-option value="min" label="最小值"></el-option> <el-option value="min" label="最小值"></el-option>
@@ -31,7 +43,12 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="电能质量指标"> <el-form-item label="电能质量指标">
<el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable> <el-select
filterable
v-model="tableStore.table.params.indicator"
placeholder="请选择电能质量指标"
clearable
>
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -42,6 +59,7 @@
v-model="tableStore.table.params.harmonicCount" v-model="tableStore.table.params.harmonicCount"
placeholder="请选择谐波次数" placeholder="请选择谐波次数"
style="min-width: 80px !important" style="min-width: 80px !important"
filterable
> >
<el-option <el-option
v-for="num in harmonicCountOptions" v-for="num in harmonicCountOptions"
@@ -62,7 +80,6 @@
width: prop.width, width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )` height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
}" }"
v-if="showEchart"
/> />
</div> </div>
</div> </div>
@@ -76,26 +93,26 @@ import { useConfig } from '@/stores/config'
import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit' import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree' import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const TableHeaderRef = ref()
const config = useConfig() const config = useConfig()
const lineList: any = ref() const lineList: any = ref()
const powerList: any = ref() const powerList: any = ref()
const countData: any = ref([])
const showEchart = ref(true)
const chartsList = ref<any>([]) const chartsList = ref<any>([])
// 计算是否全屏展示 // 计算是否全屏展示
@@ -134,7 +151,6 @@ const echartList = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
if (datePickerValue && datePickerValue.timeValue) { if (datePickerValue && datePickerValue.timeValue) {
// 更新时间参数 // 更新时间参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0] tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
@@ -152,6 +168,30 @@ const setEchart = () => {
title: { title: {
text: `${indicatorName}${powerName}负荷曲线拟合图` text: `${indicatorName}${powerName}负荷曲线拟合图`
}, },
tooltip: {
trigger: 'axis',
formatter: function (params: any) {
let result = params[0].name
params.forEach((item: any) => {
if (item.seriesName === indicatorName) {
// 对于电能质量指标格式化Y轴值显示
let valueText = ''
if (item.value[1] == 0) {
valueText = '不越限'
} else if (item.value[1] == 1) {
valueText = '越限'
} else {
valueText = item.value[1]
}
result += `<br/>${item.marker}${item.seriesName}: ${valueText}`
} else {
// 对于功率数据,正常显示数值
result += `<br/>${item.marker}${item.seriesName}: ${item.value[1]}`
}
})
return result
}
},
xAxis: { xAxis: {
type: 'time', type: 'time',
axisLabel: { axisLabel: {
@@ -162,7 +202,25 @@ const setEchart = () => {
} }
} }
}, },
yAxis: [{}, {}], yAxis: [
{},
indicatorName
? {
min: 0,
max: 1,
axisLabel: {
formatter: function (value: number) {
if (value === 0) {
return '不越限'
} else if (value === 1) {
return '越限'
}
return value
}
}
}
: {}
],
grid: { grid: {
left: '10px', left: '10px',
right: '20px' right: '20px'
@@ -189,6 +247,7 @@ const setEchart = () => {
{ {
name: indicatorName, // 动态设置指标名称 name: indicatorName, // 动态设置指标名称
type: 'line', type: 'line',
step: 'end',
showSymbol: false, showSymbol: false,
// smooth: true, // smooth: true,
data: [], data: [],
@@ -198,12 +257,6 @@ const setEchart = () => {
} }
} }
// 检查是否有数据
if (!chartsList.value || chartsList.value.length === 0) {
showEchart.value = false // 没有数据时隐藏图表
return
}
try { try {
// 用户功率数据和电能质量数据 // 用户功率数据和电能质量数据
let powerData: any[] = [] let powerData: any[] = []
@@ -242,20 +295,11 @@ const setEchart = () => {
const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null) const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null)
const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null) const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null)
if (!hasPowerData && !hasQualityData) {
showEchart.value = false
return
}
// 更新图表配置 // 更新图表配置
echartList.value.options.series[0].data = processedPowerData echartList.value.options.series[0].data = processedPowerData
echartList.value.options.series[1].data = processedQualityData echartList.value.options.series[1].data = processedQualityData
// 确保图表显示
showEchart.value = true
} catch (error) { } catch (error) {
console.error('处理图表数据时出错:', error) console.error('处理图表数据时出错:', error)
showEchart.value = false
} }
} }
@@ -273,6 +317,7 @@ const initCode = () => {
tableStore.table.params.power = powerList.value[0].id tableStore.table.params.power = powerList.value[0].id
tableStore.table.params.indicator = indicatorList.value[0].id tableStore.table.params.indicator = indicatorList.value[0].id
nextTick(() => { nextTick(() => {
// setTime()
tableStore.index() tableStore.index()
}) })
}) })
@@ -286,10 +331,7 @@ const tableStore: any = new TableStore({
exportName: '主要监测点列表', exportName: '主要监测点列表',
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
// 设置时间参数 setTime()
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
// 只有当 lineList 已加载且有数据时才设置默认 lineId // 只有当 lineList 已加载且有数据时才设置默认 lineId
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) { if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
tableStore.table.params.lineId = lineList.value[0].lineId tableStore.table.params.lineId = lineList.value[0].lineId
@@ -330,11 +372,9 @@ const tableStore: any = new TableStore({
loadCallback: () => { loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)` tableStore.table.height = `calc(${prop.height} - 80px)`
// 数据加载完成后的处理 // 数据加载完成后的处理
if (tableStore.table.data && tableStore.table.data.length > 0) { if (tableStore.table.data) {
chartsList.value = JSON.parse(JSON.stringify(tableStore.table.data)) chartsList.value = JSON.parse(JSON.stringify(tableStore.table.data))
setEchart() setEchart()
} else if (tableStore.table.data) {
showEchart.value = false
} }
} }
}) })
@@ -397,28 +437,41 @@ onMounted(() => {
initCode() initCode()
}) })
}) })
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
tableStore.index() tableStore.index()
} }
) )
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true
} }
) )
const addMenu = () => {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// :deep(.el-select) { // :deep(.el-select) {

View File

@@ -9,6 +9,7 @@
v-model="tableStore.table.params.lineId" v-model="tableStore.table.params.lineId"
placeholder="请选择监测点" placeholder="请选择监测点"
style="width: 150px" style="width: 150px"
filterable
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
@@ -48,7 +49,7 @@ const loop50 = (key: string) => {
list.push({ list.push({
title: i + '次', title: i + '次',
field: key + i + 'Overtime', field: key + i + 'Overtime',
width: '80', width: '60',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>`
@@ -58,7 +59,7 @@ const loop50 = (key: string) => {
return list return list
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/totalLimitStatistics/details', url: '/cs-harmonic-boot/totalLimitStatistics/details',
method: 'POST', method: 'POST',
publicHeight: 30, publicHeight: 30,
showPage: false, showPage: false,
@@ -86,7 +87,7 @@ const tableStore: any = new TableStore({
{ {
title: '闪变越限(%)', title: '闪变越限(%)',
field: 'flickerOvertime', field: 'flickerOvertime',
width: '80', width: '90',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`

View File

@@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<!-- 监测点列表 --> <!-- 监测点列表 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
ref="TableHeaderRef"
:showReset="false"
@selectChange="selectChange"
datePicker
v-if="fullscreen" :timeKeyList="prop.timeKey"
></TableHeader>
<Table <Table
ref="tableRef" ref="tableRef"
@cell-click="cellClickEvent" @cell-click="cellClickEvent"
@@ -46,18 +52,22 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue' import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit' import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const TableHeaderRef = ref()
// 上传相关 // 上传相关
const uploadDialogVisible = ref(false) const uploadDialogVisible = ref(false)
const currentUploadRow = ref<any>(null) const currentUploadRow = ref<any>(null)
@@ -101,51 +111,42 @@ const tableStore: any = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{
title: '治理对象',
field: 'sensitiveUser',
minWidth: '80'
},
{
title: '电压等级',
field: 'volGrade',
minWidth: '70'
},
{
title: '是否治理',
field: 'govern',
minWidth: '70'
},
// {
// title: '治理前报告',
// field: 'reportFileName',
// minWidth: '80',
// render: 'customTemplate',
// customTemplate: (row: any) => {
// return `<span style='cursor: pointer;text-decoration: underline;'>${row.reportFileName}</span>`
// }
// },
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
minWidth: '70', minWidth: '120',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
} }
}, },
{ title: '监测类型', field: 'position', minWidth: '60' }, { title: '监测类型', field: 'position', minWidth: '80' },
{ {
title: '监测点状态', title: '监测点状态',
field: 'runStatus', field: 'runStatus',
minWidth: '60', minWidth: '90',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='color: ${row.runStatus === '中断' ? '#FF0000' : ''}'>${row.runStatus}</span>` return `<span style='color: ${row.runStatus === '中断' ? '#FF0000' : ''}'>${row.runStatus}</span>`
} }
}, },
{
title: '治理对象',
field: 'sensitiveUser',
minWidth: '90'
},
{
title: '电压等级',
field: 'volGrade',
minWidth: '80'
},
{
title: '是否治理',
field: 'govern',
minWidth: '80'
},
{ {
title: '最新数据时间', title: '最新数据时间',
field: 'latestTime', field: 'latestTime',
@@ -161,7 +162,7 @@ const tableStore: any = new TableStore({
}, },
{ {
title: '操作', title: '操作',
minWidth: 120, minWidth: 80,
// fixed: 'right', // fixed: 'right',
render: 'buttons', render: 'buttons',
buttons: [ buttons: [
@@ -209,8 +210,7 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)` tableStore.table.height = `calc(${prop.height} - 80px)`
@@ -222,6 +222,25 @@ provide('tableRef', tableRef)
tableStore.table.params.keywords = '' tableStore.table.params.keywords = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
// 点击行 // 点击行
const cellClickEvent = ({ row, column }: any) => { const cellClickEvent = ({ row, column }: any) => {
if (column.field == 'lineName') { if (column.field == 'lineName') {
@@ -326,12 +345,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -16,6 +16,7 @@
v-model="searchForm.index" v-model="searchForm.index"
placeholder="请选择统计指标" placeholder="请选择统计指标"
@change="onIndexChange($event)" @change="onIndexChange($event)"
filterable
> >
<el-option <el-option
v-for="item in indexOptions" v-for="item in indexOptions"
@@ -36,6 +37,7 @@
style="min-width: 120px !important" style="min-width: 120px !important"
placeholder="请选择" placeholder="请选择"
v-model="searchForm.valueType" v-model="searchForm.valueType"
filterable
> >
<el-option value="max" label="最大值"></el-option> <el-option value="max" label="最大值"></el-option>
<el-option value="min" label="最小值"></el-option> <el-option value="min" label="最小值"></el-option>
@@ -59,6 +61,7 @@
placeholder="请选择谐波次数" placeholder="请选择谐波次数"
style="width: 100px" style="width: 100px"
class="mr20" class="mr20"
filterable
> >
<el-option <el-option
v-for="vv in item.countOptions" v-for="vv in item.countOptions"

View File

@@ -9,6 +9,7 @@
v-model="tableStore.table.params.lineId" v-model="tableStore.table.params.lineId"
placeholder="请选择监测点" placeholder="请选择监测点"
style="width: 150px" style="width: 150px"
filterable
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
@@ -48,7 +49,7 @@ const loop50 = (key: string) => {
list.push({ list.push({
title: i + '次', title: i + '次',
field: key + i + 'Overtime', field: key + i + 'Overtime',
width: '80', width: '60',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>`
@@ -58,7 +59,7 @@ const loop50 = (key: string) => {
return list return list
} }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/totalLimitStatistics/details', url: '/cs-harmonic-boot/totalLimitStatistics/details',
method: 'POST', method: 'POST',
publicHeight: 30, publicHeight: 30,
showPage: false, showPage: false,
@@ -86,7 +87,7 @@ const tableStore: any = new TableStore({
{ {
title: '闪变越限(%)', title: '闪变越限(%)',
field: 'flickerOvertime', field: 'flickerOvertime',
width: '80', width: '90',
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`

View File

@@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<!--总体指标越限统计 --> <!--总体指标越限统计 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
:showReset="false"
ref="TableHeaderRef"
@selectChange="selectChange"
datePicker
v-if="fullscreen" :timeKeyList="prop.timeKey"
></TableHeader>
<my-echart <my-echart
class="tall" class="tall"
:options="echartList" :options="echartList"
@@ -30,20 +36,21 @@ import OverLimitDetails from '@/components/cockpit/overLimitStatistics/component
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache' import { useTimeCacheStore } from '@/stores/timeCache'
import { totalLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit' import { totalLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const route = useRoute() const TableHeaderRef = ref()
const timeCacheStore = useTimeCacheStore()
const echartList = ref({}) const echartList = ref({})
@@ -120,7 +127,7 @@ const initEcharts = () => {
const OverLimitDetailsRef = ref() const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/totalLimitStatistics/list', url: '/cs-harmonic-boot/totalLimitStatistics/list',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
@@ -191,8 +198,7 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)` tableStore.table.height = `calc(${prop.height} - 80px)`
@@ -219,6 +225,26 @@ const cellClickEvent = ({ row, column }: any) => {
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
@@ -229,12 +255,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -1,8 +1,19 @@
<template> <template>
<div> <div>
<!--敏感负荷列表 --> <!--敏感负荷列表 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`" isGroup></Table> ref="TableHeaderRef"
:showReset="false"
@selectChange="selectChange"
datePicker
v-if="fullscreen" :timeKeyList="prop.timeKey"
></TableHeader>
<Table
ref="tableRef"
@cell-click="cellClickEvent"
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
isGroup
></Table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -10,24 +21,25 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number]}, w: { type: [String, Number] },
h: { type: [String, Number]}, h: { type: [String, Number] },
width: { type: [String, Number]}, width: { type: [String, Number] },
height: { type: [String, Number]}, height: { type: [String, Number] },
timeKey: { type: [String, Number]}, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
const dictData = useDictData() const TableHeaderRef = ref()
const sensitiveUserType = dictData.getBasicData('Sensitive_User_Type')
const dictData = useDictData()
const sensitiveUserType = dictData.getBasicData('Interference_Source')
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -51,7 +63,6 @@ const fullscreen = computed(() => {
} }
}) })
const OverLimitDetailsRef = ref() const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/pqSensitiveUser/getList', url: '/cs-harmonic-boot/pqSensitiveUser/getList',
@@ -76,7 +87,7 @@ const tableStore: any = new TableStore({
title: '敏感负荷类型', title: '敏感负荷类型',
field: 'loadType', field: 'loadType',
minWidth: '70', minWidth: '70',
formatter: row => { formatter: row => {
return sensitiveUserType.filter(item => item.id == row.cellValue)[0]?.name return sensitiveUserType.filter(item => item.id == row.cellValue)[0]?.name
} }
}, },
@@ -92,12 +103,10 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {}
}
}) })
const tableRef = ref() const tableRef = ref()
@@ -113,6 +122,25 @@ const cellClickEvent = ({ row, column }: any) => {
} }
} }
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
tableStore.index() tableStore.index()
@@ -127,17 +155,11 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true
} }
) )
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@@ -1,15 +1,11 @@
<template> <template>
<div> <div>
<!-- 暂态事件列表 --> <!-- 暂态事件详情 -->
<el-dialog draggable title="暂态事件列表" v-model="dialogVisible" append-to-body width="70%"> <el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
<!-- <TableHeader datePicker showExport :showReset="false"> <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
<template v-slot:select> <template v-slot:select>
<el-form-item label="监测点名称"> <el-form-item label="监测点">
<el-select <el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
v-model="tableStore.table.params.searchValue"
placeholder="请选择监测点名称"
style="width: 240px"
>
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@@ -19,8 +15,25 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> --> </TableHeader>
<Table ref="tableRef" isGroup :height="height"></Table> <Table ref="tableRef" isGroup :height="heightRef"></Table>
</el-dialog>
<!-- 查看波形 -->
<el-dialog
v-model="isWaveCharts"
draggable
title="波形分析"
append-to-body
v-if="isWaveCharts"
width="70%"
@close="handleHideCharts"
>
<waveFormAnalysis
v-loading="loading"
ref="waveFormAnalysisRef"
@handleHideCharts="handleHideCharts"
:wp="wp"
/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@@ -30,21 +43,36 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
import { analyseWave } from '@/api/common'
import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
const dialogVisible: any = ref(false) const dialogVisible: any = ref(false)
const harmonicRatioRef: any = ref(null) const waveFormAnalysisRef: any = ref(null)
const options = [ // 波形
{ const isWaveCharts = ref(false)
value: '35kV进线', const loading = ref(false)
label: '35kV进线' const wp = ref({})
} const boxoList: any = ref({})
]
const height = mainHeight(0, 2).height as any const tableHeaderRef = ref()
const options = ref()
const heightRef = ref(mainHeight(168, 2.1).height)
const selectChange = (flag: boolean, h: any) => {
heightRef.value = mainHeight(h, 2.1).height
}
const getSimpleLineList = async () => {
const res = await getSimpleLine()
options.value = res.data
}
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0', url: '/cs-harmonic-boot/event/pageEvent',
method: 'POST', method: 'POST',
publicHeight: 30, showPage: true,
showPage: false, exportName: '暂态事件详情',
exportName: '主要监测点列表',
column: [ column: [
{ {
field: 'index', field: 'index',
@@ -56,76 +84,142 @@ const tableStore: any = new TableStore({
}, },
{ {
title: '暂态时间', title: '暂态时间',
field: 'time', field: 'startTime',
minWidth: '180'
}, },
{ {
title: '测点名称', title: '测点名称',
field: 'name', field: 'lineName',
width: '150' minWidth: '150'
}, },
{ {
title: '暂态类型', title: '暂态类型',
field: 'flicker', field: 'tag',
width: '100', minWidth: '100'
}, },
{ {
title: '特征幅值(%)', title: '特征幅值(%)',
field: 'flicker', field: 'amplitude',
width: '100' minWidth: '100'
}, },
{ {
title: '暂降深度(%)', title: '暂降深度(%)',
field: 'flicker', field: 'depth',
width: '100' minWidth: '100',
formatter: (row: any) => {
// 当暂态类型不是电压暂升时,计算暂降深度 = 100 - 特征幅值
if (row.row.tag !== '电压暂升') {
const amplitude = parseFloat(row.row.amplitude)
if (!isNaN(amplitude)) {
return 100 - amplitude
}
return '-'
} else {
// 电压暂升时不显示暂降深度
return '/'
}
}
}, },
{ {
title: '持续时间(S)', title: '持续时间(S)',
field: 'flicker', field: 'persistTime',
width: '100' minWidth: '100'
}, },
{ {
title: '严重度', title: '严重度',
field: 'flicker', field: 'severity',
width: '80' minWidth: '80'
}, },
{
title: '波形',
minWidth: '100',
render: 'buttons',
buttons: [
{
name: 'edit',
text: '波形分析',
type: 'primary',
icon: 'el-icon-DataLine',
render: 'basicButton',
disabled: row => {
return !row.wavePath
},
click: async row => {
row.loading1 = true
loading.value = true
isWaveCharts.value = true
dialogVisible.value = false
// 在打开弹窗时立即设置高度
nextTick(() => {
if (waveFormAnalysisRef.value) {
// waveFormAnalysisRef.value.setHeight(false, 360)
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
}
})
await analyseWave(row.id)
.then(res => {
row.loading1 = false
if (res != undefined) {
boxoList.value = row
// boxoList.value = {
// ...row,
// duration: row.persistTime // 将 persistTime 值赋给 duration
// }
boxoList.value.featureAmplitude =
row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
boxoList.value.systemType = 'YPT'
wp.value = res.data
}
loading.value = false
})
.catch(() => {
row.loading1 = false
loading.value = false
})
nextTick(() => {
waveFormAnalysisRef.value &&
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
})
}
},
{
name: 'edit',
text: '暂无波形',
type: 'info',
icon: 'el-icon-DataLine',
render: 'basicButton',
disabled: row => {
return !!row.wavePath
}
}
]
}
], ],
beforeSearchFun: () => {}, beforeSearchFun: () => {},
loadCallback: () => { loadCallback: () => {}
tableStore.table.data = [
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
}
]
}
}) })
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
const open = async (row: any) => { const open = async (time: any) => {
dialogVisible.value = true dialogVisible.value = true
tableStore.index() getSimpleLineList()
tableStore.table.params.lineId = ''
nextTick(() => {
tableHeaderRef.value.setInterval(5)
tableHeaderRef.value.setTimeInterval([time, time])
tableStore.table.params.searchBeginTime = time
tableStore.table.params.searchEndTime = time
tableStore.index()
})
} }
// 点击行 const handleHideCharts = () => {
const cellClickEvent = ({ row, column }: any) => { isWaveCharts.value = false
if (column.field != 'name') { dialogVisible.value = true
harmonicRatioRef.value.openDialog(row)
}
} }
defineExpose({ open }) defineExpose({ open })
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@@ -7,6 +7,7 @@
@selectChange="selectChange" @selectChange="selectChange"
datePicker datePicker
v-if="fullscreen" v-if="fullscreen"
:timeKeyList="prop.timeKey"
></TableHeader> ></TableHeader>
<el-calendar <el-calendar
v-model="value" v-model="value"
@@ -14,9 +15,16 @@
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`, height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto' overflow: 'auto'
}" }"
v-loading="tableStore.table.loading"
> >
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }"> <div
style="padding: 8px"
:style="{
background: setBackground(data.day),
height: `calc((${prop.height} - 100px - ${headerHeight}px + ${fullscreen ? 0 : 56}px) / 5 )`
}"
>
<p :class="data.isSelected ? 'is-selected' : ''"> <p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
</p> </p>
@@ -31,12 +39,19 @@
</template> </template>
<div <div
style="text-decoration: underline" style="text-decoration: underline"
:style="{ height: `calc(${prop.height} / 5 - 40px)`, overflow: 'auto' }" class="details"
v-for="item in list?.filter((item:any) => item.name == data.day)" v-for="item in list?.filter((item:any) => item.name == data.day)"
@click="descentClick(item)"
> >
<div @click="descentClick">电压暂降:{{ item.eventDown || 0 }}</div> <!-- <div>电压暂降:{{ item.eventDown || 0 }}</div>
<div>电压中断:{{ item.eventOff || 0 }}</div> <div>电压中断:{{ item.eventOff || 0 }}</div>
<div>电压暂升:{{ item.eventUp || 0 }}</div> <div>电压暂升:{{ item.eventUp || 0 }}</div> -->
<template v-if="fullscreen">
<div>电压暂降:{{ item.eventDown || 0 }}</div>
<div>电压中断:{{ item.eventOff || 0 }}</div>
<div>电压暂升:{{ item.eventUp || 0 }}</div>
</template>
<template v-else>暂态事件</template>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
@@ -49,20 +64,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue' import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { dayjs } from 'element-plus' import { dayjs } from 'element-plus'
import TransientList from './components/transientList.vue' import TransientList from './components/transientList.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router' import { getTime } from '@/utils/formatTime'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const headerHeight = ref(57) const headerHeight = ref(57)
@@ -79,11 +93,11 @@ const hasEventData = (day: string) => {
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
// if (datePickerValue && datePickerValue.timeValue) { if (datePickerValue && datePickerValue.timeValue) {
// // 更新时间参数 // 更新时间参数
// tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0] tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
// tableStore.table.params.searchEndTime = datePickerValue.timeValue[1] tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
// } }
} }
// 计算是否全屏展示 // 计算是否全屏展示
@@ -113,13 +127,11 @@ const tableStore: any = new TableStore({
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
if (prop.timeValue && Array.isArray(prop.timeValue)) { setTime()
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
}, },
loadCallback: () => { loadCallback: () => {
value.value = tableStore.table.params.searchBeginTime
list.value = tableStore.table.data list.value = tableStore.table.data
} }
}) })
@@ -141,61 +153,65 @@ provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
}
if (fullscreen.value) {
TableHeaderRef.value.setInterval(3)
}
tableStore.index() tableStore.index()
}) })
}) })
watch(
() => prop.timeKey, const setTime = () => {
val => { const time = getTime(
tableStore.index() (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
} }
) }
watch( watch(
() => prop.timeValue, () => prop.timeValue,
// (newVal, oldVal) => { (newVal, oldVal) => {
// // 当外部时间值变化时,更新表格的时间参数
// if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
// tableStore.table.params.searchBeginTime = newVal[0]
// tableStore.table.params.searchEndTime = newVal[1]
// tableStore.index()
// }
// },
val => {
tableStore.index() tableStore.index()
}, },
{ {
deep: true deep: true
} }
) )
// 电压暂降点击事件 // 电压暂降点击事件
const descentClick = () => { const descentClick = (item: any) => {
transientListRef.value.open() transientListRef.value.open(item.name)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-calendar) { :deep(.el-calendar) {
.el-calendar__header { .el-calendar__button-group {
display: none; display: none;
} }
.el-calendar__body { .el-calendar__body {
padding: 0px !important; padding: 0px !important;
height: 100%; height: calc(100% - 46px);
.el-calendar-table { .el-calendar-table {
height: 100%; height: 100%;
} }
} }
.el-calendar-day { .el-calendar-day {
// height: calc(912px / 5 );
height: 100%; height: 100%;
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
.details {
height: calc(100% - 20px);
overflow-y: auto;
}
} }
.el-calendar-table__row { .el-calendar-table__row {
.next { .next {

View File

@@ -1,23 +1,30 @@
<template> <template>
<div> <div>
<!--暂态事件概率分布 --> <!--暂态事件概率分布 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
ref="TableHeaderRef"
:timeKeyList="prop.timeKey"
:showReset="false"
@selectChange="selectChange"
datePicker
v-if="fullscreen"
></TableHeader>
<my-echart <my-echart
class="tall" class="tall"
:options="echartList" :options="echartList"
:style="{ :style="{
width: prop.width, width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}" }"
/> />
<my-echart <!-- <my-echart
class="mt10" class="mt10"
:options="echartList1" :options="echartList1"
:style="{ :style="{
width: prop.width, width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
}" }"
/> /> -->
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -26,16 +33,20 @@ import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const TableHeaderRef = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
@@ -66,135 +77,6 @@ const echartList = ref({})
const echartList1 = ref({}) const echartList1 = ref({})
// const echartList1 = ref({
// title: {
// text: '越限时间概率分布'
// },
// xAxis: {
// // name: '时间',
// // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
// type: 'time',
// axisLabel: {
// formatter: {
// day: '{MM}-{dd}',
// month: '{MM}',
// year: '{yyyy}'
// }
// }
// },
// yAxis: {
// name: '次' // 给X轴加单位
// },
// grid: {
// left: '10px',
// right: '20px'
// },
// options: {
// series: [
// {
// type: 'line',
// showSymbol: false,
// // smooth: true,
// name: '电压中断',
// color: '#FF9100',
// data: [
// ['2025-10-16 07:00:00', 10],
// ['2025-10-16 07:15:00', 10],
// ['2025-10-16 07:30:00', 10],
// ['2025-10-16 07:45:00', 10],
// ['2025-10-16 08:00:00', 30],
// ['2025-10-16 08:15:00', 50],
// ['2025-10-16 08:30:00', 60],
// ['2025-10-16 08:45:00', 70],
// ['2025-10-16 09:00:00', 100],
// ['2025-10-16 09:15:00', 120],
// ['2025-10-16 09:30:00', 130],
// ['2025-10-16 09:45:00', 140],
// ['2025-10-16 10:00:00', 160],
// ['2025-10-16 10:15:00', 160],
// ['2025-10-16 10:30:00', 130],
// ['2025-10-16 10:45:00', 120],
// ['2025-10-16 11:00:00', 140],
// ['2025-10-16 11:15:00', 80],
// ['2025-10-16 11:30:00', 70],
// ['2025-10-16 11:45:00', 90],
// ['2025-10-16 12:00:00', 60],
// ['2025-10-16 12:15:00', 60],
// ['2025-10-16 12:30:00', 60],
// ['2025-10-16 12:45:00', 60]
// ]
// },
// {
// type: 'line',
// showSymbol: false,
// // smooth: true,
// color: '#FFBF00',
// name: '电压暂降',
// data: [
// ['2025-10-16 07:00:00', 1],
// ['2025-10-16 07:15:00', 1],
// ['2025-10-16 07:30:00', 1],
// ['2025-10-16 07:45:00', 1],
// ['2025-10-16 08:00:00', 3],
// ['2025-10-16 08:15:00', 5],
// ['2025-10-16 08:30:00', 6],
// ['2025-10-16 08:45:00', 7],
// ['2025-10-16 09:00:00', 10],
// ['2025-10-16 09:15:00', 12],
// ['2025-10-16 09:30:00', 13],
// ['2025-10-16 09:45:00', 14],
// ['2025-10-16 10:00:00', 16],
// ['2025-10-16 10:15:00', 16],
// ['2025-10-16 10:30:00', 13],
// ['2025-10-16 10:45:00', 12],
// ['2025-10-16 11:00:00', 14],
// ['2025-10-16 11:15:00', 8],
// ['2025-10-16 11:30:00', 7],
// ['2025-10-16 11:45:00', 9],
// ['2025-10-16 12:00:00', 6],
// ['2025-10-16 12:15:00', 6],
// ['2025-10-16 12:30:00', 6],
// ['2025-10-16 12:45:00', 6]
// ]
// },
// {
// type: 'line',
// showSymbol: false,
// // smooth: true,
// name: '电压暂升',
// color: config.layout.elementUiPrimary[0],
// data: [
// ['2025-10-16 07:00:00', 19],
// ['2025-10-16 07:15:00', 19],
// ['2025-10-16 07:30:00', 19],
// ['2025-10-16 07:45:00', 19],
// ['2025-10-16 08:00:00', 39],
// ['2025-10-16 08:15:00', 59],
// ['2025-10-16 08:30:00', 69],
// ['2025-10-16 08:45:00', 79],
// ['2025-10-16 09:00:00', 109],
// ['2025-10-16 09:15:00', 129],
// ['2025-10-16 09:30:00', 139],
// ['2025-10-16 09:45:00', 149],
// ['2025-10-16 10:00:00', 169],
// ['2025-10-16 10:15:00', 169],
// ['2025-10-16 10:30:00', 139],
// ['2025-10-16 10:45:00', 129],
// ['2025-10-16 11:00:00', 149],
// ['2025-10-16 11:15:00', 89],
// ['2025-10-16 11:30:00', 79],
// ['2025-10-16 11:45:00', 99],
// ['2025-10-16 12:00:00', 69],
// ['2025-10-16 12:15:00', 69],
// ['2025-10-16 12:30:00', 69],
// ['2025-10-16 12:45:00', 69]
// ]
// }
// ]
// }
// })
const processDataForChart = (rawData: any[]) => { const processDataForChart = (rawData: any[]) => {
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z] // 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
const chartData = rawData.map(item => [item.x, item.y, item.z]) const chartData = rawData.map(item => [item.x, item.y, item.z])
@@ -208,8 +90,7 @@ const tableStore: any = new TableStore({
showPage: false, showPage: false,
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
const processedData = processDataForChart(tableStore.table.data.innerList || []) const processedData = processDataForChart(tableStore.table.data.innerList || [])
@@ -217,29 +98,37 @@ const tableStore: any = new TableStore({
const xlist = tableStore.table.data.xlist || [] const xlist = tableStore.table.data.xlist || []
// 处理趋势图数据 // 处理趋势图数据
const seriesData = [ const seriesData = trendList.map((item: any) => {
{ // 根据接口返回的name字段确定系列名称和颜色
name: '电压中断', let name = ''
type: 'line', let color = ''
showSymbol: false,
color: '#FF9100', switch (item.name) {
data: trendList[0]?.map((value: number, index: number) => [xlist[index], value]) || [] case 'Evt_Sys_DipStr':
}, name = '电压暂降'
{ color = '#FFBF00'
name: '电压暂降', break
type: 'line', case 'Evt_Sys_IntrStr':
showSymbol: false, name = '电压中断'
color: '#FFBF00', color = '#FF9100'
data: trendList[1]?.map((value: number, index: number) => [xlist[index], value]) || [] break
}, case 'Evt_Sys_SwlStr':
{ name = '电压暂升'
name: '电压暂升', color = config.layout.elementUiPrimary[0]
type: 'line', break
showSymbol: false, default:
color: config.layout.elementUiPrimary[0], name = item.name
data: trendList[2]?.map((value: number, index: number) => [xlist[index], value]) || [] color = '#000000'
} }
]
return {
name: name,
type: 'line',
showSymbol: false,
color: color,
data: item.trendList?.map((value: number, index: number) => [xlist[index], value]) || []
}
})
// 获取x轴和y轴的标签值 // 获取x轴和y轴的标签值
const xLabels = [ const xLabels = [
@@ -272,9 +161,7 @@ const tableStore: any = new TableStore({
backgroundColor: 'rgba(0,0,0,0.55)', backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0, borderWidth: 0,
formatter: function (params: any) { formatter: function (params: any) {
console.log(params, '99000')
var tips = '' var tips = ''
tips += '持续时间: ' + yLabels[params.value[1]] + '</br>' tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>' tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
tips += '事件次数: ' + params.value[2] + '</br>' tips += '事件次数: ' + params.value[2] + '</br>'
@@ -296,34 +183,16 @@ const tableStore: any = new TableStore({
type: 'category', type: 'category',
name: '特征幅值', name: '特征幅值',
data: xLabels, data: xLabels,
axisLine: { nameGap: 40
lineStyle: {
color: '#111'
}
},
axisLabel: {
color: '#111'
}
}, },
yAxis3D: { yAxis3D: {
type: 'category', type: 'category',
name: '持续时间', name: '持续时间',
data: yLabels, data: yLabels,
nameTextStyle: { nameGap: 40,
color: '#111'
},
axisLine: {
show: true,
lineStyle: {
color: '#111'
}
},
axisLabel: {
color: '#111'
},
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: ['#111'],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -331,25 +200,28 @@ const tableStore: any = new TableStore({
}, },
zAxis3D: { zAxis3D: {
type: 'value', type: 'value',
splitNumber: 10,
minInterval: 10, minInterval: 10,
name: '暂态事件次数' name: '暂态事件次数',
nameGap: 30
}, },
grid3D: { grid3D: {
viewControl: { viewControl: {
projection: 'perspective', projection: 'perspective',
distance: 250 distance: 260,
}, rotateSensitivity: 10,
boxWidth: 200, zoomSensitivity: 2
boxDepth: 80,
light: {
main: {
intensity: 1.2
}, },
ambient: { boxWidth: 150,
intensity: 0.3 boxDepth: 100,
boxHeight: 100,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.4
}
} }
}
}, },
series: [ series: [
{ {
@@ -362,20 +234,6 @@ const tableStore: any = new TableStore({
fontSize: 16, fontSize: 16,
borderWidth: 1 borderWidth: 1
} }
},
itemStyle: {
opacity: 1
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
} }
} }
] ]
@@ -413,26 +271,41 @@ provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
watch( watch(
() => prop.timeKey, () => prop.timeKey,
val => { val => {
tableStore.index() tableStore.index()
} }
) )
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true
} }
) )
const addMenu = () => {}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@@ -2,33 +2,36 @@
<div> <div>
<!-- 暂态事件详情 --> <!-- 暂态事件详情 -->
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%"> <el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
<TableHeader datePicker showExport :showReset="false"> <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
<template v-slot:select> <template v-slot:select>
<el-form-item label="监测点名称"> <el-form-item label="监测点">
<el-select <el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
v-model="tableStore.table.params.searchValue"
placeholder="请选择监测点名称"
style="width: 240px"
>
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.lineId"
:label="item.label" :label="item.name"
:value="item.value" :value="item.lineId"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table> <Table ref="tableRef" isGroup :height="heightRef"></Table>
</el-dialog> </el-dialog>
<!-- 查看波形 --> <!-- 查看波形 -->
<el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%"> <el-dialog
v-model="isWaveCharts"
draggable
title="波形分析"
append-to-body
width="70%"
@close="handleHideCharts"
>
<waveFormAnalysis <waveFormAnalysis
v-loading="loading" v-loading="loading"
v-if="isWaveCharts" v-if="isWaveCharts"
ref="waveFormAnalysisRef" ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false" @handleHideCharts="handleHideCharts"
:wp="wp" :wp="wp"
/> />
</el-dialog> </el-dialog>
@@ -42,6 +45,8 @@ import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue' import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
import { analyseWave } from '@/api/common' import { analyseWave } from '@/api/common'
import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
const dialogVisible: any = ref(false) const dialogVisible: any = ref(false)
const waveFormAnalysisRef: any = ref(null) const waveFormAnalysisRef: any = ref(null)
// 波形 // 波形
@@ -50,18 +55,23 @@ const loading = ref(false)
const wp = ref({}) const wp = ref({})
const boxoList: any = ref({}) const boxoList: any = ref({})
const options = [ const tableHeaderRef = ref()
{
value: '35kV进线', const options = ref()
label: '35kV进线' const heightRef = ref(mainHeight(168, 2.2).height)
} const selectChange = (flag: boolean, h: any) => {
] heightRef.value = mainHeight(h, 2.2).height
const height = mainHeight(0, 2).height as any }
const getSimpleLineList = async () => {
const res = await getSimpleLine()
options.value = res.data
}
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0', url: '/cs-harmonic-boot/event/pageEvent',
method: 'POST', method: 'POST',
publicHeight: 30, showPage: true,
showPage: false,
exportName: '主要监测点列表', exportName: '主要监测点列表',
column: [ column: [
{ {
@@ -74,65 +84,91 @@ const tableStore: any = new TableStore({
}, },
{ {
title: '暂态时间', title: '暂态时间',
field: 'time' field: 'startTime',
minWidth: '180'
}, },
{ {
title: '测点名称', title: '测点名称',
field: 'name', field: 'lineName',
width: '150' minWidth: '150'
}, },
{ {
title: '暂态类型', title: '暂态类型',
field: 'flicker', field: 'tag',
width: '100' minWidth: '100'
}, },
{ {
title: '特征幅值(%)', title: '特征幅值(%)',
field: 'flicker', field: 'amplitude',
width: '100' minWidth: '100'
}, },
{ {
title: '暂降深度(%)', title: '暂降深度(%)',
field: 'flicker', field: 'depth',
width: '100' minWidth: '100',
formatter: (row: any) => {
// 当暂态类型不是电压暂升时,计算暂降深度 = 100 - 特征幅值
if (row.row.tag !== '电压暂升') {
const amplitude = parseFloat(row.row.amplitude)
if (!isNaN(amplitude)) {
return 100 - amplitude
}
return '-'
} else {
// 电压暂升时不显示暂降深度
return '/'
}
}
}, },
{ {
title: '持续时间(S)', title: '持续时间(S)',
field: 'flicker', field: 'persistTime',
width: '100' minWidth: '100'
}, },
{ {
title: '严重度', title: '严重度',
field: 'flicker', field: 'severity',
width: '80' minWidth: '80'
}, },
{ {
title: '波形', title: '波形',
width: '100', width: '90',
render: 'buttons', render: 'buttons',
buttons: [ buttons: [
{ {
name: 'check', name: 'edit',
title: '查看波形', text: '波形分析',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-DataLine',
render: 'basicButton', render: 'basicButton',
loading: 'loading1', disabled: row => {
// disabled: row => { return !row.wavePath
// return !row.wavePath },
// },
click: async row => { click: async row => {
row.loading1 = true row.loading1 = true
loading.value = true loading.value = true
isWaveCharts.value = true isWaveCharts.value = true
dialogVisible.value = false
// 在打开弹窗时立即设置高度
nextTick(() => {
if (waveFormAnalysisRef.value) {
// waveFormAnalysisRef.value.setHeight(false, 360)
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
}
})
await analyseWave(row.id) await analyseWave(row.id)
.then(res => { .then(res => {
row.loading1 = false row.loading1 = false
if (res != undefined) { if (res != undefined) {
boxoList.value = row boxoList.value = row
// boxoList.value = {
// ...row,
// duration: row.persistTime // 将 persistTime 值赋给 duration
// }
boxoList.value.featureAmplitude = boxoList.value.featureAmplitude =
row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
boxoList.value.systemType = 'WX' boxoList.value.systemType = 'YPT'
wp.value = res.data wp.value = res.data
} }
loading.value = false loading.value = false
@@ -147,44 +183,40 @@ const tableStore: any = new TableStore({
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true) waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
}) })
} }
},
{
name: 'edit',
text: '暂无波形',
type: 'info',
icon: 'el-icon-DataLine',
render: 'basicButton',
disabled: row => {
return !!row.wavePath
}
} }
] ]
} }
], ],
beforeSearchFun: () => {}, beforeSearchFun: () => {},
loadCallback: () => { loadCallback: () => {}
tableStore.table.data = [
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0'
}
]
}
}) })
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
const open = async (row: any) => { const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
dialogVisible.value = true dialogVisible.value = true
tableStore.index() getSimpleLineList()
tableStore.table.params.lineId = row.id
nextTick(() => {
tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
tableStore.table.params.searchBeginTime = searchBeginTime
tableStore.table.params.searchEndTime = searchEndTime
tableStore.index()
})
} }
// 点击行 const handleHideCharts = () => {
const cellClickEvent = ({ row, column }: any) => { isWaveCharts.value = false
if (column.field != 'name') { dialogVisible.value = true
isWaveCharts.value = true
}
} }
defineExpose({ open }) defineExpose({ open })

View File

@@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<!--暂态事件统计 --> <!--暂态事件统计 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader> <TableHeader
ref="TableHeaderRef"
:showReset="false"
@selectChange="selectChange"
datePicker
v-if="fullscreen" :timeKeyList="prop.timeKey"
></TableHeader>
<my-echart <my-echart
class="tall" class="tall"
:options="echartList" :options="echartList"
@@ -24,25 +30,27 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import TransientStatisticsDetail from '@/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue' import TransientStatisticsDetail from '@/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { netEventEcharts } from '@/api/harmonic-boot/cockpit/cockpit' import { netEventEcharts } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const TableHeaderRef = ref()
const headerHeight = ref(57) const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -76,7 +84,7 @@ const eventEcharts = () => {
searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1] searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}).then(res => { }).then(res => {
// 整理接口数据为图表所需格式 // 整理接口数据为图表所需格式
const rawData = res.data || {}; const rawData = res.data || {}
data.value = [ data.value = [
{ {
name: '电压中断', name: '电压中断',
@@ -90,8 +98,8 @@ const eventEcharts = () => {
name: '电压暂升', name: '电压暂升',
value: rawData.eventUp || 0 value: rawData.eventUp || 0
} }
]; ]
echartList.value = { echartList.value = {
title: {}, title: {},
tooltip: { tooltip: {
@@ -99,8 +107,8 @@ const eventEcharts = () => {
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
top: 'center', top: '50',
right: '5%', right: '10',
formatter: function (e: any) { formatter: function (e: any) {
return e + ' ' + data.value.filter((item: any) => item.name == e)[0].value + '次' return e + ' ' + data.value.filter((item: any) => item.name == e)[0].value + '次'
} }
@@ -124,7 +132,7 @@ const eventEcharts = () => {
left: 'center' left: 'center'
}, },
{ {
text: (rawData.eventOff + rawData.eventDown + rawData.eventUp) + '次', text: rawData.eventOff + rawData.eventDown + rawData.eventUp + '次',
left: 'center', left: 'center',
top: 'center' top: 'center'
} }
@@ -174,6 +182,7 @@ const tableStore: any = new TableStore({
title: '电压中断(次)', title: '电压中断(次)',
field: 'eventOff', field: 'eventOff',
minWidth: '70', minWidth: '70',
sortable: true,
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventOff}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventOff}</span>`
@@ -183,6 +192,7 @@ const tableStore: any = new TableStore({
title: '电压暂降(次)', title: '电压暂降(次)',
field: 'eventDown', field: 'eventDown',
minWidth: '80', minWidth: '80',
sortable: true,
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventDown}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventDown}</span>`
@@ -192,6 +202,7 @@ const tableStore: any = new TableStore({
title: '电压暂升(次)', title: '电压暂升(次)',
field: 'eventUp', field: 'eventUp',
minWidth: '80', minWidth: '80',
sortable: true,
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventUp}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventUp}</span>`
@@ -199,8 +210,7 @@ const tableStore: any = new TableStore({
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
eventEcharts() eventEcharts()
@@ -215,7 +225,30 @@ provide('tableStore', tableStore)
// 点击行 // 点击行
const cellClickEvent = ({ row, column }: any) => { const cellClickEvent = ({ row, column }: any) => {
if (column.field != 'name') { if (column.field != 'name') {
transientStatisticsDetailRef.value.open(row) transientStatisticsDetailRef.value.open(
row,
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
tableStore.table.params.searchEndTime || prop.timeValue?.[1]
)
}
}
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
} }
} }
@@ -233,12 +266,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true

View File

@@ -1,10 +1,22 @@
<template> <template>
<div> <div>
<!--趋势对比 --> <!--趋势对比 -->
<TableHeader datePicker :showReset="false" @selectChange="selectChange" v-if="fullscreen"> <TableHeader
datePicker
ref="TableHeaderRef"
:timeKeyList="prop.timeKey"
:showReset="false"
@selectChange="selectChange"
v-if="fullscreen"
>
<template v-slot:select> <template v-slot:select>
<el-form-item label="监测对象"> <el-form-item label="监测对象">
<el-select v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象" clearable> <el-select
filterable
v-model="tableStore.table.params.sensitiveUserId"
placeholder="请选择监测对象"
clearable
>
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -68,7 +80,6 @@
width: prop.width, width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)` height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}" }"
v-if="showEchart"
/> />
</div> </div>
</template> </template>
@@ -78,26 +89,23 @@ import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree' import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit' import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: [String, Number] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object } timeValue: { type: Object },
interval: { type: Number }
}) })
const route = useRoute() const TableHeaderRef = ref()
const timeCacheStore = useTimeCacheStore()
const config = useConfig() const config = useConfig()
const lineIdList = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
// 计算是否全屏展示 // 计算是否全屏展示
const fullscreen = computed(() => { const fullscreen = computed(() => {
const w = Number(prop.w) const w = Number(prop.w)
@@ -116,8 +124,6 @@ const indicatorList = ref()
const echartList = ref() const echartList = ref()
const showEchart = ref(true)
const headerHeight = ref(57) const headerHeight = ref(57)
// 监测对象 // 监测对象
@@ -209,13 +215,7 @@ const setEchart = () => {
data: beforeGroupedByPhase[phase], data: beforeGroupedByPhase[phase],
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params: any) { color: color
if (params.value[1] == 0 || params.value[1] == 3.14159) {
return '#ccc'
} else {
return color
}
}
} }
}, },
lineStyle: { lineStyle: {
@@ -240,13 +240,7 @@ const setEchart = () => {
data: afterGroupedByPhase[phase], data: afterGroupedByPhase[phase],
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params: any) { color: color
if (params.value[1] == 0 || params.value[1] == 3.14159) {
return '#ccc'
} else {
return color
}
}
} }
}, },
lineStyle: { lineStyle: {
@@ -339,8 +333,7 @@ const tableStore: any = new TableStore({
exportName: '趋势对比', exportName: '趋势对比',
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0] setTime()
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) { if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
tableStore.table.params.sensitiveUserId = idList.value[0].id tableStore.table.params.sensitiveUserId = idList.value[0].id
} }
@@ -371,8 +364,6 @@ const tableStore: any = new TableStore({
chartsListBefore.value = tableStore.table.data.before chartsListBefore.value = tableStore.table.data.before
chartsListAfter.value = tableStore.table.data.after chartsListAfter.value = tableStore.table.data.after
setEchart() setEchart()
} else if (tableStore.table.data) {
showEchart.value = false
} }
} }
}) })
@@ -387,6 +378,25 @@ onMounted(() => {
initListByIds() initListByIds()
}) })
const setTime = () => {
const time = getTime(
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
prop.timeKey,
fullscreen.value
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
: prop.timeValue
)
if (Array.isArray(time)) {
tableStore.table.params.searchBeginTime = time[0]
tableStore.table.params.searchEndTime = time[1]
TableHeaderRef.value?.setInterval(time[2] - 0)
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
} else {
console.warn('获取时间失败time 不是一个有效数组')
}
}
// 判断是否应该显示谐波次数选择框 // 判断是否应该显示谐波次数选择框
const shouldShowHarmonicCount = () => { const shouldShowHarmonicCount = () => {
if (!tableStore.table.params.indicator || !indicatorList.value) return false if (!tableStore.table.params.indicator || !indicatorList.value) return false
@@ -422,12 +432,7 @@ watch(
watch( watch(
() => prop.timeValue, () => prop.timeValue,
(newVal, oldVal) => { (newVal, oldVal) => {
// 当外部时间值变化时,更新表格的时间参数 tableStore.index()
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
tableStore.table.params.searchBeginTime = newVal[0]
tableStore.table.params.searchEndTime = newVal[1]
tableStore.index()
}
}, },
{ {
deep: true deep: true
@@ -449,8 +454,6 @@ watch(
} }
} }
) )
const addMenu = () => {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// :deep(.el-select) { // :deep(.el-select) {

View File

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

View File

@@ -1,9 +1,6 @@
<template> <template>
<div v-loading="loading" style="position: relative; height: 100%">
<div v-loading="loading" :element-loading-background="'rgba(122, 122, 122, 0.8)'" <div id="boxr">
style="position: relative;height: 100%;">
<div id="boxr" style="background: #343849c7">
<div id="rmsp" :style="`height:${vh};overflow: hidden;`"> <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="rms"></div> <div class="bx" id="rms"></div>
</div> </div>
@@ -16,6 +13,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import $ from 'jquery' import $ from 'jquery'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
import url from '@/assets/img/point.png' import url from '@/assets/img/point.png'
import url2 from '@/assets/img/dw.png' import url2 from '@/assets/img/dw.png'
const worker = ref<Worker | null>(null) const worker = ref<Worker | null>(null)
@@ -66,7 +64,7 @@ interface WaveData {
interface Props { interface Props {
value?: number value?: number
flag?: string | number | boolean flag?: string | number | boolean
parentHeight?: string | number | boolean parentHeight?: any
DColor?: boolean DColor?: boolean
boxoList?: any boxoList?: any
wp?: any wp?: any
@@ -78,7 +76,7 @@ const props = withDefaults(defineProps<Props>(), {
parentHeight: 0, parentHeight: 0,
DColor: false, DColor: false,
boxoList: () => ({}), boxoList: () => ({}),
wp: () => ({}), wp: () => ({})
}) })
const loading = ref(true) const loading = ref(true)
@@ -110,34 +108,41 @@ const myChartess4 = ref<echarts.ECharts | null>(null)
const myChartess5 = ref<echarts.ECharts | null>(null) const myChartess5 = ref<echarts.ECharts | null>(null)
const vh = computed(() => { const vh = computed(() => {
if (props.flag == 1) { if (props.parentHeight == 999) {
return '690px' return `calc((60vh - 150px) / 2 )`
} else if (props.parentHeight != 0) { } else if (props.parentHeight != 0) {
return '310px' return mainHeight(props.parentHeight, 2).height
}
if (props.flag == 1) {
return mainHeight(200).height
} else { } else {
return '350px' return mainHeight(200, 2).height
} }
}) })
const vw = computed(() => '100%') const vw = computed(() => '100%')
watch(() => props.value, (newVal) => { watch(
if (newVal == 2) { () => props.value,
initWaves() newVal => {
} else { if (newVal == 2) {
$('#wave1').remove() initWaves()
initWaves() } else {
$('#wave1').remove()
initWaves()
}
} }
}) )
onMounted(() => { onMounted(() => {
const zoomValue = document.body.style.getPropertyValue('zoom'); const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1); zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
// 初始化 Web Worker // 初始化 Web Worker
worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url)); worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url))
worker.value.onmessage = (e) => { worker.value.onmessage = e => {
if (e.data.success) { if (e.data.success) {
const data = e.data const data = e.data
titles.value = data.titles titles.value = data.titles
@@ -171,15 +176,15 @@ onBeforeUnmount(() => {
}) })
const handleResize = () => { const handleResize = () => {
const zoomValue = document.body.style.getPropertyValue('zoom'); const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1); zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
} }
const download = () => { const download = () => {
const boxr = document.getElementById('boxr') const boxr = document.getElementById('boxr')
if (boxr) { if (boxr) {
html2canvas(boxr, { html2canvas(boxr, {
scale: 2, scale: 2
}).then(function (canvas) { }).then(function (canvas) {
const creatIMg = document.createElement('a') const creatIMg = document.createElement('a')
creatIMg.download = 'rms波形.png' creatIMg.download = 'rms波形.png'
@@ -195,13 +200,14 @@ const query = () => {
if (props.wp) { if (props.wp) {
// 使用 Worker 处理数据 // 使用 Worker 处理数据
if (worker.value) { if (worker.value) {
worker.value.postMessage(
worker.value.postMessage(JSON.stringify({ JSON.stringify({
wp: props.wp, wp: props.wp,
isOpen: isOpen.value, isOpen: isOpen.value,
value: props.value, value: props.value,
boxoList: props.boxoList boxoList: props.boxoList
})) })
)
} }
} else { } else {
initWave(null, null, null, null, null) initWave(null, null, null, null, null)
@@ -240,7 +246,6 @@ const waveData = (
const initWaves = () => { const initWaves = () => {
if (props.wp) { if (props.wp) {
iphasic.value = props.wp.iphasic || 1 iphasic.value = props.wp.iphasic || 1
const picCounts = (props.wp.waveTitle.length - 1) / iphasic.value const picCounts = (props.wp.waveTitle.length - 1) / iphasic.value
waveDatas.value = [] waveDatas.value = []
@@ -266,15 +271,29 @@ const initWaves = () => {
} }
const fliteWaveData = (wp: any, step: number): WaveData => { const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsData = wp.listRmsData const rmsData = wp.listRmsData
const pt = Number(wp.pt) / 1000 const pt = Number(wp.pt) / 1000
const ct = Number(wp.ct) const ct = Number(wp.ct)
const titleList = wp.waveTitle const titleList = wp.waveTitle
let xishu = pt let xishu = pt
let aTitle = '', bTitle = '', cTitle = '', unit = '电压' let aTitle = '',
let rmsvFirstX = 0, rmsvFirstY = 0, rmsvSecondX = 0, rmsvSecondY = 0, firstZhou = 'a', secondeZhou = 'a' bTitle = '',
let ifmax = 0, ifmin = 0, ismax = 0, ismin = 0, rfmax = 0, rfmin = 0, rsmax = 0, rsmin = 0 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: number[][] = [] const shunshiFA: number[][] = []
const shunshiFB: number[][] = [] const shunshiFB: number[][] = []
@@ -289,7 +308,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsSB: number[][] = [] const rmsSB: number[][] = []
const rmsSC: number[][] = [] const rmsSC: number[][] = []
if (titleList[iphasic.value * step + 1]?.substring(0, 1) !== 'U') { if (titleList[iphasic.value * step + 1]?.substring(0, 1) !== 'U') {
xishu = ct xishu = ct
unit = '电流' unit = '电流'
@@ -309,8 +327,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
} }
} }
if (rmsData[0][iphasic.value * step + 1] !== undefined) { if (rmsData[0][iphasic.value * step + 1] !== undefined) {
rfmax = rmsData[0][iphasic.value * step + 1] * xishu rfmax = rmsData[0][iphasic.value * step + 1] * xishu
rfmin = rmsData[0][iphasic.value * step + 1] * xishu rfmin = rmsData[0][iphasic.value * step + 1] * xishu
@@ -322,8 +338,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
rmsvSecondX = rmsData[0][0] rmsvSecondX = rmsData[0][0]
} }
for (let rms = 0; rms < rmsData.length; rms++) { for (let rms = 0; rms < rmsData.length; rms++) {
if (rmsData[rms][iphasic.value * step + 1] === undefined) { if (rmsData[rms][iphasic.value * step + 1] === undefined) {
break break
@@ -388,12 +402,14 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsFirstA3 = rmsData[rms][iphasic.value * step + 1] * xishu const rmsFirstA3 = rmsData[rms][iphasic.value * step + 1] * xishu
const rmsFirstB3 = rmsData[rms][iphasic.value * step + 2] * xishu const rmsFirstB3 = rmsData[rms][iphasic.value * step + 2] * xishu
const rmsFirstC3 = rmsData[rms][iphasic.value * step + 3] * xishu const rmsFirstC3 = rmsData[rms][iphasic.value * step + 3] * xishu
rmsFA.push([rmsData[rms][0], rmsFirstA3]); rmsFA.push([rmsData[rms][0], rmsFirstA3])
rmsFB.push([rmsData[rms][0], rmsFirstB3]); rmsFB.push([rmsData[rms][0], rmsFirstB3])
rmsFC.push([rmsData[rms][0], rmsFirstC3]); rmsFC.push([rmsData[rms][0], rmsFirstC3])
rfmax = getMax(rfmax, rmsFirstA3, rmsFirstB3, rmsFirstC3) rfmax = getMax(rfmax, rmsFirstA3, rmsFirstB3, rmsFirstC3)
rfmin = isOpen.value ? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3) : getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3) rfmin = isOpen.value
? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3)
: getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3)
if (rfmin < rmsvFirstY) { if (rfmin < rmsvFirstY) {
rmsvFirstY = rfmin rmsvFirstY = rfmin
if (rfmin === rmsFirstA3) { if (rfmin === rmsFirstA3) {
@@ -413,7 +429,9 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
rmsSB.push([rmsData[rms][0], rmsSecondB3]) rmsSB.push([rmsData[rms][0], rmsSecondB3])
rmsSC.push([rmsData[rms][0], rmsSecondC3]) rmsSC.push([rmsData[rms][0], rmsSecondC3])
rsmax = getMax(rsmax, rmsSecondA3, rmsSecondB3, rmsSecondC3) rsmax = getMax(rsmax, rmsSecondA3, rmsSecondB3, rmsSecondC3)
rsmin = isOpen.value ? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3) : getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3) rsmin = isOpen.value
? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3)
: getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3)
if (rsmin < rmsvSecondY) { if (rsmin < rmsvSecondY) {
rmsvSecondY = rsmin rmsvSecondY = rsmin
if (rsmin === rmsSecondA3) { if (rsmin === rmsSecondA3) {
@@ -429,7 +447,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
} }
} }
const instantF = { max: ifmax, min: ifmin } const instantF = { max: ifmax, min: ifmin }
const instantS = { max: ismax, min: ismin } const instantS = { max: ismax, min: ismin }
const RMSF = { max: rfmax, min: rfmin } const RMSF = { max: rfmax, min: rfmin }
@@ -442,11 +459,29 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const RMSSWave = { rmsSA, rmsSB, rmsSC } const RMSSWave = { rmsSA, rmsSB, rmsSC }
const title = { aTitle, bTitle, cTitle, unit } const title = { aTitle, bTitle, cTitle, unit }
return waveData(instantF, instantS, RMSF, RMSS, RMSFMinDetail, RMSSMinDetail, shunshiF, shunshiS, RMSFWave, RMSSWave, title, unit) return waveData(
instantF,
instantS,
RMSF,
RMSS,
RMSFMinDetail,
RMSSMinDetail,
shunshiF,
shunshiS,
RMSFWave,
RMSSWave,
title,
unit
)
} }
const initWave = (waveDatas: WaveData[] | null, time: string | null, type: string | null, severity: string | null, isOpen: boolean | null) => { const initWave = (
waveDatas: WaveData[] | null,
time: string | null,
type: string | null,
severity: string | null,
isOpen: boolean | null
) => {
$('div.bx').remove() $('div.bx').remove()
let picHeight = vh.value let picHeight = vh.value
@@ -456,9 +491,15 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let rmscm: number[][] = [] let rmscm: number[][] = []
let titleText = '' let titleText = ''
let unit = '' let unit = ''
let a: string | null = null, b: string | null = null, c: string | null = null let a: string | null = null,
let radata: number[][] = [], rbdata: number[][] = [], rcdata: number[][] = [] b: string | null = null,
let rmsvX: any = 0, rmsvY: any = 0, zhou = '' c: string | null = null
let radata: number[][] = [],
rbdata: number[][] = [],
rcdata: number[][] = []
let rmsvX: any = 0,
rmsvY: any = 0,
zhou = ''
if (!waveDatas) { if (!waveDatas) {
titleText = '该事件暂无波形图' titleText = '该事件暂无波形图'
@@ -543,10 +584,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
] ]
unit = 'kV' unit = 'kV'
} else { } else {
fz.value = [ fz.value = [props.wp.listRmsMinData[0][0], props.wp.listRmsMinData[0][1]]
props.wp.listRmsMinData[0][0],
props.wp.listRmsMinData[0][1]
]
unit = 'V' unit = 'V'
} }
} else { } else {
@@ -555,18 +593,40 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) { for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
const rmsId = 'rms' + step const rmsId = 'rms' + step
const newDivRms = $(`<div style="height:${vh.value};overflow: hidden;"><div class='bx' id='${rmsId}'></div></div>`) const newDivRms = $(
`<div style="height:${vh.value};overflow: hidden;"><div class='bx' id='${rmsId}'></div></div>`
)
newDivRms.insertAfter($('#rmsp')) newDivRms.insertAfter($('#rmsp'))
$(`#${rmsId}`).css('height', picHeight).css('width', vw.value) $(`#${rmsId}`).css('height', picHeight).css('width', vw.value)
} }
} else { } else {
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 残余电压:${(Number(eventValue.value) * 1).toFixed(0)}% 持续时间:${persistTime.value}s` titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降(骤升)幅值:${(
Number(eventValue.value) * 1
).toFixed(0)}% 持续时间:${persistTime.value}s`
} }
const rms = document.getElementById('rmsp') const rms = document.getElementById('rmsp')
if (!rms) return if (!rms) return
const myChartes = echarts.init(rms) const myChartes = echarts.init(rms)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
setTimeout(() => { setTimeout(() => {
rms.style.width = '100%' rms.style.width = '100%'
@@ -582,7 +642,12 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let tips = '时刻:' + params[0].data[0] + '</br/>' let tips = '时刻:' + params[0].data[0] + '</br/>'
for (let i = 0; i < params.length; i++) { for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') { if (params[i].seriesName != '暂降触发点') {
tips += params[i].marker + params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>' tips +=
params[i].marker +
params[i].seriesName +
':' +
(params[i].value[1] - 0).toFixed(2) +
'<br/>'
} }
} }
return tips return tips
@@ -604,8 +669,8 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
align: 'left' align: 'left'
}, },
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '16px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -615,8 +680,8 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.7rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -641,13 +706,13 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
}, },
nameTextStyle: { fontSize: '0.6rem' }, nameTextStyle: { fontSize: '12px' },
labels: { labels: {
formatter: function () { formatter: function () {
return this.value return this.value
@@ -657,13 +722,13 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) { if (valA.value != (value - 0).toFixed(0)) {
valA.value = Number((value - 0).toFixed(0)) valA.value = Number((value - 0).toFixed(0))
@@ -684,31 +749,31 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
y: -10 y: -10
}, },
max: rmscm[0]?.[1] * 1.06 || 0, max: rmscm[0]?.[1] * 1.06 || 0,
min: rmscu[0]?.[1] - (rmscu[0]?.[1] * 0.04) || 0, min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.04 || 0,
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
showLastLabel: true, showLastLabel: true,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -718,7 +783,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
left: '1%', left: '1%',
right: '45px', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [
@@ -772,7 +837,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
data: rmscu data: rmscu
}, },
{ {
name: '最小残余电压', name: '最小暂降(骤升)幅值',
type: 'scatter', type: 'scatter',
symbol: 'image://' + url2, symbol: 'image://' + url2,
itemStyle: { width: 45, height: 45 }, itemStyle: { width: 45, height: 45 },
@@ -780,7 +845,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
show: true, show: true,
position: [5, -20], position: [5, -20],
color: '#000', color: '#000',
fontSize: '14px', fontSize: '12px',
fontWeight: 'bold', fontWeight: 'bold',
borderType: 'solid', borderType: 'solid',
borderWidth: 0.5, borderWidth: 0.5,
@@ -792,7 +857,6 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
] ]
} }
myChartes.setOption(option) myChartes.setOption(option)
myChartess.value = myChartes myChartess.value = myChartes
@@ -809,12 +873,25 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
} }
} }
const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show: boolean, myChartes1: echarts.ECharts, rmscm: number[][], rmscu: number[][], title: string) => { const drawPics = (
waveDataTemp: WaveData,
picHeight: string,
step: number,
show: boolean,
myChartes1: echarts.ECharts,
rmscm: number[][],
rmscu: number[][],
title: string
) => {
step = step + 1 step = step + 1
const rmsId = 'rms' + step const rmsId = 'rms' + step
let a = '', b = '', c = '' let a = '',
b = '',
c = ''
let unit = '' let unit = ''
let radata: number[][] = [], rbdata: number[][] = [], rcdata: number[][] = [] let radata: number[][] = [],
rbdata: number[][] = [],
rcdata: number[][] = []
switch (iphasic.value) { switch (iphasic.value) {
case 1: case 1:
@@ -877,7 +954,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!rmsIds) return if (!rmsIds) return
const myChartes = echarts.init(rmsIds) const myChartes = echarts.init(rmsIds)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
const option = { const option = {
tooltip: { tooltip: {
@@ -888,7 +983,12 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
let tips = '时刻:' + params[0].data[0] + '</br/>' let tips = '时刻:' + params[0].data[0] + '</br/>'
for (let i = 0; i < params.length; i++) { for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') { if (params[i].seriesName != '暂降触发点') {
tips += params[i].marker + params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>' tips +=
params[i].marker +
params[i].seriesName +
':' +
(params[i].value[1] - 0).toFixed(2) +
'<br/>'
} }
} }
return tips return tips
@@ -904,10 +1004,10 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
}, },
title: { title: {
left: 'center', left: 'center',
text: '',//titlename || title, text: '', //titlename || title,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '16px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -917,8 +1017,8 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.7rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -932,8 +1032,8 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -943,18 +1043,18 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
return this.value return this.value
} }
}, },
nameTextStyle: { fontSize: '0.6rem' }, nameTextStyle: { fontSize: '12px' },
splitLine: { show: false }, splitLine: { show: false },
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) { if (valB.value != (value - 0).toFixed(0)) {
valB.value = Number((value - 0).toFixed(0)) valB.value = Number((value - 0).toFixed(0))
@@ -978,26 +1078,26 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
showLastLabel: true, showLastLabel: true,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -1007,7 +1107,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
left: '1%', left: '1%',
right: '45px', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [
@@ -1059,11 +1159,21 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
myChartes.setOption(option) myChartes.setOption(option)
switch (step) { switch (step) {
case 1: myChartess1.value = myChartes; break case 1:
case 2: myChartess2.value = myChartes; break myChartess1.value = myChartes
case 3: myChartess3.value = myChartes; break break
case 4: myChartess4.value = myChartes; break case 2:
case 5: myChartess5.value = myChartes; break myChartess2.value = myChartes
break
case 3:
myChartess3.value = myChartes
break
case 4:
myChartess4.value = myChartes
break
case 5:
myChartess5.value = myChartes
break
} }
setTimeout(() => { setTimeout(() => {
@@ -1076,7 +1186,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
const backbxlb = () => { const backbxlb = () => {
waveDatas.value = [] waveDatas.value = []
const charts = [myChartess.value, myChartess1.value, myChartess2.value, myChartess3.value, myChartess4.value, myChartess5.value] const charts = [
myChartess.value,
myChartess1.value,
myChartess2.value,
myChartess3.value,
myChartess4.value,
myChartess5.value
]
charts.forEach(chart => { charts.forEach(chart => {
if (chart) { if (chart) {
@@ -1092,13 +1209,11 @@ const backbxlb = () => {
myChartess5.value = null myChartess5.value = null
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[]) // echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
charts charts.filter(Boolean).forEach(chart => {
.filter(Boolean) if (chart && typeof chart.dispose === 'function') {
.forEach(chart => { chart.dispose()
if (chart && typeof chart.dispose === 'function') { }
chart.dispose(); })
}
});
} }
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => { const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
@@ -1126,4 +1241,4 @@ const getMinOpen = (temp: number, tempA: number, tempB: number): number => {
temp = temp < tempB ? temp : tempB temp = temp < tempB ? temp : tempB
return temp return temp
} }
</script> </script>

View File

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

View File

@@ -1,7 +1,6 @@
<template> <template>
<div v-loading="loading" :element-loading-background="'rgba(122, 122, 122, 0.8)'" class="boxbx" <div v-loading="loading" class="boxbx" style="position: relative; height: 100%">
style="position: relative;height: 100%;"> <div id="boxsj">
<div id="boxsj" style="background: #343849c7">
<div id="shushi" :style="`height:${vh};overflow: hidden;`"> <div id="shushi" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="wave"></div> <div class="bx" id="wave"></div>
</div> </div>
@@ -14,9 +13,10 @@ import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import $ from 'jquery' import $ from 'jquery'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
import url from '@/assets/img/point.png' import url from '@/assets/img/point.png'
// 创建Worker // 创建Worker
let waveDataWorker: Worker | null = null; let waveDataWorker: Worker | null = null
interface WaveData { interface WaveData {
instantF: { max: number; min: number } instantF: { max: number; min: number }
instantS: { max: number; min: number } instantS: { max: number; min: number }
@@ -42,7 +42,7 @@ interface WaveData {
interface Props { interface Props {
value?: number value?: number
flag?: string | number | boolean flag?: string | number | boolean
parentHeight?: string | number | boolean parentHeight?: any
DColor?: boolean DColor?: boolean
boxoList?: any boxoList?: any
wp?: any wp?: any
@@ -87,29 +87,44 @@ const myChartess4 = ref<echarts.ECharts | null>(null)
const myChartess5 = ref<echarts.ECharts | null>(null) const myChartess5 = ref<echarts.ECharts | null>(null)
const vh = computed(() => { const vh = computed(() => {
if (props.flag == 1) { if (props.parentHeight == 999) {
return '690px' return `calc((60vh - 150px) / 2 )`
} else if (props.parentHeight != 0) { } else if (props.parentHeight != 0) {
return '310px' return mainHeight(props.parentHeight, 2).height
} else {
return '350px'
} }
if (props.flag == 1) {
return mainHeight(200).height
} else {
return mainHeight(200, 2).height
}
// if (props.flag == 1) {
// return '690px'
// } else if (props.parentHeight != 0) {
// return '310px'
// } else {
// return '350px'
// }
}) })
const vw = computed(() => '100%') const vw = computed(() => '100%')
watch(() => props.value, (newVal) => { watch(
if (newVal == 2) { () => props.value,
initWaves() newVal => {
} else { if (newVal == 2) {
$('#wave1').remove() initWaves()
initWaves() } else {
$('#wave1').remove()
initWaves()
}
} }
}) )
onMounted(() => { onMounted(() => {
const zoomValue = document.body.style.getPropertyValue('zoom'); const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1); zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
nextTick(() => { nextTick(() => {
@@ -120,27 +135,27 @@ onMounted(() => {
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
console.log('组件卸载'); console.log('组件卸载')
if (waveDataWorker) { if (waveDataWorker) {
waveDataWorker.terminate(); waveDataWorker.terminate()
waveDataWorker = null; waveDataWorker = null
} }
backbxlb(); backbxlb()
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize)
}) })
const handleResize = () => { const handleResize = () => {
const zoomValue = document.body.style.getPropertyValue('zoom'); const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1); zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
} }
const download = () => { const download = () => {
const boxsj = document.getElementById('boxsj') const boxsj = document.getElementById('boxsj')
if (boxsj) { if (boxsj) {
html2canvas(boxsj, { html2canvas(boxsj, {
scale: 2, scale: 2
}).then(function (canvas) { }).then(function (canvas) {
const creatIMg = document.createElement('a') const creatIMg = document.createElement('a')
creatIMg.download = '瞬间波形.png' creatIMg.download = '瞬间波形.png'
@@ -170,49 +185,56 @@ const waveData = (instantF: any, instantS: any, shunshiF: any, shunshiS: any, ti
// 在组件中修改initWaves函数 // 在组件中修改initWaves函数
const initWaves = () => { const initWaves = () => {
if (props.wp) { if (props.wp) {
loading.value = true; loading.value = true
iphasic.value = props.wp.iphasic || 1 iphasic.value = props.wp.iphasic || 1
// 使用Web Worker处理数据 // 使用Web Worker处理数据
if (!waveDataWorker) { if (!waveDataWorker) {
waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url)); waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url))
waveDataWorker.onmessage = function (e) { waveDataWorker.onmessage = function (e) {
const data = e.data; const data = e.data
titles.value = data.titles; titles.value = data.titles
iphasic.value = data.iphasic; iphasic.value = data.iphasic
time.value = data.time; time.value = data.time
type.value = data.type; type.value = data.type
severity.value = data.severity; severity.value = data.severity
initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value); initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
loading.value = false; loading.value = false
}; }
waveDataWorker.onerror = function (error) { waveDataWorker.onerror = function (error) {
console.error('Worker error:', error); console.error('Worker error:', error)
loading.value = false; loading.value = false
// 备用方案:在主线程处理数据 // 备用方案:在主线程处理数据
// processDataInMainThread(); // processDataInMainThread();
}; }
} }
// 发送数据到Worker // 发送数据到Worker
waveDataWorker.postMessage(JSON.stringify({ waveDataWorker.postMessage(
wp: props.wp, JSON.stringify({
value: props.value, wp: props.wp,
iphasic: iphasic.value, value: props.value,
isOpen: isOpen.value, iphasic: iphasic.value,
boxoList: props.boxoList isOpen: isOpen.value,
})); boxoList: props.boxoList
})
)
} else { } else {
initWave(null, null, null, null, null); initWave(null, null, null, null, null)
} }
} }
const initWave = (
const initWave = (waveDatas: WaveData[] | null, time: string | null, type: string | null, severity: string | null, isOpen: boolean | null) => { waveDatas: WaveData[] | null,
time: string | null,
type: string | null,
severity: string | null,
isOpen: boolean | null
) => {
$('div.bx1').remove() $('div.bx1').remove()
let picHeight = vh.value let picHeight = vh.value
@@ -221,9 +243,14 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let cu: number[][] = [] let cu: number[][] = []
let titleText = '' let titleText = ''
let unit = '' let unit = ''
let max: any = 0, min: any = 0 let max: any = 0,
let a: string | null = null, b: string | null = null, c: string | null = null min: any = 0
let adata: number[][] = [], bdata: number[][] = [], cdata: number[][] = [] let a: string | null = null,
b: string | null = null,
c: string | null = null
let adata: number[][] = [],
bdata: number[][] = [],
cdata: number[][] = []
const colors: string[] = [] const colors: string[] = []
if (!waveDatas) { if (!waveDatas) {
@@ -249,7 +276,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
min = waveDatas[0].instantS.min min = waveDatas[0].instantS.min
adata = waveDatas[0].shunshiS.shunshiSA adata = waveDatas[0].shunshiS.shunshiSA
} }
colors.push('#DAA520', '#fff', '#fff') colors.push('#DAA520', '#000', '#000')
break break
case 2: case 2:
a = waveDatas[0].title.aTitle a = waveDatas[0].title.aTitle
@@ -267,7 +294,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
adata = waveDatas[0].shunshiS.shunshiSA adata = waveDatas[0].shunshiS.shunshiSA
bdata = waveDatas[0].shunshiS.shunshiSB bdata = waveDatas[0].shunshiS.shunshiSB
} }
colors.push('#DAA520', '#2E8B57', '#fff') colors.push('#DAA520', '#2E8B57', '#000')
break break
case 3: case 3:
a = waveDatas[0].title.aTitle a = waveDatas[0].title.aTitle
@@ -307,14 +334,34 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
$(`#${waveId}`).css('height', picHeight).css('width', vw.value) $(`#${waveId}`).css('height', picHeight).css('width', vw.value)
} }
} else { } else {
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 残余电压:${(Number(eventValue.value) * 1).toFixed(0)}% 持续时间:${persistTime.value}s` titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降(骤升)幅值:${(
Number(eventValue.value) * 1
).toFixed(0)}% 持续时间:${persistTime.value}s`
} }
const wave = document.getElementById('wave') const wave = document.getElementById('wave')
if (!wave) return if (!wave) return
const myChartes = echarts.init(wave) const myChartes = echarts.init(wave)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
setTimeout(() => { setTimeout(() => {
wave.style.width = '100%' wave.style.width = '100%'
@@ -335,7 +382,12 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let tips = '时刻:' + params[0].data[0] + '</br/>' let tips = '时刻:' + params[0].data[0] + '</br/>'
for (let i = 0; i < params.length; i++) { for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') { if (params[i].seriesName != '暂降触发点') {
tips += params[i].marker + params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>' tips +=
params[i].marker +
params[i].seriesName +
':' +
(params[i].value[1] - 0).toFixed(2) +
'<br/>'
} }
} }
return tips return tips
@@ -345,7 +397,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
fontStyle: 'normal', fontStyle: 'normal',
opacity: 0.35, opacity: 0.35,
fontSize: 14 fontSize: 14
}, },
backgroundColor: 'rgba(0,0,0,0.55)', backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0 borderWidth: 0
}, },
@@ -353,8 +405,8 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
left: 'center', left: 'center',
text: titleText, text: titleText,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '16px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -364,8 +416,8 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: 12,
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -390,24 +442,24 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
}, },
splitLine: { show: false }, splitLine: { show: false },
nameTextStyle: { fontSize: '0.6rem' }, nameTextStyle: { fontSize: '12px' },
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) { if (valA.value != (value - 0).toFixed(0)) {
valA.value = Number((value - 0).toFixed(0)) valA.value = Number((value - 0).toFixed(0))
@@ -433,26 +485,26 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1, min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -460,9 +512,9 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
}, },
grid: { grid: {
left: '1%', left: '1%',
right: '2.8%', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [
@@ -537,23 +589,36 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
} }
} }
const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show: boolean, myChartes1: echarts.ECharts, title: string) => { const drawPics = (
waveDataTemp: WaveData,
picHeight: string,
step: number,
show: boolean,
myChartes1: echarts.ECharts,
title: string
) => {
step = step + 1 step = step + 1
const waveId = 'wave' + step const waveId = 'wave' + step
let a: string | null = null, b: string | null = null, c: string | null = null let a: string | null = null,
let max: any = 0, min: any = 0, unit = '' b: string | null = null,
let adata: number[][] = [], bdata: number[][] = [], cdata: number[][] = [] c: string | null = null
let max: any = 0,
min: any = 0,
unit = ''
let adata: number[][] = [],
bdata: number[][] = [],
cdata: number[][] = []
const colors: string[] = [] const colors: string[] = []
switch (iphasic.value) { switch (iphasic.value) {
case 1: case 1:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
colors.push('#DAA520', '#fff', '#fff') colors.push('#DAA520', '#000', '#000')
break break
case 2: case 2:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
b = waveDataTemp.title.bTitle b = waveDataTemp.title.bTitle
colors.push('#DAA520', '#2E8B57', '#fff') colors.push('#DAA520', '#2E8B57', '#000')
break break
case 3: case 3:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
@@ -612,7 +677,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!waveIds) return if (!waveIds) return
const myChartes = echarts.init(waveIds) const myChartes = echarts.init(waveIds)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
const option = { const option = {
tooltip: { tooltip: {
@@ -638,10 +721,10 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
}, },
title: { title: {
left: 'center', left: 'center',
text: '',//titlename || title, text: '', //titlename || title,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '16px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -651,8 +734,8 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: 12,
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -666,8 +749,8 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -676,14 +759,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
nameTextStyle: { fontSize: '0.6rem' }, nameTextStyle: { fontSize: '12px' },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) { if (valB.value != (value - 0).toFixed(0)) {
valB.value = Number((value - 0).toFixed(0)) valB.value = Number((value - 0).toFixed(0))
@@ -709,26 +792,26 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1, min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '12px',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -736,9 +819,9 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
}, },
grid: { grid: {
left: '1%', left: '1%',
right: '2.8%', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [
@@ -793,11 +876,21 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
myChartes.setOption(option) myChartes.setOption(option)
switch (step) { switch (step) {
case 1: myChartess1.value = myChartes; break case 1:
case 2: myChartess2.value = myChartes; break myChartess1.value = myChartes
case 3: myChartess3.value = myChartes; break break
case 4: myChartess4.value = myChartes; break case 2:
case 5: myChartess5.value = myChartes; break myChartess2.value = myChartes
break
case 3:
myChartess3.value = myChartes
break
case 4:
myChartess4.value = myChartes
break
case 5:
myChartess5.value = myChartes
break
} }
setTimeout(() => { setTimeout(() => {
@@ -810,7 +903,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
const backbxlb = () => { const backbxlb = () => {
waveDatas.value = [] waveDatas.value = []
const charts = [myChartess.value, myChartess1.value, myChartess2.value, myChartess3.value, myChartess4.value, myChartess5.value] const charts = [
myChartess.value,
myChartess1.value,
myChartess2.value,
myChartess3.value,
myChartess4.value,
myChartess5.value
]
charts.forEach(chart => { charts.forEach(chart => {
if (chart) { if (chart) {
@@ -826,13 +926,11 @@ const backbxlb = () => {
myChartess5.value = null myChartess5.value = null
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[]) // echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
charts charts.filter(Boolean).forEach(chart => {
.filter(Boolean) if (chart && typeof chart.dispose === 'function') {
.forEach(chart => { chart.dispose()
if (chart && typeof chart.dispose === 'function') { }
chart.dispose(); })
}
});
} }
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => { const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
@@ -860,4 +958,4 @@ const getMinOpen = (temp: number, tempA: number, tempB: number): number => {
temp = temp < tempB ? temp : tempB temp = temp < tempB ? temp : tempB
return temp return temp
} }
</script> </script>

View File

@@ -5,7 +5,7 @@
style="min-width: 90px; width: 90px; margin-right: 10px" style="min-width: 90px; width: 90px; margin-right: 10px"
@change="timeChange" @change="timeChange"
> >
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in filteredTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-date-picker <el-date-picker
v-model.trim="timeValue" v-model.trim="timeValue"
@@ -20,6 +20,7 @@
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:shortcuts="shortcuts" :shortcuts="shortcuts"
/> />
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button> <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button> <el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button> <el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
@@ -35,13 +36,15 @@ interface Props {
theCurrentTime?: boolean theCurrentTime?: boolean
initialInterval?: number initialInterval?: number
initialTimeValue?: any initialTimeValue?: any
timeKeyList?: string[] //日期下拉
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
nextFlag: false, nextFlag: false,
theCurrentTime: true, theCurrentTime: true,
initialInterval: 3, initialInterval: 3,
initialTimeValue: undefined initialTimeValue: undefined,
timeKeyList: () => []
}) })
const emit = defineEmits(['change']) const emit = defineEmits(['change'])
@@ -89,6 +92,16 @@ const shortcuts = [
} }
} }
] ]
// 计算过滤后的 timeOptions
const filteredTimeOptions = computed(() => {
if (!props.timeKeyList || props.timeKeyList.length === 0) {
return timeOptions.value
}
return timeOptions.value.filter((option: any) => props.timeKeyList.includes(option.value.toString()))
})
onMounted(() => { onMounted(() => {
// 使用传入的初始值 // 使用传入的初始值
if (props.initialInterval !== undefined) { if (props.initialInterval !== undefined) {
@@ -113,9 +126,13 @@ const checkInitialButtonStatus = () => {
const endTime = timeValue.value[1] const endTime = timeValue.value[1]
const currentDate = window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd') const currentDate = window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
// 如果结束时间小于当前日期,则不禁用"下一个"按钮 // 只有当 props.nextFlag 为 false 时才应用限制
if (new Date(endTime + ' 00:00:00').getTime() < new Date(currentDate + ' 00:00:00').getTime()) { if (!props.nextFlag) {
preDisabled.value = false // 如果结束时间早于当前日期则按钮可用preDisabled = false
// 如果结束时间晚于或等于当前日期则按钮禁用preDisabled = true
const endDateTime = new Date(endTime).getTime()
const currentDateTime = new Date(currentDate).getTime()
preDisabled.value = endDateTime >= currentDateTime
} }
} }
} }
@@ -164,30 +181,15 @@ const timeChange = (e: number) => {
timeFlag.value = 1 timeFlag.value = 1
} }
// 检查按钮状态 nextTick(() => {
checkButtonStatus() // 检查按钮状态
checkInitialButtonStatus()
})
// 触发 change 事件 // 触发 change 事件
emitChange() emitChange()
} }
// 添加按钮状态检查方法
const checkButtonStatus = () => {
if (timeValue.value && timeValue.value.length >= 2) {
const endTime = timeValue.value[1]
const currentDate = window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
// 如果结束时间大于等于当前日期,且 nextFlag 为 false则禁用"下一个"按钮
if (!props.nextFlag) {
if (new Date(endTime + ' 00:00:00').getTime() >= new Date(currentDate + ' 00:00:00').getTime()) {
preDisabled.value = true
} else {
preDisabled.value = false
}
}
}
}
// 当前 // 当前
const nowTime = () => { const nowTime = () => {
// console.log(interval.value, '000000000') // console.log(interval.value, '000000000')

View File

@@ -15,6 +15,7 @@
:nextFlag="nextFlag" :nextFlag="nextFlag"
:theCurrentTime="theCurrentTime" :theCurrentTime="theCurrentTime"
@change="handleDatePickerChange" @change="handleDatePickerChange"
:timeKeyList="props.timeKeyList"
></DatePicker> ></DatePicker>
</el-form-item> </el-form-item>
@@ -88,6 +89,8 @@ interface Props {
theCurrentTime?: boolean //控制时间前3天展示上个月时间 theCurrentTime?: boolean //控制时间前3天展示上个月时间
showReset?: boolean //是否显示重置 showReset?: boolean //是否显示重置
showExport?: boolean //导出控制 showExport?: boolean //导出控制
timeCacheFlag?: boolean //是否取缓存时间
timeKeyList?: string[] //日期下拉列表
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@@ -97,7 +100,9 @@ const props = withDefaults(defineProps<Props>(), {
nextFlag: false, nextFlag: false,
theCurrentTime: true, theCurrentTime: true,
showReset: true, showReset: true,
showExport: false showExport: false,
timeCacheFlag: true,
timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
}) })
// 处理 DatePicker 值变化事件 // 处理 DatePicker 值变化事件
@@ -134,7 +139,7 @@ onMounted(() => {
if (props.datePicker && datePickerRef.value) { if (props.datePicker && datePickerRef.value) {
// 从缓存中获取值并设置 // 从缓存中获取值并设置
const cached = timeCacheStore.getCache(route.path) const cached = timeCacheStore.getCache(route.path)
if (cached) { if (props.timeCacheFlag && cached) {
if (cached.interval !== undefined) { if (cached.interval !== undefined) {
datePickerRef.value.setInterval(cached.interval) datePickerRef.value.setInterval(cached.interval)
} }

View File

@@ -0,0 +1,187 @@
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
<div class="mt15 mr10" style="display: flex; justify-content: end">
<el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
</div>
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
<template #content>
<span>台账推送</span>
</template>
<Icon
name="el-icon-Promotion"
size="20"
class="fold ml10 menu-collapse"
style="cursor: pointer"
:style="{ color: config.getColorVal('elementUiPrimary') }"
@click="onAdd"
/>
</el-tooltip>
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' /> -->
</div>
<el-tree
:style="{ height: 'calc(100vh - 235px)' }"
style="overflow: auto"
ref="treeRef"
:props="defaultProps"
highlight-current
:default-expand-all="false"
@check-change="checkTreeNodeChange"
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process'
import { ref, watch } from 'vue'
import { t } from 'vxe-table'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'govern/tree'
})
interface Props {
width?: string
canExpand?: boolean
showPush?: boolean
}
const loading = ref(false)
const props = withDefaults(defineProps<Props>(), {
width: '280px',
canExpand: true,
showPush: false
})
const config = useConfig()
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = {
label: 'name',
value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
watch(filterText, val => {
treeRef.value!.filter(val)
})
const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const save = () => {
loading.value = true
emit('checkChange')
}
const filterNode = (value: string, data: any, node: any) => {
console.log(value, data, node, 'filterNode')
if (!value) return true
// return data.name.includes(value)
if (data.name) {
return chooseNode(value, data, node)
}
}
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配则返回该节点以及其下的所有子节点如果参数是子节点则返回该节点的父节点。name是中文字符enName是英文字符.
const chooseNode = (value: string, data: any, node: any) => {
if (data.name.indexOf(value) !== -1) {
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回此处name值是中文字符enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.indexOf(value) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
}
const checkTreeNodeChange = () => {
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
}
const onAdd = () => {
emit('onAdd')
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef, loading })
</script>
<style lang="scss" scoped>
.cn-tree {
flex-shrink: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
height: 100%;
width: 100%;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7);
}
.menu-collapse {
color: var(--el-color-primary);
}
}
.custom-tree-node {
display: flex;
align-items: center;
}
</style>

View File

@@ -14,7 +14,7 @@
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse' :class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' /> --> style='cursor: pointer' v-if='props.canExpand' /> -->
</div> </div>
<el-tree :style="{ height: 'calc(100vh - 110px)' }" <el-tree :style="{ height: 'calc(100vh - 230px)' }"
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false" style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'> @check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
<template #default='{ node, data }'> <template #default='{ node, data }'>
@@ -32,7 +32,6 @@
<script lang='ts' setup> <script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance' import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus' import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
defineOptions({ defineOptions({

View File

@@ -1,27 +1,48 @@
<!-- 设备管理使用折叠面板渲染多个tree --> <!-- 设备管理使用折叠面板渲染多个tree -->
<template> <template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden"> <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" <Icon
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" v-show="menuCollapse"
style="cursor: pointer" /> @click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }"> <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10"> <div style="display: flex; align-items: center" class="mb10">
<!-- <el-form-item> --> <!-- <el-form-item> -->
<el-input maxlength="32" show-word-limit v-model.trim="filterText" autocomplete="off" <el-input
placeholder="请输入内容" clearable> maxlength="32"
show-word-limit
v-model.trim="filterText"
autocomplete="off"
placeholder="请输入内容"
clearable
>
<template #prefix> <template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" /> <Icon name="el-icon-Search" style="font-size: 16px" />
</template> </template>
</el-input> </el-input>
<!-- </el-form-item> --> <!-- </el-form-item> -->
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" <Icon
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse" @click="onMenuCollapse"
style="cursor: pointer" v-if="props.canExpand" /> :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="props.canExpand"
/>
</div> </div>
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%" <el-collapse
@change="changeDevice"> :accordion="true"
v-model.trim="activeName"
style="flex: 1; height: 100%"
@change="changeDevice"
>
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0"> <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10"> <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2"></el-option> <el-option label="功能调试" value="2"></el-option>
@@ -29,13 +50,30 @@
<el-option label="正式投运" value="4"></el-option> <el-option label="正式投运" value="4"></el-option>
</el-select> </el-select>
<el-tree <el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }" :style="{
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode" height:
node-key="id" :default-expand-all="false" v-bind="$attrs" :data="zlDevList" style="overflow: auto"> bxsDeviceData.length != 0
? `calc(100vh - 380px - ${props.height}px)`
: 'calc(100vh - 278px)'
}"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
:default-expand-all="false"
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -43,14 +81,30 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0"> <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree <el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }" :style="{
ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false" height:
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs" zlDeviceData.length != 0
style="overflow: auto"> ? `calc(100vh - 340px - ${props.height}px)`
: 'calc(100vh - 238px)'
}"
ref="treeRef2"
:props="defaultProps"
highlight-current
:default-expand-all="false"
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -58,14 +112,30 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="在线设备" name="2" v-if="frontDeviceData.length != 0"> <el-collapse-item title="在线设备" name="2" v-if="frontDeviceData.length != 0">
<el-tree <el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }" :style="{
ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false" height:
:filter-node-method="filterNode" node-key="id" :data="frontDeviceData" v-bind="$attrs" zlDeviceData.length != 0
style="overflow: auto"> ? `calc(100vh - 340px - ${props.height}px)`
: 'calc(100vh - 238px)'
}"
ref="treeRef3"
:props="defaultProps"
highlight-current
:default-expand-all="false"
:filter-node-method="filterNode"
node-key="id"
:data="frontDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -90,13 +160,15 @@ interface Props {
canExpand?: boolean canExpand?: boolean
type?: string type?: string
data?: any data?: any
height?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
width: '280px', width: '280px',
canExpand: true, canExpand: true,
type: '', type: '',
data: [] data: [],
height: 0
}) })
const { proxy } = useCurrentInstance() const { proxy } = useCurrentInstance()
const menuCollapse = ref(false) const menuCollapse = ref(false)
@@ -124,19 +196,18 @@ watch(
item.children.map((vv: any) => { item.children.map((vv: any) => {
zlDeviceData.value.push(vv) zlDeviceData.value.push(vv)
}) })
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value)) zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else if (item.name == '便携式设备') { } else if (item.name == '便携式设备') {
bxsDeviceData.value = [] bxsDeviceData.value = []
item.children.map((vv: any) => { item.children.map((vv: any) => {
bxsDeviceData.value.push(vv) bxsDeviceData.value.push(vv)
}) })
}else if (item.name == '在线设备') { } else if (item.name == '在线设备') {
frontDeviceData.value = [] frontDeviceData.value = []
item.children.map((vv: any) => { item.children.map((vv: any) => {
frontDeviceData.value.push(vv) frontDeviceData.value.push(vv)
}) })
} }
}) })
} }
@@ -157,8 +228,9 @@ watch(filterText, val => {
} }
}) })
watch(process, val => { watch(process, val => {
if (val == '') { if (val == '' || val == undefined) {
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value)) zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
console.log('🚀 ~ zlDevList.value:', zlDeviceData.value)
} else { } else {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value))) zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
} }
@@ -176,7 +248,7 @@ function filterProcess(nodes: any) {
const children = node.children ? filterProcess(node.children) : [] const children = node.children ? filterProcess(node.children) : []
// 如果当前节点的process=4或者有子节点满足条件则保留当前节点 // 如果当前节点的process=4或者有子节点满足条件则保留当前节点
if ( node.process == process.value || children.length > 0) { if (node.process == process.value || children.length > 0) {
return { return {
...node, ...node,
children: children children: children
@@ -283,7 +355,7 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
const treeRef2 = ref<InstanceType<typeof ElTree>>() const treeRef2 = ref<InstanceType<typeof ElTree>>()
//前置 //前置
const treeRef3 = ref<InstanceType<typeof ElTree>>() const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 }) defineExpose({ treeRef1, treeRef2, treeRef3 })
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
if (zlDeviceData.value.length != 0) { if (zlDeviceData.value.length != 0) {
@@ -293,6 +365,9 @@ onMounted(() => {
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) { if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
activeName.value = '1' activeName.value = '1'
} }
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
activeName.value = '2'
}
if (!zlDeviceData.value && !bxsDeviceData.value) { if (!zlDeviceData.value && !bxsDeviceData.value) {
activeName.value = '' activeName.value = ''
} }

View File

@@ -1,5 +1,5 @@
<template> <template>
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/> <Tree ref="treRef" :width="width" :showPush="props.showPush" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -12,9 +12,11 @@ import { useDictData } from '@/stores/dictData'
interface Props { interface Props {
template?: boolean template?: boolean
showPush?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
template: false template: false,
showPush: false
}) })
defineOptions({ defineOptions({
name: 'govern/deviceTree' name: 'govern/deviceTree'
@@ -95,13 +97,16 @@ const info = (selectedNodeId?: string) => {
tree.value = [] tree.value = []
} }
nextTick(() => { nextTick(() => {
if (arr1.length) { if (arr1.length) {
// 安全检查 treRef 和 treeRef1 是否存在 // 安全检查 treRef 和 treeRef 是否存在
if (treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey) { console.log("🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:", treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey)
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
// 如果传入了要选中的节点ID则选中该节点否则选中第一个节点 // 如果传入了要选中的节点ID则选中该节点否则选中第一个节点
console.log('selectedNodeId:', selectedNodeId); console.log('selectedNodeId:', selectedNodeId);
if (selectedNodeId) { if (selectedNodeId) {
treRef.value.treeRef1.setCurrentKey(selectedNodeId); treRef.value.treeRef.setCurrentKey(selectedNodeId);
// 查找对应的节点数据并触发事件 // 查找对应的节点数据并触发事件
let selectedNode = null; let selectedNode = null;
const findNode = (nodes: any[]) => { const findNode = (nodes: any[]) => {
@@ -127,7 +132,7 @@ const info = (selectedNodeId?: string) => {
} }
} else { } else {
// 初始化选中第一个节点 // 初始化选中第一个节点
treRef.value.treeRef1.setCurrentKey(arr1[0].id); treRef.value.treeRef.setCurrentKey(arr1[0].id);
emit('init', { emit('init', {
level: 2, level: 2,
...arr1[0] ...arr1[0]
@@ -153,7 +158,7 @@ const onAdd = () => {
emit('onAdd') emit('onAdd')
} }
if (props.template) { if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id }) getTemplateByDept({ id: dictData.state.area[0]?.id })
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
info() info()

View File

@@ -0,0 +1,106 @@
<template>
<Tree
ref="treRef"
:width="width"
:showPush="props.showPush"
:data="tree"
default-expand-all
@changePointType="changePointType"
@onAdd="onAdd"
/>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted, defineProps } from 'vue'
import Tree from '../index.vue'
import { getLineTree, objTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
interface Props {
template?: boolean
showPush?: boolean
}
const props = withDefaults(defineProps<Props>(), {
template: false,
showPush: false
})
defineOptions({
name: 'govern/deviceTree'
})
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
const config = useConfig()
const tree = ref()
const dictData = useDictData()
const treRef = ref()
const width = ref('')
const info = (selectedNodeId?: string) => {
tree.value = []
let arr1: any[] = []
objTree().then(res => {
try {
res.data.map((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.level = 1
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item: any) => {
item.icon = 'el-icon-List'
item.level = 2
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
arr1.push(item2)
item2.icon = 'el-icon-Platform'
item2.level = 3
item2.color = config.getColorVal('elementUiPrimary')
})
})
})
tree.value = res.data
nextTick(() => {
if (arr1.length) {
//初始化选中
treRef.value.treeRef.setCurrentKey(arr1[0].id)
// 注册父组件事件
emit('init', arr1[0])
return
} else {
emit('init')
return
}
})
} catch (error) {
console.error('Error in processing getCldTree response:', error)
}
})
}
const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj)
}
const onAdd = () => {
emit('onAdd')
}
if (props.template) {
getTemplateByDept({ id: dictData.state.area[0]?.id })
.then((res: any) => {
emit('Policy', res.data)
info()
})
.catch(err => {
info()
})
} else {
info()
}
// 暴露 info 方法给父组件调用
defineExpose({
info
})
onMounted(() => {})
</script>

View File

@@ -5,6 +5,7 @@
:default-checked-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
:show-checkbox="props.showCheckbox" :show-checkbox="props.showCheckbox"
:data="tree" :data="tree"
:height="props.height"
@changeDeviceType="changeDeviceType" @changeDeviceType="changeDeviceType"
/> />
</template> </template>
@@ -21,10 +22,12 @@ const props = withDefaults(
defineProps<{ defineProps<{
showCheckbox?: boolean showCheckbox?: boolean
defaultCheckedKeys?: any defaultCheckedKeys?: any
height?: number
}>(), }>(),
{ {
showCheckbox: false, showCheckbox: false,
defaultCheckedKeys: [] defaultCheckedKeys: [],
height:0
} }
) )
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange']) const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
@@ -32,7 +35,7 @@ const config = useConfig()
const tree = ref() const tree = ref()
const treRef = ref() const treRef = ref()
const changeDeviceType = (val: any, obj: any) => { const changeDeviceType = (val: any, obj: any) => {
console.log("🚀 ~ changeDeviceType ~ val:", val,obj) console.log('🚀 ~ changeDeviceType ~ val:', val, obj)
emit('deviceTypeChange', val, obj) emit('deviceTypeChange', val, obj)
} }
getDeviceTree().then(res => { getDeviceTree().then(res => {
@@ -50,7 +53,7 @@ getDeviceTree().then(res => {
item2.color = config.getColorVal('elementUiPrimary') item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => { item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform' item3.icon = 'el-icon-Platform'
item3.level = 2 item3.level = 2
item3.color = config.getColorVal('elementUiPrimary') item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) { if (item3.comFlag === 1) {
item3.color = '#e26257 !important' item3.color = '#e26257 !important'
@@ -83,8 +86,8 @@ getDeviceTree().then(res => {
// }) // })
}) })
}) })
}else if (item.name == '在线设备') { } else if (item.name == '在线设备') {
item.children.forEach((item: any) => { item.children.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled' item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary') item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => { item.children.forEach((item2: any) => {
@@ -102,43 +105,42 @@ getDeviceTree().then(res => {
}) })
} }
}) })
console.log("🚀 ~ file: deviceTree.vue ~ line 18 ~ getDeviceTree ~ tree:", arr,arr2,arr3) console.log('🚀 ~ file: deviceTree.vue ~ line 18 ~ getDeviceTree ~ tree:', arr, arr2, arr3)
tree.value = res.data tree.value = res.data
nextTick(() => { nextTick(() => {
if (arr.length) { setTimeout(() => {
treRef.value.treeRef1.setCurrentKey(arr[0].id) if (arr.length > 0) {
// 注册父组件事件 treRef.value.treeRef1.setCurrentKey(arr[0].id)
emit('init', { // 注册父组件事件
level: 2, emit('init', {
...arr[0] level: 2,
}) ...arr[0]
return })
} return
if (arr2.length) { } else if (arr2.length > 0) {
treRef.value.treeRef2.setCurrentKey(arr2[0].id) treRef.value.treeRef2.setCurrentKey(arr2[0].id)
// 注册父组件事件 // 注册父组件事件
emit('init', { emit('init', {
level: 2, level: 2,
...arr2[0] ...arr2[0]
}) })
return return
} } else if (arr3.length > 0) {
console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3.length) console.log('🚀 ~ arr3:', arr3)
if (arr3.length) {
console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3) treRef.value.treeRef3.setCurrentKey(arr3[0].id)
treRef.value.treeRef3.setCurrentKey(arr3[0].id) // 注册父组件事件
// 注册父组件事件 emit('init', {
emit('init', { level: 2,
level: 2, ...arr3[0]
...arr3[0] })
}) return
return } else {
} emit('init')
else { return
emit('init') }
return }, 500)
}
}) })
}) })
const handleCheckChange = (data: any, checked: any, indeterminate: any) => { const handleCheckChange = (data: any, checked: any, indeterminate: any) => {

View File

@@ -99,38 +99,38 @@ const info = () => {
}) })
tree.value = res.data tree.value = res.data
nextTick(() => { nextTick(() => {
if (arr1.length) { setTimeout(() => {
//初始化选中 if (arr1.length > 0) {
treRef.value.treeRef1.setCurrentKey(arr1[0].id) //初始化选中
// 注册父组件事件 treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
emit('init', { // 注册父组件事件
level: 2, emit('init', {
...arr1[0] level: 2,
}) ...arr1[0]
return })
} return
if (arr2.length) { } else if (arr2.length > 0) {
//初始化选中 //初始化选中
treRef.value.treeRef2.setCurrentKey(arr2[0].id) treRef.value?.treeRef2.setCurrentKey(arr2[0].id)
// 注册父组件事件 // 注册父组件事件
emit('init', { emit('init', {
level: 2, level: 2,
...arr2[0] ...arr2[0]
}) })
return return
} } else if (arr3.length > 0) {
if(arr3.length){
treRef.value.treeRef3.setCurrentKey(arr3[0].id) treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
emit('init', { emit('init', {
level: 2, level: 2,
...arr3[0] ...arr3[0]
}) })
return return
} } else {
else { emit('init')
emit('init') return
return }
} }, 500)
}) })
}) })
} }
@@ -138,7 +138,7 @@ const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj) emit('pointTypeChange', val, obj)
} }
if (props.template) { if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id }) getTemplateByDept({ id: dictData.state.area[0]?.id })
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
info() info()

View File

@@ -1,181 +1,196 @@
<template> <template>
<div> <div>
<div style="transition: all 0.3s; overflow: hidden; height: 100%"> <div style="transition: all 0.3s; overflow: hidden; height: 100%">
<div class="cn-tree">
<div class="cn-tree"> <div style="display: flex; align-items: center" class="mb10">
<div style="display: flex; align-items: center" class="mb10"> <el-input
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable> maxlength="32"
<template #prefix> show-word-limit
<Icon name="el-icon-Search" style="font-size: 16px" /> v-model.trim="filterText"
</template> placeholder="请输入内容"
</el-input> clearable
</div> >
<el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current <template #prefix>
:filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree" <Icon name="el-icon-Search" style="font-size: 16px" />
ref="treRef" @node-click="clickNode" :expand-on-click-node="false"> </template>
<template #default="{ node, data }"> </el-input>
<span class="custom-tree-node"> </div>
<div class="left"> <el-tree
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" style="flex: 1; overflow: auto"
v-if="data.icon" /> :props="defaultProps"
<span>{{ node.label }}</span> highlight-current
</div> :filter-node-method="filterNode"
node-key="id"
</span> v-bind="$attrs"
</template> default-expand-all
</el-tree> :data="tree"
</div> ref="treRef"
</div> @node-click="clickNode"
</div> :expand-on-click-node="false"
</template> >
<template #default="{ node, data }">
<script lang="ts" setup> <span class="custom-tree-node">
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue' <div class="left" style="display: flex; align-items: center">
import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData' <Icon
import { useConfig } from '@/stores/config' :name="data.icon"
import useCurrentInstance from '@/utils/useCurrentInstance' style="font-size: 16px"
import { ElTree } from 'element-plus' :style="{ color: data.color }"
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel' v-if="data.icon"
import { useDictData } from '@/stores/dictData' />
defineOptions({ <span style="margin-left: 5px;">{{ node.label }}</span>
name: 'govern/schemeTree' </div>
}) </span>
</template>
interface Props { </el-tree>
template?: boolean </div>
</div>
} </div>
const dictData = useDictData() </template>
const props = withDefaults(defineProps<Props>(), {
template: false, <script lang="ts" setup>
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
}) import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
const filterText = ref('') import { useConfig } from '@/stores/config'
watch(filterText, val => { import useCurrentInstance from '@/utils/useCurrentInstance'
treRef.value!.filter(val) import { ElTree } from 'element-plus'
}) import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
const filterNode = (value: string, data: any, node: any) => { defineOptions({
if (!value) return true name: 'govern/schemeTree'
// return data.name.includes(value) })
if (data.name) {
return chooseNode(value, data, node) interface Props {
} template?: boolean
} }
const chooseNode = (value: string, data: any, node: any) => { const dictData = useDictData()
if (data.name.indexOf(value) !== -1) { const props = withDefaults(defineProps<Props>(), {
return true template: false
} })
const level = node.level const filterText = ref('')
// 如果传入的节点本身就是一级节点就不用校验了 watch(filterText, val => {
if (level === 1) { treRef.value!.filter(val)
return false })
}
// 先取当前节点的父节点 const filterNode = (value: string, data: any, node: any) => {
let parentData = node.parent if (!value) return true
// 遍历当前节点的父节点 // return data.name.includes(value)
let index = 0 if (data.name) {
while (index < level - 1) { return chooseNode(value, data, node)
// 如果匹配到直接返回此处name值是中文字符enName是英文字符。判断匹配中英文过滤 }
if (parentData.data.name.indexOf(value) !== -1) { }
return true const chooseNode = (value: string, data: any, node: any) => {
} if (data.name.indexOf(value) !== -1) {
// 否则的话再往上一层做匹配 return true
parentData = parentData.parent }
index++ const level = node.level
} // 如果传入的节点本身就是一级节点就不用校验了
// 没匹配到返回false if (level === 1) {
return false return false
} }
/** 树形结构数据 */ // 先取当前节点的父节点
const defaultProps = { let parentData = node.parent
children: 'children', // 遍历当前节点的父节点
label: 'name', let index = 0
value: 'id' while (index < level - 1) {
} // 如果匹配到直接返回此处name值是中文字符enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.indexOf(value) !== -1) {
return true
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy']) }
const config = useConfig() // 否则的话再往上一层做匹配
const tree = ref() parentData = parentData.parent
const treRef = ref() index++
const id: any = ref(null) }
const treeData = ref({}) // 没匹配到返回false
//获取方案树形数据 return false
const getTreeList = () => { }
getSchemeTree().then(res => { /** 树形结构数据 */
let arr: any[] = [] const defaultProps = {
children: 'children',
res.data.forEach((item: any) => { label: 'name',
item.icon = 'el-icon-Menu' value: 'id'
item.color = config.getColorVal('elementUiPrimary') }
item?.children.forEach((item2: any) => {
item2.icon = 'el-icon-Document' const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
item2.color = config.getColorVal('elementUiPrimary') const config = useConfig()
arr.push(item2) const tree = ref()
}) const treRef = ref()
}) const id: any = ref(null)
tree.value = res.data const treeData = ref({})
nextTick(() => { //获取方案树形数据
if (arr.length) { const getTreeList = () => {
treRef.value.setCurrentKey(id.value || arr[0].id) getSchemeTree().then(res => {
let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0] let arr: any[] = []
// 注册父组件事件
emit('init', { res.data.forEach((item: any) => {
level: 2, item.icon = 'el-icon-Menu'
...list item.color = config.getColorVal('elementUiPrimary')
}) item?.children.forEach((item2: any) => {
} else { item2.icon = 'el-icon-Document'
emit('init') item2.color = config.getColorVal('elementUiPrimary')
} arr.push(item2)
}) })
}) })
} tree.value = res.data
nextTick(() => {
//方案id if (arr.length) {
const planId: any = ref('') treRef.value.setCurrentKey(id.value || arr[0].id)
let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
const clickNode = (e: anyObj) => { // 注册父组件事件
e?.children ? (planId.value = e.id) : (planId.value = e.pid) emit('init', {
id.value = e.id level: 2,
emit('nodeChange', e) ...list
} })
} else {
emit('init')
if (props.template) { }
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => { })
emit('Policy', res.data) })
getTreeList() }
}).catch(err => {
getTreeList() //方案id
}) const planId: any = ref('')
} else {
getTreeList() const clickNode = (e: anyObj) => {
} e?.children ? (planId.value = e.id) : (planId.value = e.pid)
id.value = e.id
</script> emit('nodeChange', e)
<style lang="scss" scoped> }
.cn-tree {
flex-shrink: 0; if (props.template) {
display: flex; getTemplateByDept({ id: dictData.state.area[0]?.id })
flex-direction: column; .then((res: any) => {
box-sizing: border-box; emit('Policy', res.data)
padding: 10px; getTreeList()
height: 100%; })
width: 100%; .catch(err => {
height: calc(100vh - 125px); getTreeList()
overflow-y: auto; })
} else {
:deep(.el-tree) { getTreeList()
border: 1px solid var(--el-border-color); }
} </script>
<style lang="scss" scoped>
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { .cn-tree {
background-color: var(--el-color-primary-light-7); flex-shrink: 0;
} display: flex;
flex-direction: column;
.menu-collapse { box-sizing: border-box;
color: var(--el-color-primary); padding: 10px;
} height: 100%;
} width: 100%;
</style> height: calc(100vh - 125px);
overflow-y: auto;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7);
}
.menu-collapse {
color: var(--el-color-primary);
}
}
</style>

View File

@@ -87,7 +87,7 @@ const handleCheckedNodesChange = (nodes: any[]) => {
if (props.template) { if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id }) getTemplateByDept({ id: dictData.state.area[0]?.id })
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
info() info()

View File

@@ -10,7 +10,7 @@
<Icon name='el-icon-Search' style='font-size: 16px' /> <Icon name='el-icon-Search' style='font-size: 16px' />
</template> </template>
</el-input> </el-input>
<el-tooltip placement="bottom" :hide-after="0"> <el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
<template #content> <template #content>
<span>台账推送</span> <span>台账推送</span>
</template> </template>
@@ -23,12 +23,12 @@
:style="{ color: config.getColorVal('elementUiPrimary') }" :style="{ color: config.getColorVal('elementUiPrimary') }"
@click="onAdd" /> @click="onAdd" />
</el-tooltip> </el-tooltip>
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" <!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse' :class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' /> --> style='cursor: pointer' v-if='props.canExpand' /> -->
</div> </div>
<el-tree :style="{ height: 'calc(100vh - 200px)' }" <el-tree :style="{ height: 'calc(100vh - 190px)' }"
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false" style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'> @check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
<template #default='{ node, data }'> <template #default='{ node, data }'>
@@ -58,11 +58,13 @@ defineOptions({
interface Props { interface Props {
width?: string width?: string
canExpand?: boolean canExpand?: boolean
showPush?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
width: '280px', width: '280px',
canExpand: true canExpand: true,
showPush: false
}) })
const config = useConfig() const config = useConfig()
const { proxy } = useCurrentInstance() const { proxy } = useCurrentInstance()

View File

@@ -1,9 +1,16 @@
<!-- 设备监控使用折叠面板渲染多个tree --> <!-- 设备监控使用折叠面板渲染多个tree -->
<template> <template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden"> <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" <Icon
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer" v-show="menuCollapse"
v-if="route.path != '/admin/govern/reportCore/statistics/index'" /> @click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }"> <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
<div style="display: flex; align-items: center" class="mb10"> <div style="display: flex; align-items: center" class="mb10">
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable> <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
@@ -11,13 +18,23 @@
<Icon name="el-icon-Search" style="font-size: 16px" /> <Icon name="el-icon-Search" style="font-size: 16px" />
</template> </template>
</el-input> </el-input>
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" <Icon
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse" @click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer" style="cursor: pointer"
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" /> v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
/>
</div> </div>
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice"> <el-collapse
:accordion="true"
v-model.trim="activeName"
style="flex: 1; height: 100%"
@change="changeDevice"
>
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0"> <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10"> <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2"></el-option> <el-option label="功能调试" value="2"></el-option>
@@ -26,14 +43,25 @@
</el-select> </el-select>
<el-tree <el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }" :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode" ref="treeRef1"
node-key="id" v-bind="$attrs" :data="zlDevList" style="overflow: auto" :props="defaultProps"
:default-expand-all="false"> highlight-current
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
:default-expand-all="false"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -41,14 +69,25 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0"> <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree <el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }" :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false" ref="treeRef2"
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs" :props="defaultProps"
style="overflow: auto" > highlight-current
:default-expand-all="false"
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -56,14 +95,25 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0"> <el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0">
<el-tree <el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }" :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false" ref="treeRef3"
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs" :props="defaultProps"
style="overflow: auto"> highlight-current
:default-expand-all="false"
:filter-node-method="filterNode"
node-key="id"
:data="yqfDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" <Icon
v-if="data.icon" /> :name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span> <span style="margin-left: 4px">{{ node.label }}</span>
</span> </span>
</template> </template>
@@ -118,27 +168,25 @@ watch(
() => props.data, () => props.data,
(val, oldVal) => { (val, oldVal) => {
if (val && val.length != 0) { if (val && val.length != 0) {
val.map((item: any) => { val.map((item: any) => {
if (item.name == '治理设备') { if (item.name == '治理设备') {
zlDeviceData.value = [] zlDeviceData.value = []
item.children.map((vv: any) => { item.children.map((vv: any) => {
zlDeviceData.value.push(vv) zlDeviceData.value.push(vv)
}) })
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value)) zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else if (item.name == '便携式设备') { } else if (item.name == '便携式设备') {
bxsDeviceData.value = [] bxsDeviceData.value = []
item.children.map((vv: any) => { item.children.map((vv: any) => {
bxsDeviceData.value.push(vv) bxsDeviceData.value.push(vv)
}) })
}else if (item.name == '在线设备') { } else if (item.name == '在线设备') {
yqfDeviceData.value = [] yqfDeviceData.value = []
item.children.map((vv: any) => { item.children.map((vv: any) => {
yqfDeviceData.value.push(vv) yqfDeviceData.value.push(vv)
}) })
} }
}) })
} }
}, },
{ {
@@ -157,12 +205,10 @@ watch(filterText, val => {
} }
}) })
watch(process, val => { watch(process, val => {
if (val == '' || val == undefined) {
if (val == '') {
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value)) zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else { } else {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value))) zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
} }
setTimeout(() => { setTimeout(() => {
@@ -170,9 +216,8 @@ watch(process, val => {
}, 0) }, 0)
}) })
const changeDevice = (val: any) => { const changeDevice = (val: any) => {
console.log('🚀 ~ changeDevice ~ val:', val)
let arr1: any = [] let arr1: any = []
//zlDeviceData //zlDeviceData
@@ -263,8 +308,7 @@ function filterProcess(nodes: any) {
// 1. 如果有满足条件的子节点则保留 // 1. 如果有满足条件的子节点则保留
// 2. 如果本身 process 值匹配则保留 // 2. 如果本身 process 值匹配则保留
// 3. 如果是叶子节点也保留(监测点通常没有子节点) // 3. 如果是叶子节点也保留(监测点通常没有子节点)
if (children.length > 0 || node.process == process.value || if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
(!node.children || node.children.length === 0)) {
return { return {
...node, ...node,
children: children children: children
@@ -276,7 +320,6 @@ function filterProcess(nodes: any) {
.filter(Boolean) // 移除null节点 .filter(Boolean) // 移除null节点
} }
// function filterProcess(nodes: any) { // function filterProcess(nodes: any) {
// if (process.value == '') { // if (process.value == '') {
// return nodes // return nodes
@@ -332,11 +375,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
const treeRef2 = ref<InstanceType<typeof ElTree>>() const treeRef2 = ref<InstanceType<typeof ElTree>>()
//在线 //在线
const treeRef3 = ref<InstanceType<typeof ElTree>>() const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 }) defineExpose({ treeRef1, treeRef2, treeRef3 })
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
if (zlDeviceData.value.length != 0) { if (zlDeviceData.value.length != 0) {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value))) zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
activeName.value = '0' activeName.value = '0'
@@ -344,8 +385,11 @@ onMounted(() => {
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) { if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
activeName.value = '1' activeName.value = '1'
} }
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
activeName.value = '2'
}
if (!zlDeviceData.value && !bxsDeviceData.value) { if (!zlDeviceData.value && !bxsDeviceData.value) {
activeName.value = '' activeName.value = '2'
} }
nextTick(() => { nextTick(() => {
changeDevice(activeName.value) changeDevice(activeName.value)

View File

@@ -1,242 +1,246 @@
<template> <template>
<div class="nav-tabs" ref="tabScrollbarRef"> <div class="nav-tabs" ref="tabScrollbarRef">
<div
v-for="(item, idx) in navTabs.state.tabsView" <div
@click="onTab(item)" v-for="(item, idx) in navTabs.state.tabsView"
@contextmenu.prevent="onContextmenu(item, $event)" @click="onTab(item)"
class="ba-nav-tab" @contextmenu.prevent="onContextmenu(item, $event)"
:class="navTabs.state.activeIndex == idx ? 'active' : ''" class="ba-nav-tab"
:ref="tabsRefs.set" :class="navTabs.state.activeIndex == idx ? 'active' : ''"
:key="idx" :ref="tabsRefs.set"
> :key="idx"
{{ item.meta.title }} >
<transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in"> {{ item.meta.title }}
<Icon <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
v-if="navTabs.state.tabsView.length > 1" <Icon
class="close-icon" v-if="navTabs.state.tabsView.length > 1"
@click.stop="closeTab(item)" class="close-icon"
size="15" @click.stop="closeTab(item)"
name="el-icon-Close" size="15"
/> name="el-icon-Close"
</transition> />
</div> </transition>
<!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>--> </div>
</div> <!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
<Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" /> </div>
</template> <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue' <script setup lang="ts">
import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router' import { nextTick, onMounted, reactive, ref } from 'vue'
import { useConfig } from '@/stores/config' import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
import { useNavTabs } from '@/stores/navTabs' import { useConfig } from '@/stores/config'
import { useTemplateRefsList } from '@vueuse/core' import { useNavTabs } from '@/stores/navTabs'
import type { ContextMenuItem, ContextmenuItemClickEmitArg } from '@/components/contextmenu/interface' import { useTemplateRefsList } from '@vueuse/core'
import useCurrentInstance from '@/utils/useCurrentInstance' import type { ContextMenuItem, ContextmenuItemClickEmitArg } from '@/components/contextmenu/interface'
import Contextmenu from '@/components/contextmenu/index.vue' import useCurrentInstance from '@/utils/useCurrentInstance'
import horizontalScroll from '@/utils/horizontalScroll' import Contextmenu from '@/components/contextmenu/index.vue'
import { getFirstRoute, routePush } from '@/utils/router' import horizontalScroll from '@/utils/horizontalScroll'
import { adminBaseRoutePath } from '@/router/static' import { getFirstRoute, routePush } from '@/utils/router'
import { adminBaseRoutePath } from '@/router/static'
const route = useRoute()
const router = useRouter() const route = useRoute()
const config = useConfig() const router = useRouter()
const navTabs = useNavTabs() const config = useConfig()
const navTabs = useNavTabs()
const { proxy } = useCurrentInstance()
const tabScrollbarRef = ref() const { proxy } = useCurrentInstance()
const tabsRefs = useTemplateRefsList<HTMLDivElement>() const tabScrollbarRef = ref()
const tabsRefs = useTemplateRefsList<HTMLDivElement>()
const contextmenuRef = ref()
const contextmenuRef = ref()
const state: {
contextmenuItems: ContextMenuItem[] const state: {
} = reactive({ contextmenuItems: ContextMenuItem[]
contextmenuItems: [ } = reactive({
{ name: 'refresh', label: '重新加载', icon: 'fa fa-refresh' }, contextmenuItems: [
{ name: 'close', label: '关闭标签', icon: 'fa fa-times' }, { name: 'refresh', label: '重新加载', icon: 'fa fa-refresh' },
{ name: 'fullScreen', label: '当前标签全屏', icon: 'el-icon-FullScreen' }, { name: 'close', label: '关闭标签', icon: 'fa fa-times' },
{ name: 'closeOther', label: '关闭其他标签', icon: 'fa fa-minus' }, { name: 'fullScreen', label: '当前标签全屏', icon: 'el-icon-FullScreen' },
{ name: 'closeAll', label: '关闭全部标签', icon: 'fa fa-stop' } { name: 'closeOther', label: '关闭其他标签', icon: 'fa fa-minus' },
] { name: 'closeAll', label: '关闭全部标签', icon: 'fa fa-stop' }
}) ]
})
const activeBoxStyle = reactive({
width: '0', const activeBoxStyle = reactive({
transform: 'translateX(0px)' width: '0',
}) transform: 'translateX(0px)'
})
const onTab = (menu: RouteLocationNormalized) => {
router.push(menu) const onTab = (menu: RouteLocationNormalized) => {
} router.push(menu)
}
const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
// 禁用刷新 const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
state.contextmenuItems[0].disabled = route.path !== menu.path
// 禁用关闭其他和关闭全部 // 禁用刷新
state.contextmenuItems[4].disabled = state.contextmenuItems[3].disabled = state.contextmenuItems[0].disabled = route.path !== menu.path
navTabs.state.tabsView.length == 1 ? true : false
const { clientX, clientY } = el // 禁用关闭其他和关闭全部
contextmenuRef.value.onShowContextmenu(menu, { state.contextmenuItems[4].disabled = state.contextmenuItems[3].disabled =
x: clientX, navTabs.state.tabsView.length == 1 ? true : false
y: clientY
}) const { clientX, clientY } = el
} contextmenuRef.value.onShowContextmenu(menu, {
x: clientX,
// tab 激活状态切换 y: clientY
const selectNavTab = function (dom: HTMLDivElement) { })
if (!dom) { }
return false
} // tab 激活状态切换
activeBoxStyle.width = dom.clientWidth + 'px' const selectNavTab = function (dom: HTMLDivElement) {
activeBoxStyle.transform = `translateX(${dom.offsetLeft}px)` if (!dom) {
return false
let scrollLeft = dom.offsetLeft + dom.clientWidth - tabScrollbarRef.value.clientWidth }
if (dom.offsetLeft < tabScrollbarRef.value.scrollLeft) { activeBoxStyle.width = dom.clientWidth + 'px'
tabScrollbarRef.value.scrollTo(dom.offsetLeft, 0) activeBoxStyle.transform = `translateX(${dom.offsetLeft}px)`
} else if (scrollLeft > tabScrollbarRef.value.scrollLeft) {
tabScrollbarRef.value.scrollTo(scrollLeft, 0) let scrollLeft = dom.offsetLeft + dom.clientWidth - tabScrollbarRef.value.clientWidth
} if (dom.offsetLeft < tabScrollbarRef.value.scrollLeft) {
} tabScrollbarRef.value.scrollTo(dom.offsetLeft, 0)
} else if (scrollLeft > tabScrollbarRef.value.scrollLeft) {
const toLastTab = () => { tabScrollbarRef.value.scrollTo(scrollLeft, 0)
const lastTab = navTabs.state.tabsView.slice(-1)[0] }
if (lastTab) { }
router.push(lastTab)
} else { const toLastTab = () => {
router.push(adminBaseRoutePath) const lastTab = navTabs.state.tabsView.slice(-1)[0]
} if (lastTab) {
} router.push(lastTab)
} else {
const closeTab = (route: RouteLocationNormalized) => { router.push(adminBaseRoutePath)
navTabs.closeTab(route) }
proxy.eventBus.emit('onTabViewClose', route) }
if (navTabs.state.activeRoute?.path === route.path) {
toLastTab() const closeTab = (route: RouteLocationNormalized) => {
} else { navTabs.closeTab(route)
navTabs.setActiveRoute(navTabs.state.activeRoute!) proxy.eventBus.emit('onTabViewClose', route)
nextTick(() => { if (navTabs.state.activeRoute?.path === route.path) {
selectNavTab(tabsRefs.value[navTabs.state.activeIndex]) toLastTab()
}) } else {
} navTabs.setActiveRoute(navTabs.state.activeRoute!)
nextTick(() => {
contextmenuRef.value.onHideContextmenu() selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
} })
}
const closeOtherTab = (menu: RouteLocationNormalized) => {
navTabs.closeTabs(menu) contextmenuRef.value.onHideContextmenu()
navTabs.setActiveRoute(menu) }
if (navTabs.state.activeRoute?.path !== route.path) {
router.push(menu!.path) const closeOtherTab = (menu: RouteLocationNormalized) => {
} navTabs.closeTabs(menu)
} navTabs.setActiveRoute(menu)
if (navTabs.state.activeRoute?.path !== route.path) {
const closeAllTab = (menu: RouteLocationNormalized) => { router.push(menu!.path)
let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes) }
if (firstRoute && firstRoute.path == menu.path) { }
return closeOtherTab(menu)
} const closeAllTab = (menu: RouteLocationNormalized) => {
if (firstRoute && firstRoute.path == navTabs.state.activeRoute?.path) { let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
return closeOtherTab(navTabs.state.activeRoute) if (firstRoute && firstRoute.path == menu.path) {
} return closeOtherTab(menu)
navTabs.closeTabs(false) }
if (firstRoute) routePush(firstRoute.path) if (firstRoute && firstRoute.path == navTabs.state.activeRoute?.path) {
} return closeOtherTab(navTabs.state.activeRoute)
}
const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => { navTabs.closeTabs(false)
const { name, menu } = item if (firstRoute) routePush(firstRoute.path)
if (!menu) return }
switch (name) {
case 'refresh': const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
proxy.eventBus.emit('onTabViewRefresh', menu) const { name, menu } = item
break if (!menu) return
case 'close': switch (name) {
closeTab(menu) case 'refresh':
break proxy.eventBus.emit('onTabViewRefresh', menu)
case 'closeOther': break
closeOtherTab(menu) case 'close':
break closeTab(menu)
case 'closeAll': break
closeAllTab(menu) case 'closeOther':
break closeOtherTab(menu)
case 'fullScreen': break
if (route.path !== menu?.path) { case 'closeAll':
router.push(menu?.path as string) closeAllTab(menu)
} break
navTabs.setFullScreen(true) case 'fullScreen':
break if (route.path !== menu?.path) {
} router.push(menu?.path as string)
} }
navTabs.setFullScreen(true)
const updateTab = function (newRoute: RouteLocationNormalized) { break
// 添加tab }
navTabs.addTab(newRoute) }
// 激活当前tab
navTabs.setActiveRoute(newRoute) const updateTab = function (newRoute: RouteLocationNormalized) {
// 添加tab
nextTick(() => { navTabs.addTab(newRoute)
selectNavTab(tabsRefs.value[navTabs.state.activeIndex]) // 激活当前tab
}) navTabs.setActiveRoute(newRoute)
}
nextTick(() => {
onBeforeRouteUpdate(async to => { selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
})
}
updateTab(to)
onBeforeRouteUpdate(async to => {
})
onMounted(() => { updateTab(to)
updateTab(router.currentRoute.value)
new horizontalScroll(tabScrollbarRef.value) })
})
</script> onMounted(() => {
updateTab(router.currentRoute.value)
<style scoped lang="scss"> new horizontalScroll(tabScrollbarRef.value)
.dark { })
.close-icon { </script>
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
} <style scoped lang="scss">
.dark {
.ba-nav-tab.active { .close-icon {
.close-icon { color: v-bind('config.getColorVal("headerBarTabColor")') !important;
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important; }
}
} .ba-nav-tab.active {
} .close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
.nav-tabs { }
overflow-x: auto; }
overflow-y: hidden; }
margin-right: var(--ba-main-space);
scrollbar-width: none; .nav-tabs {
overflow-x: auto;
&::-webkit-scrollbar { overflow-y: hidden;
height: 5px; margin-right: var(--ba-main-space);
} scrollbar-width: none;
// &::-webkit-scrollbar {
//&::-webkit-scrollbar-thumb { height: 5px;
// background: #eaeaea; }
// border-radius: var(--el-border-radius-base);
// box-shadow: none; //
// -webkit-box-shadow: none; //&::-webkit-scrollbar-thumb {
//} // background: #eaeaea;
// // border-radius: var(--el-border-radius-base);
//&::-webkit-scrollbar-track { // box-shadow: none;
// background: v-bind('config.layout.layoutMode == "Default" ? "none":config.getColorVal("headerBarBackground")'); // -webkit-box-shadow: none;
//} //}
// //
//&:hover { //&::-webkit-scrollbar-track {
// &::-webkit-scrollbar-thumb:hover { // background: v-bind('config.layout.layoutMode == "Default" ? "none":config.getColorVal("headerBarBackground")');
// background: #c8c9cc; //}
// } //
//} //&:hover {
} // &::-webkit-scrollbar-thumb:hover {
// background: #c8c9cc;
.ba-nav-tab { // }
white-space: nowrap; //}
height: 40px; }
}
</style> .ba-nav-tab {
white-space: nowrap;
height: 40px;
}
</style>

View File

@@ -1,108 +1,169 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { STORE_TAB_VIEW_CONFIG } from '@/stores/constant/cacheKey' import { STORE_TAB_VIEW_CONFIG } from '@/stores/constant/cacheKey'
import type { NavTabs } from '@/stores/interface/index' import type { NavTabs } from '@/stores/interface/index'
import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router' import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
import { adminBaseRoutePath } from '@/router/static' import { adminBaseRoutePath } from '@/router/static'
import { set } from 'lodash'
export const useNavTabs = defineStore(
'navTabs', export const useNavTabs = defineStore(
() => { 'navTabs',
const state: NavTabs = reactive({ () => {
// 激活tab的index const state: NavTabs = reactive({
activeIndex: 0, // 激活tab的index
// 激活的tab activeIndex: 0,
activeRoute: null, // 激活的tab
// tab列表 activeRoute: null,
tabsView: [], // tab列表
// 当前tab是否全屏 tabsView: [],
tabFullScreen: false, // 当前tab是否全屏
// 从后台加载到的菜单路由列表 tabFullScreen: false,
tabsViewRoutes: [], // 从后台加载到的菜单路由列表
// 按钮权限节点 tabsViewRoutes: [],
authNode: new Map(), // 按钮权限节点
}) authNode: new Map()
})
function addTab(route: RouteLocationNormalized) {
if (!route.meta.addtab) return function addTab(route: RouteLocationNormalized) {
for (const key in state.tabsView) { console.log('🚀 ~ addTab ~ route:', route)
if (state.tabsView[key].path === route.path) { if (!route.meta.addtab) return
state.tabsView[key].params = route.params ? route.params : state.tabsView[key].params for (const key in state.tabsView) {
state.tabsView[key].query = route.query ? route.query : state.tabsView[key].query if (state.tabsView[key].path === route.path) {
return state.tabsView[key].params = route.params ? route.params : state.tabsView[key].params
} state.tabsView[key].query = route.query ? route.query : state.tabsView[key].query
} state.tabsView[key].meta = route.query ? route.meta : state.tabsView[key].meta
state.tabsView.push(route) return
} }
}
function closeTab(route: RouteLocationNormalized) { state.tabsView.push(route)
state.tabsView.map((v, k) => { }
if (v.path == route.path) {
state.tabsView.splice(k, 1) function closeTab(route: RouteLocationNormalized) {
return state.tabsView.map((v, k) => {
} if (v.path == route.path) {
}) state.tabsView.splice(k, 1)
} return
}
/** })
* 关闭多个标签 }
* @param retainMenu 需要保留的标签,否则关闭全部标签
*/ /**
const closeTabs = (retainMenu: RouteLocationNormalized | false = false) => { * 关闭多个标签
if (retainMenu) { * @param retainMenu 需要保留的标签,否则关闭全部标签
state.tabsView = [retainMenu] */
} else { const closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
state.tabsView = [] if (retainMenu) {
} state.tabsView = [retainMenu]
} } else {
state.tabsView = []
const setActiveRoute = (route: RouteLocationNormalized): void => { }
const currentRouteIndex: number = state.tabsView.findIndex((item: RouteLocationNormalized) => { }
return item.path === route.path
}) const setActiveRoute = (route: RouteLocationNormalized): void => {
if (currentRouteIndex === -1) return const currentRouteIndex: number = state.tabsView.findIndex((item: RouteLocationNormalized) => {
state.activeRoute = route return item.path === route.path
state.activeIndex = currentRouteIndex })
} if (currentRouteIndex === -1) return
state.activeRoute = route
const setTabsViewRoutes = (data: RouteRecordRaw[]): void => { state.activeIndex = currentRouteIndex
state.tabsViewRoutes = encodeRoutesURI(data) }
}
const setTabsViewRoutes = (data: RouteRecordRaw[]): void => {
const setAuthNode = (key: string, data: string[]) => { state.tabsViewRoutes = encodeRoutesURI(data)
state.authNode.set(key, data) }
}
const setAuthNode = (key: string, data: string[]) => {
const fillAuthNode = (data: Map<string, string[]>) => { state.authNode.set(key, data)
state.authNode = data }
}
const fillAuthNode = (data: Map<string, string[]>) => {
const setFullScreen = (fullScreen: boolean): void => { state.authNode = data
state.tabFullScreen = fullScreen }
}
const setFullScreen = (fullScreen: boolean): void => {
return { state, addTab, closeTab, closeTabs, setActiveRoute, setTabsViewRoutes, setAuthNode, fillAuthNode, setFullScreen } state.tabFullScreen = fullScreen
}, }
{
persist: { const refresh = () => {
key: STORE_TAB_VIEW_CONFIG, // setTimeout(() => {
paths: ['state.tabFullScreen'], // console.log(123, state.tabsViewRoutes)
},
} let list = matchAndReturnRouteData(state.tabsViewRoutes, state.tabsView)
) state.tabsView = []
list.forEach(item => {
/** addTab(item)
* 对iframe的url进行编码 })
*/ // }, 1000)
function encodeRoutesURI(data: RouteRecordRaw[]) { }
data.forEach((item) => { return {
if (item.meta?.menu_type == 'iframe') { state,
item.path = adminBaseRoutePath + '/iframe/' + encodeURIComponent(item.path) addTab,
} closeTab,
closeTabs,
if (item.children && item.children.length) { setActiveRoute,
item.children = encodeRoutesURI(item.children) setTabsViewRoutes,
} setAuthNode,
}) fillAuthNode,
return data setFullScreen,
} refresh
}
},
{
persist: {
key: STORE_TAB_VIEW_CONFIG,
paths: ['state.tabFullScreen']
}
}
)
/**
* 核心逻辑:
* 1. 递归遍历树形菜单筛选出与routeList中name匹配的节点
* 2. 将匹配到的节点格式转换为routeList的结构并返回
*/
function matchAndReturnRouteData(tree, routeList) {
// 1. 构建路由name映射name -> 完整路由对象)
const routeMap = new Map()
routeList.forEach(route => {
if (route.name) {
routeMap.set(route.name, route)
}
})
// 2. 递归遍历树形菜单,收集匹配的节点
const matchedNodes = []
function recursion(node) {
// 匹配当前节点
if (routeMap.has(node.name)) {
// 深度克隆路由对象,避免修改原数据
const matchedRoute = JSON.parse(JSON.stringify(routeMap.get(node.name)))
matchedNodes.push(matchedRoute)
}
// 递归处理子节点
if (node.children && node.children.length) {
node.children.forEach(child => recursion(child))
}
}
// 遍历所有顶级节点
tree.forEach(node => recursion(node))
// 3. 返回匹配后的第二个数据格式和routeList结构一致
return matchedNodes
}
/**
* 对iframe的url进行编码
*/
function encodeRoutesURI(data: RouteRecordRaw[]) {
data.forEach(item => {
if (item.meta?.menu_type == 'iframe') {
item.path = adminBaseRoutePath + '/iframe/' + encodeURIComponent(item.path)
}
if (item.children && item.children.length) {
item.children = encodeRoutesURI(item.children)
}
})
return data
}

58
src/styles/vxeTable.css Normal file
View File

@@ -0,0 +1,58 @@
.vxe-header--row {
background: var(--vxe-table-header-background-color);
color: var(--vxe-table-header-font-color);
}
.is--checked.vxe-checkbox,
.is--checked.vxe-checkbox .vxe-checkbox--icon,
.is--checked.vxe-custom--checkbox-option,
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--checked.vxe-export--panel-column-option,
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--checked.vxe-table--filter-option,
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
.is--indeterminate.vxe-checkbox,
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
.is--indeterminate.vxe-custom--checkbox-option,
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--indeterminate.vxe-export--panel-column-option,
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--indeterminate.vxe-table--filter-option,
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
color: var(--el-color-primary-light-3);
}
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
color: var(--el-color-primary-light-5);
}
.vxe-table--render-default .vxe-body--row.row--current,
.vxe-table--render-default .vxe-body--row.row--current:hover {
background-color: var(--el-color-primary-light-8);
}
.vxe-table--tooltip-wrapper {
z-index: 10000 !important;
}
.is--disabled {
background-color: var(--vxe-input-disabled-color);
}
.vxe-modal--wrapper {
z-index: 5000 !important;
}

1
src/styles/vxeTable.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-8)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}

View File

@@ -1,84 +1,87 @@
// .vxe-table--body-wrapper, // .vxe-table--body-wrapper,
// .boxbx { // .boxbx {
// &::-webkit-scrollbar { // &::-webkit-scrollbar {
// width: 10px; // width: 10px;
// height: 10px; // height: 10px;
// } // }
// &::-webkit-scrollbar-thumb { // &::-webkit-scrollbar-thumb {
// border-radius: 5px; // border-radius: 5px;
// height: 3px; // height: 3px;
// background-color: var(--el-color-primary) !important; // background-color: var(--el-color-primary) !important;
// border-radius: 30px !important; // border-radius: 30px !important;
// } // }
// } // }
// .vxe-table--body-wrapper::-webkit-scrollbar-thumb { // .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
// border-radius: 5px; // border-radius: 5px;
// height: 3px; // height: 3px;
// background-color: var(--el-color-primary) !important; // background-color: var(--el-color-primary) !important;
// border-radius: 30px !important; // border-radius: 30px !important;
// } // }
.vxe-header--row { .vxe-header--row {
background: var(--vxe-table-header-background-color); background: var(--vxe-table-header-background-color);
color: var(--vxe-table-header-font-color); color: var(--vxe-table-header-font-color);
} }
.is--checked.vxe-checkbox, .is--checked.vxe-checkbox,
.is--checked.vxe-checkbox .vxe-checkbox--icon, .is--checked.vxe-checkbox .vxe-checkbox--icon,
.is--checked.vxe-custom--checkbox-option, .is--checked.vxe-custom--checkbox-option,
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--checked.vxe-export--panel-column-option, .is--checked.vxe-export--panel-column-option,
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon, .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--checked.vxe-table--filter-option, .is--checked.vxe-table--filter-option,
.is--checked.vxe-table--filter-option .vxe-checkbox--icon, .is--checked.vxe-table--filter-option .vxe-checkbox--icon,
.is--indeterminate.vxe-checkbox, .is--indeterminate.vxe-checkbox,
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon, .is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
.is--indeterminate.vxe-custom--checkbox-option, .is--indeterminate.vxe-custom--checkbox-option,
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--indeterminate.vxe-export--panel-column-option, .is--indeterminate.vxe-export--panel-column-option,
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon, .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--indeterminate.vxe-table--filter-option, .is--indeterminate.vxe-table--filter-option,
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--checkbox, .vxe-table--render-default .is--checked.vxe-cell--checkbox,
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon, .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon { .vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
color: var(--el-color-primary-light-3); color: var(--el-color-primary-light-3);
} }
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon, .vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon, .vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon, .vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon, .vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon { .vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
color: var(--el-color-primary-light-5); color: var(--el-color-primary-light-5);
} }
.vxe-table--render-default .vxe-body--row.row--current,
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{ .vxe-table--render-default .vxe-body--row.row--current:hover {
// color: #fff0; background-color: var(--el-color-primary-light-8);
// } }
.vxe-table--tooltip-wrapper { // .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
z-index: 10000 !important; // color: #fff0;
} // }
.is--disabled { .vxe-table--tooltip-wrapper {
background-color: var(--vxe-input-disabled-color); z-index: 10000 !important;
} }
.is--disabled {
.vxe-modal--wrapper { background-color: var(--vxe-input-disabled-color);
z-index: 5000 !important; }
}
.vxe-table--body .vxe-body--row:nth-child(even) { .vxe-modal--wrapper {
background-color: #f9f9f9; z-index: 5000 !important;
// background-color: var(--el-color-primary-light-9); }
} // .vxe-table--body .vxe-body--row:nth-child(even) {
// background-color: #f9f9f9;
.vxe-table--body .vxe-body--row:nth-child(odd) { // // background-color: var(--el-color-primary-light-9);
background-color: #ffffff; // }
}
// .vxe-table--body .vxe-body--row:nth-child(odd) {
// background-color: #ffffff;
// }

View File

@@ -352,7 +352,9 @@ export function getTimeOfTheMonth(key: any): [string, string] {
const dayOfWeek = now.getDay() // 0是周日 const dayOfWeek = now.getDay() // 0是周日
const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一 const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一
const weekStart = new Date(year, month, diff) const weekStart = new Date(year, month, diff)
return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')] const weekEnd = new Date(weekStart)
weekEnd.setDate(weekEnd.getDate() + 6)
return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(weekEnd, 'YYYY-MM-DD')]
case '5': // 日 case '5': // 日
return [formatDate(now, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')] return [formatDate(now, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
@@ -361,3 +363,23 @@ export function getTimeOfTheMonth(key: any): [string, string] {
throw new Error('Invalid key') throw new Error('Invalid key')
} }
} }
/**
* 获取当月时间
* @param interval 组件外部时间 1 年 2 季 3 月 4 周 5 日
* @param timeList 驾驶舱里面组件勾选时间 []
* @param externalTime //外部传入时间
* @param fullscreen // 全屏是否全屏
*/
export function getTime(interval: number | 3, timeList: any, externalTime: any) {
// console.log('🚀 ~ getTime ~ timeList:', timeList)
// 1、先匹配时间
// 检查 interval 是否在 timeList 中
if (timeList && timeList.includes(interval.toString())) {
return [externalTime[0], externalTime[1], interval]
} else {
if (timeList && timeList.length > 0) {
return [...getTimeOfTheMonth(timeList[0]), timeList[0]]
}
}
}

View File

@@ -67,7 +67,13 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
config.url == '/system-boot/file/upload' || config.url == '/system-boot/file/upload' ||
config.url == '/harmonic-boot/grid/getAssessOverview' || config.url == '/harmonic-boot/grid/getAssessOverview' ||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' || config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' ||
config.url == '/cs-device-boot/csline/list' config.url == '/cs-device-boot/csline/list' ||
config.url == '/cs-harmonic-boot/pqSensitiveUser/getListByIds'||
config.url == '/cs-harmonic-boot/csevent/getEventCoords'||
config.url == '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData'||
config.url == '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData'||
config.url == '/system-boot/dictTree/queryByCode'||
config.url == '/system-boot/dictTree/query'
) )
) )
removePending(config) removePending(config)
@@ -173,6 +179,8 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
setTimeout(() => { setTimeout(() => {
ElMessage.error(response.data.message || '未知错误') ElMessage.error(response.data.message || '未知错误')
}, 6000) }, 6000)
}else if (response.config.url == '/cs-harmonic-boot/cspage/getByUserId') {
} else { } else {
ElMessage.error(response.data.message || '未知错误') ElMessage.error(response.data.message || '未知错误')
} }

View File

@@ -1,107 +1,108 @@
<template> <template>
<el-dialog class="cn-operate-dialog" width="700px" v-model.trim="dialogVisible" :title="title"> <el-dialog class="cn-operate-dialog" width="700px" v-model.trim="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline="false" :model="form" label-width="auto" class="form-one"> <el-form :inline="false" :model="form" label-width="auto" class="form-one">
<el-form-item label="上级菜单"> <el-form-item label="上级菜单">
<el-cascader v-model.trim="form.pid" :options="tableStore.table.data" :props="cascaderProps" <el-cascader v-model.trim="form.pid" :options="tableStore.table.data" :props="cascaderProps" clearable
style="width: 100%" /> style="width: 100%" />
</el-form-item> </el-form-item>
<el-form-item label="菜单名称"> <el-form-item label="菜单名称">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入菜单名称" /> <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label="图标"> <el-form-item label="图标">
<IconSelector v-model.trim="form.icon" placeholder="请选择图标" /> <IconSelector v-model.trim="form.icon" placeholder="请选择图标" />
</el-form-item> </el-form-item>
<el-form-item label="菜单路由"> <el-form-item label="菜单路由">
<el-input v-model.trim="form.path" placeholder="请输入菜单名称" /> <el-input v-model.trim="form.path" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label="组件路径"> <el-form-item label="组件路径">
<el-input v-model.trim="form.routeName" placeholder="请输入组件路径,如/src/views/dashboard/index.vue" /> <el-input v-model.trim="form.routeName" placeholder="请输入组件路径,如/src/views/dashboard/index.vue" />
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="排序">
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" /> <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item> </el-form-item>
<el-form-item label="菜单描述"> <el-form-item label="菜单描述">
<el-input maxlength="300" show-word-limit v-model.trim="form.remark" :rows="2" type="textarea" <el-input maxlength="300" show-word-limit v-model.trim="form.remark" :rows="2" type="textarea"
placeholder="请输入描述" /> placeholder="请输入描述" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import IconSelector from '@/components/baInput/components/iconSelector.vue' import IconSelector from '@/components/baInput/components/iconSelector.vue'
import { updateMenu, addMenu } from '@/api/systerm' import { updateMenu, addMenu } from '@/api/systerm'
defineOptions({ defineOptions({
name: 'auth/menu/popupMenu' name: 'auth/menu/popupMenu'
}) })
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'init'): void (e: 'init'): void
}>() }>()
const tableStore = inject('tableStore') as TableStore const tableStore = inject('tableStore') as TableStore
const cascaderProps = { const cascaderProps = {
label: 'title', label: 'title',
value: 'id', value: 'id',
checkStrictly: true, checkStrictly: true,
emitPath: false emitPath: false
} }
const form: any = reactive({ const form: any = reactive({
code: '', code: '',
icon: '', icon: '',
id: '', id: '',
name: '', name: '',
path: '', path: '',
pid: '0', pid: '0',
remark: '', remark: '',
routeName: '', routeName: '',
sort: 100, sort: 100,
type: 0 type: 0
}) })
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (text: string, data: anyObj) => { const open = (text: string, data: anyObj) => {
title.value = text title.value = text
// 重置表单 // 重置表单
for (let key in form) { for (let key in form) {
form[key] = '' form[key] = ''
} }
form.pid = data.pid || '0' form.pid = data.pid || '0'
form.sort = 100 form.sort = 100
form.type = 0 form.type = 0
if (data.id) { if (data.id) {
for (let key in form) { for (let key in form) {
form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : '' form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : ''
} }
form.path = data.routePath || '' form.path = data.routePath || ''
form.name = data.title || '' form.name = data.title || ''
} }
dialogVisible.value = true dialogVisible.value = true
} }
const submit = async () => { const submit = async () => {
if (form.id) { if (form.id) {
await updateMenu(form) form.pid = form.pid||'0'
} else { await updateMenu(form)
form.code = 'menu' } else {
let obj = JSON.parse(JSON.stringify(form)) form.code = 'menu'
delete obj.id let obj = JSON.parse(JSON.stringify(form))
await addMenu(obj) delete obj.id
} await addMenu(obj)
emits('init') }
dialogVisible.value = false emits('init')
} dialogVisible.value = false
}
defineExpose({ open })
</script> defineExpose({ open })
</script>

View File

@@ -5,7 +5,7 @@
<div class="title">角色列表</div> <div class="title">角色列表</div>
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button> <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
</div> </div>
<Table ref="tableRef" @currentChange="currentChange" /> <Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }" @currentChange="currentChange" />
</div> </div>
<Tree <Tree
v-if="menuListId" v-if="menuListId"
@@ -13,8 +13,8 @@
show-checkbox show-checkbox
width="350px" width="350px"
:data="menuTree" :data="menuTree"
:checkStrictly="checkStrictly" :checkStrictly="false"
@check-change="checkChange" @checkChange="checkChange"
></Tree> ></Tree>
<el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else /> <el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
<PopupForm ref="popupRef"></PopupForm> <PopupForm ref="popupRef"></PopupForm>
@@ -26,7 +26,7 @@ import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import Tree from '@/components/tree/index.vue' import Tree from '@/components/tree/allocation.vue'
import { functionTree } from '@/api/user-boot/function' import { functionTree } from '@/api/user-boot/function'
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction' import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
@@ -43,6 +43,7 @@ const height = mainHeight(20).height
const treeRef = ref() const treeRef = ref()
const menuTree = ref<treeData[]>([]) const menuTree = ref<treeData[]>([])
const popupRef = ref() const popupRef = ref()
const tableRef = ref()
const checkStrictly = ref(true) const checkStrictly = ref(true)
const menuListId = ref('') const menuListId = ref('')
const tableStore = new TableStore({ const tableStore = new TableStore({
@@ -104,7 +105,13 @@ const tableStore = new TableStore({
} }
] ]
} }
] ],
loadCallback: () => {
tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
currentChange({
row: tableStore.table.data[0]
})
}
}) })
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
@@ -139,21 +146,22 @@ const currentChange = (data: any) => {
const timeout = ref<NodeJS.Timeout>() const timeout = ref<NodeJS.Timeout>()
const checkChange = (data: any) => { const checkChange = (data: any) => {
if (checkStrictly.value) { // if (checkStrictly.value) {
checkStrictly.value = false // checkStrictly.value = false
return // return
} // }
if (timeout.value) {
clearTimeout(timeout.value) updateRoleMenu({
} id: menuListId.value,
timeout.value = setTimeout(() => { idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
updateRoleMenu({ })
id: menuListId.value, .then(() => {
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
}).then(() => {
ElMessage.success('操作成功!') ElMessage.success('操作成功!')
treeRef.value.loading = false
})
.catch(() => {
treeRef.value.loading = false
}) })
}, 1000)
} }
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()

View File

@@ -83,14 +83,14 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ title: '设备名称', field: 'equipmentName', align: 'center' }, { title: '设备名称', field: 'equipmentName', align: 'center',minWidth: 100 },
{ title: '工程名称', field: 'engineeringName', align: 'center' }, { title: '工程名称', field: 'engineeringName', align: 'center',minWidth: 100 },
{ title: '项目名称', field: 'projectName', align: 'center' }, { title: '项目名称', field: 'projectName', align: 'center',minWidth: 100 },
{ title: '发生时刻', field: 'startTime', align: 'center', width: 180, sortable: true }, { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ {
title: '模块信息', title: '模块信息',
field: 'moduleNo', field: 'moduleNo',
align: 'center', align: 'center',minWidth: 100 ,
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
@@ -107,7 +107,7 @@ const tableStore = new TableStore({
}, },
{ {
title: '事件描述', title: '事件描述',
minWidth: 220, minWidth: 250,
field: 'showName' field: 'showName'
}, },
{ {

View File

@@ -35,10 +35,10 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ title: '前置服务器名称', field: 'lineId', align: 'center' }, { title: '前置服务器名称', field: 'lineId', align: 'center' ,minWidth: 120 },
{ title: '前置服务器ip', field: 'wavePath', align: 'center' }, { title: '前置服务器ip', field: 'wavePath', align: 'center' ,minWidth: 100 },
{ title: '进程号', field: 'clDid', align: 'center' }, { title: '进程号', field: 'clDid', align: 'center',minWidth: 60 },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 80, sortable: true }, { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ {
title: '事件描述', title: '事件描述',
@@ -48,7 +48,8 @@ const tableStore = new TableStore({
{ {
title: '告警代码', title: '告警代码',
field: 'code', field: 'code',
align: 'center', align: 'center',minWidth: 100 ,
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue ? '\u200B' + row.cellValue : '/' return row.cellValue ? '\u200B' + row.cellValue : '/'

View File

@@ -128,15 +128,15 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ title: '设备名称', field: 'equipmentName', align: 'center' }, { title: '设备名称', field: 'equipmentName', minWidth: 120,align: 'center' },
{ title: '工程名称', field: 'engineeringName', align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 120,align: 'center' },
{ title: '项目名称', field: 'projectName', align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 120,align: 'center' },
{ title: '发生时刻', field: 'startTime', align: 'center', width: '240',sortable: true }, { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180,sortable: true },
{ title: '监测点名称', field: 'lineName', align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 120,align: 'center' },
{ title: '事件描述', field: 'showName', align: 'center' }, { title: '事件描述', field: 'showName', minWidth: 120,align: 'center' },
{ title: '事件发生位置', field: 'evtParamPosition', align: 'center' }, { title: '事件发生位置', field: 'evtParamPosition',minWidth: 150, align: 'center' },
{ title: '相别', field: 'evtParamPhase', align: 'center' }, { title: '相别', field: 'evtParamPhase',minWidth: 80, align: 'center' },
{ title: '持续时间(s)', field: 'evtParamTm', align: 'center',sortable: true }, { title: '持续时间(s)', field: 'evtParamTm',minWidth: 80, align: 'center',sortable: true },
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true }, { title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true },
{ {
@@ -166,7 +166,7 @@ const tableStore = new TableStore({
boxoList.value = row boxoList.value = row
boxoList.value.featureAmplitude = boxoList.value.featureAmplitude =
row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
boxoList.value.systemType = 'WX' boxoList.value.systemType = 'ZL'
wp.value = res.data wp.value = res.data
} }
loading.value = false loading.value = false

File diff suppressed because it is too large Load Diff

View File

@@ -77,7 +77,6 @@
</el-descriptions-item> --> </el-descriptions-item> -->
</el-descriptions> </el-descriptions>
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick"> <el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane <el-tab-pane
lazy lazy
:label="item.name" :label="item.name"
@@ -87,7 +86,7 @@
> >
<template #label> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<el-icon> <!-- <el-icon>
<TrendCharts v-if="item.name == 'APF模块数据'" /> <TrendCharts v-if="item.name == 'APF模块数据'" />
<DataLine v-if="item.name == '历史APF模块数据'" /> <DataLine v-if="item.name == '历史APF模块数据'" />
<DataAnalysis v-if="item.name.includes('趋势数据')" /> <DataAnalysis v-if="item.name.includes('趋势数据')" />
@@ -113,7 +112,7 @@
!item.name.includes('暂态事件') !item.name.includes('暂态事件')
" "
/> />
</el-icon> </el-icon> -->
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</span> </span>
</template> </template>
@@ -157,7 +156,7 @@
</el-select> --> </el-select> -->
<el-radio-group <el-radio-group
v-model.trim="formInline.dataLevel" v-model.trim="formInline.dataLevel"
v-if="!dataSet.includes('_moduleData')" v-if="!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
:disabled="TrendList?.lineType != 1" :disabled="TrendList?.lineType != 1"
@change="handleClick" @change="handleClick"
> >
@@ -733,14 +732,14 @@ const handleHarmonicSpectrum = async () => {
// getRealDataMqttMsg() // getRealDataMqttMsg()
await getBasicRealData(lineId.value).then((res: any) => { await getBasicRealData(lineId.value).then((res: any) => {
if (res.code == 'A0000') { if (res.code == 'A0000') {
ElMessage.success('装置应答成功') ElMessage.success('装置应答成功')
// mqttMessage.value = {} // mqttMessage.value = {}
realDataTimer.value = window.setInterval(() => { realDataTimer.value = window.setInterval(() => {
if (!dataSet.value.includes('_realtimedata')) return if (!dataSet.value.includes('_realtimedata')) return
getBasicRealData(lineId.value).then((res: any) => { getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据') console.log(res, '获取基础实时数据')
}) })
}, 30000) }, 30000)
} }
@@ -838,7 +837,8 @@ const devData: any = ref({})
const lineId: any = ref('') const lineId: any = ref('')
const dataLevel: any = ref('') const dataLevel: any = ref('')
const dataSource = ref([]) const dataSource = ref([])
const nodeClick = async (e: anyObj) => { const engineeringName = ref('')
const nodeClick = async (e: anyObj, node: any) => {
if (e == undefined || e.level == 2) { if (e == undefined || e.level == 2) {
return (loading.value = false) return (loading.value = false)
} }
@@ -854,6 +854,8 @@ const nodeClick = async (e: anyObj) => {
//选中设备名称后,点击标签页也能查询数据,要求点击设备名称后,点击标签页默认查询第一个监测点数据 //选中设备名称后,点击标签页也能查询数据,要求点击设备名称后,点击标签页默认查询第一个监测点数据
if (e.level == 3 || e.level == 2) { if (e.level == 3 || e.level == 2) {
engineeringName.value = node?.parent.parent.data.name
await queryDictType({ await queryDictType({
lineId: e?.id, lineId: e?.id,
conType: e.conType conType: e.conType
@@ -979,49 +981,47 @@ const getRealDataMqttMsg = async () => {
}) })
}, 30000) }, 30000)
mqttRef.value.on('message', (topic: any, message: any) => { mqttRef.value.on('message', (topic: any, message: any) => {
// console.log( console.log(
// '实时数据&实时趋势---mqtt接收到消息', '实时数据&实时趋势---mqtt接收到消息',
// JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
// ) )
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
if (lineId.value != obj.lineId || adminInfo.userIndex != obj.userId) return if (lineId.value != obj.lineId || adminInfo.userIndex != obj.userId) return
//处理mqtt数据 1转2除 2转1乘 //处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值,下拉框是二次值只需要单位换算 除以1000 //如果消息返回值是二次值,下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值,下拉框是一次值只需要单位换算 除以1000 //如果消息返回值是一次值,下拉框是一次值只需要单位换算 除以1000
if (obj.dataLevel == formInline.dataLevel) { if (obj.dataLevel == formInline.dataLevel) {
obj = { obj = {
...obj, ...obj,
// 电压有效值 // 电压有效值
vRmsA: obj.vRmsA , vRmsA: obj.vRmsA,
vRmsB: obj.vRmsB , vRmsB: obj.vRmsB,
vRmsC: obj.vRmsC , vRmsC: obj.vRmsC,
//基波电压幅值 //基波电压幅值
v1A: obj.v1A , v1A: obj.v1A,
v1B: obj.v1B , v1B: obj.v1B,
v1C: obj.v1C , v1C: obj.v1C,
//有功功率 //有功功率
pA: obj.pA , pA: obj.pA,
pB: obj.pB , pB: obj.pB,
pC: obj.pC , pC: obj.pC,
pTot: obj.pTot , pTot: obj.pTot,
//无功功率 //无功功率
qA: obj.qA , qA: obj.qA,
qB: obj.qB , qB: obj.qB,
qC: obj.qC , qC: obj.qC,
qTot: obj.qTot , qTot: obj.qTot,
//视在功率 //视在功率
sA: obj.sA , sA: obj.sA,
sB: obj.sB , sB: obj.sB,
sC: obj.sC , sC: obj.sC,
sTot: obj.sTot sTot: obj.sTot
} }
} }
//如果消息返回值是二次值,下拉框是一次值需要单位换算 除以1000 并且乘以pt ct //如果消息返回值是二次值,下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') { if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
obj = { obj = {
...obj, ...obj,
// 电压有效值 // 电压有效值
@@ -1102,9 +1102,11 @@ const getRealDataMqttMsg = async () => {
} }
if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) { if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
mqttMessage.value = obj mqttMessage.value = obj
//更新实时数据主页面值 //更新实时数据主页面值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value,formInline.dataLevel) realTimeFlag.value &&
realTimeRef.value &&
realTimeRef.value.setRealData(mqttMessage.value, formInline.dataLevel)
tableLoading.value = false tableLoading.value = false
//更新实时趋势折线图数据 //更新实时趋势折线图数据
if (sonTab.value == 2) { if (sonTab.value == 2) {
@@ -1228,6 +1230,7 @@ const handleClick = async (tab?: any) => {
let obj = { let obj = {
devId: deviceId.value, //e.id devId: deviceId.value, //e.id
lineId: lineId.value, //e.pid lineId: lineId.value, //e.pid
engineeringName: engineeringName.value, //e.name
type: 3, type: 3,
list: [ list: [
{ {
@@ -1422,9 +1425,7 @@ const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value)?.label : '/' return value ? arr.find(item => item.value == value)?.label : '/'
} }
onMounted(() => { onMounted(() => {})
})
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(realDataTimer.value) clearInterval(realDataTimer.value)
clearInterval(trendTimer.value) clearInterval(trendTimer.value)

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,184 +1,191 @@
<!-- 暂态事件-波形分析组件 --> <!-- 暂态事件-波形分析组件 -->
<template> <template>
<div class="home"> <div class="home">
<div class="home_header"> <div class="home_header">
<!-- <el-form-item label="值类型选择"> <!-- <el-form-item label="值类型选择">
<el-select @change="changeView" v-model.trim="value" placeholder="请选择值类型"> <el-select @change="changeView" v-model.trim="value" placeholder="请选择值类型">
<el-option <el-option
v-for="(item, index) in options" v-for="(item, index) in options"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-radio-group v-model.trim="theTypeOfValue" @change="changeView"> <el-radio-group v-model.trim="theTypeOfValue" @change="changeView">
<el-radio-button label="一次值" :value="1" /> <el-radio-button label="一次值" :value="1" />
<el-radio-button label="二次值" :value="2" /> <el-radio-button label="二次值" :value="2" />
</el-radio-group>
</el-radio-group>
<el-button @click="handleBack" :icon="Back">返回</el-button>
<el-button @click="handleBack" :icon="Back">返回</el-button> </div>
<el-tabs
</div> class="home_body"
<el-tabs class="home_body" type="border-card" v-model.trim="activeName1" @tab-click="handleClick" type="border-card"
v-loading="loading"> v-model.trim="activeName1"
@tab-click="handleClick"
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'"> v-loading="loading"
<shushiboxi v-if="isWp && wp && activeName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList" >
:parentHeight="parentHeight" :wp="wp"> <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
</shushiboxi> <shushiboxi
</el-tab-pane> v-if="isWp && wp && activeName == 'ssbx' && showBoxi"
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'"> :value="value"
<rmsboxi v-if="isWp && wp && activeName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList" :boxoList="boxoList"
:parentHeight="parentHeight" :wp="wp"> :parentHeight="parentHeight"
</rmsboxi> :wp="wp"
</el-tab-pane> ></shushiboxi>
</el-tabs> </el-tab-pane>
</div> <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
</template> <rmsboxi
<script lang="ts" setup> v-if="isWp && wp && activeName == 'rmsbx' && showBoxi"
import { ref, onMounted, reactive, defineExpose, watch, defineEmits } from 'vue' :value="value"
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table' :boxoList="boxoList"
import { defaultAttribute } from '@/components/table/defaultAttribute' :parentHeight="parentHeight"
import shushiboxi from '@/components/echarts/shushiboxi.vue' :wp="wp"
import rmsboxi from '@/components/echarts/rmsboxi.vue' ></rmsboxi>
import MyEchart from '@/components/echarts/MyEchart.vue' </el-tab-pane>
import { Platform, TrendCharts, DataLine, Back } from '@element-plus/icons-vue' </el-tabs>
import { mainHeight } from '@/utils/layout' </div>
const props = defineProps(['wp']) </template>
const searchForm = ref({ <script lang="ts" setup>
type: 0 import { ref, onMounted, reactive, defineExpose, watch, defineEmits } from 'vue'
}) import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
const emit = defineEmits(['handleHideCharts']) import { defaultAttribute } from '@/components/table/defaultAttribute'
const parentHeight = ref(0) import shushiboxi from '@/components/echarts/shushiboxi.vue'
const loading = ref(false) import rmsboxi from '@/components/echarts/rmsboxi.vue'
const tableList: any = ref([]) import MyEchart from '@/components/echarts/MyEchart.vue'
for (let i = 0; i < 300; i++) { import { Platform, TrendCharts, DataLine, Back } from '@element-plus/icons-vue'
tableList.value.push({ import { mainHeight } from '@/utils/layout'
name: i + 1, const props = defineProps(['wp'])
value: Math.floor(Math.random() * 101) const searchForm = ref({
}) type: 0
} })
interface RowVO { const emit = defineEmits(['handleHideCharts'])
[key: string]: any const parentHeight = ref(0)
} const loading = ref(false)
//谐波电压含有率 const tableList: any = ref([])
const gridOptions = ref<VxeGridProps<RowVO>>({ for (let i = 0; i < 300; i++) {
border: true, tableList.value.push({
showOverflow: true, name: i + 1,
showHeader: false, value: Math.floor(Math.random() * 101)
columns: [], })
data: [], }
columnConfig: { interface RowVO {
resizable: true [key: string]: any
}, }
align: 'center' //谐波电压含有率
}) const gridOptions = ref<VxeGridProps<RowVO>>({
gridOptions.value = { ...defaultAttribute, ...gridOptions.value } border: true,
showOverflow: true,
const yAxisUnit: any = ref('') showHeader: false,
columns: [],
const echartsData1: any = ref([]), data: [],
echartsData2: any = ref([]), columnConfig: {
echartsData3: any = ref([]), resizable: true
barCharts1 = ref(), },
barCharts2 = ref(), align: 'center'
barCharts3 = ref() })
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const view = ref(true)
const view2 = ref(false) const yAxisUnit: any = ref('')
const showBoxi = ref(true)
const activeName1 = ref('ssbx') const echartsData1: any = ref([]),
const activeName = ref('ssbx') echartsData2: any = ref([]),
const wp = ref({}) echartsData3: any = ref([]),
const theTypeOfValue = ref(1) barCharts1 = ref(),
const value = ref(1) barCharts2 = ref(),
barCharts3 = ref()
const isWp = ref(false) const view = ref(true)
const boxoList: any = ref([]) const view2 = ref(false)
const getWpData = (val: any, list: any) => { const showBoxi = ref(true)
wp.value = val const activeName1 = ref('ssbx')
isWp.value = true const activeName = ref('ssbx')
boxoList.value = list const wp = ref({})
const theTypeOfValue = ref(1)
console.log(wp.value, val, 'ggggghhhh') const value = ref(1)
}
const changeView = () => { const isWp = ref(false)
showBoxi.value = false const boxoList: any = ref([])
loading.value = true const getWpData = (val: any, list: any) => {
setTimeout(() => { wp.value = val
value.value = theTypeOfValue.value isWp.value = true
showBoxi.value = true boxoList.value = list
}, 500) }
setTimeout(() => { const changeView = () => {
loading.value = false showBoxi.value = false
}, 1500) loading.value = true
} setTimeout(() => {
const bxecharts: any = ref(mainHeight(190).height as any) value.value = theTypeOfValue.value
showBoxi.value = true
const handleClick = (tab: any, event: any) => { }, 500)
loading.value = true setTimeout(() => {
setTimeout(() => { loading.value = false
activeName.value = tab.paneName }, 1500)
}, 500) }
setTimeout(() => { const bxecharts: any = ref(mainHeight(190).height as any)
loading.value = false
}, 1500) const handleClick = (tab: any, event: any) => {
} loading.value = true
const handleBack = () => { setTimeout(() => {
emit('handleHideCharts') activeName.value = tab.paneName
} }, 500)
const setHeight = (h: any, vh: any) => { setTimeout(() => {
if (h != false) { loading.value = false
parentHeight.value = h }, 1500)
} }
const handleBack = () => {
setTimeout(() => { emit('handleHideCharts')
bxecharts.value = mainHeight(vh).height }
}, 100) const setHeight = (h: any, vh: any, num = 1) => {
} console.log('🚀 ~ setHeight ~ h:', h)
onMounted(() => { }) if (h != false) {
defineExpose({ getWpData, setHeight }) parentHeight.value = h
</script> }
<style lang="scss" scoped>
// .tab_info { setTimeout(() => {
// width: 100%; bxecharts.value = mainHeight(vh, num).height
// height: calc(100vh - 450px); }, 100)
}
// // overflow: auto; onMounted(() => {})
// // padding-bottom: 20px; defineExpose({ getWpData, setHeight })
// .charts { </script>
// width: 100%; <style lang="scss" scoped>
// margin-top: 10px; // .tab_info {
// height: calc(100vh - 450px); // width: 100%;
// } // height: calc(100vh - 450px);
// }
// // overflow: auto;
.home { // // padding-bottom: 20px;
width: 100%; // .charts {
height: 100%; // width: 100%;
display: flex; // margin-top: 10px;
flex-direction: column; // height: calc(100vh - 450px);
position: relative; // }
// }
.home_header {
.home {
height: 50px; width: 100%;
display: flex; height: 100%;
align-items: center; display: flex;
justify-content: space-between; flex-direction: column;
position: relative;
.el-select {
width: 200px !important; .home_header {
} height: 50px;
} display: flex;
align-items: center;
.home_body { justify-content: space-between;
// margin-top: 20px;
flex: 1; .el-select {
} width: 200px !important;
} }
</style> }
.home_body {
// margin-top: 20px;
flex: 1;
}
}
</style>

View File

@@ -2,8 +2,13 @@
<div class="view"> <div class="view">
<TableHeader datePicker ref="headerRef" v-if="!isWaveCharts" :showReset="false"></TableHeader> <TableHeader datePicker ref="headerRef" v-if="!isWaveCharts" :showReset="false"></TableHeader>
<Table ref="tableRef" v-if="!isWaveCharts" /> <Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef" <waveFormAnalysis
@handleHideCharts="isWaveCharts = false" :wp="wp" /> v-loading="loading"
v-if="isWaveCharts"
ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false"
:wp="wp"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -15,7 +20,7 @@ import TableHeader from '@/components/table/header/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue' import waveFormAnalysis from './components/waveFormAnalysis.vue'
import { ArrowLeft, Message } from '@element-plus/icons-vue' import { ArrowLeft, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { analyseWave,getFileByEventId } from '@/api/common' import { analyseWave, getFileByEventId } from '@/api/common'
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend' import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
const tableParams: any = ref({}) const tableParams: any = ref({})
const refheader = ref() const refheader = ref()
@@ -31,12 +36,11 @@ const waveFormAnalysisRef = ref()
const headerRef = ref() const headerRef = ref()
const props = defineProps({ const props = defineProps({
deviceType: { deviceType: {
type: String, type: String,
default: '0' default: '0'
} }
}); })
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/deviceDataByType', url: '/cs-device-boot/csGroup/deviceDataByType',
@@ -45,7 +49,9 @@ const tableStore: any = new TableStore({
column: [ column: [
// { width: '60', type: 'checkbox', fixed: 'left' }, // { width: '60', type: 'checkbox', fixed: 'left' },
{ {
title: '序号', width: 80, formatter: (row: any) => { title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
@@ -65,10 +71,11 @@ const tableStore: any = new TableStore({
title: '持续时间(s)', title: '持续时间(s)',
minWidth: 100, minWidth: 100,
formatter: (row: any) => { formatter: (row: any) => {
console.log('row.cellValue', row.cellValue) console.log('row.cellValue', row.cellValue)
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/' row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
return row.cellValue return row.cellValue
}, sortable: true },
sortable: true
}, },
{ {
field: 'featureAmplitude', field: 'featureAmplitude',
@@ -109,7 +116,9 @@ const tableStore: any = new TableStore({
row.loading1 = false row.loading1 = false
if (res != undefined) { if (res != undefined) {
boxoList.value = row boxoList.value = row
boxoList.value.systemType = 'WX' boxoList.value.systemType = 'YPT'
boxoList.value.engineeringName = tableParams.value.engineeringName
console.log("🚀 ~ tableParams.value.engineeringName:", tableParams.value.engineeringName)
wp.value = res.data wp.value = res.data
view.value = false view.value = false
view2.value = true view2.value = true
@@ -134,7 +143,7 @@ const tableStore: any = new TableStore({
icon: 'el-icon-DataLine', icon: 'el-icon-DataLine',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.showName != '未知'; return row.showName != '未知'
} }
}, },
{ {
@@ -158,25 +167,24 @@ const tableStore: any = new TableStore({
document.body.appendChild(link) document.body.appendChild(link)
link.click() //执行下载 link.click() //执行下载
document.body.removeChild(link) //释放标签 document.body.removeChild(link) //释放标签
}) })
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '波形补召', title: '波形补召',
type: 'primary', type: 'primary',
icon: 'el-icon-Check', icon: 'el-icon-Check',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return props.deviceType === '2' && row.wavePath || row.showName === '未知'; return (props.deviceType === '2' && row.wavePath) || row.showName === '未知'
}, },
click: row => { click: row => {
getFileByEventId(row.id).then(res => { getFileByEventId(row.id).then(res => {
ElMessage.success(res.message) ElMessage.success(res.message)
tableStore.index() tableStore.index()
}) })
} }
} }
] ]
} }
@@ -186,9 +194,10 @@ const tableStore: any = new TableStore({
tableStore.table.params.devId = tableParams.value.devId tableStore.table.params.devId = tableParams.value.devId
tableStore.table.params.lineId = tableParams.value.lineId tableStore.table.params.lineId = tableParams.value.lineId
tableStore.table.params.list = tableParams.value.list tableStore.table.params.list = tableParams.value.list
console.log('🚀 ~ ableParams.value:', tableParams.value)
tableStore.table.params.type = 3 tableStore.table.params.type = 3
}, },
loadCallback: () => { } loadCallback: () => {}
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
const isWaveCharts = ref(false) const isWaveCharts = ref(false)

View File

@@ -232,6 +232,7 @@ const init = async () => {
loading.value = true loading.value = true
// 选择指标的时候切换legend内容和data数据 // 选择指标的时候切换legend内容和data数据
let list: any = [] let list: any = []
echartsData.value={}
legendDictList.value?.selectedList?.map((item: any) => { legendDictList.value?.selectedList?.map((item: any) => {
searchForm.value.index.map((vv: any) => { searchForm.value.index.map((vv: any) => {
if (item.dataType == vv) { if (item.dataType == vv) {

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading"> <div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList> <GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
<div class="device-manage-right" :style="{ height: pageHeight.height }"> <div class="device-manage-right" :style="{ height: pageHeight.height }">
<el-descriptions title="用户基本信息" class="mb10" :column="2" border> <el-descriptions title="用户基本信息" class="mb10" :column="2" border>
@@ -65,10 +65,10 @@ import { queryByUseId, add, removeMarketData, queryEnginnerByUseId } from '@/api
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
const pageHeight = mainHeight(20) const pageHeight = mainHeight(60)
const loading = ref(true) const loading = ref(true)
const tableHeight = mainHeight(135) const tableHeight = mainHeight(173)
const user: any = ref({}) const user: any = ref({})
const tableData = ref([]) const tableData = ref([])
const tableData2 = ref([]) const tableData2 = ref([])

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading"> <div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree> <OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
<div class="device-manage-right" :style="{ height: pageHeight.height }"> <div class="device-manage-right" :style="{ height: pageHeight.height }">
<div class="el-descriptions__header"> <div class="el-descriptions__header">
@@ -134,7 +134,7 @@ import { add, removeUserDev, queryDevByUseId } from '@/api/cs-system-boot/offici
import { ref } from 'vue' import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
const pageHeight = mainHeight(20) const pageHeight = mainHeight(60)
const loading = ref(true) const loading = ref(true)
const user: any = ref({}) const user: any = ref({})

View File

@@ -0,0 +1,22 @@
<template>
<div class="default-main">
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="营销用户" name="1"><Disposition v-if="activeName == '1'" /></el-tab-pane>
<el-tab-pane label="正式用户" name="2"><OfficialUser v-if="activeName == '2'" /></el-tab-pane>
<el-tab-pane label="游客" name="3"><Tourist v-if="activeName == '3'" /></el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Disposition from '@/views/govern/device/disposition/index.vue'
import OfficialUser from '@/views/govern/device/officialUser/index.vue'
import Tourist from '@/views/govern/device/tourist/index.vue'
const activeName = ref('1')
</script>
<style lang="scss" scoped>
:deep(.el-tabs--border-card > .el-tabs__content) {
padding: 0px;
}
</style>

View File

@@ -1,191 +1,191 @@
<template> <template>
<div> <div>
<Table ref="tableRef" v-if="!isWaveCharts" /> <Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef" <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false" :wp="wp" /> @handleHideCharts="isWaveCharts = false" :wp="wp" />
</div> </div>
<!-- <TableHeader :showReset="false"> <!-- <TableHeader :showReset="false">
</TableHeader> --> </TableHeader> -->
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { ref, provide, onMounted, nextTick } from 'vue' import { ref, provide, onMounted, nextTick } from 'vue'
import { getEventByItem } from '@/api/cs-device-boot/planData' import { getEventByItem } from '@/api/cs-device-boot/planData'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'; import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
import { analyseWave } from '@/api/common' import { analyseWave } from '@/api/common'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend' import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
const props = defineProps({ const props = defineProps({
activeName: String, activeName: String,
activeColName: [Object, String] activeColName: [Object, String]
}) })
const loading = ref(false) const loading = ref(false)
const waveFormAnalysisRef = ref() const waveFormAnalysisRef = ref()
const isWaveCharts = ref(false) const isWaveCharts = ref(false)
const boxoList: any = ref([]) const boxoList: any = ref([])
const wp = ref({}) const wp = ref({})
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/cs-harmonic-boot/data/getEventByItem', url: '/cs-harmonic-boot/data/getEventByItem',
method: 'POST', method: 'POST',
paramsPOST: true, paramsPOST: true,
showPage: false, showPage: false,
publicHeight: 355, publicHeight: 355,
column: [ column: [
// { width: '60', type: 'checkbox', fixed: 'left' }, // { width: '60', type: 'checkbox', fixed: 'left' },
{ {
title: '序号', width: 80, formatter: (row: any) => { title: '序号', width: 80, formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ field: 'startTime', title: '发生时刻', minWidth: 170, sortable: true }, { field: 'startTime', title: '发生时刻', minWidth: 170, sortable: true },
{ field: 'showName', title: '事件描述', minWidth: 170 }, { field: 'showName', title: '事件描述', minWidth: 170 },
{ {
field: 'phaseType', field: 'phaseType',
title: '相别', title: '相别',
minWidth: 100, minWidth: 100,
formatter: (row: any) => { formatter: (row: any) => {
row.cellValue = row.cellValue ? row.cellValue : '/' row.cellValue = row.cellValue ? row.cellValue : '/'
return row.cellValue return row.cellValue
} }
}, },
{ {
field: 'persistTime', field: 'persistTime',
title: '持续时间(s)', title: '持续时间(s)',
minWidth: 100, minWidth: 100,
formatter: (row: any) => { formatter: (row: any) => {
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/' row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
return row.cellValue return row.cellValue
}, sortable: true }, sortable: true
}, },
{ {
field: 'featureAmplitude', field: 'featureAmplitude',
title: '暂降(聚升)幅值(%)', title: '暂降(聚升)幅值(%)',
minWidth: 100, minWidth: 100,
formatter: (row: any) => { formatter: (row: any) => {
row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/' row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
if (String(row.cellValue).split('.')[1] == '00') { if (String(row.cellValue).split('.')[1] == '00') {
row.cellValue = String(row.cellValue).split('.')[0] row.cellValue = String(row.cellValue).split('.')[0]
} }
return row.cellValue return row.cellValue
}, sortable: true }, sortable: true
}, },
{ {
title: '操作', title: '操作',
width: 180, width: 180,
render: 'buttons', render: 'buttons',
fixed: 'right', fixed: 'right',
buttons: [ buttons: [
{ {
name: 'edit', name: 'edit',
title: '波形分析', title: '波形分析',
type: 'primary', type: 'primary',
icon: 'el-icon-Check', icon: 'el-icon-Check',
render: 'basicButton', render: 'basicButton',
loading: 'loading1', loading: 'loading1',
disabled: row => { disabled: row => {
// && row.evtParamTm < 20 // && row.evtParamTm < 20
return !row.wavePath return !row.wavePath
}, },
click: async row => { click: async row => {
row.loading1 = true row.loading1 = true
loading.value = true loading.value = true
isWaveCharts.value = true isWaveCharts.value = true
await analyseWave(row.id) await analyseWave(row.id)
.then(res => { .then(res => {
row.loading1 = false row.loading1 = false
if (res != undefined) { if (res != undefined) {
boxoList.value = row boxoList.value = row
boxoList.value.systemType = 'WX' boxoList.value.systemType = 'YPT'
wp.value = res.data wp.value = res.data
} }
loading.value = false loading.value = false
}) })
.catch(() => { .catch(() => {
row.loading1 = false row.loading1 = false
loading.value = false loading.value = false
}) })
nextTick(() => { nextTick(() => {
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true) waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
setHeight() setHeight()
}) })
} }
}, },
{ {
name: 'edit', name: 'edit',
text: '暂无波形', text: '暂无波形',
type: 'info', type: 'info',
icon: 'el-icon-DataLine', icon: 'el-icon-DataLine',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.wavePath return row.wavePath
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '波形下载', title: '波形下载',
type: 'primary', type: 'primary',
loading: 'loading2', loading: 'loading2',
icon: 'el-icon-Check', icon: 'el-icon-Check',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
// && row.evtParamTm < 20 // && row.evtParamTm < 20
return !row.wavePath return !row.wavePath
}, },
click: row => { click: row => {
getFileZip({ eventId: row.id }).then(res => { getFileZip({ eventId: row.id }).then(res => {
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接 let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob) const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签 const link = document.createElement('a') // 创建a标签
link.href = url link.href = url
link.download = row.wavePath.split('/')[2] || '波形文件' // 设置下载的文件名 link.download = row.wavePath.split('/')[2] || '波形文件' // 设置下载的文件名
document.body.appendChild(link) document.body.appendChild(link)
link.click() //执行下载 link.click() //执行下载
document.body.removeChild(link) //释放标签 document.body.removeChild(link) //释放标签
}) })
} }
} }
] ]
} }
], ],
loadCallback: () => { loadCallback: () => {
} }
}) })
const setHeight = () => { const setHeight = () => {
if (props.activeColName == '0') { if (props.activeColName == '0') {
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 485) waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 485)
tableStore.table.height = mainHeight(380).height tableStore.table.height = mainHeight(380).height
} else { } else {
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 350) waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 350)
tableStore.table.height = mainHeight(240).height tableStore.table.height = mainHeight(240).height
} }
} }
provide('tableStore', tableStore) provide('tableStore', tableStore)
const init = () => { const init = () => {
tableStore.table.params.id = props.activeName tableStore.table.params.id = props.activeName
// getEventByItem({ id: props.activeName }).then(res => { // getEventByItem({ id: props.activeName }).then(res => {
// }) // })
tableStore.index() tableStore.index()
} }
onMounted(() => { onMounted(() => {
}) })
defineExpose({ init, setHeight }) defineExpose({ init, setHeight })
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@@ -1,95 +1,96 @@
<template> <template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading"> <div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree <DeviceTree
:showCheckbox="true" :showCheckbox="true"
:default-checked-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange" @checkChange="checkChange"
></DeviceTree> :height="35"
<div class="device-manage-right" :style="{ height: pageHeight.height }"> ></DeviceTree>
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%"> <div class="device-manage-right" :style="{ height: pageHeight.height }">
<vxe-column field="enginerName" title="工程名称"></vxe-column> <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
<vxe-column field="projectName" title="项目名称"></vxe-column> <vxe-column field="enginerName" title="工程名称"></vxe-column>
<vxe-column field="deviceName" title="装置名称"></vxe-column> <vxe-column field="projectName" title="项目名称"></vxe-column>
</vxe-table> <vxe-column field="deviceName" title="装置名称"></vxe-column>
</div> </vxe-table>
</div> </div>
</template> </div>
</template>
<script setup lang="ts">
defineOptions({ <script setup lang="ts">
name: 'govern/tourist/index' defineOptions({
}) name: 'govern/tourist/index'
import { defaultAttribute } from '@/components/table/defaultAttribute' })
import DeviceTree from '@/components/tree/govern/deviceTree.vue' import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout' import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user' import { mainHeight } from '@/utils/layout'
import { ref, onMounted } from 'vue' import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
import { ref, onMounted } from 'vue'
const pageHeight = mainHeight(20)
const loading = ref(true) const pageHeight = mainHeight(60)
const defaultCheckedKeys: any = ref([]) const loading = ref(true)
const tableData = ref([]) const defaultCheckedKeys: any = ref([])
const tableData = ref([])
const checkChange = (data: any) => {
if (data.data.level === 2) { const checkChange = (data: any) => {
if (data.checked) { if (data.data.level === 2) {
defaultCheckedKeys.value.push(data.data.id) if (data.checked) {
} else { defaultCheckedKeys.value.push(data.data.id)
defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1) } else {
} defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
loading.value = true }
updateVisitorConfigs() loading.value = true
} updateVisitorConfigs()
} }
const updateVisitorConfigs = () => { }
const result = Array.from(new Set(defaultCheckedKeys.value)) const updateVisitorConfigs = () => {
updateVisitorConfig( const result = Array.from(new Set(defaultCheckedKeys.value))
result.map(item => { updateVisitorConfig(
return { result.map(item => {
deviceId: item return {
} deviceId: item
}) }
).then((res: any) => { })
if (res.code === 'A0000') { ).then((res: any) => {
getVisitorConfigs() if (res.code === 'A0000') {
} getVisitorConfigs()
}) }
} })
const getVisitorConfigs = () => { }
getVisitorConfig().then((res:any) => { const getVisitorConfigs = () => {
if (res.code === 'A0000') { getVisitorConfig().then((res:any) => {
tableData.value = res.data if (res.code === 'A0000') {
loading.value = false tableData.value = res.data
if (defaultCheckedKeys.value.length > 0) return loading.value = false
defaultCheckedKeys.value = [] // 清空 if (defaultCheckedKeys.value.length > 0) return
res.data.forEach((item:any) => { defaultCheckedKeys.value = [] // 清空
defaultCheckedKeys.value.push(item.deviceId) res.data.forEach((item:any) => {
}) defaultCheckedKeys.value.push(item.deviceId)
} })
}) }
} })
}
onMounted(() => {
// if (!adminInfo.token) return router.push({ name: 'login' }) onMounted(() => {
// if (!adminInfo.token) return router.push({ name: 'login' })
getVisitorConfigs()
}) getVisitorConfigs()
</script> })
</script>
<style lang="scss">
.device-manage { <style lang="scss">
display: flex; .device-manage {
display: flex;
&-right {
overflow: hidden; &-right {
flex: 1; overflow: hidden;
padding: 10px 10px 10px 0; flex: 1;
.el-descriptions__header { padding: 10px 10px 10px 0;
height: 36px; .el-descriptions__header {
margin-bottom: 7px; height: 36px;
display: flex; margin-bottom: 7px;
align-items: center; display: flex;
} align-items: center;
} }
} }
</style> }
</style>

View File

@@ -1,165 +1,165 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader ref="tableHeaderRef"> <TableHeader ref="tableHeaderRef">
<template #select> <template #select>
<el-form-item label="装置型号:"> <el-form-item label="装置型号:">
<el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable> <el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable>
<el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name" <el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option> :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template #operation> <template #operation>
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增版本</el-button> <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增版本</el-button>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
<PopupVersion ref="popupVersionRef" v-if="showPopup"></PopupVersion> <PopupVersion ref="popupVersionRef" v-if="showPopup"></PopupVersion>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, provide } from 'vue' import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { delCsDictData } from '@/api/system-boot/csDictData' import { delCsDictData } from '@/api/system-boot/csDictData'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { queryByCode, queryByid } from '@/api/system-boot/dictTree' import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import PopupVersion from '@/views/govern/manage/basic/popupVersion.vue' import PopupVersion from '@/views/govern/manage/basic/popupVersion.vue'
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import { auditEdData } from '@/api/cs-device-boot/edData' import { auditEdData } from '@/api/cs-device-boot/edData'
defineOptions({ defineOptions({
name: 'govern/manage/basic/version' name: 'govern/manage/basic/version'
}) })
const popupVersionRef = ref() const popupVersionRef = ref()
const dictData = useDictData() const dictData = useDictData()
const showPopup = ref(false) const showPopup = ref(false)
const DevTypeOptions = ref() const DevTypeOptions = ref()
const tableHeaderRef = ref() const tableHeaderRef = ref()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/cs-device-boot/edData/queryEdDataPage', url: '/cs-device-boot/edData/queryEdDataPage',
method: 'POST', method: 'POST',
column: [ column: [
{ title: '装置型号', field: 'devTypeName' }, { title: '装置型号', field: 'devTypeName' },
{ title: '版本号', field: 'versionNo' }, { title: '版本号', field: 'versionNo' },
{ title: '版本协议', field: 'versionAgreement' }, { title: '版本协议', field: 'versionAgreement' },
{ title: '版本日期', field: 'versionDate' }, { title: '版本日期', field: 'versionDate' },
{ title: '归档日期', field: 'updateTime' }, { title: '归档日期', field: 'updateTime' },
{ title: '描述', field: 'description' }, { title: '描述', field: 'description' },
{ {
title: '状态', field: 'status', render: 'tag', title: '状态', field: 'status', render: 'tag',
custom: { custom: {
1: 'error', 0: 'error',
0: 'success', 1: 'success',
}, },
replaceValue: { replaceValue: {
1: '禁用', 0: '禁用',
0: '启用', 1: '启用',
} }
}, },
{ {
title: '操作', title: '操作',
align: 'center', align: 'center',
width: '180', width: '180',
render: 'buttons', render: 'buttons',
buttons: [ buttons: [
{ {
name: 'edit', name: 'edit',
title: '编辑', title: '编辑',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
click: row => { click: row => {
popupVersionRef.value.open('编辑版本', row) popupVersionRef.value.open('编辑版本', row)
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '启用', title: '启用',
type: 'primary', type: 'primary',
icon: 'el-icon-Open', icon: 'el-icon-Open',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.status == 1 return row.status == 1
}, },
click: row => { click: row => {
auditEdData({ auditEdData({
id: row.id, id: row.id,
status: 1 status: 1
}).then((res: any) => { }).then((res: any) => {
ElMessage.success('启用成功') ElMessage.success('启用成功')
tableStore.index() tableStore.index()
}) })
} }
}, },
{ {
name: 'del', name: 'del',
title: '禁用', title: '禁用',
type: 'danger', type: 'danger',
icon: 'el-icon-SwitchButton', icon: 'el-icon-SwitchButton',
render: 'confirmButton', render: 'confirmButton',
popconfirm: { popconfirm: {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
confirmButtonType: 'danger', confirmButtonType: 'danger',
title: '确定禁用吗?' title: '确定禁用吗?'
}, },
disabled: row => { disabled: row => {
return row.status == 0 return row.status == 0
}, },
click: row => { click: row => {
auditEdData({ auditEdData({
id: row.id, id: row.id,
status: 0 status: 0
}).then((res: any) => { }).then((res: any) => {
ElMessage.success('禁用成功') ElMessage.success('禁用成功')
tableStore.index() tableStore.index()
}) })
} }
} }
] ]
} }
], ],
loadCallback: () => { loadCallback: () => {
tableStore.table.data.forEach((item: any) => { tableStore.table.data.forEach((item: any) => {
item.statusName = item.status == 1 ? '禁用' : '启用' item.statusName = item.status == 1 ? '禁用' : '启用'
for (let key in item) { for (let key in item) {
if (typeof item[key] !== 'number') { if (typeof item[key] !== 'number') {
item[key] = item[key] || '/' item[key] = item[key] || '/'
} }
} }
}) })
} }
}) })
queryByCode('Device_Type').then(res => { queryByCode('Device_Type').then(res => {
const id = res.data.id const id = res.data.id
queryByid(id).then(res1 => { queryByid(id).then(res1 => {
res1.data.map((item: any, index: any) => { res1.data.map((item: any, index: any) => {
if (item.pid == id) { if (item.pid == id) {
res1.data.splice(index, 1) res1.data.splice(index, 1)
} }
}) })
console.log("🚀 ~ res1.data.map ~ res1.data:", res1.data) console.log("🚀 ~ res1.data.map ~ res1.data:", res1.data)
DevTypeOptions.value = res1.data DevTypeOptions.value = res1.data
}) })
}) })
tableStore.table.params.devType = '' tableStore.table.params.devType = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
tableHeaderRef.value.onComSearch() tableHeaderRef.value.onComSearch()
}) })
const addMenu = () => { const addMenu = () => {
showPopup.value = true showPopup.value = true
setTimeout(() => { setTimeout(() => {
popupVersionRef.value.open('新增版本') popupVersionRef.value.open('新增版本')
}, 100) }, 100)
} }
</script> </script>

View File

@@ -6,7 +6,7 @@
<el-button type="primary" :icon="Setting" @click="recall2">波形补召</el-button> <el-button type="primary" :icon="Setting" @click="recall2">波形补召</el-button>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
</div> </div>
</template> </template>
@@ -16,17 +16,16 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { Setting } from '@element-plus/icons-vue' import { Setting } from '@element-plus/icons-vue'
import {eventRecall,fileRecall,logRecall} from '@/api/cs-device-boot/recall' import { eventRecall, fileRecall, logRecall } from '@/api/cs-device-boot/recall'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { el } from 'element-plus/es/locale' import { el } from 'element-plus/es/locale'
const props = defineProps({ const props = defineProps({
checkedNodes: { checkedNodes: {
type: Array, type: Array,
default: () => [] default: () => []
} }
}); })
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/cs-device-boot/csTerminalReply/bzLogs', url: '/cs-device-boot/csTerminalReply/bzLogs',
@@ -34,14 +33,16 @@ const tableStore: any = new TableStore({
method: 'POST', method: 'POST',
column: [ column: [
{ {
title: '序号', width: 80, formatter: (row: any) => { title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ {
field: 'engineeringName', field: 'engineeringName',
title: '项目名称', title: '项目名称',
width: 120,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
@@ -49,23 +50,23 @@ const tableStore: any = new TableStore({
{ {
field: 'projectName', field: 'projectName',
title: '工程名称', title: '工程名称',
width: 120,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, },
{ {
field: 'deviceName', field: 'deviceName',
title: '设备名称', title: '设备名称',
width: 120,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, },
{ {
field: 'lineName', field: 'lineName',
title: '监测点名称', title: '监测点名称',
width: 120,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
@@ -73,23 +74,23 @@ const tableStore: any = new TableStore({
{ {
field: 'logTime', field: 'logTime',
title: '补召时间', title: '补召时间',
width: 160,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, },
{ {
field: 'log', field: 'log',
title: '类型', title: '类型',
width: 80,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, },
{ {
field: 'status', field: 'status',
title: '状态', title: '状态',
width: 80,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
@@ -97,25 +98,22 @@ const tableStore: any = new TableStore({
{ {
field: 'result', field: 'result',
title: '结果', title: '结果',
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
if (!nodeClick.value || nodeClick.value.level !== 3) { if (!nodeClick.value || nodeClick.value.level !== 3) {
ElMessage.warning('请先选中监测点') ElMessage.warning('请先选中监测点')
return // 阻止查询 return // 阻止查询
} }
if (nodeClick.value) { if (nodeClick.value) {
tableStore.table.params.searchValue = nodeClick.value.id tableStore.table.params.searchValue = nodeClick.value.id
} }
}, },
loadCallback: () => { loadCallback: () => {}
}
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
@@ -127,19 +125,18 @@ const handleTreeNodeClick = (node: any) => {
if (tableStore && tableStore.index) { if (tableStore && tableStore.index) {
// 判断当前节点是否为监测点层级 // 判断当前节点是否为监测点层级
if (node) { if (node) {
if (node.level !== 3) { if (node.level !== 3) {
ElMessage.warning('请先选中监测点') ElMessage.warning('请先选中监测点')
return return
} }
}else { } else {
ElMessage.warning('请先选中监测点') ElMessage.warning('请先选中监测点')
return return
} }
tableStore.index() tableStore.index()
} }
} }
const recall1 = async () => { const recall1 = async () => {
if (!props.checkedNodes || props.checkedNodes.length === 0) { if (!props.checkedNodes || props.checkedNodes.length === 0) {
ElMessage.warning('请先勾选监测点') ElMessage.warning('请先勾选监测点')
@@ -163,13 +160,12 @@ const recall2 = async () => {
await fileRecall({ await fileRecall({
startTime: tableStore.table.params.startTime, startTime: tableStore.table.params.startTime,
endTime: tableStore.table.params.endTime, endTime: tableStore.table.params.endTime,
lineList: props.checkedNodes.map((node: any) => node.id) lineList: props.checkedNodes.map((node: any) => node.id)
}).then((res: any) => { }).then((res: any) => {
ElMessage.success('补召波形成功') ElMessage.success('补召波形成功')
}) })
} }
// 暴露方法给父组件调用 // 暴露方法给父组件调用
defineExpose({ defineExpose({
handleTreeNodeClick handleTreeNodeClick
@@ -194,4 +190,4 @@ defineExpose({
.view :deep(.el-table) { .view :deep(.el-table) {
height: calc(100% - 56px); height: calc(100% - 56px);
} }
</style> </style>

View File

@@ -1,214 +1,229 @@
<template> <template>
<el-dialog <el-dialog
draggable draggable
:title="title" :title="title"
v-model.trim="dialogVisible" v-model.trim="dialogVisible"
width="500px" width="500px"
:before-close="handleClose" :before-close="handleClose"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form"> <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form-one">
<el-form-item label="项目名称:" prop="name"> <el-form-item label="项目名称:" prop="name">
<el-input <el-input
maxlength="32" maxlength="32"
show-word-limit show-word-limit
v-model.trim="form.name" v-model.trim="form.name"
placeholder="请输入项目名称" placeholder="请输入项目名称"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="工程项目:" class="top" prop="projectIds"> <el-form-item label="是否全局:" class="top" v-if="hasAdmin">
<el-tree-select <el-switch
v-model.trim="form.projectIds" v-model="form.scope"
default-expand-all inline-prompt
show-checkbox width="60px"
node-key="id" :active-value="1"
:props="defaultProps" :inactive-value="0"
multiple active-text=" "
:data="Engineering" inactive-text=" "
collapse-tags />
style="width: 100%" </el-form-item>
/> <el-form-item label="工程项目:" class="top" prop="projectIds" v-if="!hasAdmin || form.scope == 0">
<!-- <el-cascader v-model.trim="form.projectIds" :options="Engineering" :props="defaultProps" <el-tree-select
:show-all-levels="false" collapse-tags collapse-tags-tooltip clearable style="width: 100%;"/> --> v-model.trim="form.projectIds"
</el-form-item> default-expand-all
<el-form-item label="项目排序:" prop="orderBy"> show-checkbox
<el-input node-key="id"
maxlength="32" :props="defaultProps"
show-word-limit-number multiple
v-model.trim="form.orderBy" :data="Engineering"
:min="0" collapse-tags
:step="1" style="width: 100%"
step-strictly />
style="width: 100%" </el-form-item>
/> <el-form-item label="项目排序:" prop="orderBy">
</el-form-item> <el-input
maxlength="32"
<el-form-item label="备注:" class="top"> show-word-limit-number
<el-input v-model.trim="form.orderBy"
maxlength="300" :min="0"
show-word-limit :step="1"
type="textarea" step-strictly
:rows="2" style="width: 100%"
placeholder="请输入内容" />
v-model.trim="form.remark" </el-form-item>
></el-input>
</el-form-item> <el-form-item label="备注:" class="top">
</el-form> <el-input
maxlength="300"
<template #footer> show-word-limit
<span class="dialog-footer"> type="textarea"
<el-button @click="dialogVisible = false"> </el-button> :rows="2"
<el-button type="primary" @click="addFn">确定</el-button> placeholder="请输入内容"
</span> v-model.trim="form.remark"
</template> ></el-input>
</el-dialog> </el-form-item>
</template> </el-form>
<script setup lang="ts">
import { ref, reactive } from 'vue' <template #footer>
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph' <span class="dialog-footer">
import { ElMessage, ElMessageBox } from 'element-plus' <el-button @click="dialogVisible = false"> </el-button>
const title = ref('') <el-button type="primary" @click="addFn">确定</el-button>
const formRef = ref() </span>
const Engineering = ref([]) </template>
const dialogVisible = ref(false) </el-dialog>
const emit = defineEmits(['submit']) </template>
const defaultProps = { <script setup lang="ts">
children: 'children', import { ref, reactive } from 'vue'
value: 'id', import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
label: 'name', import { ElMessage, ElMessageBox } from 'element-plus'
multiple: true, import { useAdminInfo } from '@/stores/adminInfo'
expandTrigger: 'hover' as const const adminInfo = useAdminInfo()
} const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager')|| item.includes('root'))
const form: any = reactive({ const title = ref('')
name: '', const formRef = ref()
projectIds: [], const Engineering = ref([])
orderBy: '100', const dialogVisible = ref(false)
remark: '' const emit = defineEmits(['submit'])
}) const defaultProps = {
const rules = { children: 'children',
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }], value: 'id',
projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }], label: 'name',
orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }] multiple: true,
} expandTrigger: 'hover' as const
const addFn = () => { }
console.log('🚀 ~ add ~ form:', form) const form: any = reactive({
name: '',
formRef.value.validate((valid: boolean) => { projectIds: [],
if (valid) { scope: 1,
if (title.value == '新增项目') { orderBy: '100',
add(form).then((res: any) => { remark: ''
ElMessage.success('新增项目成功!') })
dialogVisible.value = false const rules = {
emit('submit') name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
}) projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }],
} else { orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
audit(form).then((res: any) => { }
ElMessage.success('修改项目成功!') const addFn = () => {
dialogVisible.value = false console.log('🚀 ~ add ~ form:', form)
emit('submit')
}) formRef.value.validate((valid: boolean) => {
} if (valid) {
} if (title.value == '新增项目') {
}) add({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then(
} (res: any) => {
const handleTree = (data: any) => { ElMessage.success('新增项目成功!')
if (data && data.length != 0) { dialogVisible.value = false
data.map((item: any) => { emit('submit')
if (item.level != 2) { }
item.disabled = true )
} else { } else {
item.disabled = false audit({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then((res: any) => {
} ElMessage.success('修改项目成功!')
}) dialogVisible.value = false
} emit('submit')
} })
const open = ref((row: any) => { }
formRef.value?.resetFields() }
// deviceTree({}).then((res: any) => { })
// res.data.forEach((item: any) => { }
// item.children.forEach((child: any) => { const handleTree = (data: any) => {
// child.children = [] if (data && data.length != 0) {
// }) data.map((item: any) => {
// }) if (item.level != 2) {
// Engineering.value = res.data item.disabled = true
// }) } else {
getztProjectTree().then((res: any) => { item.disabled = false
res.data.forEach((item: any, index: any) => { }
if (!item.children || item.children.length == 0) { })
res.data.splice(index, 1) }
return }
} const open = ref((row: any) => {
item.newList = [] formRef.value?.resetFields()
item.children.forEach((vv: any, vvs: any) => { // deviceTree({}).then((res: any) => {
vv.children.forEach((ss: any, ssIndex: any) => { // res.data.forEach((item: any) => {
if (ss.level == 1) { // item.children.forEach((child: any) => {
item.newList.push(ss) // child.children = []
} // })
}) // })
}) // Engineering.value = res.data
item.disabled = true // })
if (item.children && item.children.length != 0) { getztProjectTree().then((res: any) => {
item.children.forEach((vv: any, vvs: any) => { res.data.forEach((item: any, index: any) => {
vv.disabled = true if (!item.children || item.children.length == 0) {
if (item.name.includes('治理')) { res.data.splice(index, 1)
if (vv.level === 0) { return
vv.disabled = true }
} else { item.newList = []
vv.disabled = false item.children.forEach((vv: any, vvs: any) => {
} vv.children.forEach((ss: any, ssIndex: any) => {
// item.children = item.newList if (ss.level == 1) {
} item.newList.push(ss)
if (item.name.includes('便携式')) { }
if (vv.level === 1) { })
vv.disabled = false })
} else { item.disabled = true
vv.disabled = true if (item.children && item.children.length != 0) {
} item.children.forEach((vv: any, vvs: any) => {
} vv.disabled = true
if (vv.children && vv.children.length != 0) { if (item.name.includes('治理')) {
vv.children.forEach((kk: any, kks: any) => { if (vv.level === 0) {
if (item.name.includes('便携式') && kk.level === 2) { vv.disabled = true
kk.disabled = true } else {
vv.children.splice(kks, 1) vv.disabled = false
} }
// else { // item.children = item.newList
// kk.disabled = true }
// } if (item.name.includes('便携式')) {
}) if (vv.level === 1) {
} vv.disabled = false
}) } else {
} vv.disabled = true
}) }
Engineering.value = removeData(res.data) }
}) if (vv.children && vv.children.length != 0) {
title.value = row.title vv.children.forEach((kk: any, kks: any) => {
dialogVisible.value = true if (item.name.includes('便携式') && kk.level === 2) {
if (row.title == '新增项目') { kk.disabled = true
form.name = '' vv.children.splice(kks, 1)
form.projectIds = [] }
form.orderBy = '100' // else {
form.remark = '' // kk.disabled = true
} else { // }
for (let key in form) { })
form[key] = row.row[key] || '' }
} })
form.id = row.row.id }
} })
}) Engineering.value = removeData(res.data)
const removeData = arr => { })
return arr title.value = row.title
.map(item => { dialogVisible.value = true
if (item.children) { if (row.title == '新增项目') {
item.children = removeData(item.children) form.name = ''
} form.projectIds = []
return item.level <= 1 ? item : {} form.orderBy = '100'
}) form.remark = ''
.filter(item => Object.keys(item).length > 0) } else {
} for (let key in form) {
form[key] = row.row[key] || ''
const handleClose = () => { }
dialogVisible.value = false form.id = row.row.id
} }
defineExpose({ open }) })
</script> const removeData = arr => {
<style lang="scss" scoped></style> return arr
.map(item => {
if (item.children) {
item.children = removeData(item.children)
}
return item.level <= 1 ? item : {}
})
.filter(item => Object.keys(item).length > 0)
}
const handleClose = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

View File

@@ -3,8 +3,12 @@
<TableHeader> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label="项目名称"> <el-form-item label="项目名称">
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" <el-input
placeholder="请输入项目名称"></el-input> maxlength="32"
show-word-limit
v-model.trim="tableStore.table.params.searchValue"
placeholder="请输入项目名称"
></el-input>
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
@@ -12,45 +16,90 @@
</template> </template>
</TableHeader> </TableHeader>
<!-- <Table ref="tableRef" /> --> <!-- <Table ref="tableRef" /> -->
<div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading" <div
:style="{ height: tableStore.table.height }"> style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
v-loading="tableStore.table.loading"
:style="{ height: tableStore.table.height }"
>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10"> <el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
<el-card class="box-card" @click="querdata(item)" shadow="hover"> <el-card class="box-card" @click="querdata(item)" shadow="hover">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span style="display: flex;align-items: center">{{ item.name }} <span style="display: flex; align-items: center">
{{ item.name }}
<el-tooltip class="item" effect="dark" content="修改项目" placement="top"> <el-tooltip class="item" effect="dark" content="修改项目" placement="top" v-if="hasAdmin || item.createBy == adminInfo.id">
<Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color" <Edit
@click="editd(item)" /> style="margin-left: 5px; width: 16px"
</el-tooltip></span> class="xiaoshou color"
<div style="display: flex;justify-content: end;"> @click="editd(item)"
<el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text" />
@click="Aclick(item)">设计</el-button> </el-tooltip>
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green" </span>
<div style="height: 32px">
<div
style="display: flex; justify-content: end"
v-if="hasAdmin || item.createBy == adminInfo.id"
>
<!-- <el-button
class="color"
icon="el-icon-Promotion"
style="padding: 3px 0"
type="text"
v-if="bindId != item.id"
@click="activate(item)"
>
绑定
</el-button> -->
<el-button
class="color"
icon="el-icon-Share"
style="padding: 3px 0"
type="text"
@click="Aclick(item)"
>
设计
</el-button>
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
type="text" @click="shejid(item)">设计</el-button> --> type="text" @click="shejid(item)">设计</el-button> -->
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text" <!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
@click="shejid(item)">编辑</el-button> --> @click="shejid(item)">编辑</el-button> -->
<el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text" <el-button
@click="deleted(item)">删除</el-button> icon="el-icon-Delete"
style="padding: 3px 0; color: red"
type="text"
@click="deleted(item)"
>
删除
</el-button>
</div>
</div> </div>
</div> </div>
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" /> <img
<el-empty v-else description="暂无设计" style="height: 220px;"/> v-if="item.fileContent"
:src="item.fileContent"
class="image xiaoshou"
@click="imgData(item)"
/>
<el-empty v-else description="暂无设计" style="height: 220px" />
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="table-pagination"> <div class="table-pagination">
<el-pagination :currentPage="tableStore.table.params!.pageNum" <el-pagination
:page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background :currentPage="tableStore.table.params!.pageNum"
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total" :page-size="tableStore.table.params!.pageSize"
@size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination> :page-sizes="[10, 20, 50, 100]"
background
:layout="'sizes,total, ->, prev, pager, next, jumper'"
:total="tableStore.table.total"
@size-change="onTableSizeChange"
@current-change="onTableCurrentChange"
></el-pagination>
</div> </div>
<popup ref="popupRef" @submit="tableStore.index()" /> <popup ref="popupRef" @submit="tableStore.index()" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -61,12 +110,18 @@ import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate' import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { audit, add } from '@/api/cs-harmonic-boot/mxgraph'; import { audit, add, savePageIdWithUser, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
import { Edit } from '@element-plus/icons-vue' import { Edit } from '@element-plus/icons-vue'
import popup from './components/popup.vue' import popup from './components/popup.vue'
import { useAdminInfo } from '@/stores/adminInfo'
const VITE_FLAG = import.meta.env.VITE_NAME == 'ypt'
defineOptions({ defineOptions({
name: 'mxgraph/graph-list' name: 'mxgraph/graph-list'
}) })
const adminInfo = useAdminInfo()
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager')|| item.includes('root'))
const tableRef = ref() const tableRef = ref()
const popupRef = ref() const popupRef = ref()
let DOMIN = window.location.origin let DOMIN = window.location.origin
@@ -78,27 +133,52 @@ const tableStore = new TableStore({
url: '/cs-harmonic-boot/csconfiguration/queryPage', url: '/cs-harmonic-boot/csconfiguration/queryPage',
method: 'POST', method: 'POST',
publicHeight: 60, publicHeight: 60,
column: [ column: [],
], loadCallback: () => {}
loadCallback: () => {
}
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
tableStore.table.params.currentUserId = adminInfo.id
// let aa=['operation_manager',]
tableStore.table.params.roleCode = adminInfo.roleCode.join(',')
onMounted(() => { onMounted(() => {
tableStore.table.ref = tableRef.value tableStore.table.ref = tableRef.value
getBindId()
tableStore.index() tableStore.index()
tableStore.table.loading = false tableStore.table.loading = false
}) })
// 查询 // 查询
const onSubmitadd = () => { const onSubmitadd = () => {
popupRef.value.open({ popupRef.value.open({
title: '新增项目' title: '新增项目'
}) })
} }
const querdata = (e: any) => { } const bindId = ref('')
const activate = (e: any) => {
ElMessageBox.confirm('是否绑定?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
savePageIdWithUser({ pageId: e.id, userId: adminInfo.id }).then(res => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '操作成功'
})
bindId.value = e.id
}
})
})
.catch(() => {})
}
const getBindId = () => {
getByUserId({ userId: adminInfo.id }).then(res => {
bindId.value = res.data.pageId
})
}
const querdata = (e: any) => {}
const editd = (e: any) => { const editd = (e: any) => {
popupRef.value.open({ popupRef.value.open({
title: '修改项目', title: '修改项目',
@@ -107,45 +187,51 @@ const editd = (e: any) => {
} }
// 设计 // 设计
const Aclick = (e: any) => { const Aclick = (e: any) => {
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`) //window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`)
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`) window.open(
window.location.origin +
`/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}`
)
} }
// 删除 // 删除
const deleted = (e: any) => { const deleted = (e: any) => {
ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", { ElMessageBox.confirm('此操作将永久删除该项目, 是否继续?', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
}) })
.then(() => { .then(() => {
let data = { let data = {
id: e.id, id: e.id,
name: e.name, name: e.name,
status: "0", status: '0'
}; }
audit(data).then((res: any) => { audit(data).then((res: any) => {
if (res.code == "A0000") { if (res.code == 'A0000') {
ElMessage({ ElMessage({
type: "success", type: 'success',
message: "删除项目成功!", message: '删除项目成功!'
}); })
} }
tableStore.index() tableStore.index()
}); })
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
type: "info", type: 'info',
message: "已取消删除", message: '已取消删除'
}); })
}); })
} }
const imgData = (e: any) => { const imgData = (e: any) => {
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`) window.open(
window.location.origin +
`/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}#/preview_${
VITE_FLAG ? 'YPT' : 'ZL'
}`
)
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`) // window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`)
} }
const onTableSizeChange = (val: number) => { const onTableSizeChange = (val: number) => {
@@ -155,7 +241,6 @@ const onTableSizeChange = (val: number) => {
const onTableCurrentChange = (val: number) => { const onTableCurrentChange = (val: number) => {
tableStore.onTableAction('current-page-change', { page: val }) tableStore.onTableAction('current-page-change', { page: val })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text { .text {
@@ -179,7 +264,7 @@ span {
.clearfix::before, .clearfix::before,
.clearfix::after { .clearfix::after {
display: table; display: table;
content: ""; content: '';
} }
.clearfix::after { .clearfix::after {
@@ -189,7 +274,7 @@ span {
.box-card { .box-card {
width: 100%; width: 100%;
// border: 1px solid #000; // border: 1px solid #000;
box-shadow: var(--el-box-shadow-light) box-shadow: var(--el-box-shadow-light);
} }
.xiaoshou { .xiaoshou {
@@ -218,7 +303,7 @@ span {
// 不可全选样式 // 不可全选样式
.el-tree-node { .el-tree-node {
.is-leaf+.el-checkbox .el-checkbox__inner { .is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block; display: inline-block;
} }

View File

@@ -0,0 +1,274 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" id="navigation-splitpanes">
<pane :size="size">
<CloudDeviceEntryTree
ref="TerminalRef"
@node-click="handleNodeClick"
@init="handleNodeClick"
></CloudDeviceEntryTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
<template v-slot:select>
<!-- <el-form-item label=" 模板策略">
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item> -->
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
</template>
</TableHeader>
<div class="box" :style="`height: calc(${tableStore.table.height} + 65px)`">
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">监测点详情</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.xq">监测点详情</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">暂降事件列表</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.lb">表格</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">暂降密度</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.mdbg">表格</el-checkbox>
<el-checkbox v-model="formd.mdtx">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">暂降事件点</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.sjdITIC">ITIC</el-checkbox>
<el-checkbox v-model="formd.sjdF47">F47</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">概率分布</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.glfbfz">暂降幅值</el-checkbox>
<el-checkbox v-model="formd.glfbsj">持续时间</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">月份统计</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.tjbg">表格</el-checkbox>
<el-checkbox v-model="formd.tjtx">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">暂降原因</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.yybg">表格</el-checkbox>
<el-checkbox v-model="formd.yytx">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12" class="mTop">
<div class="grid-content">
<div class="divBox">暂降类型</div>
</div>
</el-col>
<el-col :span="12" class="mTop">
<el-checkbox v-model="formd.lxbg">表格</el-checkbox>
<el-checkbox v-model="formd.lxtx">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTree.vue'
import { getLineExport } from '@/api/harmonic-boot/cockpit/cockpit'
defineOptions({
name: 'TransientReport/monitoringpointReport'
})
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const uploadList: any = ref([])
const formd: any = ref({
xq: true,
lb: true,
mdbg: false,
mdtx: false,
sjdITIC: false,
sjdF47: false,
glfbfz: false,
glfbsj: false,
tjbg: false,
tjtx: false,
yybg: false,
yytx: false,
lxbg: false,
lxtx: false,
type: 0
})
const tableStore = new TableStore({
url: '',
method: 'POST',
column: [],
beforeSearchFun: () => {},
loadCallback: () => {}
})
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
// 上传
const choose = (files: any) => {
const isJPG = files.raw.type === 'image/jpg'
const isJPEG = files.raw.type === 'image/jpeg'
const isPNG = files.raw.type === 'image/png'
if (!isJPG && !isPNG && !isJPEG) {
ElMessage.warning('上传文件只能是 JPG/PNG 格式!')
return false
}
uploadList.value = files
ElMessage.success('上传成功')
}
//生成报告
const exportEvent = () => {
if (dotList.value?.level != 4) {
return ElMessage.warning('请选择监测点进行报告生成!')
}
let a = ''
// formd.value.lineId = monitoringPoint.state.lineId
// formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
formd.value.lineId = dotList.value.id
formd.value.lineName = dotList.value.name
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
ElMessage('生成报告中,请稍等!')
const now = new Date()
const year = now.getFullYear() // 4位年份
const month = now.getMonth() + 1 // 月份0-11需+1
const day = now.getDate() // 日期1-31
// 格式化YYYY - MM - DD补零
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
getLineExport(formd.value).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
// createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = dotList.value.name+formattedDate // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.grid-content {
text-align: center;
}
.divBox {
width: 250px;
height: 31px;
margin: auto;
line-height: 32px;
border: 1px solid #c9c9c9;
&:hover {
border: 1px solid #002255;
}
}
.box {
padding: 10px;
// margin-top: 10px;
overflow-y: auto;
font-size: 15px;
}
.el-divider--horizontal {
margin: 10px 0;
}
.mTop {
margin-top: 5px;
margin-bottom: 5px;
}
</style>

View File

@@ -0,0 +1,182 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" id="navigation-splitpanes">
<pane :size="size">
<CloudDeviceEntryTree
ref="TerminalRef"
@node-click="handleNodeClick"
@init="handleNodeClick"
></CloudDeviceEntryTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" datePicker :show-search="false">
<template v-slot:select>
<el-form-item label="客户名称">
<el-input
v-model="tableStore.table.params.crmName"
maxlength="32"
show-word-limit
clearable
placeholder="请输入客户名称"
/>
</el-form-item>
<el-form-item label="报表编号">
<el-input
v-model="tableStore.table.params.reportNumber"
clearable
placeholder="请输入报表编号"
maxlength="12"
show-word-limit
/>
</el-form-item>
</template>
<template #operation>
<el-upload
:show-file-list="false"
ref="uploadRef"
action=""
accept=".png,.jpg"
:on-change="choose"
:auto-upload="false"
>
<template #trigger>
<el-button icon="el-icon-Upload" type="primary" class="mr10 ml10">上传接线图</el-button>
</template>
</el-upload>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成</el-button>
</template>
</TableHeader>
<div class="box">
<div id="luckysheet">
<img
width="100%"
:style="`height: calc(${tableStore.table.height} + 40px)`"
src="@/assets/img/jss.png"
/>
</div>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTree.vue'
import { exportModel } from '@/api/cs-harmonic-boot/datatrend'
defineOptions({
name: 'harmonic-boot/report/word'
})
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const uploadList: any = ref([])
const tableStore = new TableStore({
url: '',
method: 'POST',
column: [],
beforeSearchFun: () => {},
loadCallback: () => {}
})
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
// 上传
const choose = (files: any) => {
const isJPG = files.raw.type === 'image/jpg'
const isJPEG = files.raw.type === 'image/jpeg'
const isPNG = files.raw.type === 'image/png'
if (!isJPG && !isPNG && !isJPEG) {
ElMessage.warning('上传文件只能是 JPG/PNG 格式!')
return false
}
uploadList.value = files
ElMessage.success('上传成功')
}
// 生成
const exportEvent = () => {
console.log('🚀 ~ exportEvent ~ dotList.value:', dotList.value)
if (dotList.value?.level != 4) {
return ElMessage.warning('请选择监测点进行报告生成!')
}
let form = new FormData()
form.append('lineIndex', dotList.value.id)
form.append('name', dotList.value.name)
form.append('crmName', tableStore.table.params.crmName || '')
form.append('reportNumber', tableStore.table.params.reportNumber || '')
form.append('type', '0')
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
console.log('🚀 ~ exportEvent ~ uploadList.value:', uploadList.value?.raw)
form.append('file', uploadList.value?.raw || '')
// 特殊字符正则表达式
const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
if (
specialCharRegex.test(tableStore.table.params.crmName) ||
specialCharRegex.test(tableStore.table.params.reportNumber)
) {
ElNotification({
type: 'error',
message: '包含特殊字符,请注意修改!'
})
} else {
ElMessage('生成报告中...')
const now = new Date()
const year = now.getFullYear() // 4位年份
const month = now.getMonth() + 1 // 月份0-11需+1
const day = now.getDate() // 日期1-31
// 格式化YYYY - MM - DD补零
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
exportModel(form).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
// createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = dotList.value.name + formattedDate // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.box {
padding: 10px;
}
</style>

View File

@@ -1,147 +1,147 @@
<template> <template>
<div class="default-main" :style="height"> <div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes"> <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size"> <pane :size="size">
<PointTree :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick" <PointTree :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
@Policy="stencil"> @Policy="stencil">
</PointTree> </PointTree>
</pane> </pane>
<pane :size="(100 - size)" style="background: #fff" :style="height"> <pane :size="(100 - size)" style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" datePicker> <TableHeader ref="TableHeaderRef" datePicker>
<template v-slot:select> <template v-slot:select>
<el-form-item label="模板策略"> <el-form-item label="模板策略">
<el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id"> <el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
<el-option v-for="item in templatePolicy" :key="item.id" :label="item.name" <el-option v-for="item in templatePolicy" :key="item.id" :label="item.name"
:value="item"></el-option> :value="item"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template #operation> <template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button> <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
</template> </template>
</TableHeader> </TableHeader>
<div class="box"> <div class="box">
<div id="luckysheet" v-loading="tableStore.table.loading" <div id="luckysheet" v-loading="tableStore.table.loading"
:style="`height: calc(${tableStore.table.height} + 45px)`"></div> :style="`height: calc(${tableStore.table.height} + 45px)`"></div>
</div> </div>
</pane> </pane>
</splitpanes> </splitpanes>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, provide } from 'vue' import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/govern/pointTree.vue' import PointTree from '@/components/tree/govern/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel' import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js' import { exportExcel } from '@/views/system/reportForms/export.js'
import 'splitpanes/dist/splitpanes.css' import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from 'splitpanes'
// import data from './123.json' // import data from './123.json'
defineOptions({ defineOptions({
name: 'govern/reportCore/statistics/index' name: 'govern/reportCore/statistics/index'
}) })
const height = mainHeight(20) const height = mainHeight(20)
const size = ref(0) const size = ref(0)
const dictData = useDictData() const dictData = useDictData()
const TableHeaderRef = ref() const TableHeaderRef = ref()
const dotList: any = ref({}) const dotList: any = ref({})
const Template: any = ref({}) const Template: any = ref({})
const reportForm: any = ref('') const reportForm: any = ref('')
const templatePolicy: any = ref([]) const templatePolicy: any = ref([])
const reportFormList: any = ref([ const reportFormList: any = ref([
{ {
value: '1', value: '1',
label: '分析报表' label: '分析报表'
}, },
{ {
value: '2', value: '2',
label: '统计报表' label: '统计报表'
}, },
{ {
value: '3', value: '3',
label: '自定义报表' label: '自定义报表'
} }
]) ])
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/harmonic-boot/customReport/getCustomReport', url: '/harmonic-boot/customReport/getCustomReport',
method: 'POST', method: 'POST',
column: [], column: [],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.tempId = Template.value.id tableStore.table.params.tempId = Template.value.id
tableStore.table.params.lineId = dotList.value.id tableStore.table.params.lineId = dotList.value.id
}, },
loadCallback: () => { loadCallback: () => {
tableStore.table.data.forEach((item: any) => { tableStore.table.data.forEach((item: any) => {
item.data1 ? (item.data = JSON.parse(item.data1)) : '' item.data1 ? (item.data = JSON.parse(item.data1)) : ''
item.celldata.forEach((k: any) => { item.celldata.forEach((k: any) => {
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : '' item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
}) })
}) })
setTimeout(() => { setTimeout(() => {
luckysheet.create({ luckysheet.create({
container: 'luckysheet', container: 'luckysheet',
title: '', // 表 头名 title: '', // 表 头名
lang: 'zh', // 中文 lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏 showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏 showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮 showsheetbar: true, // 是否显示底部sheet按钮
data: tableStore.table.data data: tableStore.table.data
// tableStore.table.data // tableStore.table.data
}) })
}, 10) }, 10)
} }
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1 tableStore.table.params.resourceType = 1
const flag = ref(true) const flag = ref(true)
onMounted(() => { onMounted(() => {
const dom = document.getElementById('navigation-splitpanes') const dom = document.getElementById('navigation-splitpanes')
if (dom) { if (dom) {
size.value = ((280 / (dom.offsetWidth - 7)) * 100) size.value = ((280 / (dom.offsetWidth - 7)) * 100)
} }
}) })
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => { // getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
// templatePolicy.value = res.data // templatePolicy.value = res.data
// }) // })
const stencil = (val: any) => { const stencil = (val: any) => {
templatePolicy.value = val templatePolicy.value = val
Template.value = val[0] Template.value = val[0]
reportForm.value = val[0]?.reportForm reportForm.value = val[0]?.reportForm
} }
const changetype = (val: any) => { const changetype = (val: any) => {
reportForm.value = val.reportForm reportForm.value = val.reportForm
} }
const handleNodeClick = (data: any, node: any) => { const handleNodeClick = (data: any, node: any) => {
if (data?.type == "line") { if (data?.type == "line") {
dotList.value = data dotList.value = data
setTimeout(() => { setTimeout(() => {
tableStore.index() tableStore.index()
}, 500) }, 500)
} }
} }
const exportEvent = () => { const exportEvent = () => {
exportExcel(luckysheet.getAllSheets(), '统计报表下载') exportExcel(luckysheet.getAllSheets(), '统计报表下载')
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.splitpanes.default-theme .splitpanes__pane { .splitpanes.default-theme .splitpanes__pane {
background: #fff; background: #fff;
} }
.box { .box {
padding: 10px; padding: 10px;
} }
</style> </style>

View File

@@ -20,7 +20,7 @@
</el-form-item> </el-form-item>
</template> </template>
<template #operation> <template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button> <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
</template> </template>
</TableHeader> </TableHeader>
<div class="box" v-loading="tableStore.table.loading"> <div class="box" v-loading="tableStore.table.loading">
@@ -45,6 +45,7 @@ import { exportExcel } from '@/views/system/reportForms/export.js'
import 'splitpanes/dist/splitpanes.css' import 'splitpanes/dist/splitpanes.css'
import DatePicker from '@/components/form/datePicker/time.vue' import DatePicker from '@/components/form/datePicker/time.vue'
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from 'splitpanes'
const name = ref('')
// import data from './123.json' // import data from './123.json'
defineOptions({ defineOptions({
name: 'govern/reportCore/statisticsWx/index' name: 'govern/reportCore/statisticsWx/index'
@@ -73,6 +74,7 @@ const tableStore = new TableStore({
delete tableStore.table.params.timeFlag delete tableStore.table.params.timeFlag
}, },
loadCallback: () => { loadCallback: () => {
name.value = dotList.value.name
tableStore.table.data.forEach((item: any) => { tableStore.table.data.forEach((item: any) => {
item.data1 ? (item.data = JSON.parse(item.data1)) : '' item.data1 ? (item.data = JSON.parse(item.data1)) : ''
item.celldata.forEach((k: any) => { item.celldata.forEach((k: any) => {
@@ -140,7 +142,14 @@ const handleNodeClick = (data: any, node: any) => {
} }
const exportEvent = () => { const exportEvent = () => {
exportExcel(luckysheet.getAllSheets(), '统计报表下载') const now = new Date()
const year = now.getFullYear() // 4位年份
const month = now.getMonth() + 1 // 月份0-11需+1
const day = now.getDate() // 日期1-31
// 格式化YYYY - MM - DD补零
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
} }
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@@ -0,0 +1,192 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
@Policy="stencil">
</pointTreeWx> -->
<CloudDeviceEntryTree
ref="TerminalRef"
template
@Policy="stencil"
@node-click="handleNodeClick"
@init="handleNodeClick"
></CloudDeviceEntryTree>
</pane>
<pane :size="100 - size" style="background: #fff" :style="height">
<TableHeader datePicker ref="TableHeaderRef" :showReset="false">
<template v-slot:select>
<!-- <el-form-item label="时间:">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> -->
<el-form-item label="模板策略">
<el-select
v-model.trim="Template"
@change="changetype"
placeholder="请选择模版"
value-key="id"
>
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
</template>
</TableHeader>
<div class="box" v-loading="tableStore.table.loading">
<div
id="luckysheet"
:style="`height: calc(${tableStore.table.height} + 45px)`"
v-if="tableStore.table.data.length > 0"
></div>
<el-empty
:style="`height: calc(${tableStore.table.height} + 45px)`"
v-else
description="暂无数据"
/>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
import 'splitpanes/dist/splitpanes.css'
import DatePicker from '@/components/form/datePicker/time.vue'
import { Splitpanes, Pane } from 'splitpanes'
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTree.vue'
// import data from './123.json'
defineOptions({
name: 'govern/reportCore/statisticsWx/index'
})
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')
const datePickerRef = ref()
const templatePolicy: any = ref([])
const name = ref('')
const tableStore = new TableStore({
url: '/cs-harmonic-boot/customReport/getCustomReport',
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params.tempId = Template.value.id
tableStore.table.params.lineId = dotList.value.id
// tableStore.table.params.startTime = datePickerRef.value.timeValue[0],
// tableStore.table.params.endTime = datePickerRef.value.timeValue[1],
delete tableStore.table.params.searchBeginTime
delete tableStore.table.params.searchEndTime
delete tableStore.table.params.timeFlag
},
loadCallback: () => {
console.log('🚀 ~ tableStore.table:', tableStore.table)
name.value = dotList.value.name
// tableStore.table.data.forEach((item: any) => {
// item.data1 ? (item.data = JSON.parse(item.data1)) : ''
// item.celldata.forEach((k: any) => {
// item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
// })
// })
tableStore.table.data.forEach((item: any) => {
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
item.celldata.forEach((k: any) => {
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
})
})
console.log('🚀 ~ tableStore.table:', tableStore.table)
setTimeout(() => {
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
allowEdit: false, // 禁止所有编辑操作(必填)
data: tableStore.table.data
// tableStore.table.data
})
}, 10)
}
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = null
const flag = ref(true)
onMounted(() => {
nextTick(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom && dom.offsetHeight > 0) {
size.value = (280 / (dom.offsetWidth - 7)) * 100
} else {
// 设置默认值
size.value = 20
}
})
})
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
// templatePolicy.value = res.data
// })
const stencil = (val: any) => {
templatePolicy.value = val.filter((item: any) => item.name != '稳态治理报表')
Template.value = templatePolicy.value[0]
reportForm.value = templatePolicy.value[0]?.reportForm
}
const changetype = (val: any) => {
reportForm.value = val.reportForm
}
const handleNodeClick = (data: any, node: any) => {
if (data?.level == 4) {
dotList.value = data
setTimeout(() => {
tableStore.index()
}, 500)
} else {
tableStore.table.loading = false
}
}
const exportEvent = () => {
const now = new Date()
const year = now.getFullYear() // 4位年份
const month = now.getMonth() + 1 // 月份0-11需+1
const day = now.getDate() // 日期1-31
// 格式化YYYY - MM - DD补零
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #fff;
}
.box {
padding: 10px;
}
</style>

View File

@@ -0,0 +1,212 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
@Policy="stencil">
</pointTreeWx> -->
<CloudDeviceEntryTree
ref="TerminalRef"
template
@Policy="stencil"
@node-click="handleNodeClick"
@init="handleNodeClick"
></CloudDeviceEntryTree>
</pane>
<pane :size="100 - size" style="background: #fff" :style="height">
<TableHeader datePicker ref="TableHeaderRef" :showReset="false">
<template v-slot:select>
<!-- <el-form-item label="时间:">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> -->
<el-form-item label="模板策略">
<el-select
v-model.trim="Template"
@change="changetype"
placeholder="请选择模版"
value-key="id"
>
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="监测对象">
<el-select
filterable
v-model="tableStore.table.params.sensitiveUserId"
placeholder="请选择监测对象"
clearable
>
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> -->
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
</template>
</TableHeader>
<div class="box" v-loading="tableStore.table.loading">
<div
id="luckysheet"
:style="`height: calc(${tableStore.table.height} + 45px)`"
v-if="tableStore.table.data.length > 0"
></div>
<el-empty
:style="`height: calc(${tableStore.table.height} + 45px)`"
v-else
description="暂无数据"
/>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
import 'splitpanes/dist/splitpanes.css'
import DatePicker from '@/components/form/datePicker/time.vue'
import { Splitpanes, Pane } from 'splitpanes'
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTreeZL.vue'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
// import data from './123.json'
defineOptions({
name: 'govern/reportCore/statisticsWx/indexZL'
})
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')
const datePickerRef = ref()
const templatePolicy: any = ref([])
const name = ref('')
const tableStore = new TableStore({
url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params.tempId = Template.value.id
tableStore.table.params.lineId = dotList.value.id
tableStore.table.params.sensitiveUserId = dotList.value.id
// ;(tableStore.table.params.startTime = datePickerRef.value.timeValue[0]),
// (tableStore.table.params.endTime = datePickerRef.value.timeValue[1]),
delete tableStore.table.params.searchBeginTime
delete tableStore.table.params.searchEndTime
delete tableStore.table.params.timeFlag
},
loadCallback: () => {
console.log('🚀 ~ tableStore.table:', tableStore.table.data)
name.value = dotList.value.name
// tableStore.table.data.forEach((item: any) => {
// item.data1 ? (item.data = JSON.parse(item.data1)) : ''
// item.celldata.forEach((k: any) => {
// item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
// })
// })
setTimeout(() => {
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
allowEdit: false, // 禁止所有编辑操作(必填)
data: tableStore.table.data
// tableStore.table.data
})
}, 10)
}
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = 1
const flag = ref(true)
onMounted(() => {
initListByIds()
nextTick(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom && dom.offsetHeight > 0) {
size.value = (280 / (dom.offsetWidth - 7)) * 100
} else {
// 设置默认值
size.value = 20
}
})
})
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
// templatePolicy.value = res.data
// })
const idList = ref([])
// 监测对象
const initListByIds = () => {
getListByIds({}).then((res: any) => {
if (res.data.length > 0) {
idList.value = res.data
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
tableStore.table.params.sensitiveUserId = idList.value[0].id
}
// templateListData()
}
})
}
const stencil = (val: any) => {
console.log('🚀 ~ stencil ~ val:', val)
templatePolicy.value = val.filter((item: any) => item.name == '稳态治理报表')
Template.value = templatePolicy.value[0]
reportForm.value = templatePolicy.value[0]?.reportForm
}
const changetype = (val: any) => {
reportForm.value = val.reportForm
}
const handleNodeClick = (data: any, node: any) => {
if (data?.level == 3) {
dotList.value = data
setTimeout(() => {
tableStore.index()
}, 500)
} else {
tableStore.table.loading = false
}
}
const exportEvent = () => {
const now = new Date()
const year = now.getFullYear() // 4位年份
const month = now.getMonth() + 1 // 月份0-11需+1
const day = now.getDate() // 日期1-31
// 格式化YYYY - MM - DD补零
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #fff;
}
.box {
padding: 10px;
}
</style>

View File

@@ -35,7 +35,7 @@ const departmentRef = ref()
const show = ref(true) const show = ref(true)
const lookShow = ref(true) const lookShow = ref(true)
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/harmonic-boot/customReport/getTemplateList', url: '/cs-harmonic-boot/customReport/getTemplateList',
method: 'POST', method: 'POST',
isWebPaging: true, isWebPaging: true,
column: [ column: [

View File

@@ -11,7 +11,7 @@
> >
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button> <el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
</el-upload> </el-upload>
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button> <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button> <el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
</div> </div>

View File

@@ -11,7 +11,7 @@
> >
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button> <el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
</el-upload> </el-upload>
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button> <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button> <el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button> <el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
</div> </div>

View File

@@ -0,0 +1,106 @@
<template>
<el-dialog class="cn-operate-dialog" width="600px" v-model.trim="dialogVisible" :title="title">
<el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
<el-form-item label="所属厂站名称" prop="substationName">
<el-input v-model.trim="form.substationName" placeholder="请输入所属厂站名称"></el-input>
</el-form-item>
<el-form-item label="敏感用户名称" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入敏感用户名称"></el-input>
</el-form-item>
<el-form-item label="敏感负荷类型" prop="loadType">
<el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择数据分类">
<el-option
v-for="item in DataTypeSelect"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户协议容量(MVA)" prop="userAgreementCapacity">
<el-input-number style="width: 100%;" :min="0" maxlength="32" show-word-limit v-model.trim="form.userAgreementCapacity" placeholder="请输入用户协议容量"></el-input-number>
</el-form-item>
<el-form-item label="装机容量(MW)" prop="installedCapacity">
<el-input-number style="width: 100%;" :min="0" maxlength="32" show-word-limit v-model.trim="form.installedCapacity" placeholder="请输入装机容量"></el-input-number>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number style="width: 100%;" :min="0" maxlength="32" show-word-limit v-model.trim="form.sort" placeholder="请输入排序"></el-input-number>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref,inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { saveUser, updateUser } from '@/api/cs-device-boot/sensitiveLoadMange'
import { useDictData } from '@/stores/dictData'
const TypeOptions = ref()
const dictData = useDictData()
const DataTypeSelect = dictData.getBasicData('Interference_Source')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
const form = reactive<any>({
loadType: [],
substationName: null,
installedCapacity: null,
name: null,
userAgreementCapacity:null,
id: null,
sort:100
})
const rules = {
substationName: [{ required: true, message: '所属厂站名称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '敏感用户名称不能为空', trigger: 'blur' }],
loadType: [{ required: true, message: '请选择敏感负荷类型', trigger: 'blur' }],
installedCapacity: [{ required: true, message: '用户协议容量不能为空', trigger: 'blur' }],
userAgreementCapacity: [{ required: true, message: '装机容量不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
}
} else {
for (let key in form) {
form[key] = null
form.sort = 100
}
}
}
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await updateUser(form)
} else {
await saveUser(form)
}
ElMessage.success('操作成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

View File

@@ -0,0 +1,105 @@
<template>
<div class="default-main">
<TableHeader date-picker>
<template #operation>
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<detail ref="detail"></detail>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import Detail from './detail.vue'
import { ElMessage } from 'element-plus'
import { deleteUser } from '@/api/cs-device-boot/sensitiveLoadMange'
import { Plus } from '@element-plus/icons-vue'
import { useDictData } from '@/stores/dictData'
defineOptions({
name: 'govern/device/sensitiveLoadMange'
})
const detail = ref()
const dictData = useDictData()
const interferenceType = dictData.getBasicData('Interference_Source')
const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
method: 'POST',
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '所属厂站名称', field: 'substationName', minWidth: 180 },
{ title: '敏感用户名称', field: 'name', minWidth: 180 },
{
title: '敏感负荷类型',
field: 'loadType',
minWidth: 120,
formatter: row => {
return interferenceType.filter(item => item.id == row.cellValue)[0]?.name
}
},
{ title: '用户协议容量(MVA)', field: 'userAgreementCapacity', minWidth: 100 },
{ title: '装机容量(MW)', field: 'installedCapacity', minWidth: 100 },
{
title: '操作',
align: 'center',
width: '180',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
detail.value.open('编辑', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗?'
},
click: row => {
deleteUser([row.id]).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {}
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
const addMenu = () => {
detail.value.open('新增')
}
</script>

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