Compare commits

...

19 Commits

Author SHA1 Message Date
‘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
zwq
bbd9972761 ry-bug 2025-03-10 16:33:55 +08:00
zwq
8e9b2f6444 更新 2025-02-27 13:54:28 +08:00
zwq
c83a7afadb 更新 2025-02-24 14:10:34 +08:00
zwq
b43876fe67 更新 2025-02-19 14:13:47 +08:00
zwq
f143c5e2d9 . 2025-01-16 08:34:17 +08:00
zwq
0b03e6d44b 更新 2025-01-15 13:35:15 +08:00
zwq
19dbe38458 更新 2025-01-10 15:07:05 +08:00
zwq
43ba33062b 更新 2024-11-29 16:42:13 +08:00
zwq
ca390fd764 更新汝阳bug 2024-11-26 16:51:07 +08:00
161 changed files with 35787 additions and 11592 deletions

View File

@@ -1,7 +1,7 @@
###
# @Author: Do not edit
# @Date: 2023-08-29 09:40:39
# @LastEditTime: 2024-09-10 14:43:39
# @LastEditTime: 2024-11-25 14:31:39
# @LastEditors: zwq
# @Description:
###
@@ -9,13 +9,11 @@
ENV = 'development'
# 页面标题
VUE_APP_TITLE = 成本管理系统
VUE_APP_TITLE = 智能监控分析系统
# 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
# VUE_APP_BASE_API = 'http://192.168.1.40:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
VUE_APP_BASE_API = 'http://172.16.33.65:48082'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@@ -2,14 +2,14 @@
# @Author: zwq
# @Date: 2024-03-27 15:49:55
# @LastEditors: zwq
# @LastEditTime: 2024-09-10 15:19:19
# @LastEditTime: 2024-10-30 11:08:47
# @Description:
###
# 生产环境配置
ENV = 'production'
# 页面标题
VUE_APP_TITLE = 成本管理系统
VUE_APP_TITLE = 智能监控分析系统
# 芋道管理系统/生产环境
# VUE_APP_BASE_API = '/prod-api'

View File

@@ -6,7 +6,7 @@
"license": "MIT",
"scripts": {
"local": "vue-cli-service serve --mode local",
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --mode dev",
"dev": "vue-cli-service serve --mode dev",
"front": "vue-cli-service serve --mode front",
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode prod",
"build:stage": "vue-cli-service build --mode stage",
@@ -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

@@ -1,3 +1,10 @@
/*
* @Author: zwq
* @Date: 2024-10-29 09:47:40
* @LastEditors: zwq
* @LastEditTime: 2025-02-26 16:27:48
* @Description:
*/
import request from '@/utils/request'
// 创建实时数据采集配置
@@ -52,3 +59,11 @@ export function exportEquipmentPlcExcel(query) {
responseType: 'blob'
})
}
// 获得code
export function getCode() {
return request({
url: '/base/equipment-group/getCode',
method: 'get'
})
}

View File

@@ -1,3 +1,10 @@
/*
* @Author: zwq
* @Date: 2024-10-29 09:47:40
* @LastEditors: zwq
* @LastEditTime: 2025-02-12 09:25:11
* @Description:
*/
import request from '@/utils/request'
// 获得工厂产线工段设备树形结构
export function getTree() {

View File

@@ -51,6 +51,13 @@ export function getCode() {
})
}
// 获得可用的班次列表
export function listClassesEnabled() {
return request({
url: '/base/group-classes/listEnable',
method: 'get'
})
}
// 导出班次基础信息 Excel
export function exportGroupClassesExcel(query) {
return request({

View File

@@ -0,0 +1,125 @@
import request from '@/utils/request'
// 创建排班计划配置基础信息
export function createGroupPlan(data) {
return request({
url: '/base/group-scheduling-plan/create',
method: 'post',
data: data
})
}
// 更新排班计划配置基础信息
export function updateGroupPlan(data) {
return request({
url: '/base/group-scheduling-plan/update',
method: 'put',
data: data
})
}
// 删除排班计划配置基础信息
export function deleteGroupPlan(id) {
return request({
url: '/base/group-scheduling-plan/delete?id=' + id,
method: 'delete'
})
}
// 获得排班计划配置基础信息
export function getGroupPlan(id) {
return request({
url: '/base/group-scheduling-plan/get?id=' + id,
method: 'get'
})
}
// 获得排班计划配置基础信息分页
export function getGroupPlanPage(query) {
return request({
url: '/base/group-scheduling-plan/page',
method: 'get',
params: query
})
}
// 获得所有排班计划列表
export function groupPlanList() {
return request({
url: '/base/group-scheduling-plan/listAll',
method: 'get'
})
}
// 获得排班计划相关班组列表
export function groupPlanTeamList(id) {
return request({
url: '/base/group-scheduling-plan-team/teamListByPlanId?planId=' + id,
method: 'get'
})
}
// 获得排班计划相关班次列表
export function groupPlanClassesList(id) {
return request({
url: '/base/group-scheduling-plan-classes/classesListByPlanId?planId=' + id,
method: 'get'
})
}
// 获取code
export function getCode() {
return request({
url: '/base/group-scheduling-plan/getCode',
method: 'get'
})
}
// 导出排班计划配置基础信息 Excel
export function exportGroupPlanExcel(query) {
return request({
url: '/base/group-scheduling-plan/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 获得产线工段树形结构
export function getGroupPlanTree() {
return request({
url: '/base/group-scheduling-plan/getLineSectionTree',
method: 'get'
})
}
// 创建排班计划产线工段
export function createGroupPlanLine(data) {
return request({
url: '/base/group-scheduling-plan-line-section/createPlanLineSection',
method: 'post',
data: data
})
}
// 更新排班计划产线工段
export function updateGroupPlanLine(data) {
return request({
url: '/base/group-scheduling-plan-line-section/updatePlanLineSection',
method: 'put',
data: data
})
}
// 获得排班计划配置基础信息
export function getGroupPlanLine(id) {
return request({
url: '/base/group-scheduling-plan-line-section/getLineSectionByPlanId?planId=' + id,
method: 'get'
})
}
// 获得当前登录用户所在部门id
export function getLoginUserDeptId() {
return request({
url: '/base/group-scheduling-plan-line-section/getLoginUserDeptId',
method: 'get'
})
}

View File

@@ -0,0 +1,60 @@
import request from '@/utils/request'
// 创建排班规则基础信息
export function createGroupRule(data) {
return request({
url: '/base/group-scheduling-rule/create',
method: 'post',
data: data
})
}
// 作废排班规则
export function disableGroupRule(id) {
return request({
url: '/base/group-scheduling-rule/disable?id=' + id,
method: 'post',
})
}
// 更新排班规则基础信息
export function updateGroupRule(data) {
return request({
url: '/base/group-scheduling-rule/update',
method: 'put',
data: data
})
}
// 删除排班规则基础信息
export function deleteGroupRule(id) {
return request({
url: '/base/group-scheduling-rule/delete?id=' + id,
method: 'delete'
})
}
// 获得排班规则基础信息
export function getGroupRule(id) {
return request({
url: '/base/group-scheduling-rule/get?id=' + id,
method: 'get'
})
}
// 获得排班规则基础信息分页
export function getGroupRulePage(query) {
return request({
url: '/base/group-scheduling-rule/page',
method: 'get',
params: query
})
}
// 导出排班规则基础信息 Excel
export function exportGroupRuleExcel(query) {
return request({
url: '/base/group-scheduling-rule/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

View File

@@ -58,3 +58,49 @@ export function listEnabled() {
method: 'get'
})
}
// 获得班组组员信息分页
export function groupTeamPage(query) {
return request({
url: '/base/group-team-det/page',
method: 'get',
params: query
})
}
// 获得班组组员信息
export function groupTeamDet(query) {
return request({
url: '/base/group-team-det/get',
method: 'get',
params: query
})
}
// 创建班组组员信息
export function teamDetCreate(data) {
return request({
url: '/base/group-team-det/create',
method: 'post',
data: data
})
}
// 更新班组组员信息
export function teamDetUpdate(data) {
return request({
url: '/base/group-team-det/update',
method: 'put',
data: data
})
}
// 删除班组组员信息
export function teamDetDelete(query) {
return request({
url: '/base/group-team-det/delete',
method: 'delete',
params: query
})
}

View File

@@ -8,7 +8,14 @@ export function getPreset(query) {
params: query
})
}
// 获取某月预排班
export function getScheduling(query) {
return request({
url: '/base/group-team-scheduling/getScheduling',
method: 'get',
params: query
})
}
// 批量创建-更新排班信息
export function createOrUpdateList(data) {
return request({
@@ -25,4 +32,23 @@ export function autoSet(query) {
method: 'get',
params: query
})
}
}
// 获得排班信息分页
export function schedulingPage(query) {
return request({
url: '/base/group-team-scheduling/page',
method: 'get',
params: query
})
}
// 导出Excel
export function exportSchedulingExcel(query) {
return request({
url: '/base/group-team-scheduling/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

26
src/api/base/worker.js Normal file
View File

@@ -0,0 +1,26 @@
import request from '@/utils/request'
// 获得所有员工列表
export function getWorkerList() {
return request({
url: '/base/core-worker/listAll',
method: 'get'
})
}
// 获得员工
export function getWorker(query) {
return request({
url: '/base/core-worker/get',
method: 'get',
params: query
})
}
// 获得该班组其他可选组员列表(除去现有组员)
export function otherWorkerList(query) {
return request({
url: '/base/group-team-det/otherWorkerList',
method: 'get',
params: query
})
}

View File

@@ -1,8 +1,8 @@
/*
* @Author: zhp
* @Date: 2023-09-12 14:07:04
* @LastEditTime: 2023-09-13 09:53:45
* @LastEditors: zhp
* @LastEditTime: 2025-01-08 15:47:17
* @LastEditors: zwq
* @Description:
*/
import request from '@/utils/request'
@@ -22,3 +22,27 @@ export function getCT(data) {
data: data
})
}
// 获取产线平衡分析数据new
export function getNewCTNow(data) {
return request({
url: '/analysis/production-analysis/getNewCTNow',
method: 'post',
data: data,
});
}
// 获取产线平衡分析数据趋势图new
export function getNewCTCharts(data) {
return request({
url: '/analysis/production-analysis/getNewCTCharts',
method: 'post',
data: data
})
}
// 获取产线平衡分析数据设备listnew
export function getNewCTDet(data) {
return request({
url: '/analysis/production-analysis/getNewCTDet',
method: 'post',
data:data
});
}

View File

@@ -58,3 +58,12 @@ export function exportFactoryExcel(query) {
responseType: 'blob'
})
}
// 获取产线设备状态
export function getLineEqStatus(data) {
return request({
url: '/base/production-line/getLineEqStatus',
method: 'post',
data: data
})
}

View File

@@ -0,0 +1,28 @@
import request from '@/utils/request'
// 切换工艺
export function switchLineBindProcess(data) {
return request({
url: '/base/line-bind-process/switch',
method: 'put',
data: data
})
}
// 获得产线工艺目前生产工艺
export function getLineBindProcessPage(query) {
return request({
url: '/base/line-bind-process/nowList',
method: 'get',
params: query
})
}
// 获得产线工艺log分页
export function getLineBindProcessLogPage(query) {
return request({
url: '/base/line-bind-process/logPage',
method: 'get',
params: query
})
}

View File

@@ -16,6 +16,14 @@ export function switchLineBindProduct(data) {
data: data
})
}
// 切换产线是否可以自动
export function switchAutoProduct(data) {
return request({
url: '/base/line-bind-product/switchAuto',
method: 'put',
data: data
})
}
// 更新产线目前生产产品表 主要为更新
export function updateLineBindProduct(data) {
return request({

View File

@@ -1,9 +1,9 @@
/*
* @Author: Do not edit
* @Date: 2023-09-12 09:44:53
* @LastEditTime: 2023-09-13 16:11:41
* @LastEditors: DY
* @Description:
* @LastEditTime: 2025-01-07 09:57:36
* @LastEditors: zwq
* @Description:
*/
import request from '@/utils/request'
@@ -17,9 +17,79 @@ export function getPdlAutoReport(data) {
}
// 获得所有工厂产线列表
export function getPdList() {
export function getPdList(id) {
return request({
url: '/base/production-line/listAll',
url: '/base/production-line/listAll' + (id ? '?id=' + id : ''),
method: 'get'
})
}
}
// 获得产线自动报表
export function getLineAuto(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNew',
method: 'post',
data: data
})
}
// 获得产品自动报表
export function getProductAuto(data) {
return request({
url: '/monitoring/production-monitor/getProcessAutoReportNew',
method: 'post',
data: data
})
}
export function getPdlAutoReportNewSearchNow(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow',
method: 'post',
data: data,
timeout: 60000,
});
}
// 班组自动报表分页
export function getTeamReportPage(data) {
return request({
url: '/monitoring/team-auto-report/page',
method: 'post',
data: data
})
}
// 班组自动报表分页详细
export function getTeamReportPageDet(id) {
return request({
url: '/monitoring/team-auto-report/pageDet?id=' + 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

@@ -1,9 +1,9 @@
/*
* @Author: Do not edit
* @Date: 2023-09-12 09:44:53
* @LastEditTime: 2023-09-14 10:25:46
* @LastEditors: DY
* @Description:
* @LastEditTime: 2025-03-03 10:43:34
* @LastEditors: zwq
* @Description:
*/
import request from '@/utils/request'
@@ -22,4 +22,22 @@ export function getPdList() {
url: '/base/production-line/listAll',
method: 'get'
})
}
}
// 产线统计数据查询-历史
export function getPdlAutoReportNewSearch(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNewSearch',
method: 'post',
data: data
})
}
// 产线统计数据查询-当前
export function getPdlAutoReportNewSearchNow(data) {
return request({
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow',
method: 'post',
data: data,
timeout: 60000,
})
}

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',
});
}

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

@@ -0,0 +1,75 @@
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 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',
})
}

View File

