Compare commits

...

29 Commits

Author SHA1 Message Date
f80644e07c Merge pull request 'projects/line-new-zhp' (#458) from projects/line-new-zhp into projects/line-new
Reviewed-on: #458
2025-12-09 17:03:35 +08:00
‘937886381’
1e12b653d6 Merge branch 'projects/line-new' into projects/line-new-zhp 2025-12-09 16:59:54 +08:00
‘937886381’
b7ba173ca3 修改 2025-12-09 16:57:38 +08:00
c203f1e1dd Merge pull request 'projects/line-new-zhp' (#457) from projects/line-new-zhp into projects/line-new
Reviewed-on: #457
2025-12-09 13:11:32 +08:00
‘937886381’
ccb925003e Merge branch 'projects/line-new' into projects/line-new-zhp 2025-12-09 13:10:45 +08:00
‘937886381’
b9f286005c 生产 2025-12-09 13:07:09 +08:00
0e343279ac Merge pull request '更新' (#456) from projects/line-new-zwq into projects/line-new
Reviewed-on: #456
2025-12-01 14:52:38 +08:00
zwq
00ac3dec45 更新 2025-12-01 14:52:21 +08:00
a84f765e73 Merge pull request '班组bug' (#455) from projects/line-new-zwq into projects/line-new
Reviewed-on: #455
2025-11-28 16:29:25 +08:00
zwq
ffa0b2e8dd 班组bug 2025-11-28 16:29:06 +08:00
1e6c6c5656 Merge pull request '班组bug' (#448) from projects/line-new-zwq into projects/line-new
Reviewed-on: #448
2025-11-11 15:38:56 +08:00
zwq
0e76fe7dbf 班组bug 2025-11-11 15:38:31 +08:00
399e2bc965 Merge pull request '更新班组' (#447) from projects/line-new-zwq into projects/line-new
Reviewed-on: #447
2025-11-05 13:58:22 +08:00
zwq
7bee1f7863 更新班组 2025-11-05 13:57:58 +08:00
0e1e813dc2 Merge pull request '更新班组' (#446) from projects/line-new-zwq into projects/line-new
Reviewed-on: #446
2025-10-30 13:39:06 +08:00
zwq
c9c8f82910 更新 2025-10-30 13:37:52 +08:00
d859ba62c8 Merge pull request '更新班组' (#446) from projects/line-new-zwq into projects/line-new
Reviewed-on: #446
2025-10-24 11:43:01 +08:00
zwq
31bafae4aa 更新班组 2025-10-24 11:42:24 +08:00
67b6b88863 Merge pull request 'projects/line-new-zhp' (#445) from projects/line-new-zhp into projects/line-new
Reviewed-on: #445
2025-10-24 11:21:24 +08:00
‘937886381’
9f3cdcb1c4 Merge branch 'projects/line-new' into projects/line-new-zhp 2025-10-24 11:20:40 +08:00
‘937886381’
f11dfe04d5 生产管理 2025-10-24 11:19:34 +08:00
428a0752eb Merge pull request '更新班组' (#444) from projects/line-new-zwq into projects/line-new
Reviewed-on: #444
2025-10-19 00:40:20 +08:00
zwq
4e801873b9 更新班组 2025-10-19 00:38:48 +08:00
‘937886381’
463706663a xiugai 2025-08-21 08:44:24 +08:00
‘937886381’
e8638687b1 xiugai 2025-07-08 10:36:47 +08:00
6c46083d4a Merge pull request '首页样式调整' (#441) from projects/line-new-zjl into projects/line-new
Reviewed-on: #441
2025-07-07 15:49:44 +08:00
ab486dd71b 首页样式调整 2025-07-07 15:49:00 +08:00
4da1e6f0b1 Merge pull request '首页样式' (#440) from projects/line-new-zjl into projects/line-new
Reviewed-on: #440
2025-07-04 17:03:31 +08:00
0b689b5452 首页样式 2025-07-04 17:02:20 +08:00
146 changed files with 32673 additions and 10429 deletions

View File

@@ -12,8 +12,10 @@ ENV = 'development'
VUE_APP_TITLE = 智能监控分析系统
# 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
VUE_APP_BASE_API = 'http://172.16.32.40:48080'
# VUE_APP_BASE_API = 'http://172.16.33.187:48082'
# VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
VUE_APP_BASE_API = 'http://172.16.32.79:48082'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

BIN
dist.zip Normal file

Binary file not shown.

View File

@@ -42,16 +42,19 @@
},
"dependencies": {
"@babel/parser": "7.18.4",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.27.2",
"benz-amr-recorder": "^1.1.5",
"bpmn-js-token-simulation": "0.10.0",
"chinese-lunar": "^0.1.4",
"clipboard": "2.0.8",
"code-brick-zj": "^1.0.2",
"core-js": "^3.26.0",
"crypto-js": "^4.0.0",
"diagram-js": "^12.3.0",
"echarts": "5.4.0",
"el-tree-transfer": "^2.4.7",
"element-ui": "2.15.12",
"file-saver": "^2.0.5",
"fuse.js": "6.6.2",

View File

@@ -59,3 +59,34 @@ export function getEquipmentAll() {
method: 'get'
})
}
export function getTree(query) {
return request({
url: '/base/factory/getTree',
method: 'get',
params: query
})
}
export function getEquipmentOverall(data) {
return request({
url: '/monitoring/equipment-overall/get',
method: 'post',
data: data,
});
}
export function getParamMonitor(data) {
return request({
url: '/monitoring/equipment-monitor/paramMonitor',
method: 'post',
data: data,
});
}
export function getAlarmDet(data) {
return request({
url: 'monitoring/equipment-overall/alarmDet',
method: 'post',
data: data,
});
}

View File

@@ -52,3 +52,5 @@ export function exportEquipmentTypeExcel(query) {
responseType: 'blob'
})
}

View File

@@ -25,10 +25,10 @@ export function getCT(data) {
// 获取产线平衡分析数据new
export function getNewCTNow(data) {
return request({
url: '/analysis/production-analysis/getNewCTNow',
method: 'post',
data: data
})
url: '/analysis/production-analysis/getNewCTNow',
method: 'post',
data: data,
});
}
// 获取产线平衡分析数据趋势图new
export function getNewCTCharts(data) {
@@ -39,9 +39,10 @@ export function getNewCTCharts(data) {
})
}
// 获取产线平衡分析数据设备listnew
export function getNewCTDet(id) {
export function getNewCTDet(data) {
return request({
url: '/analysis/production-analysis/getNewCTDet?lineId='+id,
method: 'get',
})
url: '/analysis/production-analysis/getNewCTDet',
method: 'post',
data:data
});
}

View File

@@ -41,6 +41,25 @@ export function getProductAuto(data) {
})
}
export function getPdlAutoReportNewSearchNow(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow',
method: 'post',
data: data,
timeout: 60000,
});
}
export function getPdlAutoReportNewSearchLastGroup(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchLastGroup',
method: 'post',
data: data,
timeout: 60000,
});
}
// 班组自动报表分页
export function getTeamReportPage(data) {
return request({
@@ -57,3 +76,29 @@ export function getTeamReportPageDet(id) {
method: 'get',
})
}
// 获取产品当班数据
export function getProcessAutoReportGroup(data) {
return request({
url: '/monitoring/production-monitor/getProcessAutoReportGroup',
method: 'post',
data: data,
});
}
// 获取产品当天数据
export function getProcessAutoReportDay(data) {
return request({
url: '/monitoring/production-monitor/getProcessAutoReportDay',
method: 'post',
data: data,
});
}
// 获取产品历史数据
export function getProcessAutoReportNew(data) {
return request({
url: '/monitoring/production-monitor/getProcessAutoReportNew',
method: 'post',
data: data,
});
}

View File

@@ -14,3 +14,79 @@ export function getSectionDataSearch(data) {
data: data
})
}
// 获取下片日志分页数据
export function getDownLogPage(data) {
return request({
url: '/base/down-log/page',
method: 'get',
params: data,
});
}
// 获取下片日志历史数据
export function getDownLogHisData(data) {
return request({
url: '/base/down-log/pagehis',
method: 'get',
params: data,
});
}
// 导出下片日志Excel
export function exportDownLogData(query) {
return request({
url: '/base/down-log/export-excel',
method: 'get',
params: query,
responseType: 'blob',
});
}
// 获得所有工厂产线列表
export function getPdList() {
return request({
url: '/base/production-line/listAll',
method: 'get'
})
}
// 获得玻璃型号列表
export function getThick() {
return request({
url: '/base/down-log/thick',
method: 'get',
});
}
// 获得原片报表
export function getCostOriginRadioHisData(data) {
return request({
url: '/monitoring/cost-origin-ratio-his/page',
method: 'get',
params: data,
});
}
// 修改原片报表
export function editCostOriginRadioHisData(data) {
return request({
url: '/monitoring/cost-origin-ratio-his/update',
method: 'put',
data: data,
});
}
// 导出原片报表
export function exportCostOriginRadioHisData(data) {
return request({
url: '/monitoring/cost-origin-ratio-his/export-excel',
method: 'get',
params: data,
responseType: 'blob',
});
}

153
src/api/group/Schedule.js Normal file
View File

