Compare commits
79 Commits
f1439e0464
...
2025-12
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a765cdf9ee | ||
|
|
cc0f8bc8b6 | ||
|
|
7e4db9d4cd | ||
|
|
67e2fa57d0 | ||
|
|
ad1fc11e61 | ||
|
|
6824864db2 | ||
|
|
37ed693cea | ||
|
|
0419af8e50 | ||
|
|
5268b93dd0 | ||
|
|
4e6bd55089 | ||
|
|
4e0db29ab1 | ||
|
|
9b0fd76f48 | ||
|
|
f92b07c555 | ||
|
|
a77db278ac | ||
|
|
51a0ae49a9 | ||
|
|
814e9917d6 | ||
|
|
21f1c41196 | ||
|
|
c188446e76 | ||
|
|
e2a5d084a5 | ||
|
|
4ae27a9d6d | ||
|
|
7783569f91 | ||
|
|
f1ac67070f | ||
|
|
77a9a2adfc | ||
|
|
accc1f30f6 | ||
|
|
94649b3348 | ||
|
|
e3de350dc5 | ||
|
|
4963dd495a | ||
|
|
40fa6eba20 | ||
|
|
f32934e0e6 | ||
|
|
460962cead | ||
|
|
fa75fc2923 | ||
|
|
f953b560c7 | ||
|
|
8f3426eb1f | ||
|
|
c2a2a4afd6 | ||
|
|
d2357d4ad2 | ||
|
|
1b23355134 | ||
|
|
ce9caa8729 | ||
|
|
2d0349c1b6 | ||
|
|
8355fc6aed | ||
|
|
23bc2d8f05 | ||
|
|
43caddffa3 | ||
|
|
3accaf3079 | ||
|
|
5687367602 | ||
|
|
b8ee530557 | ||
|
|
0518127792 | ||
|
|
5db43cd4b1 | ||
|
|
bf0657cbbc | ||
|
|
bcb1535d4d | ||
|
|
aa07112605 | ||
|
|
c09bea9e04 | ||
|
|
22cd6088a3 | ||
|
|
faf7ba98a6 | ||
|
|
b90f70c72d | ||
|
|
d38b426527 | ||
|
|
79a246cd87 | ||
|
|
58ee36c6a5 | ||
|
|
515dcfe76c | ||
|
|
031fab286b | ||
|
|
58bc269940 | ||
|
|
80182cdc6f | ||
|
|
8ce2968bee | ||
|
|
1a146afcd7 | ||
|
|
800ec7f0cf | ||
|
|
e824f4823a | ||
|
|
2476d2401e | ||
|
|
f043b6dc1a | ||
|
|
09bf34700a | ||
|
|
f32673c92a | ||
|
|
2c7b5a8583 | ||
|
|
3745d91a9d | ||
|
|
9117a6e3c6 | ||
|
|
e759f443d3 | ||
|
|
af3f9fe607 | ||
|
|
d97e97f51c | ||
|
|
5e1a628d53 | ||
|
|
acc5e93731 | ||
|
|
93586255fc | ||
|
|
cf51ba9ff0 | ||
|
|
67d9aaf958 |
@@ -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": {
|
||||||
|
|||||||
@@ -15,6 +15,13 @@ export function getLineTree() {
|
|||||||
method: 'POST'
|
method: 'POST'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 监测点列表治理
|
||||||
|
export function objTree() {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-device-boot/csLedger/objTree',
|
||||||
|
method: 'POST'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//云设备录入树
|
//云设备录入树
|
||||||
|
|||||||
28
src/api/cs-device-boot/sensitiveLoadMange.ts
Normal file
28
src/api/cs-device-boot/sensitiveLoadMange.ts
Normal 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
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -20,3 +20,12 @@ export function getFileZip(params: any) {
|
|||||||
responseType: 'blob'
|
responseType: 'blob'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function exportModel(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/exportmodel/exportModel',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -48,3 +48,20 @@ export function 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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -25,3 +25,12 @@ export function offlineDataUploadMakeUp(data: any) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//设备补召操作
|
||||||
|
// 根据id集合获取敏感负荷用户列表
|
||||||
|
export function getListByIds() {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/pqSensitiveUser/getListByIds',
|
||||||
|
method: 'POST',
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -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'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -116,3 +116,11 @@ export const start = (params: any) => {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 查询监测对象类型
|
||||||
|
export const getDicDataByTypeCode = (params: any) => {
|
||||||
|
return request({
|
||||||
|
url: '/system-boot/dictData/getDicDataByTypeCode',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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({
|
||||||
|
|||||||
@@ -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
BIN
src/assets/img/jss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
@@ -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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
308
src/components/cockpit/crossingTime/index.vue
Normal file
308
src/components/cockpit/crossingTime/index.vue
Normal 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>
|
||||||
@@ -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
|
||||||
|
|||||||
@@ -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 }
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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
@@ -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
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>`
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal file
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal 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>
|
||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>`
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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>`
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>`
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 })
|
||||||
|
|||||||
@@ -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,7 +98,7 @@ const eventEcharts = () => {
|
|||||||
name: '电压暂升',
|
name: '电压暂升',
|
||||||
value: rawData.eventUp || 0
|
value: rawData.eventUp || 0
|
||||||
}
|
}
|
||||||
];
|
]
|
||||||
|
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
title: {},
|
title: {},
|
||||||
@@ -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
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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++) {
|
||||||
|
if (!rmsData[rms] || rmsData[rms][iphasicValue * step + 1] === undefined) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
switch (iphasicValue) {
|
||||||
|
case 1:
|
||||||
|
const rmsFirstA = rmsData[rms][iphasicValue * step + 1] * xishu
|
||||||
|
rmsFA.push([rmsData[rms][0], rmsFirstA])
|
||||||
|
rfmax = rfmax > rmsFirstA ? rfmax : rmsFirstA
|
||||||
|
rfmin = rfmin < rmsFirstA ? rfmin : rmsFirstA
|
||||||
|
if (rfmin < rmsvFirstY) {
|
||||||
|
rmsvFirstY = rfmin
|
||||||
|
firstZhou = 'a'
|
||||||
|
rmsvFirstX = rmsData[rms][0]
|
||||||
|
}
|
||||||
|
|
||||||
instantF,
|
const rmsSecondA = rmsData[rms][iphasicValue * step + 1]
|
||||||
instantS,
|
rmsSA.push([rmsData[rms][0], rmsSecondA])
|
||||||
RMSF,
|
rsmax = rsmax > rmsSecondA ? rsmax : rmsSecondA
|
||||||
RMSS,
|
rsmin = rsmin < rmsSecondA ? rsmin : rmsSecondA
|
||||||
RMSFMinDetail,
|
if (rsmin < rmsvSecondY) {
|
||||||
RMSSMinDetail,
|
rmsvSecondY = rsmin
|
||||||
shunshiF,
|
secondeZhou = 'a'
|
||||||
shunshiS,
|
rmsvSecondX = rmsData[rms][0]
|
||||||
RMSFWave,
|
}
|
||||||
RMSSWave,
|
break
|
||||||
title,
|
case 2:
|
||||||
unit,
|
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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) => {
|
const fliteWaveData = (wp, step) => {
|
||||||
// 将原有的fliteWaveData函数实现复制到这里
|
// 将原有的fliteWaveData函数实现复制到这里
|
||||||
const shunData = wp.listWaveData;
|
const shunData = wp.listWaveData
|
||||||
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 ifmax = 0, ifmin = 0, ismax = 0, ismin = 0;
|
bTitle = '',
|
||||||
|
cTitle = '',
|
||||||
|
unit = '电压'
|
||||||
|
let ifmax = 0,
|
||||||
|
ifmin = 0,
|
||||||
|
ismax = 0,
|
||||||
|
ismin = 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 = []
|
||||||
|
|
||||||
if (shunData.length > 0) {
|
if (shunData.length > 0) {
|
||||||
if (titleList[iphasic * step + 1]?.substring(0, 1) !== 'U') {
|
if (titleList[iphasic * step + 1]?.substring(0, 1) !== 'U') {
|
||||||
xishu = ct;
|
xishu = ct
|
||||||
unit = '电流';
|
unit = '电流'
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 1; i <= iphasic; i++) {
|
for (let i = 1; i <= iphasic; i++) {
|
||||||
switch (i) {
|
switch (i) {
|
||||||
case 1:
|
case 1:
|
||||||
aTitle = titleList[iphasic * step + i]?.substring(1) || '';
|
aTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||||
break;
|
break
|
||||||
case 2:
|
case 2:
|
||||||
bTitle = titleList[iphasic * step + i]?.substring(1) || '';
|
bTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||||
break;
|
break
|
||||||
case 3:
|
case 3:
|
||||||
cTitle = titleList[iphasic * step + i]?.substring(1) || '';
|
cTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (shunData[0][iphasic * step + 1] !== undefined) {
|
if (shunData[0][iphasic * step + 1] !== undefined) {
|
||||||
ifmax = shunData[0][iphasic * step + 1] * xishu;
|
ifmax = shunData[0][iphasic * step + 1] * xishu
|
||||||
ifmin = shunData[0][iphasic * step + 1] * xishu;
|
ifmin = shunData[0][iphasic * step + 1] * xishu
|
||||||
ismax = shunData[0][iphasic * step + 1];
|
ismax = shunData[0][iphasic * step + 1]
|
||||||
ismin = shunData[0][iphasic * step + 1];
|
ismin = shunData[0][iphasic * step + 1]
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let shun = 0; shun < shunData.length; shun++) {
|
for (let shun = 0; shun < shunData.length; shun++) {
|
||||||
if (shunData[shun][iphasic * step + 1] === undefined) {
|
if (shunData[shun][iphasic * step + 1] === undefined) {
|
||||||
break;
|
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
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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')
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
187
src/components/tree/allocation.vue
Normal file
187
src/components/tree/allocation.vue
Normal 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>
|
||||||
@@ -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({
|
||||||
|
|||||||
@@ -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)
|
||||||
@@ -130,13 +202,12 @@ watch(
|
|||||||
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 = ''
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
106
src/components/tree/govern/cloudDeviceEntryTreeZL.vue
Normal file
106
src/components/tree/govern/cloudDeviceEntryTreeZL.vue
Normal 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>
|
||||||
@@ -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) => {
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -1,26 +1,44 @@
|
|||||||
<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 maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
v-model.trim="filterText"
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
<el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
|
<el-tree
|
||||||
:filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree"
|
style="flex: 1; overflow: auto"
|
||||||
ref="treRef" @node-click="clickNode" :expand-on-click-node="false">
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
v-bind="$attrs"
|
||||||
|
default-expand-all
|
||||||
|
:data="tree"
|
||||||
|
ref="treRef"
|
||||||
|
@node-click="clickNode"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<div class="left">
|
<div class="left" style="display: flex; align-items: center">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
<span>{{ node.label }}</span>
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 5px;">{{ node.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
@@ -43,12 +61,10 @@ defineOptions({
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
template?: boolean
|
template?: boolean
|
||||||
|
|
||||||
}
|
}
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
template: false,
|
template: false
|
||||||
|
|
||||||
})
|
})
|
||||||
const filterText = ref('')
|
const filterText = ref('')
|
||||||
watch(filterText, val => {
|
watch(filterText, val => {
|
||||||
@@ -94,7 +110,6 @@ const defaultProps = {
|
|||||||
value: 'id'
|
value: 'id'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const tree = ref()
|
const tree = ref()
|
||||||
@@ -141,18 +156,18 @@ const clickNode = (e: anyObj) => {
|
|||||||
emit('nodeChange', e)
|
emit('nodeChange', e)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
emit('Policy', res.data)
|
.then((res: any) => {
|
||||||
getTreeList()
|
emit('Policy', res.data)
|
||||||
}).catch(err => {
|
getTreeList()
|
||||||
getTreeList()
|
})
|
||||||
})
|
.catch(err => {
|
||||||
|
getTreeList()
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
getTreeList()
|
getTreeList()
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cn-tree {
|
.cn-tree {
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="nav-tabs" ref="tabScrollbarRef">
|
<div class="nav-tabs" ref="tabScrollbarRef">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="(item, idx) in navTabs.state.tabsView"
|
v-for="(item, idx) in navTabs.state.tabsView"
|
||||||
@click="onTab(item)"
|
@click="onTab(item)"
|
||||||
@@ -71,8 +72,11 @@ const onTab = (menu: RouteLocationNormalized) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
|
const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
|
||||||
|
|
||||||
// 禁用刷新
|
// 禁用刷新
|
||||||
state.contextmenuItems[0].disabled = route.path !== menu.path
|
state.contextmenuItems[0].disabled = route.path !== menu.path
|
||||||
|
|
||||||
|
|
||||||
// 禁用关闭其他和关闭全部
|
// 禁用关闭其他和关闭全部
|
||||||
state.contextmenuItems[4].disabled = state.contextmenuItems[3].disabled =
|
state.contextmenuItems[4].disabled = state.contextmenuItems[3].disabled =
|
||||||
navTabs.state.tabsView.length == 1 ? true : false
|
navTabs.state.tabsView.length == 1 ? true : false
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ 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(
|
export const useNavTabs = defineStore(
|
||||||
'navTabs',
|
'navTabs',
|
||||||
@@ -20,15 +21,17 @@ export const useNavTabs = defineStore(
|
|||||||
// 从后台加载到的菜单路由列表
|
// 从后台加载到的菜单路由列表
|
||||||
tabsViewRoutes: [],
|
tabsViewRoutes: [],
|
||||||
// 按钮权限节点
|
// 按钮权限节点
|
||||||
authNode: new Map(),
|
authNode: new Map()
|
||||||
})
|
})
|
||||||
|
|
||||||
function addTab(route: RouteLocationNormalized) {
|
function addTab(route: RouteLocationNormalized) {
|
||||||
|
console.log('🚀 ~ addTab ~ route:', route)
|
||||||
if (!route.meta.addtab) return
|
if (!route.meta.addtab) return
|
||||||
for (const key in state.tabsView) {
|
for (const key in state.tabsView) {
|
||||||
if (state.tabsView[key].path === route.path) {
|
if (state.tabsView[key].path === route.path) {
|
||||||
state.tabsView[key].params = route.params ? route.params : state.tabsView[key].params
|
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].query = route.query ? route.query : state.tabsView[key].query
|
||||||
|
state.tabsView[key].meta = route.query ? route.meta : state.tabsView[key].meta
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,21 +84,79 @@ export const useNavTabs = defineStore(
|
|||||||
state.tabFullScreen = fullScreen
|
state.tabFullScreen = fullScreen
|
||||||
}
|
}
|
||||||
|
|
||||||
return { state, addTab, closeTab, closeTabs, setActiveRoute, setTabsViewRoutes, setAuthNode, fillAuthNode, setFullScreen }
|
const refresh = () => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// console.log(123, state.tabsViewRoutes)
|
||||||
|
|
||||||
|
let list = matchAndReturnRouteData(state.tabsViewRoutes, state.tabsView)
|
||||||
|
state.tabsView = []
|
||||||
|
list.forEach(item => {
|
||||||
|
addTab(item)
|
||||||
|
})
|
||||||
|
// }, 1000)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
addTab,
|
||||||
|
closeTab,
|
||||||
|
closeTabs,
|
||||||
|
setActiveRoute,
|
||||||
|
setTabsViewRoutes,
|
||||||
|
setAuthNode,
|
||||||
|
fillAuthNode,
|
||||||
|
setFullScreen,
|
||||||
|
refresh
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
persist: {
|
persist: {
|
||||||
key: STORE_TAB_VIEW_CONFIG,
|
key: STORE_TAB_VIEW_CONFIG,
|
||||||
paths: ['state.tabFullScreen'],
|
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进行编码
|
* 对iframe的url进行编码
|
||||||
*/
|
*/
|
||||||
function encodeRoutesURI(data: RouteRecordRaw[]) {
|
function encodeRoutesURI(data: RouteRecordRaw[]) {
|
||||||
data.forEach((item) => {
|
data.forEach(item => {
|
||||||
if (item.meta?.menu_type == 'iframe') {
|
if (item.meta?.menu_type == 'iframe') {
|
||||||
item.path = adminBaseRoutePath + '/iframe/' + encodeURIComponent(item.path)
|
item.path = adminBaseRoutePath + '/iframe/' + encodeURIComponent(item.path)
|
||||||
}
|
}
|
||||||
|
|||||||
58
src/styles/vxeTable.css
Normal file
58
src/styles/vxeTable.css
Normal 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
1
src/styles/vxeTable.min.css
vendored
Normal 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}
|
||||||
@@ -60,7 +60,10 @@
|
|||||||
.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 .vxe-body--row.row--current:hover {
|
||||||
|
background-color: var(--el-color-primary-light-8);
|
||||||
|
}
|
||||||
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
||||||
// color: #fff0;
|
// color: #fff0;
|
||||||
// }
|
// }
|
||||||
@@ -74,11 +77,11 @@
|
|||||||
.vxe-modal--wrapper {
|
.vxe-modal--wrapper {
|
||||||
z-index: 5000 !important;
|
z-index: 5000 !important;
|
||||||
}
|
}
|
||||||
.vxe-table--body .vxe-body--row:nth-child(even) {
|
// .vxe-table--body .vxe-body--row:nth-child(even) {
|
||||||
background-color: #f9f9f9;
|
// background-color: #f9f9f9;
|
||||||
// background-color: var(--el-color-primary-light-9);
|
// // background-color: var(--el-color-primary-light-9);
|
||||||
}
|
// }
|
||||||
|
|
||||||
.vxe-table--body .vxe-body--row:nth-child(odd) {
|
// .vxe-table--body .vxe-body--row:nth-child(odd) {
|
||||||
background-color: #ffffff;
|
// background-color: #ffffff;
|
||||||
}
|
// }
|
||||||
|
|||||||
@@ -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]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 || '未知错误')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<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="菜单名称">
|
||||||
@@ -92,6 +92,7 @@ const open = (text: string, data: anyObj) => {
|
|||||||
}
|
}
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
if (form.id) {
|
if (form.id) {
|
||||||
|
form.pid = form.pid||'0'
|
||||||
await updateMenu(form)
|
await updateMenu(form)
|
||||||
} else {
|
} else {
|
||||||
form.code = 'menu'
|
form.code = 'menu'
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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 : '/'
|
||||||
|
|||||||
@@ -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
@@ -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,10 +981,10 @@ 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
|
||||||
@@ -991,37 +993,35 @@ const getRealDataMqttMsg = async () => {
|
|||||||
//如果消息返回值是二次值,下拉框是二次值只需要单位换算 除以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,
|
||||||
// 电压有效值
|
// 电压有效值
|
||||||
@@ -1104,7 +1104,9 @@ const getRealDataMqttMsg = async () => {
|
|||||||
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)
|
||||||
|
|||||||
@@ -16,24 +16,34 @@
|
|||||||
<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>
|
</div>
|
||||||
<el-tabs class="home_body" type="border-card" v-model.trim="activeName1" @tab-click="handleClick"
|
<el-tabs
|
||||||
v-loading="loading">
|
class="home_body"
|
||||||
|
type="border-card"
|
||||||
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
v-model.trim="activeName1"
|
||||||
<shushiboxi v-if="isWp && wp && activeName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList"
|
@tab-click="handleClick"
|
||||||
:parentHeight="parentHeight" :wp="wp">
|
v-loading="loading"
|
||||||
</shushiboxi>
|
>
|
||||||
|
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
|
||||||
|
<shushiboxi
|
||||||
|
v-if="isWp && wp && activeName == 'ssbx' && showBoxi"
|
||||||
|
:value="value"
|
||||||
|
:boxoList="boxoList"
|
||||||
|
:parentHeight="parentHeight"
|
||||||
|
:wp="wp"
|
||||||
|
></shushiboxi>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
|
||||||
<rmsboxi v-if="isWp && wp && activeName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList"
|
<rmsboxi
|
||||||
:parentHeight="parentHeight" :wp="wp">
|
v-if="isWp && wp && activeName == 'rmsbx' && showBoxi"
|
||||||
</rmsboxi>
|
:value="value"
|
||||||
|
:boxoList="boxoList"
|
||||||
|
:parentHeight="parentHeight"
|
||||||
|
:wp="wp"
|
||||||
|
></rmsboxi>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,15 +106,12 @@ const wp = ref({})
|
|||||||
const theTypeOfValue = ref(1)
|
const theTypeOfValue = ref(1)
|
||||||
const value = ref(1)
|
const value = ref(1)
|
||||||
|
|
||||||
|
|
||||||
const isWp = ref(false)
|
const isWp = ref(false)
|
||||||
const boxoList: any = ref([])
|
const boxoList: any = ref([])
|
||||||
const getWpData = (val: any, list: any) => {
|
const getWpData = (val: any, list: any) => {
|
||||||
wp.value = val
|
wp.value = val
|
||||||
isWp.value = true
|
isWp.value = true
|
||||||
boxoList.value = list
|
boxoList.value = list
|
||||||
|
|
||||||
console.log(wp.value, val, 'ggggghhhh')
|
|
||||||
}
|
}
|
||||||
const changeView = () => {
|
const changeView = () => {
|
||||||
showBoxi.value = false
|
showBoxi.value = false
|
||||||
@@ -131,16 +138,17 @@ const handleClick = (tab: any, event: any) => {
|
|||||||
const handleBack = () => {
|
const handleBack = () => {
|
||||||
emit('handleHideCharts')
|
emit('handleHideCharts')
|
||||||
}
|
}
|
||||||
const setHeight = (h: any, vh: any) => {
|
const setHeight = (h: any, vh: any, num = 1) => {
|
||||||
|
console.log('🚀 ~ setHeight ~ h:', h)
|
||||||
if (h != false) {
|
if (h != false) {
|
||||||
parentHeight.value = h
|
parentHeight.value = h
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
bxecharts.value = mainHeight(vh).height
|
bxecharts.value = mainHeight(vh, num).height
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
onMounted(() => { })
|
onMounted(() => {})
|
||||||
defineExpose({ getWpData, setHeight })
|
defineExpose({ getWpData, setHeight })
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -165,7 +173,6 @@ defineExpose({ getWpData, setHeight })
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.home_header {
|
.home_header {
|
||||||
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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([])
|
||||||
|
|||||||
@@ -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({})
|
||||||
|
|||||||
22
src/views/govern/device/permission/index.vue
Normal file
22
src/views/govern/device/permission/index.vue
Normal 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>
|
||||||
@@ -102,7 +102,7 @@ const tableStore = 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'
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<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"
|
||||||
|
:height="35"
|
||||||
></DeviceTree>
|
></DeviceTree>
|
||||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||||
@@ -25,7 +26,7 @@ import { mainHeight } from '@/utils/layout'
|
|||||||
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
|
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
const pageHeight = mainHeight(20)
|
const pageHeight = mainHeight(60)
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
const defaultCheckedKeys: any = ref([])
|
const defaultCheckedKeys: any = ref([])
|
||||||
const tableData = ref([])
|
const tableData = ref([])
|
||||||
|
|||||||
@@ -52,13 +52,13 @@ const tableStore = new TableStore({
|
|||||||
{
|
{
|
||||||
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: '启用',
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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 : '/'
|
||||||
}
|
}
|
||||||
@@ -101,21 +102,18 @@ const tableStore: any = new TableStore({
|
|||||||
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)
|
||||||
@@ -131,15 +129,14 @@ const handleTreeNodeClick = (node: any) => {
|
|||||||
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('请先勾选监测点')
|
||||||
@@ -169,7 +166,6 @@ const recall2 = async () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 暴露方法给父组件调用
|
// 暴露方法给父组件调用
|
||||||
defineExpose({
|
defineExpose({
|
||||||
handleTreeNodeClick
|
handleTreeNodeClick
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
: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"
|
||||||
@@ -16,7 +16,18 @@
|
|||||||
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-switch
|
||||||
|
v-model="form.scope"
|
||||||
|
inline-prompt
|
||||||
|
width="60px"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
active-text="是 "
|
||||||
|
inactive-text="否 "
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工程项目:" class="top" prop="projectIds" v-if="!hasAdmin || form.scope == 0">
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
v-model.trim="form.projectIds"
|
v-model.trim="form.projectIds"
|
||||||
default-expand-all
|
default-expand-all
|
||||||
@@ -28,8 +39,6 @@
|
|||||||
collapse-tags
|
collapse-tags
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
<!-- <el-cascader v-model.trim="form.projectIds" :options="Engineering" :props="defaultProps"
|
|
||||||
:show-all-levels="false" collapse-tags collapse-tags-tooltip clearable style="width: 100%;"/> -->
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="项目排序:" prop="orderBy">
|
<el-form-item label="项目排序:" prop="orderBy">
|
||||||
<el-input
|
<el-input
|
||||||
@@ -67,6 +76,9 @@
|
|||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
|
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager')|| item.includes('root'))
|
||||||
const title = ref('')
|
const title = ref('')
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
const Engineering = ref([])
|
const Engineering = ref([])
|
||||||
@@ -82,6 +94,7 @@ const defaultProps = {
|
|||||||
const form: any = reactive({
|
const form: any = reactive({
|
||||||
name: '',
|
name: '',
|
||||||
projectIds: [],
|
projectIds: [],
|
||||||
|
scope: 1,
|
||||||
orderBy: '100',
|
orderBy: '100',
|
||||||
remark: ''
|
remark: ''
|
||||||
})
|
})
|
||||||
@@ -96,13 +109,15 @@ const addFn = () => {
|
|||||||
formRef.value.validate((valid: boolean) => {
|
formRef.value.validate((valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (title.value == '新增项目') {
|
if (title.value == '新增项目') {
|
||||||
add(form).then((res: any) => {
|
add({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then(
|
||||||
ElMessage.success('新增项目成功!')
|
(res: any) => {
|
||||||
dialogVisible.value = false
|
ElMessage.success('新增项目成功!')
|
||||||
emit('submit')
|
dialogVisible.value = false
|
||||||
})
|
emit('submit')
|
||||||
|
}
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
audit(form).then((res: any) => {
|
audit({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then((res: any) => {
|
||||||
ElMessage.success('修改项目成功!')
|
ElMessage.success('修改项目成功!')
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
emit('submit')
|
emit('submit')
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
274
src/views/govern/reportCore/lineReport/index.vue
Normal file
274
src/views/govern/reportCore/lineReport/index.vue
Normal 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>
|
||||||
182
src/views/govern/reportCore/report/index.vue
Normal file
182
src/views/govern/reportCore/report/index.vue
Normal 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>
|
||||||
@@ -17,7 +17,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">
|
<div class="box">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
192
src/views/govern/reportCore/statisticsWx/index_ypt.vue
Normal file
192
src/views/govern/reportCore/statisticsWx/index_ypt.vue
Normal 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>
|
||||||
212
src/views/govern/reportCore/statisticsWx/index_zl.vue
Normal file
212
src/views/govern/reportCore/statisticsWx/index_zl.vue
Normal 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>
|
||||||
@@ -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: [
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
106
src/views/govern/sensitiveLoadMange/detail.vue
Normal file
106
src/views/govern/sensitiveLoadMange/detail.vue
Normal 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>
|
||||||
105
src/views/govern/sensitiveLoadMange/index.vue
Normal file
105
src/views/govern/sensitiveLoadMange/index.vue
Normal 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>
|
||||||
@@ -60,6 +60,7 @@ const options = ref([
|
|||||||
{ name: '星型接线', value: 4 },
|
{ name: '星型接线', value: 4 },
|
||||||
{ name: '角型接线', value: 5 },
|
{ name: '角型接线', value: 5 },
|
||||||
{ name: 'V型接线', value: 6 },
|
{ name: 'V型接线', value: 6 },
|
||||||
|
{ name: '驾驶舱指标', value: 7 },
|
||||||
])
|
])
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
|||||||
@@ -1,25 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='default-main'>
|
<div class="default-main">
|
||||||
<TableHeader :showReset='false'>
|
<TableHeader :showReset="false">
|
||||||
<template v-slot:operation>
|
<template v-slot:operation>
|
||||||
<el-button :icon='Plus' type='primary' @click='addMenu'>新增</el-button>
|
<el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref='tableRef' />
|
<Table ref="tableRef" />
|
||||||
<!-- <el-tabs type="border-card">
|
<!-- <el-tabs type="border-card">
|
||||||
<el-tab-pane v-for="item in tabPane" :label="item.name">
|
<el-tab-pane v-for="item in tabPane" :label="item.name">
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs> -->
|
</el-tabs> -->
|
||||||
|
|
||||||
|
<PopupBinding ref="bindingRef"></PopupBinding>
|
||||||
|
<PopupAdd ref="addRef" @over="init"></PopupAdd>
|
||||||
|
|
||||||
<PopupBinding ref='bindingRef'></PopupBinding>
|
|
||||||
<PopupAdd ref='addRef' @over='init'></PopupAdd>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import { ref, onMounted, provide } from 'vue'
|
import { ref, onMounted, provide } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
@@ -43,6 +40,7 @@ const options = ref([
|
|||||||
{ name: '星型接线', value: 4 },
|
{ name: '星型接线', value: 4 },
|
||||||
{ name: '角型接线', value: 5 },
|
{ name: '角型接线', value: 5 },
|
||||||
{ name: 'V型接线', value: 6 },
|
{ name: 'V型接线', value: 6 },
|
||||||
|
{ name: '驾驶舱指标', value: 7 }
|
||||||
])
|
])
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
showPage: false,
|
showPage: false,
|
||||||
@@ -52,17 +50,20 @@ const tableStore = new TableStore({
|
|||||||
// publicHeight: 60,
|
// publicHeight: 60,
|
||||||
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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '统计类型', field: 'name' },
|
{ title: '统计类型', field: 'name' },
|
||||||
{
|
{
|
||||||
title: '类型', field: 'type',
|
title: '类型',
|
||||||
|
field: 'type',
|
||||||
width: 200,
|
width: 200,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
|
return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user