@@ -0,0 +1,47 @@
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 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,51 @@
/*
* @Author: zwq
* @Date: 2025-10-18 21:24:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-18 23:07:37
* @Description:
*/
import request from '@/utils/request'
// 获得节假日基础信息分页
export function deptHolidayList(query) {
return request({
url: '/base/group-holiday/page',
method: 'get',
params: query
})
}
// 创建节假日基础信息
export function createHoliday(data) {
return request({
url: '/base/group-holiday/create',
method: 'post',
data: data
})
}
// 更新节假日基础信息
export function updateHoliday(data) {
return request({
url: '/base/group-holiday/update',
method: 'put',
data: data
})
}
// 删除
export function deleteHolidayn(id) {
return request({
url: '/base/group-holiday/delete?id=' + id,
method: 'delete'
})
}
// 获得节假日变动日志分页
export function deptHolidayLogList(query) {
return request({
url: '/base/group-holiday-log/page',
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: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@@ -1,4 +1,4 @@
<!--
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
@@ -92,13 +92,13 @@
{{ 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)" />
@delete="handleDeleteFile(file)"
@Preview="handlePreview(file)" />
</div>
</el-form-item>
</el-col>
@@ -138,6 +138,9 @@ const uploadedFile = {
handleDelete() {
this.$emit('delete', this.file);
},
handlePreview() {
this.$emit('Preview', this.file);
},
},
mounted() {},
render: function (h) {
@@ -156,7 +159,7 @@ const uploadedFile = {
cursor: 'pointer',
display: 'inline-block',
}}>
{this.file.fileName}
<el-button onClick={this.handlePreview}>{this.file.fileName}</el-button>
<el-button
type="text"
icon="el-icon-close"
@@ -256,6 +259,20 @@ export default {
resetFields(args) {
return this.$refs.form.resetFields(args);
},
async handlePreview(file) {
const data = await this.$axios({
url: file.fileUrl,
method: 'get',
responseType: 'blob',
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([data]));
link.download = file.fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(link.href);
},
// getCode
async getCode(url) {
const response = await this.$axios(url);
@@ -355,7 +372,9 @@ export default {
if (!promiseList.length) this.formLoading = false;
},
// 上传成功的特殊处理
beforeUpload() {},
beforeUpload(file) {
console.log(file)
},
// 上传前的验证规则可通过 bind 属性传入
handleUploadSuccess(response, file, fileList) {
this.form.files.push({

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

@@ -0,0 +1,20 @@
export default {
data() {
return {
tableH: this.tableHeight(260),
};
},
created() {
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
window.addEventListener('resize', this._setTableHeight);
},
destroyed() {
window.removeEventListener('resize', this._setTableHeight);
},
methods: {
_setTableHeight() {
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
// this.tableH = this.tableHeight(260);
},
},
};

View File

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

View File

@@ -86,10 +86,11 @@ export const DICT_TYPE = {
// ============== PRODUCT - 产品模块 =============
UNIT_DICT: 'unit_dict',
PRODUCT_TYPE: 'product_type',
PROCESS_TYPE: 'process_type',
// ============== ENERGY - 能源模块 =============
ENERGY_UNIT: 'energy_unit',
// ============== ENERGY - 能源模块 =============
EQU_ALARM_LEVEL: 'equ_alarm_level',
MONITOR_INDEX_TYPE: 'monitor_index_type',

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: dialogForm.vue
author: liubin
date: 2023-09-11 15:55:13
@@ -71,14 +71,14 @@
</el-col>
<el-col :span="12">
<el-form-item label="工段排序" prop="sort">
<el-form-item label="工段设备排序" prop="sort">
<el-input-number
v-model="dataForm.sort"
filterable
min="0"
max="100"
@change="$emit('update', dataForm)"
placeholder="请输入工段排序" />
placeholder="请输入工段设备排序" />
</el-form-item>
</el-col>
</el-row>
@@ -112,6 +112,7 @@
{ label: '无类型', value: 0 },
{ label: '进口统计', value: 1 },
{ label: '出口统计', value: 2 },
{ label: '进出口计数', value: 3 },
]"
:key="opt.value"
:label="opt.label"

View File

@@ -4,7 +4,8 @@
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
@@ -52,6 +53,8 @@ import {
getEquipmentBindSectionPage,
exportEquipmentBindSectionExcel,
} from '@/api/base/equipmentBindSection';
import { getPdList } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import DialogForm from './dialogForm.vue';
@@ -61,7 +64,7 @@ export default {
mixins: [basicPageMixin],
data() {
return {
searchBarKeys: ['workshopSectionId', 'equipmentName'],
searchBarKeys: ['factoryId','productionLineId','workshopSectionId', 'equipmentName'],
tableBtn: [
this.$auth.hasPermi('base:equipment-bind-section:update')
? {
@@ -84,8 +87,9 @@ export default {
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'productionLine', label: '产线名称' },
{ prop: 'workshopSection', label: '工段名称' },
{ prop: 'factoryName', label: '工厂' },
{ prop: 'productionLine', label: '产线' },
{ prop: 'workshopSection', label: '工段' },
{ prop: 'equipment', label: '设备名称' },
{ prop: 'sort', label: '工段中排序' },
{
@@ -98,7 +102,7 @@ export default {
prop: 'sectionDataType',
label: '工段数据类型',
filter: (val) =>
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
val != null ? ['无类型', '进口计数', '出口计数', '进出口计数'][val] : '-',
},
// {
// action: 'show-alert',
@@ -129,6 +133,20 @@ export default {
// },
],
searchBarFormConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'productionLineId',
multiple: true,
},
{
type: 'select',
label: '工段',
@@ -209,8 +227,8 @@ export default {
label: '产线数据类型',
options: [
{ label: '无类型', value: 0 },
{ label: '进口计', value: 1 },
{ label: '出口计', value: 2 },
{ label: '进口计', value: 1 },
{ label: '出口计', value: 2 },
],
prop: 'lineDataType',
},
@@ -219,8 +237,9 @@ export default {
label: '工段数据类型',
options: [
{ label: '无类型', value: 0 },
{ label: '进口计', value: 1 },
{ label: '出口计', value: 2 },
{ label: '进口计', value: 1 },
{ label: '出口计', value: 2 },
{ label: '进出口计数', value: 3 },
],
prop: 'sectionDataType',
},
@@ -234,6 +253,9 @@ export default {
pageSize: 10,
workshopSectionId: null,
equipmentId: null,
equipmentName: null,
factoryId: null,
productionLineId: [],
},
// 表单参数
form: {},
@@ -242,6 +264,7 @@ export default {
created() {
this.getList();
this.initWorksection();
this.getPdLineList();
},
methods: {
/** 准备工段数据 */
@@ -251,7 +274,7 @@ export default {
method: 'get',
});
if (code == 0) {
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
this.searchBarFormConfig[2].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
@@ -259,6 +282,51 @@ export default {
});
}
},
getPdLineList() {
getPdList().then((res) => {
this.searchBarFormConfig[1].selectOptions = res.data || [];
});
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.searchBarFormConfig[0].selectOptions = res.data.list || [];
});
},
handleSearchBarChanged({ param, value }) {
this.queryParams.productionLineId = [];
this.$refs['search-bar'].formInline.productionLineId = undefined;
getPdList(value).then((res) => {
this.searchBarFormConfig[1].selectOptions = res.data || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.queryParams.pageNo = 1;
this.queryParams.pageSize = 10;
this.queryParams.name = val.name;
this.queryParams.workshopSectionId = val.workshopSectionId || undefined;
this.queryParams.equipmentName = val.equipmentName || undefined;
this.queryParams.factoryId = val.factoryId || undefined;
this.queryParams.productionLineId = val.productionLineId || [];
this.handleQuery();
break;
case 'add':
this.handleAdd();
break;
case 'export':
this.handleExport();
break;
case 'reset':
this.$refs['search-bar'].resetForm();
this.resetQuery();
break;
default:
console.log(val);
}
},
/** 查询列表 */
getList() {
this.loading = true;

View File

@@ -0,0 +1,109 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-02-26 16:37:29
* @Description:
-->
<template>
<el-row :gutter="20">
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px">
<el-col :span="12">
<el-form-item label="关联表名" prop="plcTableName">
<el-input
v-model="dataForm.plcTableName"
clearable
placeholder="请输入关联表名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入编码" />
</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="enName">
<el-input
v-model="dataForm.enName"
clearable
placeholder="请输入英文名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否采集" prop="collection">
<el-switch
v-model="dataForm.collection"
:active-value="1"
:inactive-value="0"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
clearable
placeholder="请输入描述" />
</el-form-item>
</el-col>
</el-form>
</el-row>
</template>
<script>
import basicAdd from '@/mixins/basic-add';
import {
createEquipmentPlc,
updateEquipmentPlc,
getEquipmentPlc,
getCode,
} from '@/api/base/equipmentPlc';
export default {
mixins: [basicAdd],
data() {
return {
urlOptions: {
isGetCode: true,
codeURL: getCode,
createURL: createEquipmentPlc,
updateURL: updateEquipmentPlc,
infoURL: getEquipmentPlc,
},
dataForm: {
id: undefined,
plcTableName: undefined,
code: undefined,
name: undefined,
enName: undefined,
collection: 1,
description: undefined,
},
dataRule: {
plcTableName: [
{ required: true, message: '关联表名不能为空', trigger: 'blur' },
],
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '标识不能为空', trigger: 'blur' }],
},
};
},
methods: {},
};
</script>

View File

@@ -1,59 +1,53 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
<!-- 列表 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
ref="pageTable"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData"
@emitFun="handleEmitFun">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
@clickBtn="handleClick" />
</base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 对话框(添加 / 修改) -->
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<base-dialog
:dialogTitle="title"
:dialogVisible="open"
width="700px"
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="50%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>
</base-dialog>
</div>
</template>
<script>
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { parseTime } from '@/filter/code-filter';
import {
createEquipmentPlc,
updateEquipmentPlc,
deleteEquipmentPlc,
getEquipmentPlc,
getEquipmentPlcPage,
exportEquipmentPlcExcel,
updateEquipmentPlc,
} from '@/api/base/equipmentPlc';
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
const switchBtn = {
name: 'SwitchBtn',
@@ -90,49 +84,45 @@ const switchBtn = {
);
},
};
const tableProps = [
{ prop: 'code', label: '编码', width: 220 },
{ prop: 'plcTableName', label: '关联表名' },
{ prop: 'name', label: '标识名称' },
{ prop: 'enName', label: '英文名称' },
{
prop: 'collection',
label: '是否采集',
subcomponent: switchBtn,
},
{ prop: 'description', label: '描述' },
];
export default {
name: 'EquipmentPlc',
mixins: [basicPageMixin],
components: {},
mixins: [basicPage],
data() {
return {
tableKey: Math.random(),
searchBarKeys: ['name', 'plcTableName'],
urlOptions: {
getDataListURL: getEquipmentPlcPage,
deleteURL: deleteEquipmentPlc,
exportURL: exportEquipmentPlcExcel,
},
tableProps,
tableBtn: [
this.$auth.hasPermi('base:equipment-plc:update')
this.$auth.hasPermi(`base:equipment-plc:update`)
? {
type: 'edit',
btnName: '修改',
btnName: '编辑',
}
: undefined,
this.$auth.hasPermi('base:equipment-plc:delete')
this.$auth.hasPermi(`base:equipment-plc:delete`)
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
tableProps: [
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{ prop: 'code', label: '编码' },
{ prop: 'plcTableName', label: '关联表名' },
{ prop: 'name', label: '标识名称' },
{ prop: 'enName', label: '英文名称' },
{
prop: 'collection',
label: '是否采集',
subcomponent: switchBtn,
},
{ prop: 'description', label: '描述' },
],
searchBarFormConfig: [
tableData: [],
formConfig: [
{
type: 'input',
label: '表名',
@@ -147,231 +137,86 @@ export default {
},
{
type: 'button',
btnName: '查询',
btnName: '搜索',
name: 'search',
color: 'primary',
},
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '重置',
// name: 'reset',
// },
{
type: 'separate',
},
{
// type: this.$auth.hasPermi('base:equipment-plc:create')
// ? 'button'
// : '',
type: 'button',
type: this.$auth.hasPermi('base:factory:create') ? 'button' : '',
btnName: '新增',
name: 'add',
plain: true,
color: 'success',
plain: true,
},
// {
// type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '',
// type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
// },
// {
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
// btnName: '导出',
// name: 'export',
// color: 'warning',
// },
],
rows: [
[
{
input: true,
label: '关联表名',
prop: 'plcTableName',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
// bind: {
// disabled: true, // some condition, like detail mode...
// }
},
{
input: true,
label: '编码',
prop: 'code',
url: '/base/equipment-group/getCode',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[
{
input: true,
label: '标识',
prop: 'name',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
// bind: {
// disabled: true, // some condition, like detail mode...
// }
},
{
input: true,
label: '英文名',
prop: 'enName',
},
],
[
{
switch: true,
label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
prop: 'collection',
value: 1,
bind: {
'active-value': 1,
'inactive-value': 0,
},
},
],
[
{
textarea: true,
label: '描述',
prop: 'description',
bind: {
placeholder: '请输入备注',
},
},
],
],
// 是否显示弹出
open: false,
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
plcTableName: null,
name: null,
},
// 表单参数
form: {},
};
},
created() {
this.getList();
components: {
AddOrUpdate,
},
created() {},
methods: {
/** 覆盖 handleEmitFun 的默认实现 */
handleEmitFun({ action, payload }) {
console.log(payload)
switch (action) {
case 'update-collect':
this.reset();
const tempForm = {};
Object.keys(this.form).forEach((key) => {
tempForm[key] = payload[key];
});
updateEquipmentPlc(tempForm).then((response) => {
updateEquipmentPlc(payload).then((response) => {
this.$modal.msgSuccess('修改成功');
this.open = false;
this.getList();
this.getDataList();
});
break;
}
},
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getEquipmentPlcPage(this.queryParams).then((response) => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
// this.tableKey = Math.random(); // method 1
});
},
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
plcTableName: undefined,
code: undefined,
name: undefined,
enName: undefined,
description: undefined,
collection: undefined,
};
this.resetForm('form');
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm');
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = '添加实时数据采集配置';
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id;
getEquipmentPlc(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = '修改实时数据采集配置';
});
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (!valid) {
return;
}
// 修改的提交
if (this.form.id != null) {
updateEquipmentPlc(this.form).then((response) => {
this.$modal.msgSuccess('修改成功');
this.open = false;
this.getList();
});
return;
}
// 添加的提交
createEquipmentPlc(this.form).then((response) => {
this.$modal.msgSuccess('新增成功');
this.open = false;
this.getList();
});
});
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id;
this.$modal
.confirm('是否确认删除实时数据采集配置编号为"' + id + '"的数据项?')
.then(function () {
return deleteEquipmentPlc(id);
})
.then(() => {
this.getList();
this.$modal.msgSuccess('删除成功');
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.queryParams };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal
.confirm('是否确认导出所有实时数据采集配置数据项?')
.then(() => {
this.exportLoading = true;
return exportEquipmentPlcExcel(params);
})
.then((response) => {
this.$download.excel(response, '实时数据采集配置.xls');
this.exportLoading = false;
})
.catch(() => {});
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.name = val.name;
this.listQuery.plcTableName = val.plcTableName;
this.getDataList();
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
case 'add':
this.addOrEditTitle = '新增';
this.addOrUpdateVisible = true;
this.addOrUpdateHandle();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
},
};

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2024-04-30 10:01:41
* @LastEditTime: 2025-02-25 16:11:14
* @Description:
-->
<template>

View File

@@ -0,0 +1,211 @@
<template>
<div
ref="lineChart"
:id="id"
:class="className"
:style="{ height: height, width: width, marginLeft: '10px' }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';
import { parseTime } from '../../mixins/code-filter';
const animationDuration = 1000;
export default {
name: 'lineChart',
mixins: [resize],
props: {
id: {
type: String,
default: 'chart',
},
className: {
type: String,
default: 'chart',
},
title: {
type: String,
default: '',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '300px',
},
barData: {
type: Object,
default: () => {},
},
},
data() {
return {
chart: null,
};
},
mounted() {
if (!this.chart) {
this.chart = echarts.init(this.$refs.lineChart);
this.$nextTick(() => {
this.initChart();
});
}
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
watch: {
barData: {
handler() {
if (this.chart) {
this.$nextTick(() => {
this.initChart();
});
} else {
this.$nextTick(() => {
this.chart = echarts.init(this.$refs.lineChart);
this.initChart();
});
}
},
deep: true,
immediate: true,
},
},
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: {
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: {
containLabel: true,
},
xAxis: {
type: 'category',
data: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')),
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '节拍 pcs/min',
min: 0,
axisLabel: {
formatter: '{value}',
},
},
],
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
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;
})
}
]
});
},
},
};
</script>

View File

@@ -0,0 +1,273 @@
<!--
* @Author: zwq
* @Date: 2023-08-24 14:47:58
* @LastEditors: zwq
* @LastEditTime: 2025-01-09 10:04:17
* @Description:
-->
<template>
<div>
<base-table
:page="1"
:limit="999"
v-loading="dataListLoading"
:table-props="tableProps"
max-height="400"
:table-data="tableData">
<method-btn
v-if="tableData.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<div v-if="eqChartData.length > 0" style="margin-top: 10px">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm1"
@headBtnClick="buttonClick" />
<div
ref="lineChart"
id="chart"
:style="{ height: '400px', width: '100%', marginLeft: '10px' }" />
</div>
</div>
</template>
<script>
import { getNewCTDet, getNewCTCharts } from '@/api/core/analysis/index';
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';
import { parseTime } from '../../mixins/code-filter';
const tableProps = [
{
prop: 'equipmentName',
label: '设备',
},
{
prop: 'size',
label: '规格',
showOverflowtooltip: true,
},
{
prop: 'process',
label: '产品工艺',
},
{
prop: 'standardCt',
label: '标准节拍pcs/min',
},
{
prop: 'ct',
label: '当前节拍pcs/min',
},
];
export default {
mixins: [resize],
data() {
return {
tableProps,
tableData: [],
tableBtn: [
{
type: 'eqChart',
btnName: '趋势图',
},
].filter((v) => v),
dataListLoading: false,
time: {},
eqChartData: [],
eqName: null,
equipmentId: null,
chart: null,
formConfig: [
{
type: 'datePicker',
label: '时间范围',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['00:00:00', '23:59:59'],
param: 'timeVal',
width: 350,
clearable: false,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
};
},
components: {},
created() {},
mounted() {},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
// 获取数据列表
init(lId, startTime, endTime) {
this.eqChartData = [];
this.time.startTime = startTime;
this.time.endTime = endTime;
this.dataListLoading = true;
getNewCTDet({ lineId: [lId], startTime, endTime }).then((response) => {
this.tableData = response.data;
this.dataListLoading = false;
});
},
handleClick(val) {
const data = {
...this.time,
equipmentId: val.data.equipmentId,
};
this.eqName = val.data.equipmentName;
this.equipmentId = val.data.equipmentId;
getNewCTCharts(data).then((response) => {
this.eqChartData = response.data;
this.$nextTick(() => {
this.$refs.searchBarForm1.formInline.timeVal = [
this.time.startTime,
this.time.endTime,
];
this.initChart();
});
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.time.startTime = val.timeVal ? val.timeVal[0] : undefined;
this.time.endTime = val.timeVal ? val.timeVal[1] : undefined;
const data = {
...this.time,
equipmentId: this.equipmentId,
};
getNewCTCharts(data).then((response) => {
this.eqChartData = response.data;
this.$nextTick(() => {
this.initChart();
});
});
break;
default:
console.log(val);
}
},
initChart() {
this.chart = echarts.init(this.$refs.lineChart);
const _this = this;
this.chart.setOption({
title: {
text: this.eqName
? '{space|}{tip|}{space|}{value|' + this.eqName + ' 节拍趋势图' + '}'
: '',
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: {
containLabel: true,
},
xAxis: {
type: 'category',
data: this.eqChartData[0].ct.map((item) => {
return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
}),
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '节拍',
min: 0,
interval: 20,
axisLabel: {
formatter: '{value} pcs/min',
},
},
],
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: '标准节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: this.eqChartData[0].ct.map((item) => {
return item.standardCt;
}),
},
{
name: '当前节拍',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + 'pcs/min';
},
},
data: this.eqChartData[0].ct.map((item) => {
return item.ct;
}),
},
],
});
},
},
};
</script>

View File

@@ -0,0 +1,296 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table
v-loading="dataListLoading"
:span-method="mergeColumnHandler"
:max-height="tableH"
:table-props="tableProps"
:table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
<balance-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
// import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import BalanceChart from '../balanceChart';
import { time } from 'echarts';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
// const tableProps = [
// // {
// // prop: 'lineName',
// // label: '产线',
// // align: 'center',
// // },
// // {
// // prop: 'sum',
// // label: '合计',
// // align: 'center',
// // },
// // {
// // prop: 'dynamicValue',
// // label: 'dynamicName',
// // align: 'center',
// // children:[
// // ]
// // }
// ];
export default {
components: {
BalanceChart,
},
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
getDataListURL: getCT,
},
tableProps: [],
dataListLoading: false,
tableData: [],
listQuery: {
// time: ''
endTime: undefined,
lineId: undefined,
startTime: undefined,
},
timeList: [],
spanArr: [],
xData: [],
yData: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: '',
multiple: false,
filterable: true,
},
{
type: 'datePicker',
label: '时间',
dateType: 'datetimerange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
width: 350,
param: 'time',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
};
},
created() {
this.getArr();
},
methods: {
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list;
});
});
},
setRowSpan(arr) {
let count = 0;
arr.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1;
this.spanArr.push(0);
} else {
count = index;
this.spanArr.push(1);
}
}
});
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
return [0, 0];
}
}
},
getData() {
// this.listQuery.lineId = '1672847052717821953'
// this.listQuery.startTime = '1693497600000';
// this.listQuery.endTime = '1693843200000';
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
console.log(res);
let arr = [
{
prop: 'sectionName',
label: '工段',
align: 'center',
},
{
prop: 'equName',
label: '设备',
align: 'center',
width: 150
},
];
let sectionArr = [];
res.data.data.forEach((ele, index) => {
let tempData = [];
let ggData = [];
let sbluData = [];
let sbsjData = [];
let cxluData = [];
let cxsjData = [];
ele.data.forEach((item, index) => {
item.children.forEach((params) => {
if (params.dynamicName === '生产规格') {
tempData[item.dynamicName + '_gg'] = params.dynamicValue;
ggData[index] = params.dynamicValue;
} else if (params.dynamicName === '设备理论速度') {
tempData[item.dynamicName + '_sblu'] = params.dynamicValue;
sbluData[index] = params.dynamicValue;
} else if (params.dynamicName === '设备实际速度') {
tempData[item.dynamicName + '_sbsj'] = params.dynamicValue;
sbsjData[index] = params.dynamicValue;
} else if (params.dynamicName === '产线理论速度') {
tempData[item.dynamicName + '_cxlu'] = params.dynamicValue;
cxluData[index] = params.dynamicValue;
} else if(params.dynamicName === '产线实际速度') {
tempData[item.dynamicName + '_cxsj'] = params.dynamicValue;
cxsjData[index] = params.dynamicValue;
}
});
});
const equipment = {
name: ele.equName,
ggData: ggData,
sbluData: sbluData,
sbsjData: sbsjData,
cxluData: cxluData,
cxsjData: cxsjData,
};
tempData['equName'] = ele.equName;
tempData['sectionName'] = ele.sectionName;
this.tableData.push(tempData);
const { sectionName } = tempData;
sectionArr.push(sectionName);
this.yData.push(equipment);
});
this.setRowSpan(sectionArr);
res.data.nameData.forEach((item) => {
this.timeList.push(item.name);
});
const timeArray = Array.from(new Set(this.timeList));
console.log(timeArray)
for (const times of timeArray) {
if (times !== '生产规格' && times !== '设备理论速度' && times !== '设备实际速度'
&& times !== '产线理论速度' && times !== '产线实际速度'
) {
const subprop = {
label: times,
align: 'center',
children: [
{ prop: times + '_gg', label: '生产规格', align: 'center' },
{ prop: times + '_sblu', label: '设备理论速度[片/min]', align: 'center' },
{ prop: times + '_sbsj', label: '设备实际速度[片/min]', align: 'center' },
{ prop: times + '_cxlu', label: '产线理论速度[片/min]', align: 'center' },
{ prop: times + '_cxsj', label: '产线实际速度[片/min]', align: 'center' },
],
};
arr.push(subprop);
this.xData.push(times);
}
}
this.tableProps = arr;
console.log(this.$refs)
this.$nextTick(()=>{
this.$refs.lineChart.initChart(this.xData, this.yData);
})
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) {
case 'search':
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.listQuery.lineId = val.lineIds;
this.listQuery.startTime = val.time
? String(new Date(val.time[0]).getTime())
: undefined;
this.listQuery.endTime = val.time
? String(new Date(val.time[1]).getTime())
: undefined;
if (val.time && val.lineIds) {
this.tableData = [];
this.xData = [];
this.yData = [];
this.tableProps = [];
this.spanArr = [];
this.timeList = [];
this.getData();
} else {
this.$message({
message: '请选择产线和时间',
type: 'warning',
});
}
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
default:
console.log(val);
}
},
},
};
</script>