@@ -0,0 +1,153 @@
import request from '@/utils/request'
// 删除排班计划配置基础信息
export function deleteGroupPlan(id) {
return request({
url: '/base/group-scheduling-plan/delete?id=' + id,
method: 'delete'
})
}
// 获得排班计划配置基础信息分页
export function getGroupPlanPage(query) {
return request({
url: '/base/group-scheduling-plan/page',
method: 'get',
params: query
})
}
// 获取code
export function getCode() {
return request({
url: '/base/group-scheduling-plan/getCode',
method: 'get'
})
}
// 获得产线工段树形结构
export function getGroupPlanTree() {
return request({
url: '/base/factory/getTreeSimple',
method: 'get'
})
}
// 基础信息下一步至班组班次
export function createStepOne(data) {
return request({
url: '/base/group-scheduling-plan/createStepOne',
method: 'post',
data:data
})
}
// 班组班次上一步至基础信息
export function returnStepOne(id) {
return request({
url: '/base/group-scheduling-plan/returnStepOne?id='+id,
method: 'delete',
})
}
// 获取部门下可用班组
export function listByDeptId(id) {
return request({
url: '/base/group-team/listByDeptId?id='+id,
method: 'get'
})
}
// 作废计划
export function disablePlan(id) {
return request({
url: '/base/group-scheduling-plan/disablePlan?id='+id,
method: 'delete',
})
}
// 同步节假日
export function updateScheduleLater(data) {
return request({
url: '/base/group-holiday/updateScheduleLater',
method: 'post',
data:data
})
}
// 复制计划
export function copyPlan(id) {
return request({
url: '/base/group-scheduling-plan/copyPlan?id='+id,
method: 'get'
})
}
// 列表草稿编辑
export function draftEditing(id) {
return request({
url: '/base/group-scheduling-plan/draftEditing?id='+id,
method: 'get'
})
}
// 排班计划-详情
export function getPlan(id) {
return request({
url: '/base/group-scheduling-plan/get?id='+id,
method: 'get'
})
}
// 弹窗-取消
export function cancelStepThree(id) {
return request({
url: '/base/group-scheduling-plan/cancelStepThree?id='+id,
method: 'delete',
})
}
// 第三步确认并执行 检查计划时间是否冲突,如果有,返回冲突的计划列表
export function checkPlan(data) {
return request({
url: '/base/group-scheduling-plan/checkPlan',
method: 'post',
data:data
})
}
// 第三步确认并执行 执行
export function createStepFour(id) {
return request({
url: '/base/group-scheduling-plan/createStepFour',
method: 'post',
data:id
})
}
// 班组班次下一步至获取预览
export function createStepTwo(data) {
return request({
url: '/base/group-scheduling-plan/createStepTwo',
method: 'post',
data:data
})
}
// 获取预览上一步至班组班次
export function returnStepTwo(id) {
return request({
url: '/base/group-scheduling-plan/returnStepTwo?id='+id,
method: 'delete',
})
}
// 第三步获取预览
export function getPerView(data) {
return request({
url: '/base/group-scheduling-plan/getPerView',
method: 'post',
data:data
})
}
// 导出 Excel
export function exportExcel(query) {
return request({
url: '/base/group-scheduling-plan/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

18
src/api/group/calendar.js Normal file
View File

@@ -0,0 +1,18 @@
import request from '@/utils/request'
// 获取部门及下级部门排班list
export function getDeptSchedulingList(data) {
return request({
url: '/base/group-team-scheduling/getDeptSchedulingList',
method: 'post',
data: data
})
}
// 某个班组的排班list
export function getClassSchedulingList(data) {
return request({
url: '/base/group-team-scheduling/getClassSchedulingList',
method: 'post',
data: data
})
}

View File

@@ -0,0 +1,54 @@
import request from '@/utils/request'
// 创建班组基础信息
export function createGroup(data) {
return request({
url: '/base/group-team/create',
method: 'post',
data: data
})
}
// 更新班组基础信息
export function updateGroup(data) {
return request({
url: '/base/group-team/update',
method: 'put',
data: data
})
}
// 获得班组基础信息
export function getGroup(id) {
return request({
url: '/base/group-team/get?id=' + id,
method: 'get'
})
}
// 检查更新-生产班组
export function updateIsProduction(id) {
return request({
url: '/base/group-team/updateIsProduction?id=' + id,
method: 'get'
})
}
// 获得班组基础信息分页
export function getGroupPage(query) {
return request({
url: '/base/group-team/page',
method: 'get',
params: query
})
}
// 获取班组code
export function getCode() {
return request({
url: '/base/group-team/getCode',
method: 'get'
})
}

View File

@@ -0,0 +1,118 @@
/*
* @Author: zwq
* @Date: 2025-10-18 21:24:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-22 14:34:29
* @Description:
*/
import request from '@/utils/request'
// 获得节假日基础信息分页
export function deptHolidayPage(query) {
return request({
url: '/base/group-holiday/page',
method: 'get',
params: query
})
}
// 获得部门节假日信息
export function deptHolidayList(data) {
return request({
url: '/base/group-holiday/deptHolidayList',
method: 'post',
data: data
})
}
// 创建节假日基础信息
export function createHoliday(data) {
return request({
url: '/base/group-holiday/create',
method: 'post',
data: data
})
}
// 节假日操作后直接更新排班日历
export function updateSchedule(data) {
return request({
url: '/base/group-holiday/updateSchedule',
method: 'post',
data: data
})
}
// 更新节假日基础信息
export function updateHoliday(data) {
return request({
url: '/base/group-holiday/update',
method: 'put',
data: data
})
}
// 删除节假日基础信息前校验是否影响排班
export function checkDeleteHoliday(id) {
return request({
url: '/base/group-holiday/checkDelete?id=' + id,
method: 'delete'
})
}
// 删除
export function deleteHoliday(id) {
return request({
url: '/base/group-holiday/delete?id=' + id,
method: 'delete'
})
}
// 获得节假日基础信息
export function getHoliday(id) {
return request({
url: '/base/group-holiday/get?id=' + id,
method: 'get'
})
}
// 获得节假日变动日志分页
export function deptHolidayLogList(query) {
return request({
url: '/base/group-holiday-log/page',
method: 'get',
params: query
})
}
// 获得用户本人及以下的部门扁平化结构
export function getEnableData() {
return request({
url: '/base/group-team-scheduling/getEnableData',
method: 'get',
})
}
// 解除继承节假日
export function disExtends(data) {
return request({
url: '/base/group-holiday/disExtends',
method: 'post',
data: data
})
}
// 恢复继承节假日
export function reExtends(data) {
return request({
url: '/base/group-holiday/reExtends',
method: 'post',
data: data
})
}
// 获得部门节假日继承设置信息设置
export function getSet(query) {
return request({
url: '/base/group-holiday-dept-set/getSet',
method: 'get',
params: query
})
}

View File

@@ -0,0 +1,56 @@
import request from '@/utils/request'
// 创建能源监控配置
export function getDefectSummaryTable(data) {
return request({
url: '/extend/check-gaozhun-record/defectSummaryTable',
method: 'post',
data: data,
});
}
export function getTranslucentPage(data) {
return request({
url: '/monitoring/translucent/page',
method: 'get',
params: data,
});
}
export function exportTranslucent(data) {
return request({
url: '/monitoring/translucent/export-excel',
method: 'get',
params: data,
responseType: 'blob',
});
}
export function getDefectAnalysis(data) {
return request({
url: '/extend/check-gaozhun-record/defectAnalysis',
method: 'post',
data: data,
});
}
export function getSectionDefect(data) {
return request({
url: '/extend/check-gaozhun-record/sectionDefect',
method: 'post',
data: data,
});
}
export function getDefectSummaryChart(data) {
return request({
url: '/extend/check-gaozhun-record/defectSummaryChart',
method: 'post',
data: data,
});
}
export function getDefectSummaryDet(data) {
return request({
url: '/extend/check-gaozhun-record/defectSummaryDet',
method: 'post',
data: data,
});
}

View File

@@ -0,0 +1,63 @@
/*
* @Author: zhp
* @Date: 2023-12-08 15:26:59
* @LastEditTime: 2023-12-11 15:21:44
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getQualityIsraPage(query) {
return request({
url: '/extend/check-isra-statistics/getIsraData',
method: 'get',
params: query,
});
}
export function getQualityIsraDayMap(query) {
return request({
url: '/base/quality-isra-statistics/dayMap',
method: 'get',
params: query
})
}
export function getQualityIsraWeekMap(query) {
return request({
url: '/base/quality-isra-statistics/weekMap',
method: 'get',
params: query
})
}
export function getQualityIsraMonthMap(query) {
return request({
url: '/base/quality-isra-statistics/monthMap',
method: 'get',
params: query
})
}
export function getQualityIsraDayList(query) {
return request({
url: '/base/quality-isra-statistics/dayList',
method: 'get',
params: query
})
}
export function getQualityIsraWeekList(query) {
return request({
url: '/base/quality-isra-statistics/weekList',
method: 'get',
params: query
})
}
export function getQualityIsraMonthList(query) {
return request({
url: '/base/quality-isra-statistics/monthList',
method: 'get',
params: query
})
}

View File

@@ -1 +1,18 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>全屏</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" transform="translate(-1865.000000, -106.000000)" fill="#0B58FF">
<g id="全屏" transform="translate(1865.000000, 106.000000)">
<g>
<rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M27.3264942,0.842105263 L27.583814,0.850525866 C28.0103146,0.878577843 28.4244403,0.976634518 28.8180051,1.14344343 C29.2746777,1.33424853 29.6828981,1.60928508 30.0368065,1.96319349 C30.3881547,2.31454163 30.6645305,2.72554187 30.8562967,3.18137947 C31.0567273,3.65427262 31.1578947,4.15615812 31.1578947,4.6735058 L31.1578947,26.4843889 L31.1494741,26.7417088 C31.1214222,27.1682093 31.0233655,27.5823351 30.8565566,27.9758999 C30.6657515,28.4325724 30.3907149,28.8407928 30.0368065,29.1947013 C29.6854584,29.5460494 29.2744581,29.8224253 28.8186205,30.0141914 C28.3457274,30.214622 27.8438419,30.3157895 27.3264942,30.3157895 L5.51561106,30.3157895 L5.25829123,30.3073689 C4.83179065,30.2793169 4.41766492,30.1812602 4.02410014,30.0144513 C3.5674276,29.8236462 3.15920715,29.5486097 2.80529875,29.1947013 C2.45395061,28.8433531 2.17757472,28.4323529 1.98580856,27.9765153 C1.785378,27.5036221 1.68421053,27.0017366 1.68421053,26.4843889 L1.68421053,4.6735058 L1.69263113,4.41618596 C1.72068311,3.98968539 1.81873978,3.57555966 1.98554869,3.18199488 C2.17635379,2.72532234 2.45139035,2.31710189 2.80529875,1.96319349 C3.15664689,1.61184534 3.56764713,1.33546946 4.02348473,1.1437033 C4.49637788,0.943272735 4.99826338,0.842105263 5.51561106,0.842105263 L27.3264942,0.842105263 Z M27.3264942,2.75111508 L5.51561106,2.75111508 L5.36543907,2.75690192 C4.37431777,2.83358398 3.59322034,3.6628098 3.59322034,4.6735058 L3.59322034,26.4843889 L3.59900719,26.6345609 C3.67568924,27.6256822 4.50491506,28.4067797 5.51561106,28.4067797 L27.3264942,28.4067797 L27.4766662,28.4009928 C28.4677875,28.3243108 29.2488849,27.4950849 29.2488849,26.4843889 L29.2488849,4.6735058 L29.2430981,4.52333381 C29.166416,3.53221251 28.3371902,2.75111508 27.3264942,2.75111508 Z M6.93907808,16.8656959 L7.04823476,16.8742044 C7.51440654,16.9376019 7.87511151,17.3390325 7.87511151,17.8202498 L7.87511151,22.7419534 L12.5867439,18.0303211 L12.6763037,17.9513367 C13.0496528,17.6617272 13.593961,17.6880553 13.9362267,18.0303211 C14.3070145,18.4011089 14.3070145,19.009016 13.9362267,19.3798038 L9.18746648,24.1248885 L14.0860839,24.1248885 L14.2012238,24.1314959 C14.6923507,24.1882147 15.0747102,24.6029657 15.0673779,25.0991191 C15.056792,25.6176308 14.6323624,26.0338983 14.1128457,26.0338983 L6.94402319,26.0338983 L6.82978436,26.0273339 C6.34272021,25.9709676 5.96610169,25.5584576 5.96610169,25.0559768 L5.96610169,17.8436664 L5.97273726,17.7287345 C6.02968832,17.2384284 6.44595722,16.8559311 6.93907808,16.8656959 Z M25.9047725,5.12399643 L26.0180629,5.13054044 C26.501183,5.1867256 26.8760036,5.59778744 26.8760036,6.09522748 L26.8760036,13.3108831 L26.869368,13.425815 C26.8124169,13.9161211 26.396148,14.2986184 25.9030272,14.2888536 C25.3853261,14.278234 24.9669938,13.8525337 24.9669938,13.3342997 L24.9669938,8.4159413 L20.2553614,13.1275737 L20.1658016,13.2065581 C19.7924524,13.4961675 19.2481443,13.4698394 18.9058786,13.1275737 C18.5350907,12.7567858 18.5350907,12.1488788 18.9058786,11.7780909 L23.6509632,7.03300624 L18.7526762,7.03300624 L18.6375099,7.02640054 C18.1463449,6.96969821 17.7649507,6.5551 17.7747062,6.0600055 C17.7853132,5.54026395 18.2097429,5.12399643 18.7292596,5.12399643 L25.9047725,5.12399643 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
<g>
<rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M27.3264942,0.842105263 L27.583814,0.850525866 C28.0103146,0.878577843 28.4244403,0.976634518 28.8180051,1.14344343 C29.2746777,1.33424853 29.6828981,1.60928508 30.0368065,1.96319349 C30.3881547,2.31454163 30.6645305,2.72554187 30.8562967,3.18137947 C31.0567273,3.65427262 31.1578947,4.15615812 31.1578947,4.6735058 L31.1578947,26.4843889 L31.1494741,26.7417088 C31.1214222,27.1682093 31.0233655,27.5823351 30.8565566,27.9758999 C30.6657515,28.4325724 30.3907149,28.8407928 30.0368065,29.1947013 C29.6854584,29.5460494 29.2744581,29.8224253 28.8186205,30.0141914 C28.3457274,30.214622 27.8438419,30.3157895 27.3264942,30.3157895 L5.51561106,30.3157895 L5.25829123,30.3073689 C4.83179065,30.2793169 4.41766492,30.1812602 4.02410014,30.0144513 C3.5674276,29.8236462 3.15920715,29.5486097 2.80529875,29.1947013 C2.45395061,28.8433531 2.17757472,28.4323529 1.98580856,27.9765153 C1.785378,27.5036221 1.68421053,27.0017366 1.68421053,26.4843889 L1.68421053,4.6735058 L1.69263113,4.41618596 C1.72068311,3.98968539 1.81873978,3.57555966 1.98554869,3.18199488 C2.17635379,2.72532234 2.45139035,2.31710189 2.80529875,1.96319349 C3.15664689,1.61184534 3.56764713,1.33546946 4.02348473,1.1437033 C4.49637788,0.943272735 4.99826338,0.842105263 5.51561106,0.842105263 L27.3264942,0.842105263 Z M27.3264942,2.75111508 L5.51561106,2.75111508 L5.36543907,2.75690192 C4.37431777,2.83358398 3.59322034,3.6628098 3.59322034,4.6735058 L3.59322034,26.4843889 L3.59900719,26.6345609 C3.67568924,27.6256822 4.50491506,28.4067797 5.51561106,28.4067797 L27.3264942,28.4067797 L27.4766662,28.4009928 C28.4677875,28.3243108 29.2488849,27.4950849 29.2488849,26.4843889 L29.2488849,4.6735058 L29.2430981,4.52333381 C29.166416,3.53221251 28.3371902,2.75111508 27.3264942,2.75111508 Z M6.93907808,16.8656959 L7.04823476,16.8742044 C7.51440654,16.9376019 7.87511151,17.3390325 7.87511151,17.8202498 L7.87511151,22.7419534 L12.5867439,18.0303211 L12.6763037,17.9513367 C13.0496528,17.6617272 13.593961,17.6880553 13.9362267,18.0303211 C14.3070145,18.4011089 14.3070145,19.009016 13.9362267,19.3798038 L9.18746648,24.1248885 L14.0860839,24.1248885 L14.2012238,24.1314959 C14.6923507,24.1882147 15.0747102,24.6029657 15.0673779,25.0991191 C15.056792,25.6176308 14.6323624,26.0338983 14.1128457,26.0338983 L6.94402319,26.0338983 L6.82978436,26.0273339 C6.34272021,25.9709676 5.96610169,25.5584576 5.96610169,25.0559768 L5.96610169,17.8436664 L5.97273726,17.7287345 C6.02968832,17.2384284 6.44595722,16.8559311 6.93907808,16.8656959 Z M25.9047725,5.12399643 L26.0180629,5.13054044 C26.501183,5.1867256 26.8760036,5.59778744 26.8760036,6.09522748 L26.8760036,13.3108831 L26.869368,13.425815 C26.8124169,13.9161211 26.396148,14.2986184 25.9030272,14.2888536 C25.3853261,14.278234 24.9669938,13.8525337 24.9669938,13.3342997 L24.9669938,8.4159413 L20.2553614,13.1275737 L20.1658016,13.2065581 C19.7924524,13.4961675 19.2481443,13.4698394 18.9058786,13.1275737 C18.5350907,12.7567858 18.5350907,12.1488788 18.9058786,11.7780909 L23.6509632,7.03300624 L18.7526762,7.03300624 L18.6375099,7.02640054 C18.1463449,6.96969821 17.7649507,6.5551 17.7747062,6.0600055 C17.7853132,5.54026395 18.2097429,5.12399643 18.7292596,5.12399643 L25.9047725,5.12399643 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>更新</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" transform="translate(-474.000000, -116.000000)" fill="#0B58FF" fill-rule="nonzero">
<g id="更新" transform="translate(474.000000, 116.000000)">
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M14.9793977,2.67910156 L13.9879914,3.45429687 C12.6362336,1.72636719 10.5338899,0.6171875 8.17314768,0.6171875 C4.09678049,0.6171875 0.797366431,3.91308594 0.792086694,7.99121094 C0.786819556,12.0728516 4.09326487,15.3828125 8.17314768,15.3828125 C11.3600617,15.3828125 14.0758821,13.3613281 15.1094758,10.5294922 C15.135843,10.4556641 15.0971711,10.3730469 15.023343,10.3484375 L14.0266633,10.0056641 C13.954593,9.98105469 13.8754914,10.0179688 13.8491242,10.0900391 C13.8174836,10.1779297 13.7823274,10.2658203 13.7454133,10.3519531 C13.4413117,11.0726562 13.0053742,11.7195312 12.4499055,12.275 C11.8944367,12.8304687 11.2475617,13.2664062 10.5286164,13.5722656 C9.78506174,13.8869141 8.99228831,14.046875 8.17666331,14.046875 C7.35928049,14.046875 6.56826487,13.8869141 5.82471018,13.5722656 C5.10576487,13.2681641 4.45888987,12.8322266 3.90342112,12.275 C3.34795237,11.7195312 2.91201487,11.0726562 2.60791331,10.3519531 C2.29326487,9.60664063 2.13330393,8.815625 2.13330393,7.99824219 C2.13330393,7.18085937 2.29326487,6.38984375 2.60791331,5.64453125 C2.91201487,4.92382812 3.34795237,4.27695312 3.90342112,3.72148438 C4.45888987,3.16601563 5.10576487,2.73007813 5.82471018,2.42421875 C6.56826487,2.10957031 7.36103831,1.94960938 8.17666331,1.94960938 C8.99404612,1.94960938 9.78506174,2.10957031 10.5286164,2.42421875 C11.2475617,2.72832031 11.8944367,3.16425781 12.4499055,3.72148438 C12.6239289,3.89550781 12.7874055,4.08007812 12.9385774,4.2734375 L11.8803742,5.09960938 C11.7872102,5.17167969 11.8188508,5.31933594 11.9331086,5.34746094 L15.0198274,6.10332031 C15.107718,6.12441406 15.1938508,6.05761719 15.1938508,5.96796875 L15.2079133,2.78808594 C15.2061555,2.67207031 15.0708039,2.60703125 14.9793977,2.67910156 L14.9793977,2.67910156 Z" id="路径" stroke="#0B58FF" stroke-width="0.5"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>推出全屏</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" transform="translate(-1815.000000, -103.000000)" fill="#0B58FF">
<g id="推出全屏" transform="translate(1815.000000, 103.000000)">
<g id="全屏">
<rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
<g id="全屏">
<rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
src/assets/images/banzu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/img/home-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 936 B

View File

@@ -81,7 +81,7 @@ export default {
border: none;
background: #fff;
border-radius: 8px;
padding: 15px;
padding: 16px;
color: #888;
letter-spacing: 2px;
flex: 1;

View File

@@ -6,104 +6,48 @@
-->
<template>
<el-form
ref="form"
:model="form"
:label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
<el-input
v-if="col.input"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-input
v-if="col.textarea"
type="textarea"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-select
v-if="col.select"
v-model="form[col.prop]"
:placeholder="`请选择${col.label}`"
@change="$emit('update', form)"
v-bind="col.bind">
<el-option
v-for="opt in optionListOf[col.prop]"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
<el-date-picker
v-if="col.datetime"
v-model="form[col.prop]"
type="datetime"
:placeholder="`请选择${col.label}`"
value-format="timestamp"
v-bind="col.bind"></el-date-picker>
<el-switch
v-if="col.switch"
v-model="form[col.prop]"
active-color="#0b58ff"
inactive-color="#e1e1e1"
v-bind="col.bind"></el-switch>
<component
v-if="col.subcomponent"
:key="col.key"
:is="col.subcomponent"
:inlineStyle="col.style"></component>
<el-form ref="form" :model="form" :label-width="`${labelWidth}px`" :size="size" :label-position="labelPosition"
v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
<el-input v-if="col.input" v-model="form[col.prop]" @change="$emit('update', form)"
:placeholder="`请输入${col.label}`" v-bind="col.bind" />
<el-input v-if="col.textarea" type="textarea" v-model="form[col.prop]" @change="$emit('update', form)"
:placeholder="`请输入${col.label}`" v-bind="col.bind" />
<el-select v-if="col.select" v-model="form[col.prop]" :placeholder="`请选择${col.label}`"
@change="$emit('update', form)" v-bind="col.bind">
<el-option v-for="opt in optionListOf[col.prop]" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<el-date-picker v-if="col.datetime" v-model="form[col.prop]" type="datetime" :placeholder="`请选择${col.label}`"
value-format="timestamp" v-bind="col.bind"></el-date-picker>
<el-switch v-if="col.switch" v-model="form[col.prop]" active-color="#0b58ff" inactive-color="#e1e1e1"
v-bind="col.bind" @change="handleSwitchChange(col.prop)"></el-switch>
<component v-if="col.subcomponent" :key="col.key" :is="col.subcomponent" :inlineStyle="col.style"></component>
<div
class="upload-area"
:class="uploadOpen ? '' : 'height-48'"
ref="uploadArea"
v-if="col.upload">
<span class="close-icon" :class="uploadOpen ? 'open' : ''">
<el-button
type="text"
icon="el-icon-arrow-right"
@click="handleFilesOpen" />
</span>
<!-- :file-list="uploadedFileList" -->
<el-upload
class="upload-in-dialog"
v-if="col.upload"
:action="uploadUrl"
:headers="uploadHeaders"
:show-file-list="false"
icon="el-icon-upload2"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
v-bind="col.bind">
<el-button size="mini" :disabled="col.bind?.disabled || false">
<svg-icon
icon-class="icon-upload"
style="color: inherit"></svg-icon>
上传文件
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
</div>
</el-upload>
<uploadedFile
class="file"
v-for="file in form[col.prop] || []"
:file="file"
:key="file.fileUrl"
@delete="handleDeleteFile(file)"
@Preview="handlePreview(file)" />
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="upload-area" :class="uploadOpen ? '' : 'height-48'" ref="uploadArea" v-if="col.upload">
<span class="close-icon" :class="uploadOpen ? 'open' : ''">
<el-button type="text" icon="el-icon-arrow-right" @click="handleFilesOpen" />
</span>
<!-- :file-list="uploadedFileList" -->
<el-upload class="upload-in-dialog" v-if="col.upload" :action="uploadUrl" :headers="uploadHeaders"
:show-file-list="false" icon="el-icon-upload2" :before-upload="beforeUpload"
:on-success="handleUploadSuccess" v-bind="col.bind">
<el-button size="mini" :disabled="col.bind?.disabled || false">
<svg-icon icon-class="icon-upload" style="color: inherit"></svg-icon>
上传文件
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
</div>
</el-upload>
<uploadedFile class="file" v-for="file in form[col.prop] || []" :file="file" :key="file.fileUrl"
@delete="handleDeleteFile(file)" @Preview="handlePreview(file)" />
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
@@ -134,7 +78,8 @@ const uploadedFile = {
data() {
return {};
},
methods: {
methods: {
handleDelete() {
this.$emit('delete', this.file);
},
@@ -251,7 +196,12 @@ export default {
// 处理 options
this.handleOptions();
},
methods: {
methods: {
handleSwitchChange(prop) {
// 触发 update 事件,将最新的 form 数据传递给父组件
this.$emit('update', { ...this.form });
console.log(`switch ${prop} 变化:`, this.form[prop]);
},
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);

View File

@@ -9,6 +9,7 @@ import store from './store';
import router from './router';
import directive from './directive'; // directive
import plugins from './plugins'; // plugins
import dataV from '@jiaminghi/data-view'
import './assets/icons'; // icon
import './permission'; // permission control
@@ -77,6 +78,7 @@ Vue.use(directive);
Vue.use(plugins);
Vue.use(VueMeta);
// Vue.use(hljs.vuePlugin);
Vue.use(dataV);
// bpmnProcessDesigner 需要引入
import MyPD from '@/components/bpmnProcessDesigner/package/index.js';

View File

@@ -16,7 +16,7 @@ export default {
},
tableData: [], //table数据
listQuery: { //分页
pageSize: 10,
pageSize: 20,
pageNo: 1,
total: 1,
},

View File

@@ -76,7 +76,7 @@ export const constantRoutes = [
children: [
{
path: "index",
component: (resolve) => require(["@/views/core/base/factory/index"], resolve),
component: (resolve) => require(["@/views/home/index"], resolve),
name: "首页",
meta: { title: "首页", icon: "dashboard", affix: true },
hidden: true

View File

@@ -1,10 +1,10 @@
import axios from 'axios'
import {Message, MessageBox, Notification, Loading} from 'element-ui'
import { Message, MessageBox, Notification, Loading } from 'element-ui'
import store from '@/store'
import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'
import { getAccessToken, getRefreshToken, getTenantId, setToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import {getPath, getTenantEnable} from "@/utils/ruoyi";
import {refreshToken} from "@/api/login";
import { getPath, getTenantEnable } from "@/utils/ruoyi";
import { refreshToken } from "@/api/login";
// 需要忽略的提示。忽略后,自动 Promise.reject('error')
const ignoreMsgs = [
@@ -86,7 +86,7 @@ service.interceptors.request.use(config => {
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
const part = encodeURIComponent(propName) + '='
if (value !== null && typeof(value) !== "undefined") {
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
@@ -104,9 +104,9 @@ service.interceptors.request.use(config => {
}
return config
}, error => {
tryHideFullScreenLoading()
console.log(error)
Promise.reject(error)
tryHideFullScreenLoading()
console.log(error)
Promise.reject(error)
})
// 响应拦截器
@@ -176,36 +176,38 @@ service.interceptors.response.use(async res => {
+ '<div>5 分钟搭建本地环境</div>',
})
return Promise.reject(new Error(msg))
} else if (code === 400) {
//【班组管理】【排班计划】提交的校验按照原型图补充完整,排班计划是否重叠code400 有两个不同的返回信息
return res.data
} else if (code !== 200) {
if (msg === '无效的刷新令牌') { // hard coding忽略这个提示直接登出
console.log(msg)
} else {
Notification.error({
title: msg
})
//【班组管理】【排班计划】提交的校验按照原型图补充完整,排班计划是否重叠code400 有两个不同的返回信息
return res.data
}
return Promise.reject('error')
} else {
return res.data
}
}, error => {
tryHideFullScreenLoading()
console.log('err' + error)
let {message} = error;
if (message === "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
tryHideFullScreenLoading()
console.log('err' + error)
let { message } = error;
if (message === "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export function getBaseHeader() {
@@ -219,10 +221,10 @@ function handleAuthorized() {
if (!isRelogin.show) {
isRelogin.show = true;
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {

View File

@@ -6,35 +6,27 @@
-->
<template>
<el-drawer
:visible="visible"
:show-close="false"
:wrapper-closable="false"
class="drawer"
custom-class="mes-drawer"
:size="size || '50%'"
@closed="$emit('destroy')">
<SmallTitle slot="title">
{{
mode.includes('detail')
? '详情'
: mode.includes('edit')
? '编辑'
: '新增'
}}
</SmallTitle>
<el-drawer :visible="visible" :show-close="false" :wrapper-closable="false" class="drawer" custom-class="mes-drawer"
:size="size || '50%'" @closed="$emit('destroy')">
<SmallTitle slot="title">
{{
mode.includes('detail')
? '详情'
: mode.includes('edit')
? '编辑'
: '新增'
}}
</SmallTitle>
<div class="drawer-body flex">
<div class="drawer-body__content">
<section v-for="(section, index) in sections" :key="section.key">
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
<div class="drawer-body flex">
<div class="drawer-body__content">
<section v-for="(section, index) in sections" :key="section.key">
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
<div
class="form-part"
v-if="section.key == 'base'"
style="border-bottom: 1px solid #dfdfdf; margin-bottom: 24px">
<el-skeleton v-if="!showForm" animated />
<!-- <BaseInfoForm
<div class="form-part" v-if="section.key == 'base'"
style="border-bottom: 1px solid #dfdfdf; margin-bottom: 24px">
<el-skeleton v-if="!showForm" animated />
<!-- <BaseInfoForm
key="drawer-dialog-form"
v-if="showForm"
ref="form"
@@ -42,141 +34,87 @@
v-model="form"
:rows="formRows" /> -->
<!-- if -->
<el-row v-if="mode.includes('detail')" style="margin-bottom: 24px">
<el-col :span="8">
<div
class="title"
style="font-weight: 700; font-size: 16px; margin: 8px 0">
设备名
</div>
<div class="value" style="font-size: 14px">
{{ form.equipmentName }}
</div>
</el-col>
<el-col :span="8">
<div
class="title"
style="font-weight: 700; font-size: 16px; margin: 8px 0">
关联表名
</div>
<div class="value" style="font-size: 14px">
{{ form.plcName }}
</div>
</el-col>
</el-row>
<!-- else -->
<el-row v-else style="margin-bottom: 24px" :gutter="20">
<el-form ref="form" :model="form">
<el-col :span="8">
<el-form-item
class="title"
label="设备名"
style="font-size: 16px; margin: 8px 0">
<el-select
v-model="form.equipmentId"
filterable
clearable
placeholder="请选择设备">
<el-option
v-for="eq in eqList"
:key="eq.id"
:label="eq.name"
:value="eq.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
class="title"
label="设备关联表名"
style="font-size: 16px; margin: 8px 0">
<el-select
v-model="form.plcId"
filterable
clearable
placeholder="请选择关联表">
<el-option
v-for="plc in plcList"
:key="plc.id"
:label="plc.plcTableName"
:value="plc.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<!-- if -->
<el-row v-if="mode.includes('detail')" style="margin-bottom: 24px">
<el-col :span="8">
<div class="title" style="font-weight: 700; font-size: 16px; margin: 8px 0">
设备名
</div>
<div class="value" style="font-size: 14px">
{{ form.equipmentName }}
</div>
</el-col>
<el-col :span="8">
<div class="title" style="font-weight: 700; font-size: 16px; margin: 8px 0">
关联表名
</div>
<div class="value" style="font-size: 14px">
{{ form.plcName }}
</div>
</el-col>
</el-row>
<!-- else -->
<el-row v-else style="margin-bottom: 24px" :gutter="20">
<el-form ref="form" :model="form">
<el-col :span="8">
<el-form-item class="title" label="设备名" style="font-size: 16px; margin: 8px 0">
<el-select v-model="form.equipmentId" filterable clearable placeholder="请选择设备">
<el-option v-for="eq in eqList" :key="eq.id" :label="eq.name" :value="eq.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="title" label="设备关联表名" style="font-size: 16px; margin: 8px 0">
<el-select v-model="form.plcId" filterable clearable placeholder="请选择关联表">
<el-option v-for="plc in plcList" :key="plc.id" :label="plc.plcTableName"
:value="plc.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<div
v-if="section.key == 'attrs'"
style="position: relative; margin-top: 12px">
<div
v-if="!mode.includes('detail')"
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加参数
</el-button>
</div>
<base-table
v-loading="attrListLoading"
:table-props="section.props"
:page="attrQuery?.params.pageNo || 1"
:limit="attrQuery?.params.pageSize || 10"
:table-data="list"
@emitFun="handleEmitFun">
<!-- :add-button-show="mode.includes('detail') ? null : '添加属性'"
<div v-if="section.key == 'attrs'" style="position: relative; margin-top: 12px">
<div v-if="!mode.includes('detail')" style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加参数
</el-button>
</div>
<base-table v-loading="attrListLoading" :table-props="section.props" :page="attrQuery?.params.pageNo || 1"
:limit="attrQuery?.params.pageSize || 10" :table-data="list" @emitFun="handleEmitFun">
<!-- :add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr" -->
<method-btn
v-if="section.tableBtn && !mode.includes('detail')"
slot="handleBtn"
label="操作"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
</base-table>
<method-btn v-if="section.tableBtn && !mode.includes('detail')" slot="handleBtn" label="操作"
:method-list="tableBtn" @clickBtn="handleTableBtnClick" />
</base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="attrQuery.params.pageNo"
:limit.sync="attrQuery.params.pageSize"
@pagination="getAttrList" />
</div>
</section>
</div>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="attrQuery.params.pageNo"
:limit.sync="attrQuery.params.pageSize" @pagination="getAttrList" />
</div>
</section>
</div>
<div class="drawer-body__footer">
<el-button style="" @click="handleCancel">取消</el-button>
<el-button
type="primary"
v-if="!mode.includes('detail')"
@click="handleSave">
保存
</el-button>
</div>
</div>
<div class="drawer-body__footer">
<el-button style="" @click="handleCancel">取消</el-button>
<el-button type="primary" v-if="!mode.includes('detail')" @click="handleSave">
保存
</el-button>
</div>
</div>
<!-- 属性对话框 -->
<base-dialog
v-if="sections[1].allowAdd"
:dialogTitle="attrTitle"
:dialogVisible="attrFormVisible"
width="45%"
:append-to-body="true"
custom-class="baseDialog"
@close="closeAttrForm"
@cancel="closeAttrForm"
@confirm="submitAttrForm">
<!-- :disabled="mode.includes('detail')" -->
<DialogForm
v-if="attrFormVisible"
ref="attrForm"
v-model="attrForm"
:rows="attrRows" />
</base-dialog>
</el-drawer>
<!-- 属性对话框 -->
<base-dialog v-if="sections[1].allowAdd" :dialogTitle="attrTitle" :dialogVisible="attrFormVisible" width="45%"
:append-to-body="true" custom-class="baseDialog" @close="closeAttrForm" @cancel="closeAttrForm"
@confirm="submitAttrForm">
<!-- :disabled="mode.includes('detail')" -->
<DialogForm v-if="attrFormVisible" ref="attrForm" v-model="attrForm" :data-form="attrForm"
:rows="attrRows"
@update="handleAttrFormUpdate"/>
</base-dialog>
</el-drawer>
</template>
<script>
@@ -232,7 +170,9 @@ export default {
defaultValue: '',
description: '',
remark: '',
alarmContent: '',
alarmContent: '',
displayTip: false,
alarmTip: false,
},
attrFormVisible: false,
attrRows: [
@@ -342,7 +282,27 @@ export default {
},
],
},
],
],
[
{
switch: true,
label: '是否展示',
prop: 'displayTip',
bind: {
'active-value': true,
'inactive-value': false,
},
},
{
switch: true,
label: '超出阈值是否报警',
prop: 'alarmTip',
bind: {
'active-value': true,
'inactive-value': false,
},
},
],
[
{
input: true,
@@ -436,7 +396,24 @@ export default {
}
}
},
methods: {
methods: {
handleAttrFormUpdate(updatedForm) {
console.log('updatedForm', updatedForm);
// 只同步需要的字段,避免覆盖其他数据
this.attrForm = {
...this.attrForm,
...updatedForm,
// 确保开关值是布尔类型(双重保险)
displayTip: Boolean(updatedForm.displayTip),
alarmTip: Boolean(updatedForm.alarmTip),
collection: Number(updatedForm.collection) // 采集开关保持数字类型
};
console.log('开关值同步:', {
displayTip: this.attrForm.displayTip,
alarmTip: this.attrForm.alarmTip
});
},
handleTableBtnClick({ type, data }) {
switch (type) {
case 'edit':
@@ -502,7 +479,8 @@ export default {
name: '',
plcParamName: '',
unit: '',
collection: 1,
collection: 1,
minValue: '',
maxValue: '',
defaultValue: '',
@@ -510,7 +488,9 @@ export default {
remark: '',
equipmentParamType: '',
productionParamType: '',
alarmContent: '',
alarmContent: '',
displayTip: false,
alarmTip: false,
};
this.attrTitle = '添加参数绑定信息';
this.attrFormVisible = true;
@@ -523,8 +503,15 @@ export default {
method: 'get',
params: { id: attrId },
});
if (res.code == 0) {
this.attrForm = res.data;
if (res.code == 0) {
console.log('res.data', res.data);
this.attrForm = {
...res.data,
// // 强制转为数字类型,避免字符串类型导致绑定失败
// displayTip: Number(res.data.displayTip) || 0,
// alarmTip: Number(res.data.alarmTip) || 0
};
this.attrTitle = '编辑参数绑定信息';
this.attrFormVisible = true;
}
@@ -563,7 +550,8 @@ export default {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
}
console.log('this.attrForm', this.attrForm);
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
@@ -583,8 +571,9 @@ export default {
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
this.shouldRefreshPageView = true;
this.shouldRefreshPageView = true;
this.getAttrList();
},
});
}

View File

@@ -103,7 +103,7 @@ export default {
id: null,
code: '',
materialId: '',
price: '',
price: undefined,
startTime: new Date().getTime(),
endTime: null,
remark: '',

View File

@@ -80,8 +80,18 @@ export default {
immediate: true,
},
},
methods: {
initChart() {
methods: {
getUniqueTimes() {
const { edgeCt, temperCt, downCt } = this.barData;
// 合并所有包含时间的数组
const allTimeEntries = [...(edgeCt || []), ...(temperCt || []), ...(downCt || [])];
// 提取时间戳并去重(使用 Set
const uniqueTimes = [...new Set(allTimeEntries.map(item => item.recordTime))];
// 按时间戳排序(确保时间顺序正确)
return uniqueTimes.sort((a, b) => a - b);
},
initChart() {
const uniqueTimes = this.getUniqueTimes();
const _this = this;
this.chart.setOption({
title: {
@@ -124,9 +134,7 @@ export default {
},
xAxis: {
type: 'category',
data: this.barData.edgeCt.map((item) => {
return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
}),
data: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')),
axisPointer: {
type: 'shadow',
},
@@ -152,44 +160,50 @@ export default {
end: 100,
},
],
series: [
{
name: '磨边节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: this.barData.edgeCt.map((item) => {
return item.ct;
}),
},
{
name: '钢化节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: this.barData.temperCt.map((item) => {
return item.ct;
}),
},
{
name: '下片节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: this.barData.downCt.map((item) => {
return item.ct;
}),
},
],
series: [
{
name: '磨边节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: uniqueTimes.map(time => {
// 查找当前时间对应的 ct 值,没有则补 null图表中会显示为断点
const match = this.barData.edgeCt.find(item => item.recordTime === time);
return match ? match.ct : 0;
})
},
// 钢化节拍
{
name: '钢化节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: uniqueTimes.map(time => {
const match = this.barData.temperCt.find(item => item.recordTime === time);
return match ? match.ct : 0;
})
},
// 下片节拍
{
name: '下片节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: uniqueTimes.map(time => {
const match = this.barData.downCt.find(item => item.recordTime === time);
return match ? match.ct : 0;
})
}
]
});
},
},

View File

@@ -47,15 +47,15 @@ const tableProps = [
prop: 'equipmentName',
label: '设备',
},
{
prop: 'size',
label: '规格',
showOverflowtooltip: true,
},
{
prop: 'process',
label: '产品工艺',
},
// {
// prop: 'size',
// label: '规格',
// showOverflowtooltip: true,
// },
// {
// prop: 'process',
// label: '产品工艺',
// },
{
prop: 'standardCt',
label: '标准节拍pcs/min',
@@ -119,12 +119,12 @@ export default {
},
methods: {
// 获取数据列表
init(lineId, startTime, endTime) {
init(lId, startTime, endTime) {
this.eqChartData = [];
this.time.startTime = startTime;
this.time.endTime = endTime;
this.dataListLoading = true;
getNewCTDet(lineId).then((response) => {
getNewCTDet({ lineId: [lId], startTime, endTime }).then((response) => {
this.tableData = response.data;
this.dataListLoading = false;
});

View File

@@ -183,7 +183,7 @@ export default {
// 获取当前时间
const now = new Date();
// 获取前一天的同一时间
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
const yesterday = new Date(now.getTime());
// 设置为00:00:00
yesterday.setHours(0, 0, 0, 0);
// 设置为23:59:59

View File

@@ -72,16 +72,6 @@ export default {
dateLabelList: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: [],
multiple: true,
filterable: true,
width: 400,
},
{
type: 'datePicker',
label: '时间',
@@ -92,7 +82,17 @@ export default {
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'time',
},
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: [],
multiple: true,
filterable: true,
width: 300,
},
{
type: 'button',
btnName: '查询',
@@ -113,7 +113,7 @@ export default {
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list;
this.formConfig[1].selectOptions = response.data.list;
// this.formConfig[0].defaultSelect = response.data.list[0].id
// this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id)
});

View File

@@ -279,7 +279,8 @@ export default {
filterable: true,
clearable: true,
},
},
},
// {
// select: true,
// label: '设备分组',

View File

@@ -92,7 +92,7 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备类型名称' },
{ prop: 'code', label: '检测类型编码' },
{ prop: 'code', label: '设备类型编码' },
{ prop: 'remark', label: '备注' },
],
searchBarFormConfig: [

View File

@@ -1,157 +1,104 @@
<template>
<el-drawer
:visible.sync="visible"
:show-close="false"
:wrapper-closable="false"
class="drawer"
size="60%">
<small-title slot="title" :no-padding="true">
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
</small-title>
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
<small-title slot="title" :no-padding="true">
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
</small-title>
<div class="content">
<div class="visual-part">
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataRule"
label-width="100px"
label-position="top"
@keyup.enter.native="dataFormSubmit">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
:disabled="isdetail"
placeholder="请输入产品编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
:disabled="isdetail"
placeholder="请输入产品名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品类型" prop="typeDictValue">
<el-select
v-model="dataForm.typeDictValue"
style="width: 100%"
:disabled="isdetail"
placeholder="请选择产品类型">
<el-option
v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unitDictValue">
<el-select
v-model="dataForm.unitDictValue"
style="width: 100%"
:disabled="isdetail"
placeholder="请选择单位">
<el-option
v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
:key="dict.value"
:label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="原片规格" prop="originalSpecifications">
<el-input
:disabled="isdetail"
v-model="dataForm.originalSpecifications"
placeholder="请输入原片规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="原片单位平方数" prop="originalArea">
<el-input
:disabled="isdetail"
v-model="dataForm.originalArea"
placeholder="请输入原片单位平方数" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="深加工规格" prop="specifications">
<el-input
:disabled="isdetail"
v-model="dataForm.specifications"
placeholder="请输入深加工规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="深加工单位平方数" prop="area">
<el-input
:disabled="isdetail"
v-model="dataForm.area"
placeholder="请输入深加工单位平方数" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="完成单位产品用时" prop="processTime">
<el-input
:disabled="isdetail"
v-model="dataForm.processTime"
placeholder="请输入完成单位产品用时" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="content">
<div class="visual-part">
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" label-position="top"
@keyup.enter.native="dataFormSubmit">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品编码" prop="code">
<el-input v-model="dataForm.code" clearable :disabled="isdetail" placeholder="请输入产品编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品名称" prop="name">
<el-input v-model="dataForm.name" clearable :disabled="isdetail" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品类型" prop="typeDictValue">
<el-select v-model="dataForm.typeDictValue" style="width: 100%" :disabled="isdetail"
placeholder="请选择产品类型">
<el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unitDictValue">
<el-select v-model="dataForm.unitDictValue" style="width: 100%" :disabled="isdetail"
placeholder="请选择单位">
<el-option v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="原片规格" prop="originalSpecifications">
<el-input :disabled="isdetail" v-model="dataForm.originalSpecifications" placeholder="请输入原片规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="原片单位平方数" prop="originalArea">
<el-input :disabled="isdetail" v-model="dataForm.originalArea" placeholder="请输入原片单位平方数" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="深加工规格" prop="specifications">
<el-input :disabled="isdetail" v-model="dataForm.specifications" placeholder="请输入深加工规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="深加工单位平方数" prop="area">
<el-input :disabled="isdetail" v-model="dataForm.area" placeholder="请输入深加工单位平方数" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="完成单位产品用时(S)" prop="processTime">
<el-input :disabled="isdetail" v-model="dataForm.processTime" placeholder="请输入完成单位产品用时(S)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 产品工艺" prop="processTypes">
<el-select :disabled="isdetail" collapse-tags multiple v-model="dataForm.processTypes" clearable
style="width: 100%" placeholder="请选择产品工艺">
<el-option v-for="dict in processTypeList" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<small-title
style="margin: 16px 0; padding-left: 8px"
:no-padding="true">
产品属性列表
</small-title>
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
产品属性列表
</small-title>
<div class="attr-list">
<base-table
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:add-button-show="isdetail ? null : '添加属性'"
@emitButtonClick="addNew()"
:table-data="productAttributeList">
<method-btn
v-if="!isdetail"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
v-show="listQuery.total > 0"
:total="listQuery.total"
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
@pagination="getList" />
</div>
</div>
</div>
<div class="attr-list">
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:add-button-show="isdetail ? null : '添加属性'" @emitButtonClick="addNew()" :table-data="productAttributeList">
<method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" />
</div>
</div>
</div>
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
@@ -167,22 +114,19 @@
</span>
</div> -->
<div class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
</el-button>
<el-button v-else type="primary" @click="dataFormSubmit()">
确定
</el-button>
</div>
<div class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
</el-button>
<el-button v-else type="primary" @click="dataFormSubmit()">
确定
</el-button>
</div>
<product-attr-add
v-if="addOrUpdateVisible"
ref="addOrUpdate"
:product-id="dataForm.id"
@refreshDataList="getList" />
</el-drawer>
<product-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :product-id="dataForm.id"
@refreshDataList="getList" />
</el-drawer>
</template>
<script>
@@ -246,13 +190,31 @@ export default {
specifications: '', // 深加工规格
unitDictValue: '', // 单位id
originalSpecifications: '', // 原片规格
originalArea: 0, // 原片单位平方数
originalArea: 0, // 原片单位平方数
processTypes: [],
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
},
},
processTypeList: [
{
value: '1',
label:'压花丝印'
},
{
value: '2',
label: '无印打孔'
},
{
value: '3',
label: '单层镀膜'
}, {
value: '4',
label: '双层镀膜'
}
],
dataRule: {
code: [
{
@@ -314,7 +276,8 @@ export default {
init(id, isdetail) {
this.initData();
this.isdetail = isdetail || false;
this.dataForm.id = id || null;
this.dataForm.id = id || null;
// this.dataForm.processTypes = [] // 清空工艺选择
this.visible = true;
this.$nextTick(() => {
@@ -322,9 +285,26 @@ export default {
if (this.dataForm.id) {
// 获取产品详情
getProduct(id).then((response) => {
this.dataForm = response.data;
});
getProduct(id).then((res) => {
const resData = res.data || {};
// 逐个字段赋值(保留响应式)
this.dataForm.name = resData.name || '';
this.dataForm.code = resData.code || '';
this.dataForm.area = resData.area || 0;
this.dataForm.typeDictValue = resData.typeDictValue || null;
this.dataForm.processTime = resData.processTime || null;
this.dataForm.specifications = resData.specifications || '';
this.dataForm.unitDictValue = resData.unitDictValue || '';
this.dataForm.originalSpecifications = resData.originalSpecifications || '';
this.dataForm.originalArea = resData.originalArea || 0;
// 处理工艺列表:确保是数组,过滤空值
this.dataForm.processTypes = resData.processType
? resData.processType.split(',').filter(Boolean)
: [];
console.log('工艺列表(编辑时):', this.dataForm.processTypes); // 验证是否为 ["1","2"] 格式
});
// 获取产品的属性列表
this.getList();
} else {
@@ -380,7 +360,7 @@ export default {
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (valid) {
// 修改的提交
if (this.dataForm.id) {
updateProduct(this.dataForm).then((response) => {

View File

@@ -1,139 +1,142 @@
<template>
<el-dialog
:visible.sync="visible"
:width="'35%'"
:append-to-body="true"
:close-on-click-modal="false"
class="dialog">
<template #title>
<slot name="title">
<div class="titleStyle">
{{ !dataForm.id ? '新增' : '编辑' }}
</div>
</slot>
</template>
<el-dialog v-loading="isLoading" loading-text="处理中..." loading-spinner="el-icon-loading"
loading-background="rgba(255, 255, 255, 0.7)" :visible.sync="visible" :width="'35%'" :append-to-body="true"
:close-on-click-modal="false" class="dialog">
<template #title>
<slot name="title">
<div class="titleStyle">
{{ !dataForm.id ? '新增' : '编辑' }}
</div>
</slot>
</template>
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataRule"
label-width="100px"
@keyup.enter.native="dataFormSubmit()">
<el-form-item label="属性" prop="name">
<el-input
v-model="dataForm.name"
placeholder="请输入属性名"
clearable />
</el-form-item>
<el-form-item label="属性值" prop="value">
<el-input
v-model="dataForm.value"
placeholder="请输入属性值"
clearable />
</el-form-item>
</el-form>
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px"
@keyup.enter.native="dataFormSubmit()">
<el-form-item label="属性名" prop="name">
<el-input v-model="dataForm.name" placeholder="请输入属性名" clearable />
</el-form-item>
<el-form-item label="属性值" prop="value">
<el-input v-model="dataForm.value" placeholder="请输入属性" clearable />
</el-form-item>
</el-form>
<el-row style="text-align: right">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</el-row>
</el-dialog>
<el-row style="text-align: right">
<el-button @click="visible = false">取消</el-button>
<el-button :loading="isLoading" type="primary" @click="dataFormSubmit()">确定</el-button>
</el-row>
</el-dialog>
</template>
<script>
import {
createProductAttr,
updateProductAttr,
getProductAttr,
createProductAttr,
updateProductAttr,
getProductAttr,
} from '@/api/core/base/productAttr';
export default {
props: {
productId: {
type: String,
default: '',
},
},
data() {
return {
visible: false,
dataForm: {
id: 0,
name: '',
value: '',
},
dataRule: {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
},
};
},
methods: {
init(id) {
this.dataForm.id = id || '';
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) {
getProductAttr(this.dataForm.id).then((res) => {
const { name, value } = res.data;
this.dataForm.name = name;
this.dataForm.value = value;
});
}
});
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 修改的提交
if (this.dataForm.id) {
updateProductAttr({
...this.dataForm,
productId: this.productId,
}).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.$emit('refreshDataList');
});
return;
}
// 添加的提交
createProductAttr({
...this.dataForm,
productId: this.productId,
}).then((response) => {
this.$modal.msgSuccess('新增成功');
this.visible = false;
this.$emit('refreshDataList');
});
}
});
},
},
props: {
productId: {
type: String,
default: '',
},
},
data() {
return {
visible: false,
isLoading: false,
dataForm: {
id: 0,
name: '',
value: '',
},
dataRule: {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
},
};
},
methods: {
init(id) {
this.dataForm.id = id || '';
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) {
getProductAttr(this.dataForm.id).then((res) => {
const { name, value } = res.data;
this.dataForm.name = name;
this.dataForm.value = value;
}).catch(err => {
console.error('获取属性详情失败:', err);
this.$modal.msgError('获取数据失败,请重试');
});
}
});
},
// 表单提交(优化加载状态和错误处理)
async dataFormSubmit() {
// 先验证表单
const valid = await new Promise((resolve) => {
this.$refs['dataForm'].validate((isValid) => resolve(isValid));
});
if (!valid) return;
this.isLoading = true; // 开始加载
try {
if (this.dataForm.id) {
// 编辑操作
await updateProductAttr({
...this.dataForm,
productId: this.productId,
});
this.$modal.msgSuccess('修改成功');
} else {
// 新增操作
await createProductAttr({
...this.dataForm,
productId: this.productId,
});
this.$modal.msgSuccess('新增成功');
}
this.visible = false;
this.$emit('refreshDataList');
} catch (error) {
// 错误处理
console.error('提交失败:', error);
this.$modal.msgError('操作失败,请重试');
} finally {
// 无论成功失败,都关闭加载状态
this.isLoading = false;
}
},
},
};
</script>
<style scoped>
.dialog >>> .el-dialog__body {
padding: 30px 24px;
.dialog>>>.el-dialog__body {
padding: 30px 24px;
}
.dialog >>> .el-dialog__header {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
padding: 13px 24px;
border-bottom: 1px solid #e9e9e9;
.dialog>>>.el-dialog__header {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
padding: 13px 24px;
border-bottom: 1px solid #e9e9e9;
}
.dialog >>> .el-dialog__header .titleStyle::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
position: relative;
top: 2px;
.dialog>>>.el-dialog__header .titleStyle::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
position: relative;
top: 2px;
}
</style>

View File

@@ -6,31 +6,17 @@
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:selectWidth="55"
:table-data="showData"
@selection-change="selectChange"
>
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList"
/>
<!-- <div v-show="false" ref="pdf">
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table v-if="showData.length" class="right-aside" v-loading="dataListLoading" :table-props="tableProps"
:page="listQuery.pageNo" :limit="listQuery.pageSize" :selectWidth="55" :table-data="showData"
@selection-change="selectChange">
</base-table>
<div v-else class="no-data-bg"></div>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
<!-- <div v-show="false" ref="pdf">
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
@@ -39,19 +25,15 @@
:table-data="selectedList"
/>
</div> -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
<el-button type="success" @click="exportPdf">pdf</el-button>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
<el-button type="success" @click="exportPdf">pdf</el-button>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@@ -203,7 +185,8 @@ export default {
}
],
};
},
},
created() {
this.getDataList()
this.getPdLineList()

View File

@@ -0,0 +1,132 @@
<!--
* @Author: zhp
* @Date: 2024-10-21 08:43:35
* @LastEditTime: 2024-10-21 09:10:09
* @LastEditors: zhp
* @Description: Vue2版本的标签切换组件
-->
<template>
<!-- 按钮切换 -->
<div v-if="buttonMode" class="button-nav">
<button v-for="m in menus" :key="m" :class="{ active: m === currentMenu }" :data-text="m"
@click="handleMenuChange(m)"></button>
</div>
<!-- 标签切换 -->
<div v-else class="custom-tabs" style="height: 100%; width: 100%">
<el-tabs v-model="currentMenu" class="tag-nav" style="height: 100%">
<el-tab-pane v-for="(m, idx) in menus" :key="m" :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
:name="m">
<slot :name="`tab${idx + 1}`"></slot>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
props: {
menus: {
type: Array,
required: true,
default: () => [],
validator(val) {
return val.length > 0;
}
},
buttonMode: {
type: Boolean,
default: true
}
},
data() {
return {
currentMenu: this.menus[0] || ''
};
},
methods: {
handleMenuChange(menu) {
this.currentMenu = menu;
this.$emit('change', menu);
}
},
watch: {
currentMenu(val) {
this.$emit('change', val);
}
},
mounted() {
if (this.menus.length > 0) {
this.currentMenu = this.menus[0];
}
}
};
</script>
<style scoped>
.button-nav {
width: 100%;
padding: 12px 0;
display: flex;
gap: 12px;
}
.button-nav * {
user-select: none;
}
.button-nav button {
cursor: pointer;
appearance: none;
outline: none;
border: none;
background: #fff;
border-radius: 8px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 20px;
color: #888;
letter-spacing: 2px;
flex: 1;
box-sizing: padding-box;
position: relative;
}
.button-nav button::after {
content: attr(data-text);
position: absolute;
top: 10px;
left: 50%;
font-size: 18px;
font-weight: 500;
transform: translate(-50%);
}
.button-nav button.active {
color: #111;
border-bottom: 4px solid #0b58ff;
}
.custom-tabs /deep/ .el-tabs__header {
margin-bottom: 8px;
display: inline-block;
}
.custom-tabs /deep/ .el-tabs__item {
padding-left: 0px !important;
padding-right: 0px !important;
line-height: 36px !important;
height: 36px;
}
.custom-tabs /deep/ .el-tabs__content {
height: calc(100% - 42px);
}
.custom-tabs /deep/ .el-tab-pane {
box-sizing: border-box;
height: 100%;
padding: 20px;
border: 10px solid #f002;
}
</style>

View File

@@ -95,7 +95,7 @@ const tableProps = [
prop: 'inputN',
label: '投入',
align: 'center',
children: [
children: [
{
prop: 'inputNum',
label: '投入数量/片',

View File

@@ -0,0 +1,280 @@
<template>
<div :class="className" :style="{ height: height, width: width, marginLeft: '10px' }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // 引入主题
import resize from '@/utils/chartMixins/resize';
const animationDuration = 1000;
export default {
mixins: [resize], // 混入 resize 逻辑(自适应窗口)
props: {
className: {
type: String,
default: 'chart',
},
title: {
type: String,
default: '',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '300px',
},
barData: {
type: Array,
default: () => [],
},
},
data() {
return {
chart: null, // 图表实例
};
},
watch: {
// 监听 barData 变化(深度监听数组内部元素)
barData: {
deep: true,
handler: 'handleBarDataChange', // 调用处理方法
},
},
mounted() {
// 组件挂载后初始化图表(确保 DOM 已就绪)
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
// 组件销毁前清理图表实例
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
methods: {
// barData 变化时的处理方法
handleBarDataChange() {
// 确保 DOM 存在再更新图表
this.$nextTick(() => {
// 如果图表未初始化,先初始化;否则直接更新数据
if (!this.chart) {
this.initChart();
} else {
this.updateChart();
}
});
},
// 初始化图表
initChart() {
// 避免重复初始化(先销毁旧实例)
if (this.chart) {
this.chart.dispose();
}
// 确保 DOM 元素存在
if (!this.$el) {
console.error('图表容器 DOM 元素不存在');
return;
}
// 初始化图表实例
this.chart = echarts.init(this.$el, 'macarons');
// 设置图表配置
this.setChartOption();
},
// 更新图表数据(复用配置逻辑)
updateChart() {
if (!this.chart) return;
this.setChartOption();
},
// 图表配置项(抽离为单独方法,方便初始化和更新复用)
setChartOption() {
const dataValues = this.barData.flatMap(item => [item.inputNum || 0, item.outputNum || 0]);
const maxData = Math.max(...dataValues, 0); // 加 0 确保无数据时 maxData 为 0
// 2. 计算 Y 轴最大值(留 10% 余量,避免数据顶到顶部)
let yMax = 0;
if (maxData > 0) {
yMax = Math.ceil(maxData * 1.1); // 向上取整,确保刻度为整数
} else {
yMax = 100; // 无数据时默认最大值为 100避免 Y 轴消失
}
// 3. 计算 interval5 个刻度对应 4 个间隔,向上取整确保间隔为整数)
const yInterval = Math.ceil((yMax - 0) / 4); // min 固定为 0直接减 0
this.chart.setOption({
title: {
text: this.title
? '{space|}{tip|}{space|}{value|' + this.title + '}'
: '',
textStyle: {
rich: {
tip: {
width: 6,
height: 6,
borderRadius: 50,
backgroundColor: '#288AFF',
},
space: {
width: 8,
},
value: {
fontSize: 14,
color: 'black',
},
},
},
},
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
legend: {
data: ['投入', '产出', '加工成品率'],
},
grid: {
left: 20,
right: 30,
top:40,
bottom: 10,
containLabel: true,
splitArea: {
show: false // 关键:关闭网格背景分区(去掉间隔色块)
}
},
xAxis: {
type: 'category',
data: this.barData.map((item) => item.lineName),
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.45)',
width: 1 // 轴线宽度(可选,默认 1可按需调整
}
},
// 2. 控制 X 轴刻度线颜色(与轴线颜色保持一致,视觉统一)
axisTick: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.45)', // 刻度线颜色,需与轴线颜色匹配
width: 1 // 刻度线宽度(可选)
},
alignWithLabel: true // 可选:让刻度线与文字对齐(避免文字偏移时刻度线错位)
},
// 3. 控制 X 轴文字颜色(如:深灰色 rgba(0, 0, 0, 0.45)
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)6', // 文字颜色,可自定义
fontSize: 12, // 可选:调整文字大小(默认 12按需修改
// 可选:文字过长时换行/省略(避免文字重叠,按需开启)
formatter: (value) => {
// 示例:文字超过 6 个字符时换行(可根据需求调整字符数)
if (value.length > 6) {
return value.slice(0, 6) + '\n' + value.slice(6);
}
return value;
}
},
// 原有配置(若需保留可解开注释)
// axisPointer: {
// type: 'shadow',
// }
},
yAxis: [
{
type: 'value',
name: '投入/产出 片',
min: 0, // 最小值固定为 0
max: yMax,
interval: yInterval,
splitArea: {
show: false
},
axisLabel: {
formatter: '{value}',
color: 'rgba(0, 0, 0, 0.45)'
},
// 可选:修改 Y 轴名称颜色(与文字颜色保持一致)
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)'
}
},
{
type: 'value',
name: '加工成品率',
min: 0,
max: 100, // 成品率固定 0-100%
interval: 25, // 100 / 4 = 25刚好 5 个刻度0、25、50、75、100
axisLabel: {
formatter: '{value} %',
color: 'rgba(0, 0, 0, 0.45)'
},
splitArea: {
show: false
},
// 可选:修改 Y 轴名称颜色
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)'
}
},
],
series: [
{
name: '投入',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => item.inputNum),
tooltip: {
valueFormatter: (value) => `${value}`,
},
animationDuration,
},
{
name: '产出',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => item.outputNum),
tooltip: {
valueFormatter: (value) => `${value}`,
},
animationDuration,
},
{
name: '加工成品率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: (value) => `${value} %`,
},
label: {
show: true,
position: 'top',
distance: 6,
fontSize: 11,
color: '#333333',
formatter: (params) => `${params.value}` // 显示单位
},
data: this.barData.map((item) => item.processingRatio),
},
],
});
},
},
};
</script>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,362 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2024-12-02 13:44:47
* @LastEditors: zwq
* @Description:
-->
<template>
<div class="app-container">
<!-- :isFold="true" 控制展开 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="showData"
>
<!-- <method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" /> -->
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<!-- <el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
<el-button type="success" @click="exportPdf">pdf</el-button>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog> -->
</div>
</template>
<script>
import { parseTime } from '../../mixins/code-filter';
import { getDownLogHisData, getPdList, getThick } from '@/api/core/monitoring/index'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
const tableProps = [
{
prop: 'productionLineName',
label: '产线'
},
{
prop: 'eqName',
label: '下片机械手编号'
},
{
prop: 'pos',
label: '工位编号'
},
{
prop: 'pallet',
label: '托数/托'
},
{
prop: 'palletNum',
label: '一托玻璃数量/片'
},
{
prop: 'startTime',
label: '开始时间',
filter: parseTime,
width: 160
},
{
prop: 'endTime',
label: '结束时间',
filter: parseTime,
width: 160
},
{
prop: 'length',
label: '玻璃长度/mm'
},
{
prop: 'width',
label: '玻璃宽度/mm',
},
{
prop: 'thick',
label: '玻璃长度/mm'
},
];
export default {
data() {
return {
urlOptions: {
getDataListURL: getDownLogHisData
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
eqName: undefined,
productionLineId: undefined,
thick:undefined
},
exportLoading: false,
dataListLoading: false,
selectedList: [],
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [
{
type: 'his',
btnName: '历史',
},
].filter((v) => v),
tableData: [],
showData: [],
fileName: '',
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'productionLineId'
},
{
type: 'select',
label: '玻璃型号',
selectOptions: [],
param: 'thick'
},
{
type: 'datePicker',
label: '统计开始时间',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: "yyyy-MM-dd HH:mm:ss",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: []
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
}
],
};
},
mounted() {
this.$refs.searchBarForm.formInline.productionLineId = this.$route.query.productionLineId
this.$refs.searchBarForm.formInline.thick = this.$route.query.thick
this.listQuery.productionLineId = this.$route.query.productionLineId
this.listQuery.thick = this.$route.query.thick
this.getDataList()
this.getPdLineList()
console.log('this.$route.query', this.$route.query);
},
methods: {
handleClick(val) {
this.addOrUpdateVisible = true;
this.addOrEditTitle =
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
this.$nextTick(() => {
this.$refs.eqDetail.init(
val.data.lineId,
this.listQuery.startTime,
this.listQuery.endTime
);
});
},
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
setTimeout(() => {
html2canvas(target).then(function(canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度
var pageHeight = contentHeight / 592.28 * 841.89
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// 页面偏移
var position = 0
// a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的高度
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log('nihc URL', leftHeight, pageHeight)
var pdf = new jsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
// 避免空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(that.fileName + '工段统计.pdf')
})
}, 300)
},
exportECL() {
let tables = document.querySelector('.el-table').cloneNode(true)
const fix = tables.querySelector('.el-table__fixed')
const fixRight = tables.querySelector('.el-table__fixed-right')
if (fix) {
tables.removeChild(tables.querySelector('.el-table__fixed'))
}
if (fixRight) {
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
}
let exportTable = XLSX.utils.table_to_book(tables)
var exportTableOut = XLSX.write(exportTable, {
bookType: 'xlsx', bookSST: true, type: 'array'
})
// sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), this.fileName + '工段统计.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
return exportTableOut
},
exportPdf() {
this.test()
setTimeout(() =>{
this.dialogVisible = false
this.showData = this.tableData
}, 600)
},
exportXlsx() {
this.exportECL()
this.dialogVisible = false
this.showData = this.tableData
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[0].selectOptions = res.data || []
})
getThick().then((res) => {
this.formConfig[1].selectOptions = res.data.map((item) => {
return {
id: item.thick + 'mm',
name: item.thick + 'mm'
}
})
})
},
selectChange(val) {
console.log(val)
this.selectedList = val
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.productionLineId = val.productionLineId ? val.productionLineId : undefined;
this.listQuery.thick = val.thick ? val.thick : undefined;
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
// 获取数据列表
getDataList() {
this.listQuery.eqName = this.$route.query.eqName
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.list
this.showData = this.tableData
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
handleExport() {
if (this.selectedList.length > 0) {
this.showData = this.selectedList
}
this.dialogVisible = true
}
},
};
</script>

View File

@@ -0,0 +1,373 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2024-12-02 13:44:47
* @LastEditors: zwq
* @Description:
-->
<template>
<div class="app-container">
<!-- :isFold="true" 控制展开 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="showData"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<!-- <el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
<el-button type="success" @click="exportPdf">pdf</el-button>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog> -->
</div>
</template>
<script>
import { parseTime } from '../../mixins/code-filter';
import { getDownLogPage, getPdList, getThick, exportDownLogData } from '@/api/core/monitoring/index'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
const tableProps = [
{
prop: 'productionLineName',
label: '产线'
},
{
prop: 'eqName',
label: '下片机械手编号'
},
{
prop: 'pos',
label: '工位编号'
},
{
prop: 'pallet',
label: '托数/托'
},
{
prop: 'palletNum',
label: '一托玻璃数量/片'
},
{
prop: 'startTime',
label: '开始时间',
filter: parseTime,
width: 160
},
{
prop: 'endTime',
label: '结束时间',
filter: parseTime,
width: 160
},
{
prop: 'length',
label: '玻璃长度/mm'
},
{
prop: 'width',
label: '玻璃宽度/mm',
},
{
prop: 'thick',
label: '玻璃厚度/mm'
},
];
export default {
data() {
return {
urlOptions: {
getDataListURL: getDownLogPage
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
productionLineId: undefined,
thick: undefined,
},
exportLoading: false,
dataListLoading: false,
selectedList: [],
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [
{
type: 'his',
btnName: '历史',
},
].filter((v) => v),
tableData: [],
showData: [],
fileName: '',
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'productionLineId'
},
{
type: 'select',
label: '玻璃型号',
selectOptions: [],
param: 'thick'
},
{
type: 'datePicker',
label: '统计开始时间',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: "yyyy-MM-dd HH:mm:ss",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: []
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
}
],
};
},
created() {
this.getDataList()
this.getPdLineList()
},
methods: {
handleClick(val) {
console.log(val);
if (val.type === 'his') {
this.$router.push({
path: 'nextClipHis',
query: {
eqName: val.data.eqName,
productionLineId: this.listQuery.productionLineId,
thick: this.listQuery.thick,
},
});
}
// this.addOrUpdateVisible = true;
// this.addOrEditTitle =
// val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
// this.$nextTick(() => {
// this.$refs.eqDetail.init(
// val.data.lineId,
// this.listQuery.startTime,
// this.listQuery.endTime
// );
// });
},
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
setTimeout(() => {
html2canvas(target).then(function(canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度
var pageHeight = contentHeight / 592.28 * 841.89
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// 页面偏移
var position = 0
// a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的高度
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log('nihc URL', leftHeight, pageHeight)
var pdf = new jsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
// 避免空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(that.fileName + '工段统计.pdf')
})
}, 300)
},
exportECL() {
let tables = document.querySelector('.el-table').cloneNode(true)
const fix = tables.querySelector('.el-table__fixed')
const fixRight = tables.querySelector('.el-table__fixed-right')
if (fix) {
tables.removeChild(tables.querySelector('.el-table__fixed'))
}
if (fixRight) {
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
}
let exportTable = XLSX.utils.table_to_book(tables)
var exportTableOut = XLSX.write(exportTable, {
bookType: 'xlsx', bookSST: true, type: 'array'
})
// sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), this.fileName + '工段统计.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
return exportTableOut
},
exportPdf() {
this.test()
setTimeout(() =>{
this.dialogVisible = false
this.showData = this.tableData
}, 600)
},
exportXlsx() {
this.exportECL()
this.dialogVisible = false
this.showData = this.tableData
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[0].selectOptions = res.data || []
})
getThick().then((res) => {
this.formConfig[1].selectOptions = res.data.map((item) => {
return {
id: item.thick + 'mm',
name: item.thick + 'mm'
}
})
})
},
selectChange(val) {
console.log(val)
this.selectedList = val
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.productionLineId = val.productionLineId ? val.productionLineId : undefined;
this.listQuery.thick = val.thick ? val.thick : undefined;
this.listQuery.startTime = val.timeVal ? val.timeVal[0]: undefined;
this.listQuery.endTime = val.timeVal ? val.timeVal[1]: undefined;
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.list
this.showData = this.tableData
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
handleExport() {
// 处理查询参数
let params = { ...this.listQuery };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出下片日志?').then(() => {
this.exportLoading = true;
return exportDownLogData(params);
}).then(response => {
this.$download.excel(response, '下片日志.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>

View File

@@ -0,0 +1,280 @@
<template>
<div :class="className" :style="{ height: height, width: width, marginLeft: '10px' }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // 引入主题
import resize from '@/utils/chartMixins/resize';
const animationDuration = 1000;
export default {
mixins: [resize], // 混入 resize 逻辑(自适应窗口)
props: {
className: {
type: String,
default: 'chart',
},
title: {
type: String,
default: '',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '300px',
},
barData: {
type: Array,
default: () => [],
},
},
data() {
return {
chart: null, // 图表实例
};
},
watch: {
// 监听 barData 变化(深度监听数组内部元素)
barData: {
deep: true,
handler: 'handleBarDataChange', // 调用处理方法
},
},
mounted() {
// 组件挂载后初始化图表(确保 DOM 已就绪)
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
// 组件销毁前清理图表实例
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
methods: {
// barData 变化时的处理方法
handleBarDataChange() {
// 确保 DOM 存在再更新图表
this.$nextTick(() => {
// 如果图表未初始化,先初始化;否则直接更新数据
if (!this.chart) {
this.initChart();
} else {
this.updateChart();
}
});
},
// 初始化图表
initChart() {
// 避免重复初始化(先销毁旧实例)
if (this.chart) {
this.chart.dispose();
}
// 确保 DOM 元素存在
if (!this.$el) {
console.error('图表容器 DOM 元素不存在');
return;
}
// 初始化图表实例
this.chart = echarts.init(this.$el, 'macarons');
// 设置图表配置
this.setChartOption();
},
// 更新图表数据(复用配置逻辑)
updateChart() {
if (!this.chart) return;
this.setChartOption();
},
// 图表配置项(抽离为单独方法,方便初始化和更新复用)
setChartOption() {
const dataValues = this.barData.flatMap(item => [item.inputNum || 0, item.outputNum || 0]);
const maxData = Math.max(...dataValues, 0); // 加 0 确保无数据时 maxData 为 0
// 2. 计算 Y 轴最大值(留 10% 余量,避免数据顶到顶部)
let yMax = 0;
if (maxData > 0) {
yMax = Math.ceil(maxData * 1.1); // 向上取整,确保刻度为整数
} else {
yMax = 100; // 无数据时默认最大值为 100避免 Y 轴消失
}
// 3. 计算 interval5 个刻度对应 4 个间隔,向上取整确保间隔为整数)
const yInterval = Math.ceil((yMax - 0) / 4); // min 固定为 0直接减 0
this.chart.setOption({
title: {
text: this.title
? '{space|}{tip|}{space|}{value|' + this.title + '}'
: '',
textStyle: {
rich: {
tip: {
width: 6,
height: 6,
borderRadius: 50,
backgroundColor: '#288AFF',
},
space: {
width: 8,
},
value: {
fontSize: 14,
color: 'black',
},
},
},
},
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
legend: {
data: ['投入', '产出', '加工成品率'],
},
grid: {
left: 20,
right: 30,
top:40,
bottom: 10,
containLabel: true,
splitArea: {
show: false // 关键:关闭网格背景分区(去掉间隔色块)
}
},
xAxis: {
type: 'category',
data: this.barData.map((item) => item.lineName),
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.45)',
width: 1 // 轴线宽度(可选,默认 1可按需调整
}
},
// 2. 控制 X 轴刻度线颜色(与轴线颜色保持一致,视觉统一)
axisTick: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.45)', // 刻度线颜色,需与轴线颜色匹配
width: 1 // 刻度线宽度(可选)
},
alignWithLabel: true // 可选:让刻度线与文字对齐(避免文字偏移时刻度线错位)
},
// 3. 控制 X 轴文字颜色(如:深灰色 rgba(0, 0, 0, 0.45)
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)6', // 文字颜色,可自定义
fontSize: 12, // 可选:调整文字大小(默认 12按需修改
// 可选:文字过长时换行/省略(避免文字重叠,按需开启)
formatter: (value) => {
// 示例:文字超过 6 个字符时换行(可根据需求调整字符数)
if (value.length > 6) {
return value.slice(0, 6) + '\n' + value.slice(6);
}
return value;
}
},
// 原有配置(若需保留可解开注释)
// axisPointer: {
// type: 'shadow',
// }
},
yAxis: [
{
type: 'value',
name: '投入/产出 片',
min: 0, // 最小值固定为 0
max: yMax,
interval: yInterval,
splitArea: {
show: false
},
axisLabel: {
formatter: '{value}',
color: 'rgba(0, 0, 0, 0.45)'
},
// 可选:修改 Y 轴名称颜色(与文字颜色保持一致)
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)'
}
},
{
type: 'value',
name: '加工成品率',
min: 0,
max: 100, // 成品率固定 0-100%
interval: 25, // 100 / 4 = 25刚好 5 个刻度0、25、50、75、100
axisLabel: {
formatter: '{value} %',
color: 'rgba(0, 0, 0, 0.45)'
},
splitArea: {
show: false
},
// 可选:修改 Y 轴名称颜色
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)'
}
},
],
series: [
{
name: '投入',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => item.inputNum),
tooltip: {
valueFormatter: (value) => `${value}`,
},
animationDuration,
},
{
name: '产出',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => item.outputNum),
tooltip: {
valueFormatter: (value) => `${value}`,
},
animationDuration,
},
{
name: '加工成品率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: (value) => `${value} %`,
},
label: {
show: true,
position: 'top',
distance: 6,
fontSize: 11,
color: '#333333',
formatter: (params) => `${params.value}` // 显示单位
},
data: this.barData.map((item) => item.processingRatio),
},
],
});
},
},
};
</script>

View File

@@ -0,0 +1,273 @@
<template>
<div class="baseTable">
<el-table
:ref="id"
:data="renderData"
v-bind="$attrs"
:border="cancelBorder ? false : true"
@current-change="currentChange"
@selection-change="handleSelectionChange"
style="width: 100%"
:header-cell-style="{
background: '#F2F4F9',
color: '#606266',
}">
<!-- 多选 -->
<el-table-column
v-if="selectWidth"
type="selection"
:width="selectWidth" />
<!-- 序号 -->
<el-table-column
v-if="page && limit"
prop="_pageIndex"
:width="pageWidth"
align="center"
:fixed="cancelPageFixed ? false : true">
<template slot="header">
<el-popover placement="bottom-start" width="300" trigger="click">
<div
class="setting-box"
style="max-height: 400px; overflow-y: auto">
<el-checkbox
v-for="(item, index) in tableProps"
:key="'cb' + index"
v-model="selectedBox[index]"
:label="item.label" />
</div>
<i slot="reference" class="el-icon-s-tools" />
</el-popover>
</template>
</el-table-column>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
v-bind="item"
:label="item.label"
:prop="item.prop"
:fixed="item.fixed || false"
:show-overflow-tooltip="item.showOverflowtooltip || false"
:sortable="item.sortable || false">
<template slot="header">
<span>{{ item.label }}</span>
</template>
<!-- 多表头 -->
<template v-if="item.children">
<el-table-column
v-for="sub in item.children"
:prop="sub.prop"
:key="sub.prop"
v-bind="sub"
:label="sub.label">
<template v-if="sub.children">
<el-table-column
v-for="ssub in sub.children"
:prop="ssub.prop"
:key="ssub.prop"
v-bind="ssub"
:label="ssub.label">
<template slot-scope="sscopeInner">
<component
:is="ssub.subcomponent"
v-if="ssub.subcomponent"
:key="sscopeInner.row.id"
:inject-data="{ ...sscopeInner.row, ...ssub }"
@emitData="emitData" />
<span v-else>
{{ sscopeInner.row[ssub.prop] | commonFilter(ssub.filter) }}
</span>
</template>
</el-table-column>
</template>
<template slot-scope="scopeInner">
<component
:is="sub.subcomponent"
v-if="sub.subcomponent"
:key="scopeInner.row.id"
:inject-data="{ ...scopeInner.row, ...sub }"
@emitData="emitData" />
<span v-else>
{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
</span>
</template>
</el-table-column>
</template>
<template slot-scope="scope">
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:key="scope.row.id"
:itemProp="item.prop"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData" />
<span v-else>
{{ scope.row[item.prop] | commonFilter(item.filter) }}
</span>
</template>
</el-table-column>
<slot name="handleBtn" />
</el-table>
<!-- 表格底部加号 -->
<el-button
v-if="addButtonShow"
class="addButton"
icon="el-icon-plus"
@click="emitButtonClick">
{{ addButtonShow }}
</el-button>
</div>
</template>
<script>
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
cancelBorder: {
type: Boolean,
default: false,
},
cancelPageFixed: {
type: Boolean,
default: false,
},
tableData: {
type: Array,
required: true,
default: () => {
return [];
},
},
tableProps: {
type: Array,
default: () => {
return [];
},
},
id: {
type: String,
required: false,
default: '',
},
page: {
type: Number,
required: false,
default: 0,
},
pageWidth: {
type: Number,
required: false,
default: 70,
},
limit: {
type: Number,
required: false,
default: 0,
},
selectWidth: {
type: Number,
required: false,
default: 0,
},
addButtonShow: {
type: String,
required: false,
default: '',
},
},
data() {
return {
selectedBox: new Array(100).fill(true),
};
},
computed: {
renderTableHeadList() {
return this.tableProps.filter((item, index) => {
return this.selectedBox[index];
});
},
renderData() {
return this.tableData.map((item, index) => {
return {
...item,
_pageIndex: (this.page - 1) * this.limit + index + 1,
};
});
},
},
beforeMount() {
this.selectedBox = new Array(100).fill(true);
},
methods: {
currentChange(newVal, oldVal) {
this.$emit('current-change', { newVal, oldVal });
},
handleSelectionChange(val) {
this.$emit('selection-change', val);
},
emitData(val) {
this.$emit('emitFun', val);
},
emitButtonClick() {
this.$emit('emitButtonClick');
},
setCurrent(name, index) {
let _this = this;
let obj = _this.$refs[name].data[index];
_this.$refs[name].setCurrentRow(obj);
},
doLayout(name) {
this.$refs[name].doLayout();
},
},
};
</script>
<style scoped>
.baseTable .show-col-btn {
margin-right: 5px;
line-height: inherit;
cursor: pointer;
}
.baseTable .el-icon-refresh {
cursor: pointer;
}
</style>
<style>
.baseTable .el-table__body tr.current-row > td.el-table__cell {
background-color: #eaf1fc;
}
.baseTable .el-table .el-table__cell {
padding: 0;
height: 35px;
}
.baseTable .addButton {
width: 100%;
height: 35px;
border-top: none;
color: #0b58ff;
border-color: #ebeef5;
border-radius: 0;
}
.baseTable .addButton:hover {
color: #0b58ff;
border-color: #ebeef5;
background-color: #fff;
}
.baseTable .addButton:focus {
border-color: #ebeef5;
background-color: #fff;
}
.el-tooltip__popper.is-dark {
background: rgba(0, 0, 0, 0.6) !important;
}
.el-tooltip__popper .popper__arrow,
.el-tooltip__popper .popper__arrow::after {
border-top-color: rgba(0, 0, 0, 0.4) !important;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,65 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 15:27:31
* @LastEditors: zwq
* @LastEditTime: 2023-08-01 16:25:54
* @Description:
-->
<template>
<div :class="[className, { 'p-0': noPadding }]">
<slot />
</div>
</template>
<script>
export default {
props: {
size: {
// 取值范围: xl lg md sm
type: String,
default: 'de',
validator: function (val) {
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
},
},
noPadding: {
type: Boolean,
default: false,
},
},
computed: {
className: function () {
return `${this.size}-title`;
},
},
};
</script>
<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
.#{$size}-title {
font-size: 18px;
line-height: $height;
color: #000;
font-weight: 500;
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
&::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: $height + 2px;
border-radius: 1px;
margin-right: $mgr;
background-color: #0b58ff;
}
}
}
.p-0 {
padding: 0;
}
</style>

View File

@@ -0,0 +1,221 @@
<template>
<el-dialog :visible.sync="visible" width="40%">
<small-title slot="title" :no-padding="true">
{{ !dataForm.id ? '新增' : '编辑' }}
</small-title>
<div class="content">
<div class="visual-part">
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px"
@keyup.enter.native="dataFormSubmit">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="维度" prop="statisticType">
<el-select v-model="dataForm.statisticType" style="width: 100%" placeholder="请选择维度">
<el-option v-for="item in statisticTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="厚度" prop="modifyThick">
<el-input v-model="dataForm.modifyThick" placeholder="请输入厚度" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="在线速度" prop="modifySpeed">
<el-input v-model="dataForm.modifySpeed" placeholder="请输入在线速度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="宽度" prop="modifyWidth">
<el-input v-model="dataForm.modifyWidth" placeholder="请输入宽度" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="拉引量" prop="modifyInArea">
<el-input v-model="dataForm.modifyInArea" placeholder="请输入拉引量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下片面积" prop="modifyOutArea">
<el-input v-model="dataForm.modifyOutArea" placeholder="请输入下片面积" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="良品率" prop="modifyRatio">
<el-input v-model="dataForm.modifyRatio" placeholder="请输入良品率" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">
确定
</el-button>
</div>
</el-dialog>
</template>
<script>
import { editCostOriginRadioHisData } from '@/api/core/monitoring/index'
import { parseTime } from '../../mixins/code-filter';
import SmallTitle from './SmallTitle';
export default {
components: { SmallTitle },
data() {
return {
visible: false,
addOrUpdateVisible: false,
statisticTypeList: [
{
id: '0',
name: '班组'
},
{
id: '1',
name: '日'
},
{
id: '2',
name: '周'
},
{
id: '3',
name: '月'
},
{
id: '4',
name: '年'
}
],
dataForm: {
id: null,
statisticType:undefined,
modifyThick: undefined,
modifySpeed: undefined,
modifyWidth: undefined,
modifyInArea: undefined,
modifyOutArea: undefined,
modifyRatio: undefined,
},
dataRule: {
statisticType: [
{
required: true,
message: '维度不能为空',
trigger: 'blur',
},
// {
// type: 'number',
// message: '产品编码为数字类型',
// trigger: 'blur',
// transfom: 'val => Number(val)',
// },
],
},
};
},
methods: {
init(data) {
console.log(data,'data');
this.dataForm.id = data.id || null;
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
this.dataForm = {
id: data.id || null,
statisticType: data.statisticType || undefined,
modifyThick: data.thick || undefined, // 厚度对应
modifySpeed: data.speed || undefined, // 在线速度对应
modifyWidth: data.width || undefined, // 掰边宽度对应
modifyInArea: data.inArea || undefined, // 拉引量对应
modifyOutArea: data.outArea || undefined, // 下片面积对应
modifyRatio: data.ratio || undefined, // 良品率对应
};
});
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 修改的提交
if (this.dataForm.id) {
editCostOriginRadioHisData(this.dataForm).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.$emit('refreshDataList');
});
return;
}
}
});
},
goback() {
this.$emit('refreshDataList');
this.visible = false;
this.initData();
},
},
};
</script>
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
}
.drawer >>> .el-form-item__label {
padding: 0;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
flex: 1;
height: 1px;
display: flex;
flex-direction: column;
}
.drawer >>> .content {
padding: 30px 24px;
flex: 1;
display: flex;
flex-direction: column;
/* height: 100%; */
}
.drawer >>> .visual-part {
flex: 1 auto;
max-height: 76vh;
overflow: hidden;
overflow-y: scroll;
padding-right: 10px; /* 调整滚动条样式 */
}
.drawer >>> .el-form,
.drawer >>> .attr-list {
padding: 0 16px;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style>

View File

@@ -0,0 +1,534 @@
<template>
<div class="app-container">
<!-- :isFold="true" 控制展开 -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick"
@select-changed="selectType" />
<base-table v-if="tableData.length" class="right-aside" v-loading="dataListLoading" :table-props="tableProps"
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<div v-else class="no-data-bg"></div>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
</div>
</template>
<script>
import Vue from 'vue';
import AddOrUpdate from './add-or-updata';
import { parseTime } from '../../mixins/code-filter';
import { getCostOriginRadioHisData, getPdList } from '@/api/core/monitoring/index';
import { exportCostOriginRadioHisData } from '../../../../api/core/monitoring';
// Vue2 中注册全局方法(如果需要)
Vue.prototype.$download = Vue.prototype.$download || {
excel: (response, fileName) => {
const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
const url = window.URL.createObjectURL(blob);
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = url;
aLink.setAttribute('download', fileName);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
window.URL.revokeObjectURL(url);
}
};
Vue.prototype.$modal = Vue.prototype.$modal || {
confirm: (message) => {
return new Promise((resolve, reject) => {
if (window.confirm(message)) {
resolve();
} else {
reject();
}
});
}
};
const tableProps = [
{
prop: 'reportType',
label: '报表类型'
},
{
prop: 'time',
label: '日期',
width: 160
},
{
prop: 'bindObjectName',
label: '产线'
},
{
prop: 'thick',
label: '厚度'
},
{
prop: 'speed',
label: '在线速度'
},
{
prop: 'width',
label: '掰边宽度'
},
{
prop: 'inArea',
label: '拉引量/㎡'
},
{
prop: 'outArea',
label: '下片面积/㎡'
},
{
prop: 'ratio',
label: '良品率/%'
},
];
/**
* 工具函数获取选择时间所在周的起始和结束时间Vue2 兼容)
* @param {String|Date} selectTime - 选择的时间支持格式yyyy-MM-dd、yyyy-MM-dd HH:mm:ss 或 Date 对象)
* @returns {Array} [startDate, endDate] - 所在周周一 00:00:00 至 周日 23:59:59Date 对象)
*/
function getSelectedWeekRange(selectTime) {
// 兼容 String 类型时间和 Date 对象,统一转为 Date 实例
const targetDate = new Date(selectTime);
// 处理无效日期(若传入非法时间,返回当前时间的本周范围)
// if (isNaN(targetDate.getTime())) {
// console.warn('传入的时间格式无效,将使用当前时间计算本周范围');
// return getCurrentWeekRange(); // 可根据需求改为抛出错误或返回空
// }
const day = targetDate.getDay() || 7; // 周日为 7避免周日 -0 天仍为周日)
const start = new Date(targetDate);
start.setDate(targetDate.getDate() - day + 1); // 计算所在周的周一
start.setHours(0, 0, 0, 0); // 重置时分秒为 00:00:00.000
const end = new Date(start);
end.setDate(start.getDate() + 6); // 周一 +6 天 = 周日
end.setHours(23, 59, 59, 999); // 重置时分秒为 23:59:59.999
return [start, end];
}
/**
* 工具函数获取选择时间所在年的起始和结束时间Vue2 兼容)
* @param {String|Date} selectTime - 选择的时间支持格式yyyy-MM-dd、yyyy-MM-dd HH:mm:ss 或 Date 对象)
* @returns {Array} [startDate, endDate] - 所在年 1月1日 00:00:00 至 12月31日 23:59:59Date 对象)
*/
function getSelectedYearRange(selectTime) {
// 兼容 String 类型时间和 Date 对象,统一转为 Date 实例
const targetDate = new Date(selectTime);
// 处理无效日期(若传入非法时间,返回当前时间的本年范围)
// if (isNaN(targetDate.getTime())) {
// console.warn('传入的时间格式无效,将使用当前时间计算本年范围');
// return getCurrentYearRange(); // 可根据需求改为抛出错误或返回空
// }
const year = targetDate.getFullYear(); // 获取选择时间的年份
const start = new Date(year, 0, 1); // 所在年 1月1日月份从 0 开始)
start.setHours(0, 0, 0, 0); // 重置时分秒为 00:00:00.000
const end = new Date(year, 11, 31); // 所在年 12月31日11 代表 12 月)
end.setHours(23, 59, 59, 999); // 重置时分秒为 23:59:59.999
return [start, end];
}
// 格式化时间为 yyyy-MM-dd HH:mm:ssVue2 兼容)
function formatDateTime(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
export default {
components: {
AddOrUpdate
},
data() {
return {
urlOptions: {
getDataListURL: getCostOriginRadioHisData
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
bindObjectId: undefined,
statisticType: undefined,
startTime: undefined,
endTime: undefined
},
pdLineList: [],
exportLoading: false,
dataListLoading: false,
selectedList: [],
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [
{
type: 'edit',
btnName: '编辑',
},
].filter(v => v),
fileName: '',
formConfig: [
{
type: 'select',
label: '报表类型',
onchange: true,
selectOptions: [
{ id: '0', name: '班组' },
{ id: '1', name: '日' },
{ id: '2', name: '周' },
{ id: '3', name: '月' },
{ id: '4', name: '年' }
],
param: 'statisticType',
index: 1,
extraOptions: [
{
parent: 'statisticType',
type: 'datePicker',
label: '统计时间',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: [],
width: 250,
key: 'datePicker-0', // 唯一 key触发重新渲染
appendToBody: true // 优化定位:挂载到 body 下
},
// 日 - 日期范围选择
{
parent: 'statisticType',
type: 'datePicker',
label: '统计时间',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeValDay',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: [],
width: 250,
key: 'datePicker-1', // 唯一 key触发重新渲染
appendToBody: true // 优化定位:挂载到 body 下
},
// 周 - 单个日期选择(自动获取本周范围)
{
parent: 'statisticType',
type: 'datePicker',
label: '统计时间',
dateType: 'week',
placeholder: '选择日期',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
param: 'timeValWeek',
width: 250,
key: 'datePicker-2', // 唯一 key触发重新渲染
appendToBody: true // 优化定位:挂载到 body 下
},
// 月 - 日期范围选择
{
parent: 'statisticType',
type: 'datePicker',
label: '统计时间',
dateType: 'monthrange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeValMonth',
defaultTime: ['00:00:00', '23:59:59'],
width: 250,
key: 'datePicker-3', // 唯一 key触发重新渲染
appendToBody: true // 优化定位:挂载到 body 下
},
// 年 - 单个日期选择(自动获取本年范围)
{
parent: 'statisticType',
type: 'datePicker',
label: '统计时间',
dateType: 'year',
placeholder: '选择年份',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
param: 'timeValYear',
width: 250,
key: 'datePicker-4', // 唯一 key触发重新渲染
appendToBody: true // 优化定位:挂载到 body 下
}
]
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'bindObjectId'
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
}
],
};
},
watch: {
// 监听报表类型变化,强制刷新日期选择器
'listQuery.statisticType'(newVal, oldVal) {
if (newVal !== oldVal && this.$refs.searchBarForm) {
// 触发 search-bar 组件重新渲染(如果 search-bar 支持)
if (this.$refs.searchBarForm.$forceUpdate) {
this.$refs.searchBarForm.$forceUpdate();
}
// 延迟重置定位,确保 DOM 已更新
setTimeout(() => {
const datePickerEl = this.$refs.searchBarForm.$el.querySelector('.el-date-picker');
if (datePickerEl) {
// 触发 Element UI 日期选择器重新计算定位(内部方法)
const datePickerInstance = datePickerEl.__vue__;
if (datePickerInstance && datePickerInstance.updatePopper) {
datePickerInstance.updatePopper();
}
}
}, 100);
}
}
},
mounted() {
// Vue2 中 $refs 需在 $nextTick 中访问(确保 DOM 渲染完成)
this.$nextTick(() => {
if (this.$refs.searchBarForm) {
this.$refs.searchBarForm.formInline.statisticType = '1';
}
});
this.listQuery.statisticType = '1';
this.getDataList();
this.getPdLineList();
},
methods: {
selectType(val) {
// 报表类型切换时的回调(如需扩展可在此添加逻辑)
console.log('报表类型切换:', val);
},
handleClick(val) {
console.log('操作按钮点击:', val);
if (val.type === 'edit') {
this.addOrUpdateVisible = true;
// Vue2 中 $nextTick 确保子组件已渲染
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data);
});
}
},
getPdLineList() {
getPdList().then(res => {
// Vue2 中数组赋值需确保响应式
this.$set(this.formConfig[1], 'selectOptions', res.data || []);
this.pdLineList = res.data || [];
}).catch(err => {
console.error('获取产线列表失败:', err);
});
},
selectChange(val) {
console.log('选择变更:', val);
this.selectedList = val;
},
buttonClick(val) {
console.log('头部按钮点击:', val);
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.bindObjectId = val.bindObjectId ? val.bindObjectId : undefined;
this.listQuery.statisticType = val.statisticType ? val.statisticType : undefined;
// 处理不同时间维度的时间范围
this.handleTimeRange(val);
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log('未知按钮:', val);
}
},
// 处理不同时间维度的时间范围
handleTimeRange(val) {
const statisticType = val.statisticType;
const timeVal = val.timeVal;
const timeValDay = val.timeValDay;
const timeValWeek = val.timeValWeek;
const timeValMonth = val.timeValMonth;
const timeValYear = val.timeValYear;
// 重置时间参数
this.listQuery.startTime = undefined;
this.listQuery.endTime = undefined;
switch (statisticType) {
case '0': // 班组 - 沿用原时间范围
if (timeVal && timeVal.length === 2) {
this.listQuery.startTime = timeVal[0];
this.listQuery.endTime = timeVal[1];
}
break;
case '1': // 日 - 沿用原时间范围
if (timeValDay && timeValDay.length === 2) {
this.listQuery.startTime = timeValDay[0];
this.listQuery.endTime = timeValDay[1];
}
break;
case '3': // 月 - 沿用原时间范围
if (timeValMonth && timeValMonth.length === 2) {
this.listQuery.startTime = timeValMonth[0];
this.listQuery.endTime = timeValMonth[1];
}
break;
case '2': // 周 - 自动计算本周范围
if (timeValWeek) {
const [start, end] = getSelectedWeekRange(timeValWeek);
this.listQuery.startTime = formatDateTime(start);
this.listQuery.endTime = formatDateTime(end);
}
break;
case '4': // 年 - 自动计算本年范围
if (timeValYear) {
const [start, end] = getSelectedYearRange(timeValYear);
this.listQuery.startTime = formatDateTime(start);
this.listQuery.endTime = formatDateTime(end);
}
break;
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery)
.then(response => {
const arr = ['班组', '日', '周', '月', '年'];
// Vue2 中数组赋值确保响应式
this.tableData = (response.data?.list || []).map(item => {
item.reportType = arr[this.listQuery.statisticType] || '';
item.statisticType = this.listQuery.statisticType;
// 匹配产线名称
const targetLine = this.pdLineList.find(line => line.id === item.bindObjectId);
item.bindObjectName = targetLine ? targetLine.name : '';
return item;
});
this.listQuery.total = response.data?.total || 0;
})
.catch(err => {
console.error('获取数据失败:', err);
this.tableData = [];
this.listQuery.total = 0;
})
.finally(() => {
this.dataListLoading = false;
});
},
// 每页数变更
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页变更
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
// 导出处理
handleExport() {
const params = { ...this.listQuery };
// 移除分页参数
delete params.pageNo;
delete params.pageSize;
delete params.total;
this.$modal.confirm('是否确认导出原片报表?')
.then(() => {
this.exportLoading = true;
return exportCostOriginRadioHisData(params);
})
.then(response => {
this.$download.excel(response, '原片报表.xls');
})
.catch(err => {
console.error('导出失败:', err);
})
.finally(() => {
this.exportLoading = false;
});
}
},
// Vue2 中监听数据变化(如需)
watch: {
'listQuery.statisticType'(newVal) {
console.log('报表类型变更:', newVal);
// 可添加类型变更后的额外逻辑
}
}
};
</script>
<style scoped>
.app-container {
padding: 16px;
}
.no-data-bg {
height: 400px;
background-color: #f5f7fa;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.right-aside {
margin-bottom: 16px;
}
</style>

