Compare commits
	
		
			19 Commits
		
	
	
		
			projects/r
			...
			projects/q
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 1a1a3a9129 | |||
| e91fcab0c8 | |||
| 
						 | 
					1a0d786774 | ||
| 
						 | 
					1b6e6702ed | ||
| 
						 | 
					f23e025974 | ||
| 
						 | 
					d77bebd375 | ||
| 4225ff35ae | |||
| 33fce6cb7b | |||
| dd85c50077 | |||
| c30bc48259 | |||
| 92b0b78c9d | |||
| 9fec50eccb | |||
| 
						 | 
					a7406e7867 | ||
| 
						 | 
					f3d88638f5 | ||
| acff3b68be | |||
| f24b769305 | |||
| 446fa9a0d1 | |||
| 8d741b8d8a | |||
| 2c1e1845f4 | 
							
								
								
									
										3
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						@@ -12,8 +12,7 @@ ENV = 'development'
 | 
			
		||||
VUE_APP_TITLE = 智能监控分析系统
 | 
			
		||||
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
 | 
			
		||||
VUE_APP_BASE_API = 'http://172.16.32.79:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://172.16.32.79:48080'
 | 
			
		||||
 | 
			
		||||
# 路由懒加载
 | 
			
		||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
 | 
			
		||||
 
 | 
			
		||||