View File

@@ -1,260 +1,302 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2025-01-09 10:27:53
* @LastEditors: zwq
* @Description:
-->
<template>
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
<balance-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<div v-if="showData.length">
<base-table
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="1"
:limit="999"
:table-data="showData">
<method-btn
v-if="showData.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<barChart
v-for="item in chartData"
:key="item.name + 'echart'"
style="margin-top: 50px"
height="600px"
:id="item.name + 'echart'"
:title="item.name + ' 节拍趋势图'"
:bar-data="item" />
</div>
<div v-else class="no-data-bg"></div>
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
close-on-click-modal
top="0"
width="50%">
<eq-detail ref="eqDetail" />
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button size="small" class="btnTextStyle" @click="handleCancel">
取消
</el-button>
</el-col>
</el-row>
</slot>
</base-dialog>
</div>
</template>
<script>
// import basicPage from '../../mixins/basic-page';
import eqDetail from './eq-detail';
import { parseTime } from '../../mixins/code-filter';
import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import BalanceChart from '../balanceChart'
import { time } from 'echarts';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
import { getPdList } from '@/api/core/monitoring/auto';
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
import { getFactoryPage } from '@/api/core/base/factory';
// import codeFilter from '../../mixins/code-filter'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import barChart from './BarChart.vue';
// const tableProps = [
// // {
// // prop: 'lineName',
// // label: '产线',
// // align: 'center',
// // },
// // {
// // prop: 'sum',
// // label: '合计',
// // align: 'center',
// // },
// // {
// // prop: 'dynamicValue',
// // label: 'dynamicName',
// // align: 'center',
// // children:[
// // ]
// // }
// ];
const tableProps = [
{
prop: 'factoryName',
label: '工厂',
},
{
prop: 'lineName',
label: '产线',
},
{
prop: 'size',
label: '规格',
showOverflowtooltip: true,
},
{
prop: 'process',
label: '产品工艺',
},
{
prop: 'edgeCt',
label: '磨边当前节拍pcs/min',
},
{
prop: 'temperCt',
label: '钢化当前节拍pcs/min',
},
{
prop: 'downCt',
label: '下片当前节拍pcs/min',
},
];
export default {
components: {
BalanceChart
},
// mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getCT,
},
tableProps: [],
dataListLoading: false,
tableData: [],
listQuery: {
// time: ''
endTime: undefined,
lineId:undefined,
startTime:undefined
},
timeList: [],
spanArr: [],
xData: [],
yData: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: '',
multiple: false,
filterable: true,
},
{
type: 'datePicker',
label: '时间',
dateType: 'datetimerange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
width: 350,
param: 'time',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
}
],
};
},
created() {
this.getArr();
},
methods: {
getArr() {
const params = {
page: 1,
limit: 500
}
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list
});
});
},
setRowSpan(arr) {
let count = 0
arr.forEach((item, index) => {
if(index === 0) {
this.spanArr.push(1)
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1
this.spanArr.push(0)
} else {
count = index
this.spanArr.push(1)
}
}
})
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
return [0, 0];
}
components: {
barChart,
eqDetail,
},
data() {
return {
urlOptions: {
getDataListURL: getNewCTNow,
},
listQuery: {
lineId: [],
},
fileName: '',
dataListLoading: false,
tableProps,
tableBtn: [
{
type: 'eq',
btnName: '详情',
},
].filter((v) => v),
showData: [],
tableData: [],
chartData: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineId',
multiple: true,
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['00:00:00', '23:59:59'],
param: 'timeVal',
width: 350,
clearable: false,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
// {
// type: 'separate',
// },
// {
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
// type: 'button',
// btnName: '导出',
// name: 'export',
// color: 'warning',
// },
],
addOrEditTitle: '',
addOrUpdateVisible: false,
};
},
created() {
// 获取当前时间
const now = new Date();
// 获取前一天的同一时间
const yesterday = new Date(now.getTime());
// 设置为00:00:00
yesterday.setHours(0, 0, 0, 0);
// 设置为23:59:59
const end = new Date(yesterday.getTime());
end.setHours(23, 59, 59, 59);
this.listQuery.startTime = yesterday.getTime();
this.listQuery.endTime = end.getTime();
this.$nextTick(() => {
this.$refs.searchBarForm.formInline.timeVal = [
yesterday.getTime(),
end.getTime(),
];
});
this.getDataList();
this.getPdLineList();
},
methods: {
handleExport() {
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;
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.lineId = val.lineId ? val.lineId : [];
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
getData() {
// this.listQuery.lineId = '1672847052717821953'
// this.listQuery.startTime = '1693497600000';
// this.listQuery.endTime = '1693843200000';
this.urlOptions.getDataListURL(this.listQuery).then(res => {
console.log(res)
let arr = [
{
prop: 'sectionName',
label: '工段',
align: 'center',
},
{
prop: 'equName',
label: '设备',
align: 'center',
}
]
let sectionArr= []
res.data.data.forEach((ele, index) => {
let tempData = []
let eqData = []
let plData = []
ele.data.forEach((item, index) => {
item.children.forEach(params => {
if (params.dynamicName === '设备CT') {
tempData[item.dynamicName + '_eq'] = params.dynamicValue
eqData[index] = params.dynamicValue
} else {
tempData[item.dynamicName + '_pl'] = params.dynamicValue
plData[index] = params.dynamicValue
}
})
})
const equipment = {
name: ele.equName,
eqData: eqData,
plData: plData
}
tempData['equName'] = ele.equName
tempData['sectionName'] = ele.sectionName
this.tableData.push(tempData)
const { sectionName } = tempData
sectionArr.push(sectionName)
this.yData.push(equipment)
console.log('看看equ', this.yData)
})
this.setRowSpan(sectionArr)
res.data.nameData.forEach(item => {
this.timeList.push(item.name)
})
const timeArray = Array.from(new Set(this.timeList))
for (const times of timeArray) {
if (times !== '设备CT' && times !== '产线CT') {
const subprop = {
label: times,
align: 'center',
children: [
{ prop: times + '_eq', label: '设备CT', align: 'center' },
{ prop: times + '_pl', label: '产线CT', align: 'center' }
]
}
arr.push(subprop)
this.xData.push(times)
}
}
this.tableProps = arr
console.log('表格横坐标', this.xData)
this.$refs.lineChart.initChart(this.xData, this.yData)
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) {
case 'search':
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.listQuery.lineId = val.lineIds
this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined;
if (val.time && val.lineIds) {
this.tableData = []
this.xData = []
this.yData = []
this.tableProps = []
this.spanArr = []
this.timeList = []
this.getData()
} else {
this.$message({
message: '请选择产线和时间',
type: 'warning'
});
}
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
default:
console.log(val);
}
},
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
this.tableData = response.data;
this.dataListLoading = false;
this.showData = this.tableData;
});
getNewCTCharts(this.listQuery).then((response) => {
this.chartData = response.data;
});
},
handleSearchBarChanged({ param, value }) {
this.listQuery.lineId = [];
this.$refs.searchBarForm.formInline.lineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
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
);
});
},
handleCancel() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
},
handleConfirm() {
this.handleCancel();
},
},
};
</script>

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zhp
* @Date: 2023-09-13 09:02:25
* @LastEditTime: 2023-10-08 16:36:37
* @LastEditors: DY
* @LastEditTime: 2024-11-26 15:52:29
* @LastEditors: zwq
* @Description:
-->
<template>
@@ -108,13 +108,28 @@ export default {
},
series: [
{
name: '设备CT',
data: dataList.eqData,
name: '生产规格',
data: dataList.ggData,
type: 'line',
},
{
name: '产线CT',
data: dataList.plData,
name: '设备理论速度',
data: dataList.sbluData,
type: 'line',
},
{
name: '设备实际速度',
data: dataList.sbsjData,
type: 'line',
},
{
name: '产线理论速度',
data: dataList.cxluData,
type: 'line',
},
{
name: '产线实际速度',
data: dataList.cxsjData,
type: 'line',
}
]

View File

@@ -1,18 +1,25 @@
<template>
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" />
<line-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:max-height="tableH"
:table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" />
<line-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</div>
</template>
<script>
@@ -20,7 +27,8 @@
import { parseTime } from '../../mixins/code-filter';
import { getYieldAnalysisPageData } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import lineChart from '../LineChart'
import lineChart from '../LineChart';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
// const tableProps = [
@@ -45,51 +53,52 @@ import lineChart from '../LineChart'
// ];
export default {
components: {
lineChart,
},
// mixins: [basicPage],
components: {
lineChart,
},
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
getDataListURL: getYieldAnalysisPageData,
getDataListURL: getYieldAnalysisPageData,
},
tableProps:[],
dataListLoading:false,
tableData: [],
listQuery: {
lineIds: [],
time: ''
},
dateLabelList: [],
optionArrUrl: [getProductionLinePage ],
tableProps: [],
dataListLoading: false,
tableData: [],
listQuery: {
lineIds: [],
time: '',
},
dateLabelList: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: '',
multiple:true,
param: 'lineIds',
defaultSelect: [],
multiple: true,
filterable: true,
width: 200,
},
{
type: 'datePicker',
label: '时间',
dateType: 'month',
format: 'yyyy-MM-dd',
format: 'yyyy-MM',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'time',
param: 'time',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
}
},
],
};
},
@@ -104,145 +113,147 @@ export default {
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list
// this.formConfig[0].defaultSelect = response.data.list[0].id
this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id)
this.formConfig[index].selectOptions = response.data.list;
// this.formConfig[0].defaultSelect = response.data.list[0].id
// this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id)
});
});
},
getData() {
// this.listQuery.lineIds = ['1672847052717821953']
// this.listQuery.productId = val.productId;
// this.listQuery.time = '1694486098000';
this.urlOptions.getDataListURL(this.listQuery).then(res => {
let arr = [
{
prop: 'lineName',
label: '产线',
fixed: 'left'
},
{
prop: 'sum',
label: '合计',
fixed: 'left'
},
{
prop: res.data ? res.data.nameData[0].name : undefined,
label: res.data ? res.data.nameData[0].name : undefined,
align: 'center',
children:[
},
getData() {
// this.listQuery.lineIds = ['1672847052717821953']
// this.listQuery.productId = val.productId;
// this.listQuery.time = '1694486098000';
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
let arr = [
{
prop: 'lineName',
label: '产线',
fixed: 'left',
},
{
prop: 'sum',
label: '合计[片]',
fixed: 'left',
},
{
prop: res.data ? res.data.nameData[0].name : undefined,
label: res.data ? res.data.nameData[0].name : undefined,
align: 'center',
children: [],
},
];
// console.log(res.data.nameData.slice(1))
let xData = [];
let yAllData = [];
let lineName = [];
if (res.data) {
let tempDateList = [];
res.data.nameData.forEach((date) => {
tempDateList.push(date.name);
});
this.dateLabelList = Array.from(new Set(tempDateList));
]
}
]
// console.log(res.data.nameData.slice(1))
let xData = []
let yAllData = []
let lineName = []
if (res.data) {
let tempDateList = []
res.data.nameData.forEach(date => {
tempDateList.push(date.name)
})
this.dateLabelList = Array.from(new Set(tempDateList))
this.dateLabelList.forEach((item) => {
if (item.indexOf('年') === -1) {
// 构造表头
const props = {
prop: item,
label: item,
};
arr[2].children.push(props);
this.dateLabelList.forEach(item => {
if (item.indexOf('年') === -1) {
// 构造表头
const props = {
'prop': item,
'label': item
}
arr[2].children.push(props)
// 构造echarts横坐标
xData.push(item);
}
});
// res.data.nameData.slice(1).forEach(item => {
// const props = {
// 'prop': item.name,
// 'label': item.name,
// 'align': 'center'
// }
// arr[2].children.push(props)
// })
let tableDataArr = [];
res.data.data.forEach((item) => {
let obj = {};
(obj.lineName = item.lineName),
(obj.sum = item.sum),
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
console.log(e.dynamicName);
obj['' + e.dynamicName + ''] = e.dynamicValue;
console.log(obj['' + e.dynamicName + '']);
});
});
tableDataArr.push(obj);
});
this.tableData = tableDataArr;
this.tableProps = arr;
// 构造echarts横坐标
xData.push(item)
}
})
// res.data.nameData.slice(1).forEach(item => {
// const props = {
// 'prop': item.name,
// 'label': item.name,
// 'align': 'center'
// }
// arr[2].children.push(props)
// })
let tableDataArr =[]
res.data.data.forEach(item => {
let obj = {}
obj.lineName= item.lineName,
obj.sum= item.sum,
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
console.log(e.dynamicName)
obj['' + e.dynamicName + ''] = e.dynamicValue
console.log(obj['' + e.dynamicName + '']);
})
})
tableDataArr.push(obj)
});
this.tableData = tableDataArr
this.tableProps = arr
// let tempList = []
// res.data.nameData.slice(1).forEach(item => {
// tempList.push(item.name)
// // arr[2].children.push(props)
// })
// xData = Array.from(new Set(tempList))
res.data.data.forEach(item => {
let yData = []
lineName.push(item.lineName)
// let obj = {}
// obj.lineName = item.lineName,
// obj.sum = item.sum,
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
// let yData = []
yData.push(e.dynamicValue)
})
})
yAllData.push(yData)
});
console.log(lineName)
} else {
this.tableProps = arr
this.tableData = []
xData = []
yAllData = []
lineName = []
}
// res.data.data[0].data[0].children.forEach((item, index) => {
// // console.log(item)
// yData.push(item.dynamicValue)
// // let data = 'data' + Number(index+1)
// // obj['' + item.dynamicName + ''] = item.dynamicValue
// })
// console.log(this.yData)
this.$refs.lineChart.initChart(xData, yAllData, lineName)
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// let tempList = []
// res.data.nameData.slice(1).forEach(item => {
// tempList.push(item.name)
// // arr[2].children.push(props)
// })
// xData = Array.from(new Set(tempList))
res.data.data.forEach((item) => {
let yData = [];
lineName.push(item.lineName);
// let obj = {}
// obj.lineName = item.lineName,
// obj.sum = item.sum,
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
// let yData = []
yData.push(e.dynamicValue);
});
});
yAllData.push(yData);
});
console.log(lineName);
} else {
this.tableProps = arr;
this.tableData = [];
xData = [];
yAllData = [];
lineName = [];
}
// res.data.data[0].data[0].children.forEach((item, index) => {
// // console.log(item)
// yData.push(item.dynamicValue)
// // let data = 'data' + Number(index+1)
// // obj['' + item.dynamicName + ''] = item.dynamicValue
// })
// console.log(this.yData)
this.$nextTick(() => {
this.$refs.lineChart.initChart(xData, yAllData, lineName);
});
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined
// this.listQuery.productId = val.productId;
this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
case 'search':
this.listQuery.lineIds = val.lineIds ? val.lineIds : undefined;
// this.listQuery.productId = val.productId;
this.listQuery.time = val.time
? new Date(val.time).getTime()
: undefined;
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
if (val.time) {
this.getData()
} else {
this.$message({
message: '请选择时间',
type: 'warning'
});
}
// this.listQuery.pageSize = 10;
if (val.time) {
this.getData();
} else {
this.$message({
message: '请选择时间',
type: 'warning',
});
}
break;
case 'reset':
this.$refs.searchBarForm.resetForm();

View File

@@ -59,24 +59,36 @@
<i class="el-icon-delete"></i>
</div> -->
<div
class="file-list__item"
v-for="(file, index) in files"
:key="file.fileName"
:style="{
background: isPicMode
? `url(${file.fileUrl}) no-repeat`
: `url(${defaultBg}) no-repeat`,
backgroundSize: isPicMode ? '100% 100%' : '64px',
backgroundPosition: isPicMode ? '0% 0%' : 'center',
}"
:data-name="file.fileName">
<el-button
v-if="!disabled"
type="text"
class="el-icon-delete"
style="padding: 0"
@click="(e) => handleDelete(file)" />
</div>
style="width: 100%">
<div
class="file-list__item"
v-if="!isPicMode"
:style="{
background: isPicMode
? `url(${file.fileUrl}) no-repeat`
: `url(${defaultBg}) no-repeat`,
backgroundSize: isPicMode ? '100% 100%' : '64px',
backgroundPosition: isPicMode ? '0% 0%' : 'center',
}"
@click="handleDownload(file)"
:data-name="file.fileName">
<el-button
v-if="!disabled"
type="text"
class="el-icon-delete"
style="padding: 0"
@click="(e) => handleDelete(file)" />
</div>
<el-image
v-else
class="file-list__item"
style="width: 100%"
:src="file.fileUrl"
:preview-src-list="files.map((item) => item.fileUrl)"></el-image>
</div>
</section>
</div>
</template>
@@ -277,6 +289,32 @@ export default {
// Array
this.$emit('update-filelist', this.appendFilelist);
},
async handleDownload(file) {
if (this.isPicMode) {
// this.$emit('preview', file);
const link = document.createElement('a');
link.href = file.fileUrl;
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
// this.$emit('download', file);
const data = await this.$axios({
url: file.fileUrl,
method: 'get',
responseType: 'blob',
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([data]));
link.download = file.fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
},
},
};
</script>

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
@@ -44,7 +44,7 @@
<el-date-picker
v-if="col.datetime"
v-model="form[col.prop]"
type="datetime"
type="date"
:placeholder="`请选择${col.label}`"
value-format="timestamp"
v-bind="col.bind"></el-date-picker>

View File

@@ -308,6 +308,7 @@ export default {
});
if (code == 0) {
this.$modal.msgSuccess('更新成功');
this.$emit('refreshDataList');
}
this.btnLoading = false;

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
@@ -57,6 +57,7 @@
v-model="form.equipmentTypeId"
:disabled="disabled"
filterable
clearable
placeholder="请选择设备类型">
<el-option
v-for="eqType in eqTypeList"
@@ -79,9 +80,9 @@
<el-col :span="8">
<el-form-item label="生产日期" prop="productionTime" :rules="[]">
<el-date-picker
v-model="form.enterTime"
v-model="form.productionTime"
:disabled="disabled"
type="datetime"
type="date"
placeholder="请选择生产日期"
value-format="timestamp"></el-date-picker>
</el-form-item>
@@ -91,14 +92,14 @@
<el-date-picker
v-model="form.enterTime"
:disabled="disabled"
type="datetime"
type="date"
placeholder="请选择进场日期"
value-format="timestamp"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="设备TT值"
label="设备理论生产能效(片/min)"
prop="tvalue"
:rules="[
{ required: true, message: '不能为空', trigger: 'blur' },
@@ -112,7 +113,7 @@
<el-input
v-model="form.tvalue"
:disabled="disabled"
placeholder="请输入设备TT值"></el-input>
placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -316,7 +317,7 @@ export default {
this.form
);
// 保存原始文件名
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
if ('fileNames' in this.form) this.form.fileNames.push(file.name+Date.now());
// 保存完整地址
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
this.$modal.msgSuccess('上传成功');