View File

@@ -0,0 +1,274 @@
<template>
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
<el-form :inline="true" ref="searchBarForm" :model="formInline" class="searchBar">
<span class="blue-block" v-if="removeBlue ? false : true"></span>
<template v-for="item in formConfig">
<el-form-item v-if="item.type !== ''" :key="item.param" :label="item.label ? item.label : ''"
:required="item.required ? item.required : false">
<el-input v-if="item.type === 'input'" v-model="formInline[item.param]"
:size="item.size ? item.size : 'small'" clearable :disabled="item.disabled ? item.disabled : false"
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'"
:placeholder="item.placeholder ? item.placeholder : ''" />
<el-select v-if="item.type === 'select'" v-model="formInline[item.param]"
:size="item.size ? item.size : 'small'" :filterable="item.filterable ? item.filterable : false"
:multiple="item.multiple ? item.multiple : false" :clearable="item.clearable === false ? false : true"
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" :placeholder="item.label" @change="
item.onchange
? $emit('select-changed', {
param: item.param,
value: formInline[item.param]
})
: null
">
<el-option v-for="(sub, i) in item.selectOptions" :key="i"
:label="item.labelField ? sub[item.labelField] : sub['name']"
:value="item.valueField ? sub[item.valueField] : sub['id']" />
</el-select>
<el-date-picker v-if="item.type === 'datePicker'" :key="item.param" :size="item.size ? item.size : 'small'"
v-model="formInline[item.param]" :type="item.dateType" :format="item.format ? item.format : 'yyyy-MM-dd'"
:value-format="item.valueFormat ? item.valueFormat : null" :default-time="item.defaultTime || null"
:range-separator="item.rangeSeparator || null" :start-placeholder="item.startPlaceholder || null"
:end-placeholder="item.endPlaceholder || null" :placeholder="item.placeholder"
:picker-options="item.pickerOptions ? item.pickerOptions : null"
:clearable="item.clearable === false ? false : true"
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:340px' : (item.dateType === 'daterange' ? 'width:220px' : 'width:140px'))" />
<el-autocomplete v-if="item.type === 'autocomplete'" v-model="formInline[item.param]"
:value-key="item.valueKey ? item.valueKey : 'value'" :size="item.size ? item.size : 'small'"
:fetch-suggestions="item.querySearch" :placeholder="item.placeholder"
:clearable="item.clearable === false ? false : true"
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" filterable />
<el-cascader v-if="item.type === 'cascader'" v-model="formInline[item.param]" :options="item.selectOptions"
:props="item.cascaderProps" :size="item.size ? item.size : 'small'"
:clearable="item.clearable === false ? false : true"
:show-all-levels="item.showAllLevels === false ? false : true"
:collapse-tags="item.collapseTags === true ? true : false"
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" @change="
item.onChange
? $emit('cascader-change', {
param: item.param,
value: formInline[item.param]
})
: null
"></el-cascader>
<el-button v-if="item.type === 'button'" :type="item.color" :size="item.size ? item.size : 'small'"
:plain="item.plain ? item.plain : false" :round="item.round ? item.round : false"
@click="headBtnClick(item.name)">{{ item.btnName }}</el-button>
<span v-if="item.type === 'separate'" class="separateStyle"></span>
<!-- 可用于显示其他按钮 -->
</el-form-item>
</template>
<el-form-item>
<slot></slot>
</el-form-item>
</el-form>
<span v-if="isFold" class="foldClass" @click='switchMode'>
{{ isExpand ? '收起' : '展开' }}
<i class="iconfont" :class="isExpand ? 'icon-upward' : 'icon-downward'"></i>
</span>
</div>
</template>
<script>
export default {
name: 'SearchBar',
props: {
formConfigs: {
type: Array,
default: () => {
return []
}
},
removeBlue: {
type: Boolean,
default: false
},
isFold: {// 多行模式(默认否)
type: Boolean,
default: false
}
},
data() {
const formInline = {}
const formConfig = this.formConfigs
let hasExtraOptions = false
for (const obj of formConfig) {
if (obj.type !== 'button') {
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
formInline[obj.param] = obj.defaultSelect
} else {
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
}
}
if (obj.extraOptions) {
hasExtraOptions = true
}
}
return {
formInline,
formConfig,
hasExtraOptions,
isExpand: false // 是否展开(默认否)
}
},
watch: {
formConfig: {
handler() {
for (const obj of this.formConfig) {
if (obj.defaultSelect) {
this.formInline[obj.param] = obj.defaultSelect
} else if (obj.defaultSelect === null) {
// 需要手动从外部清除选项缓存的情况确保在外部配置项中可直接设置null
this.formInline[obj.param] = ''
}
}
},
deep: true,
immediate: true
},
formInline: {
handler: function () {
this.$forceUpdate()
},
deep: true,
immediate: true
}
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
methods: {
init() {
if (this.hasExtraOptions) {
// 如果有额外参数就处理,如果没有就算了
for (const obj of this.formConfig) {
if (obj.extraOptions) {
// 注: 对obj.extraOptions的选择是互斥的!
this.$watch(
`formInline.${obj.param}`,
function (newVal) {
let deleteCount = 0
if (obj.index + 1 < this.formConfig.length) {
// 如果obj不是最后一个配置
const nextConfig = this.formConfig[obj.index + 1]
if (nextConfig.parent && nextConfig.parent === obj.param)
deleteCount = 1
}
const currentConfig = Object.assign(
{},
obj.extraOptions[newVal]
)
this.formConfig.splice(
obj.index + 1,
deleteCount,
currentConfig
)
// 修改 formInline
this.$set(this.formInline, currentConfig.param, '')
},
{ immediate: true }
)
}
}
}
},
headBtnClick(btnName) {
this.formInline.btnName = btnName
this.$emit('headBtnClick', this.formInline)
},
resetForm() {
this.$refs.searchBarForm.resetFields()
const formInline = {}
const formConfig = this.formConfigs
for (const obj of formConfig) {
if (obj.type !== 'button') {
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
formInline[obj.param] = obj.defaultSelect
} else {
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
}
}
}
this.formInline = formInline
},
switchMode() {// 展开和收起切换
this.isExpand = !this.isExpand
const element = this.$refs.searchBarRef
if (this.isExpand) {
element.classList.remove('divHeight')
} else {
element.classList.add('divHeight')
}
}
}
}
</script>
<style>
.searchBarBox {
width: 100%;
position: relative;
margin-bottom: 8px;
}
.searchBarBox::after {
content: "";
display: block;
clear: both;
}
.divHeight {
height: 45px;
overflow: hidden;
}
.searchBar .blue-block {
display: inline-block;
float: left;
width: 4px;
height: 16px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
margin-top: 12px;
}
.searchBar .el-form-item {
margin-bottom: 4px;
}
.searchBar .el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.searchBar .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
.searchBar .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0B58FF;
}
.searchBar .separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
.searchBarBox .foldClass {
position: absolute;
top: 14px;
right: 0;
cursor: pointer;
font-size: 12px;
color: #0B58FF;
}
.searchBarBox .foldClass .iconfont {
font-size: 14px;
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<div style="background: #f2f4f9; height: 40px; width: 100%">
<!-- <div style="background: #f2f4f9; height: 40px; width: 100%">
<ButtonNav :menus="['按日期', '按规格']" @change="currentMenu">
<template v-slot:tab1>
<div>按日期</div>
@@ -9,7 +9,7 @@
<div>按规格</div>
</template>
</ButtonNav>
</div>
</div> -->
<div class="app-container energyOverlimitLog">
<div v-show="activeName === 'his'">
<!-- 搜索工作栏 -->
@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -86,32 +86,36 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'originArea',
label: '原片下片面积',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'deepArea',
label: '深加工下片面积',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'originPrice',
label: '原片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'deepPrice',
label: '深加工成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'price',
label: '总成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
const tableProps2 = [
@@ -244,19 +248,12 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[0].startPlaceholder = '开始时间';
this.formConfig2[0].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
@@ -274,7 +271,7 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
@@ -334,12 +331,19 @@ export default {
this.otherMethods(val);
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
/** 导出按钮操作 */
handleExport() {
let exportURL, title;
if (this.activeName === 'his') {
exportURL = exportCostSumExcel;
title = '总成本统计-按日期';
title = '总成本统计';
} else {
exportURL = exportRawStatisticsRealtimeExcel;
title = '总成本统计-按规格';

View File

@@ -77,7 +77,7 @@ export default {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
@@ -90,7 +90,7 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name;
this.listQuery.recTime = val.searchTime;
this.handleExport();

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'energyTypeName',
label: '能源类型',
},
{
prop: 'bindObjectName',
label: '监控对象',
filter: (val) => (val != null ? val : '--'),
},
{
prop: 'meterName',
label: '抄表名',
filter: (val) => (val != null ? val : '--'),
},
// {
// prop: 'bindObjectName',
// label: '监控对象',
// filter: (val) => (val != null ? val : '--'),
// },
// {
// prop: 'meterName',
// label: '抄表名',
// filter: (val) => (val != null ? val : '--'),
// },
{
prop: 'quantity',
label: '累计使用量',
@@ -115,20 +118,24 @@ const tableProps = [
},
];
const tableProps2 = [
{
prop: 'remark',
label: '备注',
},
{
prop: 'energyTypeName',
label: '能源类型',
},
{
prop: 'bindObjectName',
label: '监控对象',
filter: (val) => (val != null ? val : '--'),
},
{
prop: 'meter',
label: '抄表名',
filter: (val) => (val != null ? val : '--'),
},
// {
// prop: 'bindObjectName',
// label: '监控对象',
// filter: (val) => (val != null ? val : '--'),
// },
// {
// prop: 'meter',
// label: '抄表名',
// filter: (val) => (val != null ? val : '--'),
// },
{
prop: 'quantity',
label: '累计使用量',
@@ -207,13 +214,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'button',
@@ -262,26 +272,18 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -292,13 +294,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -320,15 +327,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
if (this.listQuery.startTime) {

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'otherCostName',
@@ -99,9 +102,14 @@ const tableProps = [
prop: 'price',
label: '总价(元)',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
const tableProps2 = [
// {
// prop: 'remark',
// label: '备注',
// },
{
prop: 'otherCostName',
label: '成本名称',
@@ -110,6 +118,7 @@ const tableProps2 = [
prop: 'price',
label: '总价(元)',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
export default {
@@ -182,13 +191,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'button',
@@ -237,26 +249,20 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -267,13 +273,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -295,15 +306,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
getRawOthercostSunPage(this.listQuery).then((response) => {

View File

@@ -65,6 +65,7 @@ const tableProps = [
prop: 'price',
label: '成本金额',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'remark',
@@ -161,7 +162,7 @@ export default {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
@@ -174,7 +175,7 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime

View File

@@ -10,9 +10,9 @@
<span>
{{
injectData.type == 1
? `每天等价,${injectData.price}`
? `每天等价,${Number(injectData.price)}`
: injectData.type == 2
? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}`
? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}`
: '-'
}}
</span>

View File

@@ -52,7 +52,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -85,9 +85,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'productionLineName',
@@ -100,22 +103,27 @@ const tableProps = [
{
prop: 'innum',
label: '上片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outnum',
label: '下片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
];
const tableProps2 = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'productionLineName',
@@ -128,15 +136,17 @@ const tableProps2 = [
{
prop: 'innum',
label: '进片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outnum',
label: '出片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
];
export default {
@@ -170,13 +180,15 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
},
{
type: 'button',
@@ -225,22 +237,15 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.productionLineId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.getDataList();
@@ -253,12 +258,12 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.productionLineId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
this.handleExport();
break;
@@ -309,10 +314,20 @@ export default {
this.otherMethods(val);
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
successSubmit() {
this.handleCancel();
const val = this.activeName === 'his' ? '产线良品率' : 'now';
this.currentMenu(val);
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
/** 导出按钮操作 */
handleExport() {

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '时间',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
@@ -102,33 +105,42 @@ const tableProps = [
{
prop: 'inCount',
label: '上片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outCount',
label: '下片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
{
prop: 'costSum',
label: '深加工成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costPiece',
label: '单片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costArea',
label: '每平米成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
const tableProps2 = [
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
label: '产线',
@@ -140,30 +152,35 @@ const tableProps2 = [
{
prop: 'inCount',
label: '上片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outCount',
label: '下片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
{
prop: 'costSum',
label: '深加工成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costPiece',
label: '单片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costArea',
label: '每平米成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
export default {
@@ -225,13 +242,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'select',
@@ -288,26 +308,20 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[0].startPlaceholder = '开始时间';
this.formConfig2[0].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -318,13 +332,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -346,15 +365,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
if (this.listQuery.startTime) {

423
src/views/cost/index.vue Normal file
View File

@@ -0,0 +1,423 @@
<template>
<div class="home-page">
<div class="date-tabs">
<!-- @tab-click="handleClick" -->
<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
<el-tab-pane
:label="'\u2002\u2002日\u2002\u2002'"
name="日"></el-tab-pane>
<el-tab-pane
:label="'\u2002\u2002周\u2002\u2002'"
name="周"></el-tab-pane>
<el-tab-pane
:label="'\u2002\u2002月\u2002\u2002'"
name="月"></el-tab-pane>
<el-tab-pane
:label="'\u2002\u2002年\u2002\u2002'"
name="年"></el-tab-pane>
</el-tabs>
<div class="detail">
<el-date-picker
v-model="timeday"
align="right"
type="date"
format="yyyy-MM-dd"
valueFormat="yyyy-MM-dd"
:clearable="false"
@change="timedayChange"
placeholder="选择日期"
:picker-options="pickerOptions"></el-date-picker>
</div>
</div>
<el-row class="main-top" :gutter="16">
<el-col :span="24" style="position: relative">
<div class="title">
<svg-icon icon-class="home-produce" />
<span class="title-inner">生产总成本</span>
</div>
<el-row class="box">
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.priceS }}万元</div>
<div class="unit-style">总计成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.matPriceS }}万元</div>
<div class="unit-style">原料成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.energyPriceS }}万元</div>
<div class="unit-style">能源成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.otherPriceS }}万元</div>
<div class="unit-style">其他成本</div>
</el-col>
<!-- <el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.ratioS }}</div>
<div class="unit-style">综合良品率/%</div>
</el-col> -->
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.areaPriceS }}</div>
<div class="unit-style">综合每平米成本</div>
</el-col>
</el-row>
</el-col>
<el-col :span="24" style="position: relative">
<div class="title">
<svg-icon icon-class="home-produce" />
<span class="title-inner">原片成本</span>
</div>
<el-row class="box">
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.priceO }}万元</div>
<div class="unit-style">原片总成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.matPriceO }}万元</div>
<div class="unit-style">原料成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.energyPriceO }}万元</div>
<div class="unit-style">能源成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.otherPriceO }}万元</div>
<div class="unit-style">其他成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.ratioO }}</div>
<div class="unit-style">原片良品率/%</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.areaPriceO }}</div>
<div class="unit-style">原片每平米成本</div>
</el-col>
</el-row>
</el-col>
<el-col :span="24" style="position: relative">
<div class="title">
<svg-icon icon-class="home-produce" />
<span class="title-inner">深加工成本</span>
</div>
<el-row class="box">
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.priceD }}万元</div>
<div class="unit-style">深加工总成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.energyPriceD }}万元</div>
<div class="unit-style">能源成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.otherPriceD }}万元</div>
<div class="unit-style">其他成本</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.ratioD }}</div>
<div class="unit-style">深加工良品率/%</div>
</el-col>
<el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.areaPriceD }}</div>
<div class="unit-style">深加工每平米成本</div>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row class="main-bottom" :gutter="16" v-if="false">
<el-col :span="9">
<div class="chart-wrapper">
<line-chart :chart-data="lineChartData" />
</div>
</el-col>
<el-col :span="7">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :span="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
<div
class="main-footer"
style="
color: #c7c7c7;
user-select: none;
font-size: 14px;
letter-spacing: 1px;
height: 30px;
display: grid;
place-content: center;
">
&copy; 中建材智能自动化研究院有限公司
</div>
</div>
</template>
<script>
import moment from 'moment';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import LineChart from '../dashboard/LineChart';
import PieChart from '../dashboard/PieChart';
import BarChart from '../dashboard/BarChart';
import PanelGroup from '../dashboard/PanelGroup';
import { getData } from '@/api/cost/allCost';
import { getUserProfile } from '@/api/system/user';
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145],
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130],
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130],
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130],
},
};
export default {
name: 'Home',
mixins: [tableHeightMixin],
components: {
LineChart,
PieChart,
PanelGroup,
BarChart,
},
computed: {
gradientBackground() {
return {
'background-image':
'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
'background-size': '100px 100px', // 调整条纹的大小
};
},
},
data() {
return {
activeName: '日',
user: '',
lineChartData: lineChartData.newVisitis,
homeData: {},
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
startTime:
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
' 00:00:00',
endTime:
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
' 00:00:00',
pickerOptions: {
disabledDate(time) {
return time.getTime() + 3600 * 1000 * 24 > Date.now();
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
},
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
},
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
},
},
],
},
};
},
created() {
},
beforeDestroy() {
},
methods: {
getData() {
let listQuery = {
//分页
pageSize: 10,
pageNo: 1,
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
startTime: this.timeday + ' 00:00:00',
};
getData(listQuery).then((response) => {
this.homeData = response.data;
for (let i in this.homeData) {
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
}
});
},
timedayChange() {
let listQuery = {
//分页
pageSize: 10,
pageNo: 1,
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
startTime: this.timeday + ' 00:00:00',
};
getData(listQuery).then((response) => {
this.homeData = response.data;
for (let i in this.homeData) {
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
}
});
},
goDetail() {
this.$router.push({ path: 'indexDetail' });
},
},
};
</script>
<style lang="scss" scoped>
.home-page::before {
background-image: url('~@/assets/img/home-bg.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(180deg);
}
.date-tabs {
padding-left: 40px;
padding-top: 20px;
position: relative;
margin-bottom: 20px;
}
:deep(.date-tabs) {
.el-tabs__header {
margin-bottom: 8px;
display: inline-block;
transform: translateY(-12px);
}
.el-tabs__content {
overflow: visible;
}
.el-tabs__item {
font-size: 18px;
color: #fff;
padding-left: 0 !important;
padding-right: 0 !important;
line-height: 36px !important;
height: 36px;
}
.el-tabs__item.is-active {
color: #0b58ff;
}
}
.detail {
display: inline-block;
position: absolute;
left: 260px;
top: 10px;
}
:deep(.detail) {
.el-input__inner {
background-color: transparent;
color: white;
}
}
// .current-date {
// color: #fff;
// font-size: 18px;
// position: absolute;
// left: 260px;
// top: 14px;
// }
.current-time {
color: #fff;
font-size: 18px;
position: absolute;
right: 38px;
top: 14px;
}
.main-top {
width: 100%;
padding: 0 20px 0 40px;
.title {
position: absolute;
left: 34px;
top: 20px;
width: 180px;
font-size: 32px;
z-index: 10;
.title-inner {
position: absolute;
left: 42px;
top: 5px;
font-size: calc(100vw * 20 / 1920);
}
}
.box {
background-color: #fff;
border-radius: 24px;
height: 192px;
padding: 40px 24px 32px 24px;
margin-bottom: 20px;
box-shadow: 0 8px 8px 0 gray;
.num-box {
height: 120px;
padding-top: 26px;
text-align: center;
.num-style {
color: #000;
font-size: calc(100vw * 40 / 1920);
}
.unit-style {
color: rgba(0, 0, 0, 0.7);
font-size: calc(100vw * 18 / 1920);
}
}
.shadow {
background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
}
}
}
.main-bottom {
width: 100%;
margin-top: 20px;
.chart-wrapper {
margin-left: 10px;
height: 425px;
background: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px 0 gray;
}
}
</style>
<style lang="scss">
.home-page {
.el-progress-bar__inner {
background-image: url('~@/assets/img/home-progress-bg.png');
background-size: cover;
}
}
</style>

View File

@@ -0,0 +1,199 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
:table-props="tableProps1"
:page="1"
:limit="100"
:table-data="tableData1"></base-table>
<base-table
:table-props="tableProps2"
:page="1"
:limit="100"
:table-data="tableData2"></base-table>
</div>
</template>
<script>
import { getDetailData } from '@/api/cost/allCost';
import moment from 'moment';
const tableProps1 = [
{
prop: 'name',
label: '成本项目-原片',
},
{
prop: 'f1',
label: '本期领用',
children: [
{
prop: 'quantity',
label: '数量',
},
{
prop: 'price',
label: '单价',
},
{
prop: 'sumPrice',
label: '金额',
},
],
},
{
prop: 'sprice',
label: '单位成本',
},
];
const tableProps2 = [
{
prop: 'name',
label: '成本项目-加工',
},
{
prop: 'quantity',
label: '耗用数量',
},
{
prop: 'price',
label: '平均耗用单价',
},
{
prop: 'sumPrice',
label: '总成本',
},
{
prop: 'sprice',
label: '综合单位成本',
},
];
export default {
data() {
return {
tableProps1,
tableData1: [],
tableProps2,
tableData2: [],
listQuery: {
pageSize: 10,
pageNo: 1,
statisticType: 1,
},
activeName: '日',
startTime:
moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD') +
' 00:00:00',
endTime:
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
' 00:00:00',
formConfig: [
{
type: 'select',
label: '维度',
selectOptions: [
{ id: 1, name: '日' },
{ id: 2, name: '周' },
{ id: 3, name: '月' },
{ id: 4, name: '年' },
],
param: 'statisticType',
defaultSelect: 1, // 默认值,
clearable: false,
},
{
// 日期选择
type: 'datePicker',
// label: '日期',
dateType: 'date',
placeholder: '选择日期',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
param: 'timeday',
clearable: false,
pickerOptions: {
disabledDate(time) {
return (time.getTime()+ 3600 * 1000 * 24) > Date.now();
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
},
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
},
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
},
},
],
},
},
{
type: 'button',
btnName: '搜索',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '返回首页',
name: 'back',
color: 'warning',
},
],
};
},
created() {},
mounted() {
this.listQuery.startTime = this.startTime;
this.$refs.searchBarForm.formInline.timeday = this.startTime.substr(0, 10)
this.getDataList();
},
methods: {
// 获取数据列表
getDataList() {
getDetailData(this.listQuery).then((response) => {
this.tableData1 = response.data.odata;
this.tableData2 = response.data.ddata;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
console.log(val.timeday)
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.timeday
? val.timeday + ' 00:00:00'
: null;
this.getDataList();
break;
case 'back':
this.$router.go(-1)
break;
default:
console.log(val);
}
},
},
};
</script>

