Compare commits
	
		
			19 Commits
		
	
	
		
			projects/l
			...
			projects/q
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 1a1a3a9129 | |||
| e91fcab0c8 | |||
|  | 1a0d786774 | ||
|  | 1b6e6702ed | ||
|  | f23e025974 | ||
|  | d77bebd375 | ||
| 4225ff35ae | |||
| 33fce6cb7b | |||
| dd85c50077 | |||
| c30bc48259 | |||
| 92b0b78c9d | |||
| 9fec50eccb | |||
|  | a7406e7867 | ||
|  | f3d88638f5 | ||
| acff3b68be | |||
| f24b769305 | |||
| 446fa9a0d1 | |||
| 8d741b8d8a | |||
| 2c1e1845f4 | 
							
								
								
									
										5
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						| @@ -12,8 +12,7 @@ ENV = 'development' | |||||||
| VUE_APP_TITLE = 智能监控分析系统 | VUE_APP_TITLE = 智能监控分析系统 | ||||||
|  |  | ||||||
| # 芋道管理系统/开发环境 | # 芋道管理系统/开发环境 | ||||||
| # VUE_APP_BASE_API = 'http://192.168.8.22:48080' | VUE_APP_BASE_API = 'http://172.16.32.79:48080' | ||||||
| VUE_APP_BASE_API = 'http://172.16.33.65:48082' |  | ||||||
|  |  | ||||||
| # 路由懒加载 | # 路由懒加载 | ||||||
| VUE_CLI_BABEL_TRANSPILE_MODULES = true | VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||||
| @@ -22,7 +21,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true | |||||||
| VUE_APP_TENANT_ENABLE = true | VUE_APP_TENANT_ENABLE = true | ||||||
|  |  | ||||||
| # 验证码的开关 | # 验证码的开关 | ||||||
| VUE_APP_CAPTCHA_ENABLE = true | VUE_APP_CAPTCHA_ENABLE =  true | ||||||
|  |  | ||||||
| # 文档的开关 | # 文档的开关 | ||||||
| VUE_APP_DOC_ENABLE = true | VUE_APP_DOC_ENABLE = true | ||||||
|   | |||||||
| @@ -6,7 +6,7 @@ | |||||||
|   "license": "MIT", |   "license": "MIT", | ||||||
|   "scripts": { |   "scripts": { | ||||||
|     "local": "vue-cli-service serve --mode local", |     "local": "vue-cli-service serve --mode local", | ||||||
|     "dev": "vue-cli-service serve --mode dev", |     "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --mode dev", | ||||||
|     "front": "vue-cli-service serve --mode front", |     "front": "vue-cli-service serve --mode front", | ||||||
|     "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode prod", |     "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode prod", | ||||||
|     "build:stage": "vue-cli-service build --mode stage", |     "build:stage": "vue-cli-service build --mode stage", | ||||||
| @@ -42,12 +42,10 @@ | |||||||
|   }, |   }, | ||||||
|   "dependencies": { |   "dependencies": { | ||||||
|     "@babel/parser": "7.18.4", |     "@babel/parser": "7.18.4", | ||||||
|     "@jiaminghi/data-view": "^2.10.0", |  | ||||||
|     "@riophae/vue-treeselect": "0.4.0", |     "@riophae/vue-treeselect": "0.4.0", | ||||||
|     "axios": "0.27.2", |     "axios": "0.27.2", | ||||||
|     "benz-amr-recorder": "^1.1.5", |     "benz-amr-recorder": "^1.1.5", | ||||||
|     "bpmn-js-token-simulation": "0.10.0", |     "bpmn-js-token-simulation": "0.10.0", | ||||||
|     "chinese-lunar": "^0.1.4", |  | ||||||
|     "clipboard": "2.0.8", |     "clipboard": "2.0.8", | ||||||
|     "code-brick-zj": "^1.0.2", |     "code-brick-zj": "^1.0.2", | ||||||
|     "core-js": "^3.26.0", |     "core-js": "^3.26.0", | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								public/static/videos/01.webm
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -25,10 +25,10 @@ export function getCT(data) { | |||||||
| // 获取产线平衡分析数据(new) | // 获取产线平衡分析数据(new) | ||||||
| export function getNewCTNow(data) { | export function getNewCTNow(data) { | ||||||
|   return request({ |   return request({ | ||||||
| 		url: '/analysis/production-analysis/getNewCTNow', |     url: '/analysis/production-analysis/getNewCTNow', | ||||||
| 		method: 'post', |     method: 'post', | ||||||
| 		data: data, |     data: data | ||||||
| 	}); |   }) | ||||||
| } | } | ||||||
| // 获取产线平衡分析数据趋势图(new) | // 获取产线平衡分析数据趋势图(new) | ||||||
| export function getNewCTCharts(data) { | export function getNewCTCharts(data) { | ||||||
| @@ -39,10 +39,9 @@ export function getNewCTCharts(data) { | |||||||
|   }) |   }) | ||||||
| } | } | ||||||
| // 获取产线平衡分析数据设备list(new) | // 获取产线平衡分析数据设备list(new) | ||||||
| export function getNewCTDet(data) { | export function getNewCTDet(id) { | ||||||
|   return request({ |   return request({ | ||||||
| 		url: '/analysis/production-analysis/getNewCTDet', |     url: '/analysis/production-analysis/getNewCTDet?lineId='+id, | ||||||
|     method: 'post', |     method: 'get', | ||||||
|     data:data |   }) | ||||||
| 	}); |  | ||||||
| } | } | ||||||
|   | |||||||
| @@ -61,9 +61,9 @@ export function exportFactoryExcel(query) { | |||||||
| // 获取产线设备状态 | // 获取产线设备状态 | ||||||
| export function getLineEqStatus(data) { | export function getLineEqStatus(data) { | ||||||
|   return request({ |   return request({ | ||||||
|     url: '/base/production-line/getLineEqStatus', | 		url: '/monitoring/equipment-monitor/getLineEqStatus', | ||||||
|     method: 'post', | 		method: 'post', | ||||||
|     data: data | 		data: data, | ||||||
|   }) | 	}); | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -41,16 +41,6 @@ export function getProductAuto(data) { | |||||||
|   }) |   }) | ||||||
| } | } | ||||||
|  |  | ||||||
| export function getPdlAutoReportNewSearchNow(data) { |  | ||||||
| 	return request({ |  | ||||||
| 		url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow', |  | ||||||
| 		method: 'post', |  | ||||||
| 		data: data, |  | ||||||
| 		timeout: 60000, |  | ||||||
| 	}); |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
| // 班组自动报表分页 | // 班组自动报表分页 | ||||||
| export function getTeamReportPage(data) { | export function getTeamReportPage(data) { | ||||||
|   return request({ |   return request({ | ||||||
| @@ -67,29 +57,3 @@ export function getTeamReportPageDet(id) { | |||||||
|     method: 'get', |     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, |  | ||||||
| 	}); |  | ||||||
| } |  | ||||||
|   | |||||||
| @@ -14,79 +14,3 @@ export function getSectionDataSearch(data) { | |||||||
|     data: 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', |  | ||||||
| 	}); |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,75 +0,0 @@ | |||||||
| 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', |  | ||||||
|   }) |  | ||||||
| } |  | ||||||
| @@ -1,47 +0,0 @@ | |||||||
| 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' |  | ||||||
|   }) |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
| @@ -1,51 +0,0 @@ | |||||||
| /* |  | ||||||
|  * @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 |  | ||||||
|   }) |  | ||||||
| } |  | ||||||
							
								
								
									
										20
									
								
								src/assets/icons/svg/dataBoard1.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,20 @@ | |||||||
|  | <?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="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="现场看板tc—整体产线" transform="translate(-38.175000, -126.808988)"> | ||||||
|  |             <g id="编组备份" transform="translate(38.175000, 126.808988)"> | ||||||
|  |                 <polygon id="Fill-1" fill="#CAE5DD" opacity="0" points="0 32 32 32 32 0 0 0"></polygon> | ||||||
|  |                 <path d="M24.1201333,5.07973333 L22.1468,5.07973333 L22.1468,6.3064 L24.1201333,6.3064 C24.7308,6.3064 25.2268,6.8024 25.2268,7.41306667 L25.2268,25.4530667 C25.2268,26.0650667 24.7308,26.5597333 24.1201333,26.5597333 L7.93346667,26.5597333 C7.32146667,26.5597333 6.8268,26.0650667 6.8268,25.4530667 L6.8268,7.41306667 C6.8268,6.8024 7.32146667,6.3064 7.93346667,6.3064 L10.2001333,6.3064 L10.2001333,5.07973333 L7.93346667,5.07973333 C6.64813333,5.08773333 5.6068,6.12773333 5.60013333,7.41306667 L5.60013333,25.4530667 C5.6068,26.7384 6.64813333,27.7797333 7.93346667,27.7864 L24.1334667,27.7864 C25.4188,27.7797333 26.4588,26.7384 26.4668,25.4530667 L26.4668,7.41306667 C26.4588,6.1224 25.4108,5.07973333 24.1201333,5.07973333" id="Fill-3" fill="#6EF9DE"></path> | ||||||
|  |                 <path d="M7.93333333,5.56026667 C6.90933333,5.56026667 6.08,6.3896 6.08,7.4136 L6.08,25.4536 C6.08,26.4776 6.90933333,27.3069333 7.93333333,27.3069333 L24.1333333,27.3069333 C25.156,27.3069333 25.9866667,26.4776 25.9866667,25.4536 L25.9866667,7.4136 C25.9866667,6.3896 25.156,5.56026667 24.1333333,5.56026667 L22.6,5.56026667 L22.6,5.78693333 L24.0933333,5.78693333 C24.9613333,5.78693333 25.6666667,6.49093333 25.6666667,7.36026667 L25.6666667,25.4002667 C25.6666667,26.2682667 24.9613333,26.9736 24.0933333,26.9736 L7.93333333,26.9736 C7.064,26.9736 6.36,26.2682667 6.36,25.4002667 L6.36,7.4136 C6.33066667,6.54426667 7.01066667,5.81626667 7.87866667,5.78693333 C7.89733333,5.78693333 7.91466667,5.78693333 7.93333333,5.78693333 L9.73333333,5.78693333 L9.73333333,5.50693333 L7.93333333,5.56026667 Z M24.8266667,28.2536 L7.21333333,28.2536 C6.05733333,28.2536 5.12,27.3162667 5.12,26.1602667 L5.12,6.70693333 C5.12,5.55093333 6.05733333,4.6136 7.21333333,4.6136 L10.6666667,4.6136 L10.6666667,6.78693333 L8.81333333,6.78693333 C7.97333333,6.78693333 7.29333333,7.46693333 7.29333333,8.30693333 L7.29333333,24.5602667 C7.29333333,25.3989333 7.97333333,26.0802667 8.81333333,26.0802667 L23.2266667,26.0802667 C24.0666667,26.0802667 24.7466667,25.3989333 24.7466667,24.5602667 L24.7466667,8.30693333 C24.7466667,7.46693333 24.0666667,6.78693333 23.2266667,6.78693333 L21.68,6.78693333 L21.68,4.6136 L24.8266667,4.6136 C25.9826667,4.6136 26.92,5.55093333 26.92,6.70693333 L26.92,26.1602667 C26.92,27.3162667 25.9826667,28.2536 24.8266667,28.2536 L24.8266667,28.2536 Z" id="Fill-5" fill="#6EF9DE"></path> | ||||||
|  |                 <path d="M11.3468,3.3864 L20.9068,3.3864 C21.7534667,3.3864 22.4401333,4.07306667 22.4401333,4.91973333 L22.4401333,6.1864 C22.4401333,7.03306667 21.7534667,7.71973333 20.9068,7.71973333 L11.3468,7.71973333 C10.5001333,7.71973333 9.81346667,7.03306667 9.81346667,6.1864 L9.81346667,4.91973333 C9.81346667,4.07306667 10.5001333,3.3864 11.3468,3.3864" id="Fill-7" fill="#6EF9DE"></path> | ||||||
|  |                 <path d="M21.7732,11.3864 C21.7732,12.0530667 21.5065333,12.3864 20.9598667,12.3864 L13.1065333,12.3864 C12.5732,12.3864 12.2932,12.0530667 12.2932,11.3864 C12.2932,10.7197333 12.5732,10.3997333 13.1065333,10.3997333 L20.9598667,10.3997333 C21.5065333,10.3997333 21.7732,10.7330667 21.7732,11.3864" id="Fill-9" fill="#6EF9E1"></path> | ||||||
|  |                 <path d="M10.2666667,10.4130667 L10.28,10.4130667 C10.824,10.4130667 11.2666667,10.8557333 11.2666667,11.3997333 L11.2666667,11.4130667 C11.2666667,11.9584 10.824,12.3997333 10.28,12.3997333 L10.2666667,12.3997333 C9.72133333,12.3997333 9.28,11.9584 9.28,11.4130667 L9.28,11.3997333 C9.28,10.8557333 9.72133333,10.4130667 10.2666667,10.4130667" id="Fill-11" fill="#6DF8E1"></path> | ||||||
|  |                 <path d="M21.7732,16.3597333 C21.7732,17.0264 21.3998667,17.3597333 20.6398667,17.3597333 L13.4398667,17.3597333 C12.6798667,17.3597333 12.2932,17.0264 12.2932,16.3597333 C12.2932,15.6930667 12.6798667,15.3597333 13.4398667,15.3597333 L20.6398667,15.3597333 C21.3998667,15.3597333 21.7732,15.6930667 21.7732,16.3597333" id="Fill-13" fill="#6EF9E1"></path> | ||||||
|  |                 <path d="M10.2666667,15.4130667 L10.28,15.4130667 C10.824,15.4130667 11.2666667,15.8557333 11.2666667,16.3997333 L11.2666667,16.4130667 C11.2666667,16.9584 10.824,17.3997333 10.28,17.3997333 L10.2666667,17.3997333 C9.72133333,17.3997333 9.28,16.9584 9.28,16.4130667 L9.28,16.3997333 C9.28,15.8557333 9.72133333,15.4130667 10.2666667,15.4130667" id="Fill-15" fill="#6DF8E1"></path> | ||||||
|  |                 <path d="M21.7732,21.3597333 C21.7732,22.0264 21.5065333,22.3597333 20.9598667,22.3597333 L13.1065333,22.3597333 C12.5732,22.3597333 12.2932,22.0264 12.2932,21.3597333 C12.2932,20.6930667 12.5732,20.3597333 13.1065333,20.3597333 L20.9598667,20.3597333 C21.5065333,20.3597333 21.7732,20.6930667 21.7732,21.3597333" id="Fill-17" fill="#6EF9E1"></path> | ||||||
|  |                 <path d="M10.2666667,20.3864 L10.28,20.3864 C10.824,20.3864 11.2666667,20.8290667 11.2666667,21.3730667 L11.2666667,21.3864 C11.2666667,21.9317333 10.824,22.3730667 10.28,22.3730667 L10.2666667,22.3730667 C9.72133333,22.3730667 9.28,21.9317333 9.28,21.3864 L9.28,21.3730667 C9.28,20.8290667 9.72133333,20.3864 10.2666667,20.3864" id="Fill-19" fill="#6DF8E1"></path> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 5.6 KiB | 
							
								
								
									
										18
									
								
								src/assets/icons/svg/dataBoard2.svg
									
									
									
									
									
										Normal 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> | ||||||
|  |     <defs> | ||||||
|  |         <linearGradient x1="100%" y1="81.9999999%" x2="20.318998%" y2="18.0000001%" id="linearGradient-1"> | ||||||
|  |             <stop stop-color="#4BFFC8" offset="0%"></stop> | ||||||
|  |             <stop stop-color="#45F2EC" offset="100%"></stop> | ||||||
|  |         </linearGradient> | ||||||
|  |     </defs> | ||||||
|  |     <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="现场看板tc—整体产线" transform="translate(-35.000000, -741.000000)" fill-rule="nonzero"> | ||||||
|  |             <g id="icon/可视化/柱状图" transform="translate(35.000000, 741.000000)"> | ||||||
|  |                 <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect> | ||||||
|  |                 <path d="M6.07816026,6.07816026 L6.07816026,23.4413798 L28.4022997,23.4413798 L28.4022997,25.9218397 L3.5977003,25.9218397 L3.5977003,6.07816026 L6.07816026,6.07816026 Z M13.5195401,6.07816026 L13.5195401,22.2011498 L8.55862018,22.2011498 L8.55862018,6.07816026 L13.5195401,6.07816026 Z M20.9609199,11.0390801 L20.9609199,22.2011498 L16,22.2011498 L16,11.0390801 L20.9609199,11.0390801 Z M28.4022997,16 L28.4022997,22.2011498 L23.4413798,22.2011498 L23.4413798,16 L28.4022997,16 Z" id="形状" fill="url(#linearGradient-1)"></path> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 1.5 KiB | 
							
								
								
									
										18
									
								
								src/assets/icons/svg/dataBoard3.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,18 @@ | |||||||
|  | <?xml version="1.0" encoding="UTF-8"?> | ||||||
|  | <svg width="27px" height="32px" viewBox="0 0 27 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||||
|  |     <title>产线备份 3</title> | ||||||
|  |     <defs> | ||||||
|  |         <linearGradient x1="100%" y1="84.4142661%" x2="20.318998%" y2="15.5857339%" id="linearGradient-1"> | ||||||
|  |             <stop stop-color="#4BFFC8" offset="0%"></stop> | ||||||
|  |             <stop stop-color="#45F2EC" offset="100%"></stop> | ||||||
|  |         </linearGradient> | ||||||
|  |     </defs> | ||||||
|  |     <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="现场看板tc—整体产线" transform="translate(-456.000000, -740.000000)" fill-rule="nonzero"> | ||||||
|  |             <g id="产线备份-3" transform="translate(456.000000, 740.000000)"> | ||||||
|  |                 <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="27" height="32"></rect> | ||||||
|  |                 <path d="M5.9634842,21.3256682 C5.8209113,21.3358884 5.67787363,21.3358884 5.53530073,21.3256682 L5.53152795,21.3256682 C4.70985419,21.2655042 3.9028068,20.8665317 3.27496659,20.1284294 C1.90834447,18.5219016 1.90834447,15.9172034 3.27496659,14.3106756 C3.5291373,14.011848 3.81269745,13.7686207 4.11471142,13.5809616 L4.11389125,13.5765264 L4.1789034,13.5420735 C4.26583759,13.4907514 4.35456706,13.4437443 4.44485723,13.4011765 L16.0336968,7.2612301 L16.0353372,7.27016472 C18.3137697,6.10911436 21.061777,6.62333696 22.9243013,8.8128968 C25.3585662,11.6745456 25.3585662,16.314119 22.9243013,19.1757678 C21.7290674,20.580881 20.1691859,21.2960361 18.6027704,21.3212973 L18.6035632,21.3256682 L5.9634842,21.3256682 Z M5.625,20 C6.86761875,20 7.875,18.8061 7.875,17.3333333 C7.875,15.8605667 6.86761875,14.6666667 5.625,14.6666667 C4.382325,14.6666667 3.375,15.8605667 3.375,17.3333333 C3.375,18.8061 4.382325,20 5.625,20 Z M18.5625,18.6666667 C20.737088,18.6666667 22.5,16.5773202 22.5,14 C22.5,11.4226798 20.737088,9.33333333 18.5625,9.33333333 C16.3878602,9.33333333 14.625,11.4226798 14.625,14 C14.625,16.5773202 16.3878602,18.6666667 18.5625,18.6666667 Z M4.92857143,22.6666667 L22.5,22.6666667 L22.5,24.8888889 C22.5,25.1343611 22.3081339,25.3333333 22.0714286,25.3333333 L4.5,25.3333333 L4.5,23.1111111 C4.5,22.8656389 4.69186607,22.6666667 4.92857143,22.6666667 Z" id="形状" fill="url(#linearGradient-1)"></path> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 2.3 KiB | 
							
								
								
									
										18
									
								
								src/assets/icons/svg/dataBoard4.svg
									
									
									
									
									
										Normal 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> | ||||||
|  |     <defs> | ||||||
|  |         <linearGradient x1="99.4683184%" y1="100%" x2="20.6346149%" y2="7.84095011e-14%" id="linearGradient-1"> | ||||||
|  |             <stop stop-color="#4BFFC8" offset="0%"></stop> | ||||||
|  |             <stop stop-color="#45F2EC" offset="100%"></stop> | ||||||
|  |         </linearGradient> | ||||||
|  |     </defs> | ||||||
|  |     <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="现场看板tc—整体产线" transform="translate(-1514.000000, -127.000000)" fill-rule="nonzero"> | ||||||
|  |             <g id="icon/可视化/模块" transform="translate(1514.000000, 127.000000)"> | ||||||
|  |                 <rect id="矩形" fill="#000000" opacity="0" x="0" y="7.10542736e-14" width="32" height="32"></rect> | ||||||
|  |                 <path d="M25.7527221,14.1816202 L24.188579,14.1816202 L24.188579,9.49373791 C24.1860753,8.90287145 23.7063759,8.4252046 23.1155041,8.42520991 L17.3681876,8.42520991 L17.3681876,6.56551655 C17.370851,5.66122185 17.0084214,4.79412914 16.363022,4.1607133 C15.7176226,3.52729745 14.8438903,3.18118084 13.9398043,3.20079015 C12.066652,3.28658042 10.6006443,4.84522051 10.629641,6.72011209 L10.629641,8.42520991 L4.88232453,8.42520991 C4.29145277,8.4252046 3.81175331,8.90287145 3.80921104,9.49373791 L3.80921104,13.0994515 C3.80682438,13.385621 3.9188086,13.6609038 4.12031265,13.8641155 C4.32181669,14.0673272 4.59614473,14.1816305 4.88232453,14.1816202 L5.48251897,14.1816202 C7.35572581,14.1525356 8.91367406,15.6158797 9.00184091,17.4872366 C9.01900932,18.3913465 8.67055578,19.2641187 8.03543236,19.9078018 C7.40030895,20.5514848 6.53227944,20.9115903 5.62802066,20.9065261 L4.88232453,20.9065261 C4.28968163,20.9065261 3.80921104,21.3869581 3.80921104,21.979601 L3.80921104,27.7269175 C3.80921104,28.3195604 4.28968163,28.8000021 4.88232453,28.8000021 L9.55656609,28.8000021 C9.84153405,28.8012076 10.1151815,28.6885421 10.3166861,28.4870375 C10.5181907,28.2855329 10.6308562,28.0118854 10.629641,27.7269175 L10.629641,27.1949269 C10.6006443,25.3200353 12.066652,23.7613953 13.9398043,23.675605 C14.8438903,23.6559957 15.7176226,24.0021123 16.363022,24.6355281 C17.0084214,25.268944 17.370851,26.1360367 17.3681876,27.0403314 L17.3681876,27.7269175 C17.3669784,28.0110957 17.479021,28.2840495 17.6795401,28.4854219 C17.8800592,28.6867943 18.1525348,28.8000021 18.4367156,28.8000021 L23.1155041,28.8000021 C23.708147,28.8000021 24.188579,28.3195604 24.188579,27.7269175 L24.188579,20.9065261 L25.9027707,20.9065261 C26.8070472,20.910389 27.6746078,20.5491212 28.3088772,19.9045802 C28.9431467,19.2600392 29.290432,18.3867874 29.272044,17.4826896 C29.1815049,15.6131286 27.6242468,14.1524446 25.7527221,14.1816202 Z" id="路径" fill="url(#linearGradient-1)"></path> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 2.9 KiB | 
							
								
								
									
										11
									
								
								src/assets/icons/svg/fullScreenView.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,11 @@ | |||||||
|  | <?xml version="1.0" encoding="UTF-8"?> | ||||||
|  | <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||||
|  |     <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)"> | ||||||
|  |             <g id="编组-54" transform="translate(1866.000000, 36.000000)"> | ||||||
|  |                 <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect> | ||||||
|  |                 <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 4.1 KiB | 
| @@ -1,18 +1 @@ | |||||||
| <?xml version="1.0" encoding="UTF-8"?> | <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> | ||||||
| <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: 7.3 KiB After Width: | Height: | Size: 421 B | 
| @@ -1,12 +0,0 @@ | |||||||
| <?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> |  | ||||||
| Before Width: | Height: | Size: 2.4 KiB | 
							
								
								
									
										9
									
								
								src/assets/icons/svg/unFullScreenView.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,9 @@ | |||||||
|  | <?xml version="1.0" encoding="UTF-8"?> | ||||||
|  | <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||||
|  |     <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="编组-54备份"> | ||||||
|  |             <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect> | ||||||
|  |             <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 3.9 KiB | 
| @@ -1,18 +0,0 @@ | |||||||
| <?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> |  | ||||||
| Before Width: | Height: | Size: 7.3 KiB | 
| Before Width: | Height: | Size: 2.6 KiB | 
| Before Width: | Height: | Size: 3.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/arrDown.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 595 B | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/arrUp.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 550 B | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/background.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 8.9 MiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/center-bottom.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 33 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/center-top.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 92 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/centerNumB.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 16 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/centerNumY.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 46 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/data-board-title.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 49 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/defectNum.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 64 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/dotG.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/dotR.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/dotY.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/eq-tip.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 91 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/head.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 107 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/left-bottom.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 36 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/left-top.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 58 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/leftTopDataBox.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 113 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/leftTopIcon1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 14 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/leftTopIcon2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 5.9 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/leftbar.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.4 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/numberBox.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 16 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/ranking1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 16 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/ranking2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 14 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/ranking3.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 14 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/rankingBg1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 48 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/rankingBg2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 45 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/right-bottom.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 55 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/rightbar.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.5 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/dataBoard/time-choose.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 1.7 KiB | 
| Before Width: | Height: | Size: 2.3 KiB | 
| Before Width: | Height: | Size: 2.1 KiB | 
| @@ -81,7 +81,7 @@ export default { | |||||||
|     border: none; |     border: none; | ||||||
|     background: #fff; |     background: #fff; | ||||||
|     border-radius: 8px; |     border-radius: 8px; | ||||||
|     padding: 16px; |     padding: 15px; | ||||||
|     color: #888; |     color: #888; | ||||||
|     letter-spacing: 2px; |     letter-spacing: 2px; | ||||||
|     flex: 1; |     flex: 1; | ||||||
|   | |||||||
| @@ -9,7 +9,6 @@ import store from './store'; | |||||||
| import router from './router'; | import router from './router'; | ||||||
| import directive from './directive'; // directive | import directive from './directive'; // directive | ||||||
| import plugins from './plugins'; // plugins | import plugins from './plugins'; // plugins | ||||||
| import dataV from '@jiaminghi/data-view' |  | ||||||
|  |  | ||||||
| import './assets/icons'; // icon | import './assets/icons'; // icon | ||||||
| import './permission'; // permission control | import './permission'; // permission control | ||||||
| @@ -22,6 +21,7 @@ import { | |||||||
| 	handleTree, | 	handleTree, | ||||||
| 	addBeginAndEndTime, | 	addBeginAndEndTime, | ||||||
| 	divide, | 	divide, | ||||||
|  | 	formatThousands | ||||||
| } from '@/utils/ruoyi'; | } from '@/utils/ruoyi'; | ||||||
| import Pagination from '@/components/Pagination'; | import Pagination from '@/components/Pagination'; | ||||||
| // 自定义表格工具扩展 | // 自定义表格工具扩展 | ||||||
| @@ -46,6 +46,7 @@ Vue.prototype.resetForm = resetForm; | |||||||
| Vue.prototype.getDictDatas = getDictDatas; | Vue.prototype.getDictDatas = getDictDatas; | ||||||
| Vue.prototype.getDictDatas2 = getDictDatas2; | Vue.prototype.getDictDatas2 = getDictDatas2; | ||||||
| Vue.prototype.getDictDataLabel = getDictDataLabel; | Vue.prototype.getDictDataLabel = getDictDataLabel; | ||||||
|  | Vue.prototype.formatThousands = formatThousands; | ||||||
| Vue.prototype.DICT_TYPE = DICT_TYPE; | Vue.prototype.DICT_TYPE = DICT_TYPE; | ||||||
| Vue.prototype.handleTree = handleTree; | Vue.prototype.handleTree = handleTree; | ||||||
| Vue.prototype.addBeginAndEndTime = addBeginAndEndTime; | Vue.prototype.addBeginAndEndTime = addBeginAndEndTime; | ||||||
| @@ -78,7 +79,6 @@ Vue.use(directive); | |||||||
| Vue.use(plugins); | Vue.use(plugins); | ||||||
| Vue.use(VueMeta); | Vue.use(VueMeta); | ||||||
| // Vue.use(hljs.vuePlugin); | // Vue.use(hljs.vuePlugin); | ||||||
| Vue.use(dataV); |  | ||||||
|  |  | ||||||
| // bpmnProcessDesigner 需要引入 | // bpmnProcessDesigner 需要引入 | ||||||
| import MyPD from '@/components/bpmnProcessDesigner/package/index.js'; | import MyPD from '@/components/bpmnProcessDesigner/package/index.js'; | ||||||
|   | |||||||
| @@ -76,7 +76,7 @@ export const constantRoutes = [ | |||||||
|     children: [ |     children: [ | ||||||
|       { |       { | ||||||
|         path: "index", |         path: "index", | ||||||
|         component: (resolve) => require(["@/views/home/index"], resolve), |         component: (resolve) => require(["@/views/core/base/factory/index"], resolve), | ||||||
|         name: "首页", |         name: "首页", | ||||||
|         meta: { title: "首页", icon: "dashboard", affix: true }, |         meta: { title: "首页", icon: "dashboard", affix: true }, | ||||||
|         hidden: true |         hidden: true | ||||||
|   | |||||||
| @@ -295,3 +295,15 @@ export function getPath(path) { | |||||||
|   } |   } | ||||||
|   return Math.floor(divisor/dividend*100)/100; |   return Math.floor(divisor/dividend*100)/100; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | // 通用千分位格式化函数 | ||||||
|  | export function formatThousands(value) { | ||||||
|  |   if (value === null || value === undefined) return '0' | ||||||
|  |    | ||||||
|  |   // 清理已有逗号并转为数字 | ||||||
|  |   const numValue = Number(String(value).replace(/,/g, '')) | ||||||
|  |   if (isNaN(numValue)) return '0' | ||||||
|  |  | ||||||
|  |   // 支持小数处理 | ||||||
|  |   return numValue.toLocaleString('en-US') | ||||||
|  | } | ||||||
							
								
								
									
										116
									
								
								src/views/base/dataBoard/components/CenterBottomL.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,116 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='centerBottomL'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard3" class='icon'/> | ||||||
|  |       <span>本月数据</span> | ||||||
|  |     </div> | ||||||
|  |     <div class='dataBox' style='top:50px'> | ||||||
|  |       <p> | ||||||
|  |         <span class='text'>总投入片数</span> | ||||||
|  |         <span class='precent' :class='{precentR:monthData?.inputNumChange>=0,precentG:monthData?.inputNumChange<0}'>{{monthData?.inputNumChange || '-'}}%</span> | ||||||
|  |         <img v-show='monthData?.inputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'> | ||||||
|  |         <img v-show='monthData?.inputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'> | ||||||
|  |       </p> | ||||||
|  |       <p class='num'>{{monthData?.inputNum ? formatThousands(monthData.inputNum) : '-'}}</p> | ||||||
|  |     </div> | ||||||
|  |     <div class='dataBox'style='top:180px'> | ||||||
|  |       <p> | ||||||
|  |         <span class='text'>总生产片数</span> | ||||||
|  |         <span class='precent' :class='{precentR:monthData?.outputNumChange>=0,precentG:monthData?.outputNumChange<0}'>{{monthData?.outputNumChange || '-'}}%</span> | ||||||
|  |         <img v-show='monthData?.outputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'> | ||||||
|  |         <img v-show='monthData?.outputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'> | ||||||
|  |       </p> | ||||||
|  |       <p class='num'>{{monthData?.outputNum ? formatThousands(monthData.outputNum) : '-'}}</p> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'CenterBottomL', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => { | ||||||
|  |         if (item.dataType === "本月") { | ||||||
|  |           this.monthData = item | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       monthData:{} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: {} | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .centerBottomL { | ||||||
|  |   width: 337px; | ||||||
|  |   height: 332px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/center-bottom.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   left: 440px; | ||||||
|  |   bottom:23px; | ||||||
|  |   .title { | ||||||
|  |     margin: 7px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 33px; | ||||||
|  |       height: 33px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |       margin-top: 5px; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .dataBox { | ||||||
|  |     width: 290px; | ||||||
|  |     height: 135px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/numberBox.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     padding:22px 0 0 16px; | ||||||
|  |     left: 24px; | ||||||
|  |     p{ | ||||||
|  |       margin: 0; | ||||||
|  |     } | ||||||
|  |     .text { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 20px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       letter-spacing: 2px; | ||||||
|  |       margin-right: 8px; | ||||||
|  |     } | ||||||
|  |     .precent { | ||||||
|  |       font-size: 18px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |     } | ||||||
|  |     .precentR { | ||||||
|  |       color: #FF271D; | ||||||
|  |     } | ||||||
|  |     .precentG { | ||||||
|  |       color: #34F716; | ||||||
|  |     } | ||||||
|  |     .num { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 38px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       margin-top: 5px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										100
									
								
								src/views/base/dataBoard/components/CenterBottomR.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,100 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='centerBottomR'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard3" class='icon'/> | ||||||
|  |       <span>上月数据</span> | ||||||
|  |     </div> | ||||||
|  |     <div class='dataBox' style='top:50px'> | ||||||
|  |       <p> | ||||||
|  |         <span class='text'>总投入片数</span> | ||||||
|  |       </p> | ||||||
|  |       <p class='num'>{{lastMonthData?.inputNum ? formatThousands(lastMonthData.inputNum) : '-'}}</p> | ||||||
|  |     </div> | ||||||
|  |     <div class='dataBox'style='top:180px'> | ||||||
|  |       <p> | ||||||
|  |         <span class='text'>总生产片数</span> | ||||||
|  |       </p> | ||||||
|  |       <p class='num'>{{lastMonthData?.outputNum ? formatThousands(lastMonthData.outputNum) : '-'}}</p> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'CenterBottomR', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => { | ||||||
|  |         if (item.dataType === "上月") { | ||||||
|  |           this.lastMonthData = item | ||||||
|  |         }  | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       lastMonthData:{} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: {} | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .centerBottomR { | ||||||
|  |   width: 337px; | ||||||
|  |   height: 332px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/center-bottom.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   left: 791px; | ||||||
|  |   bottom:23px; | ||||||
|  |   .title { | ||||||
|  |     margin: 7px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 33px; | ||||||
|  |       height: 33px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |       margin-top: 5px; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .dataBox { | ||||||
|  |     width: 290px; | ||||||
|  |     height: 135px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/numberBox.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     padding:22px 0 0 16px; | ||||||
|  |     left: 24px; | ||||||
|  |     p{ | ||||||
|  |       margin: 0; | ||||||
|  |     } | ||||||
|  |     .text { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 20px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       letter-spacing: 2px; | ||||||
|  |       margin-right: 8px; | ||||||
|  |     } | ||||||
|  |     .num { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 38px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       margin-top: 5px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										352
									
								
								src/views/base/dataBoard/components/CenterTop.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,352 @@ | |||||||
|  | <template> | ||||||
|  |   <div ref="centerTopBox" class='centerTopBox'> | ||||||
|  |     <div> | ||||||
|  |       <video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video> | ||||||
|  |       <div | ||||||
|  |         class='eqTipBox' | ||||||
|  |         v-show='showTooltip' | ||||||
|  |         :style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'" | ||||||
|  |       > | ||||||
|  |         <p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p> | ||||||
|  |         <p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p> | ||||||
|  |         <p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p> | ||||||
|  |         <p><span class='eqTipTitle'>报警状态:</span> | ||||||
|  |           <span class='eqTipNum'> | ||||||
|  |             <img v-show='eqTipMsg.alarm' :src='dotY' width='16'/> | ||||||
|  |             <img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/> | ||||||
|  |             {{eqTipMsg.alarm?'报警':'未报警'}} | ||||||
|  |           </span> | ||||||
|  |         </p> | ||||||
|  |         <p><span class='eqTipTitle'>在线状态:</span> | ||||||
|  |           <span class='eqTipNum'> | ||||||
|  |             <img v-show='eqTipMsg.status' :src='dotG' width='16'/> | ||||||
|  |             <img v-show='!eqTipMsg.status' :src='dotR' width='16'/> | ||||||
|  |             {{eqTipMsg.status?'在线':'离线'}} | ||||||
|  |           </span> | ||||||
|  |         </p> | ||||||
|  |       </div> | ||||||
|  |       <!-- 设备 --> | ||||||
|  |       <div class='eqBox'> | ||||||
|  |         <!-- line-从上到下-从右往左 --> | ||||||
|  |         <span  | ||||||
|  |           v-for='(item,index) in eqList' | ||||||
|  |           :key='index' | ||||||
|  |           :style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'" | ||||||
|  |           @mouseenter="handleMouseEnter(item, $event)" | ||||||
|  |           @mouseleave="handleMouseLeave" | ||||||
|  |         ></span> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <div class='centerTopTopBox'> | ||||||
|  |       <div style='display: inline-block;'> | ||||||
|  |         <img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'> | ||||||
|  |         <p class='num'>{{dataObj?.productRate || '-'}}%</p> | ||||||
|  |         <p class='title'>成品率</p> | ||||||
|  |       </div> | ||||||
|  |       <div style='display: inline-block;'> | ||||||
|  |         <img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'> | ||||||
|  |         <p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p> | ||||||
|  |         <p class='title' style='color:#FFB625'>今日产量</p> | ||||||
|  |       </div> | ||||||
|  |       <div style='display: inline-block;'> | ||||||
|  |         <img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'> | ||||||
|  |         <p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p> | ||||||
|  |         <p class='title' style='color:#FFB625'>本月产量</p> | ||||||
|  |       </div> | ||||||
|  |       <div style='display: inline-block;'> | ||||||
|  |         <img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'> | ||||||
|  |         <p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p> | ||||||
|  |         <p class='title'>设备报警数</p> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'CenterTop', | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       showTooltip:false, | ||||||
|  |       tooltipStyle: { | ||||||
|  |         left: 0, | ||||||
|  |         top: 0 | ||||||
|  |       }, | ||||||
|  |       dotY:require('../../../../assets/images/dataBoard/dotY.png'), | ||||||
|  |       dotR:require('../../../../assets/images/dataBoard/dotR.png'), | ||||||
|  |       dotG:require('../../../../assets/images/dataBoard/dotG.png'), | ||||||
|  |       eqList:[ | ||||||
|  |         {name:'A1-磨边机-1',id:100301,w:70,h:18,l:830,t:160}, | ||||||
|  |         {name:'A1-磨边机-2',id:100302,w:70,h:18,l:830,t:183}, | ||||||
|  |         {name:'A1-磨边机-3',id:100303,w:70,h:18,l:832,t:206}, | ||||||
|  |         {name:'A1-磨边后清洗机-1',id:100401,w:30,h:15,l:798,t:160}, | ||||||
|  |         {name:'A1-磨边后清洗机-2',id:100402,w:30,h:15,l:798,t:183}, | ||||||
|  |         {name:'A1-磨边后清洗机-3',id:100403,w:30,h:15,l:800,t:206}, | ||||||
|  |         {name:'A1-打孔机-1',id:100501,w:13,h:12,l:730,t:163}, | ||||||
|  |         {name:'A1-打孔机-2',id:100502,w:13,h:12,l:730,t:187}, | ||||||
|  |         {name:'A1-打孔机-3',id:100503,w:13,h:12,l:730,t:210}, | ||||||
|  |         {name:'A1-打孔后清洗机-1',id:100601,w:32,h:15,l:665,t:160}, | ||||||
|  |         {name:'A1-打孔后清洗机-2',id:100602,w:32,h:15,l:665,t:183}, | ||||||
|  |         {name:'A1-打孔后清洗机-3',id:100603,w:32,h:15,l:665,t:206}, | ||||||
|  |         {name:'A1-丝印机-1',id:100701,w:30,h:12,l:605,t:163}, | ||||||
|  |         {name:'A1-丝印机-2',id:100702,w:30,h:12,l:605,t:187}, | ||||||
|  |         {name:'A1-丝印机-3',id:100703,w:30,h:12,l:605,t:210}, | ||||||
|  |         {name:'A1-丝印后固化机-1',id:101301,w:37,h:12,l:558,t:163}, | ||||||
|  |         {name:'A1-丝印后固化机-2',id:101302,w:37,h:12,l:558,t:187}, | ||||||
|  |         {name:'A1-丝印后固化机-3',id:101303,w:37,h:12,l:558,t:210}, | ||||||
|  |         {name:'A1-钢化炉',id:101401,w:75,h:15,l:382,t:209}, | ||||||
|  |         {name:'A1-包装清洗机-1',id:101501,w:30,h:15,l:228,t:173}, | ||||||
|  |         {name:'A1-包装清洗机-2',id:101502,w:30,h:15,l:228,t:206}, | ||||||
|  |         {name:'A1-铺纸机-1',id:101601,w:18,h:15,l:188,t:175}, | ||||||
|  |         {name:'A1-铺纸机-2',id:101602,w:18,h:15,l:188,t:206}, | ||||||
|  |  | ||||||
|  |         {name:'A2-磨边机-1',id:200301,w:70,h:18,l:832,t:233}, | ||||||
|  |         {name:'A2-磨边机-2',id:200302,w:70,h:18,l:833,t:257}, | ||||||
|  |         {name:'A2-磨边机-3',id:200303,w:70,h:18,l:834,t:281}, | ||||||
|  |         {name:'A2-磨边后清洗机-1',id:200401,w:30,h:15,l:800,t:233}, | ||||||
|  |         {name:'A2-磨边后清洗机-2',id:200402,w:30,h:15,l:801,t:257}, | ||||||
|  |         {name:'A2-磨边后清洗机-3',id:200403,w:30,h:15,l:802,t:281}, | ||||||
|  |         {name:'A2-打孔机-1',id:200501,w:13,h:12,l:731,t:240}, | ||||||
|  |         {name:'A2-打孔机-2',id:200502,w:13,h:12,l:731,t:262}, | ||||||
|  |         {name:'A2-打孔机-3',id:200503,w:13,h:12,l:731,t:285}, | ||||||
|  |         {name:'A2-打孔后清洗机-1',id:200601,w:32,h:15,l:666,t:234}, | ||||||
|  |         {name:'A2-打孔后清洗机-2',id:200602,w:32,h:15,l:666,t:258}, | ||||||
|  |         {name:'A2-打孔后清洗机-3',id:200603,w:32,h:15,l:666,t:282}, | ||||||
|  |         {name:'A2-丝印机-1',id:200701,w:30,h:12,l:605,t:238}, | ||||||
|  |         {name:'A2-丝印机-2',id:200702,w:30,h:12,l:605,t:262}, | ||||||
|  |         {name:'A2-丝印机-3',id:200703,w:30,h:12,l:605,t:286}, | ||||||
|  |         {name:'A2-丝印后固化机-1',id:201301,w:37,h:12,l:558,t:238}, | ||||||
|  |         {name:'A2-丝印后固化机-2',id:201302,w:37,h:12,l:558,t:262}, | ||||||
|  |         {name:'A2-丝印后固化机-3',id:201303,w:37,h:12,l:558,t:286}, | ||||||
|  |         {name:'A2-钢化炉',id:201401,w:75,h:15,l:382,t:238}, | ||||||
|  |         {name:'A2-包装清洗机-1',id:201501,w:30,h:15,l:228,t:234}, | ||||||
|  |         {name:'A2-包装清洗机-2',id:201502,w:30,h:15,l:228,t:267}, | ||||||
|  |         {name:'A2-铺纸机-1',id:201601,w:18,h:15,l:187,t:234}, | ||||||
|  |         {name:'A2-铺纸机-2',id:201602,w:18,h:15,l:186,t:267}, | ||||||
|  |  | ||||||
|  |         {name:'A3-磨边机-1',id:300301,w:70,h:18,l:834,t:318}, | ||||||
|  |         {name:'A3-磨边机-2',id:300302,w:70,h:18,l:834,t:342}, | ||||||
|  |         {name:'A3-磨边后清洗机-1',id:300401,w:30,h:15,l:802,t:319}, | ||||||
|  |         {name:'A3-磨边后清洗机-2',id:300402,w:30,h:15,l:802,t:342}, | ||||||
|  |         {name:'A3-打孔机-1',id:300501,w:13,h:12,l:731,t:324}, | ||||||
|  |         {name:'A3-打孔机-2',id:300502,w:13,h:12,l:731,t:348}, | ||||||
|  |         {name:'A3-打孔后清洗机-1',id:300601,w:32,h:15,l:666,t:320}, | ||||||
|  |         {name:'A3-打孔后清洗机-2',id:300602,w:32,h:15,l:666,t:342}, | ||||||
|  |         {name:'A3-丝印机-1',id:300701,w:30,h:12,l:605,t:324}, | ||||||
|  |         {name:'A3-丝印机-2',id:300702,w:30,h:12,l:605,t:348}, | ||||||
|  |         {name:'A3-一次镀膜机-1',id:300801,w:20,h:15,l:553,t:322}, | ||||||
|  |         {name:'A3-一次镀膜机-2',id:300802,w:20,h:15,l:553,t:346}, | ||||||
|  |         {name:'A3-丝印后固化机-1',id:301301,w:37,h:12,l:506,t:324}, | ||||||
|  |         {name:'A3-丝印后固化机-2',id:301302,w:37,h:12,l:506,t:347}, | ||||||
|  |         {name:'A3-钢化炉',id:301401,w:75,h:15,l:340,t:346}, | ||||||
|  |         {name:'A3-包装清洗机-1',id:301501,w:30,h:15,l:240,t:343}, | ||||||
|  |         {name:'A3-铺纸机-1',id:301601,w:18,h:15,l:200,t:343}, | ||||||
|  |         {name:'A3-铺纸机-2',id:301602,w:18,h:15,l:170,t:343}, | ||||||
|  |  | ||||||
|  |         {name:'A4-磨边机-1',id:400301,w:70,h:18,l:838,t:380}, | ||||||
|  |         {name:'A4-磨边机-2',id:400302,w:70,h:18,l:838,t:405}, | ||||||
|  |         {name:'A4-磨边机-3',id:400303,w:70,h:18,l:839,t:428}, | ||||||
|  |         {name:'A4-磨边后清洗机-1',id:400401,w:30,h:15,l:804,t:380}, | ||||||
|  |         {name:'A4-磨边后清洗机-2',id:400402,w:30,h:15,l:805,t:405}, | ||||||
|  |         {name:'A4-磨边后清洗机-3',id:400403,w:30,h:15,l:806,t:427}, | ||||||
|  |         {name:'A4-一次镀膜机-1',id:400801,w:20,h:15,l:707,t:381}, | ||||||
|  |         {name:'A4-一次镀膜机-2',id:400802,w:20,h:15,l:707,t:407}, | ||||||
|  |         {name:'A4-一次镀膜机-3',id:400803,w:20,h:15,l:707,t:429}, | ||||||
|  |         {name:'A4-一次固化机-1',id:401001,w:37,h:12,l:660,t:383}, | ||||||
|  |         {name:'A4-一次固化机-2',id:401002,w:37,h:12,l:660,t:409}, | ||||||
|  |         {name:'A4-一次固化机-3',id:401003,w:37,h:12,l:660,t:431}, | ||||||
|  |         {name:'A4-二次镀膜机-1',id:401101,w:20,h:15,l:605,t:382}, | ||||||
|  |         {name:'A4-二次镀膜机-2',id:401102,w:20,h:15,l:605,t:408}, | ||||||
|  |         {name:'A4-二次镀膜机-3',id:401103,w:20,h:15,l:605,t:430}, | ||||||
|  |         {name:'A4-二次固化机-1',id:401201,w:37,h:12,l:557,t:383}, | ||||||
|  |         {name:'A4-二次固化机-2',id:401202,w:37,h:12,l:557,t:409}, | ||||||
|  |         {name:'A4-二次固化机-3',id:401203,w:37,h:12,l:557,t:431}, | ||||||
|  |         {name:'A4-钢化炉',id:401401,w:75,h:15,l:379,t:381}, | ||||||
|  |         {name:'A4-包装清洗机-1',id:401501,w:30,h:15,l:220,t:379}, | ||||||
|  |         {name:'A4-包装清洗机-2',id:401502,w:30,h:18,l:220,t:410}, | ||||||
|  |         {name:'A4-铺纸机-1',id:401601,w:18,h:15,l:180,t:381}, | ||||||
|  |         {name:'A4-铺纸机-2',id:401602,w:18,h:15,l:180,t:414}, | ||||||
|  |  | ||||||
|  |         {name:'A5-磨边机-1',id:500301,w:70,h:18,l:817,t:465}, | ||||||
|  |         {name:'A5-磨边机-2',id:500302,w:70,h:18,l:817,t:488}, | ||||||
|  |         {name:'A5-磨边机-3',id:500303,w:70,h:18,l:819,t:512}, | ||||||
|  |         {name:'A5-磨边后清洗机-1',id:500401,w:30,h:15,l:784,t:462}, | ||||||
|  |         {name:'A5-磨边后清洗机-2',id:500402,w:30,h:15,l:784,t:488}, | ||||||
|  |         {name:'A5-磨边后清洗机-3',id:500403,w:30,h:15,l:785,t:512}, | ||||||
|  |         {name:'A5-一次镀膜机-1',id:500801,w:20,h:15,l:685,t:466}, | ||||||
|  |         {name:'A5-一次镀膜机-2',id:500802,w:20,h:15,l:685,t:490}, | ||||||
|  |         {name:'A5-一次镀膜机-3',id:500803,w:20,h:15,l:685,t:513}, | ||||||
|  |         {name:'A5-一次固化机-1',id:501001,w:37,h:12,l:638,t:468}, | ||||||
|  |         {name:'A5-一次固化机-2',id:501002,w:37,h:12,l:638,t:491}, | ||||||
|  |         {name:'A5-一次固化机-3',id:501003,w:37,h:12,l:638,t:514}, | ||||||
|  |         {name:'A5-二次镀膜机-1',id:501101,w:20,h:15,l:584,t:468}, | ||||||
|  |         {name:'A5-二次镀膜机-2',id:501102,w:20,h:15,l:584,t:490}, | ||||||
|  |         {name:'A5-二次镀膜机-3',id:501103,w:20,h:15,l:584,t:513}, | ||||||
|  |         {name:'A5-二次固化机-1',id:501201,w:37,h:12,l:535,t:468}, | ||||||
|  |         {name:'A5-二次固化机-2',id:501202,w:37,h:12,l:535,t:492}, | ||||||
|  |         {name:'A5-二次固化机-3',id:501203,w:37,h:12,l:535,t:514}, | ||||||
|  |         {name:'A5-钢化炉',id:501401,w:75,h:15,l:344,t:513}, | ||||||
|  |         {name:'A5-包装清洗机-1',id:501501,w:30,h:18,l:185,t:473}, | ||||||
|  |         {name:'A5-包装清洗机-2',id:501502,w:30,h:18,l:185,t:511}, | ||||||
|  |         {name:'A5-铺纸机-1',id:501601,w:18,h:15,l:144,t:475}, | ||||||
|  |         {name:'A5-铺纸机-2',id:501602,w:18,h:15,l:144,t:511} | ||||||
|  |       ], | ||||||
|  |       eqTipMsg:{ | ||||||
|  |         name:'', | ||||||
|  |         input:null, | ||||||
|  |         output:null, | ||||||
|  |         alarm:'未报警', | ||||||
|  |         status:'在线' | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   props: { | ||||||
|  |     scaleNum: { | ||||||
|  |       type: Number, | ||||||
|  |       default: 1 | ||||||
|  |     }, | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     scaleNum(val) { | ||||||
|  |       this.scaleNum = val | ||||||
|  |     }, | ||||||
|  |     dataObj(val) { | ||||||
|  |       val.equipmentDets && val.equipmentDets.forEach(item => { | ||||||
|  |         this.eqList.forEach(eq => { | ||||||
|  |           if (eq.id == item.id) { | ||||||
|  |             eq.name = item.name | ||||||
|  |             eq.input = item.input | ||||||
|  |             eq.output = item.output | ||||||
|  |             eq.alarm = item.isError | ||||||
|  |             eq.status = item.isRun | ||||||
|  |           } | ||||||
|  |         }) | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   mounted() {}, | ||||||
|  |   methods: { | ||||||
|  |     // 鼠标hover事件 | ||||||
|  |     handleMouseEnter(item, event) { | ||||||
|  |       this.showTooltip = true; | ||||||
|  |       this.eqTipMsg.name = item.name; | ||||||
|  |       this.eqTipMsg.input = item.input; | ||||||
|  |       this.eqTipMsg.output = item.output; | ||||||
|  |       this.eqTipMsg.alarm = item.alarm; | ||||||
|  |       this.eqTipMsg.status = item.status; | ||||||
|  |       this.updateTooltipPosition(event); | ||||||
|  |     }, | ||||||
|  |     handleMouseLeave() { | ||||||
|  |       this.showTooltip = false; | ||||||
|  |     }, | ||||||
|  |     updateTooltipPosition(event) { | ||||||
|  |       const rect = this.$refs.centerTopBox.getBoundingClientRect() | ||||||
|  |       const offset = 15; | ||||||
|  |       const tooltipWidth = 315*this.scaleNum; | ||||||
|  |       const tooltipHeight = 170*this.scaleNum; | ||||||
|  |       const startX = rect.left; | ||||||
|  |       const startY = rect.top; | ||||||
|  |       const endX = rect.width; | ||||||
|  |       const endY = rect.height; | ||||||
|  |       let posX = event.clientX-startX + offset; | ||||||
|  |       let posY = event.clientY-startY + offset; | ||||||
|  |       if (posX + tooltipWidth > endX) { | ||||||
|  |         posX = event.clientX-startX - tooltipWidth - offset; | ||||||
|  |       } | ||||||
|  |       if (posY + tooltipHeight > endY) { | ||||||
|  |         posY = event.clientY -startY - tooltipHeight - offset; | ||||||
|  |       } | ||||||
|  |       this.tooltipStyle.left = posX/this.scaleNum; | ||||||
|  |       this.tooltipStyle.top = posY/this.scaleNum; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | p{ | ||||||
|  |   margin: 0; | ||||||
|  | } | ||||||
|  | .centerTopBox { | ||||||
|  |   width: 1041px; | ||||||
|  |   height: 600px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   left: 440px; | ||||||
|  |   top:113px; | ||||||
|  |   overflow: hidden; | ||||||
|  |   .videoStyle { | ||||||
|  |     width: 1920px; | ||||||
|  |     height: 1080px; | ||||||
|  |     position: absolute; | ||||||
|  |     left:-440px; | ||||||
|  |     top:-113px; | ||||||
|  |   } | ||||||
|  |   .eqTipBox { | ||||||
|  |     width: 315px; | ||||||
|  |     height: 170px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/eq-tip.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     padding-top: 10px; | ||||||
|  |     z-index: 1; | ||||||
|  |     span{ | ||||||
|  |       display: inline-block; | ||||||
|  |       font-size: 20px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       letter-spacing: 1px; | ||||||
|  |       vertical-align: middle; | ||||||
|  |     } | ||||||
|  |     .eqTipTitle { | ||||||
|  |       width: 112px; | ||||||
|  |       height: 30px; | ||||||
|  |       padding-left: 15px; | ||||||
|  |     } | ||||||
|  |     .eqTipNum { | ||||||
|  |       width: 190px; | ||||||
|  |       height: 30px; | ||||||
|  |       line-height: 30px; | ||||||
|  |       white-space: nowrap; | ||||||
|  |       overflow: hidden; | ||||||
|  |       text-overflow: ellipsis; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .eqBox { | ||||||
|  |     span{ | ||||||
|  |       display: inline-block; | ||||||
|  |       // border: 1px solid red; | ||||||
|  |       position: absolute; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .centerTopTopBox { | ||||||
|  |     padding-left: 48px; | ||||||
|  |     position: absolute; | ||||||
|  |     top:30px; | ||||||
|  |     .num { | ||||||
|  |       width: 203px; | ||||||
|  |       height: 65px; | ||||||
|  |       line-height: 65px; | ||||||
|  |       padding-left: 10px; | ||||||
|  |       box-sizing: border-box; | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 38px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       text-shadow: 0px 5px 2px rgba(0,0,0,0.62); | ||||||
|  |       text-align: center; | ||||||
|  |       position: absolute; | ||||||
|  |       top:0px; | ||||||
|  |     } | ||||||
|  |     .title { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 20px; | ||||||
|  |       color: #00C8F7; | ||||||
|  |       letter-spacing: 2px; | ||||||
|  |       text-shadow: 0px 5px 2px rgba(0,0,0,0.62); | ||||||
|  |       text-align: center; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										108
									
								
								src/views/base/dataBoard/components/Header.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,108 @@ | |||||||
|  | <template> | ||||||
|  |   <header class="dataBoardHeader"> | ||||||
|  |     <div class='topTitle'></div> | ||||||
|  |     <!-- <div class='time-chsoose'> | ||||||
|  |       <span class='title'>时间选择</span> | ||||||
|  |       <span class='time-show'>{{time}}</span> | ||||||
|  |       <el-date-picker | ||||||
|  |         v-model="time" | ||||||
|  |         type="date" | ||||||
|  |         value-format='yyyy-MM-dd' | ||||||
|  |         :clearable='false' | ||||||
|  |         style='position: absolute;right: 0px;width: 119px;top:-2px;opacity: 0;' | ||||||
|  |       > | ||||||
|  |       </el-date-picker> | ||||||
|  |     </div> --> | ||||||
|  |     <div | ||||||
|  |       type="text" | ||||||
|  |       class="screen-btn" | ||||||
|  |       :title="isFullScreen?'退出全屏':'全屏'" | ||||||
|  |       @click="changeFullScreen" | ||||||
|  |     > | ||||||
|  |       <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | ||||||
|  |       <svg-icon v-else icon-class="fullScreenView" /> | ||||||
|  |     </div> | ||||||
|  |   </header> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | // import moment from 'moment' | ||||||
|  | export default { | ||||||
|  |   name: 'DataBoardHeader', | ||||||
|  |   props: { | ||||||
|  |     isFullScreen: { | ||||||
|  |       type: Boolean, | ||||||
|  |       default: () => { | ||||||
|  |         return false | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       // time: moment().format('YYYY-MM-DD') | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   computed: {}, | ||||||
|  |   methods: { | ||||||
|  |     changeFullScreen() { | ||||||
|  |       this.$emit('screenfullChange') | ||||||
|  |     }, | ||||||
|  |     exportPDF() { | ||||||
|  |       this.$emit('exportPDF') | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | .dataBoardHeader { | ||||||
|  | 	background: url('../../../../assets/images/dataBoard/head.png') no-repeat; | ||||||
|  | 	height: 99px; | ||||||
|  | 	background-size: 100%; | ||||||
|  | 	background-position: 0 0; | ||||||
|  | 	position: relative; | ||||||
|  | 	.topTitle{ | ||||||
|  | 		width: 465px; | ||||||
|  | 		height: 77px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/data-board-title.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     left: 731px; | ||||||
|  |     top:19px; | ||||||
|  |   } | ||||||
|  |   .time-chsoose { | ||||||
|  |     width: 212px; | ||||||
|  | 		height: 33px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/time-choose.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     right: 63px; | ||||||
|  |     top:49px; | ||||||
|  |     .title { | ||||||
|  |       font-size: 18px; | ||||||
|  |       color: #082049; | ||||||
|  |       letter-spacing: 1px; | ||||||
|  |       position: relative; | ||||||
|  |       top: 4px; | ||||||
|  |       left: 8px | ||||||
|  |     } | ||||||
|  |     .time-show { | ||||||
|  |       font-size: 18px; | ||||||
|  |       color: #FFFFFF; | ||||||
|  |       line-height: 18px; | ||||||
|  |       position: relative; | ||||||
|  |       top: 4px; | ||||||
|  |       left: 28px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 	.screen-btn{ | ||||||
|  | 		color: #00fff0; | ||||||
|  |     height: 32px; | ||||||
|  |     line-height: 32px; | ||||||
|  | 		font-size: 32px; | ||||||
|  | 		position: absolute; | ||||||
|  | 		right: 22px; | ||||||
|  | 		top:47px; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										286
									
								
								src/views/base/dataBoard/components/LeftBottom.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,286 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='leftBottomBox'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard2" class='icon'/> | ||||||
|  |       <span>投入产出及良品率</span> | ||||||
|  |     </div> | ||||||
|  |     <div v-if='xData.length === 0' class='noData'>暂无数据</div> | ||||||
|  |     <div v-else> | ||||||
|  |       <div class="top_legend"> | ||||||
|  |         <span class="chart_legend_icon1">投入</span> | ||||||
|  |         <span class="chart_legend_icon2">产出</span> | ||||||
|  |         <span><span class="chart_legend_icon3"></span>良品率</span> | ||||||
|  |       </div> | ||||||
|  |       <div id='inOutputChart' style='width: 400px;height: 290px;'></div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | import * as echarts from 'echarts'; | ||||||
|  | export default { | ||||||
|  |   name: 'LeftBottom', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       this.xData = [] | ||||||
|  |       this.inputData = [] | ||||||
|  |       this.outputData = [] | ||||||
|  |       this.goodRateData = [] | ||||||
|  |       val.monthBar && val.monthBar.forEach(item => { | ||||||
|  |         this.xData.push(item.dataType) | ||||||
|  |         this.inputData.push(item.inputNum) | ||||||
|  |         this.outputData.push(item.outputNum) | ||||||
|  |         this.goodRateData.push(item.goodRate) | ||||||
|  |       }) | ||||||
|  |       this.$nextTick(()=>{ | ||||||
|  |       this.initChart(); | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       chartDom: '', | ||||||
|  |       chart: '', | ||||||
|  |       xData:[], | ||||||
|  |       inputData:[], | ||||||
|  |       outputData:[], | ||||||
|  |       goodRateData:[], | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   mounted() {}, | ||||||
|  |   methods: { | ||||||
|  |     initChart() { | ||||||
|  |       if ( | ||||||
|  |         this.chart !== null && | ||||||
|  |         this.chart !== '' && | ||||||
|  |         this.chart !== undefined | ||||||
|  |       ) { | ||||||
|  |         this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | ||||||
|  |       } | ||||||
|  |       this.chartDom = document.getElementById('inOutputChart') | ||||||
|  |       this.chart = echarts.init(this.chartDom) | ||||||
|  |       var option; | ||||||
|  |       option = { | ||||||
|  |         grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true }, | ||||||
|  |         legend: { | ||||||
|  |           show: false, | ||||||
|  |         }, | ||||||
|  |         xAxis: { | ||||||
|  |           type: "category", | ||||||
|  |           data: this.xData, | ||||||
|  |           axisLabel: { | ||||||
|  |             color: "#fff", | ||||||
|  |             fontSize: 10, | ||||||
|  |             interval: 0, | ||||||
|  |             rotate:30 | ||||||
|  |           }, | ||||||
|  |           axisTick: { show: false }, | ||||||
|  |           axisLine: { | ||||||
|  |             lineStyle: { | ||||||
|  |               width: 2, | ||||||
|  |               color: "#5982B2", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|  |         yAxis: [{ | ||||||
|  |           name: "单位/片", | ||||||
|  |           nameTextStyle: { | ||||||
|  |             color: "#DFF1FE", | ||||||
|  |             fontSize: 12, | ||||||
|  |           }, | ||||||
|  |           type: "value", | ||||||
|  |           axisLabel: { | ||||||
|  |             color: "#DFF1FE", | ||||||
|  |             fontSize: 12, | ||||||
|  |             formatter: "{value}", | ||||||
|  |           }, | ||||||
|  |           axisLine: { | ||||||
|  |             show: true, | ||||||
|  |             lineStyle: { | ||||||
|  |               width: 2, | ||||||
|  |               color: "#5982B2", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           splitLine: { | ||||||
|  |             lineStyle: { | ||||||
|  |               width: 2, | ||||||
|  |               color: "#5982B2", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |         },{ | ||||||
|  |           name: "良品率/%", | ||||||
|  |           nameTextStyle: { | ||||||
|  |             color: "#DFF1FE", | ||||||
|  |             fontSize: 12, | ||||||
|  |           }, | ||||||
|  |           type: "value", | ||||||
|  |           axisLabel: { | ||||||
|  |             color: "#DFF1FE", | ||||||
|  |             fontSize: 12, | ||||||
|  |             formatter: "{value}", | ||||||
|  |           }, | ||||||
|  |           axisLine: { | ||||||
|  |             show: true, | ||||||
|  |             lineStyle: { | ||||||
|  |               width: 2, | ||||||
|  |               color: "#5982B2", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           splitLine: { | ||||||
|  |             lineStyle: { | ||||||
|  |               width: 2, | ||||||
|  |               color: "#5982B2", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |         }], | ||||||
|  |         tooltip: { | ||||||
|  |           trigger: "axis", | ||||||
|  |           axisPointer: { | ||||||
|  |             type: "shadow", | ||||||
|  |           }, | ||||||
|  |           className: "qhd-chart-tooltip", | ||||||
|  |           show: true, | ||||||
|  |         }, | ||||||
|  |         series: [ | ||||||
|  |           { | ||||||
|  |             data: this.inputData, | ||||||
|  |             type: "bar", | ||||||
|  |             barWidth: 10, | ||||||
|  |             barGap:0, | ||||||
|  |             itemStyle: { | ||||||
|  |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||||
|  |                 { offset: 0, color: 'rgba(157, 234, 245, 1)' }, | ||||||
|  |                 { offset: 1, color: 'rgba(110, 249, 222, 1)' }, | ||||||
|  |               ]), | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           { | ||||||
|  |             data:this.outputData, | ||||||
|  |             type: "bar", | ||||||
|  |             barWidth: 10, | ||||||
|  |             itemStyle: { | ||||||
|  |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||||
|  |                 { offset: 0, color: 'rgba(92, 183, 255, 1)' }, | ||||||
|  |                 { offset: 1, color: 'rgba(54, 75, 254, 1)' }, | ||||||
|  |               ]), | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           { | ||||||
|  |             data:this.goodRateData, | ||||||
|  |             type: "line", | ||||||
|  |             yAxisIndex: 1, | ||||||
|  |             symbol:'circle', | ||||||
|  |             symbolSize: 7, | ||||||
|  |             color:'rgba(18, 255, 245, 1)', | ||||||
|  |             areaStyle: { | ||||||
|  |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||||
|  |                 { offset: 0, color: 'rgba(18, 255, 245, 0.8)' }, | ||||||
|  |                 { offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' }, | ||||||
|  |                 { offset: 0.4, color: 'rgba(18, 255, 245, 0)' }, | ||||||
|  |               ]), | ||||||
|  |             } | ||||||
|  |           } | ||||||
|  |         ], | ||||||
|  |       } | ||||||
|  |       option && this.chart.setOption(option); | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style lang='scss' scoped> | ||||||
|  | .leftBottomBox { | ||||||
|  |   width: 402px; | ||||||
|  |   height: 332px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   left: 23px; | ||||||
|  |   bottom:23px; | ||||||
|  |   .title { | ||||||
|  |     margin: 7px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 32px; | ||||||
|  |       height: 32px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |       margin-top: 5px; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .top_legend { | ||||||
|  |     color: #fff; | ||||||
|  |     font-size: 14px; | ||||||
|  |     position: absolute; | ||||||
|  |     left:120px; | ||||||
|  |     top:50px; | ||||||
|  |     .chart_legend_icon1{ | ||||||
|  |       margin-right: 10px; | ||||||
|  |     } | ||||||
|  |     .chart_legend_icon2{ | ||||||
|  |       margin-right: 14px; | ||||||
|  |     } | ||||||
|  |     .chart_legend_icon1:before { | ||||||
|  |       display: inline-block; | ||||||
|  |       content: ""; | ||||||
|  |       width: 10px; | ||||||
|  |       height: 10px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       border-radius: 2px; | ||||||
|  |       background: #73F8E0; | ||||||
|  |     } | ||||||
|  |     .chart_legend_icon2:before { | ||||||
|  |       display: inline-block; | ||||||
|  |       content: ""; | ||||||
|  |       width: 10px; | ||||||
|  |       height: 10px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       border-radius: 2px; | ||||||
|  |       background: #497EFF; | ||||||
|  |     } | ||||||
|  |     .chart_legend_icon3 { | ||||||
|  |       display: inline-block; | ||||||
|  |       width: 8px; | ||||||
|  |       height: 8px; | ||||||
|  |       margin-right: 8px; | ||||||
|  |       border-radius: 4px; | ||||||
|  |       background: #73F8E0; | ||||||
|  |       position:relative; | ||||||
|  |     } | ||||||
|  |     .chart_legend_icon3:before { | ||||||
|  |       display: inline-block; | ||||||
|  |       content: ""; | ||||||
|  |       width: 16px; | ||||||
|  |       height:2px; | ||||||
|  |       background: #73F8E0; | ||||||
|  |       position:absolute; | ||||||
|  |       top:3px; | ||||||
|  |       left:-4px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | .noData  { | ||||||
|  |   font-size: 24px; | ||||||
|  |   text-align: center; | ||||||
|  |   padding-top: 100px; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | <style> | ||||||
|  | .qhd-chart-tooltip { | ||||||
|  |   background: #0a2b4f77 !important; | ||||||
|  |   border: none !important; | ||||||
|  |   backdrop-filter: blur(12px); | ||||||
|  | } | ||||||
|  | .qhd-chart-tooltip * { | ||||||
|  |   color: #fff !important; | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										162
									
								
								src/views/base/dataBoard/components/LeftTop.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,162 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='leftTopBox'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard1" class='icon'/> | ||||||
|  |       <span>近期数据对比</span> | ||||||
|  |     </div> | ||||||
|  |     <div class='title-split'> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/leftbar.png" alt=""> | ||||||
|  |       <span class='text'>本日</span> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/rightbar.png" alt=""> | ||||||
|  |     </div> | ||||||
|  |     <div class='data-box'> | ||||||
|  |       <div class='left-icon' style="top:19px;"> | ||||||
|  |         <img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'> | ||||||
|  |         <div>总投入</div> | ||||||
|  |       </div> | ||||||
|  |       <div class='left-icon' style="top:139px;"> | ||||||
|  |         <img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'> | ||||||
|  |         <div>总生产</div> | ||||||
|  |       </div> | ||||||
|  |       <div class='right-data' style="top:15px;"> | ||||||
|  |         <p><span class='num'>{{todayData?.inputNum ? formatThousands(todayData.inputNum) : '-'}}</span><span class='text'>片数</span></p> | ||||||
|  |         <p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> | ||||||
|  |       </div> | ||||||
|  |       <div class='right-data' style="top:132px;"> | ||||||
|  |         <p><span class='num'>{{todayData?.outputNum ? formatThousands(todayData.outputNum) : '-'}}</span><span class='text'>片数</span></p> | ||||||
|  |         <p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <div class='title-split'> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/leftbar.png" alt=""> | ||||||
|  |       <span class='text'>昨日</span> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/rightbar.png" alt=""> | ||||||
|  |     </div> | ||||||
|  |     <div class='data-box'> | ||||||
|  |       <div class='left-icon' style="top:19px;"> | ||||||
|  |         <img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'> | ||||||
|  |         <div>总投入</div> | ||||||
|  |       </div> | ||||||
|  |       <div class='left-icon' style="top:139px;"> | ||||||
|  |         <img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'> | ||||||
|  |         <div>总生产</div> | ||||||
|  |       </div> | ||||||
|  |       <div class='right-data' style="top:15px;"> | ||||||
|  |         <p><span class='num'>{{yesterdayData?.inputNum ? formatThousands(yesterdayData.inputNum) : '-'}}</span><span class='text'>片数</span></p> | ||||||
|  |         <p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> | ||||||
|  |       </div> | ||||||
|  |       <div class='right-data' style="top:132px;"> | ||||||
|  |         <p><span class='num'>{{yesterdayData?.outputNum ? formatThousands(yesterdayData.outputNum) : '-'}}</span><span class='text'>片数</span></p> | ||||||
|  |         <p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'LeftTop', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       val.todayAndYesterday && val.todayAndYesterday.forEach(item => { | ||||||
|  |         if (item.dataType === "今日") { | ||||||
|  |           this.todayData = item | ||||||
|  |         } else { | ||||||
|  |           this.yesterdayData = item | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       todayData:{}, | ||||||
|  |       yesterdayData:{} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: {} | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style lang='scss' scoped> | ||||||
|  | .leftTopBox { | ||||||
|  |   width: 402px; | ||||||
|  |   height: 600px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/left-top.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   left: 23px; | ||||||
|  |   top:113px; | ||||||
|  |   .title { | ||||||
|  |     margin: 10px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 33px; | ||||||
|  |       height: 33px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .title-split { | ||||||
|  |     margin-left: 95px; | ||||||
|  |     margin-top: 10px; | ||||||
|  |     .text{ | ||||||
|  |       display: inline-block; | ||||||
|  |       width: 100px; | ||||||
|  |       font-size: 22px; | ||||||
|  |       color: #01CFCC; | ||||||
|  |       line-height: 24px; | ||||||
|  |       letter-spacing: 7px; | ||||||
|  |       text-align: center; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .data-box { | ||||||
|  |     width: 358px; | ||||||
|  |     height: 230px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/leftTopDataBox.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     margin-top: 8px; | ||||||
|  |     position: relative; | ||||||
|  |     left: 24px; | ||||||
|  |     .left-icon { | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 16px; | ||||||
|  |       color: #9DEAF5; | ||||||
|  |       line-height: 22px; | ||||||
|  |       letter-spacing: 1px; | ||||||
|  |       text-shadow: 0px 4px 2px rgba(0,0,0,0.62); | ||||||
|  |       position: absolute; | ||||||
|  |       left: 30px; | ||||||
|  |     } | ||||||
|  |     .right-data { | ||||||
|  |       position: absolute; | ||||||
|  |       left: 100px; | ||||||
|  |       p{ | ||||||
|  |         margin: 0; | ||||||
|  |       }; | ||||||
|  |       .num { | ||||||
|  |         font-weight: 500; | ||||||
|  |         font-size: 32px; | ||||||
|  |         color: #FFFFFF; | ||||||
|  |         text-shadow: 0px 4px 2px rgba(0,0,0,0.62); | ||||||
|  |         margin-right: 5px; | ||||||
|  |       } | ||||||
|  |       .text { | ||||||
|  |         font-weight: 500; | ||||||
|  |         font-size: 16px; | ||||||
|  |         color: #FFFFFF; | ||||||
|  |         letter-spacing: 1px; | ||||||
|  |         text-shadow: 0px 4px 2px rgba(0,0,0,0.62); | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										198
									
								
								src/views/base/dataBoard/components/RightBottom.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,198 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='rightBottomBox'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard3" class='icon'/> | ||||||
|  |       <span>本月<span class='dotted'></span>班组生产排名</span> | ||||||
|  |     </div> | ||||||
|  |     <div class='rankingLeft'> | ||||||
|  |       <div class='rankingLeftTitle'>产量</div> | ||||||
|  |       <div class='rankingTypeBox'> | ||||||
|  |         <div style='margin-bottom: 10px;' v-for='(item,index) in teamProductionRank' :key='index'> | ||||||
|  |         <img :src="require(`../../../../assets/images/dataBoard/ranking${index+1}.png`)" alt="" width="50"> | ||||||
|  |           <div class='rankingTextBox'> | ||||||
|  |             <p class='text1'>{{item.name}}/片</p> | ||||||
|  |             <p class='text2'>{{item?.value ? formatThousands(item.value) : '-'}}</p> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <div class='rankingRight'> | ||||||
|  |       <div class='rankingRightTitle'> | ||||||
|  |         成品率 | ||||||
|  |       </div> | ||||||
|  |       <div class='rankingTypeBox' style='left: 120px;'> | ||||||
|  |         <div style='margin-bottom: 10px;' v-for='(item,index) in teamRateRank' :key='index'> | ||||||
|  |           <img :src="require(`../../../../assets/images/dataBoard/ranking${index+1}.png`)" alt="" width="50"> | ||||||
|  |           <div class='rankingTextBox'> | ||||||
|  |             <p class='text1'>{{item.name}}</p> | ||||||
|  |             <p class='text2'>{{Math.trunc(item.value)}}<span style='font-size: 20px;'>.{{item.value1}}%</span></p> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <!-- <div> | ||||||
|  |           <img src="../../../../assets//images//dataBoard/ranking2.png" alt="" width='50'> | ||||||
|  |           <div class='rankingTextBox'> | ||||||
|  |             <p class='text1'>班组1</p> | ||||||
|  |             <p class='text2'>94<span style='font-size: 20px;'>.13%</span></p> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <div> | ||||||
|  |           <img src="../../../../assets//images//dataBoard/ranking3.png" alt="" width='50'> | ||||||
|  |           <div class='rankingTextBox'> | ||||||
|  |             <p class='text1'>班组1</p> | ||||||
|  |             <p class='text2'>90<span style='font-size: 20px;'>.42%</span></p> | ||||||
|  |           </div> | ||||||
|  |         </div> --> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'RightBottom', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       this.teamProductionRank = [] | ||||||
|  |       this.teamRateRank = [] | ||||||
|  |       val.teamProductionRank && val.teamProductionRank.forEach(item => { | ||||||
|  |         let obj = { | ||||||
|  |           name: item.name, | ||||||
|  |           value: item.value, | ||||||
|  |           rank: item.rank, | ||||||
|  |         } | ||||||
|  |         this.teamProductionRank.push(obj) | ||||||
|  |       }) | ||||||
|  |       val.teamRateRank && val.teamRateRank.forEach(item => { | ||||||
|  |         let obj = { | ||||||
|  |           name: item.name, | ||||||
|  |           value: item.value, | ||||||
|  |           rank: item.rank, | ||||||
|  |           value1: this.getPositiveDecimal(item.value) | ||||||
|  |         } | ||||||
|  |         this.teamRateRank.push(obj) | ||||||
|  |       }) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       teamProductionRank:[], | ||||||
|  |       teamRateRank:[] | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   mounted() {}, | ||||||
|  |   methods: { | ||||||
|  |     getPositiveDecimal(num) {   | ||||||
|  |       const str = Math.abs(num).toString();   | ||||||
|  |       const [, decimal] = str.split('.'); | ||||||
|  |       return decimal || '00'; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style lang='scss' scoped> | ||||||
|  | p{ | ||||||
|  |   margin: 0; | ||||||
|  | } | ||||||
|  | .rightBottomBox { | ||||||
|  |   width: 755px; | ||||||
|  |   height: 332px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/right-bottom.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   right: 23px; | ||||||
|  |   bottom:23px; | ||||||
|  |   .title { | ||||||
|  |     margin: 10px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 33px; | ||||||
|  |       height: 33px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |       .dotted { | ||||||
|  |         display: inline-block; | ||||||
|  |         width: 4px; | ||||||
|  |         height: 4px; | ||||||
|  |         border-radius: 2px; | ||||||
|  |         background-color: #52FFF1; | ||||||
|  |         margin: 0 8px; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .rankingLeft { | ||||||
|  |     width: 405px; | ||||||
|  |     height: 265px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/rankingBg1.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     left: 12px; | ||||||
|  |     top: 48px; | ||||||
|  |     .rankingLeftTitle { | ||||||
|  |       width: 24px; | ||||||
|  |       height: 73px; | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 55px; | ||||||
|  |       position: relative; | ||||||
|  |       left: 37px; | ||||||
|  |       top: 63px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .rankingRight { | ||||||
|  |     width: 338px; | ||||||
|  |     height: 265px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/rankingBg2.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: absolute; | ||||||
|  |     right: 12px; | ||||||
|  |     top: 48px; | ||||||
|  |     .rankingRightTitle { | ||||||
|  |       width: 24px; | ||||||
|  |       height: 132px; | ||||||
|  |       font-weight: 500; | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 55px; | ||||||
|  |       position: relative; | ||||||
|  |       left: 37px; | ||||||
|  |       top: 43px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .rankingTypeBox { | ||||||
|  |       position: absolute; | ||||||
|  |       left: 100px; | ||||||
|  |       top:13px; | ||||||
|  |       .rankingTextBox { | ||||||
|  |         display: inline-block; | ||||||
|  |         margin-left: 16px; | ||||||
|  |         vertical-align: top; | ||||||
|  |         .text1 { | ||||||
|  |           font-weight: 500; | ||||||
|  |           font-size: 17px; | ||||||
|  |           color: #FFFFFF; | ||||||
|  |           line-height: 22px; | ||||||
|  |           letter-spacing: 1px; | ||||||
|  |           padding-top: 5px; | ||||||
|  |         } | ||||||
|  |         .text2 { | ||||||
|  |           font-weight: 500; | ||||||
|  |           font-size: 32px; | ||||||
|  |           color: #FFFFFF; | ||||||
|  |           line-height: 22px; | ||||||
|  |           margin-top: 8px; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										352
									
								
								src/views/base/dataBoard/components/RightTop.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,352 @@ | |||||||
|  | <template> | ||||||
|  |   <div class='rightTopBox'> | ||||||
|  |     <div class='title'> | ||||||
|  |       <svg-icon icon-class="dataBoard4" class='icon'/> | ||||||
|  |       <span>缺陷情况</span> | ||||||
|  |     </div> | ||||||
|  |     <div class='title-split'> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/leftbar.png" alt=""> | ||||||
|  |       <span class='text'>总数</span> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/rightbar.png" alt=""> | ||||||
|  |     </div> | ||||||
|  |     <div class='dataBox'> | ||||||
|  |       <div class='row'> | ||||||
|  |         <div class='box' style='width: 105px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span style='margin-right: 3px;'>当日</span> | ||||||
|  |             <img v-show='nokSumDet.today >= nokSumDet.yesterday' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'> | ||||||
|  |             <img v-show='nokSumDet.today < nokSumDet.yesterday' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.today ? formatThousands(nokSumDet.today) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |         <div class='box' style='width: 115px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span style='margin-right: 3px;'>本月</span> | ||||||
|  |             <img v-show='nokSumDet.month >= nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'> | ||||||
|  |             <img v-show='nokSumDet.month < nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.month ? formatThousands(nokSumDet.month) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |         <div class='box' style='width: 110px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span style='margin-right: 3px;'>本年</span> | ||||||
|  |             <img v-show='nokSumDet.year >= nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'> | ||||||
|  |             <img v-show='nokSumDet.year < nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.year ? formatThousands(nokSumDet.year) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |       <div class='row' style='padding-top: 5px;'> | ||||||
|  |         <div class='box' style='width: 105px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span>昨日</span> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.yesterday ? formatThousands(nokSumDet.yesterday) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |         <div class='box' style='width: 115px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span>上月</span> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.lastMonth ? formatThousands(nokSumDet.lastMonth) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |         <div class='box' style='width: 110px;'> | ||||||
|  |           <p class='name'> | ||||||
|  |             <span>上年</span> | ||||||
|  |           </p> | ||||||
|  |           <p class='num'>{{nokSumDet?.lastYear ? formatThousands(nokSumDet.lastYear) : '-'}}</p> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <div class='title-split2'> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/leftbar.png" alt=""> | ||||||
|  |       <span class='text'>全厂缺陷汇总</span> | ||||||
|  |       <img src="../../../../assets//images/dataBoard/rightbar.png" alt=""> | ||||||
|  |     </div> | ||||||
|  |     <div id='defectSumChart' style='width: 400px;height: 315px;'></div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | import * as echarts from 'echarts'; | ||||||
|  | const colors = [ | ||||||
|  |   "rgb(39, 96, 255)", | ||||||
|  |   "rgb(91, 155, 255)", | ||||||
|  |   "rgb(153, 214, 108)", | ||||||
|  |   "rgb(18, 255, 245)", | ||||||
|  |   "rgb(221, 177, 18)", | ||||||
|  | ]; | ||||||
|  | export default { | ||||||
|  |   name: 'RightTop', | ||||||
|  |   props: { | ||||||
|  |     dataObj: { | ||||||
|  |       type: Object, | ||||||
|  |       default: () => {} | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     dataObj(val) { | ||||||
|  |       this.nokSumDet = val.nokSumDet | ||||||
|  |       this.dataProps = [] | ||||||
|  |       val.nokPieDet && val.nokPieDet.forEach(item => { | ||||||
|  |         let obj = { | ||||||
|  |           value: item.num, | ||||||
|  |           name: item.type | ||||||
|  |         } | ||||||
|  |         this.dataProps.push(obj) | ||||||
|  |       }) | ||||||
|  |       this.initChart() | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       nokSumDet:{}, | ||||||
|  |       chartDom: '', | ||||||
|  |       chart: '', | ||||||
|  |       dataProps:[], | ||||||
|  |       rangArrValue:[], | ||||||
|  |       dataList:[], | ||||||
|  |       totalValue:0 | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   mounted() {}, | ||||||
|  |   methods: { | ||||||
|  |     initChart() { | ||||||
|  |       if ( | ||||||
|  |         this.chart !== null && | ||||||
|  |         this.chart !== '' && | ||||||
|  |         this.chart !== undefined | ||||||
|  |       ) { | ||||||
|  |         this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | ||||||
|  |       } | ||||||
|  |       this.chartDom = document.getElementById('defectSumChart') | ||||||
|  |       this.chart = echarts.init(this.chartDom) | ||||||
|  |       var option; | ||||||
|  |       this.getPersonnelList(this.dataProps) | ||||||
|  |       option = { | ||||||
|  |         color: colors, | ||||||
|  |         graphic: [ | ||||||
|  |           { | ||||||
|  |             type: "text", | ||||||
|  |             left: "center", | ||||||
|  |             top: "44%", | ||||||
|  |             style: { | ||||||
|  |               text: this.totalValue, | ||||||
|  |               fill: "#fff", | ||||||
|  |               width: 150, | ||||||
|  |               height: 44, | ||||||
|  |               fontSize: 31, | ||||||
|  |               fontWeight: 400, | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           { | ||||||
|  |             type: "text", | ||||||
|  |             left: "center", | ||||||
|  |             top: "55%", | ||||||
|  |             style: { | ||||||
|  |               text: "总数/件", | ||||||
|  |               fill: "rgba(255, 255, 255, 0.70)", | ||||||
|  |               width: 32, | ||||||
|  |               height: 16, | ||||||
|  |               fontSize: 16, | ||||||
|  |               fontWeight: 400, | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |         ], | ||||||
|  |         series: [ | ||||||
|  |           { | ||||||
|  |             name: "产线缺陷分类", | ||||||
|  |             type: "pie", | ||||||
|  |             radius: ["45%", "60%"], | ||||||
|  |             center: ["50%", "50%"], | ||||||
|  |             label:{ | ||||||
|  |               formatter:function(params){ | ||||||
|  |                 return `{color${params.dataIndex}|${params.percent}%}\n{style2|${params.name}}` | ||||||
|  |               }, | ||||||
|  |               rich:{ | ||||||
|  |                 color0:{color:'rgb(39, 96, 255)',fontSize:22}, | ||||||
|  |                 color1:{color:'rgb(91, 155, 255)',fontSize:22}, | ||||||
|  |                 color2:{color:'rgb(153, 214, 108)',fontSize:22}, | ||||||
|  |                 color3:{color:'rgb(18, 255, 245)',fontSize:22}, | ||||||
|  |                 color4:{color:'rgb(221, 177, 18)',fontSize:22}, | ||||||
|  |                 color5:{color:'rgb(39, 96, 255)',fontSize:22}, | ||||||
|  |                 color6:{color:'rgb(91, 155, 255)',fontSize:22}, | ||||||
|  |                 color7:{color:'rgb(153, 214, 108)',fontSize:22}, | ||||||
|  |                 color8:{color:'rgb(18, 255, 245)',fontSize:22}, | ||||||
|  |                 color9:{color:'rgb(221, 177, 18)',fontSize:22}, | ||||||
|  |                 style2:{ | ||||||
|  |                   color:'#fff', | ||||||
|  |                   fontSize:14 | ||||||
|  |                 } | ||||||
|  |               } | ||||||
|  |             }, | ||||||
|  |             data: this.dataList, | ||||||
|  |           }, | ||||||
|  |         ], | ||||||
|  |       } | ||||||
|  |       option && this.chart.setOption(option); | ||||||
|  |     }, | ||||||
|  |     getCoordinates(startArc, endArc) { | ||||||
|  |       const posi = [ | ||||||
|  |         Math.sin(startArc), | ||||||
|  |         -Math.cos(startArc), | ||||||
|  |         Math.sin(endArc), | ||||||
|  |         -Math.cos(endArc), | ||||||
|  |       ]; | ||||||
|  |       const dx = posi[2] - posi[0]; | ||||||
|  |       const dy = posi[3] - posi[1]; | ||||||
|  |  | ||||||
|  |       return this.getLocation(dx, dy); | ||||||
|  |     }, | ||||||
|  |     getLocation(dx,dy) { | ||||||
|  |       const tanV = dx / dy; | ||||||
|  |       const directSign = Math.abs(tanV) < 1; | ||||||
|  |       const t = directSign ? tanV : 1 / tanV; | ||||||
|  |  | ||||||
|  |       const sign1 = t > 0 ? 1 : -1; | ||||||
|  |       const sign2 = dx > 0 ? 1 : -1; | ||||||
|  |       const sign = directSign ? sign1 * sign2 : sign2; | ||||||
|  |  | ||||||
|  |       const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2]; | ||||||
|  |       const group2 = sign > 0 ? [0, 1] : [1, 0]; | ||||||
|  |       const group = [...group1, ...group2]; | ||||||
|  |       const keys = directSign ? ["x", "x2", "y", "y2"] : ["y", "y2", "x", "x2"]; | ||||||
|  |  | ||||||
|  |       let res = {}; | ||||||
|  |       keys.forEach((k, idx) => { | ||||||
|  |         res[k] = group[idx]; | ||||||
|  |       }); | ||||||
|  |       return res; | ||||||
|  |     }, | ||||||
|  |     async getPersonnelList(dataProps){ | ||||||
|  |       this.rangArrValue = []; | ||||||
|  |       this.totalValue = 0; | ||||||
|  |       this.dataList = []; | ||||||
|  |       this.totalValue = dataProps.reduce( | ||||||
|  |         (total, value) => total + value.value, | ||||||
|  |         0 | ||||||
|  |       ); | ||||||
|  |       let cacheNum = 0; | ||||||
|  |       for (let i = 0; i < dataProps.length; i++) { | ||||||
|  |         const endNum = cacheNum + dataProps[i].value; | ||||||
|  |         this.rangArrValue.push([cacheNum, endNum]); | ||||||
|  |         cacheNum = endNum; | ||||||
|  |       } | ||||||
|  |       const angleArr = this.rangArrValue.map((arr) => | ||||||
|  |         arr.map((num) => (num / this.totalValue) * Math.PI * 2) | ||||||
|  |       ); | ||||||
|  |       this.dataList = dataProps.map((item, index) => { | ||||||
|  |         const range = this.getCoordinates(angleArr[index][0], angleArr[index][1]); | ||||||
|  |         const startColor = colors[index%5]; | ||||||
|  |         const color = { | ||||||
|  |           type: "linear", | ||||||
|  |           x: range.x, | ||||||
|  |           x2: range.x2, | ||||||
|  |           y: range.y, | ||||||
|  |           y2: range.y2, | ||||||
|  |           colorStops: [ | ||||||
|  |             { | ||||||
|  |               offset: 0, | ||||||
|  |               color: startColor, // 起始颜色 | ||||||
|  |             }, | ||||||
|  |             { | ||||||
|  |               offset: 1, | ||||||
|  |               color: `${startColor.substring(0, startColor.length - 1)}, 0.2)`, // 终点颜色 | ||||||
|  |             }, | ||||||
|  |           ], | ||||||
|  |           global: false, | ||||||
|  |         }; | ||||||
|  |  | ||||||
|  |         return { | ||||||
|  |           name: item.name, | ||||||
|  |           value: item.value, | ||||||
|  |           itemStyle: { | ||||||
|  |             color: color, | ||||||
|  |           }, | ||||||
|  |         }; | ||||||
|  |       }); | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style lang='scss' scoped> | ||||||
|  | p{ | ||||||
|  |   margin: 0; | ||||||
|  | } | ||||||
|  | .rightTopBox { | ||||||
|  |   width: 402px; | ||||||
|  |   height: 600px; | ||||||
|  |   background: url('../../../../assets/images/dataBoard/left-top.png') no-repeat; | ||||||
|  |   background-size: 100%; | ||||||
|  |   position: absolute; | ||||||
|  |   right: 23px; | ||||||
|  |   top:113px; | ||||||
|  |   .title { | ||||||
|  |     margin: 10px 0 0 15px; | ||||||
|  |     .icon { | ||||||
|  |       width: 33px; | ||||||
|  |       height: 33px; | ||||||
|  |       margin-right: 5px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |     span { | ||||||
|  |       font-size: 24px; | ||||||
|  |       color: #52FFF1; | ||||||
|  |       line-height: 24px; | ||||||
|  |       vertical-align:middle; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .title-split { | ||||||
|  |     margin-left: 95px; | ||||||
|  |     margin-top: 10px; | ||||||
|  |     .text{ | ||||||
|  |       display: inline-block; | ||||||
|  |       width: 100px; | ||||||
|  |       font-size: 22px; | ||||||
|  |       color: #01CFCC; | ||||||
|  |       line-height: 24px; | ||||||
|  |       letter-spacing: 7px; | ||||||
|  |       text-align: center; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .title-split2 { | ||||||
|  |     margin-left: 66px; | ||||||
|  |     margin-top: 20px; | ||||||
|  |     .text{ | ||||||
|  |       display: inline-block; | ||||||
|  |       width: 160px; | ||||||
|  |       font-size: 22px; | ||||||
|  |       color: #01CFCC; | ||||||
|  |       line-height: 24px; | ||||||
|  |       letter-spacing: 2px; | ||||||
|  |       text-align: center; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .dataBox { | ||||||
|  |     width: 358px; | ||||||
|  |     height: 160px; | ||||||
|  |     background: url('../../../../assets/images/dataBoard/defectNum.png') no-repeat; | ||||||
|  |     background-size: 100%; | ||||||
|  |     position: relative; | ||||||
|  |     left: 21px; | ||||||
|  |     top:8px; | ||||||
|  |     padding-left: 24px; | ||||||
|  |     .row { | ||||||
|  |       .box{ | ||||||
|  |         display: inline-block; | ||||||
|  |         padding-top: 10px; | ||||||
|  |         .name { | ||||||
|  |           font-weight: 500; | ||||||
|  |           font-size: 20px; | ||||||
|  |           color: #FFFFFF; | ||||||
|  |           letter-spacing: 2px; | ||||||
|  |         } | ||||||
|  |         .num { | ||||||
|  |           font-weight: 500; | ||||||
|  |           font-size: 28px; | ||||||
|  |           color: #FFFFFF; | ||||||
|  |           text-shadow: 0px 5px 2px rgba(0,0,0,0.62); | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
| @@ -1,100 +1,279 @@ | |||||||
| <!--  |  | ||||||
|     filename: index.vue |  | ||||||
|     author: liubin |  | ||||||
|     date: 2023-10-11 09:32:04 |  | ||||||
|     description: 设备看板 |  | ||||||
| --> |  | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
| 	<div ref="dataBoard" class="data-board"> | 	<div ref="dataBoardBoxB" class="dataBoardBoxB"> | ||||||
| 		<el-button type="text" @click="goback" class="go-back--btn">返回</el-button> | 		<div | ||||||
|  | 			id="dataBoardBox" | ||||||
|  | 			class="dataBoardBox" | ||||||
|  | 			style="width: 1920px; height: 1080px" | ||||||
|  | 			:style="{ transform: 'scale(' + scaleNum + ')' }"> | ||||||
|  | 			<DataBoardHeader | ||||||
|  | 				:is-full-screen="isFullScreen" | ||||||
|  | 				@screenfullChange="screenfullChange" /> | ||||||
|  | 			<LeftTop :dataObj="dataObj" /> | ||||||
|  | 			<LeftBottom :dataObj="dataObj" /> | ||||||
|  | 			<CenterTop :scaleNum="scaleNum" :dataObj="dataObj" /> | ||||||
|  | 			<CenterBottomL :dataObj="dataObj" /> | ||||||
|  | 			<CenterBottomR :dataObj="dataObj" /> | ||||||
|  | 			<RightTop :dataObj="dataObj" /> | ||||||
|  | 			<RightBottom :dataObj="dataObj" /> | ||||||
|  | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
|  | import DataBoardHeader from './components/Header.vue'; | ||||||
|  | import LeftTop from './components/LeftTop.vue'; | ||||||
|  | import LeftBottom from './components/LeftBottom.vue'; | ||||||
|  | import CenterTop from './components/CenterTop.vue'; | ||||||
|  | import CenterBottomL from './components/CenterBottomL.vue'; | ||||||
|  | import CenterBottomR from './components/CenterBottomR.vue'; | ||||||
|  | import RightTop from './components/RightTop.vue'; | ||||||
|  | import RightBottom from './components/RightBottom.vue'; | ||||||
|  | import { debounce } from '@/utils/debounce'; | ||||||
|  | import screenfull from 'screenfull'; | ||||||
|  | import { getAccessToken } from '@/utils/auth'; | ||||||
|  | import store from '@/store'; | ||||||
| export default { | export default { | ||||||
| 	name: 'DataBoard', | 	name: 'DataBoard', | ||||||
| 	components: {}, | 	components: { | ||||||
|  | 		DataBoardHeader, | ||||||
|  | 		LeftTop, | ||||||
|  | 		LeftBottom, | ||||||
|  | 		CenterTop, | ||||||
|  | 		CenterBottomL, | ||||||
|  | 		CenterBottomR, | ||||||
|  | 		RightTop, | ||||||
|  | 		RightBottom, | ||||||
|  | 	}, | ||||||
| 	props: {}, | 	props: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			appMain: null, // dom | 			isFullScreen: false, | ||||||
| 			parentStyle: { | 			scaleNum: 0.8, | ||||||
| 				margin: '8px 14px 0px 16px', | 			dataObj: {}, | ||||||
| 				minHeight: 'calc(100vh - 120px - 8px)', | 			sseReader: null, // 保存流读取器 | ||||||
| 			}, // object | 			abortController: null, // 用于中止 fetch 请求 | ||||||
| 			mainFooter: null, // dom | 			retryCount: 0, // 当前重试次数 | ||||||
|  | 			isDestroyed: false, // 标记组件是否已销毁 | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	// mounted() { | 	created() { | ||||||
| 	// 	this.$nextTick(() => { | 		this.init(); | ||||||
| 	// 		this.modify(); | 	}, | ||||||
| 	// 	}); | 	mounted() { | ||||||
| 	// }, | 		this.boxReset = debounce(() => { | ||||||
| 	// activated() { | 			this.resetSize(); | ||||||
| 	// 	this.modify(); | 		}, 300); | ||||||
| 	// }, | 		this.boxReset(); | ||||||
| 	// deactivated() { | 		window.addEventListener('resize', () => { | ||||||
| 	// 	this.recover(); | 			this.boxReset(); | ||||||
| 	// }, | 		}); | ||||||
| 	// beforeDestroy() { | 		this.getData(); | ||||||
| 	// 	this.recover(); | 	}, | ||||||
| 	// }, | 	beforeDestroy() { | ||||||
|  | 		this.closeSSE(); | ||||||
|  | 	}, | ||||||
|  | 	destroyed() { | ||||||
|  | 		window.removeEventListener('resize', this.boxReset); | ||||||
|  | 	}, | ||||||
|  | 	computed: { | ||||||
|  | 		sidebarOpened() { | ||||||
|  | 			return this.$store.state.app.sidebar.opened; | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		sidebarOpened(newVal, oldVal) { | ||||||
|  | 			this.boxReset(); | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		// modify() { | 		async getData() { | ||||||
| 		// 	// 在这个页面临时修改下父类的margin,结束时需还原 | 			let _this = this; | ||||||
| 		// 	this.appMain = document.querySelector('.app-main'); | 			if (_this.isDestroyed) return; | ||||||
| 		// 	// this.appMain.style.minHeight = 'calc(100vh - 90px)'; | 			const url = | ||||||
| 		// 	this.appMain.style.margin = 0; | 				process.env.VUE_APP_BASE_API + | ||||||
| 		// 	// 在这个页面临时删除 main-footer 元素,结束时需还原 | 				'/admin-api/monitoring/message/subscribe/' + | ||||||
| 		// 	// this.mainFooter = document.querySelector('.main-footer').cloneNode(true); | 				store.getters.userId + | ||||||
| 		// 	// document.querySelector('.main-footer').remove(); | 				'-' + | ||||||
|         //     this.$refs.dataBoard.classList.add('data-board'); | 				Date.now(); | ||||||
| 		// }, | 			const token = getAccessToken(); | ||||||
| 		// recover() { | 			const headers = new Headers({ | ||||||
|         //     this.$refs.dataBoard.classList.remove('data-board'); | 				Authorization: `Bearer ${token}`, | ||||||
| 		// 	this.$nextTick(() => { | 				'Content-Type': 'text/event-stream', | ||||||
| 		// 		this.appMain.style.margin = this.parentStyle.margin; | 			}); | ||||||
| 		// 		// this.appMain.style.minHeight = this.parentStyle.minHeight; | 			try { | ||||||
| 		// 		// this.appMain.insertAdjacentElement('afterend', this.mainFooter); | 				// 创建中止控制器 | ||||||
| 		// 	}); | 				this.abortController = new AbortController(); | ||||||
| 		// }, | 				// 发起 fetch 请求(替换为你的接口地址) | ||||||
| 		goback() { | 				const response = await fetch(url, { | ||||||
| 			this.$router.go(-1); | 					method: 'GET', | ||||||
| 		} | 					headers: headers, | ||||||
|  | 					signal: _this.abortController.signal, // 绑定中止信号 | ||||||
|  | 				}); | ||||||
|  |  | ||||||
|  | 				// 获取流读取器 | ||||||
|  | 				_this.sseReader = response.body.getReader(); | ||||||
|  | 				const decoder = new TextDecoder(); | ||||||
|  | 				let buffer = ''; | ||||||
|  | 				let receivedBytes = 0; | ||||||
|  |  | ||||||
|  | 				// 持续读取流数据 | ||||||
|  | 				while (true) { | ||||||
|  | 					const { done, value } = await _this.sseReader.read(); | ||||||
|  | 					if (done) { | ||||||
|  | 						console.log('SSE 连接正常关闭'); | ||||||
|  | 						_this.handleReconnect(); // 触发重连 | ||||||
|  | 						break; | ||||||
|  | 					} | ||||||
|  | 					// const data = decoder.decode(value); | ||||||
|  | 					// console.log('收到消息:', data); | ||||||
|  |  | ||||||
|  | 					receivedBytes += value.length; | ||||||
|  | 					console.log( | ||||||
|  | 						`收到数据块: ${value.length} 字节, 累计: ${receivedBytes} 字节` | ||||||
|  | 					); | ||||||
|  | 					const chunk = decoder.decode(value, { stream: true }); | ||||||
|  | 					buffer += chunk; | ||||||
|  |  | ||||||
|  | 					// 处理完整的消息 | ||||||
|  | 					const messages = buffer.split('\n\n'); // SSE 消息以双换行分隔 | ||||||
|  | 					buffer = messages.pop() || ''; // 保留最后一个不完整的消息 | ||||||
|  |  | ||||||
|  | 					for (const message of messages) { | ||||||
|  | 						if (_this.isValidData(message)) { | ||||||
|  | 							// console.log('完整 SSE 消息:', message); | ||||||
|  | 								_this.upDateMsg(message); | ||||||
|  | 						} | ||||||
|  | 					} | ||||||
|  |  | ||||||
|  | 					// 处理 SSE 事件数据 | ||||||
|  | 					// const data = decoder.decode(value); | ||||||
|  | 					// console.log('收到消息:', data); | ||||||
|  | 					// if (_this.isValidData(data)){ | ||||||
|  | 					// 	_this.upDateMsg(data); | ||||||
|  | 					// } | ||||||
|  | 				} | ||||||
|  | 			} catch (error) { | ||||||
|  | 				// 主动中止的请求不报错 | ||||||
|  | 				if (error.name === 'AbortError') return; | ||||||
|  | 				console.error('SSE 连接异常:', error); | ||||||
|  | 				_this.handleReconnect(); // 触发重连 | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		closeSSE() { | ||||||
|  | 			this.isDestroyed = true; // 标记销毁 | ||||||
|  | 			if (this.abortController) { | ||||||
|  | 				this.abortController.abort(); // 中止 fetch 请求 | ||||||
|  | 			} | ||||||
|  | 			if (this.sseReader) { | ||||||
|  | 				this.sseReader.cancel(); // 关闭流读取器 | ||||||
|  | 				this.sseReader = null; | ||||||
|  | 			} | ||||||
|  | 			console.log('SSE 连接已强制关闭'); | ||||||
|  | 		}, | ||||||
|  | 		handleReconnect() { | ||||||
|  | 			if (this.isDestroyed) return; | ||||||
|  | 			// 指数退避策略(最大重试 5 次) | ||||||
|  | 			const maxRetries = 5; | ||||||
|  | 			if (this.retryCount < maxRetries) { | ||||||
|  | 				const delay = Math.pow(2, this.retryCount) * 1000; | ||||||
|  | 				setTimeout(() => { | ||||||
|  | 					this.retryCount++; | ||||||
|  | 					this.initSSE(); | ||||||
|  | 				}, delay); | ||||||
|  | 			} else { | ||||||
|  | 				console.error('SSE 重连次数已达上限'); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		isValidData(data) { | ||||||
|  | 			return data.trim().startsWith('data:{') && !data.includes('heartbeat'); | ||||||
|  | 		}, | ||||||
|  | 		upDateMsg(data) { | ||||||
|  | 			const jsonStr = data.replace(/^data:/, '').trim(); | ||||||
|  | 			console.log('jsonStr', jsonStr); | ||||||
|  |  | ||||||
|  | 			try { | ||||||
|  | 				const dataObj = JSON.parse(jsonStr); | ||||||
|  | 				this.dataObj = dataObj; | ||||||
|  | 				console.log('dataObj', this.dataObj); | ||||||
|  | 			} catch (e) { | ||||||
|  | 				console.error('JSON 解析失败:', e); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		change() { | ||||||
|  | 			this.isFullScreen = screenfull.isFullscreen; | ||||||
|  | 		}, | ||||||
|  | 		init() { | ||||||
|  | 			if (!screenfull.isEnabled) { | ||||||
|  | 				this.$message({ | ||||||
|  | 					message: 'you browser can not work', | ||||||
|  | 					type: 'warning', | ||||||
|  | 				}); | ||||||
|  | 				return false; | ||||||
|  | 			} | ||||||
|  | 			screenfull.on('change', this.change); | ||||||
|  | 		}, | ||||||
|  | 		destroy() { | ||||||
|  | 			if (!screenfull.isEnabled) { | ||||||
|  | 				this.$message({ | ||||||
|  | 					message: 'you browser can not work', | ||||||
|  | 					type: 'warning', | ||||||
|  | 				}); | ||||||
|  | 				return false; | ||||||
|  | 			} | ||||||
|  | 			screenfull.off('change', this.change); | ||||||
|  | 		}, | ||||||
|  | 		// 全屏 | ||||||
|  | 		screenfullChange() { | ||||||
|  | 			if (!screenfull.isEnabled) { | ||||||
|  | 				this.$message({ | ||||||
|  | 					message: 'you browser can not work', | ||||||
|  | 					type: 'warning', | ||||||
|  | 				}); | ||||||
|  | 				return false; | ||||||
|  | 			} | ||||||
|  | 			screenfull.toggle(this.$refs.dataBoardBoxB); | ||||||
|  | 		}, | ||||||
|  | 		resetSize() { | ||||||
|  | 			const dataBoardBox = document.getElementById('dataBoardBox'); | ||||||
|  | 			const rw = parseFloat(window.innerWidth); | ||||||
|  | 			const rh = parseFloat(window.innerHeight); | ||||||
|  | 			const bw = parseFloat(dataBoardBox.style.width); | ||||||
|  | 			const bh = parseFloat(dataBoardBox.style.height); | ||||||
|  | 			let wx = 0; | ||||||
|  | 			let hy = 0; | ||||||
|  | 			if (screenfull.isFullscreen) { | ||||||
|  | 				wx = rw / bw; | ||||||
|  | 				hy = rh / bh; | ||||||
|  | 			} else { | ||||||
|  | 				if (this.$store.state.app.sidebar.opened) { | ||||||
|  | 					wx = (rw - 283) / bw; | ||||||
|  | 				} else { | ||||||
|  | 					wx = (rw - 88) / bw; | ||||||
|  | 				} | ||||||
|  | 				hy = (rh - 150) / bh; | ||||||
|  | 			} | ||||||
|  | 			this.scaleNum = wx < hy ? wx : hy; | ||||||
|  | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||||
| .data-board { | .dataBoardBoxB { | ||||||
| 	position: absolute; |  | ||||||
| 	top: 0; |  | ||||||
| 	left: 0; |  | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| 	height: 100%; | 	height: calc(100vh - 150px); | ||||||
| 	background: url('../../../assets/images/DataBoard.png') 100% 100% / contain | 	position: relative; | ||||||
| 		no-repeat; | 	overflow: auto; | ||||||
| } | 	.dataBoardBox { | ||||||
|  |  | ||||||
| .go-back--btn { |  | ||||||
| 	position: fixed; |  | ||||||
| 	top: 28px; |  | ||||||
| 	left: 24px; |  | ||||||
| 	color: #fff; |  | ||||||
| 	font-size: 18px; |  | ||||||
| 	letter-spacing: 6px; |  | ||||||
|  |  | ||||||
| 	&:hover { |  | ||||||
| 		text-decoration: underline; |  | ||||||
| 	} |  | ||||||
|  |  | ||||||
| 	&::after { |  | ||||||
| 		content: "\2BAA"; |  | ||||||
| 		position: absolute; | 		position: absolute; | ||||||
| 		top: 6px; | 		transform-origin: 16px 8px; | ||||||
| 		right: -26px; | 		font-size: 16px; | ||||||
| 		font-size: 24px; | 		top: 0px; | ||||||
|  | 		left: 0px; | ||||||
|  | 		background: url('../../../assets/images/dataBoard/background.png') no-repeat; | ||||||
|  | 		background-size: cover; | ||||||
|  | 		background-position: 0 0; | ||||||
|  | 		overflow: auto; | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -80,18 +80,8 @@ export default { | |||||||
| 			immediate: true, | 			immediate: true, | ||||||
| 		}, | 		}, | ||||||
| 	}, | 	}, | ||||||
|   methods: { | 	methods: { | ||||||
|     getUniqueTimes() { | 		initChart() { | ||||||
|       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; | 			const _this = this; | ||||||
| 			this.chart.setOption({ | 			this.chart.setOption({ | ||||||
| 				title: { | 				title: { | ||||||
| @@ -134,7 +124,9 @@ export default { | |||||||
| 				}, | 				}, | ||||||
| 				xAxis: { | 				xAxis: { | ||||||
| 					type: 'category', | 					type: 'category', | ||||||
|           data: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')), | 					data: this.barData.edgeCt.map((item) => { | ||||||
|  | 						return parseTime(item.recordTime, '{m}-{d} {h}:{i}'); | ||||||
|  | 					}), | ||||||
| 					axisPointer: { | 					axisPointer: { | ||||||
| 						type: 'shadow', | 						type: 'shadow', | ||||||
| 					}, | 					}, | ||||||
| @@ -160,50 +152,44 @@ export default { | |||||||
| 						end: 100, | 						end: 100, | ||||||
| 					}, | 					}, | ||||||
| 				], | 				], | ||||||
|         series: [ | 				series: [ | ||||||
|           { | 					{ | ||||||
|             name: '磨边节拍', | 						name: '磨边节拍', | ||||||
|             type: 'line', | 						type: 'line', | ||||||
|             tooltip: { | 						tooltip: { | ||||||
|               valueFormatter: function (value) { | 							valueFormatter: function (value) { | ||||||
|                 return value + 'pcs/min'; | 								return value + 'pcs/min'; | ||||||
|               }, | 							}, | ||||||
|             }, | 						}, | ||||||
|             data: uniqueTimes.map(time => { | 						data: this.barData.edgeCt.map((item) => { | ||||||
|               // 查找当前时间对应的 ct 值,没有则补 null(图表中会显示为断点) | 							return item.ct; | ||||||
|               const match = this.barData.edgeCt.find(item => item.recordTime === time); | 						}), | ||||||
|               return match ? match.ct : 0; | 					}, | ||||||
|             }) | 					{ | ||||||
|           }, | 						name: '钢化节拍', | ||||||
|           // 钢化节拍 | 						type: 'line', | ||||||
|           { | 						tooltip: { | ||||||
|             name: '钢化节拍', | 							valueFormatter: function (value) { | ||||||
|             type: 'line', | 								return value + 'pcs/min'; | ||||||
|             tooltip: { | 							}, | ||||||
|               valueFormatter: function (value) { | 						}, | ||||||
|                 return value + 'pcs/min'; | 						data: this.barData.temperCt.map((item) => { | ||||||
|               }, | 							return item.ct; | ||||||
|             }, | 						}), | ||||||
|             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'; | ||||||
|             name: '下片节拍', | 							}, | ||||||
|             type: 'line', | 						}, | ||||||
|             tooltip: { | 						data: this.barData.downCt.map((item) => { | ||||||
|               valueFormatter: function (value) { | 							return item.ct; | ||||||
|                 return value + 'pcs/min'; | 						}), | ||||||
|               }, | 					}, | ||||||
|             }, | 				], | ||||||
|             data: uniqueTimes.map(time => { |  | ||||||
|               const match = this.barData.downCt.find(item => item.recordTime === time); |  | ||||||
|               return match ? match.ct : 0; |  | ||||||
|             }) |  | ||||||
|           } |  | ||||||
|         ] |  | ||||||
| 			}); | 			}); | ||||||
| 		}, | 		}, | ||||||
| 	}, | 	}, | ||||||
|   | |||||||
| @@ -119,12 +119,12 @@ export default { | |||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		// 获取数据列表 | 		// 获取数据列表 | ||||||
| 		init(lId, startTime, endTime) { | 		init(lineId, startTime, endTime) { | ||||||
| 			this.eqChartData = []; | 			this.eqChartData = []; | ||||||
| 			this.time.startTime = startTime; | 			this.time.startTime = startTime; | ||||||
| 			this.time.endTime = endTime; | 			this.time.endTime = endTime; | ||||||
| 			this.dataListLoading = true; | 			this.dataListLoading = true; | ||||||
|       getNewCTDet({ lineId: [lId], startTime, endTime }).then((response) => { | 			getNewCTDet(lineId).then((response) => { | ||||||
| 				this.tableData = response.data; | 				this.tableData = response.data; | ||||||
| 				this.dataListLoading = false; | 				this.dataListLoading = false; | ||||||
| 			}); | 			}); | ||||||
|   | |||||||
| @@ -183,7 +183,7 @@ export default { | |||||||
| 		// 获取当前时间 | 		// 获取当前时间 | ||||||
| 		const now = new Date(); | 		const now = new Date(); | ||||||
| 		// 获取前一天的同一时间 | 		// 获取前一天的同一时间 | ||||||
| 		const yesterday = new Date(now.getTime()); | 		const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); | ||||||
| 		// 设置为00:00:00 | 		// 设置为00:00:00 | ||||||
| 		yesterday.setHours(0, 0, 0, 0); | 		yesterday.setHours(0, 0, 0, 0); | ||||||
| 		// 设置为23:59:59 | 		// 设置为23:59:59 | ||||||
|   | |||||||
| @@ -80,7 +80,7 @@ export default { | |||||||
| 					defaultSelect: [], | 					defaultSelect: [], | ||||||
| 					multiple: true, | 					multiple: true, | ||||||
| 					filterable: true, | 					filterable: true, | ||||||
| 					width: 200, | 					width: 400, | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'datePicker', | 					type: 'datePicker', | ||||||
|   | |||||||
| @@ -1,104 +1,157 @@ | |||||||
| <template> | <template> | ||||||
|   <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%"> | 	<el-drawer | ||||||
|     <small-title slot="title" :no-padding="true"> | 		:visible.sync="visible" | ||||||
|       {{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }} | 		:show-close="false" | ||||||
|     </small-title> | 		:wrapper-closable="false" | ||||||
|  | 		class="drawer" | ||||||
|  | 		size="60%"> | ||||||
|  | 		<small-title slot="title" :no-padding="true"> | ||||||
|  | 			{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }} | ||||||
|  | 		</small-title> | ||||||
|  |  | ||||||
|     <div class="content"> | 		<div class="content"> | ||||||
|       <div class="visual-part"> | 			<div class="visual-part"> | ||||||
|         <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" label-position="top" | 				<el-form | ||||||
|           @keyup.enter.native="dataFormSubmit"> | 					ref="dataForm" | ||||||
|           <el-row :gutter="20"> | 					:model="dataForm" | ||||||
|             <el-col :span="12"> | 					:rules="dataRule" | ||||||
|               <el-form-item label="产品编码" prop="code"> | 					label-width="100px" | ||||||
|                 <el-input v-model="dataForm.code" clearable :disabled="isdetail" placeholder="请输入产品编码" /> | 					label-position="top" | ||||||
|               </el-form-item> | 					@keyup.enter.native="dataFormSubmit"> | ||||||
|             </el-col> | 					<el-row :gutter="20"> | ||||||
|             <el-col :span="12"> | 						<el-col :span="12"> | ||||||
|               <el-form-item label="产品名称" prop="name"> | 							<el-form-item label="产品编码" prop="code"> | ||||||
|                 <el-input v-model="dataForm.name" clearable :disabled="isdetail" placeholder="请输入产品名称" /> | 								<el-input | ||||||
|               </el-form-item> | 									v-model="dataForm.code" | ||||||
|             </el-col> | 									clearable | ||||||
|           </el-row> | 									:disabled="isdetail" | ||||||
|           <el-row :gutter="20"> | 									placeholder="请输入产品编码" /> | ||||||
|             <el-col :span="12"> | 							</el-form-item> | ||||||
|               <el-form-item label="产品类型" prop="typeDictValue"> | 						</el-col> | ||||||
|                 <el-select v-model="dataForm.typeDictValue" style="width: 100%" :disabled="isdetail" | 						<el-col :span="12"> | ||||||
|                   placeholder="请选择产品类型"> | 							<el-form-item label="产品名称" prop="name"> | ||||||
|                   <el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label" | 								<el-input | ||||||
|                     :value="dict.value" /> | 									v-model="dataForm.name" | ||||||
|                 </el-select> | 									clearable | ||||||
|               </el-form-item> | 									:disabled="isdetail" | ||||||
|             </el-col> | 									placeholder="请输入产品名称" /> | ||||||
|             <el-col :span="12"> | 							</el-form-item> | ||||||
|               <el-form-item label="单位" prop="unitDictValue"> | 						</el-col> | ||||||
|                 <el-select v-model="dataForm.unitDictValue" style="width: 100%" :disabled="isdetail" | 					</el-row> | ||||||
|                   placeholder="请选择单位"> | 					<el-row :gutter="20"> | ||||||
|                   <el-option v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)" :key="dict.value" :label="dict.label" | 						<el-col :span="12"> | ||||||
|                     :value="dict.value" /> | 							<el-form-item label="产品类型" prop="typeDictValue"> | ||||||
|                 </el-select> | 								<el-select | ||||||
|               </el-form-item> | 									v-model="dataForm.typeDictValue" | ||||||
|             </el-col> | 									style="width: 100%" | ||||||
|           </el-row> | 									:disabled="isdetail" | ||||||
|           <el-row :gutter="20"> | 									placeholder="请选择产品类型"> | ||||||
|             <el-col :span="12"> | 									<el-option | ||||||
|               <el-form-item label="原片规格" prop="originalSpecifications"> | 										v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" | ||||||
|                 <el-input :disabled="isdetail" v-model="dataForm.originalSpecifications" placeholder="请输入原片规格" /> | 										:key="dict.value" | ||||||
|               </el-form-item> | 										:label="dict.label" | ||||||
|             </el-col> | 										:value="dict.value" /> | ||||||
|             <el-col :span="12"> | 								</el-select> | ||||||
|               <el-form-item label="原片单位平方数" prop="originalArea"> | 							</el-form-item> | ||||||
|                 <el-input :disabled="isdetail" v-model="dataForm.originalArea" placeholder="请输入原片单位平方数" /> | 						</el-col> | ||||||
|               </el-form-item> | 						<el-col :span="12"> | ||||||
|             </el-col> | 							<el-form-item label="单位" prop="unitDictValue"> | ||||||
|           </el-row> | 								<el-select | ||||||
|           <el-row :gutter="20"> | 									v-model="dataForm.unitDictValue" | ||||||
|             <el-col :span="12"> | 									style="width: 100%" | ||||||
|               <el-form-item label="深加工规格" prop="specifications"> | 									:disabled="isdetail" | ||||||
|                 <el-input :disabled="isdetail" v-model="dataForm.specifications" placeholder="请输入深加工规格" /> | 									placeholder="请选择单位"> | ||||||
|               </el-form-item> | 									<el-option | ||||||
|             </el-col> | 										v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)" | ||||||
|             <el-col :span="12"> | 										:key="dict.value" | ||||||
|               <el-form-item label="深加工单位平方数" prop="area"> | 										:label="dict.label" | ||||||
|                 <el-input :disabled="isdetail" v-model="dataForm.area" placeholder="请输入深加工单位平方数" /> | 										:value="dict.value" /> | ||||||
|               </el-form-item> | 								</el-select> | ||||||
|             </el-col> | 							</el-form-item> | ||||||
|           </el-row> | 						</el-col> | ||||||
|           <el-row :gutter="20"> | 					</el-row> | ||||||
|             <el-col :span="12"> | 					<el-row :gutter="20"> | ||||||
|               <el-form-item label="完成单位产品用时" prop="processTime"> | 						<el-col :span="12"> | ||||||
|                 <el-input :disabled="isdetail" v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" /> | 							<el-form-item label="原片规格" prop="originalSpecifications"> | ||||||
|               </el-form-item> | 								<el-input | ||||||
|             </el-col> | 									:disabled="isdetail" | ||||||
|             <el-col :span="12"> | 									v-model="dataForm.originalSpecifications" | ||||||
|               <el-form-item label="	加工属性" prop="processType"> | 									placeholder="请输入原片规格" /> | ||||||
|                 <el-select v-model="dataForm.processType" clearable style="width: 100%" :disabled="isdetail" | 							</el-form-item> | ||||||
|                   placeholder="请选择加工属性"> | 						</el-col> | ||||||
|                   <el-option v-for="dict in processTypeList" :key="dict.id" :label="dict.label" | 						<el-col :span="12"> | ||||||
|                     :value="dict.id" /> | 							<el-form-item label="原片单位平方数" prop="originalArea"> | ||||||
|                 </el-select> | 								<el-input | ||||||
|               </el-form-item> | 									:disabled="isdetail" | ||||||
|             </el-col> | 									v-model="dataForm.originalArea" | ||||||
|           </el-row> | 									placeholder="请输入原片单位平方数" /> | ||||||
|         </el-form> | 							</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> | ||||||
|  |  | ||||||
|         <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true"> | 				<small-title | ||||||
|           产品属性列表 | 					style="margin: 16px 0; padding-left: 8px" | ||||||
|         </small-title> | 					:no-padding="true"> | ||||||
|  | 					产品属性列表 | ||||||
|  | 				</small-title> | ||||||
|  |  | ||||||
|         <div class="attr-list"> | 				<div class="attr-list"> | ||||||
|           <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | 					<base-table | ||||||
|             :add-button-show="isdetail ? null : '添加属性'" @emitButtonClick="addNew()" :table-data="productAttributeList"> | 						:table-props="tableProps" | ||||||
|             <method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn" | 						:page="listQuery.pageNo" | ||||||
|               @clickBtn="handleClick" /> | 						:limit="listQuery.pageSize" | ||||||
|           </base-table> | 						:add-button-show="isdetail ? null : '添加属性'" | ||||||
|           <pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo" | 						@emitButtonClick="addNew()" | ||||||
|             :limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" /> | 						:table-data="productAttributeList"> | ||||||
|         </div> | 						<method-btn | ||||||
|       </div> | 							v-if="!isdetail" | ||||||
|     </div> | 							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 style="margin-right: 10px" @click="goback()">返回</el-button> | ||||||
| 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||||
| 				编辑 | 				编辑 | ||||||
| @@ -114,19 +167,22 @@ | |||||||
| 			</span> | 			</span> | ||||||
| 		</div> --> | 		</div> --> | ||||||
|  |  | ||||||
|     <div class="drawer-body__footer"> | 		<div class="drawer-body__footer"> | ||||||
|       <el-button style="" @click="goback()">取消</el-button> | 			<el-button style="" @click="goback()">取消</el-button> | ||||||
|       <el-button v-if="isdetail" type="primary" @click="goEdit()"> | 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||||
|         编辑 | 				编辑 | ||||||
|       </el-button> | 			</el-button> | ||||||
|       <el-button v-else type="primary" @click="dataFormSubmit()"> | 			<el-button v-else type="primary" @click="dataFormSubmit()"> | ||||||
|         确定 | 				确定 | ||||||
|       </el-button> | 			</el-button> | ||||||
|     </div> | 		</div> | ||||||
|  |  | ||||||
|     <product-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :product-id="dataForm.id" | 		<product-attr-add | ||||||
|       @refreshDataList="getList" /> | 			v-if="addOrUpdateVisible" | ||||||
|   </el-drawer> | 			ref="addOrUpdate" | ||||||
|  | 			:product-id="dataForm.id" | ||||||
|  | 			@refreshDataList="getList" /> | ||||||
|  | 	</el-drawer> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| @@ -190,31 +246,13 @@ export default { | |||||||
| 				specifications: '', // 深加工规格 | 				specifications: '', // 深加工规格 | ||||||
| 				unitDictValue: '', // 单位id | 				unitDictValue: '', // 单位id | ||||||
| 				originalSpecifications: '', // 原片规格 | 				originalSpecifications: '', // 原片规格 | ||||||
|         originalArea: 0, // 原片单位平方数 | 				originalArea: 0, // 原片单位平方数 | ||||||
|         processType:undefined, |  | ||||||
| 			}, | 			}, | ||||||
| 			listQuery: { | 			listQuery: { | ||||||
| 				pageSize: 10, | 				pageSize: 10, | ||||||
| 				pageNo: 1, | 				pageNo: 1, | ||||||
| 				total: 0, | 				total: 0, | ||||||
|       }, | 			}, | ||||||
|       processTypeList: [ |  | ||||||
|         { |  | ||||||
|           id: '0', |  | ||||||
|           label:'压花丝印' |  | ||||||
|         }, |  | ||||||
|         { |  | ||||||
|           id: '1', |  | ||||||
|           label: '无印打孔' |  | ||||||
|         }, |  | ||||||
|         { |  | ||||||
|           id: '2', |  | ||||||
|           label: '单层镀膜' |  | ||||||
|         }, { |  | ||||||
|           id: '3', |  | ||||||
|           label: '双层镀膜' |  | ||||||
|         } |  | ||||||
|       ], |  | ||||||
| 			dataRule: { | 			dataRule: { | ||||||
| 				code: [ | 				code: [ | ||||||
| 					{ | 					{ | ||||||
|   | |||||||
| @@ -6,17 +6,31 @@ | |||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
|   <div class="app-container"> | 	<div class="app-container"> | ||||||
|  | 		<search-bar | ||||||
|     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | 			:formConfigs="formConfig" | ||||||
|     <base-table v-if="showData.length" class="right-aside" v-loading="dataListLoading" :table-props="tableProps" | 			ref="searchBarForm" | ||||||
|       :page="listQuery.pageNo" :limit="listQuery.pageSize" :selectWidth="55" :table-data="showData" | 			@headBtnClick="buttonClick" /> | ||||||
|       @selection-change="selectChange"> | 		<base-table | ||||||
|     </base-table> | 			v-if="showData.length" | ||||||
|     <div v-else class="no-data-bg"></div> | 			class="right-aside" | ||||||
|     <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total" | 			v-loading="dataListLoading" | ||||||
|       @pagination="getDataList" /> | 			:table-props="tableProps" | ||||||
|     <!-- <div v-show="false" ref="pdf"> | 			: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 | 			<base-table | ||||||
| 				v-loading="dataListLoading" | 				v-loading="dataListLoading" | ||||||
| 				:table-props="tableProps" | 				:table-props="tableProps" | ||||||
| @@ -25,15 +39,19 @@ | |||||||
| 				:table-data="selectedList" | 				:table-data="selectedList" | ||||||
| 			/> | 			/> | ||||||
| 		</div> --> | 		</div> --> | ||||||
|     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> | 		<el-dialog | ||||||
|       <el-button type="primary" @click="exportXlsx">xlsx</el-button> | 			title="提示" | ||||||
|       <el-button type="success" @click="exportPdf">pdf</el-button> | 			:visible.sync="dialogVisible" | ||||||
|       <span slot="footer" class="dialog-footer"> | 			width="30%" | ||||||
|         <el-button @click="dialogVisible = false">取 消</el-button> | 			:before-close="handleClose"> | ||||||
|         <el-button type="primary" @click="dialogVisible = false">确 定</el-button> | 			<el-button type="primary" @click="exportXlsx">xlsx</el-button> | ||||||
|       </span> |   		<el-button type="success" @click="exportPdf">pdf</el-button> | ||||||
|     </el-dialog> | 			<span slot="footer" class="dialog-footer"> | ||||||
|   </div> | 				<el-button @click="dialogVisible = false">取 消</el-button> | ||||||
|  | 				<el-button type="primary" @click="dialogVisible = false">确 定</el-button> | ||||||
|  | 			</span> | ||||||
|  | 		</el-dialog> | ||||||
|  | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| @@ -185,8 +203,7 @@ export default { | |||||||
| 				} | 				} | ||||||
| 			], | 			], | ||||||
| 		}; | 		}; | ||||||
|   }, | 	}, | ||||||
|  |  | ||||||
| 	created() { | 	created() { | ||||||
| 		this.getDataList() | 		this.getDataList() | ||||||
| 		this.getPdLineList() | 		this.getPdLineList() | ||||||
|   | |||||||
| @@ -1,132 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,272 +0,0 @@ | |||||||
| <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. 计算 interval(5 个刻度对应 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> |  | ||||||
| @@ -1,361 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,373 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,272 +0,0 @@ | |||||||
| <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. 计算 interval(5 个刻度对应 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> |  | ||||||
| @@ -1,273 +0,0 @@ | |||||||
| <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> |  | ||||||
| @@ -1,65 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,221 +0,0 @@ | |||||||
| <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> |  | ||||||
| @@ -1,281 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -305,7 +305,7 @@ export default { | |||||||
| 					this.startTime = new Date(payload.recordTime) | 					this.startTime = new Date(payload.recordTime) | ||||||
| 					this.queryParams.lineId = payload.lineId || null; | 					this.queryParams.lineId = payload.lineId || null; | ||||||
| 					this.queryParams.sectionId = payload.sectionId || null; | 					this.queryParams.sectionId = payload.sectionId || null; | ||||||
| 					this.queryParams.equipmentId = payload.equipmentId || null; |           this.queryParams.equipmentId = payload.equipmentId ? Number(payload.equipmentId) : undefined | ||||||
| 					this.queryParams.recordTime = payload.recordTime | 					this.queryParams.recordTime = payload.recordTime | ||||||
| 						? [ | 						? [ | ||||||
| 							payload.recordTime, | 							payload.recordTime, | ||||||
|   | |||||||
| @@ -132,7 +132,7 @@ export default { | |||||||
| 				}, | 				}, | ||||||
| 			], | 			], | ||||||
| 			queryParams: { | 			queryParams: { | ||||||
| 				equipmentId: null, | 				equipmentId: undefined, | ||||||
| 				recordTime: null, | 				recordTime: null, | ||||||
| 			}, | 			}, | ||||||
| 			graphList: [], | 			graphList: [], | ||||||
| @@ -153,7 +153,7 @@ export default { | |||||||
| 		this.$nextTick(() => { | 		this.$nextTick(() => { | ||||||
| 			this.$refs['search-bar'].formInline.recordTime = formattedDate; | 			this.$refs['search-bar'].formInline.recordTime = formattedDate; | ||||||
| 		}); | 		}); | ||||||
| 		this.queryParams.equipmentId = Number(this.$route.query.eqid); |     this.queryParams.equipmentId = this.$route.query.eqid? Number(this.$route.query.eqid): undefined | ||||||
| 		this.startTime = new Date(formattedDate); | 		this.startTime = new Date(formattedDate); | ||||||
| 		this.queryParams.recordTime = formattedDate | 		this.queryParams.recordTime = formattedDate | ||||||
| 			? [ | 			? [ | ||||||
| @@ -207,7 +207,7 @@ export default { | |||||||
|  |  | ||||||
| 		/** 重置查询条件 */ | 		/** 重置查询条件 */ | ||||||
| 		initQuery() { | 		initQuery() { | ||||||
| 			this.queryParams.equipmentId = null; | 			this.queryParams.equipmentId = undefined; | ||||||
| 			this.queryParams.recordTime = null; | 			this.queryParams.recordTime = null; | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| @@ -251,7 +251,7 @@ export default { | |||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		handleSearchBarBtnClick({ btnName, ...payload }) { | 		handleSearchBarBtnClick({ btnName, ...payload }) { | ||||||
|       this.queryParams.equipmentId = Number(this.$route.query.eqid); |       this.queryParams.equipmentId = this.$route.query.eqid ? Number(this.$route.query.eqid) :undefined | ||||||
| 			switch (btnName) { | 			switch (btnName) { | ||||||
| 				case 'search': | 				case 'search': | ||||||
| 					if (!payload.recordTime || payload.recordTime.length <= 0) { | 					if (!payload.recordTime || payload.recordTime.length <= 0) { | ||||||
|   | |||||||
| @@ -1,65 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,125 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,806 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,69 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,114 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,469 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @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> |  | ||||||
| @@ -1,26 +0,0 @@ | |||||||
| <template> |  | ||||||
| 	<span> |  | ||||||
| 		{{ |  | ||||||
| 			injectData.shiftSustainedNum + |  | ||||||
| 			(injectDatashiftSustainedType |  | ||||||
| 				? ['', '日', '周', '月', '季'][injectDatashiftSustainedType] |  | ||||||
| 				: '') |  | ||||||
| 		}} |  | ||||||
| 	</span> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
| 	props: { |  | ||||||
| 		injectData: { |  | ||||||
| 			type: Object, |  | ||||||
| 			default: () => ({}), |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| 	data() { |  | ||||||
| 		return {}; |  | ||||||
| 	}, |  | ||||||
| 	created() {}, |  | ||||||
| 	methods: {}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,31 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @Author: zwq |  | ||||||
|  * @Date: 2025-10-13 16:40:08 |  | ||||||
|  * @LastEditors: zwq |  | ||||||
|  * @LastEditTime: 2025-10-13 16:43:11 |  | ||||||
|  * @Description: |  | ||||||
| --> |  | ||||||
| <template> |  | ||||||
| 	<el-tag |  | ||||||
| 		v-if="injectData.status" |  | ||||||
|      size="medium" |  | ||||||
| 		:type="['', '', 'success', 'warning'][injectData.status]"> |  | ||||||
| 		{{ ['', '草稿', '已确认', '已作废'][injectData.status] }} |  | ||||||
| 	</el-tag> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
| 	props: { |  | ||||||
| 		injectData: { |  | ||||||
| 			type: Object, |  | ||||||
| 			default: () => ({}), |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| 	data() { |  | ||||||
| 		return {}; |  | ||||||
| 	}, |  | ||||||
| 	created() {}, |  | ||||||
| 	methods: {}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,64 +0,0 @@ | |||||||
| <template> |  | ||||||
| 	<treeselect |  | ||||||
| 		v-model="deptId" |  | ||||||
| 		:options="deptOptions" |  | ||||||
| 		:show-count="true" |  | ||||||
| 		sise="small" |  | ||||||
| 		ref="treeselect" |  | ||||||
| 		placeholder="请选择归属部门" |  | ||||||
| 		@input="setId" |  | ||||||
| 		:normalizer="normalizer" /> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import Treeselect from '@riophae/vue-treeselect'; |  | ||||||
| import '@riophae/vue-treeselect/dist/vue-treeselect.css'; |  | ||||||
| import { listSimpleDepts } from '@/api/system/dept'; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	components: { Treeselect }, |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			deptId: undefined, |  | ||||||
| 			deptOptions: undefined, |  | ||||||
| 			defaultProps: { |  | ||||||
| 				children: 'children', |  | ||||||
| 				label: 'name', |  | ||||||
| 			}, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	created() { |  | ||||||
| 		this.getTreeselect(); |  | ||||||
| 	}, |  | ||||||
| 	methods: { |  | ||||||
| 		/** 查询部门下拉树结构  */ |  | ||||||
| 		getTreeselect() { |  | ||||||
| 			listSimpleDepts().then((response) => { |  | ||||||
| 				// 处理 deptOptions 参数 |  | ||||||
| 				this.deptOptions = []; |  | ||||||
| 				this.deptOptions.push(...this.handleTree(response.data, 'id')); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
|     // 子组件返回id |  | ||||||
| 		setId(val) { |  | ||||||
| 			this.$emit('DeptId', val); |  | ||||||
| 		}, |  | ||||||
|     // 父组件赋值id |  | ||||||
| 		setID(id) { |  | ||||||
| 			this.deptId = id; |  | ||||||
| 		}, |  | ||||||
| 		clear() { |  | ||||||
| 			console.log(this.$refs.treeselect); |  | ||||||
| 			this.$refs.treeselect.clear(); |  | ||||||
| 		}, |  | ||||||
| 		// 格式化部门的下拉框 |  | ||||||
| 		normalizer(node) { |  | ||||||
| 			return { |  | ||||||
| 				id: node.id, |  | ||||||
| 				label: node.name, |  | ||||||
| 				children: node.children, |  | ||||||
| 			}; |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,214 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @Author: zwq |  | ||||||
|  * @Date: 2021-11-18 14:16:25 |  | ||||||
|  * @LastEditors: zwq |  | ||||||
|  * @LastEditTime: 2025-10-13 15:44:18 |  | ||||||
|  * @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="8"> |  | ||||||
| 				<el-form-item label="班组编号" prop="code"> |  | ||||||
| 					<el-input |  | ||||||
| 						v-model="dataForm.code" |  | ||||||
| 						clearable |  | ||||||
| 						placeholder="请输入班组编号" /> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="班组名称" prop="name"> |  | ||||||
| 					<el-input |  | ||||||
| 						v-model="dataForm.name" |  | ||||||
| 						clearable |  | ||||||
| 						placeholder="请输入班组名称" /> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="部门"> |  | ||||||
| 					<dept-select |  | ||||||
| 						style="width: 200px" |  | ||||||
| 						ref="deptSelect" |  | ||||||
| 						@DeptId="setDeptId"></dept-select> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="组长" prop="leaderId"> |  | ||||||
| 					<el-select |  | ||||||
| 						v-model="dataForm.leaderId" |  | ||||||
| 						@change="setLeaderName" |  | ||||||
| 						placeholder="请选择组长"> |  | ||||||
| 						<el-option |  | ||||||
| 							v-for="item in leaderArr" |  | ||||||
| 							:key="item.id" |  | ||||||
| 							:label="item.nickname" |  | ||||||
| 							:value="item.id"></el-option> |  | ||||||
| 					</el-select> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="组长电话" prop="leaderPhone"> |  | ||||||
| 					<el-input |  | ||||||
| 						v-model="dataForm.leaderPhone" |  | ||||||
| 						clearable |  | ||||||
| 						placeholder="请输入组长电话" /> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="班组人数" prop="num"> |  | ||||||
| 					<el-input-number |  | ||||||
| 						v-model="dataForm.num" |  | ||||||
| 						:step="1" |  | ||||||
| 						:min="0" |  | ||||||
| 						step-strictly /> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<el-form-item label="生产班组" prop="isProduction"> |  | ||||||
| 					<el-select |  | ||||||
| 						v-model="dataForm.isProduction" |  | ||||||
| 						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-col> |  | ||||||
| 			<el-col :span="8"> |  | ||||||
| 				<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> |  | ||||||
| import basicAdd from '@/mixins/basic-add'; |  | ||||||
| import deptSelect from './../deptSelect.vue'; |  | ||||||
| import { listSimpleUsers } from '@/api/system/user'; |  | ||||||
| import { |  | ||||||
| 	createGroup, |  | ||||||
| 	updateGroup, |  | ||||||
| 	getGroup, |  | ||||||
| 	getCode, |  | ||||||
| } from '@/api/group/groupSetting'; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	mixins: [basicAdd], |  | ||||||
| 	components: { |  | ||||||
| 		deptSelect, |  | ||||||
| 	}, |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			urlOptions: { |  | ||||||
| 				isGetCode: true, |  | ||||||
| 				codeURL: getCode, |  | ||||||
| 				createURL: createGroup, |  | ||||||
| 				updateURL: updateGroup, |  | ||||||
| 				infoURL: getGroup, |  | ||||||
| 				optionArrUrl: [listSimpleUsers], //需要获取下拉框的方法数组 |  | ||||||
| 			}, |  | ||||||
| 			dataForm: { |  | ||||||
| 				id: undefined, |  | ||||||
| 				code: undefined, |  | ||||||
| 				name: undefined, |  | ||||||
| 				leaderId: undefined, |  | ||||||
| 				leaderName: undefined, |  | ||||||
| 				leaderPhone: undefined, |  | ||||||
| 				deptId: undefined, |  | ||||||
| 				isProduction: undefined, |  | ||||||
| 				num: undefined, |  | ||||||
| 				remark: undefined, |  | ||||||
| 			}, |  | ||||||
|       setData: true, |  | ||||||
| 			leaderArr: [], |  | ||||||
| 			options: [ |  | ||||||
| 				{ |  | ||||||
| 					value: true, |  | ||||||
| 					label: '是', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					value: false, |  | ||||||
| 					label: '否', |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 			dataRule: { |  | ||||||
| 				code: [ |  | ||||||
| 					{ required: true, message: '班组编码不能为空', trigger: 'blur' }, |  | ||||||
| 				], |  | ||||||
| 				name: [ |  | ||||||
| 					{ required: true, message: '班组名称不能为空', trigger: 'blur' }, |  | ||||||
| 				], |  | ||||||
| 				leaderId: [ |  | ||||||
| 					{ required: true, message: '组长不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 				isProduction: [ |  | ||||||
| 					{ required: true, message: '生产班组不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 			}, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	methods: { |  | ||||||
| 		setDeptId(val) { |  | ||||||
| 			this.dataForm.deptId = val; |  | ||||||
| 		}, |  | ||||||
| 		/** 获取下拉框数组 */ |  | ||||||
| 		getArr() { |  | ||||||
| 			this.urlOptions.optionArrUrl[0]() |  | ||||||
| 				.then(({ data: res }) => { |  | ||||||
| 					this.leaderArr = res; |  | ||||||
| 				}) |  | ||||||
| 				.catch(() => {}); |  | ||||||
| 		}, |  | ||||||
|     setDataForm(){ |  | ||||||
|       this.$refs.deptSelect.setID(this.dataForm.deptId) |  | ||||||
|     }, |  | ||||||
| 		setLeaderName(val) { |  | ||||||
| 			this.leaderArr.map((item) => { |  | ||||||
| 				if (val === item.id) { |  | ||||||
| 					this.dataForm.leaderName = item.nickname; |  | ||||||
| 				} |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
|     // 表单提交 |  | ||||||
|     dataFormSubmit() { |  | ||||||
|       this.$refs["dataForm"].validate((valid) => { |  | ||||||
|         if (!valid) { |  | ||||||
|           return false; |  | ||||||
|         } |  | ||||||
|         if(!this.dataForm.deptId){ |  | ||||||
| 						this.$message('部门不能为空'); |  | ||||||
|             return |  | ||||||
|         } |  | ||||||
|         // 修改的提交 |  | ||||||
|         if (this.dataForm.id) { |  | ||||||
|           this.urlOptions.updateURL(this.dataForm).then(response => { |  | ||||||
|             this.$modal.msgSuccess("修改成功"); |  | ||||||
|             this.visible = false; |  | ||||||
|             this.$emit("refreshDataList"); |  | ||||||
|           }); |  | ||||||
|           return; |  | ||||||
|         } |  | ||||||
|         // 添加的提交 |  | ||||||
|         this.urlOptions.createURL(this.dataForm).then(response => { |  | ||||||
|           this.$modal.msgSuccess("新增成功"); |  | ||||||
|           this.visible = false; |  | ||||||
|           this.$emit("refreshDataList"); |  | ||||||
|         }); |  | ||||||
|       }); |  | ||||||
|     }, |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,35 +0,0 @@ | |||||||
| <template> |  | ||||||
| 	<el-switch |  | ||||||
| 		@change="changeStatus" |  | ||||||
| 		size="small" |  | ||||||
| 		v-model="list.enabled" |  | ||||||
| 		:active-value="1" |  | ||||||
| 		:inactive-value="0"></el-switch> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import { updateGroup } from '@/api/group/groupSetting'; |  | ||||||
| export default { |  | ||||||
| 	props: { |  | ||||||
| 		injectData: { |  | ||||||
| 			type: Object, |  | ||||||
| 			default: () => ({}), |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			list: this.injectData, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	created() {}, |  | ||||||
| 	methods: { |  | ||||||
| 		changeStatus(val) { |  | ||||||
| 			const data = { ...this.injectData, enabled: val }; |  | ||||||
| 			updateGroup(data).then((res) => { |  | ||||||
| 				this.$modal.msgSuccess('修改成功'); |  | ||||||
| 					this.$emit('emitData'); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,277 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @Author: zwq |  | ||||||
|  * @Date: 2025-10-11 14:27:37 |  | ||||||
|  * @LastEditors: zwq |  | ||||||
|  * @LastEditTime: 2025-10-13 14:44:29 |  | ||||||
|  * @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="deptId"> |  | ||||||
| 					<dept-select |  | ||||||
| 						style="width: 200px" |  | ||||||
| 						ref="deptSelect" |  | ||||||
|             @DeptId="setDeptId"></dept-select> |  | ||||||
| 				</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="leaderName"> |  | ||||||
| 					<el-input |  | ||||||
| 						v-model="formInline.leaderName" |  | ||||||
| 						clearable |  | ||||||
| 						size="small" |  | ||||||
| 						placeholder="请输入组长" /> |  | ||||||
| 				</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" |  | ||||||
| 			width="50%"> |  | ||||||
| 			<add-or-update |  | ||||||
| 				ref="addOrUpdate" |  | ||||||
| 				@refreshDataList="successSubmit"></add-or-update> |  | ||||||
| 		</base-dialog> |  | ||||||
| 	</div> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import AddOrUpdate from './add-or-updata'; |  | ||||||
| import deptSelect from './../deptSelect.vue'; |  | ||||||
| import basicPage from '@/mixins/basic-page'; |  | ||||||
| import changeStatus from './changeStatus.vue'; |  | ||||||
| import { parseTime } from '@/filter/code-filter'; |  | ||||||
| import { getGroupPage } from '@/api/group/groupSetting'; |  | ||||||
|  |  | ||||||
| const tableProps = [ |  | ||||||
| 	{ |  | ||||||
| 		prop: 'code', |  | ||||||
| 		label: '班组编号', |  | ||||||
| 		width: 140, |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'name', |  | ||||||
| 		label: '班组名称', |  | ||||||
| 		width: 100, |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'deptId', |  | ||||||
| 		label: '所属部门', |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'leaderName', |  | ||||||
| 		label: '组长', |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'leaderPhone', |  | ||||||
| 		label: '组长电话', |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'num', |  | ||||||
| 		label: '人数', |  | ||||||
| 		width: 70, |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'isProduction', |  | ||||||
| 		label: '是否生产班组', |  | ||||||
|     filter: val=>{return val?'是':'否'}, |  | ||||||
| 		width: 110, |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'remark', |  | ||||||
| 		label: '备注', |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'createTime', |  | ||||||
| 		label: '创建时间', |  | ||||||
| 		filter: parseTime, |  | ||||||
| 		width: 150, |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'enabled', |  | ||||||
| 		label: '班组状态', |  | ||||||
| 		subcomponent: changeStatus, |  | ||||||
| 		width: 80, |  | ||||||
| 	}, |  | ||||||
| ]; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	mixins: [basicPage], |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			urlOptions: { |  | ||||||
| 				getDataListURL: getGroupPage, |  | ||||||
| 			}, |  | ||||||
| 			tableProps, |  | ||||||
| 			tableBtn: [ |  | ||||||
| 				{ |  | ||||||
| 					type: 'edit', |  | ||||||
| 					btnName: '编辑', |  | ||||||
| 				}, |  | ||||||
| 			].filter((v) => v), |  | ||||||
| 			tableData: [], |  | ||||||
| 			formInline: { |  | ||||||
| 				code: '', |  | ||||||
| 				name: '', |  | ||||||
| 				deptId: '', |  | ||||||
| 				leaderName: '', |  | ||||||
| 			}, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	components: { |  | ||||||
| 		AddOrUpdate, |  | ||||||
| 		deptSelect, |  | ||||||
| 	}, |  | ||||||
| 	created() {}, |  | ||||||
| 	methods: { |  | ||||||
| 		buttonClick(val) { |  | ||||||
| 			switch (val.btnName) { |  | ||||||
| 				case 'search': |  | ||||||
| 					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.addOrUpdateHandle(); |  | ||||||
| 					break; |  | ||||||
| 				case 'export': |  | ||||||
| 					this.handleExport(); |  | ||||||
| 					break; |  | ||||||
| 				default: |  | ||||||
| 					console.log(val); |  | ||||||
| 			} |  | ||||||
| 		}, |  | ||||||
|     setDeptId(val){ |  | ||||||
|       this.formInline.deptId = val |  | ||||||
|     } |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </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; |  | ||||||
| } |  | ||||||
| </style> |  | ||||||
| @@ -1,209 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @Author: zwq |  | ||||||
|  * @Date: 2021-11-18 14:16:25 |  | ||||||
|  * @LastEditors: zwq |  | ||||||
|  * @LastEditTime: 2025-10-19 00:09: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="name"> |  | ||||||
| 					<el-input |  | ||||||
| 						v-model="dataForm.name" |  | ||||||
| 						clearable |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						placeholder="请输入节假日名称" /> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="12"> |  | ||||||
| 				<el-form-item label="日历类型" prop="calendarType"> |  | ||||||
| 					<el-select |  | ||||||
| 						v-model="dataForm.calendarType" |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						style="width: 100%"> |  | ||||||
| 						<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-col :span="12"> |  | ||||||
| 				<el-form-item label="日期类型" prop="dateType"> |  | ||||||
| 					<el-select |  | ||||||
| 						style="width: 100%" |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						v-model="dataForm.dateType"> |  | ||||||
| 						<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="12"> |  | ||||||
| 				<el-form-item label="日期" prop="dateTime"> |  | ||||||
| 					<el-date-picker |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						style="width: 100%" |  | ||||||
| 						v-if="dataForm.dateType == 1" |  | ||||||
| 						key="date" |  | ||||||
| 						v-model="dataForm.dateDay" |  | ||||||
| 						type="date" |  | ||||||
| 						placeholder="选择日期" |  | ||||||
| 						format="yyyy-MM-dd" |  | ||||||
| 						value-format="yyyy-MM-dd"></el-date-picker> |  | ||||||
| 					<el-date-picker |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						style="width: 100%" |  | ||||||
| 						v-else |  | ||||||
| 						key="daterange" |  | ||||||
| 						v-model="dataForm.dateDayArr" |  | ||||||
| 						type="daterange" |  | ||||||
| 						format="yyyy-MM-dd" |  | ||||||
| 						value-format="yyyy-MM-dd" |  | ||||||
| 						range-separator="至" |  | ||||||
| 						start-placeholder="开始日期" |  | ||||||
| 						end-placeholder="结束日期"></el-date-picker> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 			<el-col :span="12"> |  | ||||||
| 				<el-form-item label="是否每年重复" prop="repeat"> |  | ||||||
| 					<el-select |  | ||||||
| 						v-model="dataForm.repeat" |  | ||||||
| 						:disabled="detail" |  | ||||||
| 						style="width: 100%"> |  | ||||||
| 						<el-option |  | ||||||
| 							v-for="item in options3" |  | ||||||
| 							:key="item.value" |  | ||||||
| 							:label="item.label" |  | ||||||
| 							:value="item.value"></el-option> |  | ||||||
| 					</el-select> |  | ||||||
| 				</el-form-item> |  | ||||||
| 			</el-col> |  | ||||||
| 		</el-row> |  | ||||||
| 	</el-form> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import { createHoliday, updateHoliday,deleteHolidayn } from '@/api/group/holidaySetting'; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	components: {}, |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			dataForm: { |  | ||||||
| 				id: undefined, |  | ||||||
| 				name: undefined, |  | ||||||
| 				calendarType: 1, |  | ||||||
| 				dateType: 1, |  | ||||||
| 				dateDay: undefined, |  | ||||||
| 				dateDayArr: [], |  | ||||||
| 				repeat: true, |  | ||||||
| 			}, |  | ||||||
| 			detail: false, |  | ||||||
| 			options1: [ |  | ||||||
| 				{ |  | ||||||
| 					value: 1, |  | ||||||
| 					label: '公历(阳历)', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					value: 2, |  | ||||||
| 					label: '农历(阴历)', |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 			options2: [ |  | ||||||
| 				{ |  | ||||||
| 					value: 1, |  | ||||||
| 					label: '单天', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					value: 2, |  | ||||||
| 					label: '时间段', |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 			options3: [ |  | ||||||
| 				{ |  | ||||||
| 					value: false, |  | ||||||
| 					label: '否,本年度有效', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					value: true, |  | ||||||
| 					label: '是,每年循环生效', |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 			dataRule: { |  | ||||||
| 				name: [ |  | ||||||
| 					{ required: true, message: '节假日名称不能为空', trigger: 'blur' }, |  | ||||||
| 				], |  | ||||||
| 				calendarType: [ |  | ||||||
| 					{ required: true, message: '日历类型不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 				dateType: [ |  | ||||||
| 					{ required: true, message: '日期类型不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 				dateDay: [ |  | ||||||
| 					{ required: true, message: '日期不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 				dateDayArr: [ |  | ||||||
| 					{ required: true, message: '日期不能为空', trigger: 'change' }, |  | ||||||
| 				], |  | ||||||
| 				repeat: [ |  | ||||||
| 					{ |  | ||||||
| 						required: true, |  | ||||||
| 						message: '是否每年重复不能为空', |  | ||||||
| 						trigger: 'change', |  | ||||||
| 					}, |  | ||||||
| 				], |  | ||||||
| 			}, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	methods: { |  | ||||||
| 		init(id, detail) { |  | ||||||
| 			this.dataForm.id = id || undefined; |  | ||||||
| 			this.detail = detail || false; |  | ||||||
| 		}, |  | ||||||
|     editHoliday(){ |  | ||||||
|       this.detail = false |  | ||||||
|     }, |  | ||||||
|     deleteHoliday(){ |  | ||||||
|       deleteHolidayn(this.dataForm.id).then(res=>{ |  | ||||||
|         console.log(res) |  | ||||||
|       }) |  | ||||||
|     }, |  | ||||||
| 		// 表单提交 |  | ||||||
| 		dataFormSubmit() { |  | ||||||
| 			this.$refs['dataForm'].validate((valid) => { |  | ||||||
| 				if (!valid) { |  | ||||||
| 					return false; |  | ||||||
| 				} |  | ||||||
| 				// 修改的提交 |  | ||||||
| 				if (this.dataForm.id) { |  | ||||||
| 					updateHoliday(this.dataForm).then((response) => { |  | ||||||
| 						this.$modal.msgSuccess('修改成功'); |  | ||||||
| 						this.visible = false; |  | ||||||
| 						this.$emit('refreshPage'); |  | ||||||
| 					}); |  | ||||||
| 					return; |  | ||||||
| 				} |  | ||||||
| 				// 添加的提交 |  | ||||||
| 				createHoliday(this.dataForm).then((response) => { |  | ||||||
| 					this.$modal.msgSuccess('新增成功'); |  | ||||||
| 					this.visible = false; |  | ||||||
| 					this.$emit('refreshPage'); |  | ||||||
| 				}); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| @@ -1,181 +0,0 @@ | |||||||
| <template> |  | ||||||
| 	<div class="app-container"> |  | ||||||
| 		<search-bar |  | ||||||
| 			:formConfigs="formConfig" |  | ||||||
| 			ref="searchBarForm" |  | ||||||
| 			@headBtnClick="buttonClick" /> |  | ||||||
| 		<base-table |  | ||||||
| 			:table-props="tableProps" |  | ||||||
| 			:page="listQuery.pageNo" |  | ||||||
| 			:limit="listQuery.pageSize" |  | ||||||
| 			:table-data="tableData"> |  | ||||||
| 		</base-table> |  | ||||||
| 		<pagination |  | ||||||
| 			:limit.sync="listQuery.pageSize" |  | ||||||
| 			:page.sync="listQuery.pageNo" |  | ||||||
| 			:total="listQuery.total" |  | ||||||
| 			@pagination="getDataList" /> |  | ||||||
| 	</div> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import { parseTime } from '@/filter/code-filter'; |  | ||||||
| import { deptHolidayLogList } from '@/api/group/holidaySetting'; |  | ||||||
|  |  | ||||||
| const tableProps = [ |  | ||||||
| 	{ |  | ||||||
| 		prop: 'createTime', |  | ||||||
| 		label: '操作时间', |  | ||||||
| 		filter: parseTime |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'opPeopleName', |  | ||||||
| 		label: '操作人' |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'opType', |  | ||||||
| 		label: '操作类型', |  | ||||||
|     filter: (val)=>{return val?['','创建','删除','修改','-','-'][val]:'-'} |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'name', |  | ||||||
| 		label: '节假日名称' |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'opDet', |  | ||||||
| 		label: '修改内容' |  | ||||||
| 	}, |  | ||||||
| 	{ |  | ||||||
| 		prop: 'planType', |  | ||||||
| 		label: '更新排班计划', |  | ||||||
|     filter: (val)=>{return val?['','是','否','无排班计划'][val]:'-'} |  | ||||||
| 	}, |  | ||||||
| ]; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
|       listQuery: { //分页 |  | ||||||
|         pageSize: 10, |  | ||||||
|         pageNo: 1, |  | ||||||
|         total: 1, |  | ||||||
|       }, |  | ||||||
| 			tableProps, |  | ||||||
| 			tableData: [], |  | ||||||
| 			formConfig: [ |  | ||||||
| 				{ |  | ||||||
| 					type: 'datePicker', |  | ||||||
| 					label: '时间范围', |  | ||||||
| 					dateType: 'daterange', |  | ||||||
| 					format: 'yyyy-MM-dd', |  | ||||||
| 					valueFormat: 'yyyy-MM-dd HH:mm:ss', |  | ||||||
| 					rangeSeparator: '-', |  | ||||||
| 					startPlaceholder: '开始时间', |  | ||||||
| 					endPlaceholder: '结束时间', |  | ||||||
| 					param: 'createTime', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'input', |  | ||||||
| 					label: '操作人', |  | ||||||
| 					placeholder: '操作人', |  | ||||||
| 					param: 'opPeopleName', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'select', |  | ||||||
| 					label: '操作类型', |  | ||||||
| 					selectOptions: [ |  | ||||||
| 						{ |  | ||||||
| 							id: 1, |  | ||||||
| 							name: '创建', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 2, |  | ||||||
| 							name: '删除', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 3, |  | ||||||
| 							name: '修改', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 4, |  | ||||||
| 							name: '解除继承', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 5, |  | ||||||
| 							name: '恢复继承', |  | ||||||
| 						}, |  | ||||||
| 					], |  | ||||||
| 					param: 'opType', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'select', |  | ||||||
| 					label: '更新排班计划', |  | ||||||
| 					selectOptions: [ |  | ||||||
| 						{ |  | ||||||
| 							id: 1, |  | ||||||
| 							name: '是', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 2, |  | ||||||
| 							name: '否', |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							id: 3, |  | ||||||
| 							name: '无排班计划', |  | ||||||
| 						}, |  | ||||||
| 					], |  | ||||||
| 					param: 'planType', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'button', |  | ||||||
| 					btnName: '搜索', |  | ||||||
| 					name: 'search', |  | ||||||
| 					color: 'primary', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'separate', |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					type: 'button', |  | ||||||
| 					btnName: '重置', |  | ||||||
| 					name: 'reset', |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	created() {}, |  | ||||||
| 	methods: { |  | ||||||
|     // 获取数据列表 |  | ||||||
|     getDataList() { |  | ||||||
|       deptHolidayLogList(this.listQuery).then(response => { |  | ||||||
|         this.tableData = response.data.list; |  | ||||||
|         this.listQuery.total = response.data.total; |  | ||||||
|       }); |  | ||||||
|     }, |  | ||||||
| 		buttonClick(val) { |  | ||||||
| 			switch (val.btnName) { |  | ||||||
| 				case 'search': |  | ||||||
| 					this.listQuery.pageNo = 1; |  | ||||||
| 					this.listQuery.pageSize = 10; |  | ||||||
| 					this.listQuery.createTime = val.createTime || []; |  | ||||||
| 					this.listQuery.planType = val.planType || undefined; |  | ||||||
| 					this.listQuery.opType = val.opType || undefined; |  | ||||||
| 					this.listQuery.opPeopleName = val.opPeopleName || undefined; |  | ||||||
| 					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> |  | ||||||
| @@ -1,473 +0,0 @@ | |||||||
| <!-- |  | ||||||
|  * @Author: zwq |  | ||||||
|  * @Date: 2024-07-01 14:54:06 |  | ||||||
|  * @LastEditors: zwq |  | ||||||
|  * @LastEditTime: 2025-10-19 00:35:24 |  | ||||||
|  * @Description: |  | ||||||
| --> |  | ||||||
| <template> |  | ||||||
| 	<el-row :gutter="10" style="background-color: #f2f4f9"> |  | ||||||
| 		<!--部门数据--> |  | ||||||
| 		<el-col :span="4"> |  | ||||||
| 			<div class="head-container"> |  | ||||||
| 				<el-input |  | ||||||
| 					v-model="deptName" |  | ||||||
| 					placeholder="请输入部门名称" |  | ||||||
| 					clearable |  | ||||||
| 					size="small" |  | ||||||
| 					prefix-icon="el-icon-search" |  | ||||||
| 					style="margin-bottom: 20px" /> |  | ||||||
| 				<el-tree |  | ||||||
| 					:data="deptOptions" |  | ||||||
| 					:props="defaultProps" |  | ||||||
| 					:expand-on-click-node="false" |  | ||||||
| 					:filter-node-method="filterNode" |  | ||||||
| 					ref="tree" |  | ||||||
| 					default-expand-all |  | ||||||
| 					highlight-current |  | ||||||
| 					@node-click="handleNodeClick" /> |  | ||||||
| 			</div> |  | ||||||
| 		</el-col> |  | ||||||
| 		<el-col :span="20"> |  | ||||||
| 			<div class="groupTeamScheduling"> |  | ||||||
| 				<div class="operationArea"> |  | ||||||
| 					<el-row> |  | ||||||
| 						<el-col :span="16"> |  | ||||||
| 							<div style="height: 40px; font-size: 16px"> |  | ||||||
| 								<span style="color: #409eff; font-weight: 600"> |  | ||||||
| 									{{ showDeptName }} |  | ||||||
| 								</span> |  | ||||||
| 								节假日设置 |  | ||||||
| 							</div> |  | ||||||
| 						</el-col> |  | ||||||
| 						<el-col :span="8"> |  | ||||||
| 							<div style="float: right"> |  | ||||||
| 								<el-button |  | ||||||
| 									size="small" |  | ||||||
| 									type="primary" |  | ||||||
| 									style="margin-right: 10px" |  | ||||||
| 									@click="addHoliday"> |  | ||||||
| 									新增节假日 |  | ||||||
| 								</el-button> |  | ||||||
| 								<el-button size="small" @click="holidayLog"> |  | ||||||
| 									节假日变更记录 |  | ||||||
| 								</el-button> |  | ||||||
| 							</div> |  | ||||||
| 						</el-col> |  | ||||||
| 					</el-row> |  | ||||||
| 				</div> |  | ||||||
| 				<div class="operationArea"> |  | ||||||
| 					<el-form :inline="true" class="demo-form-inline"> |  | ||||||
| 						<span class="blue-block"></span> |  | ||||||
| 						<el-form-item label="月份选择"> |  | ||||||
| 							<el-date-picker |  | ||||||
| 								v-model="startDay" |  | ||||||
| 								type="month" |  | ||||||
| 								placeholder="选择月" |  | ||||||
| 								size="small" |  | ||||||
| 								@change="selectMonth" |  | ||||||
| 								:clearable="false" |  | ||||||
| 								style="width: 120px"></el-date-picker> |  | ||||||
| 						</el-form-item> |  | ||||||
| 						<el-form-item style="float: right"> |  | ||||||
| 							<el-button |  | ||||||
| 								size="small" |  | ||||||
| 								type="primary" |  | ||||||
| 								@click="startDay = new Date()"> |  | ||||||
| 								跳转到今天 |  | ||||||
| 							</el-button> |  | ||||||
| 						</el-form-item> |  | ||||||
| 					</el-form> |  | ||||||
| 					<el-tag |  | ||||||
| 						type="warning" |  | ||||||
| 						closable |  | ||||||
| 						style="margin-bottom: 10px; color: black"> |  | ||||||
| 						<i class="el-icon-warning" style="color: #ffbd02"></i> |  | ||||||
| 						当前节假日设置为组织架构中最高层级配置,默认自动继承至下属部门。子部门可选择 |  | ||||||
| 						<span style="color: red">解除继承</span> |  | ||||||
| 						设置后进行独立修改,复制后不再继承上级设置 |  | ||||||
| 					</el-tag> |  | ||||||
| 				</div> |  | ||||||
| 				<!-- 日历区域 --> |  | ||||||
| 				<div class="calenderArea"> |  | ||||||
| 					<el-calendar v-model="startDay"> |  | ||||||
| 						<template slot="dateCell" slot-scope="{ data }"> |  | ||||||
| 							<div v-if="data.type === 'current-month'" @click="showDetail"> |  | ||||||
| 								<!-- 日期 --> |  | ||||||
| 								<div class="dateStyle"> |  | ||||||
| 									<el-row :gutter="20"> |  | ||||||
| 										<el-col :span="18"> |  | ||||||
| 											{{ Number(data.day.split('-')[2]) }} |  | ||||||
| 											<div class="lunar-date">{{ getLunarDate(data.day) }}</div> |  | ||||||
| 										</el-col> |  | ||||||
| 										<el-col :span="6"><div class="work-tip">班</div></el-col> |  | ||||||
| 									</el-row> |  | ||||||
| 								</div> |  | ||||||
| 							</div> |  | ||||||
| 							<div |  | ||||||
| 								v-else |  | ||||||
| 								style="font-size: 20px; font-weight: 500; text-align: left"> |  | ||||||
| 								<el-row :gutter="20"> |  | ||||||
| 									<el-col :span="24"> |  | ||||||
| 										{{ Number(data.day.split('-')[2]) }} |  | ||||||
| 										<span style="font-size: 12px"> |  | ||||||
| 											{{ getLunarDate(data.day) }} |  | ||||||
| 										</span> |  | ||||||
| 									</el-col> |  | ||||||
| 								</el-row> |  | ||||||
| 							</div> |  | ||||||
| 						</template> |  | ||||||
| 					</el-calendar> |  | ||||||
| 				</div> |  | ||||||
| 			</div> |  | ||||||
| 		</el-col> |  | ||||||
| 		<base-dialog |  | ||||||
| 			:dialogTitle="dialogTitle" |  | ||||||
| 			:dialogVisible="addOrUpdateVisible" |  | ||||||
| 			@cancel="cancel" |  | ||||||
| 			@confirm="handleConfirm" |  | ||||||
| 			:destroy-on-close="true" |  | ||||||
| 			width="40%"> |  | ||||||
| 			<add-or-updata |  | ||||||
| 				ref="addOrUpdataRef" |  | ||||||
| 				@refreshPage="getHolidayPage"></add-or-updata> |  | ||||||
| 			<template #footer> |  | ||||||
| 				<slot name="footer"> |  | ||||||
| 					<el-row slot="footer" type="flex" justify="end"> |  | ||||||
| 						<el-col :span="24"> |  | ||||||
| 							<el-button |  | ||||||
| 								v-if="!detail" |  | ||||||
| 								size="small" |  | ||||||
| 								class="btnTextStyle" |  | ||||||
| 								@click="cancel"> |  | ||||||
| 								取消 |  | ||||||
| 							</el-button> |  | ||||||
| 							<el-button |  | ||||||
| 								v-if="!detail" |  | ||||||
| 								type="primary" |  | ||||||
| 								class="btnTextStyle" |  | ||||||
| 								size="small" |  | ||||||
| 								@click="handleConfirm"> |  | ||||||
| 								确定 |  | ||||||
| 							</el-button> |  | ||||||
| 							<el-button |  | ||||||
| 								v-if="detail" |  | ||||||
| 								size="small" |  | ||||||
| 								type="primary" |  | ||||||
| 								class="btnTextStyle" |  | ||||||
| 								@click="editHoliday"> |  | ||||||
| 								修改 |  | ||||||
| 							</el-button> |  | ||||||
| 							<el-button |  | ||||||
| 								v-if="detail" |  | ||||||
| 								class="btnTextStyle" |  | ||||||
| 								size="small" |  | ||||||
| 								@click="deleteHoliday"> |  | ||||||
| 								删除 |  | ||||||
| 							</el-button> |  | ||||||
| 						</el-col> |  | ||||||
| 					</el-row> |  | ||||||
| 				</slot> |  | ||||||
| 			</template> |  | ||||||
| 		</base-dialog> |  | ||||||
| 		<base-dialog |  | ||||||
| 			dialogTitle="节假日变更记录" |  | ||||||
| 			:dialogVisible="logVisible" |  | ||||||
| 			@cancel="cancelLog" |  | ||||||
| 			:destroy-on-close="true" |  | ||||||
| 			width="70%"> |  | ||||||
| 			<holiday-log ref="holidayLogRef"></holiday-log> |  | ||||||
| 			<template #footer> |  | ||||||
| 				<slot name="footer"> |  | ||||||
| 					<el-row slot="footer" type="flex" justify="end"> |  | ||||||
| 						<el-col :span="24"> |  | ||||||
| 							<el-button size="small" class="btnTextStyle" @click="cancelLog"> |  | ||||||
| 								取消 |  | ||||||
| 							</el-button> |  | ||||||
| 						</el-col> |  | ||||||
| 					</el-row> |  | ||||||
| 				</slot> |  | ||||||
| 			</template> |  | ||||||
| 		</base-dialog> |  | ||||||
| 	</el-row> |  | ||||||
| </template> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| import moment from 'moment'; |  | ||||||
| import { solarToLunar } from 'chinese-lunar'; |  | ||||||
|  |  | ||||||
| import { listSimpleDepts } from '@/api/system/dept'; |  | ||||||
| import { getUserProfile } from '@/api/system/user'; |  | ||||||
| import { deptHolidayList } from '@/api/group/holidaySetting'; |  | ||||||
|  |  | ||||||
| import addOrUpdata from './add-or-updata.vue'; |  | ||||||
| import holidayLog from './holidayLog'; |  | ||||||
|  |  | ||||||
| export default { |  | ||||||
| 	name: '', |  | ||||||
| 	components: { |  | ||||||
| 		addOrUpdata, |  | ||||||
| 		holidayLog, |  | ||||||
| 	}, |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			startDay: '', // 查询参数 |  | ||||||
| 			// 部门树选项 |  | ||||||
| 			deptOptions: undefined, |  | ||||||
| 			// 查询的部门名称 |  | ||||||
| 			deptName: undefined, |  | ||||||
| 			// 选择的部门名称 |  | ||||||
| 			showDeptName: undefined, |  | ||||||
| 			deptId: undefined, |  | ||||||
| 			defaultProps: { |  | ||||||
| 				children: 'children', |  | ||||||
| 				label: 'name', |  | ||||||
| 			}, |  | ||||||
| 			dialogTitle: undefined, |  | ||||||
| 			addOrUpdateVisible: false, |  | ||||||
| 			detail: false, |  | ||||||
| 			logVisible: false, |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 	watch: { |  | ||||||
| 		// 根据名称筛选部门树 |  | ||||||
| 		deptName(val) { |  | ||||||
| 			this.$refs.tree.filter(val); |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| 	created() { |  | ||||||
| 		this.startDay = new Date(); |  | ||||||
| 		// 查询用户个人信息 |  | ||||||
| 		getUserProfile().then((response) => { |  | ||||||
| 			this.showDeptName = response.data.dept.name || ''; |  | ||||||
| 			this.deptId = response.data.dept.id || ''; |  | ||||||
| 			this.getHolidayPage(); |  | ||||||
| 		}); |  | ||||||
| 		this.getTreeselect(); |  | ||||||
| 	}, |  | ||||||
| 	methods: { |  | ||||||
| 		getHolidayPage() { |  | ||||||
| 			deptHolidayList({ deptId: this.deptId }).then((response) => {}); |  | ||||||
| 		}, |  | ||||||
| 		// 切换月份 |  | ||||||
| 		selectMonth() { |  | ||||||
| 			console.log(this.startDay); |  | ||||||
| 			this.getHolidayPage(); |  | ||||||
| 		}, |  | ||||||
| 		/** 查询部门下拉树结构 */ |  | ||||||
| 		getTreeselect() { |  | ||||||
| 			listSimpleDepts().then((response) => { |  | ||||||
| 				// 处理 deptOptions 参数 |  | ||||||
| 				this.deptOptions = []; |  | ||||||
| 				this.deptOptions.push(...this.handleTree(response.data, 'id')); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		// 筛选节点 |  | ||||||
| 		filterNode(value, data) { |  | ||||||
| 			if (!value) return true; |  | ||||||
| 			return data.name.indexOf(value) !== -1; |  | ||||||
| 		}, |  | ||||||
| 		// 节点单击事件 |  | ||||||
| 		handleNodeClick(data) { |  | ||||||
| 			this.deptId = data.id; |  | ||||||
| 			this.showDeptName = data.name; |  | ||||||
| 			this.getHolidayPage(); |  | ||||||
| 		}, |  | ||||||
| 		//获取农历 |  | ||||||
| 		getLunarDate(solarDate) { |  | ||||||
| 			try { |  | ||||||
| 				const [year, month, day] = solarDate.split('-').map(Number); |  | ||||||
|  |  | ||||||
| 				const date = new Date(year, month - 1, day); |  | ||||||
| 				const lunar = solarToLunar(date); |  | ||||||
|  |  | ||||||
| 				// 将数字月份和日期转换为中文 |  | ||||||
| 				const monthMap = { |  | ||||||
| 					1: '正', |  | ||||||
| 					2: '二', |  | ||||||
| 					3: '三', |  | ||||||
| 					4: '四', |  | ||||||
| 					5: '五', |  | ||||||
| 					6: '六', |  | ||||||
| 					7: '七', |  | ||||||
| 					8: '八', |  | ||||||
| 					9: '九', |  | ||||||
| 					10: '十', |  | ||||||
| 					11: '冬', |  | ||||||
| 					12: '腊', |  | ||||||
| 				}; |  | ||||||
|  |  | ||||||
| 				const dayMap = { |  | ||||||
| 					1: '初一', |  | ||||||
| 					2: '初二', |  | ||||||
| 					3: '初三', |  | ||||||
| 					4: '初四', |  | ||||||
| 					5: '初五', |  | ||||||
| 					6: '初六', |  | ||||||
| 					7: '初七', |  | ||||||
| 					8: '初八', |  | ||||||
| 					9: '初九', |  | ||||||
| 					10: '初十', |  | ||||||
| 					11: '十一', |  | ||||||
| 					12: '十二', |  | ||||||
| 					13: '十三', |  | ||||||
| 					14: '十四', |  | ||||||
| 					15: '十五', |  | ||||||
| 					16: '十六', |  | ||||||
| 					17: '十七', |  | ||||||
| 					18: '十八', |  | ||||||
| 					19: '十九', |  | ||||||
| 					20: '二十', |  | ||||||
| 					21: '廿一', |  | ||||||
| 					22: '廿二', |  | ||||||
| 					23: '廿三', |  | ||||||
| 					24: '廿四', |  | ||||||
| 					25: '廿五', |  | ||||||
| 					26: '廿六', |  | ||||||
| 					27: '廿七', |  | ||||||
| 					28: '廿八', |  | ||||||
| 					29: '廿九', |  | ||||||
| 					30: '三十', |  | ||||||
| 				}; |  | ||||||
|  |  | ||||||
| 				// 返回 "三月初四" 格式 |  | ||||||
| 				return `${monthMap[lunar.month]}月${dayMap[lunar.day]}`; |  | ||||||
| 			} catch (error) { |  | ||||||
| 				console.log(error); |  | ||||||
| 				return ''; |  | ||||||
| 			} |  | ||||||
| 		}, |  | ||||||
| 		addHoliday() { |  | ||||||
| 			this.addOrUpdateVisible = true; |  | ||||||
| 			this.detail = false; |  | ||||||
| 			this.dialogTitle = '新增节假日'; |  | ||||||
| 			this.$nextTick(() => { |  | ||||||
| 				this.$refs.addOrUpdataRef.init(); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		holidayLog() { |  | ||||||
| 			this.logVisible = true; |  | ||||||
| 			this.$nextTick(() => { |  | ||||||
| 				this.$refs.holidayLogRef.getDataList(); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		cancel() { |  | ||||||
| 			this.addOrUpdateVisible = false; |  | ||||||
| 		}, |  | ||||||
| 		handleConfirm() { |  | ||||||
| 			this.$refs.addOrUpdataRef.dataFormSubmit(); |  | ||||||
| 		}, |  | ||||||
| 		showDetail(id) { |  | ||||||
| 			this.addOrUpdateVisible = true; |  | ||||||
| 			this.detail = true; |  | ||||||
| 			this.dialogTitle = '节假日详情'; |  | ||||||
| 			this.$nextTick(() => { |  | ||||||
| 				this.$refs.addOrUpdataRef.init(id, true); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		editHoliday() { |  | ||||||
| 			this.detail = false; |  | ||||||
| 			this.$nextTick(() => { |  | ||||||
| 				this.$refs.addOrUpdataRef.editHoliday(); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		deleteHoliday() { |  | ||||||
| 			this.$nextTick(() => { |  | ||||||
| 				this.$refs.addOrUpdataRef.deleteHoliday(); |  | ||||||
| 			}); |  | ||||||
| 		}, |  | ||||||
| 		cancelLog() { |  | ||||||
| 			this.logVisible = false; |  | ||||||
| 		}, |  | ||||||
| 	}, |  | ||||||
| }; |  | ||||||
| </script> |  | ||||||
| <style lang="scss"> |  | ||||||
| .head-container { |  | ||||||
| 	padding: 20px 10px 0; |  | ||||||
| 	background-color: #fff; |  | ||||||
| 	min-height: calc(100vh - 120px - 8px); |  | ||||||
| 	border-radius: 8px; |  | ||||||
| } |  | ||||||
| .groupTeamScheduling { |  | ||||||
| 	.operationArea { |  | ||||||
| 		padding: 14px 10px 0 16px; |  | ||||||
| 		margin-bottom: 8px; |  | ||||||
| 		background-color: #fff; |  | ||||||
| 		border-radius: 8px; |  | ||||||
| 		.blue-block { |  | ||||||
| 			display: inline-block; |  | ||||||
| 			width: 4px; |  | ||||||
| 			height: 16px; |  | ||||||
| 			background-color: #0b58ff; |  | ||||||
| 			border-radius: 1px; |  | ||||||
| 			margin-right: 8px; |  | ||||||
| 			margin-top: 10px; |  | ||||||
| 		} |  | ||||||
| 		.el-form-item { |  | ||||||
| 			margin-bottom: 10px; |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	// 日历 |  | ||||||
| 	.calenderArea { |  | ||||||
| 		padding: 14px 10px 0 20px; |  | ||||||
| 		background-color: #fff; |  | ||||||
| 		border-radius: 8px; |  | ||||||
| 		min-height: calc(100vh - 120px - 8px - 168px); |  | ||||||
| 		.el-calendar__body { |  | ||||||
| 			padding: 10px 16px 16px 0; |  | ||||||
| 		} |  | ||||||
| 		.el-calendar__header { |  | ||||||
| 			display: none; |  | ||||||
| 		} |  | ||||||
| 		.el-calendar-table > thead { |  | ||||||
| 			height: 48px; |  | ||||||
| 			font-size: 20px; |  | ||||||
| 			font-weight: 500; |  | ||||||
| 			color: #000000; |  | ||||||
| 			background-color: rgba(242, 244, 249, 1); |  | ||||||
| 		} |  | ||||||
| 		.el-calendar-table__row { |  | ||||||
| 			height: 133px; |  | ||||||
| 			.prev, |  | ||||||
| 			.next { |  | ||||||
| 				pointer-events: none; |  | ||||||
| 			} |  | ||||||
| 			.is-selected, |  | ||||||
| 			.is-today { |  | ||||||
| 				background-color: #e4f0fd; |  | ||||||
| 			} |  | ||||||
| 			.el-calendar-day { |  | ||||||
| 				padding: 0; |  | ||||||
| 				height: 100%; |  | ||||||
| 				:hover { |  | ||||||
| 					background-color: #e4f0fd; |  | ||||||
| 				} |  | ||||||
| 				.dateStyle { |  | ||||||
| 					font-size: 20px; |  | ||||||
| 					font-weight: 500; |  | ||||||
| 					color: #000000; |  | ||||||
| 					text-align: left; |  | ||||||
| 					height: 133px; |  | ||||||
| 					line-height: 28px; |  | ||||||
| 					padding: 10px; |  | ||||||
|  |  | ||||||
| 					.lunar-date { |  | ||||||
| 						display: inline-block; |  | ||||||
| 						font-size: 12px; |  | ||||||
| 						color: #909399; |  | ||||||
| 					} |  | ||||||
| 					.work-tip { |  | ||||||
| 						background: #87c1ff; |  | ||||||
| 						color: white; |  | ||||||
| 						font-size: 18px; |  | ||||||
| 						width: 30px; |  | ||||||
| 						text-align: center; |  | ||||||
| 						float: right; |  | ||||||
| 					} |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| </style> |  | ||||||