@@ -52,6 +52,7 @@
 | 
			
		||||
    "crypto-js": "^4.0.0",
 | 
			
		||||
    "diagram-js": "^12.3.0",
 | 
			
		||||
    "echarts": "5.4.0",
 | 
			
		||||
    "el-tree-transfer": "^2.4.7",
 | 
			
		||||
    "element-ui": "2.15.12",
 | 
			
		||||
    "file-saver": "^2.0.5",
 | 
			
		||||
    "fuse.js": "6.6.2",
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								public/static/videos/01.webm
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -61,9 +61,9 @@ export function exportFactoryExcel(query) {
 | 
			
		||||
// 获取产线设备状态
 | 
			
		||||
export function getLineEqStatus(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/production-line/getLineEqStatus',
 | 
			
		||||
		url: '/monitoring/equipment-monitor/getLineEqStatus',
 | 
			
		||||
		method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -44,25 +44,16 @@ export function getProductAuto(data) {
 | 
			
		||||
// 班组自动报表分页
 | 
			
		||||
export function getTeamReportPage(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
		url: '/monitoring/group-off-record/page',
 | 
			
		||||
    url: '/monitoring/team-auto-report/page',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 班组自动报表分页详细
 | 
			
		||||
export function getTeamReportPageDet(id) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/group-off-record/get?id=' + id,
 | 
			
		||||
    url: '/monitoring/team-auto-report/pageDet?id=' + id,
 | 
			
		||||
    method: 'get',
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function exportGroupProductReportExcel(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
		url: '/monitoring/group-off-record/export-det-excel',
 | 
			
		||||
		method: 'get',
 | 
			
		||||
		params: data,
 | 
			
		||||
		responseType: 'blob',
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,18 +0,0 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
// 获得工厂分页
 | 
			
		||||
export function getMaterialReceiptIssuePageData(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/material-warehouse-his/page',
 | 
			
		||||
		method: 'post',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
export function createMaterialIssue(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/material-warehouse-his/create',
 | 
			
		||||
		method: 'post',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
@@ -1,45 +0,0 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
export function getOrderPage(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/core-work-order/page',
 | 
			
		||||
		method: 'post',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function updateOrderData(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/core-work-order/updatee',
 | 
			
		||||
		method: 'put',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function createOrderData(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/core-work-order/create',
 | 
			
		||||
		method: 'post',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
export function getOrderData(id) {
 | 
			
		||||
  return request({
 | 
			
		||||
		url: '/base/core-work-order/get?id=' + id,
 | 
			
		||||
		method: 'get',
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
export function getOrderCode(data) {
 | 
			
		||||
	return request({
 | 
			
		||||
		url: '/base/core-work-order/getCode',
 | 
			
		||||
		method: 'get',
 | 
			
		||||
		data: data,
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function deleteOrder(id) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/core-work-order/delete?id=' + id,
 | 
			
		||||
    method: 'delete'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										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  | 
							
								
								
									
										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  | 
							
								
								
									
										
											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  | 
@@ -1,16 +1,30 @@
 | 
			
		||||
<!--
 | 
			
		||||
    filename: index.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-02 09:49:36
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <!-- 按钮切换 -->
 | 
			
		||||
  <div v-if="buttonMode" class="button-nav">
 | 
			
		||||
    <button v-for="m in menus" :key="m" @click="handleClick(m)"
 | 
			
		||||
    <button
 | 
			
		||||
      v-for="m in menus"
 | 
			
		||||
      :key="m"
 | 
			
		||||
      @click="currentMenu = m"
 | 
			
		||||
      :data-text="m"
 | 
			
		||||
      :class="[m === currentMenu ? 'active' : '']"
 | 
			
		||||
    ></button>
 | 
			
		||||
  </div>
 | 
			
		||||
  <!-- 标签切换 -->
 | 
			
		||||
  <div v-else class="custom-tabs" style="height: 100%; width: 100%">
 | 
			
		||||
    <el-tabs class="tag-nav" v-model="currentMenu" style="height: 100%" @tab-click="handleTabClick">
 | 
			
		||||
      <el-tab-pane v-for="(m, idx) in menus" :key="m" :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
 | 
			
		||||
        :name="m">
 | 
			
		||||
    <el-tabs class="tag-nav" v-model="currentMenu" 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>
 | 
			
		||||
@@ -25,17 +39,14 @@ export default {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => [],
 | 
			
		||||
      validator: (val) => val.length > 0,
 | 
			
		||||
      validator: (val) => {
 | 
			
		||||
        return val.length > 0;
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    buttonMode: {
 | 
			
		||||
      type: Boolean,
 | 
			
		||||
      default: true,
 | 
			
		||||
    },
 | 
			
		||||
    // 新增:支持外部传入选中值(v-model 绑定)
 | 
			
		||||
    value: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: "",
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
@@ -43,34 +54,16 @@ export default {
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    // 优先使用外部传入的 value,否则默认第一个
 | 
			
		||||
    this.currentMenu = this.value || this.menus[0];
 | 
			
		||||
    this.currentMenu = this.menus[0];
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    // 监听外部 value 变化,同步到内部 currentMenu
 | 
			
		||||
    value(newVal) {
 | 
			
		||||
      this.currentMenu = newVal;
 | 
			
		||||
    },
 | 
			
		||||
    // 监听内部 currentMenu 变化,通知外部
 | 
			
		||||
    currentMenu(val) {
 | 
			
		||||
      this.$emit("input", val); // 触发 v-model 同步
 | 
			
		||||
      this.$emit("change", val); // 保留原 change 事件
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 按钮点击事件
 | 
			
		||||
    handleClick(m) {
 | 
			
		||||
      this.currentMenu = m;
 | 
			
		||||
    },
 | 
			
		||||
    // 标签点击事件(el-tabs 自带)
 | 
			
		||||
    handleTabClick(tab) {
 | 
			
		||||
      this.currentMenu = tab.name;
 | 
			
		||||
      this.$emit("change", val);
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<!-- 样式不变 -->
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.button-nav {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
@@ -115,24 +108,22 @@ export default {
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.custom-tabs>>>.el-tabs__header {
 | 
			
		||||
.custom-tabs >>> .el-tabs__header {
 | 
			
		||||
  margin-bottom: 8px;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  /* transform: translateY(-12px); */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.custom-tabs>>>.el-tabs__item {
 | 
			
		||||
.custom-tabs >>> .el-tabs__item {
 | 
			
		||||
  padding-left: 0px !important;
 | 
			
		||||
  padding-right: 0px !important;
 | 
			
		||||
  line-height: 36px !important;
 | 
			
		||||
  height: 36px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.custom-tabs>>>.el-tabs__content {
 | 
			
		||||
.custom-tabs >>> .el-tabs__content {
 | 
			
		||||
  height: calc(100% - 42px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.custom-tabs>>>.el-tab-pane {
 | 
			
		||||
.custom-tabs >>> .el-tab-pane {
 | 
			
		||||
  box-sizing: border-box;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  padding: 20px;
 | 
			
		||||
 
 | 
			
		||||
@@ -21,6 +21,7 @@ import {
 | 
			
		||||
	handleTree,
 | 
			
		||||
	addBeginAndEndTime,
 | 
			
		||||
	divide,
 | 
			
		||||
	formatThousands
 | 
			
		||||
} from '@/utils/ruoyi';
 | 
			
		||||
import Pagination from '@/components/Pagination';
 | 
			
		||||
// 自定义表格工具扩展
 | 
			
		||||
@@ -45,6 +46,7 @@ Vue.prototype.resetForm = resetForm;
 | 
			
		||||
Vue.prototype.getDictDatas = getDictDatas;
 | 
			
		||||
Vue.prototype.getDictDatas2 = getDictDatas2;
 | 
			
		||||
Vue.prototype.getDictDataLabel = getDictDataLabel;
 | 
			
		||||
Vue.prototype.formatThousands = formatThousands;
 | 
			
		||||
Vue.prototype.DICT_TYPE = DICT_TYPE;
 | 
			
		||||
Vue.prototype.handleTree = handleTree;
 | 
			
		||||
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
 | 
			
		||||
 
 | 
			
		||||
@@ -295,3 +295,15 @@ export function getPath(path) {
 | 
			
		||||
  }
 | 
			
		||||
  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>
 | 
			
		||||
	<div ref="dataBoard" class="data-board">
 | 
			
		||||
		<el-button type="text" @click="goback" class="go-back--btn">返回</el-button>
 | 
			
		||||
	<div ref="dataBoardBoxB" class="dataBoardBoxB">
 | 
			
		||||
		<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>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<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 {
 | 
			
		||||
	name: 'DataBoard',
 | 
			
		||||
	components: {},
 | 
			
		||||
	components: {
 | 
			
		||||
		DataBoardHeader,
 | 
			
		||||
		LeftTop,
 | 
			
		||||
		LeftBottom,
 | 
			
		||||
		CenterTop,
 | 
			
		||||
		CenterBottomL,
 | 
			
		||||
		CenterBottomR,
 | 
			
		||||
		RightTop,
 | 
			
		||||
		RightBottom,
 | 
			
		||||
	},
 | 
			
		||||
	props: {},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			appMain: null, // dom
 | 
			
		||||
			parentStyle: {
 | 
			
		||||
				margin: '8px 14px 0px 16px',
 | 
			
		||||
				minHeight: 'calc(100vh - 120px - 8px)',
 | 
			
		||||
			}, // object
 | 
			
		||||
			mainFooter: null, // dom
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			dataObj: {},
 | 
			
		||||
			sseReader: null, // 保存流读取器
 | 
			
		||||
			abortController: null, // 用于中止 fetch 请求
 | 
			
		||||
			retryCount: 0, // 当前重试次数
 | 
			
		||||
			isDestroyed: false, // 标记组件是否已销毁
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	// mounted() {
 | 
			
		||||
	// 	this.$nextTick(() => {
 | 
			
		||||
	// 		this.modify();
 | 
			
		||||
	// 	});
 | 
			
		||||
	// },
 | 
			
		||||
	// activated() {
 | 
			
		||||
	// 	this.modify();
 | 
			
		||||
	// },
 | 
			
		||||
	// deactivated() {
 | 
			
		||||
	// 	this.recover();
 | 
			
		||||
	// },
 | 
			
		||||
	// beforeDestroy() {
 | 
			
		||||
	// 	this.recover();
 | 
			
		||||
	// },
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset = debounce(() => {
 | 
			
		||||
			this.resetSize();
 | 
			
		||||
		}, 300);
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', () => {
 | 
			
		||||
			this.boxReset();
 | 
			
		||||
		});
 | 
			
		||||
		this.getData();
 | 
			
		||||
	},
 | 
			
		||||
	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: {
 | 
			
		||||
		// modify() {
 | 
			
		||||
		// 	// 在这个页面临时修改下父类的margin,结束时需还原
 | 
			
		||||
		// 	this.appMain = document.querySelector('.app-main');
 | 
			
		||||
		// 	// this.appMain.style.minHeight = 'calc(100vh - 90px)';
 | 
			
		||||
		// 	this.appMain.style.margin = 0;
 | 
			
		||||
		// 	// 在这个页面临时删除 main-footer 元素,结束时需还原
 | 
			
		||||
		// 	// this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
 | 
			
		||||
		// 	// document.querySelector('.main-footer').remove();
 | 
			
		||||
        //     this.$refs.dataBoard.classList.add('data-board');
 | 
			
		||||
		// },
 | 
			
		||||
		// recover() {
 | 
			
		||||
        //     this.$refs.dataBoard.classList.remove('data-board');
 | 
			
		||||
		// 	this.$nextTick(() => {
 | 
			
		||||
		// 		this.appMain.style.margin = this.parentStyle.margin;
 | 
			
		||||
		// 		// this.appMain.style.minHeight = this.parentStyle.minHeight;
 | 
			
		||||
		// 		// this.appMain.insertAdjacentElement('afterend', this.mainFooter);
 | 
			
		||||
		// 	});
 | 
			
		||||
		// },
 | 
			
		||||
		goback() {
 | 
			
		||||
			this.$router.go(-1);
 | 
			
		||||
		async getData() {
 | 
			
		||||
			let _this = this;
 | 
			
		||||
			if (_this.isDestroyed) return;
 | 
			
		||||
			const url =
 | 
			
		||||
				process.env.VUE_APP_BASE_API +
 | 
			
		||||
				'/admin-api/monitoring/message/subscribe/' +
 | 
			
		||||
				store.getters.userId +
 | 
			
		||||
				'-' +
 | 
			
		||||
				Date.now();
 | 
			
		||||
			const token = getAccessToken();
 | 
			
		||||
			const headers = new Headers({
 | 
			
		||||
				Authorization: `Bearer ${token}`,
 | 
			
		||||
				'Content-Type': 'text/event-stream',
 | 
			
		||||
			});
 | 
			
		||||
			try {
 | 
			
		||||
				// 创建中止控制器
 | 
			
		||||
				this.abortController = new AbortController();
 | 
			
		||||
				// 发起 fetch 请求(替换为你的接口地址)
 | 
			
		||||
				const response = await fetch(url, {
 | 
			
		||||
					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>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.data-board {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	left: 0;
 | 
			
		||||
.dataBoardBoxB {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	height: 100%;
 | 
			
		||||
	background: url('../../../assets/images/DataBoard.png') 100% 100% / contain
 | 
			
		||||
		no-repeat;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.go-back--btn {
 | 
			
		||||
	position: fixed;
 | 
			
		||||
	top: 28px;
 | 
			
		||||
	left: 24px;
 | 
			
		||||
	color: #fff;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	letter-spacing: 6px;
 | 
			
		||||
 | 
			
		||||
	&:hover {
 | 
			
		||||
		text-decoration: underline;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	&::after {
 | 
			
		||||
		content: "\2BAA";
 | 
			
		||||
	height: calc(100vh - 150px);
 | 
			
		||||
	position: relative;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	.dataBoardBox {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 6px;
 | 
			
		||||
		right: -26px;
 | 
			
		||||
		font-size: 24px;
 | 
			
		||||
		transform-origin: 16px 8px;
 | 
			
		||||
		font-size: 16px;
 | 
			
		||||
		top: 0px;
 | 
			
		||||
		left: 0px;
 | 
			
		||||
		background: url('../../../assets/images/dataBoard/background.png') no-repeat;
 | 
			
		||||
		background-size: cover;
 | 
			
		||||
		background-position: 0 0;
 | 
			
		||||
		overflow: auto;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,43 +1,57 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div>
 | 
			
		||||
		<div style="background: #f2f4f9; height: 40px; width: 100%">
 | 
			
		||||
      <ButtonNav :menus="['当前', '历史']" @change="currentMenu" v-model="activeName">
 | 
			
		||||
        <!-- <template v-slot:tab1>
 | 
			
		||||
			<ButtonNav :menus="['当前', '历史']" @change="currentMenu">
 | 
			
		||||
				<template v-slot:tab1>
 | 
			
		||||
					<div>当前</div>
 | 
			
		||||
				</template>
 | 
			
		||||
				<template v-slot:tab2>
 | 
			
		||||
					<div>历史</div>
 | 
			
		||||
        </template> -->
 | 
			
		||||
				</template>
 | 
			
		||||
			</ButtonNav>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div class="app-container energyOverlimitLog">
 | 
			
		||||
      <div v-if="activeName === '历史' && routeType !== 'order'">
 | 
			
		||||
			<div v-show="activeName === 'his'">
 | 
			
		||||
				<!-- 搜索工作栏 -->
 | 
			
		||||
        <search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
 | 
			
		||||
				<search-bar
 | 
			
		||||
					:formConfigs="formConfig"
 | 
			
		||||
					ref="searchBarForm"
 | 
			
		||||
					@select-changed="handleSearchBarChanged"
 | 
			
		||||
					@headBtnClick="buttonClick" />
 | 
			
		||||
			</div>
 | 
			
		||||
      <h2 v-else>
 | 
			
		||||
        订单名称:{{ name }}
 | 
			
		||||
        订单编码:{{ code }}
 | 
			
		||||
        <el-button    v-hasPermi="['base:core-work-order:export']" type="primary" @click="handleExport">导出</el-button>
 | 
			
		||||
      </h2>
 | 
			
		||||
      <div v-show="activeName === '当前'"></div>
 | 
			
		||||
			<div v-show="activeName === 'now'"></div>
 | 
			
		||||
			<!-- 列表 -->
 | 
			
		||||
      <div v-if="activeName === '历史'">
 | 
			
		||||
        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData"
 | 
			
		||||
			<div v-if="activeName === 'his'">
 | 
			
		||||
				<base-table-s
 | 
			
		||||
					:page="1"
 | 
			
		||||
					:limit="100"
 | 
			
		||||
					:table-props="tableProps"
 | 
			
		||||
					:table-data="tableData"
 | 
			
		||||
					:max-height="tableH / 2"></base-table-s>
 | 
			
		||||
				<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
 | 
			
		||||
          <barChart style="margin-top: 50px" ref="barChart" height="600px" :bar-data="tableData" />
 | 
			
		||||
					<barChart
 | 
			
		||||
						style="margin-top: 50px"
 | 
			
		||||
						ref="barChart"
 | 
			
		||||
						height="600px"
 | 
			
		||||
						:bar-data="tableData" />
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
      <div v-if="activeName === '当前'">
 | 
			
		||||
			<div v-if="activeName === 'now'">
 | 
			
		||||
				<span class="blue-block"></span>
 | 
			
		||||
				<span class="tip">当班数据</span>
 | 
			
		||||
        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData2"
 | 
			
		||||
				<base-table-s
 | 
			
		||||
					:page="1"
 | 
			
		||||
					:limit="100"
 | 
			
		||||
					:table-props="tableProps"
 | 
			
		||||
					:table-data="tableData2"
 | 
			
		||||
					:max-height="tableH / 2" />
 | 
			
		||||
				<span class="blue-block"></span>
 | 
			
		||||
				<span class="tip">当天数据</span>
 | 
			
		||||
        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData3"
 | 
			
		||||
				<base-table-s
 | 
			
		||||
					:page="1"
 | 
			
		||||
					:limit="100"
 | 
			
		||||
					:table-props="tableProps"
 | 
			
		||||
					:table-data="tableData3"
 | 
			
		||||
					:max-height="tableH / 2" />
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
@@ -267,9 +281,6 @@ export default {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				getDataListURL: getPdlAutoReportNewSearch,
 | 
			
		||||
			},
 | 
			
		||||
      routeType: 'line',
 | 
			
		||||
      code: '',
 | 
			
		||||
      name:'',
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -284,7 +295,6 @@ export default {
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
					multiple: true,
 | 
			
		||||
          defaultSelect:[]
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
@@ -296,7 +306,6 @@ export default {
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					param: 'timeVal',
 | 
			
		||||
          defaultSelect:[],
 | 
			
		||||
					width: 350,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
@@ -309,8 +318,8 @@ export default {
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('|base:core-work-order:export') ? 'button' : '',
 | 
			
		||||
					// type: 'button',
 | 
			
		||||
					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
@@ -319,7 +328,7 @@ export default {
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				lineId: [],
 | 
			
		||||
			},
 | 
			
		||||
      activeName: '当前',
 | 
			
		||||
			activeName: 'now',
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
@@ -331,30 +340,8 @@ export default {
 | 
			
		||||
		baseTableS,
 | 
			
		||||
		barChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
    this.getPdLineList()
 | 
			
		||||
    this.$nextTick(() => {
 | 
			
		||||
      const tab = this.$route.query.tab; // 获取路由参数
 | 
			
		||||
      console.log(this.$route.query);
 | 
			
		||||
      this.routeType = this.$route.query.buttonType === 'order' ? 'order' : 'line'
 | 
			
		||||
      this.code = this.$route.query.code
 | 
			
		||||
      this.name = this.$route.query.name
 | 
			
		||||
 | 
			
		||||
      if (tab === 'his') {
 | 
			
		||||
        // 路由参数为 his 时,切换到“历史”标签
 | 
			
		||||
        this.activeName = '历史'; // 注意:这里直接传标签名('历史'),不是'his'
 | 
			
		||||
        this.formConfig[1].defaultSelect = this.$route.query.lineId
 | 
			
		||||
        this.formConfig[2].defaultSelect[0] = this.$route.query.startProduceTime
 | 
			
		||||
        this.formConfig[2].defaultSelect[1] = this.$route.query.finishProduceTime
 | 
			
		||||
        // this.buttonClick()
 | 
			
		||||
        this.listQuery.lineId = this.$route.query.lineId
 | 
			
		||||
      } else {
 | 
			
		||||
        this.activeName = '当前'; // 默认“当前”标签
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  // ... 其他方法 ...
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getPdLineList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		getPdLineList() {
 | 
			
		||||
@@ -376,7 +363,7 @@ export default {
 | 
			
		||||
					this.listQuery.lineId = val.lineId || [];
 | 
			
		||||
					this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
 | 
			
		||||
					this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
 | 
			
		||||
					if (this.activeName === '历史') {
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -390,17 +377,11 @@ export default {
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		currentMenu(val) {
 | 
			
		||||
      this.activeName = val; // 同步标签名到 activeName
 | 
			
		||||
      let actualName = val === '历史' ? 'his' : 'now'; // 转换为内部状态
 | 
			
		||||
 | 
			
		||||
    // 后续逻辑不变(根据 activeName 加载对应数据)
 | 
			
		||||
      if (actualName === 'his') {
 | 
			
		||||
				// this.$refs.searchBarForm.resetForm();
 | 
			
		||||
			this.activeName = val === '历史' ? 'his' : 'now';
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.$refs.searchBarForm.resetForm();
 | 
			
		||||
				this.listQuery.factoryId = undefined;
 | 
			
		||||
        if (!this.$route.query.lineId) {
 | 
			
		||||
				this.listQuery.lineId = [];
 | 
			
		||||
 | 
			
		||||
        }
 | 
			
		||||
				// 获取当前时间
 | 
			
		||||
				const now = new Date();
 | 
			
		||||
				// 获取前一天的同一时间
 | 
			
		||||
@@ -423,62 +404,11 @@ export default {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
				this.dataListLoading = true;
 | 
			
		||||
 | 
			
		||||
        // 判断是否为order类型且lineId有值
 | 
			
		||||
        if (this.routeType === 'order' && this.listQuery.lineId?.length) {
 | 
			
		||||
          // 存储所有接口请求的Promise
 | 
			
		||||
          const requests = this.listQuery.lineId.map(lineId => {
 | 
			
		||||
            // 复制原有查询参数,替换当前lineId
 | 
			
		||||
            const params = { ...this.listQuery, lineId: [lineId] };
 | 
			
		||||
            return this.urlOptions.getDataListURL(params);
 | 
			
		||||
          });
 | 
			
		||||
 | 
			
		||||
          // 并行执行所有请求
 | 
			
		||||
          Promise.all(requests)
 | 
			
		||||
            .then(responses => {
 | 
			
		||||
              // 合并所有接口返回的数据
 | 
			
		||||
              this.tableData = responses.flatMap(response => {
 | 
			
		||||
                return response.data.map(item => {
 | 
			
		||||
                  // 处理嵌套属性
 | 
			
		||||
                  item.originalLossNum = item.original?.lossNum;
 | 
			
		||||
                  item.originalLossArea = item.original?.lossArea;
 | 
			
		||||
                  item.edgeLossNum = item.edge?.lossNum;
 | 
			
		||||
                  item.edgeLossArea = item.edge?.lossArea;
 | 
			
		||||
                  item.drillLossNum = item.drill?.lossNum;
 | 
			
		||||
                  item.drillLossArea = item.drill?.lossArea;
 | 
			
		||||
                  item.coatingLossNum = item.coating?.lossNum;
 | 
			
		||||
                  item.coatingLossArea = item.coating?.lossArea;
 | 
			
		||||
                  item.silkLossNum = item.silk?.lossNum;
 | 
			
		||||
                  item.silkLossArea = item.silk?.lossArea;
 | 
			
		||||
                  item.temperingLossNum = item.tempering?.lossNum;
 | 
			
		||||
                  item.temperingLossArea = item.tempering?.lossArea;
 | 
			
		||||
                  item.packingLossNum = item.packing?.lossNum;
 | 
			
		||||
                  item.packingLossArea = item.packing?.lossArea;
 | 
			
		||||
                  return item;
 | 
			
		||||
                });
 | 
			
		||||
              });
 | 
			
		||||
 | 
			
		||||
              this.$nextTick(() => {
 | 
			
		||||
                if (this.tableData.length > 0) {
 | 
			
		||||
                  this.$refs.barChart.initChart();
 | 
			
		||||
                }
 | 
			
		||||
              });
 | 
			
		||||
            })
 | 
			
		||||
            .catch(error => {
 | 
			
		||||
              console.error('接口请求失败:', error);
 | 
			
		||||
              this.$message.error('数据加载失败,请重试');
 | 
			
		||||
            })
 | 
			
		||||
            .finally(() => {
 | 
			
		||||
              this.dataListLoading = false;
 | 
			
		||||
            });
 | 
			
		||||
        } else {
 | 
			
		||||
          // 非order类型或无lineId时,正常单次请求
 | 
			
		||||
          this.urlOptions.getDataListURL(this.listQuery)
 | 
			
		||||
            .then(response => {
 | 
			
		||||
				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
 | 
			
		||||
					this.tableData = response.data.map((item, index) => {
 | 
			
		||||
						item.originalLossNum = item.original?.lossNum;
 | 
			
		||||
						item.originalLossArea = item.original?.lossArea;
 | 
			
		||||
@@ -496,21 +426,13 @@ export default {
 | 
			
		||||
						item.packingLossArea = item.packing?.lossArea;
 | 
			
		||||
						return item;
 | 
			
		||||
					});
 | 
			
		||||
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
                if (this.tableData.length > 0) {
 | 
			
		||||
            if(this.tableData.length>0){
 | 
			
		||||
              this.$refs.barChart.initChart();
 | 
			
		||||
            }
 | 
			
		||||
					});
 | 
			
		||||
            })
 | 
			
		||||
            .catch(error => {
 | 
			
		||||
              console.error('接口请求失败:', error);
 | 
			
		||||
              this.$message.error('数据加载失败,请重试');
 | 
			
		||||
            })
 | 
			
		||||
            .finally(() => {
 | 
			
		||||
					this.dataListLoading = false;
 | 
			
		||||
				});
 | 
			
		||||
        }
 | 
			
		||||
			} else {
 | 
			
		||||
				this.$message.warning('请选择时间范围');
 | 
			
		||||
			}
 | 
			
		||||
 
 | 
			
		||||
@@ -48,7 +48,7 @@ const tableProps = [
 | 
			
		||||
		prop: 'reportDate',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		width: 130,
 | 
			
		||||
    fixed: true
 | 
			
		||||
    fixed: true,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'factoryName',
 | 
			
		||||
@@ -290,6 +290,10 @@ export default {
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '维度',
 | 
			
		||||
          selectOptions: [
 | 
			
		||||
            // {
 | 
			
		||||
            //   id: '0',
 | 
			
		||||
            //   name: '班',
 | 
			
		||||
            // },
 | 
			
		||||
						{
 | 
			
		||||
							id: 1,
 | 
			
		||||
							name: '日',
 | 
			
		||||
@@ -414,13 +418,17 @@ export default {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
        case 'search':
 | 
			
		||||
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.factoryId = val.factoryId || undefined;
 | 
			
		||||
          this.listQuery.lineId = val.lineId ? [val.lineId] : [];
 | 
			
		||||
					this.listQuery.reportType = val.reportType || undefined;
 | 
			
		||||
          console.log(val.reportType);
 | 
			
		||||
          this.listQuery.reportType = val.reportType ? Number(val.reportType) :undefined
 | 
			
		||||
					this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
 | 
			
		||||
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
 | 
			
		||||
          console.log(this.listQuery.reportType);
 | 
			
		||||
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
@@ -433,10 +441,41 @@ export default {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			this.dataListLoading = true;
 | 
			
		||||
			const arr = ['日', '周', '月', '年'];
 | 
			
		||||
      const arr = [
 | 
			
		||||
        {
 | 
			
		||||
          id: 0,
 | 
			
		||||
          name: '班',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          id: 1,
 | 
			
		||||
          name: '日',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          id: 2,
 | 
			
		||||
          name: '周',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          id: 3,
 | 
			
		||||
          name: '月',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          id: 4,
 | 
			
		||||
          name: '年',
 | 
			
		||||
        },
 | 
			
		||||
      ]
 | 
			
		||||
      const reportTypeNameMap = arr.reduce((map, item) => {
 | 
			
		||||
        map[item.id] = item.name;
 | 
			
		||||
        return map;
 | 
			
		||||
      }, {});
 | 
			
		||||
 | 
			
		||||
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
 | 
			
		||||
        this.tableData = response.data.list.map((item, index) => {
 | 
			
		||||
					item.reportType = arr[item.reportType - 1];
 | 
			
		||||
          const typeId = item.reportType;
 | 
			
		||||
          item.reportType = reportTypeNameMap[typeId] || '未知';
 | 
			
		||||
          // item.reportType = arr[item.reportType - 1];
 | 
			
		||||
 | 
			
		||||
          item.reportDate = item.reportDate;
 | 
			
		||||
 | 
			
		||||
					item.originalLossNum = item.original?.lossNum;
 | 
			
		||||
					item.originalLossArea = item.original?.lossArea;
 | 
			
		||||
					item.edgeLossNum = item.edge?.lossNum;
 | 
			
		||||
 
 | 
			
		||||
@@ -305,7 +305,7 @@ export default {
 | 
			
		||||
					this.startTime = new Date(payload.recordTime)
 | 
			
		||||
					this.queryParams.lineId = payload.lineId || null;
 | 
			
		||||
					this.queryParams.sectionId = payload.sectionId || null;
 | 
			
		||||
					this.queryParams.equipmentId = payload.equipmentId || null;
 | 
			
		||||
          this.queryParams.equipmentId = payload.equipmentId ? Number(payload.equipmentId) : undefined
 | 
			
		||||
					this.queryParams.recordTime = payload.recordTime
 | 
			
		||||
						? [
 | 
			
		||||
							payload.recordTime,
 | 
			
		||||
 
 | 
			
		||||
@@ -132,7 +132,7 @@ export default {
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			queryParams: {
 | 
			
		||||
				equipmentId: null,
 | 
			
		||||
				equipmentId: undefined,
 | 
			
		||||
				recordTime: null,
 | 
			
		||||
			},
 | 
			
		||||
			graphList: [],
 | 
			
		||||
@@ -153,7 +153,7 @@ export default {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			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.queryParams.recordTime = formattedDate
 | 
			
		||||
			? [
 | 
			
		||||
@@ -207,7 +207,7 @@ export default {
 | 
			
		||||
 | 
			
		||||
		/** 重置查询条件 */
 | 
			
		||||
		initQuery() {
 | 
			
		||||
			this.queryParams.equipmentId = null;
 | 
			
		||||
			this.queryParams.equipmentId = undefined;
 | 
			
		||||
			this.queryParams.recordTime = null;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
@@ -251,7 +251,7 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		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) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					if (!payload.recordTime || payload.recordTime.length <= 0) {
 | 
			
		||||
 
 | 
			
		||||
@@ -7,95 +7,71 @@
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div>
 | 
			
		||||
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
 | 
			
		||||
    <el-table id="detail" :data="tableData" :header-cell-style="{
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<el-table
 | 
			
		||||
			id="detail"
 | 
			
		||||
			:data="tableData"
 | 
			
		||||
			:header-cell-style="{
 | 
			
		||||
				background: '#F2F4F9',
 | 
			
		||||
				color: '#606266',
 | 
			
		||||
			}" border  v-loading="dataListLoading" style="width: 100%" ref="dataList">
 | 
			
		||||
			}"
 | 
			
		||||
			border
 | 
			
		||||
			:span-method="arraySpanMethod"
 | 
			
		||||
			v-loading="dataListLoading"
 | 
			
		||||
			style="width: 100%"
 | 
			
		||||
			ref="dataList">
 | 
			
		||||
			<el-table-column prop="lineName" label="产线" align="center" />
 | 
			
		||||
      <!-- <el-table-column prop="sizes" width="105" showOverflowtooltip align="center" label="规格" /> -->
 | 
			
		||||
      <!-- <el-table-column prop="process" label="产品工艺" align="center" /> -->
 | 
			
		||||
      <el-table-column prop="inputN" label="磨边" align="center">
 | 
			
		||||
        <el-table-column prop="edgeNum" label="投入数量/片" />
 | 
			
		||||
        <el-table-column prop="edgeTime" label="数据上报时间">
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="sizes"
 | 
			
		||||
				width="105"
 | 
			
		||||
				showOverflowtooltip
 | 
			
		||||
        align="center"
 | 
			
		||||
				label="规格" />
 | 
			
		||||
			<el-table-column prop="process" label="产品工艺" align="center" />
 | 
			
		||||
			<el-table-column prop="inputN" label="投入" align="center">
 | 
			
		||||
				<el-table-column prop="inputNum" label="投入数量/片" />
 | 
			
		||||
				<el-table-column prop="inputArea" label="投入面积/m²">
 | 
			
		||||
					<template v-slot="scope">
 | 
			
		||||
						<span>
 | 
			
		||||
							{{
 | 
			
		||||
              scope.row.reportType === 0
 | 
			
		||||
              ? parseTime(scope.row.edgeTime)
 | 
			
		||||
								scope.row.inputArea != null
 | 
			
		||||
									? scope.row.inputArea.toFixed(2)
 | 
			
		||||
									: '-'
 | 
			
		||||
							}}
 | 
			
		||||
						</span>
 | 
			
		||||
					</template>
 | 
			
		||||
				</el-table-column>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
      <el-table-column prop="outputN" label="打孔/丝印" align="center">
 | 
			
		||||
        <el-table-column prop="drillCoating" label="投入数量">
 | 
			
		||||
			<el-table-column prop="outputN" label="产出" align="center">
 | 
			
		||||
				<el-table-column prop="outputNum" label="产出数量/片" />
 | 
			
		||||
				<el-table-column prop="outputArea" label="产出面积/m²">
 | 
			
		||||
					<template v-slot="scope">
 | 
			
		||||
						<span>
 | 
			
		||||
							{{
 | 
			
		||||
              (scope.row.drillNum ?? '-')
 | 
			
		||||
              + '/'
 | 
			
		||||
              + (scope.row.coatingNum ?? '-')
 | 
			
		||||
              }}
 | 
			
		||||
            </span>
 | 
			
		||||
          </template>
 | 
			
		||||
        </el-table-column>
 | 
			
		||||
        <el-table-column prop="coatingTime" label="数据上报时间">
 | 
			
		||||
          <template v-slot="scope">
 | 
			
		||||
            <span>
 | 
			
		||||
              {{
 | 
			
		||||
  scope.row.reportType === 0
 | 
			
		||||
              ? parseTime(scope.row.coatingTime)
 | 
			
		||||
								scope.row.outputArea != null
 | 
			
		||||
									? scope.row.outputArea.toFixed(2)
 | 
			
		||||
									: '-'
 | 
			
		||||
							}}
 | 
			
		||||
						</span>
 | 
			
		||||
					</template>
 | 
			
		||||
				</el-table-column>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
      <el-table-column prop="lossN" label="镀膜" align="center">
 | 
			
		||||
        <el-table-column prop="silkNum" label="投入数量" />
 | 
			
		||||
        <el-table-column prop="silkTime" label="数据上报时间">
 | 
			
		||||
			<el-table-column prop="lossN" label="不良" align="center">
 | 
			
		||||
				<el-table-column prop="lossNum" label="不良数量/片" />
 | 
			
		||||
				<el-table-column prop="lossArea" label="不良面积/m²">
 | 
			
		||||
					<template v-slot="scope">
 | 
			
		||||
						<span>
 | 
			
		||||
							{{
 | 
			
		||||
  scope.row.reportType === 0
 | 
			
		||||
              ? parseTime(scope.row.silkTime)
 | 
			
		||||
              : '-'
 | 
			
		||||
								scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
 | 
			
		||||
							}}
 | 
			
		||||
						</span>
 | 
			
		||||
					</template>
 | 
			
		||||
				</el-table-column>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
      <el-table-column prop="lossN" label="钢化" align="center">
 | 
			
		||||
        <el-table-column prop="temperingNum" label="投入数量" />
 | 
			
		||||
        <el-table-column prop="temperingTime" label="数据上报时间">
 | 
			
		||||
          <template v-slot="scope">
 | 
			
		||||
            <span>
 | 
			
		||||
              {{
 | 
			
		||||
  scope.row.reportType === 0
 | 
			
		||||
              ? parseTime(scope.row.temperingTime)
 | 
			
		||||
              : '-'
 | 
			
		||||
              }}
 | 
			
		||||
            </span>
 | 
			
		||||
          </template>
 | 
			
		||||
        </el-table-column>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column prop="lossN" label="包装" align="center">
 | 
			
		||||
        <el-table-column prop="packingNum" label="投入数量" />
 | 
			
		||||
        <el-table-column prop="packingTime" label="数据上报时间">
 | 
			
		||||
          <template v-slot="scope">
 | 
			
		||||
            <span>
 | 
			
		||||
              {{
 | 
			
		||||
  scope.row.reportType === 0
 | 
			
		||||
              ? parseTime(scope.row.packingTime)
 | 
			
		||||
              : '-'
 | 
			
		||||
              }}
 | 
			
		||||
            </span>
 | 
			
		||||
          </template>
 | 
			
		||||
        </el-table-column>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <!-- <el-table-column prop="lossRatio" label="不良率/%">
 | 
			
		||||
			<el-table-column prop="lossRatio" label="不良率/%">
 | 
			
		||||
				<template v-slot="scope">
 | 
			
		||||
					<span>
 | 
			
		||||
						{{
 | 
			
		||||
@@ -210,12 +186,20 @@
 | 
			
		||||
							</span>
 | 
			
		||||
						</template>
 | 
			
		||||
					</el-table-column>
 | 
			
		||||
        </el-table-column> -->
 | 
			
		||||
      <el-table-column prop="down" label="下片" align="center">
 | 
			
		||||
        <el-table-column prop="downNum" label="成品数量" />
 | 
			
		||||
        <el-table-column prop="scrapNum" label="废片数量" />
 | 
			
		||||
        <el-table-column prop="inputOutputRate" label="投入产出率" />
 | 
			
		||||
        <el-table-column prop="yieldRate" label="加工成品率" />
 | 
			
		||||
				</el-table-column>
 | 
			
		||||
				<el-table-column prop="packing" label="包装" align="center">
 | 
			
		||||
					<el-table-column prop="packingLossNum" label="包装不良/片" />
 | 
			
		||||
					<el-table-column prop="packingLossArea" label="包装不良/m²">
 | 
			
		||||
						<template v-slot="scope">
 | 
			
		||||
							<span>
 | 
			
		||||
								{{
 | 
			
		||||
									scope.row.packingLossArea != null
 | 
			
		||||
										? scope.row.packingLossArea.toFixed(2)
 | 
			
		||||
										: '-'
 | 
			
		||||
								}}
 | 
			
		||||
							</span>
 | 
			
		||||
						</template>
 | 
			
		||||
					</el-table-column>
 | 
			
		||||
				</el-table-column>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
		</el-table>
 | 
			
		||||
@@ -223,7 +207,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { getTeamReportPageDet, exportGroupProductReportExcel } from '@/api/core/monitoring/auto';
 | 
			
		||||
import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
 | 
			
		||||
import * as XLSX from 'xlsx';
 | 
			
		||||
import FileSaver from 'file-saver';
 | 
			
		||||
 | 
			
		||||
@@ -232,7 +216,6 @@ export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			tableData: [],
 | 
			
		||||
      id:null,
 | 
			
		||||
			dataListLoading: false,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -251,7 +234,6 @@ export default {
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		init(id) {
 | 
			
		||||
      this.id = id
 | 
			
		||||
			this.dataListLoading = true;
 | 
			
		||||
			getTeamReportPageDet(id).then((response) => {
 | 
			
		||||
				this.tableData = response.data?.map((item, index) => {
 | 
			
		||||
@@ -277,17 +259,17 @@ export default {
 | 
			
		||||
				this.dataListLoading = false;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// arraySpanMethod({ row, column, rowIndex, columnIndex }) {
 | 
			
		||||
		// 	if (row.isSummaryReport) {
 | 
			
		||||
		// 		if (columnIndex === 0) {
 | 
			
		||||
		// 			return [1, 3];
 | 
			
		||||
		// 		} else if (columnIndex === 1) {
 | 
			
		||||
		// 			return [0, 0];
 | 
			
		||||
		// 		} else if (columnIndex === 2) {
 | 
			
		||||
		// 			return [0, 0];
 | 
			
		||||
		// 		}
 | 
			
		||||
		// 	}
 | 
			
		||||
		// },
 | 
			
		||||
		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
 | 
			
		||||
			if (row.isSummaryReport) {
 | 
			
		||||
				if (columnIndex === 0) {
 | 
			
		||||
					return [1, 3];
 | 
			
		||||
				} else if (columnIndex === 1) {
 | 
			
		||||
					return [0, 0];
 | 
			
		||||
				} else if (columnIndex === 2) {
 | 
			
		||||
					return [0, 0];
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
@@ -299,32 +281,26 @@ export default {
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		handleExport() {
 | 
			
		||||
      this.$modal.confirm('是否确认导出').then(() => {
 | 
			
		||||
          return exportGroupProductReportExcel({id:this.id});
 | 
			
		||||
        }).then(response => {
 | 
			
		||||
          console.log(response)
 | 
			
		||||
          this.$download.excel(response, '班组生产报表-详情.xls');
 | 
			
		||||
        }).catch(() => {})
 | 
			
		||||
			// let tables = document.querySelector('#detail').cloneNode(true);
 | 
			
		||||
			// let exportTable = XLSX.utils.table_to_book(tables);
 | 
			
		||||
			let tables = document.querySelector('#detail').cloneNode(true);
 | 
			
		||||
			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',
 | 
			
		||||
			// 		}),
 | 
			
		||||
			// 		'班组生产报表-详情.xlsx'
 | 
			
		||||
			// 	);
 | 
			
		||||
			// } catch (e) {
 | 
			
		||||
			// 	if (typeof console !== 'undefined') console.log(e, exportTableOut);
 | 
			
		||||
			// }
 | 
			
		||||
			// return exportTableOut;
 | 
			
		||||
			var exportTableOut = XLSX.write(exportTable, {
 | 
			
		||||
				bookType: 'xlsx',
 | 
			
		||||
				bookSST: true,
 | 
			
		||||
				type: 'array',
 | 
			
		||||
			});
 | 
			
		||||
			// sheetjs.xlsx为导出表格的标题名称
 | 
			
		||||
			try {
 | 
			
		||||
				FileSaver.saveAs(
 | 
			
		||||
					new Blob([exportTableOut], {
 | 
			
		||||
						type: 'application/octet-stream',
 | 
			
		||||
					}),
 | 
			
		||||
					'班组生产报表-详情.xlsx'
 | 
			
		||||
				);
 | 
			
		||||
			} catch (e) {
 | 
			
		||||
				if (typeof console !== 'undefined') console.log(e, exportTableOut);
 | 
			
		||||
			}
 | 
			
		||||
			return exportTableOut;
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -74,7 +74,7 @@ const tableProps = [
 | 
			
		||||
    fixed: true
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'reportDate',
 | 
			
		||||
		prop: 'reportName',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		width: 180,
 | 
			
		||||
    fixed: true
 | 
			
		||||
@@ -89,241 +89,211 @@ const tableProps = [
 | 
			
		||||
		label: '班组',
 | 
			
		||||
    fixed: true
 | 
			
		||||
	},
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'edgeNum',
 | 
			
		||||
    label: '磨边',
 | 
			
		||||
    fixed: true
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'drillOrCoating',
 | 
			
		||||
    label: '打孔/丝印',
 | 
			
		||||
    fixed: true
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'silkNum',
 | 
			
		||||
    label: '镀膜',
 | 
			
		||||
    fixed: true
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'temperingNum',
 | 
			
		||||
    label: '钢化',
 | 
			
		||||
    fixed: true
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'packingNum',
 | 
			
		||||
    label: '包装',
 | 
			
		||||
    fixed: true
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inputN',
 | 
			
		||||
		label: '下片',
 | 
			
		||||
		label: '投入',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
        prop: 'downNum',
 | 
			
		||||
				label: '成品数量',
 | 
			
		||||
				prop: 'inputNum',
 | 
			
		||||
				label: '投入数量/片',
 | 
			
		||||
        width:100
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
        prop: 'scrapNum',
 | 
			
		||||
				label: '废片数量',
 | 
			
		||||
				prop: 'inputArea',
 | 
			
		||||
				label: '投入面积/m²',
 | 
			
		||||
        width:100
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        prop: 'inputOutputRate',
 | 
			
		||||
        label: '投入产出率',
 | 
			
		||||
        width: 100
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        prop: 'yieldRate',
 | 
			
		||||
        label: '加工成品率',
 | 
			
		||||
        width: 100
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'outputN',
 | 
			
		||||
	// 	label: '产出',
 | 
			
		||||
	// 	align: 'center',
 | 
			
		||||
	// 	children: [
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'outputNum',
 | 
			
		||||
	// 			label: '产出数量/片',
 | 
			
		||||
  //       width:100
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'outputArea',
 | 
			
		||||
	// 			label: '产出面积/㎡',
 | 
			
		||||
	// 			filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //       width:100
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 	],
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'lossN',
 | 
			
		||||
	// 	label: '不良',
 | 
			
		||||
	// 	align: 'center',
 | 
			
		||||
	// 	children: [
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'lossNum',
 | 
			
		||||
	// 			label: '不良数量/片',
 | 
			
		||||
  //       width:100
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'lossArea',
 | 
			
		||||
	// 			label: '不良面积/㎡',
 | 
			
		||||
	// 			filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //       width:100
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 	],
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'lossRatio',
 | 
			
		||||
	// 	label: '不良率/%',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //   width:100
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'outputRatio',
 | 
			
		||||
	// 	label: '投入产出率/%',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //   width:110
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'processingRatio',
 | 
			
		||||
	// 	label: '加工成品率/%',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //   width:110
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'lossD',
 | 
			
		||||
	// 	label: '不良详情',
 | 
			
		||||
	// 	align: 'center',
 | 
			
		||||
	// 	children: [
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'original',
 | 
			
		||||
	// 			label: '原片',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'originalLossNum',
 | 
			
		||||
	// 					label: '原片不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'originalLossArea',
 | 
			
		||||
	// 					label: '原片不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'edge',
 | 
			
		||||
	// 			label: '磨边',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'edgeLossNum',
 | 
			
		||||
	// 					label: '磨边不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'edgeLossArea',
 | 
			
		||||
	// 					label: '磨边不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'drill',
 | 
			
		||||
	// 			label: '打孔',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'drillLossNum',
 | 
			
		||||
	// 					label: '打孔不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'drillLossArea',
 | 
			
		||||
	// 					label: '打孔不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'coating',
 | 
			
		||||
	// 			label: '镀膜',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'coatingLossNum',
 | 
			
		||||
	// 					label: '镀膜不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'coatingLossArea',
 | 
			
		||||
	// 					label: '镀膜不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'silk',
 | 
			
		||||
	// 			label: '丝印',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'silkLossNum',
 | 
			
		||||
	// 					label: '丝印不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'silkLossArea',
 | 
			
		||||
	// 					label: '丝印不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'tempering',
 | 
			
		||||
	// 			label: '钢化',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'temperingLossNum',
 | 
			
		||||
	// 					label: '钢化不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'temperingLossArea',
 | 
			
		||||
	// 					label: '钢化不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 		{
 | 
			
		||||
	// 			prop: 'packing',
 | 
			
		||||
	// 			label: '包装',
 | 
			
		||||
  //       align: 'center',
 | 
			
		||||
	// 			children: [
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'packingLossNum',
 | 
			
		||||
	// 					label: '包装不良/片',
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 				{
 | 
			
		||||
	// 					prop: 'packingLossArea',
 | 
			
		||||
	// 					label: '包装不良/㎡',
 | 
			
		||||
	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
  //           width:100
 | 
			
		||||
	// 				},
 | 
			
		||||
	// 			],
 | 
			
		||||
	// 		},
 | 
			
		||||
	// 	],
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outputN',
 | 
			
		||||
		label: '产出',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'outputNum',
 | 
			
		||||
				label: '产出数量/片',
 | 
			
		||||
        width:100
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'outputArea',
 | 
			
		||||
				label: '产出面积/㎡',
 | 
			
		||||
				filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
        width:100
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lossN',
 | 
			
		||||
		label: '不良',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'lossNum',
 | 
			
		||||
				label: '不良数量/片',
 | 
			
		||||
        width:100
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'lossArea',
 | 
			
		||||
				label: '不良面积/㎡',
 | 
			
		||||
				filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
        width:100
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lossRatio',
 | 
			
		||||
		label: '不良率/%',
 | 
			
		||||
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
    width:100
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outputRatio',
 | 
			
		||||
		label: '投入产出率/%',
 | 
			
		||||
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
    width:110
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'processingRatio',
 | 
			
		||||
		label: '加工成品率/%',
 | 
			
		||||
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
    width:110
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lossD',
 | 
			
		||||
		label: '不良详情',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'original',
 | 
			
		||||
				label: '原片',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'originalLossNum',
 | 
			
		||||
						label: '原片不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'originalLossArea',
 | 
			
		||||
						label: '原片不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'edge',
 | 
			
		||||
				label: '磨边',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'edgeLossNum',
 | 
			
		||||
						label: '磨边不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'edgeLossArea',
 | 
			
		||||
						label: '磨边不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'drill',
 | 
			
		||||
				label: '打孔',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'drillLossNum',
 | 
			
		||||
						label: '打孔不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'drillLossArea',
 | 
			
		||||
						label: '打孔不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'coating',
 | 
			
		||||
				label: '镀膜',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'coatingLossNum',
 | 
			
		||||
						label: '镀膜不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'coatingLossArea',
 | 
			
		||||
						label: '镀膜不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'silk',
 | 
			
		||||
				label: '丝印',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'silkLossNum',
 | 
			
		||||
						label: '丝印不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'silkLossArea',
 | 
			
		||||
						label: '丝印不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'tempering',
 | 
			
		||||
				label: '钢化',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'temperingLossNum',
 | 
			
		||||
						label: '钢化不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'temperingLossArea',
 | 
			
		||||
						label: '钢化不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'packing',
 | 
			
		||||
				label: '包装',
 | 
			
		||||
        align: 'center',
 | 
			
		||||
				children: [
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'packingLossNum',
 | 
			
		||||
						label: '包装不良/片',
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						prop: 'packingLossArea',
 | 
			
		||||
						label: '包装不良/㎡',
 | 
			
		||||
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
 | 
			
		||||
            width:100
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
@@ -340,21 +310,16 @@ export default {
 | 
			
		||||
        reportType: 1,
 | 
			
		||||
				pageSize: 10,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
        startTime: undefined,
 | 
			
		||||
        endTime: undefined,
 | 
			
		||||
				total: 1,
 | 
			
		||||
			},
 | 
			
		||||
			fileName: '',
 | 
			
		||||
			dataListLoading: false,
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
        this.$auth.hasPermi(`monitoring:group-off:update`)
 | 
			
		||||
          ? {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'eq',
 | 
			
		||||
					btnName: '详情',
 | 
			
		||||
          }
 | 
			
		||||
          : undefined,
 | 
			
		||||
 | 
			
		||||
				},
 | 
			
		||||
			].filter((v) => v),
 | 
			
		||||
			showData: [],
 | 
			
		||||
			tableData: [],
 | 
			
		||||
@@ -375,18 +340,14 @@ export default {
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '报表类型',
 | 
			
		||||
					selectOptions: [
 | 
			
		||||
            {
 | 
			
		||||
              id: 0,
 | 
			
		||||
              name: '班',
 | 
			
		||||
            },
 | 
			
		||||
						{
 | 
			
		||||
							id: 1,
 | 
			
		||||
							name: '日',
 | 
			
		||||
						},
 | 
			
		||||
						// {
 | 
			
		||||
						// 	id: 2,
 | 
			
		||||
						// 	name: '周',
 | 
			
		||||
						// },
 | 
			
		||||
						{
 | 
			
		||||
							id: 2,
 | 
			
		||||
							name: '周',
 | 
			
		||||
						},
 | 
			
		||||
						{
 | 
			
		||||
							id: 3,
 | 
			
		||||
							name: '月',
 | 
			
		||||
@@ -411,8 +372,7 @@ export default {
 | 
			
		||||
					param: 'timeVal',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:group-off:query') ? 'button' : '',
 | 
			
		||||
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
@@ -421,8 +381,8 @@ export default {
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:group-off:export') ? 'button' : '',
 | 
			
		||||
					// type: 'button',
 | 
			
		||||
					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
@@ -442,9 +402,7 @@ export default {
 | 
			
		||||
		// 设置为23:59:59
 | 
			
		||||
		const end = new Date(yesterday.getTime());
 | 
			
		||||
		end.setHours(23, 59, 59, 59);
 | 
			
		||||
    this.listQuery.startTime = yesterday.getTime(), [end.getTime()];
 | 
			
		||||
    this.listQuery.endTime = end.getTime()
 | 
			
		||||
 | 
			
		||||
		this.listQuery.reportStartTime = [yesterday.getTime(),end.getTime()];
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.$refs.searchBarForm.formInline.timeVal = [yesterday.getTime(),end.getTime()];
 | 
			
		||||
		});
 | 
			
		||||
@@ -503,11 +461,8 @@ export default {
 | 
			
		||||
					this.listQuery.factoryId = val.factoryId || undefined;
 | 
			
		||||
					this.listQuery.teamId = val.teamId || undefined;
 | 
			
		||||
					this.listQuery.reportType = val.reportType || undefined;
 | 
			
		||||
          this.listQuery.startTime = val.timeVal
 | 
			
		||||
						? val.timeVal[0]
 | 
			
		||||
            : undefined;
 | 
			
		||||
          this.listQuery.endTime = val.timeVal
 | 
			
		||||
            ? val.timeVal[1]
 | 
			
		||||
					this.listQuery.reportStartTime = val.timeVal
 | 
			
		||||
						? val.timeVal
 | 
			
		||||
						: undefined;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
@@ -521,9 +476,7 @@ export default {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			this.dataListLoading = true;
 | 
			
		||||
      console.log(this.listQuery);
 | 
			
		||||
 | 
			
		||||
      const arr = ['班', '日', '', '月', '年']; // 索引0对应班,1对应日,3对应月,4对应年,索引2留空
 | 
			
		||||
			const arr = ['日', '周', '月', '年'];
 | 
			
		||||
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (!response.data.list) {
 | 
			
		||||
					this.showData = [];
 | 
			
		||||
@@ -531,8 +484,7 @@ export default {
 | 
			
		||||
					return;
 | 
			
		||||
				}
 | 
			
		||||
				this.tableData = response.data?.list.map((item, index) => {
 | 
			
		||||
          item.reportType = arr[item.reportType] || item.reportType;
 | 
			
		||||
          item.drillOrCoating = item.drillNum + "/" + item.coatingNum
 | 
			
		||||
					item.reportType = arr[item.reportType - 1];
 | 
			
		||||
					item.originalLossNum = item.original?.lossNum;
 | 
			
		||||
					item.originalLossArea = item.original?.lossArea;
 | 
			
		||||
					item.edgeLossNum = item.edge?.lossNum;
 | 
			
		||||
@@ -556,7 +508,7 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
		handleClick(val) {
 | 
			
		||||
			this.addOrUpdateVisible = true;
 | 
			
		||||
      const time = val.data.timeVal ? parseTime(val.data.timeVal[0]) + '-' + parseTime(val.data.timeVal[1]) : '- '
 | 
			
		||||
      const time = val.data.reportName?val.data.reportName:'- '
 | 
			
		||||
      const teamName = val.data.teamName?val.data.teamName:'- '
 | 
			
		||||
      const teamLeader = val.data.teamLeader?val.data.teamLeader:'- '
 | 
			
		||||
			this.addOrEditTitle =
 | 
			
		||||
 
 | 
			
		||||
@@ -1,123 +0,0 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-11-18 14:16:25
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-10-16 11:16:48
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="物料名称" prop="materialName">
 | 
			
		||||
          <el-input v-model="dataForm.materialName" clearable placeholder="请输入物料名称" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="物料规格" prop="materialSize">
 | 
			
		||||
          <el-input v-model="dataForm.materialSize" clearable placeholder="请输入物料规格" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="物料批次" prop="materialDate">
 | 
			
		||||
          <el-input v-model="dataForm.materialDate" clearable placeholder="请输入物料批次" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <!-- <el-form-item label="启用状态" prop="enabled">
 | 
			
		||||
			<el-select
 | 
			
		||||
				v-model="dataForm.enabled"
 | 
			
		||||
				placeholder="请选择启用状态">
 | 
			
		||||
				<el-option
 | 
			
		||||
					v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
 | 
			
		||||
					:key="dict.value"
 | 
			
		||||
					:label="dict.label"
 | 
			
		||||
					:value="dict.value" />
 | 
			
		||||
			</el-select>
 | 
			
		||||
		</el-form-item> -->
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="入库数量" prop="materialNum">
 | 
			
		||||
          <el-input v-model="dataForm.materialNum" clearable placeholder="请输入入库数量" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import basicAdd from './../mixins/basic-add';
 | 
			
		||||
import {
 | 
			
		||||
  createMaterialIssue,
 | 
			
		||||
} from '@/api/material/issue';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicAdd],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
			  isGetCode: false,
 | 
			
		||||
        // codeURL: getCode,
 | 
			
		||||
        createURL: createMaterialIssue,
 | 
			
		||||
				// updateURL: updateFactory,
 | 
			
		||||
				// infoURL: getFactory,
 | 
			
		||||
			},
 | 
			
		||||
			dataForm: {
 | 
			
		||||
        id: undefined,
 | 
			
		||||
        materialName: undefined,
 | 
			
		||||
        materialNum: undefined,
 | 
			
		||||
        materialDate: undefined,
 | 
			
		||||
        materialSize: undefined,
 | 
			
		||||
        operateStatus:undefined
 | 
			
		||||
			},
 | 
			
		||||
			dataRule: {
 | 
			
		||||
        materialName: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
 | 
			
		||||
        materialNum: [{  required: true, message: "数量不能为空", trigger: "blur" }],
 | 
			
		||||
      }
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
  methods: {
 | 
			
		||||
    init(operateStatus) {
 | 
			
		||||
      this.dataForm.operateStatus = operateStatus;
 | 
			
		||||
      this.visible = true;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs["dataForm"].resetFields();
 | 
			
		||||
        // if (this.dataForm.id) {
 | 
			
		||||
        //   this.urlOptions.infoURL(id).then(response => {
 | 
			
		||||
        //     this.dataForm = response.data;
 | 
			
		||||
        //     if (this.setData) {
 | 
			
		||||
        //       this.setDataForm()
 | 
			
		||||
        //     }
 | 
			
		||||
        //   });
 | 
			
		||||
        // } else {
 | 
			
		||||
        //   if (this.urlOptions.isGetCode) {
 | 
			
		||||
        //     this.getCode()
 | 
			
		||||
        //   }
 | 
			
		||||
        // }
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    dataFormSubmit() {
 | 
			
		||||
      this.$refs["dataForm"].validate((valid) => {
 | 
			
		||||
        if (!valid) {
 | 
			
		||||
          return false;
 | 
			
		||||
        }
 | 
			
		||||
        // 修改的提交
 | 
			
		||||
        // 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,243 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			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>
 | 
			
		||||
		<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"
 | 
			
		||||
			width="30%">
 | 
			
		||||
			<add-or-update
 | 
			
		||||
				ref="addOrUpdate"
 | 
			
		||||
				@refreshDataList="successSubmit"></add-or-update>
 | 
			
		||||
		</base-dialog>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import AddOrUpdate from './add-or-updata';
 | 
			
		||||
import basicPage from './../mixins/basic-page';
 | 
			
		||||
import { parseTime } from './../mixins/code-filter';
 | 
			
		||||
import {
 | 
			
		||||
  getMaterialReceiptIssuePageData,
 | 
			
		||||
} from '@/api/material/issue';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'materialName',
 | 
			
		||||
		label: '物料名称'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'materialSize',
 | 
			
		||||
		label: '物料规格'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'materialDate',
 | 
			
		||||
    label: '物料批次'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'operateStatus',
 | 
			
		||||
    label: '操作状态',
 | 
			
		||||
    filter: (val) => ['', '入库', '出库'][val]
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'materialNum',
 | 
			
		||||
    label: '出入库数量',
 | 
			
		||||
    // filter: (val) => ['', '入库', '出库', '移库'][val]
 | 
			
		||||
  },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'createTime',
 | 
			
		||||
		label: '操作时间',
 | 
			
		||||
		filter: parseTime
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'creator',
 | 
			
		||||
    label: '操作人',
 | 
			
		||||
    // filter: parseTime
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
        getDataListURL: getMaterialReceiptIssuePageData,
 | 
			
		||||
				// deleteURL: deleteFactory,
 | 
			
		||||
				// exportURL: exportFactoryExcel,
 | 
			
		||||
      },
 | 
			
		||||
      operateStatus:undefined,
 | 
			
		||||
			tableProps,
 | 
			
		||||
			// tableBtn: [
 | 
			
		||||
			// 	this.$auth.hasPermi(`base:factory:update`)
 | 
			
		||||
			// 		? {
 | 
			
		||||
			// 				type: 'edit',
 | 
			
		||||
			// 				btnName: '编辑',
 | 
			
		||||
			// 		  }
 | 
			
		||||
			// 		: undefined,
 | 
			
		||||
      //     this.$auth.hasPermi(`base:factory:delete`)
 | 
			
		||||
			// 		? {
 | 
			
		||||
			// 				type: 'delete',
 | 
			
		||||
			// 				btnName: '删除',
 | 
			
		||||
			// 		  }
 | 
			
		||||
			// 		: undefined,
 | 
			
		||||
			// ].filter((v)=>v),
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
          type: 'input',
 | 
			
		||||
          label: '物料名称',
 | 
			
		||||
					placeholder: '物料名称',
 | 
			
		||||
          param: 'materialName',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'input',
 | 
			
		||||
          label: '操作人',
 | 
			
		||||
					placeholder: '操作人',
 | 
			
		||||
          param: 'operateName',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'select',
 | 
			
		||||
          label: '操作状态',
 | 
			
		||||
          placeholder: '操作状态',
 | 
			
		||||
          selectOptions: [{
 | 
			
		||||
            id: 1,
 | 
			
		||||
            name:'入库'
 | 
			
		||||
          },
 | 
			
		||||
            {
 | 
			
		||||
              id: 2,
 | 
			
		||||
              name: '出库'
 | 
			
		||||
            }],
 | 
			
		||||
          param: 'operateStatus',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'datePicker',
 | 
			
		||||
          label: '操作时间',
 | 
			
		||||
          dateType: 'daterange',
 | 
			
		||||
          format: 'yyyy-MM-dd',
 | 
			
		||||
          valueFormat: 'timestamp',
 | 
			
		||||
          rangeSeparator: '-',
 | 
			
		||||
          startPlaceholder: '开始时间',
 | 
			
		||||
          endPlaceholder: '结束时间',
 | 
			
		||||
          param: 'timeVal',
 | 
			
		||||
        },
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('base:material-warehouse-his:query') ? 'button' : '',
 | 
			
		||||
					btnName: '搜索',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'separate',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'button',
 | 
			
		||||
				// 	btnName: '重置',
 | 
			
		||||
				// 	name: 'reset',
 | 
			
		||||
				// },
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('base:material-warehouse-his:create') ? 'button' : '',
 | 
			
		||||
					btnName: '入库',
 | 
			
		||||
          name: 'receipt',
 | 
			
		||||
					color: 'success',
 | 
			
		||||
					plain: true,
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('base:material-warehouse-his:create') ? 'button' : '',
 | 
			
		||||
          btnName: '出库',
 | 
			
		||||
          name: 'issue',
 | 
			
		||||
          color: 'success',
 | 
			
		||||
          plain: true,
 | 
			
		||||
        },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
 | 
			
		||||
				// 	btnName: '导出',
 | 
			
		||||
				// 	name: 'export',
 | 
			
		||||
				// 	color: 'warning',
 | 
			
		||||
				// },
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		AddOrUpdate,
 | 
			
		||||
	},
 | 
			
		||||
	created() {},
 | 
			
		||||
  methods: {
 | 
			
		||||
    addOrUpdateHandle() {
 | 
			
		||||
      this.addOrUpdateVisible = true;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.addOrUpdate.init(this.operateStatus);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
          this.listQuery.pageSize = 10;
 | 
			
		||||
          this.listQuery.operateName = val.operateName ? val.operateName :undefined;
 | 
			
		||||
          this.listQuery.operateTimeStart = val.timeVal? val.timeVal[0] :undefined;
 | 
			
		||||
          this.listQuery.operateTimeEnd = val.timeVal ? val.timeVal[1] : undefined;
 | 
			
		||||
          this.listQuery.materialName = val.materialName ? val.materialName : undefined;
 | 
			
		||||
          this.listQuery.operateStatus = val.operateStatus ? val.operateStatus : undefined;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'reset':
 | 
			
		||||
					this.$refs.searchBarForm.resetForm();
 | 
			
		||||
					this.listQuery = {
 | 
			
		||||
						pageSize: 10,
 | 
			
		||||
						pageNo: 1,
 | 
			
		||||
						total: 1,
 | 
			
		||||
					};
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
        case 'receipt':
 | 
			
		||||
					this.addOrEditTitle = '入库';
 | 
			
		||||
          this.addOrUpdateVisible = true;
 | 
			
		||||
          this.operateStatus = 1
 | 
			
		||||
          this.addOrUpdateHandle();
 | 
			
		||||
          break;
 | 
			
		||||
        case 'issue':
 | 
			
		||||
          this.addOrEditTitle = '出库';
 | 
			
		||||
          this.addOrUpdateVisible = true;
 | 
			
		||||
          this.operateStatus = 2
 | 
			
		||||
          this.addOrUpdateHandle();
 | 
			
		||||
          break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
@@ -1,100 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2022-08-24 11:19:43
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-08-03 14:21:04
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    /* eslint-disable */
 | 
			
		||||
    return {
 | 
			
		||||
      urlOptions: {
 | 
			
		||||
        createURL: '',
 | 
			
		||||
        updateURL: '',
 | 
			
		||||
        infoURL: '',
 | 
			
		||||
        codeURL: '',
 | 
			
		||||
        getOption: false,
 | 
			
		||||
        isGetCode: false,
 | 
			
		||||
        optionArrUrl: [],
 | 
			
		||||
        optionArr: {}
 | 
			
		||||
      },
 | 
			
		||||
      visible: false,
 | 
			
		||||
      setData: false
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
  },
 | 
			
		||||
  activated() {
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    init(id) {
 | 
			
		||||
      this.dataForm.id = id || "";
 | 
			
		||||
      this.visible = true;
 | 
			
		||||
      if (this.urlOptions.getOption) {
 | 
			
		||||
        this.getArr()
 | 
			
		||||
      }
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs["dataForm"].resetFields();
 | 
			
		||||
        if (this.dataForm.id) {
 | 
			
		||||
          this.urlOptions.infoURL(id).then(response => {
 | 
			
		||||
            this.dataForm = response.data;
 | 
			
		||||
            if (this.setData) {
 | 
			
		||||
              this.setDataForm()
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
        } else {
 | 
			
		||||
          if (this.urlOptions.isGetCode) {
 | 
			
		||||
            this.getCode()
 | 
			
		||||
          }
 | 
			
		||||
				}
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
		getCode() {
 | 
			
		||||
			this.urlOptions.codeURL()
 | 
			
		||||
				.then(({ data: res }) => {
 | 
			
		||||
					this.dataForm.code = res;
 | 
			
		||||
				})
 | 
			
		||||
				.catch(() => {});
 | 
			
		||||
		},
 | 
			
		||||
    getArr() {
 | 
			
		||||
      const params = {
 | 
			
		||||
        pageSize: 100,
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
      }
 | 
			
		||||
      this.urlOptions.optionArrUrl.forEach((item, index) => {
 | 
			
		||||
        item(params).then(({ data: res }) => {
 | 
			
		||||
          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
 | 
			
		||||
        })
 | 
			
		||||
          .catch(() => {
 | 
			
		||||
          });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    // 表单提交
 | 
			
		||||
    dataFormSubmit() {
 | 
			
		||||
      this.$refs["dataForm"].validate((valid) => {
 | 
			
		||||
        if (!valid) {
 | 
			
		||||
          return false;
 | 
			
		||||
        }
 | 
			
		||||
        // 修改的提交
 | 
			
		||||
        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");
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    formClear() {
 | 
			
		||||
      this.$refs.dataForm.resetFields()
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,168 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2022-08-24 11:19:43
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-09-21 16:02:07
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    /* eslint-disable */
 | 
			
		||||
    return {
 | 
			
		||||
      urlOptions: {
 | 
			
		||||
        getDataListURL: '',
 | 
			
		||||
        deleteURL: '',
 | 
			
		||||
        statusUrl: '',
 | 
			
		||||
        exportURL: ''
 | 
			
		||||
      },
 | 
			
		||||
      tableData: [],
 | 
			
		||||
      listQuery: {
 | 
			
		||||
        pageSize: 10,
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        total: 1,
 | 
			
		||||
      },
 | 
			
		||||
      exportLoading: false,
 | 
			
		||||
      dataListLoading: false,
 | 
			
		||||
      addOrEditTitle: '',
 | 
			
		||||
      addOrUpdateVisible: false,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getDataList()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 获取数据列表
 | 
			
		||||
    getDataList() {
 | 
			
		||||
      this.dataListLoading = true;
 | 
			
		||||
      this.urlOptions.getDataListURL(this.listQuery).then(response => {
 | 
			
		||||
        this.tableData = response.data.list;
 | 
			
		||||
        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();
 | 
			
		||||
    },
 | 
			
		||||
    // 新增 / 修改
 | 
			
		||||
    addOrUpdateHandle(id) {
 | 
			
		||||
      this.addOrUpdateVisible = true;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.addOrUpdate.init(id);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    cancel(id) {
 | 
			
		||||
      this.$refs["popover-" + id].showPopper = false;
 | 
			
		||||
    },
 | 
			
		||||
    //改变状态
 | 
			
		||||
    changeStatus(id) {
 | 
			
		||||
      this.$http
 | 
			
		||||
        .post(this.urlOptions.statusUrl, { id })
 | 
			
		||||
        .then(({ data: res }) => {
 | 
			
		||||
          if (res.code !== 0) {
 | 
			
		||||
            return this.$message.warning(res.msg);
 | 
			
		||||
          }
 | 
			
		||||
          this.$refs["popover-" + id].showPopper = false;
 | 
			
		||||
          this.$message({
 | 
			
		||||
            message: this.$t("prompt.success"),
 | 
			
		||||
            type: "success",
 | 
			
		||||
            duration: 500,
 | 
			
		||||
            onClose: () => {
 | 
			
		||||
              this.getDataList();
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
        })
 | 
			
		||||
        .catch(() => { });
 | 
			
		||||
    },
 | 
			
		||||
    //tableBtn点击
 | 
			
		||||
    handleClick(val) {
 | 
			
		||||
      if (val.type === "edit") {
 | 
			
		||||
        this.addOrUpdateVisible = true;
 | 
			
		||||
        this.addOrEditTitle = "编辑";
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          this.$refs.addOrUpdate.init(val.data.id);
 | 
			
		||||
        });
 | 
			
		||||
      } else if (val.type === "delete") {
 | 
			
		||||
        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
 | 
			
		||||
      } else if (val.type === "change") {
 | 
			
		||||
        this.changeStatus(val.data.id)
 | 
			
		||||
      } else {
 | 
			
		||||
        this.otherMethods(val)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 删除
 | 
			
		||||
    deleteHandle(id, name, index) {
 | 
			
		||||
      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
 | 
			
		||||
        confirmButtonText: "确定",
 | 
			
		||||
        cancelButtonText: "取消",
 | 
			
		||||
        type: "warning",
 | 
			
		||||
      })
 | 
			
		||||
        .then(() => {
 | 
			
		||||
          this.urlOptions.deleteURL(id).then(({ data }) => {
 | 
			
		||||
            this.$message({
 | 
			
		||||
              message: "操作成功",
 | 
			
		||||
              type: "success",
 | 
			
		||||
              duration: 1500,
 | 
			
		||||
              onClose: () => {
 | 
			
		||||
                this.getDataList();
 | 
			
		||||
              },
 | 
			
		||||
            });
 | 
			
		||||
          });
 | 
			
		||||
        })
 | 
			
		||||
        .catch(() => { });
 | 
			
		||||
    },
 | 
			
		||||
    //search-bar点击
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      switch (val.btnName) {
 | 
			
		||||
        case "search":
 | 
			
		||||
          this.listQuery.xm1 = val.xm1;
 | 
			
		||||
          this.listQuery.xm2 = val.xm2;
 | 
			
		||||
          this.listQuery.pageNo = 1;
 | 
			
		||||
          this.getDataList();
 | 
			
		||||
          break;
 | 
			
		||||
        case "add":
 | 
			
		||||
          this.addOrEditTitle = '新增'
 | 
			
		||||
          this.addOrUpdateVisible = true;
 | 
			
		||||
          this.addOrUpdateHandle()
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          console.log(val)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    handleCancel() {
 | 
			
		||||
      this.$refs.addOrUpdate.formClear()
 | 
			
		||||
      this.addOrUpdateVisible = false
 | 
			
		||||
      this.addOrEditTitle = ''
 | 
			
		||||
    },
 | 
			
		||||
    handleConfirm() {
 | 
			
		||||
      this.$refs.addOrUpdate.dataFormSubmit()
 | 
			
		||||
    },
 | 
			
		||||
    successSubmit() {
 | 
			
		||||
      this.handleCancel()
 | 
			
		||||
      this.getDataList()
 | 
			
		||||
    },
 | 
			
		||||
    /** 导出按钮操作 */
 | 
			
		||||
    handleExport() {
 | 
			
		||||
      // 处理查询参数
 | 
			
		||||
      let params = { ...this.queryParams };
 | 
			
		||||
      params.pageNo = undefined;
 | 
			
		||||
      params.pageSize = undefined;
 | 
			
		||||
      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
 | 
			
		||||
        this.exportLoading = true;
 | 
			
		||||
        return this.urlOptions.exportURL(params);
 | 
			
		||||
      }).then(response => {
 | 
			
		||||
        this.$download.excel(response, '工厂.xls');
 | 
			
		||||
        this.exportLoading = false;
 | 
			
		||||
      }).catch(() => { });
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,73 +0,0 @@
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
 * @Date: 2020-12-29 16:49:28
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-09-12 11:13:34
 | 
			
		||||
 * @FilePath: \basic-admin\src\filters\basicData\index.js
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
const table = {
 | 
			
		||||
  lineStatus: {
 | 
			
		||||
    1: '生产中',
 | 
			
		||||
    2: '停止',
 | 
			
		||||
    3: '未知',
 | 
			
		||||
  },
 | 
			
		||||
  reportType: {
 | 
			
		||||
    1: '日',
 | 
			
		||||
    2: '周',
 | 
			
		||||
    3: '月'
 | 
			
		||||
  },
 | 
			
		||||
  pdType: {
 | 
			
		||||
    1: '原片',
 | 
			
		||||
    0: '深加工',
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 日期格式化
 | 
			
		||||
export function parseTime(time, pattern) {
 | 
			
		||||
  if (arguments.length === 0 || !time) {
 | 
			
		||||
    return null
 | 
			
		||||
  }
 | 
			
		||||
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
 | 
			
		||||
  let date
 | 
			
		||||
  if (typeof time === 'object') {
 | 
			
		||||
    date = time
 | 
			
		||||
  } else {
 | 
			
		||||
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
 | 
			
		||||
      time = parseInt(time)
 | 
			
		||||
    } else if (typeof time === 'string') {
 | 
			
		||||
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
 | 
			
		||||
    }
 | 
			
		||||
    if ((typeof time === 'number') && (time.toString().length === 10)) {
 | 
			
		||||
      time = time * 1000
 | 
			
		||||
    }
 | 
			
		||||
    date = new Date(time)
 | 
			
		||||
  }
 | 
			
		||||
  const formatObj = {
 | 
			
		||||
    y: date.getFullYear(),
 | 
			
		||||
    m: date.getMonth() + 1,
 | 
			
		||||
    d: date.getDate(),
 | 
			
		||||
    h: date.getHours(),
 | 
			
		||||
    i: date.getMinutes(),
 | 
			
		||||
    s: date.getSeconds(),
 | 
			
		||||
    a: date.getDay()
 | 
			
		||||
  }
 | 
			
		||||
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
 | 
			
		||||
    let value = formatObj[key]
 | 
			
		||||
    // Note: getDay() returns 0 on Sunday
 | 
			
		||||
    if (key === 'a') {
 | 
			
		||||
      return ['日', '一', '二', '三', '四', '五', '六'][value]
 | 
			
		||||
    }
 | 
			
		||||
    if (result.length > 0 && value < 10) {
 | 
			
		||||
      value = '0' + value
 | 
			
		||||
    }
 | 
			
		||||
    return value || 0
 | 
			
		||||
  })
 | 
			
		||||
  return time_str
 | 
			
		||||
}
 | 
			
		||||
export default function (dictTable) {
 | 
			
		||||
  return function (val) {
 | 
			
		||||
    return table?.[dictTable]?.[val]
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -248,12 +248,11 @@ export default {
 | 
			
		||||
				this.lineArr = response.data;
 | 
			
		||||
				this.lineArr.forEach((item, index) => {
 | 
			
		||||
					const num = [
 | 
			
		||||
						'',
 | 
			
		||||
						'1672847052717821953',
 | 
			
		||||
						'1672847052717821954',
 | 
			
		||||
						'1686260211054157825',
 | 
			
		||||
						'1701892552632770122',
 | 
			
		||||
						'1714562503683465331',
 | 
			
		||||
						'20001',
 | 
			
		||||
						'20002',
 | 
			
		||||
						'20003',
 | 
			
		||||
						'20004',
 | 
			
		||||
						'20005',
 | 
			
		||||
					].indexOf(item.id);
 | 
			
		||||
					if (num > 0) {
 | 
			
		||||
						item.num = num;
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										339
									
								
								src/views/monitoring/qhdEquipmentVisualize/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,339 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2025-02-10 09:15:55
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2025-02-25 15:48:59
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container" style="overflow: auto">
 | 
			
		||||
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
 | 
			
		||||
      @headBtnClick="buttonClick" />
 | 
			
		||||
    <div class="top-tip">
 | 
			
		||||
      <div class="block" style="background: #5b8ff9" />
 | 
			
		||||
      运行
 | 
			
		||||
      <div class="block" style="background: #f4b183" />
 | 
			
		||||
      停机
 | 
			
		||||
      <div class="block" style="background: #ff4f3e" />
 | 
			
		||||
      故障
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="canvas-line" v-for="(item, index) in lineArr" :key="index">
 | 
			
		||||
      <div class="title">{{ item.name }}</div>
 | 
			
		||||
      <canvas style="
 | 
			
		||||
					box-shadow: 1px 1px 2px 2px #909399;
 | 
			
		||||
					padding: 0;
 | 
			
		||||
					height: 350px;
 | 
			
		||||
					width: 2500px;
 | 
			
		||||
				" @click="getclient($event, index + 1, item.num)" :id="'mycanvas' + (index + 1)"></canvas>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { getPdList } from '@/api/core/monitoring/auto';
 | 
			
		||||
import { getFactoryPage, getLineEqStatus } from '@/api/core/base/factory';
 | 
			
		||||
import linePot from './line-pot';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				factoryId: null,
 | 
			
		||||
				lineId: null,
 | 
			
		||||
			},
 | 
			
		||||
			ctx: '', //canvas
 | 
			
		||||
			lineArr: [],
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '工厂',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'factoryId',
 | 
			
		||||
					onchange: true,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '产线',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
					multiple: true,
 | 
			
		||||
          width: 410
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '搜索',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			linePot,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getPdLineList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		initCanvas(name) {
 | 
			
		||||
			let canvas = document.getElementById(name);
 | 
			
		||||
			canvas.width = canvas.clientWidth;
 | 
			
		||||
      canvas.width = canvas.clientWidth;
 | 
			
		||||
      console.log(canvas.width);
 | 
			
		||||
 | 
			
		||||
			canvas.height = 350;
 | 
			
		||||
			this.ctx = canvas.getContext('2d');
 | 
			
		||||
			this.ctx.lineWidth = 1;
 | 
			
		||||
			this.ctx.strokeStyle = '#909399';
 | 
			
		||||
			this.ctx.fillStyle = '#5b8ff9';
 | 
			
		||||
			this.ctx.font = '12px 宋体'; //文字大小 字体样式
 | 
			
		||||
      this.ctx.clearRect(0, 0, canvas.clientWidth, 350); //清空画布
 | 
			
		||||
		},
 | 
			
		||||
		//画长方形
 | 
			
		||||
		fillRect(x, y, width, height, name, color) {
 | 
			
		||||
			this.ctx.beginPath(); //开始
 | 
			
		||||
			this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
 | 
			
		||||
			this.ctx.fillRect(x, y, width, height); //左上角点的坐标(x,y) 宽 高
 | 
			
		||||
			this.ctx.strokeRect(x, y, width, height);
 | 
			
		||||
			this.ctx.fillStyle = '#fff'; //填充颜色
 | 
			
		||||
			if (height === 50) {
 | 
			
		||||
				//判断是否特殊机器 机器文字y轴定位加10
 | 
			
		||||
				this.ctx.fillText(name, x + 5, y + 30);
 | 
			
		||||
			} else {
 | 
			
		||||
				this.ctx.fillText(name, x + 5, y + 20);
 | 
			
		||||
			}
 | 
			
		||||
			this.ctx.closePath(); //结束
 | 
			
		||||
		},
 | 
			
		||||
		//画特殊形
 | 
			
		||||
		fillLRect(LArr, name, color) {
 | 
			
		||||
			this.ctx.beginPath(); //开始
 | 
			
		||||
			LArr.forEach((item, index) => {
 | 
			
		||||
				if (index === 0) {
 | 
			
		||||
					this.ctx.moveTo(item[0], item[1]);
 | 
			
		||||
				} else {
 | 
			
		||||
					this.ctx.lineTo(item[0], item[1]);
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.ctx.closePath(); //结束   // 闭合路径
 | 
			
		||||
			this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
 | 
			
		||||
			this.ctx.fill();
 | 
			
		||||
			this.ctx.stroke();
 | 
			
		||||
			this.ctx.fillStyle = '#fff'; //填充颜色
 | 
			
		||||
			if (LArr[0][0] === LArr[1][0]) {
 | 
			
		||||
				//判断L形第一截是竖着还是横着
 | 
			
		||||
				this.ctx.fillText(name, LArr[1][0] + 5, LArr[1][1]-10); //竖着
 | 
			
		||||
			} else {
 | 
			
		||||
				this.ctx.fillText(name, LArr[0][0] + 25, LArr[0][1] + 20);
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
    isEven(num) {
 | 
			
		||||
      return (num & 1) === 0;
 | 
			
		||||
    },
 | 
			
		||||
    setRect(item, index) {
 | 
			
		||||
      console.log(index)
 | 
			
		||||
      let identifier = ''
 | 
			
		||||
      if (this.isEven(index + 1)) {
 | 
			
		||||
         identifier = 'line' + item.num + 'canvasSecondHalf';
 | 
			
		||||
      } else {
 | 
			
		||||
        identifier = 'line' + item.num + 'canvasFirstHalf';
 | 
			
		||||
      }
 | 
			
		||||
			// const identifier = 'line' + item.num + 'canvas';
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				this.initCanvas('mycanvas' + (index + 1));
 | 
			
		||||
			});
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				this.linePot[identifier].forEach((idItem) => {
 | 
			
		||||
					item.children.forEach((eqItem) => {
 | 
			
		||||
						if (eqItem.id === idItem.id) {
 | 
			
		||||
							idItem.color = ['#5b8ff9', '#f4b183', '#ff4f3e'][
 | 
			
		||||
								eqItem.equipmentStatus
 | 
			
		||||
							];
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					if (idItem.isL) {
 | 
			
		||||
						this.fillLRect(idItem.line, idItem.name, idItem.color);
 | 
			
		||||
					} else {
 | 
			
		||||
						this.fillRect(
 | 
			
		||||
							idItem.x,
 | 
			
		||||
							idItem.y,
 | 
			
		||||
							idItem.width,
 | 
			
		||||
							idItem.height,
 | 
			
		||||
							idItem.name,
 | 
			
		||||
							idItem.color
 | 
			
		||||
						);
 | 
			
		||||
					}
 | 
			
		||||
				});
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getclient(e, index, num) {
 | 
			
		||||
			let canvas = document.getElementById('mycanvas' + index);
 | 
			
		||||
			const rect = canvas.getBoundingClientRect();
 | 
			
		||||
      let identifier = ''
 | 
			
		||||
      if (this.isEven(index + 1)) {
 | 
			
		||||
        identifier = 'line' + num + 'canvasSecondHalf';
 | 
			
		||||
      } else {
 | 
			
		||||
        identifier = 'line' + num + 'canvasFirstHalf';
 | 
			
		||||
      }
 | 
			
		||||
			this.isEQ(e.clientX - rect.left, e.clientY - rect.top, identifier);
 | 
			
		||||
		},
 | 
			
		||||
		// 检查点击位置是否在设备内
 | 
			
		||||
		isEQ(x, y, identifier) {
 | 
			
		||||
			this.linePot[identifier].forEach((idItem) => {
 | 
			
		||||
				if (idItem.isEQ) {
 | 
			
		||||
					// 检查点击位置是否在矩形内
 | 
			
		||||
					if (
 | 
			
		||||
						x >= idItem.x &&
 | 
			
		||||
						x <= idItem.x + idItem.width &&
 | 
			
		||||
						y >= idItem.y &&
 | 
			
		||||
						y <= idItem.y + idItem.height
 | 
			
		||||
					) {
 | 
			
		||||
						console.log(idItem.name, idItem.id);
 | 
			
		||||
						this.$router.push({
 | 
			
		||||
              path: '//base/production-line/getLineEqStatus',
 | 
			
		||||
							query: { eqid: idItem.id },
 | 
			
		||||
						});
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getPdLineList() {
 | 
			
		||||
			const params = {
 | 
			
		||||
				pageSize: 100,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
			};
 | 
			
		||||
			getFactoryPage(params).then((res) => {
 | 
			
		||||
				this.formConfig[0].selectOptions = res.data.list || [];
 | 
			
		||||
			});
 | 
			
		||||
			getPdList().then((res) => {
 | 
			
		||||
				this.formConfig[1].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 100;
 | 
			
		||||
					this.listQuery.factoryId = val.factoryId || undefined;
 | 
			
		||||
					this.listQuery.lineId = val.lineId ? val.lineId : [];
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		handleSearchBarChanged({ param, value }) {
 | 
			
		||||
			this.listQuery.lineId = [];
 | 
			
		||||
			this.$refs.searchBarForm.formInline.lineId = undefined;
 | 
			
		||||
			getPdList(value).then((res) => {
 | 
			
		||||
				this.formConfig[1].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			// this.lineArr = [
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		num: 1,
 | 
			
		||||
			// 		name: 'A1',
 | 
			
		||||
			// 		children: [],
 | 
			
		||||
			// 	},
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		num: 2,
 | 
			
		||||
			// 		name: 'A2',
 | 
			
		||||
			// 		children: [],
 | 
			
		||||
			// 	},
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		num: 3,
 | 
			
		||||
			// 		name: 'A3',
 | 
			
		||||
			// 		children: [],
 | 
			
		||||
			// 	},
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		num: 4,
 | 
			
		||||
			// 		name: 'A4',
 | 
			
		||||
			// 		children: [],
 | 
			
		||||
			// 	},
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		num: 5,
 | 
			
		||||
			// 		name: 'A5',
 | 
			
		||||
			// 		children: [],
 | 
			
		||||
			// 	},
 | 
			
		||||
			// ];
 | 
			
		||||
      getLineEqStatus(this.listQuery).then((response) => {
 | 
			
		||||
        this.lineArr = response.data;
 | 
			
		||||
        // Create a new array by duplicating each item
 | 
			
		||||
        const duplicatedArr = [];
 | 
			
		||||
        this.lineArr.forEach((item, index) => {
 | 
			
		||||
          console.log(item,'item');
 | 
			
		||||
 | 
			
		||||
          // Process original item
 | 
			
		||||
          const num = [
 | 
			
		||||
            '',
 | 
			
		||||
            20001,
 | 
			
		||||
            20002,
 | 
			
		||||
            20003,
 | 
			
		||||
            20004,
 | 
			
		||||
            20005,
 | 
			
		||||
          ].indexOf(item.id);
 | 
			
		||||
          if (num > 0) {
 | 
			
		||||
            // Original item with copy=1
 | 
			
		||||
            const originalItem = {
 | 
			
		||||
              ...item,
 | 
			
		||||
              num: num,
 | 
			
		||||
              name: item.lineName +'前半段',
 | 
			
		||||
              copy: 1
 | 
			
		||||
            };
 | 
			
		||||
            duplicatedArr.push(originalItem);
 | 
			
		||||
            this.setRect(originalItem, index * 2); // Adjust index for original
 | 
			
		||||
 | 
			
		||||
            // Create copy with copy=2
 | 
			
		||||
            const copiedItem = {
 | 
			
		||||
              ...item,
 | 
			
		||||
              num: num,
 | 
			
		||||
              name: item.lineName + '后半段',
 | 
			
		||||
              copy: 2
 | 
			
		||||
            };
 | 
			
		||||
            duplicatedArr.push(copiedItem);
 | 
			
		||||
            this.setRect(copiedItem, index * 2 + 1); // Adjust index for copy
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$message.warning('没有对应的产线!');
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
        console.log(duplicatedArr);
 | 
			
		||||
 | 
			
		||||
        // Replace the original array with the duplicated one
 | 
			
		||||
        this.lineArr = duplicatedArr;
 | 
			
		||||
      });
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.top-tip {
 | 
			
		||||
	.block {
 | 
			
		||||
		display: inline-block;
 | 
			
		||||
		width: 20px;
 | 
			
		||||
		height: 10px;
 | 
			
		||||
		margin-left: 20px;
 | 
			
		||||
		margin-right: 3px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.canvas-line {
 | 
			
		||||
	margin-top: 20px;
 | 
			
		||||
	min-width: 2000px;
 | 
			
		||||
  overflow: auto;
 | 
			
		||||
  // height: 300px;
 | 
			
		||||
  // overflow-x: hidden;
 | 
			
		||||
	.title {
 | 
			
		||||
		font-size: 20px;
 | 
			
		||||
		font-weight: bolder;
 | 
			
		||||
		&::before {
 | 
			
		||||
			content: '';
 | 
			
		||||
			background: rgb(39, 240, 17);
 | 
			
		||||
			display: inline-block;
 | 
			
		||||
			width: 8px;
 | 
			
		||||
			height: 8px;
 | 
			
		||||
			border-radius: 50%;
 | 
			
		||||
			margin-right: 3px;
 | 
			
		||||
			transform: translateY(-50%);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										5131
									
								
								src/views/monitoring/qhdEquipmentVisualize/line-pot.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -1,172 +0,0 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-01 13:52:10
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-10-16 13:40:00
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
 | 
			
		||||
    label-width="130px">
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <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="code">
 | 
			
		||||
          <el-input v-model="dataForm.code" clearable placeholder="请输入订单编码" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="客户" prop="customerName">
 | 
			
		||||
          <el-input v-model="dataForm.customerName" clearable placeholder="请输入客户" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="计划加工量(片)" prop="planProductNum">
 | 
			
		||||
          <el-input v-model="dataForm.planProductNum" clearable placeholder="请输入计划加工量" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="产品工艺" prop="processName">
 | 
			
		||||
          <el-input v-model="dataForm.processName" clearable placeholder="请输入产品工艺" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="产品规格" prop="planProductSize">
 | 
			
		||||
          <el-input v-model="dataForm.planProductSize" clearable placeholder="请输入产品规格" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="交货日期" prop="deliveryTime">
 | 
			
		||||
          <el-date-picker v-model="dataForm.deliveryTime" type="date" placeholder="选择交货日期" value-format="timestamp">
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <el-form-item label="包装规格(片/箱)" prop="packSpec">
 | 
			
		||||
          <el-input v-model="dataForm.packSpec" clearable placeholder="请输入包装规格" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <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>
 | 
			
		||||
    <span>产线信息</span>
 | 
			
		||||
    <el-button type="text" icon="el-icon-plus" @click="handleAdd" style="color: #409EFF;float: right;">
 | 
			
		||||
    </el-button>
 | 
			
		||||
    <el-divider></el-divider>
 | 
			
		||||
    <el-row :gutter="24" v-for="(item, index) in dataForm.bindLineList" :key="index">
 | 
			
		||||
      <el-col :span="8">
 | 
			
		||||
        <el-form-item label="产线" :prop="'bindLineList.' + index + '.lineId'">
 | 
			
		||||
          <el-select v-model="item.lineId" filterable clearable placeholder="请选择产线">
 | 
			
		||||
            <el-option v-for="line in urlOptions.optionArr.arr0" :key="line.id" :label="line.name"
 | 
			
		||||
              :value="line.id"></el-option>
 | 
			
		||||
          </el-select>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="14">
 | 
			
		||||
        <el-form-item label="实际生产时间段" :prop="'bindLineList[' + index + '].dateRange'">
 | 
			
		||||
          <el-date-picker v-model="item.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
 | 
			
		||||
            end-placeholder="结束日期" value-format="timestamp" @change="(va1) => handleChange(va1, index)" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="2">
 | 
			
		||||
        <!-- 删除按钮(至少保留一项) -->
 | 
			
		||||
        <el-button type="text" icon="el-icon-delete" @click="handleDelete(index)"
 | 
			
		||||
          :disabled="dataForm.bindLineList.length <= 1" style="color: #f56c6c;"></el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
    <!-- <el-form-item label="备注" prop="remark">
 | 
			
		||||
      <el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
 | 
			
		||||
    </el-form-item> -->
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import basicAdd from '../../mixins/basic-add';
 | 
			
		||||
import {
 | 
			
		||||
  updateOrderData,
 | 
			
		||||
  createOrderData,
 | 
			
		||||
  getOrderData,
 | 
			
		||||
  getOrderCode
 | 
			
		||||
  // exportWorkshopSectionExcel
 | 
			
		||||
} from "@/api/order/index";
 | 
			
		||||
import {
 | 
			
		||||
	getProductionLinePage,
 | 
			
		||||
} from '@/api/core/base/productionLine';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicAdd],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
        getOption: true,
 | 
			
		||||
			  isGetCode: true,
 | 
			
		||||
        codeURL: getOrderCode,
 | 
			
		||||
        createURL: createOrderData,
 | 
			
		||||
        updateURL: updateOrderData,
 | 
			
		||||
        infoURL: getOrderData,
 | 
			
		||||
        optionArrUrl: [getProductionLinePage],
 | 
			
		||||
			},
 | 
			
		||||
			dataForm: {
 | 
			
		||||
				id: undefined,
 | 
			
		||||
				code: undefined,
 | 
			
		||||
        bindLineList: [
 | 
			
		||||
        ],
 | 
			
		||||
        deliveryTime:undefined,
 | 
			
		||||
				name: undefined,
 | 
			
		||||
        remark: undefined,
 | 
			
		||||
        planProductSize: undefined,
 | 
			
		||||
        planProductNum: undefined,
 | 
			
		||||
        customerName: undefined,
 | 
			
		||||
        processName: undefined,
 | 
			
		||||
        packSpec: undefined,
 | 
			
		||||
			},
 | 
			
		||||
			dataRule: {
 | 
			
		||||
				code: [
 | 
			
		||||
					{ required: true, message: '订单编码不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
				name: [
 | 
			
		||||
					{ required: true, message: '订单名称不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
  methods: {
 | 
			
		||||
    handleAdd() {
 | 
			
		||||
      const newItem = {
 | 
			
		||||
        productionLineId: '',
 | 
			
		||||
        dateRange: []
 | 
			
		||||
      };
 | 
			
		||||
      // 使用 this.$set 向数组添加元素(确保响应式)
 | 
			
		||||
      this.$set(
 | 
			
		||||
        this.dataForm.bindLineList,
 | 
			
		||||
        this.dataForm.bindLineList.length,  // 新元素的索引(数组长度即最后一个位置)
 | 
			
		||||
        newItem  // 要添加的新元素
 | 
			
		||||
      );
 | 
			
		||||
    },
 | 
			
		||||
    handleChange(val, index) {
 | 
			
		||||
      console.log(val);
 | 
			
		||||
      this.dataForm.bindLineList[index].startProduceTime = val[0]
 | 
			
		||||
      this.dataForm.bindLineList[index].finishProduceTime = val[1]
 | 
			
		||||
    },
 | 
			
		||||
    handleDelete(index) {
 | 
			
		||||
      this.dataForm.bindLineList.splice(index, 1);
 | 
			
		||||
      Message.info('已删除该配置');
 | 
			
		||||
    },
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
@@ -1,358 +0,0 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2021-12-04 16:27:09
 | 
			
		||||
 * @LastEditTime: 2022-08-09 09:47:17
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <el-drawer title="详情" :visible.sync="drawer" :before-close="handleClose" size="60%">
 | 
			
		||||
      <div class="detailBox">
 | 
			
		||||
        <h2 style="margin-left: 32px;">
 | 
			
		||||
          订单编号: {{ dataForm.code}}
 | 
			
		||||
        </h2>
 | 
			
		||||
        <el-row>
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <p class="title">订单名称</p>
 | 
			
		||||
            <p class="text">{{ dataForm.name }}</p>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <p class="title">客户</p>
 | 
			
		||||
            <p class="text">{{ dataForm.customerName }}</p>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <p class="title">计划加工量</p>
 | 
			
		||||
            <p class="text">{{ dataForm?.planProductNum }}</p>
 | 
			
		||||
          </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <!-- <el-divider /> -->
 | 
			
		||||
        <div>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">产品工艺</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.processName }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">产品规格</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.planProductSize }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">交货日期</p>
 | 
			
		||||
              <p class="text">{{ parseTime(dataForm?.deliveryTime) }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">包装规格(片/箱)</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.packSpec }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">实际生产时间</p>
 | 
			
		||||
              <p class="text">{{ parseTime(dataForm?.startProduceTime) + '-' + parseTime(dataForm?.finishProduceTime) }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">实际投入数量</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.assignQuantity }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">实际产出数量</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.actualQuantity }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
              <p class="title">备注</p>
 | 
			
		||||
              <p class="text">{{ dataForm?.remark }}</p>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
        </div>
 | 
			
		||||
        <!-- <div v-if="glass === 4"> -->
 | 
			
		||||
        <!-- 铜铟镓硒待完成 -->
 | 
			
		||||
        <!-- </div> -->
 | 
			
		||||
      </div>
 | 
			
		||||
      <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
 | 
			
		||||
 | 
			
		||||
      <h2 style="margin-left: 32px;">
 | 
			
		||||
        产线信息
 | 
			
		||||
      </h2>
 | 
			
		||||
      <el-divider />
 | 
			
		||||
      <el-button @click="handleRoute" type="text" style="float: right;margin-right: 20px;">订单生产详情</el-button>
 | 
			
		||||
      <base-table :table-props="tableProps" :table-data="tableData">
 | 
			
		||||
        <method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
 | 
			
		||||
          @clickBtn="handleClick" />
 | 
			
		||||
      </base-table>
 | 
			
		||||
      <!-- <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
 | 
			
		||||
        @pagination="getDataList" /> -->
 | 
			
		||||
    </el-drawer>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
const tableProps = [{
 | 
			
		||||
  prop: 'lineName',
 | 
			
		||||
  label: '产线',
 | 
			
		||||
  align: 'center'
 | 
			
		||||
},
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'processName',
 | 
			
		||||
    label: '产品工艺',
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'planProductSize',
 | 
			
		||||
    label: '产品规格',
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'startProduceTime',
 | 
			
		||||
    label: '开始时间',
 | 
			
		||||
    filter: parseTime,
 | 
			
		||||
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'finishProduceTime',
 | 
			
		||||
    label: '结束时间',
 | 
			
		||||
    filter: parseTime,
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'assignQuantity',
 | 
			
		||||
    label: '投入数量',
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  }, {
 | 
			
		||||
    prop: 'actualQuantity',
 | 
			
		||||
    label: '产出数量',
 | 
			
		||||
    align: 'center'
 | 
			
		||||
  },
 | 
			
		||||
]
 | 
			
		||||
// import { getPageWareHouseSubstrateHistory } from '@/api/equipment/trans'
 | 
			
		||||
// import BaseTable from '@/components/BaseTable'
 | 
			
		||||
// // import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 | 
			
		||||
// import Pagination from '@/components/Pagination'
 | 
			
		||||
// edit here
 | 
			
		||||
// import i18n from '@/lang'
 | 
			
		||||
 | 
			
		||||
// import HeadForm from '@/components/basicData/HeadForm'
 | 
			
		||||
import {
 | 
			
		||||
  getOrderData,
 | 
			
		||||
  // exportWorkshopSectionExcel
 | 
			
		||||
} from "@/api/order/index";
 | 
			
		||||
import { parseTime } from '../../mixins/code-filter';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  components: {
 | 
			
		||||
    // BaseTable,
 | 
			
		||||
    // Pagination,
 | 
			
		||||
    // HeadForm
 | 
			
		||||
    // MethodBtn
 | 
			
		||||
    // MethodBtn
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      tableProps,
 | 
			
		||||
      drawer: false,
 | 
			
		||||
      list: [],
 | 
			
		||||
      tableBtn: [{
 | 
			
		||||
            type: 'detail',
 | 
			
		||||
            btnName: '产线生产详情',
 | 
			
		||||
          }
 | 
			
		||||
        // this.$auth.hasPermi(`base:workshop-section:delete`)
 | 
			
		||||
        // ? {
 | 
			
		||||
        // 		type: 'delete',
 | 
			
		||||
        // 		btnName: '删除',
 | 
			
		||||
        //   }
 | 
			
		||||
        // : undefined,
 | 
			
		||||
      ].filter((v) => v),
 | 
			
		||||
      tableData:[],
 | 
			
		||||
      listLoading: false,
 | 
			
		||||
      total: 0,
 | 
			
		||||
      edit: false,
 | 
			
		||||
      // dataForm: {
 | 
			
		||||
      //   id: null,
 | 
			
		||||
      //   io: null,
 | 
			
		||||
      //   status: null
 | 
			
		||||
      // },
 | 
			
		||||
      lineIdList:[],
 | 
			
		||||
      dataForm: {
 | 
			
		||||
        id: null,
 | 
			
		||||
        name: '', // 订单名称
 | 
			
		||||
        customerName: '', // 客户
 | 
			
		||||
        planProductNum: '', // 计划加工量
 | 
			
		||||
        processName: '', // 产品工艺
 | 
			
		||||
        planProductSize: '', // 产品规格
 | 
			
		||||
        deliveryTime: '', // 交货日期
 | 
			
		||||
        packSpec: '', // 包装规格(片/箱)
 | 
			
		||||
        startProduceTime: '', // 实际生产时间
 | 
			
		||||
        assignQuantity: '', // 实际投入数量
 | 
			
		||||
        actualQuantity: '', // 实际产出数量
 | 
			
		||||
        remark: '' // 备注
 | 
			
		||||
      },
 | 
			
		||||
      listQuery: {
 | 
			
		||||
 | 
			
		||||
      },
 | 
			
		||||
      // headFormConfig: [
 | 
			
		||||
      //   {
 | 
			
		||||
      //     label: this.$t('module.equipmentManager.trans.inEqTime'),
 | 
			
		||||
      //     type: 'datePickRange',
 | 
			
		||||
      //     dateType: 'datetimerange',
 | 
			
		||||
      //     format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
      //     valueFormat: 'yyyy-MM-ddTHH:mm:ss',
 | 
			
		||||
      //     param: 'inTime'
 | 
			
		||||
      //   },
 | 
			
		||||
      //   {
 | 
			
		||||
      //     label: this.$t('module.equipmentManager.trans.outTime'),
 | 
			
		||||
      //     type: 'datePickRange',
 | 
			
		||||
      //     dateType: 'datetimerange',
 | 
			
		||||
      //     format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
      //     valueFormat: 'yyyy-MM-ddTHH:mm:ss',
 | 
			
		||||
      //     param: 'outTime'
 | 
			
		||||
      //   },
 | 
			
		||||
      //   {
 | 
			
		||||
      //     type: 'button',
 | 
			
		||||
      //     btnName: 'btn.search',
 | 
			
		||||
      //     name: 'search',
 | 
			
		||||
      //     color: 'primary'
 | 
			
		||||
      //   }
 | 
			
		||||
      //   // {
 | 
			
		||||
      //   //   type: 'button',
 | 
			
		||||
      //   //   btnName: 'btn.exportBtn',
 | 
			
		||||
      //   //   name: 'exportBtn',
 | 
			
		||||
      //   //   color: 'primary'
 | 
			
		||||
      //   // }
 | 
			
		||||
      // ],
 | 
			
		||||
      rules: {
 | 
			
		||||
        // slotNo: [
 | 
			
		||||
        //   { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.trans.slotNo')]), trigger: 'blur' }
 | 
			
		||||
        // ],
 | 
			
		||||
        // substrateId: [
 | 
			
		||||
        //   { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.trans.substrateId')]), trigger: 'blur' }
 | 
			
		||||
        // ]
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    handleClose() {
 | 
			
		||||
      this.drawer = false
 | 
			
		||||
    },
 | 
			
		||||
    handleRoute() {
 | 
			
		||||
      console.log(this.lineIdList);
 | 
			
		||||
 | 
			
		||||
      this.$router.push({
 | 
			
		||||
        path: '/core/monitoring/production-line-data',
 | 
			
		||||
        query: {
 | 
			
		||||
          lineId: this.lineIdList,
 | 
			
		||||
          startProduceTime: this.dataForm.startProduceTime,
 | 
			
		||||
          finishProduceTime: this.dataForm.finishProduceTime,
 | 
			
		||||
          tab: 'his',
 | 
			
		||||
          name: this.dataForm.name,
 | 
			
		||||
          code: this.dataForm.code,
 | 
			
		||||
 | 
			
		||||
          buttonType:'order'
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    handleClick(val) {
 | 
			
		||||
      console.log(val);
 | 
			
		||||
 | 
			
		||||
      this.$router.push({
 | 
			
		||||
        path: '/core/monitoring/production-line-data',
 | 
			
		||||
        query: {
 | 
			
		||||
          lineId: [val.data.lineId],
 | 
			
		||||
          startProduceTime: val.data.startProduceTime,
 | 
			
		||||
          finishProduceTime: val.data.finishProduceTime,
 | 
			
		||||
          tab:'his'
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    async init(id) {
 | 
			
		||||
      // if (id !== undefined) {
 | 
			
		||||
      this.dataForm.id = id || ''
 | 
			
		||||
      //   this.edit = true
 | 
			
		||||
      // }
 | 
			
		||||
      // console.log(this.edit)
 | 
			
		||||
      this.drawer = true
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        // this.$refs['dataForm'].resetFields()
 | 
			
		||||
        getOrderData(id).then((res) => {
 | 
			
		||||
          this.dataForm = res.data
 | 
			
		||||
          this.tableData = res.data.bindLines
 | 
			
		||||
 | 
			
		||||
          this.tableData.forEach(ele => {
 | 
			
		||||
            this.lineIdList.push(
 | 
			
		||||
              ele.lineId
 | 
			
		||||
            )
 | 
			
		||||
          });
 | 
			
		||||
 | 
			
		||||
        })
 | 
			
		||||
        // console.log();
 | 
			
		||||
 | 
			
		||||
        // if (this.listQuery.id) {
 | 
			
		||||
        //   this.getList()
 | 
			
		||||
        // }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    getList() {
 | 
			
		||||
      getPageWareHouseSubstrateHistory(this.listQuery).then(res => {
 | 
			
		||||
        console.log(res)
 | 
			
		||||
 | 
			
		||||
        this.list = res.data.records
 | 
			
		||||
        this.total = res.data.total
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
    // dataSubmit() {
 | 
			
		||||
    //   this.$refs['dataForm'].validate((valid) => {
 | 
			
		||||
    //     if (valid) {
 | 
			
		||||
    //       if (this.dataForm.id) {
 | 
			
		||||
    //         const data = {
 | 
			
		||||
    //           id: this.dataForm.id,
 | 
			
		||||
    //           io: this.dataForm.io,
 | 
			
		||||
    //           status: this.dataForm.status
 | 
			
		||||
    //         }
 | 
			
		||||
    //         addOrUpdateLineSideWareHouseDetailData(data).then(res => {
 | 
			
		||||
    //           this.$message({
 | 
			
		||||
    //             message: this.$t('module.basicData.visual.success'),
 | 
			
		||||
    //             type: 'success',
 | 
			
		||||
    //             duration: 1500,
 | 
			
		||||
    //             onClose: () => {
 | 
			
		||||
    //               this.drawer = false
 | 
			
		||||
    //               this.$emit('refreshDataList')
 | 
			
		||||
    //             }
 | 
			
		||||
    //           })
 | 
			
		||||
    //         })
 | 
			
		||||
    //       }
 | 
			
		||||
    //     }
 | 
			
		||||
    //   })
 | 
			
		||||
    // }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
    .detailBox p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      padding: 0 32px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .detailBox.title {
 | 
			
		||||
      /* width: 56px; */
 | 
			
		||||
      /* height: 14px; */
 | 
			
		||||
      font-family: Source Han Sans CN, Source Han Sans CN;
 | 
			
		||||
      font-weight: 400;
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      color: rgba(0, 0, 0, 0.85);
 | 
			
		||||
      line-height: 16px;
 | 
			
		||||
      text-align: left;
 | 
			
		||||
      font-style: normal;
 | 
			
		||||
      text-transform: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .detailBox.text {
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      font-weight: 400;
 | 
			
		||||
      color: rgba(102, 102, 102, 0.75);
 | 
			
		||||
      padding-bottom: 20px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .detailBox {
 | 
			
		||||
      width: 98%;
 | 
			
		||||
      padding: 30px 0;
 | 
			
		||||
    }
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,362 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
 | 
			
		||||
    <el-table v-loading="dataListLoading" :data="tableData" row-key="id" border style="width: 100%">
 | 
			
		||||
      <el-table-column label="序号" type="index" width="50" />
 | 
			
		||||
      <!-- 订单名称/产线名称列 -->
 | 
			
		||||
      <el-table-column prop="name" label="订单名称/产线名称" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 订单编号列 -->
 | 
			
		||||
      <el-table-column prop="code" label="订单编号" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 客户列 -->
 | 
			
		||||
      <el-table-column prop="customerName" label="客户" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 计划加工量列 -->
 | 
			
		||||
      <el-table-column prop="planProductNum" label="计划加工量" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 实际加工量列 -->
 | 
			
		||||
      <el-table-column prop="actualQuantity" label="实际加工量" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 产品工艺列 -->
 | 
			
		||||
      <el-table-column prop="processName" label="产品工艺" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 产品规格列 -->
 | 
			
		||||
      <el-table-column prop="planProductSize" label="产品规格" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 交货时间列(带时间格式化) -->
 | 
			
		||||
      <el-table-column prop="deliveryTime" label="交货时间" align="center">
 | 
			
		||||
        <template #default="scope">
 | 
			
		||||
          {{ parseTime(scope.row.deliveryTime) }}
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
 | 
			
		||||
      <!-- 开始时间列(带时间格式化) -->
 | 
			
		||||
      <el-table-column prop="startProduceTime" label="开始时间" align="center">
 | 
			
		||||
        <template #default="scope">
 | 
			
		||||
          {{ parseTime(scope.row.startProduceTime) }}
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
 | 
			
		||||
      <!-- 结束时间列(带时间格式化) -->
 | 
			
		||||
      <el-table-column prop="finishProduceTime" label="结束时间" align="center">
 | 
			
		||||
        <template #default="scope">
 | 
			
		||||
          {{ parseTime(scope.row.finishProduceTime) }}
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
 | 
			
		||||
      <!-- 产线数量列 -->
 | 
			
		||||
      <el-table-column prop="bindLineNum" label="产线数量" align="center" />
 | 
			
		||||
 | 
			
		||||
      <!-- 操作列(对应原handleBtn插槽) -->
 | 
			
		||||
      <el-table-column fixed="right" label="操作" width="120">
 | 
			
		||||
        <template #default="scope">
 | 
			
		||||
          <!-- 只在 level 为 0 时显示操作按钮 -->
 | 
			
		||||
          <div v-if="scope.row.level === 0">
 | 
			
		||||
            <!-- 详情按钮 -->
 | 
			
		||||
            <span v-hasPermi="['base:core-work-order:update']" class="iconfont icon-detail  primary-color"
 | 
			
		||||
              @click="handleDetail(scope.row)" style="cursor: pointer; margin-right: 10px;"></span>
 | 
			
		||||
 | 
			
		||||
            <!-- 编辑按钮 -->
 | 
			
		||||
            <span v-hasPermi="['base:core-work-order:update']" class="iconfont icon-edit primary-color"
 | 
			
		||||
              @click="handleEdit(scope.row)" style="cursor: pointer; margin-right: 10px;"></span>
 | 
			
		||||
 | 
			
		||||
            <!-- 删除按钮 -->
 | 
			
		||||
            <span v-hasPermi="['base:core-work-order:delete']" class="iconfont icon-delete delete-color"
 | 
			
		||||
              @click="deleteHandle(scope.row.id,scope.row.name,scope.row.index)" style="cursor: pointer;"></span>
 | 
			
		||||
          </div>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-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" width="50%">
 | 
			
		||||
      <add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
 | 
			
		||||
    </base-dialog>
 | 
			
		||||
    <detail v-if="dialogVisibleDetail" ref="detailDialog" @refreshDataList="getDataList" />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import AddOrUpdate from './add-or-updata';
 | 
			
		||||
import detail from './detail';
 | 
			
		||||
 | 
			
		||||
import basicPage from '../../mixins/basic-page';
 | 
			
		||||
import { parseTime } from '../../mixins/code-filter';
 | 
			
		||||
import {
 | 
			
		||||
  getOrderPage,
 | 
			
		||||
  deleteOrder
 | 
			
		||||
  // getWorkshopSectionPage,
 | 
			
		||||
  // exportWorkshopSectionExcel
 | 
			
		||||
} from "@/api/order/index";
 | 
			
		||||
import { getPdList } from '@/api/core/monitoring/auto';
 | 
			
		||||
import { getFactoryPage } from '@/api/core/base/factory';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
		label: '订单名称/产线名称'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'code',
 | 
			
		||||
		label: '订单编号'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'customerName',
 | 
			
		||||
		label: '客户'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'planProductNum',
 | 
			
		||||
		label: '计划加工量'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'productNum',
 | 
			
		||||
    label: '实际加工量'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'processName',
 | 
			
		||||
    label: '产品工艺'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'planProductSize',
 | 
			
		||||
    label: '产品规格'
 | 
			
		||||
  },
 | 
			
		||||
	{
 | 
			
		||||
    prop: 'deliveryTime',
 | 
			
		||||
    label: '交货时间',
 | 
			
		||||
		filter: parseTime
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'startProduceTime',
 | 
			
		||||
    label: '开始时间',
 | 
			
		||||
    filter: parseTime
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'finishProduceTime',
 | 
			
		||||
    label: '结束时间',
 | 
			
		||||
    filter: parseTime
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'bindLineNum',
 | 
			
		||||
    label: '产线数量',
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
        getDataListURL: getOrderPage,
 | 
			
		||||
        deleteURL: deleteOrder,
 | 
			
		||||
				// exportURL: exportWorkshopSectionExcel,
 | 
			
		||||
			},
 | 
			
		||||
      tableProps,
 | 
			
		||||
      dialogVisibleDetail:false,
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
        this.$auth.hasPermi(`base:core-work-order:update`)
 | 
			
		||||
					? {
 | 
			
		||||
							type: 'edit',
 | 
			
		||||
							btnName: '编辑',
 | 
			
		||||
					  }
 | 
			
		||||
					: undefined,
 | 
			
		||||
        this.$auth.hasPermi(`base:core-work-order:delete`)
 | 
			
		||||
					? {
 | 
			
		||||
							type: 'delete',
 | 
			
		||||
							btnName: '删除',
 | 
			
		||||
					  }
 | 
			
		||||
					: undefined,
 | 
			
		||||
			].filter((v)=>v),
 | 
			
		||||
			listQuery: {
 | 
			
		||||
        lineId: null,
 | 
			
		||||
        startTime: undefined,
 | 
			
		||||
        endTime:undefined
 | 
			
		||||
			},
 | 
			
		||||
			tableData: [],
 | 
			
		||||
      formConfig: [
 | 
			
		||||
        {
 | 
			
		||||
          type: 'input',
 | 
			
		||||
          label: '订单名称',
 | 
			
		||||
          placeholder: '工段名称',
 | 
			
		||||
          param: 'name',
 | 
			
		||||
        },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'select',
 | 
			
		||||
				// 	label: '工厂',
 | 
			
		||||
				// 	selectOptions: [],
 | 
			
		||||
				// 	param: 'factoryId',
 | 
			
		||||
				// 	onchange: true,
 | 
			
		||||
				// },
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '产线',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
					// multiple: true,
 | 
			
		||||
				},
 | 
			
		||||
        {
 | 
			
		||||
          type: 'datePicker',
 | 
			
		||||
          label: '时间范围',
 | 
			
		||||
          dateType: 'daterange',
 | 
			
		||||
          format: 'yyyy-MM-dd',
 | 
			
		||||
          valueFormat: 'timestamp',
 | 
			
		||||
          rangeSeparator: '-',
 | 
			
		||||
          startPlaceholder: '开始时间',
 | 
			
		||||
          endPlaceholder: '结束时间',
 | 
			
		||||
          param: 'timeVal',
 | 
			
		||||
        },
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('base:core-work-order:query') ? 'button' : '',
 | 
			
		||||
					btnName: '搜索',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'separate',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'button',
 | 
			
		||||
				// 	btnName: '重置',
 | 
			
		||||
				// 	name: 'reset',
 | 
			
		||||
				// },
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
          type: this.$auth.hasPermi('base:core-work-order:create') ? 'button' : '',
 | 
			
		||||
					btnName: '新增',
 | 
			
		||||
					name: 'add',
 | 
			
		||||
					color: 'success',
 | 
			
		||||
					plain: true,
 | 
			
		||||
				},
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: this.$auth.hasPermi('base:workshop-section:create') ? 'separate' : '',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: this.$auth.hasPermi('base:workshop-section:export') ? 'button' : '',
 | 
			
		||||
				// 	btnName: '导出',
 | 
			
		||||
				// 	name: 'export',
 | 
			
		||||
				// 	color: 'warning',
 | 
			
		||||
				// },
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
    AddOrUpdate,
 | 
			
		||||
    detail
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getPdLineList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		getPdLineList() {
 | 
			
		||||
			getPdList().then((res) => {
 | 
			
		||||
				this.formConfig[1].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
			const params = {
 | 
			
		||||
				pageSize: 100,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
			};
 | 
			
		||||
			getFactoryPage(params).then((res) => {
 | 
			
		||||
				this.formConfig[0].selectOptions = res.data.list || [];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// handleSearchBarChanged({ param, value }) {
 | 
			
		||||
		// 	this.listQuery.lineId = null;
 | 
			
		||||
		// 	this.$refs.searchBarForm.formInline.lineId = undefined;
 | 
			
		||||
		// 	getPdList(value).then((res) => {
 | 
			
		||||
		// 		this.formConfig[1].selectOptions = res.data || [];
 | 
			
		||||
		// 	});
 | 
			
		||||
    // },
 | 
			
		||||
    getDataList() {
 | 
			
		||||
      this.dataListLoading = true;
 | 
			
		||||
      this.urlOptions.getDataListURL(this.listQuery).then(response => {
 | 
			
		||||
        this.tableData = response.data.list.map((ele) => {
 | 
			
		||||
          ele.children = ele.bindLines.map((item) => {
 | 
			
		||||
            item.name = item.lineName;
 | 
			
		||||
            item.level = 1
 | 
			
		||||
            return item
 | 
			
		||||
          })
 | 
			
		||||
          ele.level = 0
 | 
			
		||||
          return ele;
 | 
			
		||||
        })
 | 
			
		||||
        console.log(this.tableData);
 | 
			
		||||
        this.listQuery.total = response.data.total;
 | 
			
		||||
        this.dataListLoading = false;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    handleEdit(val) {
 | 
			
		||||
      console.log(val);
 | 
			
		||||
 | 
			
		||||
      // if (val.type === "edit") {
 | 
			
		||||
        this.addOrUpdateVisible = true;
 | 
			
		||||
        this.addOrEditTitle = "编辑";
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          this.$refs.addOrUpdate.init(val.id);
 | 
			
		||||
        });
 | 
			
		||||
      // }
 | 
			
		||||
    },
 | 
			
		||||
    handleDetail(val) {
 | 
			
		||||
      console.log(val);
 | 
			
		||||
 | 
			
		||||
      // if (val.type === "edit") {
 | 
			
		||||
      this.dialogVisibleDetail = true;
 | 
			
		||||
      // this.addOrEditTitle = "编辑";
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.detailDialog.init(val.id);
 | 
			
		||||
      });
 | 
			
		||||
      // }
 | 
			
		||||
    },
 | 
			
		||||
    addOrUpdateHandle(id) {
 | 
			
		||||
      this.addOrUpdateVisible = true;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.addOrUpdate.init(id);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      console.log(val);
 | 
			
		||||
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.factoryId = val.factoryId || undefined;
 | 
			
		||||
          this.listQuery.lineId = val.lineId || null;
 | 
			
		||||
          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined
 | 
			
		||||
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'reset':
 | 
			
		||||
					this.$refs.searchBarForm.resetForm();
 | 
			
		||||
					this.listQuery = {
 | 
			
		||||
						pageSize: 10,
 | 
			
		||||
						pageNo: 1,
 | 
			
		||||
						total: 1,
 | 
			
		||||
					};
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'add':
 | 
			
		||||
					this.addOrEditTitle = '新增';
 | 
			
		||||
					this.addOrUpdateVisible = true;
 | 
			
		||||
					this.addOrUpdateHandle();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
.delete-color {
 | 
			
		||||
  color: #ff5454;
 | 
			
		||||
}
 | 
			
		||||
.primary-color {
 | 
			
		||||
  color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,109 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2022-08-24 11:19:43
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-08-03 14:21:04
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    /* eslint-disable */
 | 
			
		||||
    return {
 | 
			
		||||
      urlOptions: {
 | 
			
		||||
        createURL: '',
 | 
			
		||||
        updateURL: '',
 | 
			
		||||
        infoURL: '',
 | 
			
		||||
        codeURL: '',
 | 
			
		||||
        getOption: false,
 | 
			
		||||
        isGetCode: false,
 | 
			
		||||
        optionArrUrl: [],
 | 
			
		||||
        optionArr: {}
 | 
			
		||||
      },
 | 
			
		||||
      dataForm:{},
 | 
			
		||||
      visible: false,
 | 
			
		||||
      setData: false
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
  },
 | 
			
		||||
  activated() {
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    init(id) {
 | 
			
		||||
      this.dataForm.id = id || "";
 | 
			
		||||
      this.visible = true;
 | 
			
		||||
      if (this.urlOptions.getOption) {
 | 
			
		||||
        this.getArr()
 | 
			
		||||
      }
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs["dataForm"].resetFields();
 | 
			
		||||
        this.dataForm.bindLineList = []
 | 
			
		||||
        if (this.dataForm.id) {
 | 
			
		||||
          this.urlOptions.infoURL(id).then(response => {
 | 
			
		||||
            this.dataForm = response.data;
 | 
			
		||||
            this.dataForm.bindLineList = response.data.bindLines.map((ele) => {
 | 
			
		||||
              ele.lineId = ele.lineId;
 | 
			
		||||
              ele.dateRange = [ele.startProduceTime, ele.finishProduceTime];
 | 
			
		||||
              return ele
 | 
			
		||||
            })
 | 
			
		||||
 | 
			
		||||
            if (this.setData) {
 | 
			
		||||
              this.setDataForm()
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
        } else {
 | 
			
		||||
          if (this.urlOptions.isGetCode) {
 | 
			
		||||
            this.getCode()
 | 
			
		||||
          }
 | 
			
		||||
				}
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
		getCode() {
 | 
			
		||||
			this.urlOptions.codeURL()
 | 
			
		||||
				.then(({ data: res }) => {
 | 
			
		||||
					this.dataForm.code = res;
 | 
			
		||||
				})
 | 
			
		||||
				.catch(() => {});
 | 
			
		||||
		},
 | 
			
		||||
    getArr() {
 | 
			
		||||
      const params = {
 | 
			
		||||
        pageSize: 100,
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
      }
 | 
			
		||||
      this.urlOptions.optionArrUrl.forEach((item, index) => {
 | 
			
		||||
        item(params).then(({ data: res }) => {
 | 
			
		||||
          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
 | 
			
		||||
        })
 | 
			
		||||
          .catch(() => {
 | 
			
		||||
          });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    // 表单提交
 | 
			
		||||
    dataFormSubmit() {
 | 
			
		||||
      this.$refs["dataForm"].validate((valid) => {
 | 
			
		||||
        if (!valid) {
 | 
			
		||||
          return false;
 | 
			
		||||
        }
 | 
			
		||||
        // 修改的提交
 | 
			
		||||
        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");
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    formClear() {
 | 
			
		||||
      this.$refs.dataForm.resetFields()
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,168 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2022-08-24 11:19:43
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-09-21 16:02:07
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    /* eslint-disable */
 | 
			
		||||
    return {
 | 
			
		||||
      urlOptions: {
 | 
			
		||||
        getDataListURL: '',
 | 
			
		||||
        deleteURL: '',
 | 
			
		||||
        statusUrl: '',
 | 
			
		||||
        exportURL: ''
 | 
			
		||||
      },
 | 
			
		||||
      tableData: [],
 | 
			
		||||
      listQuery: {
 | 
			
		||||
        pageSize: 10,
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        total: 1,
 | 
			
		||||
      },
 | 
			
		||||
      exportLoading: false,
 | 
			
		||||
      dataListLoading: false,
 | 
			
		||||
      addOrEditTitle: '',
 | 
			
		||||
      addOrUpdateVisible: false,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getDataList()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 获取数据列表
 | 
			
		||||
    getDataList() {
 | 
			
		||||
      this.dataListLoading = true;
 | 
			
		||||
      this.urlOptions.getDataListURL(this.listQuery).then(response => {
 | 
			
		||||
        this.tableData = response.data.list;
 | 
			
		||||
        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();
 | 
			
		||||
    },
 | 
			
		||||
    // 新增 / 修改
 | 
			
		||||
    addOrUpdateHandle(id) {
 | 
			
		||||
      this.addOrUpdateVisible = true;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.addOrUpdate.init(id);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    cancel(id) {
 | 
			
		||||
      this.$refs["popover-" + id].showPopper = false;
 | 
			
		||||
    },
 | 
			
		||||
    //改变状态
 | 
			
		||||
    changeStatus(id) {
 | 
			
		||||
      this.$http
 | 
			
		||||
        .post(this.urlOptions.statusUrl, { id })
 | 
			
		||||
        .then(({ data: res }) => {
 | 
			
		||||
          if (res.code !== 0) {
 | 
			
		||||
            return this.$message.warning(res.msg);
 | 
			
		||||
          }
 | 
			
		||||
          this.$refs["popover-" + id].showPopper = false;
 | 
			
		||||
          this.$message({
 | 
			
		||||
            message: this.$t("prompt.success"),
 | 
			
		||||
            type: "success",
 | 
			
		||||
            duration: 500,
 | 
			
		||||
            onClose: () => {
 | 
			
		||||
              this.getDataList();
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
        })
 | 
			
		||||
        .catch(() => { });
 | 
			
		||||
    },
 | 
			
		||||
    //tableBtn点击
 | 
			
		||||
    handleClick(val) {
 | 
			
		||||
      if (val.type === "edit") {
 | 
			
		||||
        this.addOrUpdateVisible = true;
 | 
			
		||||
        this.addOrEditTitle = "编辑";
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          this.$refs.addOrUpdate.init(val.data.id);
 | 
			
		||||
        });
 | 
			
		||||
      } else if (val.type === "delete") {
 | 
			
		||||
        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
 | 
			
		||||
      } else if (val.type === "change") {
 | 
			
		||||
        this.changeStatus(val.data.id)
 | 
			
		||||
      } else {
 | 
			
		||||
        this.otherMethods(val)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 删除
 | 
			
		||||
    deleteHandle(id, name, index) {
 | 
			
		||||
      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
 | 
			
		||||
        confirmButtonText: "确定",
 | 
			
		||||
        cancelButtonText: "取消",
 | 
			
		||||
        type: "warning",
 | 
			
		||||
      })
 | 
			
		||||
        .then(() => {
 | 
			
		||||
          this.urlOptions.deleteURL(id).then(({ data }) => {
 | 
			
		||||
            this.$message({
 | 
			
		||||
              message: "操作成功",
 | 
			
		||||
              type: "success",
 | 
			
		||||
              duration: 1500,
 | 
			
		||||
              onClose: () => {
 | 
			
		||||
                this.getDataList();
 | 
			
		||||
              },
 | 
			
		||||
            });
 | 
			
		||||
          });
 | 
			
		||||
        })
 | 
			
		||||
        .catch(() => { });
 | 
			
		||||
    },
 | 
			
		||||
    //search-bar点击
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      switch (val.btnName) {
 | 
			
		||||
        case "search":
 | 
			
		||||
          this.listQuery.xm1 = val.xm1;
 | 
			
		||||
          this.listQuery.xm2 = val.xm2;
 | 
			
		||||
          this.listQuery.pageNo = 1;
 | 
			
		||||
          this.getDataList();
 | 
			
		||||
          break;
 | 
			
		||||
        case "add":
 | 
			
		||||
          this.addOrEditTitle = '新增'
 | 
			
		||||
          this.addOrUpdateVisible = true;
 | 
			
		||||
          this.addOrUpdateHandle()
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          console.log(val)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    handleCancel() {
 | 
			
		||||
      this.$refs.addOrUpdate.formClear()
 | 
			
		||||
      this.addOrUpdateVisible = false
 | 
			
		||||
      this.addOrEditTitle = ''
 | 
			
		||||
    },
 | 
			
		||||
    handleConfirm() {
 | 
			
		||||
      this.$refs.addOrUpdate.dataFormSubmit()
 | 
			
		||||
    },
 | 
			
		||||
    successSubmit() {
 | 
			
		||||
      this.handleCancel()
 | 
			
		||||
      this.getDataList()
 | 
			
		||||
    },
 | 
			
		||||
    /** 导出按钮操作 */
 | 
			
		||||
    handleExport() {
 | 
			
		||||
      // 处理查询参数
 | 
			
		||||
      let params = { ...this.queryParams };
 | 
			
		||||
      params.pageNo = undefined;
 | 
			
		||||
      params.pageSize = undefined;
 | 
			
		||||
      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
 | 
			
		||||
        this.exportLoading = true;
 | 
			
		||||
        return this.urlOptions.exportURL(params);
 | 
			
		||||
      }).then(response => {
 | 
			
		||||
        this.$download.excel(response, '工厂.xls');
 | 
			
		||||
        this.exportLoading = false;
 | 
			
		||||
      }).catch(() => { });
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,73 +0,0 @@
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
 * @Date: 2020-12-29 16:49:28
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-09-12 11:13:34
 | 
			
		||||
 * @FilePath: \basic-admin\src\filters\basicData\index.js
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
const table = {
 | 
			
		||||
  lineStatus: {
 | 
			
		||||
    1: '生产中',
 | 
			
		||||
    2: '停止',
 | 
			
		||||
    3: '未知',
 | 
			
		||||
  },
 | 
			
		||||
  reportType: {
 | 
			
		||||
    1: '日',
 | 
			
		||||
    2: '周',
 | 
			
		||||
    3: '月'
 | 
			
		||||
  },
 | 
			
		||||
  pdType: {
 | 
			
		||||
    1: '原片',
 | 
			
		||||
    0: '深加工',
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 日期格式化
 | 
			
		||||
export function parseTime(time, pattern) {
 | 
			
		||||
  if (arguments.length === 0 || !time) {
 | 
			
		||||
    return null
 | 
			
		||||
  }
 | 
			
		||||
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
 | 
			
		||||
  let date
 | 
			
		||||
  if (typeof time === 'object') {
 | 
			
		||||
    date = time
 | 
			
		||||
  } else {
 | 
			
		||||
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
 | 
			
		||||
      time = parseInt(time)
 | 
			
		||||
    } else if (typeof time === 'string') {
 | 
			
		||||
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
 | 
			
		||||
    }
 | 
			
		||||
    if ((typeof time === 'number') && (time.toString().length === 10)) {
 | 
			
		||||
      time = time * 1000
 | 
			
		||||
    }
 | 
			
		||||
    date = new Date(time)
 | 
			
		||||
  }
 | 
			
		||||
  const formatObj = {
 | 
			
		||||
    y: date.getFullYear(),
 | 
			
		||||
    m: date.getMonth() + 1,
 | 
			
		||||
    d: date.getDate(),
 | 
			
		||||
    h: date.getHours(),
 | 
			
		||||
    i: date.getMinutes(),
 | 
			
		||||
    s: date.getSeconds(),
 | 
			
		||||
    a: date.getDay()
 | 
			
		||||
  }
 | 
			
		||||
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
 | 
			
		||||
    let value = formatObj[key]
 | 
			
		||||
    // Note: getDay() returns 0 on Sunday
 | 
			
		||||
    if (key === 'a') {
 | 
			
		||||
      return ['日', '一', '二', '三', '四', '五', '六'][value]
 | 
			
		||||
    }
 | 
			
		||||
    if (result.length > 0 && value < 10) {
 | 
			
		||||
      value = '0' + value
 | 
			
		||||
    }
 | 
			
		||||
    return value || 0
 | 
			
		||||
  })
 | 
			
		||||
  return time_str
 | 
			
		||||
}
 | 
			
		||||
export default function (dictTable) {
 | 
			
		||||
  return function (val) {
 | 
			
		||||
    return table?.[dictTable]?.[val]
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||