View File

@@ -77,7 +77,7 @@ export default {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
@@ -90,7 +90,7 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name;
this.listQuery.recTime = val.searchTime;
this.handleExport();

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'energyTypeName',
label: '能源类型',
},
{
prop: 'bindObjectName',
label: '监控对象',
filter: (val) => (val != null ? val : '--'),
},
{
prop: 'meterName',
label: '抄表名',
filter: (val) => (val != null ? val : '--'),
},
// {
// prop: 'bindObjectName',
// label: '监控对象',
// filter: (val) => (val != null ? val : '--'),
// },
// {
// prop: 'meterName',
// label: '抄表名',
// filter: (val) => (val != null ? val : '--'),
// },
{
prop: 'quantity',
label: '累计使用量',
@@ -115,20 +118,24 @@ const tableProps = [
},
];
const tableProps2 = [
{
prop: 'remark',
label: '备注',
},
{
prop: 'energyTypeName',
label: '能源类型',
},
{
prop: 'bindObjectName',
label: '监控对象',
filter: (val) => (val != null ? val : '--'),
},
{
prop: 'meter',
label: '抄表名',
filter: (val) => (val != null ? val : '--'),
},
// {
// prop: 'bindObjectName',
// label: '监控对象',
// filter: (val) => (val != null ? val : '--'),
// },
// {
// prop: 'meter',
// label: '抄表名',
// filter: (val) => (val != null ? val : '--'),
// },
{
prop: 'quantity',
label: '累计使用量',
@@ -207,13 +214,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'button',
@@ -237,10 +247,11 @@ export default {
activeName: 'his',
tableProps,
tableProps2,
tableBtn: [{
type: 'edit',
btnName: '编辑',
}
tableBtn: [
{
type: 'edit',
btnName: '编辑',
},
].filter((v) => v),
tableData: [],
tableData2: [],
@@ -262,26 +273,18 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -292,13 +295,16 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -320,15 +326,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList() {
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
if (this.listQuery.startTime) {

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2024-09-05 15:34:28
* @LastEditTime: 2024-12-27 09:18:43
* @Description:
-->
<template>
@@ -22,7 +22,7 @@
placeholder="请输入原料名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item label="单价" prop="matPrice">
<el-input
v-model="dataForm.matPrice"
@@ -31,7 +31,7 @@
placeholder="请输入单价" />
(/)
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="12">
<el-form-item label="累计用量" prop="quantity">
<el-input-number

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'materialName',
@@ -97,13 +100,13 @@ const tableProps = [
},
{
prop: 'quantity',
label: '累计使用量()',
},
{
prop: 'matPrice',
label: '单价(元/吨)',
align: 'right',
label: '累计使用量(千克)',
},
// {
// prop: 'matPrice',
// label: '单价(元/千克)',
// align: 'right',
// },
{
prop: 'price',
label: '总价(元)',
@@ -111,6 +114,10 @@ const tableProps = [
},
];
const tableProps2 = [
// {
// prop: 'remark',
// label: '备注',
// },
{
prop: 'materialName',
label: '原料名称',
@@ -123,13 +130,13 @@ const tableProps2 = [
},
{
prop: 'quantity',
label: '累计使用量()',
},
{
prop: 'materialPrice',
label: '单价(元/吨)',
align: 'right',
label: '累计使用量(千克)',
},
// {
// prop: 'materialPrice',
// label: '单价(元/千克)',
// align: 'right',
// },
{
prop: 'price',
label: '总价(元)',
@@ -204,13 +211,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'button',
@@ -234,10 +244,11 @@ export default {
activeName: 'his',
tableProps,
tableProps2,
tableBtn: [{
type: 'edit',
btnName: '编辑',
}
tableBtn: [
{
type: 'edit',
btnName: '编辑',
},
].filter((v) => v),
tableData: [],
tableData2: [],
@@ -259,26 +270,20 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.materialId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -289,13 +294,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.materialId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -317,15 +327,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList() {
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
if (this.listQuery.startTime) {

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2024-09-05 15:33:16
* @LastEditTime: 2025-06-13 10:59:54
* @Description:
-->
<template>
@@ -15,7 +15,9 @@
label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产线" prop="bindObjectName">
<el-form-item
:label="activeName === 'his' ? '产线' : '工段'"
prop="bindObjectName">
<el-input
style="width: 100%"
v-model="dataForm.bindObjectName"
@@ -33,7 +35,7 @@
placeholder="选择所属日期"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" v-if="activeName === 'his'">
<el-form-item label="厚度" prop="thick">
<el-input-number
:min="0"
@@ -43,7 +45,7 @@
placeholder="请输入厚度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" v-if="activeName === 'his'">
<el-form-item label="在线速度" prop="speed">
<el-input-number
:min="0"
@@ -53,7 +55,7 @@
placeholder="请输入在线速度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" v-if="activeName === 'his'">
<el-form-item label="掰边宽度" prop="width">
<el-input-number
:min="0"
@@ -64,25 +66,27 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="拉引量" prop="inArea">
<el-form-item
:label="activeName === 'his' ? '拉引量' : '进片数'"
prop="inArea">
<el-input-number
:min="0"
style="width: 85%"
v-model="dataForm.inArea"
clearable
placeholder="请输入拉引量" />
()
clearable />
{{ activeName === 'his' ? '(m²)' : '片' }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下片面积" prop="outArea">
<el-form-item
:label="activeName === 'his' ? '下片面积' : '出片数'"
prop="outArea">
<el-input-number
:min="0"
style="width: 85%"
v-model="dataForm.outArea"
clearable
placeholder="请输入下片面积" />
()
clearable />
{{ activeName === 'his' ? '(m²)' : '片' }}
</el-form-item>
</el-col>
<el-col :span="12">
@@ -129,10 +133,12 @@ export default {
recTime: undefined,
},
dataRule: {},
activeName: 'his',
};
},
methods: {
init(val, statisticType) {
init(val, statisticType, activeName) {
this.activeName = activeName;
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
@@ -148,17 +154,22 @@ export default {
if (!valid) {
return false;
}
const udata = {
let udata = {
id: this.dataForm.id,
statisticType: this.dataForm.statisticType,
modifyThick: this.dataForm.thick,
modifySpeed: this.dataForm.speed,
modifyWidth: this.dataForm.width,
modifyInArea: this.dataForm.inArea,
modifyOutArea: this.dataForm.outArea,
modifyRatio:
this.dataForm.ratio >= 0 ? this.dataForm.ratio / 100 : '',
};
if (this.activeName === 'his') {
udata = {
...udata,
modifyThick: this.dataForm.thick,
modifySpeed: this.dataForm.speed,
modifyWidth: this.dataForm.width,
};
}
// 修改的提交
this.urlOptions.updateURL(udata).then((response) => {
this.$modal.msgSuccess('修改成功');

View File

@@ -1,42 +1,71 @@
<template>
<div class="app-container energyOverlimitLog">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="50%">
<add-or-update
ref="addOrUpdate"
:name-arr="formConfig[1].selectOptions"
@refreshDataList="successSubmit"></add-or-update>
</base-dialog>
<div>
<div style="background: #f2f4f9; height: 40px; width: 100%">
<ButtonNav :menus="['产线良品率', '工段良品率']" @change="currentMenu">
<template v-slot:tab1>
<div>产线良品率</div>
</template>
<template v-slot:tab2>
<div>工段良品率</div>
</template>
</ButtonNav>
</div>
<div class="app-container energyOverlimitLog">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<!-- 列表 -->
<div v-if="activeName === 'his'">
<base-table
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
</div>
<div v-if="activeName === 'now'">
<base-table
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-props="tableProps2"
:table-data="tableData2"
:max-height="tableH">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
</div>
<pagination
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="50%">
<add-or-update
ref="addOrUpdate"
:name-arr="formConfig[1].selectOptions"
@refreshDataList="successSubmit"></add-or-update>
</base-dialog>
</div>
</div>
</template>
@@ -44,16 +73,27 @@
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { getLinePage } from '@/api/base/productionLine';
import { getcostOriginRatioHisPage,exportcostOriginRatioHisExcel } from '@/api/cost/costOriginRatioHis';
import {
getcostOriginRatioHisPage,
getcostOriginWSRatioHisPage,
exportcostOriginWSRatioHisExcel,
exportcostOriginRatioHisExcel,
} from '@/api/cost/costOriginRatioHis';
import { parseTime } from '@/filter/code-filter';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
width:130,
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
label: '产线',
@@ -62,27 +102,67 @@ const tableProps = [
{
prop: 'thick',
label: '厚度',
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
},
{
prop: 'speed',
label: '在线速度',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'width',
label: '掰边宽度',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'inArea',
label: '拉引量/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outArea',
label: '下片面积/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
];
const tableProps2 = [
{
prop: 'time',
label: '日期',
width:130,
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
label: '工段',
width:145,
},
{
prop: 'spec',
label: '规格',
},
{
prop: 'inArea',
label: '进片数',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outArea',
label: '出片数',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
];
export default {
@@ -116,13 +196,15 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
},
{
type: 'button',
@@ -143,23 +225,27 @@ export default {
listQuery: {
statisticType: 1,
},
activeName: 'his',
tableProps,
tableProps2,
tableBtn: [{
type: 'edit',
btnName: '编辑',
}
].filter((v) => v),
tableData: [],
tableData2: [],
};
},
components: {
AddOrUpdate,
ButtonNav,
},
created() {
const params ={
pageNo: 1,
pageSize: 100,
pdType: 1
pdType: 0
}
getLinePage(params).then((response) => {
this.formConfig[1].selectOptions = response.data.list;
@@ -167,36 +253,33 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
this.getDataList();
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
break;
case 'add':
this.addOrUpdateHandle();
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
this.handleExport();
break;
@@ -204,23 +287,74 @@ export default {
console.log(val);
}
},
currentMenu(val) {
this.activeName = val === '产线良品率' ? 'his' : 'now';
if (this.activeName === 'his') {
this.$refs.searchBarForm.resetForm();
this.listQuery.bindObjectId = null;
this.listQuery.startTime = null;
this.listQuery.endTime = null;
this.listQuery.statisticType = 1;
this.listQuery.pageNo = 1;
this.getDataList();
} else {
this.$refs.searchBarForm.resetForm();
this.listQuery.bindObjectId = null;
this.listQuery.startTime = null;
this.listQuery.endTime = null;
this.listQuery.statisticType = 1;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
getcostOriginWSRatioHisPage(this.listQuery).then((response) => {
this.tableData2 = response.data.list;
this.listQuery.total = response.data.total;
});
},
//tableBtn点击
handleClick(val) {
if (val.type === 'edit') {
this.addOrUpdateVisible = true;
this.addOrEditTitle = '编辑';
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
this.$refs.addOrUpdate.init(
val.data,
this.listQuery.statisticType,
this.activeName
);
});
} else {
this.otherMethods(val);
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
successSubmit() {
this.handleCancel();
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
/** 导出按钮操作 */
handleExport() {
let exportURL, title;
if (this.activeName === 'his') {
exportURL = exportcostOriginRatioHisExcel;
title = '原片成本-原片良品率';
title = '原片-产线良品率';
} else {
exportURL = exportcostOriginWSRatioHisExcel;
title = '原片-工段良品率';
}
// 处理查询参数
let params = { ...this.listQuery };
params.pageNo = undefined;

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '日期',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'otherCostName',
@@ -102,6 +105,10 @@ const tableProps = [
},
];
const tableProps2 = [
// {
// prop: 'remark',
// label: '备注',
// },
{
prop: 'otherCostName',
label: '成本名称',
@@ -182,13 +189,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'button',
@@ -237,24 +247,20 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -265,13 +271,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -297,6 +308,13 @@ export default {
this.getDataList2();
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
getRawOthercostSunPage(this.listQuery).then((response) => {

View File

@@ -65,6 +65,7 @@ const tableProps = [
prop: 'price',
label: '成本金额',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'remark',
@@ -161,7 +162,7 @@ export default {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
@@ -174,7 +175,7 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.name = val.name||null;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-12-05 13:45:59
* @LastEditors: zwq
* @LastEditTime: 2024-04-15 17:12:03
* @LastEditTime: 2024-12-25 16:20:38
* @Description
-->
<template>
@@ -10,9 +10,9 @@
<span>
{{
injectData.type == 1
? `每天等价,${injectData.price}`
? `每天等价,${Number(injectData.price)}`
: injectData.type == 2
? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}`
? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}`
: '-'
}}
</span>

View File

@@ -54,7 +54,7 @@
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:total="listQuery.total"
@pagination="getDataList" />
@pagination="getNavDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
const tableProps = [
{
prop: 'recTime',
prop: 'time',
label: '时间',
filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
},
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
@@ -98,32 +101,41 @@ const tableProps = [
{
prop: 'thick',
label: '厚度',
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
},
{
prop: 'inArea',
label: '拉引量/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outArea',
label: '下片面积/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
{
prop: 'costSum',
label: '原片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costArea',
label: '每平米成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
const tableProps2 = [
{
prop: 'remark',
label: '备注',
},
{
prop: 'bindObjectName',
label: '产线',
@@ -135,34 +147,40 @@ const tableProps2 = [
{
prop: 'inArea',
label: '拉引量/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outArea',
label: '下片面积/m²',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'outCount',
label: '下片数量',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'ratio',
label: '良品率',
filter: (val) => (val ? val * 100 + '%' : '-'),
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
},
{
prop: 'costSum',
label: '原片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costPiece',
label: '单片成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
{
prop: 'costArea',
label: '每平米成本/元',
align: 'right',
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
},
];
export default {
@@ -224,13 +242,16 @@ export default {
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime',
width: 350,
clearable: false,
},
{
type: 'select',
@@ -287,26 +308,20 @@ export default {
},
methods: {
buttonClick(val) {
if (val.statisticType === 2) {
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年第{w}周');
}else{
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
}
this.formConfig2[0].startPlaceholder = '开始时间';
this.formConfig2[0].endPlaceholder = '结束时间';
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList();
} else {
this.getDataList2();
@@ -317,13 +332,18 @@ export default {
break;
case 'export':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.pageSize = 20;
this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
}
this.handleExport();
break;
default:
@@ -345,15 +365,26 @@ export default {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.$nextTick(() => {
this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null;
this.listQuery.pageNo = 1;
this.getDataList2();
}
},
getNavDataList(){
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
},
// 获取数据2列表
getDataList2() {
if (this.listQuery.startTime) {

View File

@@ -0,0 +1,65 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 15:27:31
* @LastEditors: zwq
* @LastEditTime: 2023-08-01 16:25:54
* @Description:
-->
<template>
<div :class="[className, { 'p-0': noPadding }]">
<slot />
</div>
</template>
<script>
export default {
props: {
size: {
// 取值范围: xl lg md sm
type: String,
default: 'de',
validator: function (val) {
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
},
},
noPadding: {
type: Boolean,
default: false,
},
},
computed: {
className: function () {
return `${this.size}-title`;
},
},
};
</script>
<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
.#{$size}-title {
font-size: 18px;
line-height: $height;
color: #000;
font-weight: 500;
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
&::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: $height + 2px;
border-radius: 1px;
margin-right: $mgr;
background-color: #0b58ff;
}
}
}
.p-0 {
padding: 0;
}
</style>

View File

@@ -0,0 +1,134 @@
<template>
<el-dialog :visible.sync="visible" width="40%">
<small-title slot="title" :no-padding="true">
{{ this.dataForm.lineId + '·' + this.dataForm.equipmentName }}
</small-title>
<div class="content">
<div class="visual-part">
<base-table :table-props="tableProps"
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
<!-- <method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" /> -->
</base-table>
</div>
</div>
<!-- <div slot="footer" class="dialog-footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">
确定
</el-button>
</div> -->
</el-dialog>
</template>
<script>
const tableProps = [
{
prop: 'paramName',
label: '参数名称'
},
{
prop: 'paramValue',
label: '当前值',
// filter: parseTime,
// width: 160
},
];
import { getParamMonitor } from '@/api/base/equipment';
// import { parseTime } from '../../mixins/code-filter';
import SmallTitle from './SmallTitle';
export default {
components: { SmallTitle },
data() {
return {
visible: false,
tableProps,
tableData:[],
listQuery: {
pageNo: 1,
pageSize:100,
},
addOrUpdateVisible: false,
dataForm: {
equipmentId:undefined,
equipmentName: undefined,
lineId: undefined,
},
};
},
methods: {
init(data) {
console.log(data.paramMonitors,'data');
this.dataForm.equipmentId = data.equipmentId || '';
this.dataForm.equipmentName = data.equipmentName || '';
this.dataForm.lineId = data.lineId || '';
this.visible = true;
this.$nextTick(() => {
// this.$refs['dataForm'].resetFields();
// getParamMonitor({
// equipmentId:this.dataForm.equipmentId
// }).then((res) => {
this.tableData = data.paramMonitors
// })
});
}
},
};
</script>
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
}
.drawer >>> .el-form-item__label {
padding: 0;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
flex: 1;
height: 1px;
display: flex;
flex-direction: column;
}
.drawer >>> .content {
padding: 30px 24px;
flex: 1;
display: flex;
flex-direction: column;
/* height: 100%; */
}
.drawer >>> .visual-part {
flex: 1 auto;
max-height: 76vh;
overflow: hidden;
overflow-y: scroll;
padding-right: 10px; /* 调整滚动条样式 */
}
.drawer >>> .el-form,
.drawer >>> .attr-list {
padding: 0 16px;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style>

View File

@@ -0,0 +1,561 @@
<template>
<el-dialog :visible.sync="visible" width="80%" @close="handleClose" title-class="dialog-title">
<small-title slot="title" :no-padding="true">
{{ dataForm.lineId + '·' + dataForm.equipmentName }}
</small-title>
<search-bar removeBlue :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<el-tabs class="custom-tabs" v-model="activeLabel" :stretch="true" @tab-click="handleTabClick">
<el-tab-pane :label="'\u3000报警时长\u3000'" name="duration"></el-tab-pane>
<el-tab-pane :label="'\u3000报警次数\u3000'" name="times"></el-tab-pane>
</el-tabs>
<div class="content">
<div class="visual-part">
<div v-if="hasData" style="display: flex; justify-content: space-around; gap: 20px; padding: 10px 0;">
<!-- 移除 v-if始终渲染两个图表容器 -->
<div id="barChart" style="width: 48%; height: 400px;"></div>
<div id="pieChart" style="width: 48%; height: 400px;"></div>
</div>
<div v-if="!hasData" class="no-data">
<el-empty description="暂无相关报警数据"></el-empty>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import { getAlarmDet } from '@/api/base/equipment';
import * as echarts from 'echarts';
import SmallTitle from './SmallTitle';
const CHART_CONFIG = {
barColor: '#288AFF',
pieColors: [
'#288AFF', '#4096FF', '#69B1FF', '#91CFFF', '#B8E0FF',
'#E0F2FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C'
],
fontColor: '#333',
lightFontColor: '#666',
borderRadius: 4
};
export default {
components: { SmallTitle },
data() {
return {
visible: false,
hasData: false,
listQuery: {
pageNo: 1,
pageSize: 100,
equipmentId: undefined,
startTime: undefined,
endTime: undefined
},
formConfig: [
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: []
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary'
}
],
activeLabel: 'duration', // 默认选中「报警时长」
dataForm: {
equipmentId: undefined,
equipmentName: undefined,
lineId: undefined
},
chartInstances: {
bar: null,
pie: null
},
isDomReady: false,
originData: null // 存储原始数据
};
},
mounted() {
this.$nextTick(() => {
this.isDomReady = true;
if (this.listQuery.equipmentId) {
this.getDataList();
}
});
},
watch: {
// Tab 切换时自动刷新图表(无需额外操作,依赖 handleTabClick 触发查询)
activeLabel() {
if (this.isDomReady && this.originData) {
this.$nextTick(() => {
this.renderBothCharts(); // 切换 Tab 后重新渲染两个图表
});
}
}
},
methods: {
initDefaultDate() {
const today = new Date();
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0).getTime();
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 0).getTime();
this.formConfig[0].defaultSelect = [start, end];
this.listQuery.startTime = start;
this.listQuery.endTime = end;
if (this.$refs.searchBarForm) {
this.$refs.searchBarForm.form.timeVal = [start, end];
}
},
handleTabClick() {
// 切换 Tab 时重新查询数据(或直接复用已有数据渲染)
this.getDataList();
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.startTime = val.timeVal?.[0];
this.listQuery.endTime = val.timeVal?.[1];
this.getDataList();
break;
default:
}
},
async getDataList() {
try {
if (!this.listQuery.equipmentId) {
console.warn('设备ID不能为空');
this.hasData = false;
return;
}
const queryParams = {
equipmentId: this.listQuery.equipmentId,
startTime: this.listQuery.startTime,
endTime: this.listQuery.endTime,
};
const res = await getAlarmDet(queryParams);
const originData = res.data || [];
this.originData = originData;
this.hasData = originData.length > 0;
if (this.hasData && this.isDomReady) {
this.$nextTick(() => {
this.renderBothCharts(); // 数据查询成功后,同时渲染两个图表
});
} else {
this.destroyAllCharts();
}
} catch (error) {
console.error('获取报警数据失败:', error);
this.hasData = false;
this.destroyAllCharts();
}
},
// 核心方法:同时渲染柱状图和饼图(根据当前 Tab 类型)
renderBothCharts() {
if (this.activeLabel === 'duration') {
// 报警时长:柱状图(时长排序)+ 饼图(时长占比)
this.renderBarChart('duration');
this.renderPieChart('duration');
} else {
// 报警次数:柱状图(次数排序)+ 饼图(次数占比)
this.renderBarChart('times');
this.renderPieChart('times');
}
},
// 渲染柱状图(支持两种数据类型)
renderBarChart(type) {
this.destroyChart('bar');
const chartDom = document.getElementById('barChart');
if (!chartDom || !this.originData.length) return;
// 根据类型排序和提取数据
let sortedData, xData, seriesData, yAxisName;
if (type === 'duration') {
// 报警时长:按时长降序
sortedData = [...this.originData].sort((a, b) => b.alarmDuration - a.alarmDuration);
seriesData = sortedData.map(item => item.alarmDuration);
yAxisName = '报警时长';
} else {
// 报警次数:按次数降序
sortedData = [...this.originData].sort((a, b) => b.alarmCount - a.alarmCount);
seriesData = sortedData.map(item => item.alarmCount);
yAxisName = '报警次数';
}
xData = sortedData.map(item => this.truncateText(item.alarmContent, 8));
try {
this.chartInstances.bar = echarts.init(chartDom);
const option = {
title: {
text: `${yAxisName}统计(柱状图)`,
left: 'center',
textStyle: { fontSize: 14, color: CHART_CONFIG.fontColor }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
padding: 10,
textStyle: { fontSize: 11 },
formatter: (params) => {
const index = params[0].dataIndex;
const item = sortedData[index];
return `
<div style="text-align: left;">
<div>${item.alarmContent}</div>
<div>${yAxisName}${type === 'duration' ? item.alarmDuration : item.alarmCount}</div>
<div>占比:${type === 'duration' ? item.alarmDurationRatio.toFixed(2) : item.alarmCountRatio.toFixed(2)}%</div>
</div>
`;
}
},
grid: {
left: '5%',
right: '5%',
bottom: '18%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xData,
axisTick: { alignWithLabel: true },
axisLabel: {
interval: 0,
fontSize: 12,
color: CHART_CONFIG.lightFontColor
},
axisLine: { lineStyle: { color: '#e8e8e8' } }
}
],
yAxis: [
{
type: 'value',
name: yAxisName,
nameTextStyle: { fontSize: 11, color: CHART_CONFIG.lightFontColor },
axisLabel: {
fontSize: 11,
color: CHART_CONFIG.lightFontColor,
},
axisLine: { lineStyle: { color: '#e8e8e8' } },
splitLine: { lineStyle: { color: '#f5f5f5' } },
max: (value) => value.max * 1.2
}
],
series: [
{
name: yAxisName,
type: 'bar',
itemStyle: {
color: CHART_CONFIG.barColor,
borderRadius: [CHART_CONFIG.borderRadius, CHART_CONFIG.borderRadius, 0, 0],
shadowBlur: 3,
shadowColor: 'rgba(40, 138, 255, 0.2)',
shadowOffsetY: 2
},
barWidth: '16',
data: seriesData,
label: {
show: true,
position: 'top',
distance: 6,
fontSize: 11,
color: CHART_CONFIG.fontColor,
formatter: (params) => `${params.value}`
}
}
]
};
this.chartInstances.bar.setOption(option);
this.addResizeListener('bar');
} catch (error) {
console.error(`${yAxisName}柱状图初始化失败:`, error);
setTimeout(() => this.renderBarChart(type), 200);
}
},
// 渲染饼图(支持两种数据类型)
renderPieChart(type) {
this.destroyChart('pie');
const chartDom = document.getElementById('pieChart');
if (!chartDom || !this.originData.length) return;
// 根据类型处理饼图数据
let pieData, seriesName;
if (type === 'duration') {
// 报警时长:按时长占比处理
seriesName = '报警时长';
pieData = this.handlePieData(this.originData, 'alarmDuration', 'alarmDurationRatio');
} else {
// 报警次数:按次数占比处理
seriesName = '报警次数';
pieData = this.handlePieData(this.originData, 'alarmCount', 'alarmCountRatio');
}
try {
this.chartInstances.pie = echarts.init(chartDom);
const option = {
title: {
text: `${seriesName}统计(饼图)`,
left: 'center',
textStyle: { fontSize: 14, color: CHART_CONFIG.fontColor }
},
tooltip: {
trigger: 'item',
padding: 10,
textStyle: { fontSize: 11 },
formatter: (params) => {
return `
<div style="text-align: left;">
<div>${params.name}</div>
<div>${seriesName}${params.value}${type === 'duration' ? '' : '次'}</div>
<div>占比:${params.percent.toFixed(2)}%</div>
</div>
`;
}
},
series: [
{
name: seriesName,
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '55%'],
color: CHART_CONFIG.pieColors,
label: {
show: true,
position: 'outside',
distance: 15,
fontSize: 11,
color: CHART_CONFIG.lightFontColor,
formatter: (params) => {
const truncatedName = this.truncateText(params.name, 8);
return `${truncatedName}(${params.value}${type === 'duration' ? '' : '次'}, ${params.percent.toFixed(1)}%)`;
},
align: 'center',
baseline: 'middle'
},
labelLine: {
show: true,
length: 15,
length2: 20,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
},
smooth: 0.2
},
data: pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
label: {
color: CHART_CONFIG.fontColor,
fontSize: 12,
fontWeight: 500
},
labelLine: {
lineStyle: {
color: CHART_CONFIG.barColor,
width: 1.5
}
}
}
}
]
};
this.chartInstances.pie.setOption(option);
this.addResizeListener('pie');
} catch (error) {
console.error(`${seriesName}饼图初始化失败:`, error);
setTimeout(() => this.renderPieChart(type), 200);
}
},
// 通用饼图数据处理(支持动态字段)
handlePieData(data, valueKey, ratioKey) {
const threshold = 5; // 占比低于5%合并为「其他」
let otherCount = 0;
const mainData = data.filter(item => {
if (item[ratioKey] >= threshold) {
return true;
} else {
otherCount += item[valueKey];
return false;
}
}).map(item => ({
name: item.alarmContent,
value: item[valueKey],
ratio: item[ratioKey]
}));
if (otherCount > 0) {
mainData.push({
name: '其他',
value: otherCount,
ratio: 100 - mainData.reduce((sum, item) => sum + item.ratio, 0)
});
}
return mainData;
},
truncateText(text, maxLength) {
if (!text) return '';
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
},
addResizeListener(type) {
const chart = this.chartInstances[type];
if (chart) {
const resizeHandler = () => chart.resize();
window.addEventListener('resize', resizeHandler);
chart.resizeHandler = resizeHandler;
}
},
destroyChart(type) {
const chart = this.chartInstances[type];
if (chart) {
window.removeEventListener('resize', chart.resizeHandler);
chart.dispose();
this.chartInstances[type] = null;
}
},
destroyAllCharts() {
Object.keys(this.chartInstances).forEach(type => {
this.destroyChart(type);
});
},
handleClose() {
this.destroyAllCharts();
this.formConfig[0].defaultSelect = [];
this.listQuery.startTime = undefined;
this.listQuery.endTime = undefined;
this.originData = null;
this.hasData = true;
if (this.$refs.searchBarForm) {
this.$refs.searchBarForm.form.timeVal = [];
}
},
init(data) {
this.dataForm = {
equipmentId: data.equipmentId || '',
equipmentName: data.equipmentName || '',
lineId: data.lineId || ''
};
this.activeLabel = 'duration'
this.listQuery.equipmentId = data.equipmentId || undefined;
this.visible = true;
this.originData = null;
this.hasData = false;
this.initDefaultDate();
this.$nextTick(() => {
this.$nextTick(() => {
this.isDomReady = true;
this.getDataList();
});
});
}
},
beforeDestroy() {
this.destroyAllCharts();
}
};
</script>
<style scoped>
/* 保持原有样式,优化图表容器布局 */
.drawer>>>.el-drawer {
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
}
.drawer>>>.el-form-item__label {
padding: 0;
}
.drawer>>>.el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
}
.drawer>>>.el-drawer__body {
flex: 1;
height: 1px;
display: flex;
flex-direction: column;
}
.drawer>>>.content {
padding: 30px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.drawer>>>.visual-part {
flex: 1 auto;
max-height: 76vh;
overflow: hidden;
padding: 10px 0;
}
/* 优化图表容器响应式布局 */
@media (max-width: 1200px) {
.visual-part>div {
flex-direction: column;
}
#barChart,
#pieChart {
width: 100% !important;
height: 350px !important;
margin-bottom: 20px;
}
}
.drawer>>>.el-form,
.drawer>>>.attr-list {
padding: 0 16px;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,96 @@
<!--
* @Author: zwq
* @Date: 2025-10-23 13:43:55
* @LastEditors: zwq
* @LastEditTime: 2025-11-14 21:13:10
* @Description:
-->
<template>
<div class="app-container" style="padding-top: 0">
<div v-for="item in groupClassArr" :key="item.planId">
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
{{ item.deptName + ' - ' + item.planName }}
</small-title>
<base-table
:table-props="tableProps"
:table-data="
tableData.filter((titem) => titem.schedulingPlanId == item.planId)
"></base-table>
</div>
</div>
</template>
<script>
import SmallTitle from '../Schedule/SmallTitle';
const tableProps = [
{
prop: 'classesName',
label: '班次名称',
},
{
prop: 'workTime',
label: '班次时间',
},
{
prop: 'teamName',
label: '班组名称',
},
{
prop: 'teamLeader',
label: '组长',
},
{
prop: 'teamLeaderPhone',
label: '组长电话',
},
];
export default {
components: {
SmallTitle,
},
data() {
return {
tableProps,
tableData: [],
groupClassArr: [],
};
},
created() {},
methods: {
init(det, detSort) {
this.tableData = det;
//返回计划名和id
const arr = det.map((item) => {
const obj = {
planName: item.schedulingPlanName,
planId: item.schedulingPlanId,
deptName: item.belongDeptName,
};
return obj;
});
//去重
const map = new Map();
arr.forEach((item) => {
if (!map.has(item.planId)) {
map.set(item.planId, item);
}
});
const newArr = Array.from(map.values());
// 创建B数组中id的顺序映射
const orderMap = new Map();
detSort.forEach((item, index) => {
orderMap.set(item, index);
});
// 根据B的顺序对A进行排序
this.groupClassArr = [...newArr].sort((a, b) => {
const orderA = orderMap.get(a.planId);
const orderB = orderMap.get(b.planId);
return orderA - orderB;
});
},
},
};
</script>

View File

@@ -0,0 +1,612 @@
<!--
* @Author: zwq
* @Date: 2025-10-23 13:43:55
* @LastEditors: zwq
* @LastEditTime: 2025-11-25 09:39:43
* @Description:
-->
<template>
<div
class="app-container"
style="
background-color: #f2f4f9;
padding: 0;
display: grid;
grid-template-columns: 1fr 5fr;
gap: 10px;
">
<div class="head-container">
<el-tabs v-model="activeName" stretch @tab-click="tabsClick">
<el-tab-pane label="部门" name="first"></el-tab-pane>
<el-tab-pane label="班组" name="second"></el-tab-pane>
</el-tabs>
<div v-if="activeName == 'first'">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px" />
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick" />
</div>
<div v-else>
<el-input
v-model="groupName"
placeholder="请输入班组名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px" />
<el-tree
:data="groupOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree1"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick1" />
</div>
</div>
<div class="groupTeamScheduling">
<div class="operationArea">
<el-form :inline="true" class="demo-form-inline">
<span class="blue-block"></span>
<el-form-item label="月份选择">
<el-date-picker
v-model="startDay"
type="month"
placeholder="选择月"
size="small"
@change="selectMonth"
:clearable="false"
style="width: 120px"></el-date-picker>
<span
style="color: #909399; font-size: 12px"
v-if="activeName == 'first'">
提示排班日历仅展示当前选中部门的节假日设置若休假日中仍有排班则表示下级组织已通过自定义假期进行排班
</span>
<span v-else style="margin-left: 10px">
组长:
<span style="font-weight: 600; margin: 0 10px">
{{ showTeamName?.leaderName || '-' }}
</span>
组长电话:
<span style="font-weight: 600; margin: 0 10px">
{{ showTeamName?.leaderPhone || '-' }}
</span>
</span>
</el-form-item>
<el-form-item style="float: right">
<el-button
size="small"
type="primary"
@click="(startDay = new Date()), getHolidayPage()">
跳转到今天
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 日历区域 -->
<div class="calenderArea">
<el-calendar v-model="startDay">
<template slot="dateCell" slot-scope="{ data }">
<div v-if="data.type === 'current-month'">
<!-- 日期 -->
<div class="dateStyle">
<el-row :gutter="20">
<!-- 公历和农历 -->
<el-col :span="18">
{{ Number(data.day.split('-')[2]) }}
<div class="lunar-date">{{ getLunarDate(data.day) }}</div>
</el-col>
<!-- 显示假或班 -->
<el-col :span="6">
<div
class="work-tip"
:style="{
backgroundColor: HolidayList[
Number(data.day.split('-')[2]) - 1
]?.isHoliday
? '#67C23A'
: '#409EFF',
}">
{{
HolidayList[Number(data.day.split('-')[2]) - 1]
?.isHoliday
? '假'
: '班'
}}
<!-- //变更节假日未更新排班计划的角标 -->
<div
class="subIcon"
v-if="
HolidayList[Number(data.day.split('-')[2]) - 1]
?.isUpdate
">
<el-tooltip
effect="dark"
content="本日节假日变更已影响当前排班计划,但尚未同步,请及时处理。"
placement="top">
<i class="el-icon-warning" style="color: #f56c6c"></i>
</el-tooltip>
</div>
</div>
</el-col>
<!-- 显示排班 -->
<div
v-if="
HolidayList[Number(data.day.split('-')[2]) - 1]?.det
.length > 0
">
<el-col
:span="24"
v-for="(item, index) in HolidayList[
Number(data.day.split('-')[2]) - 1
]?.det.filter(
(item) =>
item.schedulingPlanId ==
HolidayList[Number(data.day.split('-')[2]) - 1]
?.schedulingPlanId
)"
:key="index">
<el-tooltip
effect="dark"
content="点击展示全部排班计划"
placement="top-start">
<div
class="holiday-div"
:style="{
backgroundColor: holidayDivColor[item?.classesCode],
}"
@click="
holidayLog(
HolidayList[Number(data.day.split('-')[2]) - 1]
?.det,
HolidayList[Number(data.day.split('-')[2]) - 1]
?.date,
HolidayList[Number(data.day.split('-')[2]) - 1]
?.detSort
)
"
:title="
item.classesName +
' | ' +
item.teamName +
' | ' +
item.workTime
">
{{
item.classesName +
' | ' +
item.teamName +
' | ' +
item.workTime
}}
</div>
</el-tooltip>
</el-col>
</div>
</el-row>
</div>
</div>
<div
v-else
style="font-size: 20px; font-weight: 500; text-align: left">
<el-row :gutter="20">
<el-col :span="24">
{{ Number(data.day.split('-')[2]) }}
<span style="font-size: 12px">
{{ getLunarDate(data.day) }}
</span>
</el-col>
</el-row>
</div>
</template>
</el-calendar>
</div>
</div>
<base-dialog
:dialogTitle="dialogTitle"
:dialogVisible="logVisible"
@cancel="cancelLog"
:before-close="cancelLog"
:destroy-on-close="true"
width="70%">
<holiday-log ref="holidayLogRef"></holiday-log>
<template #footer>
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button size="small" class="btnTextStyle" @click="cancelLog">
取消
</el-button>
</el-col>
</el-row>
</slot>
</template>
</base-dialog>
</div>
</template>
<script>
import moment from 'moment';
import { solarToLunar } from 'chinese-lunar';
import { getUserProfile } from '@/api/system/user';
import { listByDeptId } from '@/api/group/Schedule';
import { getEnableData } from '@/api/group/holidaySetting';
import {
getDeptSchedulingList,
getClassSchedulingList,
} from '@/api/group/calendar';
import holidayLog from './holidayLog';
export default {
name: '',
components: {
holidayLog,
},
data() {
return {
activeName: 'first',
startDay: '', // 查询参数
HolidayList: [],
// 选择的部门名称
showDeptName: undefined,
showTeamName: {},
// 部门树选项
deptOptions: undefined,
groupOptions: undefined,
// 查询的部门名称
deptName: undefined,
groupName: undefined,
topDept: {}, // 保存当前用户的部门id为最高级部门id
deptId: undefined,
teamId: undefined,
defaultProps: {
children: 'children',
label: 'name',
},
logVisible: false,
dialogTitle: '',
holidayDivColor: ['#67c23a', '#69d983', '#f5c931', '#4fa6f0'],
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
},
groupName(val) {
this.$refs.tree1.filter(val);
},
},
created() {
this.startDay = new Date();
// 查询用户个人信息
getUserProfile().then((response) => {
this.showDeptName = response.data.dept.name || '';
this.topDept = {
name: response.data.dept.name || '',
id: response.data.dept.id || '',
}; // 保存当前用户的部门为最高级部门id
this.deptId = response.data.dept.id || '';
this.getHolidayPage();
this.getTreeselect();
});
},
methods: {
getHolidayPage() {
const now = new Date(this.startDay);
const year = now.getFullYear();
const month = now.getMonth();
const startTime = `${year}-${String(month + 1).padStart(2, '0')}-01`;
const lastDate = new Date(year, month + 1, 0).getDate();
const endTime = `${year}-${String(month + 1).padStart(2, '0')}-${String(
lastDate
).padStart(2, '0')}`;
this.HolidayList = [];
if (this.activeName == 'first') {
getDeptSchedulingList({
deptId: this.deptId,
startTime: Date.parse(startTime),
endTime: Date.parse(endTime),
}).then((res) => {
this.HolidayList = res.data;
});
} else {
getClassSchedulingList({
teamId: this.teamId,
startTime: Date.parse(startTime),
endTime: Date.parse(endTime),
}).then((res) => {
this.HolidayList = res.data;
});
}
},
// 切换月份
selectMonth() {
this.getHolidayPage();
},
/** 查询部门下拉树结构 */
getTreeselect() {
getEnableData().then((response) => {
// 处理 deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree1(response.data, 'id'));
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.deptId);
});
});
listByDeptId(this.topDept.id).then((response) => {
this.groupOptions = [];
this.groupOptions.push(...response.data);
});
},
//大整数精度丢失
handleTree1(data, fid) {
const id = fid || 'id';
const parentId = 'parentId';
const children = 'children';
const rootId =
data
.map((item) => item[parentId].toString())
.reduce((min, current) => {
if (current.length < min.length) return current;
if (current.length > min.length) return min;
return current < min ? current : min;
}) || 0;
//对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
//循环所有项
const treeData = cloneData.filter((father) => {
let branchArr = cloneData.filter((child) => {
//返回每一项的子级数组
return father[id] == child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
//返回第一层
return father[parentId] == rootId;
});
return treeData !== '' ? treeData : data;
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
tabsClick() {
if (this.activeName == 'second' && this.groupOptions.length > 0) {
this.teamId = this.groupOptions[0].id;
this.showTeamName = {
leaderName: this.groupOptions[0].leaderName || '-',
leaderPhone: this.groupOptions[0].leaderPhone || '-',
};
this.$nextTick(() => {
this.$refs.tree1.setCurrentKey(this.teamId);
});
} else if (this.activeName == 'first') {
this.deptId = this.topDept.id;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.deptId);
});
}
this.getHolidayPage();
},
// 节点单击事件
handleNodeClick(data) {
this.deptId = data.id;
this.showDeptName = data.name;
this.getHolidayPage();
},
handleNodeClick1(data) {
this.teamId = data.id;
this.showTeamName = {
leaderName: data.leaderName || '-',
leaderPhone: data.leaderPhone || '-',
};
this.getHolidayPage();
},
//获取农历
getLunarDate(solarDate) {
try {
const [year, month, day] = solarDate.split('-').map(Number);
const date = new Date(year, month - 1, day);
const lunar = solarToLunar(date);
// 将数字月份和日期转换为中文
const monthMap = {
1: '正',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
7: '七',
8: '八',
9: '九',
10: '十',
11: '冬',
12: '腊',
};
const dayMap = {
1: '初一',
2: '初二',
3: '初三',
4: '初四',
5: '初五',
6: '初六',
7: '初七',
8: '初八',
9: '初九',
10: '初十',
11: '十一',
12: '十二',
13: '十三',
14: '十四',
15: '十五',
16: '十六',
17: '十七',
18: '十八',
19: '十九',
20: '二十',
21: '廿一',
22: '廿二',
23: '廿三',
24: '廿四',
25: '廿五',
26: '廿六',
27: '廿七',
28: '廿八',
29: '廿九',
30: '三十',
};
// 返回 "三月初四" 格式
return `${monthMap[lunar.month]}月${dayMap[lunar.day]}`;
} catch (error) {
console.log(error);
return '';
}
},
holidayLog(det, date, detSort) {
this.dialogTitle = this.showDeptName + '-' + date + '-排班详情';
this.logVisible = true;
this.$nextTick(() => {
this.$refs.holidayLogRef.init(det, detSort);
});
},
cancelLog() {
this.dialogTitle = '';
this.logVisible = false;
},
},
};
</script>
<style lang="scss">
.head-container {
padding: 20px 10px 0;
background-color: #fff;
border-radius: 8px;
height: 100%;
}
.groupTeamScheduling {
.operationArea {
padding: 14px 10px 0 16px;
margin-bottom: 8px;
background-color: #fff;
border-radius: 8px;
.blue-block {
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 10px;
}
.el-form-item {
margin-bottom: 10px;
}
}
// 日历
.calenderArea {
padding: 14px 10px 0 20px;
background-color: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px - 8px - 168px);
.el-calendar__body {
padding: 10px 16px 16px 0;
}
.el-calendar__header {
display: none;
}
.el-calendar-table > thead {
height: 48px;
font-size: 20px;
font-weight: 500;
color: #000000;
background-color: rgba(242, 244, 249, 1);
}
.el-calendar-table__row {
height: 133px;
.prev,
.next {
pointer-events: none;
}
.is-selected,
.is-today {
background-color: #e4f0fd;
}
.el-calendar-day {
padding: 0;
height: 100%;
:hover {
background-color: #e4f0fd;
}
.dateStyle {
font-size: 20px;
font-weight: 500;
color: #000000;
text-align: left;
height: 133px;
line-height: 28px;
padding: 10px;
overflow: hidden;
.lunar-date {
display: inline-block;
font-size: 12px;
color: #909399;
}
.work-tip {
background: #87c1ff;
color: white;
font-size: 18px;
width: 30px;
text-align: center;
float: right;
position: relative;
.subIcon {
position: absolute;
top: -18px;
right: -10px;
font-size: 10px;
}
}
.holiday-div {
background-color: #67c23a;
border-radius: 3px;
height: 25px;
text-align: center;
font-size: 12px;
line-height: 24px;
color: #fff;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
</style>

View File

@@ -0,0 +1,65 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 15:27:31
* @LastEditors: zwq
* @LastEditTime: 2023-08-01 16:25:54
* @Description:
-->
<template>
<div :class="[className, { 'p-0': noPadding }]">
<slot />
</div>
</template>
<script>
export default {
props: {
size: {
// 取值范围: xl lg md sm
type: String,
default: 'de',
validator: function (val) {
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
},
},
noPadding: {
type: Boolean,
default: false,
},
},
computed: {
className: function () {
return `${this.size}-title`;
},
},
};
</script>
<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
.#{$size}-title {
font-size: $height;
line-height: $height;
color: #000;
font-weight: 500;
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
&::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: $height + 2px;
border-radius: 1px;
margin-right: $mgr;
background-color: #0b58ff;
}
}
}
.p-0 {
padding: 0;
}
</style>

View File

@@ -0,0 +1,173 @@
<!--
* @Author: zwq
* @Date: 2025-10-11 14:27:37
* @LastEditors: zwq
* @LastEditTime: 2025-11-14 22:00:10
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
ref="groupTableRef"
:id="'groupTableSelectRef'"
row-key="id"
:selectWidth="55"
@selection-change="selectChange"
:table-props="tableProps"
:page="1"
:limit="999"
:table-data="tableData"></base-table>
</div>
</template>
<script>
import { getGroupPage } from '@/api/group/groupSetting';
const tableProps = [
{
prop: 'code',
label: '班组编号',
width: 140,
},
{
prop: 'name',
label: '班组名称',
width: 100,
},
{
prop: 'deptName',
label: '所属部门',
},
{
prop: 'leaderName',
label: '组长',
},
{
prop: 'remark',
label: '备注',
showOverflowtooltip: true,
},
];
export default {
data() {
return {
urlOptions: {
getDataListURL: getGroupPage,
},
tableProps,
tableData: [],
formConfig: [
{
type: 'input',
label: '班组编号',
placeholder: '班组编号',
param: 'code',
},
{
type: 'input',
label: '班组名称',
placeholder: '班组名称',
param: 'name',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
formInline: {
pageNo: 1,
pageSize: 100,
code: '',
name: '',
deptId: undefined,
},
selectedList: [],
selectedArr: [], //已选的班组,从父组件传过来的
};
},
created() {},
methods: {
init(id, tableData) {
this.formInline.deptId = id;
this.selectedArr = tableData || [];
this.$nextTick(() => {
this.getDataList();
});
},
// 获取数据列表
getDataList() {
this.urlOptions.getDataListURL(this.formInline).then((response) => {
this.tableData = response.data.list.filter(item=>item.enabled===1);
this.tableData.forEach(item=>item.teamId= item.id)
this.$nextTick(() => {
if (this.selectedArr.length > 0) {
this.setSelectedRows();
}
});
});
},
setSelectedRows() {
const table = this.$refs.groupTableRef.$children[0];
// 先清空选择
table.clearSelection();
this.selectedArr.forEach((item) => {
const rowInTable = this.tableData.find((i) => i.teamId === item.teamId);
if (rowInTable) {
//这里一定要用table.tableData这样才是指向同一个数组
this.$set(table.store.states, 'selection', [
...table.store.states.selection,
table.tableData.find((i) => i.teamId === item.teamId),
]);
}
});
// 强制更新视图
this.$nextTick(() => {
table.$forceUpdate();
this.$forceUpdate();
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.formInline.name = val.name;
this.formInline.code = val.code;
this.getDataList();
break;
default:
console.log(val);
}
},
selectChange(val) {
this.selectedList = val;
},
// 判断两个数组是否有重复的 id,去重
hasDuplicateIds(arr1, arr2) {
return arr2.filter(
(item2) => !arr1.some((item1) => item1.teamId === item2.teamId)
);
},
dataFormSubmit() {
if (this.selectedList && this.selectedList.length > 0) {
this.selectedList = this.hasDuplicateIds(
this.selectedArr,
this.selectedList
);
this.$emit('refreshTableData', this.selectedList);
} else if (this.selectedArr.length > 0) {
this.$message('请不要重复添加数组');
}
},
},
};
</script>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,110 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-11-25 15:49:17
* @Description:
-->
<template>
<div style="width: 100%; display: flex; justify-content: center">
<tree-transfer
:title="title"
:from_data="fromData"
:to_data="toData"
@add-btn="add"
@remove-btn="remove"
pid="fid"
:node_key="'uniqueId'"
:defaultProps="{
label: 'name',
children: 'children',
}"
height="450px"
style="padding-bottom: 20px"
:mode="mode"
filter
openAll></tree-transfer>
</div>
</template>
<script>
import treeTransfer from 'el-tree-transfer';
import { getGroupPlanTree } from '@/api/group/Schedule';
export default {
components: { treeTransfer },
data() {
return {
title: ['待选', '已选'],
mode: 'transfer',
fromData: [], //左边内容
toData: [], //右边已选内容
};
},
methods: {
init(val) {
this._pageIndex = val._pageIndex - 1;
this.fromData = [];
this.toData = [];
getGroupPlanTree().then((res) => {
res.data.forEach((item) => {
item.productionLineId = 0;
});
this.fromData = this.generateUniqueData(res.data);
this.$nextTick(() => {
this.toData = val.bindLineTree || [];
this.getFilterLeftData(this.fromData, this.toData); //编辑时组件有bug左边相同数据不消失
});
});
},
generateUniqueData(data) {
return data.map((node) => this.processNode(node));
},
processNode(node) {
// 创建唯一ID类型-原始ID
const uniqueId = node.type+'L'+node.id;
if (node.type > 0) {
node.fid = (node.type - 1)+'L'+node.pid;
}
return {
...node,
uniqueId,
children: node.children
? node.children.map((child) => this.processNode(child))
: [],
};
},
// 监听穿梭框组件添加
add(fromData, toData, obj) {
console.log('fromData:', fromData);
console.log('toData:', toData, obj);
},
// 监听穿梭框组件移除
remove(fromData, toData, obj) {
console.log('fromData:', fromData);
console.log('toData:', toData);
},
/** 消除组件左边与右边选中数据相同项 */
// 处理过滤数据
getFilterLeftData(data, selData) {
for (let i = data.length - 1; i >= 0; i--) {
for (let j = selData.length - 1; j >= 0; j--) {
if (data[i] && data[i].id === selData[j].id) {
// 当id相等可以删除的情况 即:没有子级可以删除;
if (!data[i].children || data[i].children.length == 0) {
data.splice(i, 1);
} else {
this.getFilterLeftData(data[i].children, selData[j].children);
}
}
}
}
},
// 表单提交
dataFormSubmit() {
this.$emit('refreshTableData', this._pageIndex, this.toData);
},
},
};
</script>

View File

@@ -0,0 +1,206 @@
<!--
* @Author: zwq
* @Date: 2025-10-21 14:27:23
* @LastEditors: zwq
* @LastEditTime: 2025-11-25 15:14:53
* @Description:
-->
<template>
<div>
<div class="info-div">
<div>
<span class="title">计划编号:</span>
{{ infoData.code }}
</div>
<div>
<span class="title">计划状态:</span>
{{ ['', '草稿', '已确认', '已作废'][infoData.status] }}
</div>
<div>
<span class="title">计划名称:</span>
{{ infoData.name }}
</div>
<div>
<span class="title">部门:</span>
{{ infoData.deptName }}
</div>
<div>
<span class="title">开始时间:</span>
{{ parseTime(infoData.startDay) }}
</div>
<div>
<span class="title">结束时间:</span>
{{ parseTime(infoData.endDay) }}
</div>
<div>
<span class="title">周末休假方式:</span>
{{ ['', '双休', '周六休', '周日休', '不休'][infoData.weekType] }}
</div>
<div>
<span class="title">倒班方式:</span>
{{ ['', '长白班', '两班倒', '三班倒'][infoData.shiftType] }}
</div>
<div>
<span class="title">同班次连排:</span>
{{ infoData.shiftSustainedNum }}
</div>
<div>
<span class="title">创建人:</span>
{{ infoData.creatorName }}
</div>
<div>
<span class="title">创建时间:</span>
{{ parseTime(infoData.createTime) }}
</div>
<div v-if="infoData.status == 3">
<span class="title">作废时间:</span>
{{ parseTime(infoData.disableTime) }}
</div>
<div>
<span class="title">备注:</span>
{{ infoData.remark }}
</div>
</div>
<div>
<el-tabs v-model="activeName" stretch>
<el-tab-pane label="班次" name="first"></el-tab-pane>
<el-tab-pane label="班组" name="second"></el-tab-pane>
</el-tabs>
<base-table
v-if="activeName == 'first'"
:table-props="tableProps1"
:page="1"
:limit="10"
:table-data="tableData1"></base-table>
<base-table
v-else
:table-props="tableProps2"
:page="1"
:limit="10"
:table-data="tableData2"></base-table>
</div>
</div>
</template>
<script>
import { parseTime } from '@/filter/code-filter';
import { getPlan } from '@/api/group/Schedule';
const tableProps1 = [
{
prop: 'name',
label: '班次名称',
},
{
prop: 'startTime',
label: '开始时间',
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'endTime',
label: '结束时间',
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'remark',
label: '备注',
},
];
const tableProps2 = [
{
prop: 'code',
label: '班组编号',
width: 140,
},
{
prop: 'name',
label: '班组名称',
},
{
prop: 'isProduction',
label: '是否生产班组',
filter: (val) => {
return val ? '是' : '否';
},
width: 110,
},
{
prop: 'lineName',
label: '产线及工段',
},
];
export default {
data() {
return {
infoData: {},
activeName: 'first',
tableProps1,
tableData1: [],
tableProps2,
tableData2: [],
};
},
methods: {
init(id) {
this.infoData = {};
getPlan(id).then((res) => {
this.infoData = res.data || {};
this.tableData1 = res.data?.groupPlanClassesBaseVOList.sort(
(a, b) => a.sort - b.sort
);
this.tableData2 = res.data?.groupPlanTeamBaseVOList;
this.tableData2.forEach((item, index) => {
let lineName = '';
if (item.isProduction) {
lineName = this.setLineName(item.bindLineTree);
}
this.$set(this.tableData2[index], 'lineName', lineName);
});
});
},
//提取绑定的产线工段名展示出来
setLineName(val) {
if (!val || val.length === 0) return '';
const currentLevelNames = val.map((item) => item.name);
// 处理当前层级显示
let currentDisplay = '';
if (currentLevelNames.length > 1) {
currentDisplay = `(${currentLevelNames.join(' 、 ')})`;
} else {
currentDisplay = currentLevelNames[0];
}
// 查找所有子节点(取第一个有子节点的元素)
const childNode = val.find(
(item) => item.children && item.children.length > 0
);
if (childNode) {
const childPath = this.setLineName(childNode.children);
if (childPath) {
return `${currentDisplay} / ${childPath}`;
}
}
return currentDisplay;
},
},
};
</script>
<style scoped>
.info-div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.title {
font-weight: bold;
}
</style>

View File

@@ -0,0 +1,148 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-11-04 14:08:47
* @Description:
-->
<template>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-position="top"
label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number
style="width: 100%"
v-model="dataForm.sort"
:step="1"
:min="1"
step-strictly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="班次名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入班次名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="HH:mm:ss"
v-model="dataForm.startTime"
@change="timeFun('start')"
placeholder="选择时间"></el-time-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="HH:mm:ss"
v-model="dataForm.endTime"
@change="timeFun('end')"
placeholder="选择时间"></el-time-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否跨天" prop="daySpan">
<el-switch
v-model="dataForm.daySpan"
disabled
:active-value="1"
:inactive-value="0"
active-text="隔天"
inactive-text="当天"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
clearable
placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
components: {},
data() {
return {
dataForm: {
id: undefined,
sort: undefined,
name: undefined,
startTime: undefined,
endTime: undefined,
daySpan: 0,
code: 1,
remark: undefined,
},
_pageIndex: 1,
dataRule: {
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
name: [
{ required: true, message: '班次名称不能为空', trigger: 'blur' },
],
startTime: [
{ required: true, message: '开始时间不能为空', trigger: 'change' },
],
endTime: [
{ required: true, message: '结束时间不能为空', trigger: 'change' },
],
},
};
},
methods: {
init(val) {
this._pageIndex = val._pageIndex - 1;
this.dataForm.sort = val._pageIndex || 1;
this.dataForm.name = val.name || undefined;
this.dataForm.startTime = val.startTime || undefined;
this.dataForm.endTime = val.endTime || undefined;
this.dataForm.remark = val.remark || undefined;
this.dataForm.daySpan = val.daySpan || 0;
this.dataForm.code = val.code || 1;
},
timeFun(val) {
if (this.dataForm.startTime && this.dataForm.endTime) {
if (this.dataForm.startTime > this.dataForm.endTime) {
this.dataForm.daySpan = 1
} else if (this.dataForm.startTime < this.dataForm.endTime) {
this.dataForm.daySpan = 0
} else {
if (val === 'start') {
this.dataForm.startTime = ''
} else {
this.dataForm.endTime = ''
}
this.$modal.msgWarning('班次开始时间和结束时间不能相同')
}
}
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false;
}
this.$emit('refreshTableData', this._pageIndex, this.dataForm);
});
},
},
};
</script>

View File

@@ -0,0 +1,622 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 15:07:24
* @LastEditors: zwq
* @LastEditTime: 2025-11-28 09:56:09
* @Description:
-->
<template>
<div class="app-container">
<div class="searchBarBox">
<el-form
:inline="true"
ref="searchBarForm"
:model="formInline"
class="searchBar">
<span class="blue-block" />
<el-form-item label="计划编号" prop="code">
<el-input
v-model="formInline.code"
clearable
size="small"
placeholder="请输入计划编号" />
</el-form-item>
<el-form-item label="计划名称" prop="name">
<el-input
v-model="formInline.name"
clearable
size="small"
placeholder="请输入计划名称" />
</el-form-item>
<el-form-item label="开始时间" prop="startDay">
<el-date-picker
v-model="formInline.startDay"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endDay">
<el-date-picker
v-model="formInline.endDay"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="部门" prop="deptId">
<dept-select
style="width: 200px"
ref="deptSelect"
@DeptId="setDeptId"></dept-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="formInline.status"
size="small"
clearable
placeholder="请选择状态">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
v-hasPermi="['base:group-scheduling-plan:query']"
@click="buttonClick({ btnName: 'search' })">
查询
</el-button>
</el-form-item>
<el-form-item>
<span
class="separateStyle"
v-hasPermi="['base:group-scheduling-plan:query']"></span>
</el-form-item>
<el-form-item>
<el-button size="small" @click="buttonClick({ btnName: 'reset' })">
重置
</el-button>
</el-form-item>
<el-form-item>
<span
class="separateStyle"
v-hasPermi="['base:group-scheduling-plan:create']"></span>
</el-form-item>
<el-form-item>
<el-button
type="success"
size="small"
:plain="true"
v-hasPermi="['base:group-scheduling-plan:create']"
@click="buttonClick({ btnName: 'add' })">
新增
</el-button>
</el-form-item>
<el-form-item>
<el-button
type="warning"
plain
size="small"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['base:group-scheduling-plan:export']">
导出
</el-button>
</el-form-item>
</el-form>
</div>
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData"
@emitFun="getDataList">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="270"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
:destroy-on-close="true"
append-to-body
width="60%">
<add-or-update
ref="addOrUpdate"
@setSN="setStepNum"
@refreshDataList="successSubmit"></add-or-update>
<template #footer>
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button
v-if="stepNum > 1"
size="small"
class="btnTextStyle"
@click="handleConfirm('up')">
上一步
</el-button>
<el-button
size="small"
class="btnTextStyle"
@click="handleCancel">
取消
</el-button>
<el-button
v-if="stepNum == 3"
type="primary"
class="btnTextStyle"
size="small"
plain
@click="successSubmit">
保存草稿
</el-button>
<el-button
type="primary"
class="btnTextStyle"
size="small"
@click="handleConfirm">
{{ stepNum < 3 ? '下一步' : '确认并执行' }}
</el-button>
</el-col>
</el-row>
</slot>
</template>
</base-dialog>
<base-dialog
:dialogTitle="'排班计划详情'"
:dialogVisible="detailVisible"
@cancel="detailCancel"
:before-close="detailCancel"
:destroy-on-close="true"
append-to-body
width="50%">
<detail ref="detailRef"></detail>
<template #footer>
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button
size="small"
class="btnTextStyle"
@click="detailCancel">
取消
</el-button>
</el-col>
</el-row>
</slot>
</template>
</base-dialog>
</div>
</template>
<script>
import AddOrUpdate from './add-or-updata';
import deptSelect from './../deptSelect.vue';
import basicPage from '@/mixins/basic-page';
import subSpan from './subSpan.vue';
import subStatus from './subStatus.vue';
import detail from './detail.vue';
import { parseTime } from '@/filter/code-filter';
import {
getGroupPlanPage,
deleteGroupPlan,
copyPlan,
disablePlan,
updateScheduleLater,
exportExcel,
} from '@/api/group/Schedule';
const tableProps = [
{
prop: 'code',
label: '计划编号',
width: 140,
},
{
prop: 'name',
label: '计划名称',
width: 100,
},
{
prop: 'startDay',
label: '开始时间',
filter: parseTime,
width: 150,
},
{
prop: 'endDay',
label: '结束时间',
filter: parseTime,
width: 150,
},
{
prop: 'shiftType',
label: '倒班方式',
filter: (val) => {
return val ? ['', '长白班', '两班倒', '三班倒'][val] : '-';
},
width: 110,
},
{
prop: 'shiftSustainedNum',
label: '同班次连排',
width: 110,
subcomponent: subSpan,
},
{
prop: 'deptName',
label: '部门',
},
{
prop: 'status',
label: '计划状态',
width: 110,
subcomponent: subStatus,
},
{
prop: 'createTime',
label: '创建时间',
filter: parseTime,
width: 150,
},
];
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getGroupPlanPage,
deleteURL: deleteGroupPlan,
},
tableProps,
tableBtn: [
this.$auth.hasPermi('base:group-scheduling-plan:update')
? {
type: 'edit',
btnName: '编辑',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 1,
},
],
},
}
: undefined,
this.$auth.hasPermi('base:group-scheduling-plan:delete')
? {
type: 'delete',
btnName: '删除',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 1,
},
],
},
}
: undefined,
this.$auth.hasPermi('base:group-scheduling-plan:query')
? {
type: 'detail',
btnName: '查看',
showParam: {
type: '&',
data: [
{
type: 'unequal',
name: 'status',
value: 1,
},
],
},
}
: undefined,
this.$auth.hasPermi('base:group-scheduling-plan:delete')
? {
type: 'cancel',
btnName: '作废',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 2,
},
],
},
}
: undefined,
this.$auth.hasPermi('base:group-holiday:update')
? {
type: 'sync',
btnName: '同步节假日',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 2,
},
{
type: 'equal',
name: 'updateFlag',
value: true,
},
],
},
}
: undefined,
this.$auth.hasPermi('base:group-scheduling-plan:create')
? {
type: 'copy',
btnName: '复制',
}
: undefined,
].filter((v) => v),
tableData: [],
options: [
{
value: '1',
label: '草稿',
},
{
value: '2',
label: '已确认',
},
{
value: '3',
label: '已作废',
},
],
formInline: {
code: null,
name: null,
startDay: null,
endDay: null,
deptId: null,
status: null,
},
stepNum: 1, // 新增编辑时当前第几步
detailVisible: false,
// 导出遮罩层
exportLoading: false,
};
},
components: {
AddOrUpdate,
deptSelect,
detail,
},
created() {},
methods: {
buttonClick(val) {
switch (val.btnName) {
case 'search':
if (this.formInline.startDay > this.formInline.endDay) {
this.$message('开始时间不得晚于结束时间');
return;
}
this.listQuery = {
pageNo: 1,
pageSize: 20,
total: 1,
...this.formInline,
};
this.getDataList();
break;
case 'reset':
this.$refs.searchBarForm.resetFields();
this.formInline.name = null;
this.formInline.code = null;
this.formInline.deptId = null;
this.$refs.deptSelect.clear();
this.formInline.status = null;
this.formInline.startDay = null;
this.formInline.endDay = null;
this.listQuery = {
pageSize: 20,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
case 'add':
this.addOrEditTitle = '添加排班计划';
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init();
});
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
setDeptId(val) {
this.formInline.deptId = val;
},
setStepNum(val) {
this.stepNum = val;
},
successSubmit() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
this.stepNum = 1;
this.getDataList();
},
// dialog取消
handleCancel() {
this.$refs.addOrUpdate.cancelStep();
},
handleConfirm(val) {
if (val == 'up') {
this.$refs.addOrUpdate.upSubmit();
} else {
this.$refs.addOrUpdate.nextSubmit();
}
},
//tableBtn点击
handleClick(val) {
if (val.type === 'edit') {
this.addOrUpdateVisible = true;
this.addOrEditTitle = '编辑';
this.$nextTick(() => {
this.stepNum = 3;
this.$refs.addOrUpdate.init(val.data.id, true);
});
} else if (val.type === 'delete') {
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex);
} else if (val.type === 'detail') {
this.detailVisible = true;
this.$nextTick(() => {
this.$refs.detailRef.init(val.data.id);
});
} else if (val.type === 'cancel') {
disablePlan(val.data.id).then((res) => {
this.$modal.msgSuccess('作废成功');
this.getDataList();
});
} else if (val.type === 'sync') {
this.$confirm(
'当前节假日包含尚未同步的节假日变更,是否立即将上述节假日同步更新到排班计划?',
'同步节假日',
{
confirmButtonText: '确认同步',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
updateScheduleLater({
planId: val.data.id,
logId: val.data.updateLogId,
}).then((res) => {
this.$modal.msgSuccess('同步节假日成功');
this.getDataList();
});
})
.catch((res) => {
this.getDataList();
this.$message({
type: 'info',
message: '已取消',
});
});
} else if (val.type === 'copy') {
copyPlan(val.data.id).then((res) => {
this.$modal.msgSuccess('复制成功');
this.getDataList();
});
}
},
detailCancel() {
this.detailVisible = false;
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.formInline };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal
.confirm('是否确认导出所有数据项?')
.then(() => {
this.exportLoading = true;
return exportExcel(params);
})
.then((response) => {
this.$download.excel(response, '排班计划.xls');
this.exportLoading = false;
})
.catch(() => {});
},
},
};
</script>
<style scope>
.searchBarBox {
width: 100%;
position: relative;
margin-bottom: 8px;
}
.searchBarBox::after {
content: '';
display: block;
clear: both;
}
.searchBar .blue-block {
display: inline-block;
float: left;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 12px;
}
.searchBar .el-form-item {
margin-bottom: 4px;
}
.searchBar .separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #e8e8e8;
vertical-align: middle;
}
.searchBar .vue-treeselect__control {
height: 32px !important;
line-height: 32px !important;
margin: 4px 0;
}
body .el-dialog__header {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
padding: 13px 24px;
border-bottom: 1px solid #e9e9e9;
}
body .el-dialog__header .titleStyle::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
position: relative;
top: 2px;
}
</style>

View File

@@ -0,0 +1,36 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-10-21 13:54:52
* @Description:
-->
<template>
<span>
<el-tag
v-if="injectData.work"
size="small"
:type="['', 'success', 'warning'][injectData.sort]">
{{ injectData[injectData.prop] }}
</el-tag>
<el-tag v-else effect="dark" size="small" type="info">
{{ injectData[injectData.prop] }}
</el-tag>
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -0,0 +1,33 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-10-20 10:13:26
* @Description:
-->
<template>
<div>
<div>
{{ injectData.name.split('/')[0] }}
</div>
<div>
{{ injectData.name.split('/')[1] }}
</div>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -0,0 +1,44 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:40:08
* @LastEditors: zwq
* @LastEditTime: 2025-11-04 16:08:57
* @Description:
-->
<template>
<div>
<el-button type="text" size="mini" @click="moveUp()" style="display:inline-block"></el-button>
<el-button type="text" size="mini" @click="moveDown()" style="display:inline-block;float:right"></el-button>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {
moveUp() {
const val = {
type: 'up',
index: this.injectData._pageIndex - 1,
};
this.$emit('emitData', val);
},
moveDown() {
const val = {
type: 'down',
index: this.injectData._pageIndex - 1,
};
this.$emit('emitData', val);
},
},
};
</script>

View File

@@ -0,0 +1,33 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-11-04 10:54:19
* @Description:
-->
<template>
<span>
{{
(injectData.shiftSustainedNum?injectData.shiftSustainedNum:'') +
(injectData.shiftSustainedType
? ['', '日', '周', '月', '季'][injectData.shiftSustainedType]
: '')
}}
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -0,0 +1,31 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:40:08
* @LastEditors: zwq
* @LastEditTime: 2025-10-13 16:43:11
* @Description:
-->
<template>
<el-tag
v-if="injectData.status"
size="medium"
:type="['', '', 'success', 'warning'][injectData.status]">
{{ ['', '草稿', '已确认', '已作废'][injectData.status] }}
</el-tag>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -0,0 +1,63 @@
<template>
<treeselect
v-model="deptId"
:options="deptOptions"
:show-count="true"
sise="small"
ref="treeselect"
placeholder="请选择归属部门"
@input="setId"
:normalizer="normalizer" />
</template>
<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { listSimpleDepts } from '@/api/system/dept';
export default {
components: { Treeselect },
data() {
return {
deptId: undefined,
deptOptions: undefined,
defaultProps: {
children: 'children',
label: 'name',
},
};
},
created() {
this.getTreeselect();
},
methods: {
/** 查询部门下拉树结构 */
getTreeselect() {
listSimpleDepts().then((response) => {
// 处理 deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, 'id'));
});
},
// 子组件返回id
setId(val) {
this.$emit('DeptId', val);
},
// 父组件赋值id
setID(id) {
this.deptId = id;
},
clear() {
this.$refs.treeselect.clear();
},
// 格式化部门的下拉框
normalizer(node) {
return {
id: node.id,
label: node.name,
children: node.children,
};
},
},
};
</script>

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