View File

@@ -38,7 +38,7 @@
@cancel="cancel"
width="60%"
@confirm="submitForm">
<DialogForm
<DialogForm1
v-if="open"
key="index-dialog-form"
ref="form"
@@ -78,7 +78,7 @@
queryParams: {
equipmentId: form.id,
pageNo: 1,
pageSize: 10,
pageSize: 20,
},
tableBtn: [
this.$auth.hasPermi('base:equipment-attr:update')
@@ -107,6 +107,7 @@
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import EquipmentDrawer from './components/EquipmentDrawer';
import DialogForm1 from './components/DialogForm';
import {
createEquipment,
@@ -124,6 +125,7 @@ export default {
components: {
Editor,
EquipmentDrawer,
DialogForm1,
},
mixins: [basicPageMixin],
data() {
@@ -157,7 +159,12 @@ export default {
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备名称' },
{
width: 200,
showOverflowtooltip: true,
prop: 'name',
label: '设备名称',
},
{ width: 256, prop: 'code', label: '设备编码' },
{ prop: 'equipmentType', label: '设备类型' },
{ prop: 'enName', label: '英文名称' },
@@ -270,6 +277,7 @@ export default {
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
bind: {
filterable: true,
clearable: true,
},
},
// {
@@ -294,7 +302,7 @@ export default {
{
input: true,
prop: 'tvalue',
label: '设备TT值',
label: '设备理论生产能效(片/min)',
rules: [
{ required: true, message: '不能为空', trigger: 'blur' },
{
@@ -435,7 +443,7 @@ export default {
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
pageSize: 20,
code: '',
name: '',
},
@@ -561,6 +569,7 @@ export default {
return;
}
// 添加的提交
this.form.files = [];
createEquipment(this.form).then((response) => {
this.$modal.msgSuccess('新增成功');
this.open = false;

View File

@@ -153,6 +153,9 @@ export default {
label: '父类',
prop: 'parentId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
bind: {
clearable: true, // some condition, like detail mode...
}
},
{},
],
@@ -237,25 +240,6 @@ export default {
const id = row.id;
getEquipmentType(id).then((response) => {
this.form = response.data;
// this.form = {
// code: 'SBLX20230925184444000041',
// name: '测试131',
// remark: '测试可删除',
// id: '1706258479729336322',
// files: [
// { fileName: '1.png', fileUrl: '', fileType: 2 },
// { fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
// { fileName: '2.txt', fileUrl: '', fileType: 2 },
// { fileName: '1.rar', fileUrl: '', fileType: 2 },
// { fileName: '1.kkk', fileUrl: '', fileType: 2 },
// { fileName: 'test.file', fileUrl: '', fileType: 2 },
// { fileName: '222', fileUrl: '', fileType: 2 },
// { fileName: 'g', fileUrl: '', fileType: 2 },
// ],
// createTime: 1695638697000,
// parentId: '1701869972319584257',
// };
// debugger;
this.open = true;
this.title = '修改设备类型';
});

View File

@@ -0,0 +1,99 @@
<!--
* @Author: zwq
* @Date: 2023-08-02 15:12:42
* @LastEditors: zwq
* @LastEditTime: 2024-11-29 13:25:51
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="[{ label: '产线在制工艺', type: 'title' }]"
ref="searchBarForm" />
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData"
@emitFun="inputChange" />
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
</div>
</template>
<script>
import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getLineBindProcessPage } from '@/api/core/base/lineBindProcess';
import selectProduct from './selectProduct';
const tableProps = [
{
prop: 'lineName',
label: '产线'
},
{
prop: 'processDictName',
label: '在制工艺',
list: [],
subcomponent: selectProduct,
},
{
prop: 'recordTime',
label: '开始时间',
filter: parseTime,
},
];
export default {
mixins: [basicPage, selectProduct],
data() {
return {
urlOptions: {
getDataListURL: getLineBindProcessPage,
},
tableProps,
tableData: [],
// formConfig: [
// {
// type: 'button',
// btnName: '同步',
// name: 'search',
// color: 'primary',
// },
// ],
};
},
components: {},
created() {
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data;
this.dataListLoading = false;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
default:
console.log(val);
}
},
inputChange() {
this.getDataList();
},
},
};
</script>

View File

@@ -0,0 +1,83 @@
<!--
* @Author: zwq
* @Date: 2023-08-03 14:09:18
* @LastEditors: zwq
* @LastEditTime: 2025-02-24 15:21:07
* @Description:
-->
<template>
<div class="tableInner">
<el-popover
placement="top"
title="切换在制工艺"
width="160"
v-model="visible">
<el-select v-model="list.processDict" style="margin: 5px" filterable>
<el-option
v-for="opt in getDictDatas(DICT_TYPE.PROCESS_TYPE)"
:key="opt.value"
:label="opt.label"
:value="opt.value"></el-option>
</el-select>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">
取消
</el-button>
<el-button type="primary" size="mini" @click="changeInput">
确定
</el-button>
</div>
<el-button type="text" slot="reference">
<svg-icon icon-class="changelogo" />
</el-button>
</el-popover>
<el-input
readonly
v-model="list.processDictName"
style="width: 50%; margin-left: 5px"></el-input>
</div>
</template>
<script>
import { switchLineBindProcess } from '@/api/core/base/lineBindProcess';
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
list: this.injectData,
visible: false,
};
},
mounted() {
},
methods: {
changeInput() {
const processDictName = this.getDictDatas(this.DICT_TYPE.PROCESS_TYPE).find(item=>
item.value == this.list.processDict
)
const data = {
id: this.list.id,
processDict: this.list.processDict,
processDictName: processDictName.label,
};
switchLineBindProcess(data).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.$emit('emitData');
});
},
},
};
</script>
<style scoped>
.tableInner .el-input__inner {
border: none;
padding: 0;
height: 33px;
}
</style>

View File

@@ -0,0 +1,164 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData" />
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
</div>
</template>
<script>
import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getLineBindProcessLogPage } from '@/api/core/base/lineBindProcess';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getPdList } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
const tableProps = [
{
prop: 'factoryName',
label: '工厂'
},
{
prop: 'lineName',
label: '产线',
},
{
prop: 'processDictName',
label: '在制工艺',
},
{
prop: 'recordTime',
label: '开始时间',
filter: parseTime,
},
];
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getLineBindProcessLogPage,
},
tableProps,
tableData: [],
optionArrUrl: [getFactoryPage,getProductionLinePage],
listQuery: {
productionLineId: [],
},
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'productionLineId',
multiple: true,
},
{
type: 'select',
label: '在制工艺',
selectOptions: this.getDictDatas(this.DICT_TYPE.PROCESS_TYPE),
labelField: 'label',
valueField: 'value',
param: 'processDict',
defaultSelect: '',
filterable: true,
},
{
type: 'datePicker',
label: '时间',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'startTime',
},
{
type: 'button',
btnName: '搜索',
name: 'search',
color: 'primary',
},
{
type: 'button',
btnName: '重置',
name: 'reset',
},
],
};
},
components: {},
created() {
this.getArr();
},
methods: {
handleSearchBarChanged({ param, value }) {
this.listQuery.productionLineId = [];
this.$refs.searchBarForm.formInline.productionLineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list;
});
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.productionLineId = val.productionLineId || [];
this.listQuery.processDict = val.processDict;
this.listQuery.recordTime = val.startTime
? [val.startTime[0], val.startTime[1].substr(0, 10) + ' 23:59:59']
: null;
this.getDataList();
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
default:
console.log(val);
}
},
},
};
</script>

View File

@@ -0,0 +1,53 @@
<!--
* @Author: zhp
* @Date: 2023-01-31 14:12:10
* @LastEditTime: 2024-11-29 10:49:37
* @LastEditors: zwq
* @Description:
-->
<template>
<span>
<el-switch
@change="changeStatus"
v-model="injectData.allowAuto"
:active-value="true"
:inactive-value="false"></el-switch>
</span>
</template>
<script>
import { switchAutoProduct } from '@/api/core/base/lineBindProduct';
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
urlOptions: {
submitURL: switchAutoProduct,
},
};
},
methods: {
// 子级
changeStatus() {
// 路由参数
let obj = {
allowAuto: this.injectData.allowAuto,
id: this.injectData.id,
};
this.urlOptions.submitURL(obj).then((res) => {
console.log(res)
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$modal.msgSuccess('切换状态成功');
this.$emit('emitData');
});
},
},
};
</script>

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2023-08-02 15:12:42
* @LastEditors: DY
* @LastEditTime: 2023-10-13 16:35:03
* @LastEditors: zwq
* @LastEditTime: 2024-11-29 10:47:46
* @Description:
-->
<template>
@@ -30,6 +30,7 @@ import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getLineBindProductPage } from '@/api/core/base/lineBindProduct';
import selectProduct from './selectProduct';
import changeStatus from './changeStatus';
import { getProductPage } from '@/api/core/base/product';
const tableProps = [
@@ -43,6 +44,11 @@ const tableProps = [
list: [],
subcomponent: selectProduct,
},
{
prop: 'allowAuto',
label: '允许自动',
subcomponent: changeStatus,
},
{
prop: 'recordTime',
label: '开始时间',

View File

@@ -3,6 +3,7 @@
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<base-table
v-loading="dataListLoading"
@@ -24,15 +25,21 @@ import { parseTime } from '../../mixins/code-filter';
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getProductPage } from '@/api/core/base/product';
import { getFactoryPage } from '@/api/core/base/factory';
import { getPdList } from '@/api/core/monitoring/auto';
const tableProps = [
{
prop: 'factoryName',
label: '工厂'
},
{
prop: 'productionLineName',
label: '产线'
label: '产线',
},
{
prop: 'productName',
label: '在制产品'
label: '在制产品',
},
{
prop: 'startTime',
@@ -55,15 +62,24 @@ export default {
},
tableProps,
tableData: [],
optionArrUrl: [getProductionLinePage, getProductPage],
listQuery: {
productionLineId: [],
},
optionArrUrl: [getFactoryPage,getProductionLinePage, getProductPage],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'productionLineId',
defaultSelect: '',
filterable: true,
multiple: true,
},
{
type: 'select',
@@ -83,7 +99,7 @@ export default {
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'startTime',
valueFormat: 'timestamp'
valueFormat: 'timestamp',
},
{
type: 'button',
@@ -99,12 +115,18 @@ export default {
],
};
},
components: {
},
components: {},
created() {
this.getArr();
},
methods: {
handleSearchBarChanged({ param, value }) {
this.listQuery.productionLineId = [];
this.$refs.searchBarForm.formInline.productionLineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
getArr() {
const params = {
page: 1,
@@ -121,9 +143,10 @@ export default {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.productionLineId = val.productionLineId;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.productionLineId = val.productionLineId || [];
this.listQuery.productId = val.productId;
this.listQuery.startTime = val.startTime;
this.listQuery.startTime = val.startTime ? val.startTime : null;
this.getDataList();
break;
case 'reset':

View File

@@ -1,139 +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="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="完成单位产品用时" prop="processTime">
<el-input :disabled="isdetail" v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 加工属性" prop="processType">
<el-select v-model="dataForm.processType" clearable style="width: 100%" :disabled="isdetail"
placeholder="请选择加工属性">
<el-option v-for="dict in processTypeList" :key="dict.id" :label="dict.label"
:value="dict.id" />
</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()">
编辑
@@ -149,20 +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>
@@ -220,17 +184,37 @@ export default {
id: null,
name: '', // 产品名称
code: '', // 产品编码
area: 0, // 单位平方数(float only)
area: 0, // 深加工单位平方数(float only)
typeDictValue: null, // 产品类型id
processTime: null, // 单位产品用时 (s)
specifications: '', // 规格
specifications: '', // 深加工规格
unitDictValue: '', // 单位id
originalSpecifications: '', // 原片规格
originalArea: 0, // 原片单位平方数
processType:undefined,
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
},
},
processTypeList: [
{
id: '0',
label:'压花丝印'
},
{
id: '1',
label: '无印打孔'
},
{
id: '2',
label: '单层镀膜'
}, {
id: '3',
label: '双层镀膜'
}
],
dataRule: {
code: [
{
@@ -371,8 +355,19 @@ export default {
// 添加的提交
createProduct(this.dataForm).then((response) => {
this.$modal.msgSuccess('新增成功');
this.visible = false;
this.$emit('refreshDataList');
this.$confirm(`是否新增产品属性?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.dataForm.id = response.data
this.addNew();
})
.catch(() => {
this.visible = false;
this.$emit('refreshDataList');
});
});
}
});
@@ -382,10 +377,14 @@ export default {
},
// 新增 / 修改
addNew(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
if (this.dataForm.id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
} else {
this.$message('请先创建产品!');
}
},
goback() {
this.$emit('refreshDataList');

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 14:55:51
* @LastEditors: DY
* @LastEditTime: 2023-10-13 10:27:00
* @LastEditors: zwq
* @LastEditTime: 2025-02-24 16:06:59
* @Description:
-->
<template>
@@ -49,27 +49,31 @@ import {
const tableProps = [
{
prop: 'code',
label: '产品编码'
prop: 'createTime',
label: '创建时间',
filter: parseTime
},
{
prop: 'name',
label: '产品名称'
},
{
prop: 'code',
label: '产品编码'
},
{
prop: 'originalSpecifications',
label: '原片规格'
},
{
prop: 'specifications',
label: '规格'
label: '深加工规格'
},
{
prop: 'unitDictValue',
label: '单位',
subcomponent: unitDict,
},
{
prop: 'createTime',
label: '创建时间',
filter: parseTime
},
];
export default {

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-01 13:52:10
* @LastEditors: zwq
* @LastEditTime: 2024-04-10 16:31:51
* @LastEditTime: 2025-02-24 15:32:45
* @Description:
-->
<template>
@@ -12,6 +12,7 @@
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-position="top"
label-width="90px">
<el-row :gutter="20">
<el-col :span="12">
@@ -48,11 +49,11 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产线TT值(h)" prop="tvalue">
<el-form-item label="产线理论生产能效(片/min)" prop="tvalue">
<el-input
v-model="dataForm.tvalue"
clearable
placeholder="请输入每小时下片数量" />
placeholder="请输入数量" />
</el-form-item>
</el-col>
</el-row>
@@ -80,6 +81,17 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
type="textarea"
placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
@@ -89,17 +101,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
type="textarea"
placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
@@ -139,11 +140,11 @@ export default {
},
pdTypeArr: [
{
id: 0,
id: '0',
name: '深加工'
},
{
id: 1,
id: '1',
name: '原片'
}
],
@@ -159,6 +160,7 @@ export default {
],
tvalue: [
{
required: true,
type: 'number',
message: '请输入正确的数字',
trigger: 'change',

View File

@@ -48,6 +48,7 @@ import {
exportProductionLineExcel,
getStatus,
} from '@/api/core/base/productionLine';
import { getFactoryPage } from '@/api/core/base/factory';
const tableProps = [
{
@@ -121,6 +122,13 @@ export default {
].filter((v) => v),
tableData: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'input',
label: '产线名称',
@@ -168,7 +176,15 @@ export default {
components: {
AddOrUpdate,
},
created() {},
created() {
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
methods: {
// 获取数据列表
getDataList() {
@@ -197,6 +213,7 @@ export default {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.name = val.name;
this.getDataList();
break;

View File

@@ -3,6 +3,7 @@
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<base-table
v-loading="dataListLoading"
@@ -46,6 +47,8 @@ import {
getWorkshopSectionPage,
exportWorkshopSectionExcel
} from "@/api/core/base/workshopSection";
import { getPdList } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
const tableProps = [
{
@@ -56,6 +59,10 @@ const tableProps = [
prop: 'name',
label: '工段名称'
},
{
prop: 'factoryName',
label: '工厂'
},
{
prop: 'productionLineName',
label: '产线'
@@ -99,8 +106,25 @@ export default {
}
: undefined,
].filter((v)=>v),
listQuery: {
lineId: [],
},
tableData: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineId',
multiple: true,
},
{
type: 'input',
label: '工段名称',
@@ -146,14 +170,37 @@ export default {
components: {
AddOrUpdate,
},
created() {},
created() {
this.getPdLineList();
},
methods: {
getPdLineList() {
getPdList().then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
handleSearchBarChanged({ param, value }) {
this.listQuery.lineId = [];
this.$refs.searchBarForm.formInline.lineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.name = val.name;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.lineId = val.lineId || [];
this.getDataList();
break;
case 'reset':

View File

@@ -1,36 +1,22 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-16 15:10:42
* @LastEditors: DY
* @LastEditTime: 2024-12-02 13:59:32
* @LastEditors: zwq
* @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>
@@ -92,7 +74,8 @@ const tableProps = [
},
{
prop: 'outputArea',
label: '产出面积/㎡'
label: '产出面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossNum',
@@ -100,11 +83,13 @@ const tableProps = [
},
{
prop: 'lossArea',
label: '损耗面积/㎡'
label: '损耗面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossRatio',
label: '损耗比例%'
label: '损耗比例%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
}
];
@@ -180,7 +165,6 @@ export default {
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultSelect: [],
width: 350
},
{
@@ -201,7 +185,8 @@ export default {
}
],
};
},
},
created() {
this.getDataList()
this.getPdLineList()
@@ -312,8 +297,8 @@ export default {
this.listQuery.pageSize = 10;
this.listQuery.lineId = val.line ? val.line : undefined;
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime(),new Date(val.timeVal[1]).getTime()] : undefined;
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}

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

@@ -0,0 +1,169 @@
<template>
<div
:class="className"
:style="{ height: height, width: width, marginLeft: '10px' }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';
const animationDuration = 1000;
export default {
mixins: [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,
targetId: '',
};
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
const _this = this;
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: {
containLabel: true,
},
xAxis: {
type: 'category',
data: this.barData.map((item) => {
return item.lineName;
}),
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '投入/产出 片',
min: 0,
axisLabel: {
formatter: '{value}',
},
},
{
type: 'value',
name: '加工成品率',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %',
},
},
],
series: [
{
name: '投入',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => {
return item.inputNum;
}),
tooltip: {
valueFormatter: function (value) {
return value + ' 片';
},
},
animationDuration,
},
{
name: '产出',
type: 'bar',
barWidth: '20',
data: this.barData.map((item) => {
return item.outputNum;
}),
tooltip: {
valueFormatter: function (value) {
return value + ' 片';
},
},
animationDuration,
},
{
name: '加工成品率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' %';
},
},
data: this.barData.map((item) => {
return 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>

View File

@@ -0,0 +1,314 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2024-12-02 13:43:57
* @LastEditors: zwq
* @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"
>
<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 { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
const tableProps = [
{
prop: 'proLineName',
label: '产线名称'
},
{
prop: 'inputNum',
label: '投入数量/片'
},
{
prop: 'outputNum',
label: '产出数量/片'
},
{
prop: 'outputArea',
label: '产出面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossNum',
label: '损耗数量/片'
},
{
prop: 'lossArea',
label: '损耗面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossRate',
label: '损耗比例%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
}
];
export default {
data() {
return {
urlOptions: {
getDataListURL: getPdlDataSearch
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
proLineId: undefined
},
exportLoading: false,
dataListLoading: false,
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [],
showData: [],
tableData: [],
selectedList: [],
fileName: '',
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'line'
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: "yyyy-MM-ddTHH:mm:ss",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultSelect: [],
width: 350
},
{
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() {
if (this.$route.params.startTime) {
this.formConfig[1].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
}
// const time = new Date()
// this.formConfig[1].defaultSelect = [time, time]
this.getDataList()
this.getPdLineList()
},
methods: {
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 || []
})
},
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.proLineId = val.line ? val.line : undefined;
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}
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;
this.listQuery.total = response.data.length;
this.dataListLoading = false;
this.showData = this.tableData
});
},
// 每页数
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

@@ -1,138 +1,313 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-16 15:18:23
* @LastEditors: DY
* @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"
>
<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>
<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">
<div v-show="activeName === 'his'">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
</div>
<div v-show="activeName === 'now'"></div>
<!-- 列表 -->
<div v-if="activeName === 'his'">
<base-table-s
:page="1"
:limit="100"
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH / 2"></base-table-s>
<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
<barChart
style="margin-top: 50px"
ref="barChart"
height="600px"
:bar-data="tableData" />
</div>
</div>
<div v-if="activeName === 'now'">
<span class="blue-block"></span>
<span class="tip">当班数据</span>
<base-table-s
:page="1"
:limit="100"
:table-props="tableProps"
:table-data="tableData2"
:max-height="tableH / 2" />
<span class="blue-block"></span>
<span class="tip">当天数据</span>
<base-table-s
:page="1"
:limit="100"
:table-props="tableProps"
:table-data="tableData3"
:max-height="tableH / 2" />
</div>
</div>
</div>
</template>
<script>
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import {
getPdlAutoReportNewSearch,
getPdlAutoReportNewSearchNow,
} from '@/api/core/monitoring/data';
import { getPdList } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import ButtonNav from '@/components/ButtonNav';
import baseTableS from './baseTable.vue';
import barChart from './BarChart.vue';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
const tableProps = [
{
prop: 'proLineName',
label: '产线名称'
prop: 'factoryName',
label: '工厂',
fixed: true
},
{
prop: 'inputNum',
label: '投入数量/片'
prop: 'lineName',
label: '产线',
fixed: true
},
{
prop: 'outputNum',
label: '产出数量/片'
prop: 'sizes',
label: '规格',
width: 105,
showOverflowtooltip: true,
fixed: true
},
{
prop: 'outputArea',
label: '产出面积/㎡'
},
{
prop: 'lossNum',
label: '损耗数量/片'
},
{
prop: 'lossArea',
label: '损耗面积/㎡'
},
{
prop: 'lossRate',
label: '损耗比例%'
}
];
{
prop: 'inputN',
label: '投入',
align: 'center',
children: [
{
prop: 'inputNum',
label: '投入数量/片',
},
{
prop: 'inputArea',
label: '投入面积/m²',
},
],
},
{
prop: 'outputN',
label: '产出',
align: 'center',
children: [
{
prop: 'outputNum',
label: '产出数量/片',
},
{
prop: 'outputArea',
label: '产出面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'lossN',
label: '不良',
align: 'center',
children: [
{
prop: 'lossNum',
label: '不良数量/片',
},
{
prop: 'lossArea',
label: '不良面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'lossRatio',
label: '不良率/%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'outputRatio',
label: '投入产出率/%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'processingRatio',
label: '加工成品率/%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossD',
label: '不良详情',
align: 'center',
children: [
{
prop: 'original',
label: '原片',
align: 'center',
children: [
{
prop: 'originalLossNum',
label: '原片不良/片',
},
{
prop: 'originalLossArea',
label: '原片不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'edge',
label: '磨边',
align: 'center',
children: [
{
prop: 'edgeLossNum',
label: '磨边不良/片',
},
{
prop: 'edgeLossArea',
label: '磨边不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'drill',
label: '打孔',
align: 'center',
children: [
{
prop: 'drillLossNum',
label: '打孔不良/片',
},
{
prop: 'drillLossArea',
label: '打孔不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'coating',
label: '镀膜',
align: 'center',
children: [
{
prop: 'coatingLossNum',
label: '镀膜不良/片',
},
{
prop: 'coatingLossArea',
label: '镀膜不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'silk',
label: '丝印',
align: 'center',
children: [
{
prop: 'silkLossNum',
label: '丝印不良/片',
},
{
prop: 'silkLossArea',
label: '丝印不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'tempering',
label: '钢化',
align: 'center',
children: [
{
prop: 'temperingLossNum',
label: '钢化不良/片',
},
{
prop: 'temperingLossArea',
label: '钢化不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'packing',
label: '包装',
align: 'center',
children: [
{
prop: 'packingLossNum',
label: '包装不良/片',
},
{
prop: 'packingLossArea',
label: '包装不良/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
],
},
];
export default {
name: '',
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
getDataListURL: getPdlDataSearch
getDataListURL: getPdlAutoReportNewSearch,
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
proLineId: undefined
},
exportLoading: false,
dataListLoading: false,
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [],
showData: [],
tableData: [],
selectedList: [],
fileName: '',
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'line'
param: 'lineId',
multiple: true,
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: "yyyy-MM-ddTHH:mm:ss",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultSelect: [],
width: 350
},
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
width: 350,
},
{
type: 'button',
btnName: '查询',
@@ -148,129 +323,51 @@ export default {
btnName: '导出',
name: 'export',
color: 'warning',
}
},
],
listQuery: {
lineId: [],
},
activeName: 'now',
tableProps,
tableData: [],
tableData2: [],
tableData3: [],
};
},
components: {
ButtonNav,
baseTableS,
barChart,
},
created() {
if (this.$route.params.startTime) {
this.formConfig[1].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
}
// const time = new Date()
// this.formConfig[1].defaultSelect = [time, time]
this.getDataList()
this.getPdLineList()
this.getPdLineList();
},
methods: {
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 || []
})
this.formConfig[1].selectOptions = res.data || [];
});
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
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.proLineId = val.line ? val.line : undefined;
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}
this.getDataList();
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.lineId = val.lineId || [];
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
if (this.activeName === 'his') {
this.getDataList();
} else {
this.getDataList2();
}
break;
case 'export':
this.handleExport();
@@ -279,33 +376,199 @@ export default {
console.log(val);
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data;
this.listQuery.total = response.data.length;
this.dataListLoading = false;
this.showData = this.tableData
});
},
// 每页数
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
currentMenu(val) {
this.activeName = val === '历史' ? 'his' : 'now';
if (this.activeName === 'his') {
this.$refs.searchBarForm.resetForm();
this.listQuery.factoryId = undefined;
this.listQuery.lineId = [];
// 获取当前时间
const now = new Date();
// 获取前一天的同一时间
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
// 设置为00:00:00
yesterday.setHours(0, 0, 0, 0);
// 设置为23:59:59
const end = new Date(yesterday.getTime());
end.setHours(23, 59, 59, 59);
this.listQuery.startTime = yesterday.getTime();
this.listQuery.endTime = end.getTime();
this.$nextTick(() => {
this.$refs.searchBarForm.formInline.timeVal = [
yesterday.getTime(),
end.getTime(),
];
});
this.getDataList();
} else {
this.getDataList2();
}
this.dialogVisible = true
}
},
// 获取数据列表
getDataList() {
if (this.listQuery.startTime) {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
this.tableData = response.data.map((item, index) => {
item.originalLossNum = item.original?.lossNum;
item.originalLossArea = item.original?.lossArea;
item.edgeLossNum = item.edge?.lossNum;
item.edgeLossArea = item.edge?.lossArea;
item.drillLossNum = item.drill?.lossNum;
item.drillLossArea = item.drill?.lossArea;
item.coatingLossNum = item.coating?.lossNum;
item.coatingLossArea = item.coating?.lossArea;
item.silkLossNum = item.silk?.lossNum;
item.silkLossArea = item.silk?.lossArea;
item.temperingLossNum = item.tempering?.lossNum;
item.temperingLossArea = item.tempering?.lossArea;
item.packingLossNum = item.packing?.lossNum;
item.packingLossArea = item.packing?.lossArea;
return item;
});
this.$nextTick(() => {
if(this.tableData.length>0){
this.$refs.barChart.initChart();
}
});
this.dataListLoading = false;
});
} else {
this.$message.warning('请选择时间范围');
}
},
// 获取数据2列表
getDataList2() {
getPdlAutoReportNewSearchNow().then((response) => {
this.tableData2 = response.data.classData.map((item, index) => {
item.originalLossNum = item.original?.lossNum;
item.originalLossArea = item.original?.lossArea;
item.edgeLossNum = item.edge?.lossNum;
item.edgeLossArea = item.edge?.lossArea;
item.drillLossNum = item.drill?.lossNum;
item.drillLossArea = item.drill?.lossArea;
item.coatingLossNum = item.coating?.lossNum;
item.coatingLossArea = item.coating?.lossArea;
item.silkLossNum = item.silk?.lossNum;
item.silkLossArea = item.silk?.lossArea;
item.temperingLossNum = item.tempering?.lossNum;
item.temperingLossArea = item.tempering?.lossArea;
item.packingLossNum = item.packing?.lossNum;
item.packingLossArea = item.packing?.lossArea;
return item;
});
this.tableData3 = response.data.todayData.map((item, index) => {
item.originalLossNum = item.original?.lossNum;
item.originalLossArea = item.original?.lossArea;
item.edgeLossNum = item.edge?.lossNum;
item.edgeLossArea = item.edge?.lossArea;
item.drillLossNum = item.drill?.lossNum;
item.drillLossArea = item.drill?.lossArea;
item.coatingLossNum = item.coating?.lossNum;
item.coatingLossArea = item.coating?.lossArea;
item.silkLossNum = item.silk?.lossNum;
item.silkLossArea = item.silk?.lossArea;
item.temperingLossNum = item.tempering?.lossNum;
item.temperingLossArea = item.tempering?.lossArea;
item.packingLossNum = item.packing?.lossNum;
item.packingLossArea = item.packing?.lossArea;
return item;
});
});
},
handleSearchBarChanged({ param, value }) {
this.listQuery.lineId = [];
this.$refs.searchBarForm.formInline.lineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
/** 导出按钮操作 */
handleExport() {
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);
exportTable.Sheets.Sheet1.A1.v = '序号' //导出表格第一列表头为序号
var exportTableOut = XLSX.write(exportTable, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
});
// sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(
new Blob([exportTableOut], {
type: 'application/octet-stream',
}),
'产线统计数据.xlsx'
);
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut);
}
return exportTableOut;
},
},
};
</script>
<style lang="scss">
.energyOverlimitLog {
.el-tabs__nav::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #e4e7ed;
}
.el-tabs__nav-wrap::after {
width: 0;
}
.el-tabs__item {
padding: 0 10px;
}
.el-tabs__item:hover {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item.is-active {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item {
color: rgba(0, 0, 0, 0.45);
}
.searchBarBox {
margin-bottom: 0;
}
.blue-block {
float: left;
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 12px;
}
.tip {
display: inline-block;
font-size: 16px;
margin-right: 8px;
margin-top: 10px;
}
}
</style>

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: index.vue
author: liubin
date: 2023-08-04 14:44:58
@@ -16,6 +16,7 @@
v-if="tableData && tableData.length > 0"
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH"
@emitFun="handleEmitFun"
/>
</div>
@@ -24,11 +25,13 @@
<script>
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default {
name: 'productionLineData24',
components: {},
props: {},
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
@@ -41,7 +44,7 @@ export default {
},
list: [],
arr: [],
spanArr: [],
spanArr: [],
timeList: [],
tableData: [],
tableProps: [],
@@ -66,10 +69,14 @@ export default {
label: times.slice(0, 10) + ' ' + times.slice(11),
align: 'center',
children: [
{ prop: times + '_in', label: '投入数量' },
{ prop: times + '_out', label: '产出数量' },
{ prop: times + '_junk', label: '报废数量' },
{ prop: times + '_area', label: '产出面积' }
{ prop: times + '_in', label: '投入数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_out', label: '产出数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_junk', label: '报废数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_area', label: '产出面积',
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
]
}
this.arr.push(subprop)
@@ -168,7 +175,7 @@ export default {
// // console.log('recent-24', data);
// this.initing = true;
// this.queryParams.pageSize = this.list.length;
// setTimeout(() => {

View File

@@ -0,0 +1,272 @@
<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} %`,
},
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,361 @@
<!--
* @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: 'outputNum',
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.productId = val.productId ? val.productId : 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: 'outputNum',
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,272 @@
<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} %`,
},
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,281 @@
<!--
* @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="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" />
<!-- <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> -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
</div>
</template>
<script>
import AddOrUpdate from './add-or-updata';
import { parseTime } from '../../mixins/code-filter';
import { getCostOriginRadioHisData, getPdList } from '@/api/core/monitoring/index'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import { exportCostOriginRadioHisData } from '../../../../api/core/monitoring';
const tableProps = [
{
prop: 'reportType',
label: '报表类型'
},
{
prop: 'time',
label: '日期',
// filter: parseTime,
width: 160
},
{
prop: 'bindObjectName',
label: '产线'
},
{
prop: 'thick',
label: '厚度'
},
{
prop: 'speed',
label: '在线速度'
},
{
prop: 'width',
label: '掰边宽度'
},
{
prop: 'inArea',
label: '拉引量/㎡'
},
{
prop: 'outArea',
label: '下片面积/㎡'
},
{
prop: 'ratio',
label: '良品率'
},
];
export default {
components: {
AddOrUpdate
},
data() {
return {
urlOptions: {
getDataListURL: getCostOriginRadioHisData
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
bindObjectId: undefined,
statisticType: undefined,
},
pdLineList:[],
exportLoading: false,
dataListLoading: false,
selectedList: [],
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [
{
type: 'edit',
btnName: '编辑',
},
].filter((v) => v),
tableData: [],
fileName: '',
formConfig: [
{
type: 'select',
label: '维度',
selectOptions: [
{
id: '0',
name:'班组'
},
{
id: '1',
name: '日'
},
{
id: '2',
name: '周'
},
{
id: '3',
name: '月'
},
{
id: '4',
name: '年'
}
],
param: 'statisticType'
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'bindObjectId'
},
{
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.statisticType = '1';
this.listQuery.statisticType = '1';
this.getDataList()
this.getPdLineList()
},
methods: {
handleClick(val) {
console.log(val);
if (val.type === 'edit') {
this.addOrUpdateVisible= true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data);
});
}
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[1].selectOptions = res.data || []
this.pdLineList = res.data || []; // 保存产线数据
})
},
selectChange(val) {
console.log(val)
this.selectedList = val
},
buttonClick(val) {
console.log('val', 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.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 => {
const arr = ['班组','日', '周', '月', '年'];
this.tableData = response.data?.list?.map((item) => {
item.reportType = arr[this.listQuery.statisticType];
item.statisticType = this.listQuery.statisticType
// 匹配 bindObjectName
const targetLine = this.pdLineList.find(line => line.id === item.bindObjectId);
item.bindObjectName = targetLine ? targetLine.name : ''; // 赋值名称,无匹配则为空
return item;
});
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 exportCostOriginRadioHisData(params);
}).then(response => {
this.$download.excel(response, '原片报表.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>

View File

@@ -1,8 +1,8 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-16 15:19:04
* @LastEditors: DY
* @LastEditTime: 2024-12-02 13:44:47
* @LastEditors: zwq
* @Description:
-->
<template>
@@ -69,11 +69,13 @@ const tableProps = [
prop: 'reportStartTime',
label: '统计开始时间',
filter: parseTime,
width:160
},
{
prop: 'reportEndTime',
label: '统计结束时间',
filter: parseTime,
width:160
},
{
prop: 'lineName',
@@ -93,7 +95,8 @@ const tableProps = [
},
{
prop: 'outputArea',
label: '产出面积/㎡'
label: '产出面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossNum',
@@ -101,11 +104,13 @@ const tableProps = [
},
{
prop: 'lossArea',
label: '损耗面积/㎡'
label: '损耗面积/㎡',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossRatio',
label: '损耗比例%'
label: '损耗比例%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
}
];
@@ -309,8 +314,8 @@ export default {
this.listQuery.lineId = val.line ? val.line : undefined;
this.listQuery.sectionId = val.section ? val.section : undefined;
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime(),new Date(val.timeVal[1]).getTime()] : undefined;
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}

View File

@@ -14,8 +14,7 @@
:limit="listQuery.pageSize"
:selectWidth="55"
:table-data="showData"
@selection-change="selectChange"
/>
@selection-change="selectChange" />
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
@@ -28,10 +27,12 @@
width="30%"
:before-close="handleClose">
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
<el-button type="success" @click="exportPdf">pdf</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>
<el-button type="primary" @click="dialogVisible = false">
</el-button>
</span>
</el-dialog>
</div>
@@ -42,40 +43,43 @@
import { getSectionDataSearch } from '@/api/core/monitoring';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import { parseTime } from '@/filter/code-filter';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
const tableProps = [
{
prop: 'proLineName',
label: '产线名称'
prop: 'proLineName',
label: '产线名称',
},
{
prop: 'sectionName',
label: '工段名称',
},
{
prop: 'inputNum',
label: '进片数量/片',
},
{
prop: 'outputNum',
label: '出片数量/片',
},
{
prop: 'lossNum',
label: '损耗数量/片',
},
{
prop: 'lossArea',
label: '损耗面积/m²',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'lossRate',
label: '损耗比例/%',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
prop: 'sectionName',
label: '工段名称'
},
{
prop: 'inputNum',
label: '进片数量/片'
},
{
prop: 'outputNum',
label: '出片数量/片'
},
{
prop: 'lossNum',
label: '损耗数量/片'
},
{
prop: 'lossArea',
label: '损耗面积/m²'
},
{
prop: 'lossRate',
label: '损耗比例/%'
}
];
export default {
@@ -83,29 +87,29 @@ export default {
data() {
return {
urlOptions: {
getDataListURL: getSectionDataSearch,
getDataListURL: getSectionDataSearch,
},
tableProps,
tableData: [],
tableData: [],
showData: [],
selectedList: [],
listQuery: {
proLineId:undefined,
sectionId: undefined,
startTime: undefined,
endTime: undefined,
total: 0
},
listQuery: {
proLineId: undefined,
sectionId: undefined,
startTime: undefined,
endTime: undefined,
total: 0,
},
dataListLoading: false,
dialogVisible: false,
fileName: [],
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'proLineId',
param: 'proLineId',
defaultSelect: '',
filterable: true,
onchange: true,
@@ -114,7 +118,7 @@ export default {
type: 'select',
label: '工段',
selectOptions: [],
param: 'sectionId',
param: 'sectionId',
defaultSelect: '',
filterable: true,
},
@@ -143,15 +147,21 @@ export default {
btnName: '导出',
name: 'export',
color: 'warning',
}
},
],
};
},
components: {
},
components: {},
created() {
this.getArr();
// this.getDataList()
this.getArr();
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
this.listQuery.startTime = start.getTime();
this.listQuery.endTime = end.getTime();
this.formConfig[2].startPlaceholder = parseTime(start).substr(0, 10);
this.formConfig[2].endPlaceholder = parseTime(end).substr(0, 10);
this.getDataList();
},
methods: {
/** 根据产线获取工段 */
@@ -184,92 +194,96 @@ export default {
}
},
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
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
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
// 一页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)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
console.log('nihc URL', leftHeight, pageHeight)
console.log('nihc URL', leftHeight, pageHeight);
var pdf = new jsPDF('', 'pt', 'a4')
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()
}
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[0] + '-' + that.fileName[1] + '_工段统计.pdf')
})
}, 300)
pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.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')
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'))
tables.removeChild(tables.querySelector('.el-table__fixed'));
}
if (fixRight) {
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
}
let exportTable = XLSX.utils.table_to_book(tables)
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[0] + '-' + this.fileName[1] + '_工段统计.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
return exportTableOut
},
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[0] + '-' + this.fileName[1] + '_工段统计.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)
this.test();
setTimeout(() => {
this.dialogVisible = false;
this.showData = this.tableData;
}, 600);
},
exportXlsx() {
this.exportECL()
this.dialogVisible = false
this.showData = this.tableData
this.exportECL();
this.dialogVisible = false;
this.showData = this.tableData;
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
.then((_) => {
done();
})
.catch(_ => {});
.catch((_) => {});
},
getArr() {
const params = {
@@ -281,61 +295,63 @@ export default {
this.formConfig[index].selectOptions = response.data.list;
});
});
},
getDataList() {
// this.listQuery.proLineId = '1672847052717821953';
// this.listQuery.startTime = '1690626657000'
// this.listQuery.endTime = '1693564257000'
this.urlOptions.getDataListURL(this.listQuery).then(res => {
this.tableData = res.data
this.listQuery.total = this.tableData.length;
this.dataListLoading = false;
},
getDataList() {
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
this.tableData = res.data;
this.listQuery.total = this.tableData.length;
this.dataListLoading = false;
this.showData = this.tableData;
});
},
});
},
// 每页数
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
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.showData = this.selectedList;
}
this.dialogVisible = true
},
this.dialogVisible = true;
},
selectChange(val) {
console.log(val)
this.selectedList = val
},
buttonClick(val) {
console.log(val)
switch (val.btnName) {
case 'search':
console.log(val.timeSlot);
console.log(val);
this.selectedList = val;
},
buttonClick(val) {
console.log(val);
switch (val.btnName) {
case 'search':
console.log(val.timeSlot);
this.formConfig[2].startPlaceholder = '开始时间';
this.formConfig[2].endPlaceholder = '结束时间';
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined
this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined
this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined
// this.listQuery.pageSize = 10;
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined;
this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined;
this.listQuery.startTime = val.timeSlot
? new Date(val.timeSlot[0]).getTime()
: undefined;
this.listQuery.endTime = val.timeSlot
? new Date(val.timeSlot[1]).getTime()
: undefined;
if (val.timeSlot && val.timeSlot.length > 0) {
this.fileName[0] = val.timeSlot[0].slice(0, 10)
this.fileName[1] = val.timeSlot[1].slice(0, 10)
this.getDataList()
} else {
this.$message({
message: '请选择时间',
type: 'warning'
});
}
this.fileName[0] = val.timeSlot[0].slice(0, 10);
this.fileName[1] = val.timeSlot[1].slice(0, 10);
this.getDataList();
} else {
this.$message({
message: '请选择时间',
type: 'warning',
});
}
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
@@ -349,12 +365,12 @@ export default {
case 'export':
if (val.timeSlot && val.timeSlot.length > 0) {
this.handleExport();
} else {
this.$message({
message: '请选择时间',
type: 'warning'
});
}
} else {
this.$message({
message: '请选择时间',
type: 'warning',
});
}
break;
default:
console.log(val);

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: pieChart.vue
author: liubin
date: 2023-09-06 15:02:49
@@ -10,7 +10,7 @@
<div
class="pie-chart"
ref="pieChart"
style="overflow: inherit;"
style="overflow: inherit"
:data-eqname="value.equipmentName || 'Default'"></div>
<div class="data-view">
<div class="data-view__item">
@@ -64,7 +64,7 @@ export default {
},
subtext: '设备', //<=========
subtextStyle: {
fontSize: 14,
fontSize: 13,
},
},
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
@@ -194,22 +194,31 @@ export default {
mttr,
} = item;
this.config.title.text = lineName;
this.config.title.subtext = equipmentName;
// 找到第一个 '-' 的位置
let firstDashIndex = equipmentName.indexOf('-');
// 找到第二个 '-' 的位置
let secondDashIndex = equipmentName.indexOf('-', firstDashIndex + 1);
// 截取第二个 '-' 后面的字符串
let result = equipmentName.substring(secondDashIndex + 1);
this.config.title.subtext = result ? result : '-';
this.config.series[0].data = [
{ name: '工作时长', value: workTime },
{ name: '停机时长', value: stopTime },
{ name: '故障时长', value: downTime },
{ name: '工作时长', value: workTime ? workTime.toFixed(2) : '0.00' },
{ name: '停机时长', value: stopTime ? stopTime.toFixed(2) : '0.00' },
{ name: '故障时长', value: downTime ? downTime.toFixed(2) : '0.00' },
];
this.config.series[1].data = [
{ name: '速度开动率', value: peEfficiency },
{
name: '速度开动率',
value: peEfficiency ? peEfficiency.toFixed(2) : '0.00',
},
{ name: '', value: Math.ceil(peEfficiency) - peEfficiency },
];
//
this.textData = {
workTime: +workTime.toFixed(2),
stopTime: +stopTime.toFixed(2),
downTime: +downTime.toFixed(2),
peEfficiency: +peEfficiency.toFixed(2),
workTime: workTime ? workTime.toFixed(2) : '0.00',
stopTime: stopTime ? stopTime.toFixed(2) : '0.00',
downTime: downTime ? downTime.toFixed(2) : '0.00',
peEfficiency: peEfficiency ? peEfficiency.toFixed(2) : '0.00',
};
},
},

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: index.vue
author: liubin
date: 2023-09-04 09:34:52
@@ -25,8 +25,9 @@
class="base-table__margin"
:table-props="tableProps"
:page="1"
:limit="10"
:limit="999"
:table-data="list"
:max-height="tableH"
@emitFun="handleEmitFun"></base-table>
</el-tab-pane>
<el-tab-pane
@@ -88,11 +89,13 @@
<script>
// import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import PieChart from './components/pieChart.vue';
import { parseTime } from '@/filter/code-filter';
export default {
name: 'EfficiencyAnalysis',
mixins: [basicPageMixin],
mixins: [basicPageMixin, tableHeightMixin],
components: { PieChart },
props: {},
data() {
@@ -118,8 +121,18 @@ export default {
tableProps: [
{ prop: 'factoryName', label: '工厂' },
{ prop: 'lineName', label: '产线' },
{ prop: 'sectionName', label: '工段' },
{ prop: 'equipmentName', label: '设备' },
{
prop: 'sectionName',
width: 120,
showOverflowtooltip: true,
label: '工段',
},
{
prop: 'equipmentName',
width: 150,
showOverflowtooltip: true,
label: '设备',
},
{
label: '有效时间',
children: [
@@ -127,12 +140,13 @@ export default {
width: 128,
prop: 'workTime',
label: '工作时长[h]',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 128,
prop: 'workRate',
label: '百分比[%]',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
@@ -143,8 +157,14 @@ export default {
width: 128,
prop: 'stopTime',
label: '停机时长[h]',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 128,
prop: 'stopRate',
label: '百分比[%]',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{ width: 128, prop: 'stopRate', label: '百分比[%]' },
],
},
{
@@ -154,14 +174,19 @@ export default {
width: 128,
prop: 'downTime',
label: '故障时长[h]',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 128,
prop: 'downRate',
label: '百分比[%]',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{ width: 128, prop: 'downRate', label: '百分比[%]' },
{
width: 128,
prop: 'timeEfficiency',
label: '时间开动率',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
@@ -172,29 +197,31 @@ export default {
width: 128,
prop: 'realProcSpeed',
label: '实际加工速度',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 128,
prop: 'designProcSpeed',
label: '理论加工速度',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 128,
prop: 'peEfficiency',
label: '速度开动率',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
},
{
prop: 'oee',
label: 'OEE',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
},
// {
// prop: 'oee',
// label: 'OEE',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// },
{
prop: 'teep',
label: 'TEEP',
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
label: '设备生产能效比例',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
// {
// _action: 'view-trend',
@@ -324,6 +351,20 @@ export default {
};
},
created() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
this.queryParams.recordTime[0] =
parseTime(start).substr(0, 10) + ' 00:00:00';
this.queryParams.recordTime[1] = parseTime(end).substr(0, 10) + ' 00:00:00';
this.$nextTick(() => {
this.searchBarFormConfig[2].extraOptions[0].startPlaceholder = parseTime(
start
).substr(0, 10);
this.searchBarFormConfig[2].extraOptions[0].endPlaceholder = parseTime(
end
).substr(0, 10);
});
this.getFactory();
this.getLine();
this.getList();
@@ -374,6 +415,7 @@ export default {
/** 查询列表 */
async getList() {
this.loading = true;
this.list = [];
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/efficiency',
method: 'get',
@@ -385,7 +427,6 @@ export default {
},
handleSearchBarBtnClick({ btnName, ...payload }) {
console.log('handleSearchBarBtnClick', btnName, payload);
if (btnName == 'visualization') {
// 可视化
this.visualizationOpen = true;
@@ -395,12 +436,26 @@ export default {
this.queryParams.factoryId = payload.factoryId || null;
this.queryParams.lineId = payload.lineId || null;
if (0 == payload.dateFilterType) {
this.queryParams.recordTime = payload.timerange;
if (payload.timerange) {
this.searchBarFormConfig[2].extraOptions[0].startPlaceholder =
'开始时间';
this.searchBarFormConfig[2].extraOptions[0].endPlaceholder =
'结束时间';
this.queryParams.recordTime = payload.timerange;
}
} else if (1 == payload.dateFilterType) {
this.queryParams.recordTime = [
`${payload.timeday} 00:00:00`,
`${payload.timeday} 23:59:59`,
];
this.searchBarFormConfig[2].extraOptions[0].startPlaceholder =
'开始时间';
this.searchBarFormConfig[2].extraOptions[0].endPlaceholder =
'结束时间';
if (payload.timeday) {
this.queryParams.recordTime = [
`${payload.timeday} 00:00:00`,
`${payload.timeday} 23:59:59`,
];
} else {
this.queryParams.recordTime = null;
}
}
} else {
this.queryParams.recordTime = null;

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: index.vue
author: liubin
date: 2023-09-04 09:34:52
@@ -19,6 +19,7 @@
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
:max-height="tableH"
@emitFun="handleEmitFun">
<!-- <method-btn
v-if="tableBtn.length"
@@ -41,10 +42,11 @@
<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default {
name: 'ExceptionAnalysis',
mixins: [basicPageMixin],
mixins: [basicPageMixin, tableHeightMixin],
components: {},
props: {},
data() {
@@ -82,14 +84,18 @@ export default {
width: 240,
prop: 'mtbf',
label: '平均故障间隔时间[MTBF](h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{
width: 240,
prop: 'mttr',
label: '平均维修时间[MTTR](h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{ width: 128, prop: 'workTime', label: '工作时长(h)' },
{ width: 128, prop: 'downTime', label: '故障时长(h)' },
{ width: 128, prop: 'workTime', label: '工作时长(h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ width: 128, prop: 'downTime', label: '故障时长(h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: 'downCount', label: '故障次数' },
],
searchBarFormConfig: [

File diff suppressed because it is too large Load Diff

View File

@@ -1,8 +1,8 @@
<!--
<!--
filename: lineChart.vue
author: liubin
date: 2023-09-04 13:45:00
description:
description:
-->
<template>
@@ -11,6 +11,7 @@
<script>
import * as echarts from 'echarts';
import edata from './data';
export default {
name: 'LineChart',
@@ -43,7 +44,7 @@ export default {
eq.okQuantity,
eq.nokQuantity,
eq.totalQuantity,
eq.passRate?.toFixed(4),
typeof eq.passRate === "number" ? eq.passRate.toFixed(4) : "0.0000"
]);
});
return {

View File

@@ -1,4 +1,4 @@
<!--
<!--
filename: index.vue
author: liubin
date: 2023-09-04 09:34:52
@@ -26,6 +26,7 @@
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
:max-height="tableH"
@emitFun="handleEmitFun"></base-table>
</el-tab-pane>
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
@@ -47,10 +48,13 @@
<script>
import moment from 'moment';
import LineChart from './components/lineChart.vue';
import { parseTime } from '@/filter/code-filter';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default {
name: 'QualityAnalysis',
components: { LineChart },
mixins: [tableHeightMixin],
props: {},
data() {
const now = new Date();
@@ -92,24 +96,6 @@ export default {
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime',
defaultSelect: [
new Date(y, m, d)
.toLocaleString()
.split('/')
.map((item, index) => {
if (index == 1 || index == 2) return item.padStart(2, '0');
return item;
})
.join('-'),
new Date(y, m, d, 23, 59, 59)
.toLocaleString()
.split('/')
.map((item, index) => {
if (index == 1 || index == 2) return item.padStart(2, '0');
return item;
})
.join('-'),
],
},
{
type: 'button',
@@ -156,22 +142,23 @@ export default {
{
// width: 160,
prop: 'inQuantity',
label: '进片数量',
label: '进片数量[片]',
},
{
// width: 160,
prop: 'outQuantity',
label: '出片数量',
label: '出片数量[片]',
},
{
// width: 160,
prop: 'nokQuantity',
label: '破损/不合格数',
label: '破损/不合格数[片]',
},
{
// width: 160,
prop: 'passRate',
label: '合格率',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
lineChartConfig: {
@@ -248,11 +235,23 @@ export default {
},
computed: {},
created() {
const end = new Date();
const start = new Date();
this.queryParams.recordTime = [
parseTime(start).substr(0, 10) + ' 00:00:00',
parseTime(end).substr(0, 10) + ' 23:59:59',
];
this.searchBarFormConfig[2].startPlaceholder = parseTime(start).substr(
0,
10
);
this.searchBarFormConfig[2].endPlaceholder = parseTime(end).substr(0, 10);
this.fillLineOptions();
this.fillProductOptions();
this.getList();
},
mounted() {
this.$refs['search-bar'].headBtnClick('search');
//this.$refs['search-bar'].headBtnClick('search');
},
methods: {
handleTabClick(tab, event) {
@@ -316,6 +315,8 @@ export default {
// debugger;
switch (btn.btnName) {
case 'search':
this.searchBarFormConfig[2].startPlaceholder = '开始时间';
this.searchBarFormConfig[2].endPlaceholder = '结束时间';
this.queryParams.lineId = btn.lineId;
this.queryParams.productId = btn.productId;
this.queryParams.recordTime = btn.recordTime

View File

@@ -1,8 +1,15 @@
<!--
<!--
* @Author: zwq
* @Date: 2024-10-29 09:47:40
* @LastEditors: zwq
* @LastEditTime: 2024-11-26 14:41:52
* @Description:
-->
<!--
filename: lineChart.vue
author: liubin
date: 2023-09-04 13:45:00
description:
description:
-->
<template>
@@ -32,6 +39,12 @@ export default {
mounted() {
this.init();
},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chart) {
this.echart.resize();
}
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
@@ -43,7 +56,10 @@ export default {
this.setOption(this.config);
},
setOption(option) {
if (this.chart) this.chart.setOption(option);
if (this.chart) this.chart.setOption(option,true);
window.addEventListener("resize", () => {
this.chart.resize();
});
},
},
};

View File

@@ -144,28 +144,18 @@ export default {
eqList: [],
graphList: [],
templateConfig: {
color: [
'#283D68',
'#FFB61F',
'#4481FF',
'#5AD8A6',
'#E97466',
'#ccc', //<=== 需按情况更新
'#ccc',
'#ccc',
'#ccc',
'#ccc',
],
grid: {
top: 48,
left: 48,
right: 24,
right: 90,
bottom: 24,
},
legend: {
top: 0,
right: 12,
padding: 6,
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
itemWidth: 16,
itemHeight: 8,
itemGap: 20,
@@ -495,6 +485,7 @@ export default {
return;
}
this.graphList.push(...newEqlist);
this.templateConfig.series = [];
newEqlist.forEach(this.setSeries);
}
this.open = false;

View File

@@ -86,7 +86,7 @@ export default class GanttGraph {
<span class="eq-name" style="margin-left: 4px;">${params.seriesName}</span>
</div>
<span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
</div>
</div>
`
}
}
@@ -112,7 +112,7 @@ export default class GanttGraph {
// top: 12 + 128 * this.gridIndex,
top: 12 + 104 * this.gridIndex,
right: 48,
left: 88,
left: 100,
height: 56
}
}
@@ -175,7 +175,7 @@ export default class GanttGraph {
nameGap: 14,
nameRotate: 0,
nameTextStyle: {
fontSize: 16,
fontSize: 12,
color: '#000A'
},
axisLine: {
@@ -325,4 +325,4 @@ export default class GanttGraph {
console.log(JSON.stringify(this.option, null, 2));
}
}
}

View File

@@ -0,0 +1,302 @@
import * as echarts from 'echarts'
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.5;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y - 16,
width: params.coordSys.width,
height: params.coordSys.height,
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
// unused
function getXaxisRange(startTime) {
return Array(24)
.fill(startTime)
.map((item, index) => {
return new Date(item + index * 3600 * 1000)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
});
}
function getTodayStart(today) {
const [y, m, d] = [
today.getFullYear(),
today.getMonth(),
today.getDate(),
];
// debugger;
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '故障', color: '#FC9C91' },
{ name: '空白', color: '#F2F4F9' },
];
export default class GanttGraph {
// tooltip - 基本是固定的
tooltip = {
trigger: 'item',
axisPointer: {
type: 'none',
},
formatter: (params) => {
// debugger;
return `
<div style="display: flex; flex-direction: column;">
<span>${new Date(params.value[1]).toLocaleTimeString()} ~ ${new Date(params.value[2]).toLocaleTimeString()}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<span class="icon" style="width: 8px; height: 8px; border-radius: 2px; background: ${params.color}"></span>
<span class="eq-name" style="margin-left: 4px;">${params.data.showName}</span>
</div>
<span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
</div>
`
}
}
grid = []
xAxis = []
yAxis = []
series = []
constructor(el, startTime) {
this.el = el;
this.startTime = new Date(startTime);
// this.startTime = new Date(new Date('2023/10/8').toLocaleDateString());
// console.log('<> Gantt Created', this.startTime);
}
// 构造一个新的 grid
makeGrid() {
return {
top: 0,
right: 20,
left: 100,
bottom: 50,
}
}
// 构造一个 xAxis
makeXaxis() {
return [
{
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(this.startTime),
max: getStartTime(this.startTime.getTime() + 3600 * 24 * 1000),
splitNumber: 10,
axisLabel: {
margin: 12,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
axisLine: {
lineStyle: {
color: '#0005',
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
]
}
// 构造一个 yAxis
makeYaxis(equipmentName) {
return [
// 主y轴
{
data: equipmentName,
}
]
}
// 构造一个 series
makeSeries(xdata) {
const bgStartTime = this.startTime.getTime();
const bgEndTime = bgStartTime + 3600 * 24 * 1000;
return [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: xdata,
},
]
}
init(data) {
if (!this.el) throw new Error('没有可供echarts初始化的容器')
if (typeof this.el == 'string') {
this.el = document.querySelector(this.el);
}
this.chart = echarts.init(this.el);
this.handleProps(data);
setTimeout(() => {
// debugger;
this.chart.setOption(this.option);
}, 200);
}
update(data) {
this.clear();
this.init(data);
}
resize() {
this.chart.resize();
}
get option() {
return {
tooltip: this.tooltip,
grid: this.grid,
xAxis: this.xAxis,
yAxis: this.yAxis,
series: this.series,
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 20,
bottom: 0,
start: 0,
end: 80,
handleIcon:
'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
showDetail: false
},
{
type: 'inside',
id: 'insideX',
xAxisIndex: 0,
filterMode: 'weakFilter',
start: 0,
end: 80,
zoomOnMouseWheel: true,
moveOnMouseMove: true
},
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: 0,
end: 100,
handleSize: 0,
showDetail: false
},
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 0,
end: 100,
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: true
}
],
}
}
// 每次 graphList 刷新都会重新渲染整个所有图表
// 可以改进的地方:添加一个 handleAdd() 方法,一次添加一个新的
handleProps(props) {
// props 是父组件的 graphList
console.log('props: ', props);
let ylist = []
let xdata = []
props.forEach((eqArr, index) => {
ylist.push(eqArr.key)
eqArr.forEach(item => {
xdata.push({
name: ['运行', '计划停机', '故障'][item.status],
showName: eqArr.key,
value: [index, item.startTime, item.startTime + item.duration * 60 * 1000, 0],
itemStyle: {
color: types[item.status].color,
}
}
)
})
});
this.grid.push(this.makeGrid());
this.xAxis.push(...this.makeXaxis());
this.yAxis.push(...this.makeYaxis(ylist));
this.series.push(...this.makeSeries(xdata))
}
// handleAdd
handleAdd() { }
clear() {
this.grid = [];
this.xAxis = [];
this.yAxis = [];
this.series = [];
this.chart.dispose();
}
// print option
print() {
console.log(JSON.stringify(this.option, null, 2));
}
}

View File

@@ -0,0 +1,529 @@
<!--
filename: index.vue
author: liubin
date: 2023-09-04 09:34:52
description: 设备状态时序图
-->
<template>
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
<el-row class="" style="
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 0;
border-radius: 8px;
">
<div class="blue-title">生产节拍时序图</div>
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" :remove-blue="true"
@select-changed="handleSearchBarSelectChange" @headBtnClick="handleSearchBarBtnClick" />
</el-row>
<el-row class="" style="
height: 1px;
flex: 1;
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 32px;
border-radius: 8px;
display: flex;
flex-direction: column;
">
<el-row :gutter="20">
<el-col :span="6">
<div class="blue-title">设备状态时序图</div>
</el-col>
<el-col :span="18" class="legend-row">
<div class="legend">
<div class="icon running"></div>
<div>运行中</div>
</div>
<div class="legend">
<div class="icon fault"></div>
<div>故障</div>
</div>
<div class="legend">
<div class="icon stop"></div>
<div>计划停机</div>
</div>
</el-col>
</el-row>
<div class="main-area" style="flex: 1; display: flex; flex-direction: column;">
<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1;"></div>
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
</div>
</el-row>
<!-- 对话框(添加 / 修改) -->
<base-dialog dialogTitle="添加设备" :dialogVisible="open" width="500px" @close="open = false" @cancel="open = false"
@confirm="submitForm">
<el-select v-if="open" style="width: 100%" v-model="queryParams.equipmentId" placeholder="请选择一个设备">
<el-option v-for="eq in eqList" :key="eq.id" :value="eq.id" :label="eq.name"></el-option>
</el-select>
</base-dialog>
</div>
</template>
<script>
import Gantt from './gantt';
export default {
name: 'SGStatus',
components: {},
props: {},
data() {
return {
chart: null,
searchBarFormConfig: [
{
type: 'select',
label: '产线',
placeholder: '请选择产线',
selectOptions: [],
param: 'lineId',
onchange: true,
},
{
type: 'select',
label: '工段',
placeholder: '请选择工段',
selectOptions: [],
param: 'sectionId',
},
// 时间段
{
type: 'datePicker',
label: '时间段',
dateType: 'date',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
placeholder: '选择日期',
param: 'recordTime',
required: true,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '添加对比',
name: 'compare',
color: 'primary',
plain: true,
},
],
queryParams: {
lineId: null,
sectionId: null,
equipmentId: null,
recordTime: null,
},
graphList: [],
existingEquipments: [],
open: false,
eqList: [],
startTime: null,
gantt: null
// demo: [
// [
// {
// equipmentName: '下片机',
// duration: 30,
// relativeDuration: 0.6,
// status: 0,
// startPos: 0,
// startTime: 1691568181000,
// },
// {
// equipmentName: '下片机',
// duration: 20,
// relativeDuration: 0.4,
// status: 2,
// startPos: 30,
// startTime: 1691569981000
// },
// ],
// ],
};
},
computed: {},
created() {
this.initProductline();
this.initWorksection();
this.initEquipment();
// this.getList();
},
mounted() { },
watch: {
graphList: {
handler(val) {
if (val && val.length) {
this.$nextTick(() => {
if (!this.gantt) {
this.gantt = new Gantt('#status-chart', this.startTime);
this.gantt.init(val);
return;
}
this.gantt.update(val);
});
}
return;
},
deep: true,
immediate: true,
},
},
methods: {
findMin() {
let min = 0;
this.graphList.forEach((arr) => {
arr.forEach((item) => {
if (min < item.startTime) min = item.startTime;
});
});
return min;
},
/** 重置查询条件 */
initQuery() {
this.queryParams.lineId = null;
this.queryParams.equipmentId = null;
this.queryParams.sectionId = null;
this.queryParams.recordTime = null;
},
/** 对象到数组的转换 */
objectToArray(obj) {
return Object.keys(obj).map((key) => {
obj[key].sort((a, b) => a.startTime - b.startTime);
obj[key].key = key;
return obj[key];
});
},
async getList() {
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/status',
method: 'get',
params: this.queryParams,
});
if (code == 0) {
this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId);
this.graphList = this.objectToArray(data);
}
},
/** 准备设备数据 */
async initEquipment() {
const { code, data } = await this.$axios({
url: '/base/equipment/listAll',
method: 'get',
});
if (code == 0) {
this.eqList = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
/** 准备产线数据 */
async initProductline() {
const { code, data } = await this.$axios({
url: '/base/production-line/listAll',
method: 'get',
});
if (code == 0) {
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
/** 准备工段数据 */
async initWorksection() {
const { code, data } = await this.$axios({
url: '/base/workshop-section/listAll',
method: 'get',
});
if (code == 0) {
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
handleSearchBarSelectChange({ param, value }) {
if (!value) {
this.searchBarFormConfig[1].selectOptions = [];
return;
}
switch (param) {
case 'lineId':
this.$axios({
url: '/base/workshop-section/listByParentId',
method: 'get',
params: {
id: value,
},
}).then(({ code, data }) => {
if (code == 0) {
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
});
}
},
handleSearchBarBtnClick({ btnName, ...payload }) {
switch (btnName) {
case 'search':
if (!payload.recordTime || payload.recordTime.length <= 0) {
this.$message.warning('请选择时间段');
return;
}
this.startTime = new Date(payload.recordTime)
this.queryParams.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || null;
this.queryParams.recordTime = payload.recordTime
? [
payload.recordTime,
new Date(
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
: null;
this.getList();
break;
case 'compare':
this.open = true;
break;
}
},
async submitForm() {
if (this.existingEquipments.indexOf(this.queryParams.equipmentId) >= 0) {
this.$message.warning('该设备已存在');
return;
}
const {sectionId,...params} = this.queryParams
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/status',
method: 'get',
params: params,
});
if (code == 0) {
const newEqlist = this.objectToArray(data);
if (!newEqlist || newEqlist.length == 0) {
this.$message.warning('该设备没有状态数据');
return;
}
this.graphList.push(newEqlist[0]);
}
this.open = false;
},
},
};
</script>
<style scoped lang="scss">
.graph {
// border: 1px solid #ccc;
// padding: 12px 12px 28px 12px;
// margin: 64px 0;
position: relative;
display: flex;
}
.graph-title {
// position: absolute;
// top: -64px;
// left: -1px;
// padding: 8px 18px;
padding: 0 12px;
font-size: 14px;
line-height: 1;
}
.graph-content {
display: flex;
flex: 1;
padding: 22px 12px;
border: 1px solid #ccc;
border-bottom-width: 2px;
border-top: none;
position: relative;
}
.graph-content::after,
.graph-content::before {
content: '';
position: absolute;
width: 3px;
height: 80%;
background: #fff;
right: -1px;
top: 0;
}
.graph-content::before {
right: unset;
left: -1px;
}
.graph-item,
.graph-item-fixed {
// height: 88px;
// width: 24px;
flex: 1;
// border: 1px solid #ccc;
position: relative;
}
.graph-item-fixed {
flex: unset;
}
.graph-item::before,
.graph-item-fixed::before {
position: absolute;
bottom: -16px;
left: 0;
content: attr(data-time);
// font-size - js
// rotate - js
// color - js, default:
color: #777;
transform-origin: left top;
transform: rotate(12deg);
}
.graph-item-fixed::after,
.graph-item::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
display: inline-block;
}
.graph-item.tick::after,
.graph-item-fixed.tick::after {
width: 1px;
height: 6px;
border-left: 1px solid #777;
}
.running {
background-color: #288AFF;
// background-color: #84f04e;
}
.waiting {
background-color: #5ad8a6;
// background-color: #409eff;
}
.fault {
// background-color: #ea5b5b;
background-color: #FC9C91;
}
.full {
// background-color: #e6a23c;
background-color: #598fff;
}
.lack {
// background-color: #a69c8d;
background-color: #7585a2;
}
.stop {
background-color: #FFDC94;
}
.legend-row {
margin: 6px 0;
padding-right: 12px;
display: flex;
justify-content: flex-end;
>.legend:not(:last-child) {
margin-right: 12px;
}
.legend {
display: flex;
align-items: center;
}
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 4px;
margin-top: 1px;
}
}
.blue-title {
position: relative;
padding: 4px 0;
padding-left: 12px;
font-size: 14px;
color: #606266;
font-weight: 700;
margin-bottom: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: 16px;
width: 4px;
border-radius: 1px;
background: #0b58ff;
}
}
.echarts__status-chart {
background: #ccc;
}
.echarts__status-chart>div {
height: 100% !important;
width: 100% !important;
}
</style>

View File

@@ -6,19 +6,28 @@
-->
<template>
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
<el-row class="" style="
<div
class="status-timegraph-container"
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
<el-row
class=""
style="
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 0;
border-radius: 8px;
">
<div class="blue-title">生产节拍时序图</div>
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" :remove-blue="true"
@select-changed="handleSearchBarSelectChange" @headBtnClick="handleSearchBarBtnClick" />
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
:remove-blue="true"
@headBtnClick="handleSearchBarBtnClick" />
</el-row>
<el-row class="" style="
<el-row
class=""
style="
height: 1px;
flex: 1;
margin-bottom: 12px;
@@ -47,24 +56,43 @@
</div>
</el-col>
</el-row>
<div class="main-area" style="flex: 1; display: flex; flex-direction: column">
<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1"></div>
<div
class="main-area"
style="flex: 1; display: flex; flex-direction: column">
<div
class="graphs"
v-show="graphList.length"
id="status-chart"
style="height: 1px; flex: 1"></div>
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
</div>
</el-row>
<!-- 对话框(添加 / 修改) -->
<base-dialog dialogTitle="添加设备" :dialogVisible="open" width="500px" @close="open = false" @cancel="open = false"
<base-dialog
dialogTitle="添加设备"
:dialogVisible="open"
width="500px"
@close="open = false"
@cancel="open = false"
@confirm="submitForm">
<el-select v-if="open" style="width: 100%" v-model="queryParams.equipmentId" placeholder="请选择一个设备">
<el-option v-for="eq in eqList" :key="eq.id" :value="eq.id" :label="eq.name"></el-option>
<el-select
v-if="open"
style="width: 100%"
v-model="queryParams.equipmentId"
placeholder="请选择一个设备">
<el-option
v-for="eq in eqList"
:key="eq.id"
:value="eq.id"
:label="eq.name"></el-option>
</el-select>
</base-dialog>
</div>
</template>
<script>
import Gantt from './chart';
import Gantt from './gantt';
export default {
name: 'SGStatus',
@@ -74,21 +102,6 @@ export default {
return {
chart: null,
searchBarFormConfig: [
{
type: 'select',
label: '产线',
placeholder: '请选择产线',
selectOptions: [],
param: 'lineId',
onchange: true,
},
{
type: 'select',
label: '工段',
placeholder: '请选择工段',
selectOptions: [],
param: 'sectionId',
},
// 时间段
{
type: 'datePicker',
@@ -119,8 +132,6 @@ export default {
},
],
queryParams: {
lineId: null,
sectionId: null,
equipmentId: null,
recordTime: null,
},
@@ -129,37 +140,41 @@ export default {
open: false,
eqList: [],
startTime: null,
gantt: null
// demo: [
// [
// {
// equipmentName: '下片机',
// duration: 30,
// relativeDuration: 0.6,
// status: 0,
// startPos: 0,
// startTime: 1691568181000,
// },
// {
// equipmentName: '下片机',
// duration: 20,
// relativeDuration: 0.4,
// status: 2,
// startPos: 30,
// startTime: 1691569981000
// },
// ],
// ],
gantt: null,
};
},
computed: {},
created() {
this.initProductline();
this.initWorksection();
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day} 00:00:00`;
this.$nextTick(() => {
this.$refs['search-bar'].formInline.recordTime = formattedDate;
});
this.queryParams.equipmentId = Number(this.$route.query.eqid);
this.startTime = new Date(formattedDate);
this.queryParams.recordTime = formattedDate
? [
formattedDate,
new Date(new Date(formattedDate).getTime() + 24 * 3600 * 1000)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
: null;
this.getList();
this.initEquipment();
// this.getList();
},
mounted() { },
mounted() {
},
watch: {
graphList: {
handler(val) {
@@ -171,7 +186,6 @@ export default {
return;
}
this.gantt.update(val);
});
}
return;
@@ -193,9 +207,7 @@ export default {
/** 重置查询条件 */
initQuery() {
this.queryParams.lineId = null;
this.queryParams.equipmentId = null;
this.queryParams.sectionId = null;
this.queryParams.recordTime = null;
},
@@ -215,7 +227,9 @@ export default {
params: this.queryParams,
});
if (code == 0) {
this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId);
this.existingEquipments = Object.values(data).map(
(eq) => eq[0].equipmentId
);
this.graphList = this.objectToArray(data);
}
},
@@ -236,65 +250,8 @@ export default {
}
},
/** 准备产线数据 */
async initProductline() {
const { code, data } = await this.$axios({
url: '/base/production-line/listAll',
method: 'get',
});
if (code == 0) {
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
/** 准备工段数据 */
async initWorksection() {
const { code, data } = await this.$axios({
url: '/base/workshop-section/listAll',
method: 'get',
});
if (code == 0) {
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
handleSearchBarSelectChange({ param, value }) {
if (!value) {
this.searchBarFormConfig[1].selectOptions = [];
return;
}
switch (param) {
case 'lineId':
this.$axios({
url: '/base/workshop-section/listByParentId',
method: 'get',
params: {
id: value,
},
}).then(({ code, data }) => {
if (code == 0) {
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
});
}
},
handleSearchBarBtnClick({ btnName, ...payload }) {
this.queryParams.equipmentId = Number(this.$route.query.eqid);
switch (btnName) {
case 'search':
if (!payload.recordTime || payload.recordTime.length <= 0) {
@@ -302,26 +259,23 @@ export default {
return;
}
this.startTime = new Date(payload.recordTime)
this.queryParams.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || null;
this.startTime = new Date(payload.recordTime);
this.queryParams.recordTime = payload.recordTime
? [
payload.recordTime,
new Date(
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
payload.recordTime,
new Date(
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
: null;
this.getList();
break;
@@ -336,10 +290,11 @@ export default {
this.$message.warning('该设备已存在');
return;
}
const { ...params } = this.queryParams;
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/status',
method: 'get',
params: this.queryParams,
params: params,
});
if (code == 0) {
const newEqlist = this.objectToArray(data);
@@ -444,7 +399,7 @@ export default {
}
.running {
background-color: #288AFF;
background-color: #288aff;
// background-color: #84f04e;
}
@@ -455,7 +410,7 @@ export default {
.fault {
// background-color: #ea5b5b;
background-color: #FC9C91;
background-color: #fc9c91;
}
.full {
@@ -469,7 +424,7 @@ export default {
}
.stop {
background-color: #FFDC94;
background-color: #ffdc94;
}
.legend-row {
@@ -478,7 +433,7 @@ export default {
display: flex;
justify-content: flex-end;
>.legend:not(:last-child) {
> .legend:not(:last-child) {
margin-right: 12px;
}
@@ -521,7 +476,7 @@ export default {
background: #ccc;
}
.echarts__status-chart>div {
.echarts__status-chart > div {
height: 100% !important;
width: 100% !important;
}

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,125 @@
<!--
* @Author: zwq
* @Date: 2025-10-11 14:27:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-15 16:47:28
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
:selectWidth="55"
@selection-change="selectChange"
:table-props="tableProps"
:page="1"
:limit="999"
:table-data="tableData"></base-table>
</div>
</template>
<script>
import { listByDeptId } from '@/api/group/Schedule';
const tableProps = [
{
prop: 'code',
label: '班组编号',
width: 140,
},
{
prop: 'name',
label: '班组名称',
width: 100,
},
{
prop: 'deptId',
label: '所属部门',
},
{
prop: 'leaderName',
label: '组长',
},
{
prop: 'remark',
label: '备注',
},
];
export default {
data() {
return {
urlOptions: {
getDataListURL: listByDeptId,
},
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: '',
},
selectedList: [],
deptId: undefined
};
},
created() {},
methods: {
init(id){
this.deptId = id
this.getDataList()
},
// 获取数据列表
getDataList() {
this.urlOptions
.getDataListURL(this.deptId)
.then((response) => {
this.tableData = response.data;
});
},
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;
},
dataFormSubmit() {
if (this.selectedList && this.selectedList.length > 0) {
this.$emit('refreshTableData', this.selectedList);
}
},
},
};
</script>

View File

@@ -0,0 +1,806 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 15:07:24
* @LastEditors: zwq
* @LastEditTime: 2025-10-17 17:01:35
* @Description:
-->
<template>
<div>
<!-- 产线信息-工艺工序圆圈 -->
<div class="circle-container">
<div v-for="(item, index) in dotArr" :key="index" class="circle-wrapper">
<div
class="circle"
:style="{
background: stepNum == index + 1 ? '#0B58FF' : '',
}">
{{ index + 1 }}
</div>
<div
class="circle-text"
:style="{
color: stepNum == index + 1 ? '#0B58FF' : '',
}">
{{ item.name }}
</div>
<!-- 圆点后面的虚线 -->
<div v-if="index < 2" class="connector" />
</div>
</div>
<div v-if="stepNum == 1">
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-position="top"
label-width="80px">
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="计划编号" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入计划编号" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计划名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入计划名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="部门">
<dept-select
style="width: 100%"
ref="deptSelect"
@DeptId="setDeptId"></dept-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="周末休假方式" prop="weekType">
<el-select
style="width: 100%"
v-model="dataForm.weekType"
placeholder="请选择周末休假方式">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="开始时间" prop="startDay">
<el-date-picker
style="width: 100%"
v-model="dataForm.startDay"
type="datetime"
value-format="timestamp"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" prop="endDay">
<el-date-picker
style="width: 100%"
v-model="dataForm.endDay"
type="datetime"
value-format="timestamp"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="倒班方式" prop="shiftType">
<el-select
style="width: 100%"
v-model="dataForm.shiftType"
placeholder="请选择倒班方式">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="同班次连排" prop="shiftSustainedNum">
<el-input
v-model="dataForm.shiftSustainedNum"
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
<el-select
style="width: 80px"
v-model="dataForm.shiftSustainedType"
slot="append">
<el-option label="日" :value="1"></el-option>
<el-option label="周" :value="2"></el-option>
<el-option label="月" :value="3"></el-option>
<el-option label="季" :value="4"></el-option>
</el-select>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
clearable
placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-if="stepNum == 2">
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
班次
</small-title>
<base-table
:table-props="tableProps1"
:page="1"
:limit="10"
:table-data="tableData1">
<method-btn
v-if="tableBtn1.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn1"
@clickBtn="handleClick1" />
</base-table>
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
班组
</small-title>
<base-table
:table-props="tableProps2"
:page="1"
:limit="10"
:table-data="tableData2"
:add-button-show="'新增'"
@emitButtonClick="addNewGroup">
<method-btn
v-if="tableBtn2.length"
slot="handleBtn"
:width="110"
label="操作"
:method-list="tableBtn2"
@clickBtn="handleClick2" />
</base-table>
</div>
<div v-if="stepNum == 3">
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
排班计划预览
<span style="font-size: 14px; color: #ff1c15">
系统将根据以下设置按班组轮班顺序依次循环每日班次生成正式排班计划请确认
<el-popover
placement="right"
title="比如三班两倒同班次连排2天不休周末排班如下"
width="300"
trigger="hover">
<el-table :data="gridData">
<el-table-column property="date"></el-table-column>
<el-table-column
property="class1"
label="班次一"></el-table-column>
<el-table-column
property="class2"
label="班次二"></el-table-column>
</el-table>
<i
slot="reference"
class="el-icon-warning-outline"
style="color: #ff1c15"></i>
</el-popover>
</span>
</small-title>
<el-tag>
{{
'计划时间:' +
parseTime(dataForm.startDay) +
' 至 ' +
parseTime(dataForm.endDay)
}}
</el-tag>
<div
style="
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
margin: 15px;
">
<div style="display: grid; grid-template-columns: 40px auto; gap: 10px">
<div class="daobanpng" />
<div>
<div style="color: rgba(0, 0, 0, 0.6)">倒班方式</div>
<div style="color: #000000">
{{ ['长白班', '两班倒', '三班倒'][dataForm.shiftType - 1] }}
</div>
</div>
</div>
<div style="display: grid; grid-template-columns: 40px auto; gap: 10px">
<div class="lianpaipng" />
<div>
<div style="color: rgba(0, 0, 0, 0.6)">同班次连排</div>
<div style="color: #000000">
{{
dataForm.shiftSustainedNum +
['日', '周', '月', '季'][dataForm.shiftSustainedType - 1]
}}
</div>
</div>
</div>
<div style="display: grid; grid-template-columns: 40px auto; gap: 10px">
<div class="xiujiapng" />
<div>
<div style="color: rgba(0, 0, 0, 0.6)">周末休假方式</div>
<div style="color: #000000">
{{ ['双休', '周六休', '周日休', '不休'][dataForm.weekType - 1] }}
</div>
</div>
</div>
<div style="display: grid; grid-template-columns: 40px auto; gap: 10px">
<div class="banzupng" />
<div>
<div style="color: rgba(0, 0, 0, 0.6)">参与班组</div>
<div style="color: #000000">
{{
tableData2
.map((item) => {
return item.name;
})
.join('/')
}}
</div>
</div>
</div>
</div>
</div>
<base-dialog
:dialogTitle="'修改班次'"
:dialogVisible="addOrUpdateVisible1"
@cancel="cancel1"
@confirm="handleConfirm1"
:destroy-on-close="true"
append-to-body
width="40%">
<edit-class
ref="editClassRef"
@refreshTableData="refreshTableData1"></edit-class>
</base-dialog>
<base-dialog
:dialogTitle="'班组选择'"
:dialogVisible="addOrUpdateVisible2"
@cancel="cancel2"
@confirm="handleConfirm2"
:destroy-on-close="true"
append-to-body
width="40%">
<add-group
ref="addGroupRef"
@refreshTableData="refreshTableData2"></add-group>
</base-dialog>
<base-dialog
:dialogTitle="'绑定产线'"
:dialogVisible="addOrUpdateVisible3"
@cancel="cancel3"
@confirm="handleConfirm3"
:destroy-on-close="true"
append-to-body
width="50%">
<bind-line
ref="bindLineRef"
@refreshTableData="refreshTableData3"></bind-line>
</base-dialog>
</div>
</template>
<script>
import deptSelect from './../deptSelect.vue';
import SmallTitle from './SmallTitle';
import { parseTime } from '@/filter/code-filter';
import editClass from './edit-class.vue';
import addGroup from './add-group.vue';
import bindLine from './bind-line.vue';
import { getCode, createStepOne, returnStepOne } from '@/api/group/Schedule';
const tableProps1 = [
{
prop: 'name',
label: '班次名称',
},
{
prop: 'startDay',
label: '开始时间',
// filter: (val) => {
// parseTime(val, '{H}:{mm}');
// },
},
{
prop: 'endDay',
label: '结束时间',
// filter: (val) => {
// parseTime(val, '{H}:{mm}');
// },
},
{
prop: 'remark',
label: '备注',
},
];
const tableProps2 = [
{
prop: 'code',
label: '班组编号',
width: 140,
},
{
prop: 'name',
label: '班组名称',
},
{
prop: 'isProduction',
label: '是否生产班组',
filter: (val) => {
return val ? '是' : '否';
},
width: 110,
},
{
prop: 'code1',
label: '产线及工段',
},
];
export default {
components: {
deptSelect,
SmallTitle,
editClass,
addGroup,
bindLine,
},
data() {
return {
dotArr: [
{
name: '基础信息',
},
{
name: '班组班次',
},
{
name: '计划确认',
},
],
stepNum: 1, // 当前第几步
//第一步参数
dataForm: {
id: undefined,
code: undefined,
name: undefined,
startDay: undefined,
endDay: undefined,
deptId: undefined,
weekType: undefined,
shiftType: undefined,
shiftSustainedNum: undefined,
shiftSustainedType: 1,
remark: undefined,
},
options1: [
{
value: 1,
label: '双休',
},
{
value: 2,
label: '周六休',
},
{
value: 3,
label: '周日休',
},
{
value: 4,
label: '不休',
},
],
options2: [
{
value: 1,
label: '长白班',
},
{
value: 2,
label: '两班倒',
},
{
value: 3,
label: '三班倒',
},
],
dataRule: {
code: [
{ required: true, message: '计划编号不能为空', trigger: 'blur' },
],
name: [
{ required: true, message: '计划名称不能为空', trigger: 'blur' },
],
startDay: [
{ required: true, message: '开始时间不能为空', trigger: 'change' },
],
endDay: [
{ required: true, message: '结束时间不能为空', trigger: 'change' },
],
weekType: [
{
required: true,
message: '周末休假方式不能为空',
trigger: 'change',
},
],
shiftType: [
{
required: true,
message: '倒班方式方式不能为空',
trigger: 'change',
},
],
shiftSustainedNum: [
{ required: true, message: '同班次连排不能为空', trigger: 'blur' },
],
},
//第二步参数
tableProps1,
tableBtn1: [
{
type: 'edit',
btnName: '编辑',
},
].filter((v) => v),
tableData1: [],
tableProps2,
tableBtn2: [
{
type: 'bind',
btnName: '绑定产线',
},
{
type: 'delete',
btnName: '删除',
},
].filter((v) => v),
tableData2: [],
addOrUpdateVisible1: false,
addOrUpdateVisible2: false,
addOrUpdateVisible3: false,
//第三步参数
gridData: [
{
date: '第1天',
class1: 'A',
class2: 'B',
},
{
date: '第2天',
class1: 'A',
class2: 'B',
},
{
date: '第3天',
class1: 'C',
class2: 'A',
},
{
date: '第4天',
class1: 'C',
class2: 'A',
},
{
date: '第5天',
class1: 'B',
class2: 'C',
},
{
date: '第6天',
class1: 'B',
class2: 'C',
},
{
date: '第7天',
class1: 'A',
class2: 'B',
},
{
date: '第8天',
class1: 'A',
class2: 'B',
},
],
};
},
methods: {
//子组件获取的部门id
setDeptId(val) {
this.dataForm.deptId = val;
},
//详情时传给子组件的部门id
setDataForm() {
this.$refs.deptSelect.setID(this.dataForm.deptId);
},
init() {
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
getCode().then((res) => {
this.dataForm.code = res.data;
});
});
},
handleClick1(val) {
this.addOrUpdateVisible1 = true;
this.$nextTick(() => {
this.$refs.editClassRef.init(val.data);
});
},
handleClick2(val) {
if (val.type === 'bind') {
this.addOrUpdateVisible3 = true;
this.$nextTick(() => {
this.$refs.bindLineRef.init(val.data.id);
});
} else if (val.type === 'delete') {
this.tableData2.splice(val.data._pageIndex - 1, 1);
}
},
upSubmit() {
if (this.stepNum == 2) {
returnStepOne(this.dataForm.id).then((res) => {
this.stepNum -= 1;
this.$emit('setSN', this.stepNum);
this.$nextTick(() => {
this.setDataForm();
});
});
}
},
nextSubmit() {
if (this.stepNum == 1) {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false;
}
if (!this.dataForm.deptId) {
this.$message('部门不能为空');
return;
}
createStepOne(this.dataForm).then((res) => {
this.dataForm.id = res.data;
this.stepNum += 1;
this.$emit('setSN', this.stepNum);
this.setTWOclass(); // 第一步提交后,根据倒班方式设置第二部班次
});
});
return;
}
if (this.stepNum == 2) {
let data = {}
data.planId = this.dataForm.id
data.groupPlanClassesBaseVOList = [] //排班-班次信息list
this.tableData1.forEach((item,index)=>{
const obj = {
sort: index+1,
name : item.name,
remark: item.remark,
startTime: {
hour:item.startDay.split(':')[0],
minute:item.startDay.split(':')[1],
},
endTime: {
hour:item.endDay.split(':')[0],
minute:item.endDay.split(':')[1],
}
}
data.groupPlanClassesBaseVOList.push(obj)
})
data.groupPlanTeamBaseVOList = [] //排班-班组信息list
this.tableData2.forEach(item=>{
const obj = {
teamId:item.id,
bindData: ''
}
data.groupPlanTeamBaseVOList.push(obj)
})
this.stepNum += 1;
this.$emit('setSN', this.stepNum);
return;
}
if (this.stepNum == 3) {
this.stepNum = 1;
this.$emit('setSN', this.stepNum);
return;
}
},
//设置第二部班次
setTWOclass() {
this.tableData1 = [];
if (this.dataForm.shiftType == 1) {
const obj = {
name: '长白班',
startDay: '8:00',
endDay: '17:00',
};
this.tableData1.push(obj);
} else if (this.dataForm.shiftType == 2) {
const obj1 = {
name: '白班',
startDay: '8:00',
endDay: '20:00',
};
const obj2 = {
name: '夜班',
startDay: '20:00',
endDay: '8:00',
};
this.tableData1.push(obj1, obj2);
} else if (this.dataForm.shiftType == 3) {
const obj1 = {
name: '早班',
startDay: '8:00',
endDay: '16:00',
};
const obj2 = {
name: '中班',
startDay: '16:00',
endDay: '00:00',
};
const obj3 = {
name: '夜班',
startDay: '00:00',
endDay: '8:00',
};
this.tableData1.push(obj1, obj2, obj3);
}
},
// 新增班组
addNewGroup() {
this.addOrUpdateVisible2 = true;
this.$nextTick(() => {
this.$refs.addGroupRef.init(this.dataForm.deptId);
});
},
cancel1() {
this.addOrUpdateVisible1 = false;
},
cancel2() {
this.addOrUpdateVisible2 = false;
},
cancel3() {
this.addOrUpdateVisible3 = false;
},
handleConfirm1() {
this.$refs.editClassRef.dataFormSubmit();
},
handleConfirm2() {
this.$refs.addGroupRef.dataFormSubmit();
},
handleConfirm3() {
this.$refs.bindLineRef.dataFormSubmit();
},
refreshTableData1(index, val) {
this.tableData1.splice(index, 1, val);
this.cancel1();
},
refreshTableData2(val) {
this.tableData2.push(...val);
this.cancel2();
},
refreshTableData3(val) {
console.log(val);
this.cancel3();
},
},
};
</script>
<style scoped>
.daobanpng {
width: 40px;
height: 40px;
background-image: url('~@/assets/images/daoban.png');
background-size: 100% 100%;
}
.lianpaipng {
width: 40px;
height: 40px;
background-image: url('~@/assets/images/lianpai.png');
background-size: 100% 100%;
}
.xiujiapng {
width: 40px;
height: 40px;
background-image: url('~@/assets/images/xiujia.png');
background-size: 100% 100%;
}
.banzupng {
width: 40px;
height: 40px;
background-image: url('~@/assets/images/banzu.png');
background-size: 100% 100%;
}
</style>
<!-- //序号圆点 -->
<style scoped>
.circle-container {
height: 110px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
width: 90%;
overflow-x: auto;
margin: auto;
}
.circle-wrapper {
position: relative;
display: flex;
align-items: center;
}
.circle {
width: 52px;
height: 52px;
border-radius: 50%;
background: #8db1ff;
font-weight: 500;
font-size: 31px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
cursor: pointer;
}
.circle-text {
position: absolute;
top: 60px;
left: -15px;
color: #8db1ff;
width: 82px;
text-align: center;
}
/* 下半圆虚线边框 */
.circle::after {
content: '';
position: absolute;
bottom: -6px; /* 2px边框 + 2px间隙 */
left: -4px;
right: -4px;
height: 30px; /* 半圆高度 */
border-radius: 0 0 60px 60px;
border: 1px dashed #0b58ff;
border-top: none;
z-index: 1;
}
.connector {
width: 160px; /* 计算连接线长度 */
height: 2px;
border-bottom: 1px dashed rgb(11, 88, 255, 1);
margin: 0 5px;
z-index: 1;
}
</style>

View File

@@ -0,0 +1,69 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-10-16 16:37:40
* @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="pid"
:defaultProps="{ label: 'name' }"
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 {
groupId: undefined,
title: ['待选', '已选'],
mode: 'transfer',
fromData: [], //左边内容
toData: [], //右边已选内容
};
},
methods: {
init(id) {
this.fromData = [];
this.toData = [];
this.groupId = id;
getGroupPlanTree().then((res) => {
this.fromData = res.data;
this.fromData.forEach((item) => {
item.productionLineId = 0;
});
});
},
// 监听穿梭框组件添加
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);
},
// 表单提交
dataFormSubmit() {
this.$emit('refreshTableData',this.toData);
},
},
};
</script>

View File

@@ -0,0 +1,114 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-10-15 16:31:11
* @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="index">
<el-input-number
v-model="dataForm.index"
: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="startDay">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="H:mm"
v-model="dataForm.startDay"
placeholder="选择日期时间"></el-time-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endDay">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="H:mm"
v-model="dataForm.endDay"
placeholder="选择日期时间"></el-time-picker>
</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,
index: undefined,
name: undefined,
startDay: undefined,
endDay: undefined,
remark: undefined,
},
_pageIndex: 1,
dataRule: {
index: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
name: [
{ required: true, message: '班次名称不能为空', trigger: 'blur' },
],
startDay: [
{ required: true, message: '开始时间不能为空', trigger: 'change' },
],
endDay: [
{ required: true, message: '结束时间不能为空', trigger: 'change' },
],
},
};
},
methods: {
init(val) {
this._pageIndex = val._pageIndex-1;
this.dataForm.index = val._pageIndex || 1;
this.dataForm.name = val.name || undefined;
this.dataForm.startDay = val.startDay || undefined;
this.dataForm.endDay = val.endDay || undefined;
this.dataForm.remark = val.remark || undefined;
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false;
}
this.$emit('refreshTableData', this._pageIndex, this.dataForm);
});
},
},
};
</script>

View File

@@ -0,0 +1,469 @@
<!--
* @Author: zwq
* @Date: 2025-10-11 14:27:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-15 16:42:28
* @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"
type="datetime"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endDay">
<el-date-picker
v-model="formInline.endDay"
type="datetime"
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="leaderName">
<el-select v-model="formInline.status" 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"
@click="buttonClick({ btnName: 'search' })">
查询
</el-button>
</el-form-item>
<el-form-item>
<span class="separateStyle"></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"></span>
</el-form-item>
<el-form-item>
<el-button
type="success"
size="small"
:plain="true"
@click="buttonClick({ btnName: 'add' })">
新增
</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="80"
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="handleConfirm">
保存草稿
</el-button>
<el-button
type="primary"
class="btnTextStyle"
size="small"
@click="handleConfirm">
{{ stepNum < 3 ? '下一步' : '确认并执行' }}
</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 { parseTime } from '@/filter/code-filter';
import { getGroupPlanPage, deleteGroupPlan } 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: 'deptId',
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: [
{
type: 'edit',
btnName: '编辑',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 1,
},
],
},
},
{
type: 'delete',
btnName: '删除',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 1,
},
],
},
},
{
type: 'detail',
btnName: '查看',
showParam: {
type: '&',
data: [
{
type: 'unequal',
name: 'status',
value: 1,
},
],
},
},
{
type: 'cancel',
btnName: '作废',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 2,
},
],
},
},
{
type: 'sync',
btnName: '同步节假日',
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'status',
value: 2,
},
{
type: 'updateFlag',
name: 'status',
value: true,
},
],
},
},
{
type: 'copy',
btnName: '复制',
},
].filter((v) => v),
tableData: [],
options: [
{
value: '1',
label: '草稿',
},
{
value: '2',
label: '已确认',
},
{
value: '3',
label: '已作废',
},
],
formInline: {
code: '',
name: '',
startDay: '',
endDay: '',
deptId: '',
status: '',
},
stepNum: 1, // 新增编辑时当前第几步
};
},
components: {
AddOrUpdate,
deptSelect,
},
created() {},
methods: {
buttonClick(val) {
switch (val.btnName) {
case 'search':
const date1 = new Date(this.formInline.startDay).getTime();
const date2 = new Date(this.formInline.endDay).getTime();
if (date1 > date2) {
this.$message('开始时间不得晚于结束时间');
return;
}
this.listQuery = {
pageNo: 1,
pageSize: 10,
total: 1,
...this.formInline,
};
this.getDataList();
break;
case 'reset':
this.formInline.name = null;
this.formInline.code = null;
this.formInline.deptId = null;
this.$refs.deptSelect.clear();
this.formInline.leaderName = null;
this.listQuery = {
pageSize: 10,
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;
},
// dialog取消
handleCancel() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
},
handleConfirm(val) {
if (val == 'up') {
this.$refs.addOrUpdate.upSubmit();
} else {
this.$refs.addOrUpdate.nextSubmit();
}
},
},
};
</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>

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