Compare commits
2 Commits
projects/q
...
projects/r
| Author | SHA1 | Date | |
|---|---|---|---|
| e6e8e51b59 | |||
|
1b56696da9 |
3
.env.dev
3
.env.dev
@@ -12,7 +12,8 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 智能监控分析系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://172.16.32.79:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
|
||||
VUE_APP_BASE_API = 'http://172.16.32.79:48082'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@@ -52,7 +52,6 @@
|
||||
"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",
|
||||
|
||||
Binary file not shown.
@@ -61,9 +61,9 @@ export function exportFactoryExcel(query) {
|
||||
// 获取产线设备状态
|
||||
export function getLineEqStatus(data) {
|
||||
return request({
|
||||
url: '/monitoring/equipment-monitor/getLineEqStatus',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
url: '/base/production-line/getLineEqStatus',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -44,16 +44,25 @@ export function getProductAuto(data) {
|
||||
// 班组自动报表分页
|
||||
export function getTeamReportPage(data) {
|
||||
return request({
|
||||
url: '/monitoring/team-auto-report/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
url: '/monitoring/group-off-record/page',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 班组自动报表分页详细
|
||||
export function getTeamReportPageDet(id) {
|
||||
return request({
|
||||
url: '/monitoring/team-auto-report/pageDet?id=' + id,
|
||||
url: '/monitoring/group-off-record/get?id=' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function exportGroupProductReportExcel(data) {
|
||||
return request({
|
||||
url: '/monitoring/group-off-record/export-det-excel',
|
||||
method: 'get',
|
||||
params: data,
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
|
||||
18
src/api/material/issue.js
Normal file
18
src/api/material/issue.js
Normal file
@@ -0,0 +1,18 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
45
src/api/order/index.js
Normal file
45
src/api/order/index.js
Normal file
@@ -0,0 +1,45 @@
|
||||
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'
|
||||
})
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组备份</title>
|
||||
<g id="秦皇岛/北方压延" 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>
|
||||
|
Before Width: | Height: | Size: 5.6 KiB |
@@ -1,18 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>切片</title>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,18 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -1,18 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>切片</title>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -1,11 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 595 B |
Binary file not shown.
|
Before Width: | Height: | Size: 550 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,30 +1,16 @@
|
||||
<!--
|
||||
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="currentMenu = m"
|
||||
<button v-for="m in menus" :key="m" @click="handleClick(m)"
|
||||
:data-text="m"
|
||||
:class="[m === currentMenu ? 'active' : '']"
|
||||
></button>
|
||||
></button>
|
||||
</div>
|
||||
<!-- 标签切换 -->
|
||||
<div v-else class="custom-tabs" style="height: 100%; width: 100%">
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
<slot :name="`tab${idx + 1}`"></slot>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -39,14 +25,17 @@ export default {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: (val) => {
|
||||
return val.length > 0;
|
||||
},
|
||||
validator: (val) => val.length > 0,
|
||||
},
|
||||
buttonMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 新增：支持外部传入选中值（v-model 绑定）
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -54,16 +43,34 @@ export default {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.currentMenu = this.menus[0];
|
||||
// 优先使用外部传入的 value，否则默认第一个
|
||||
this.currentMenu = this.value || this.menus[0];
|
||||
},
|
||||
watch: {
|
||||
// 监听外部 value 变化，同步到内部 currentMenu
|
||||
value(newVal) {
|
||||
this.currentMenu = newVal;
|
||||
},
|
||||
// 监听内部 currentMenu 变化，通知外部
|
||||
currentMenu(val) {
|
||||
this.$emit("change", 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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- 样式不变 -->
|
||||
<style scoped lang="scss">
|
||||
.button-nav {
|
||||
width: 100%;
|
||||
@@ -108,22 +115,24 @@ 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;
|
||||
|
||||
@@ -91,4 +91,4 @@ export default function (dictTable) {
|
||||
return function (val) {
|
||||
return table?.[dictTable]?.[val]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,6 @@ import {
|
||||
handleTree,
|
||||
addBeginAndEndTime,
|
||||
divide,
|
||||
formatThousands
|
||||
} from '@/utils/ruoyi';
|
||||
import Pagination from '@/components/Pagination';
|
||||
// 自定义表格工具扩展
|
||||
@@ -46,7 +45,6 @@ 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,15 +295,3 @@ 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')
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
<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>
|
||||
@@ -1,100 +0,0 @@
|
||||
<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>
|
||||
@@ -1,352 +0,0 @@
|
||||
<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>
|
||||
@@ -1,108 +0,0 @@
|
||||
<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>
|
||||
@@ -1,284 +0,0 @@
|
||||
<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.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>
|
||||
@@ -1,162 +0,0 @@
|
||||
<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>
|
||||
@@ -1,198 +0,0 @@
|
||||
<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>
|
||||
@@ -1,352 +0,0 @@
|
||||
<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,234 +1,100 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-10-11 09:32:04
|
||||
description: 设备看板
|
||||
-->
|
||||
|
||||
<template>
|
||||
<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 ref="dataBoard" class="data-board">
|
||||
<el-button type="text" @click="goback" class="go-back--btn">返回</el-button>
|
||||
</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: { DataBoardHeader,LeftTop,LeftBottom,CenterTop,CenterBottomL,CenterBottomR,RightTop,RightBottom },
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8,
|
||||
dataObj:{},
|
||||
sseReader: null, // 保存流读取器
|
||||
abortController: null, // 用于中止 fetch 请求
|
||||
retryCount: 0, // 当前重试次数
|
||||
isDestroyed: false // 标记组件是否已销毁
|
||||
appMain: null, // dom
|
||||
parentStyle: {
|
||||
margin: '8px 14px 0px 16px',
|
||||
minHeight: 'calc(100vh - 120px - 8px)',
|
||||
}, // object
|
||||
mainFooter: null, // dom
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
this.getData()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.closeSSE();
|
||||
},
|
||||
computed: {
|
||||
sidebarOpened() {
|
||||
return this.$store.state.app.sidebar.opened
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sidebarOpened(newVal, oldVal) {
|
||||
this.boxReset()
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// this.$nextTick(() => {
|
||||
// this.modify();
|
||||
// });
|
||||
// },
|
||||
// activated() {
|
||||
// this.modify();
|
||||
// },
|
||||
// deactivated() {
|
||||
// this.recover();
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// this.recover();
|
||||
// },
|
||||
methods: {
|
||||
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();
|
||||
|
||||
// 持续读取流数据
|
||||
while (true) {
|
||||
const { done, value } = await _this.sseReader.read();
|
||||
if (done) {
|
||||
console.log('SSE 连接正常关闭');
|
||||
_this.handleReconnect(); // 触发重连
|
||||
break;
|
||||
}
|
||||
// 处理 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();
|
||||
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
|
||||
},
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dataBoardBoxB {
|
||||
width: 100%;
|
||||
height: calc(100vh - 150px);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
.dataBoardBox {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
.data-board {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
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";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: -26px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,61 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="background: #f2f4f9; height: 40px; width: 100%">
|
||||
<ButtonNav :menus="['当前', '历史']" @change="currentMenu">
|
||||
<template v-slot:tab1>
|
||||
<div>当前</div>
|
||||
</template>
|
||||
<template v-slot:tab2>
|
||||
<div>历史</div>
|
||||
</template>
|
||||
</ButtonNav>
|
||||
</div>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
<div v-show="activeName === 'his'">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@select-changed="handleSearchBarChanged"
|
||||
@headBtnClick="buttonClick" />
|
||||
</div>
|
||||
<div v-show="activeName === 'now'"></div>
|
||||
<!-- 列表 -->
|
||||
<div v-if="activeName === 'his'">
|
||||
<base-table-s
|
||||
:page="1"
|
||||
:limit="100"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH / 2"></base-table-s>
|
||||
<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
|
||||
<barChart
|
||||
style="margin-top: 50px"
|
||||
ref="barChart"
|
||||
height="600px"
|
||||
:bar-data="tableData" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeName === 'now'">
|
||||
<span class="blue-block"></span>
|
||||
<span class="tip">当班数据</span>
|
||||
<base-table-s
|
||||
:page="1"
|
||||
:limit="100"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData2"
|
||||
:max-height="tableH / 2" />
|
||||
<span class="blue-block"></span>
|
||||
<span class="tip">当天数据</span>
|
||||
<base-table-s
|
||||
:page="1"
|
||||
:limit="100"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData3"
|
||||
:max-height="tableH / 2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="background: #f2f4f9; height: 40px; width: 100%">
|
||||
<ButtonNav :menus="['当前', '历史']" @change="currentMenu" v-model="activeName">
|
||||
<!-- <template v-slot:tab1>
|
||||
<div>当前</div>
|
||||
</template>
|
||||
<template v-slot:tab2>
|
||||
<div>历史</div>
|
||||
</template> -->
|
||||
</ButtonNav>
|
||||
</div>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
<div v-if="activeName === '历史' && routeType !== 'order'">
|
||||
<!-- 搜索工作栏 -->
|
||||
<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-if="activeName === '历史'">
|
||||
<base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData"
|
||||
:max-height="tableH / 2"></base-table-s>
|
||||
<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
|
||||
<barChart style="margin-top: 50px" ref="barChart" height="600px" :bar-data="tableData" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeName === '当前'">
|
||||
<span class="blue-block"></span>
|
||||
<span class="tip">当班数据</span>
|
||||
<base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData2"
|
||||
:max-height="tableH / 2" />
|
||||
<span class="blue-block"></span>
|
||||
<span class="tip">当天数据</span>
|
||||
<base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData3"
|
||||
:max-height="tableH / 2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -280,7 +266,10 @@ export default {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPdlAutoReportNewSearch,
|
||||
},
|
||||
},
|
||||
routeType: 'line',
|
||||
code: '',
|
||||
name:'',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -294,7 +283,8 @@ export default {
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'lineId',
|
||||
multiple: true,
|
||||
multiple: true,
|
||||
defaultSelect:[]
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
@@ -305,7 +295,8 @@ export default {
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
param: 'timeVal',
|
||||
defaultSelect:[],
|
||||
width: 350,
|
||||
},
|
||||
{
|
||||
@@ -318,8 +309,8 @@ export default {
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
type: 'button',
|
||||
type: this.$auth.hasPermi('|base:core-work-order:export') ? 'button' : '',
|
||||
// type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
@@ -328,7 +319,7 @@ export default {
|
||||
listQuery: {
|
||||
lineId: [],
|
||||
},
|
||||
activeName: 'now',
|
||||
activeName: '当前',
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableData2: [],
|
||||
@@ -340,10 +331,32 @@ export default {
|
||||
baseTableS,
|
||||
barChart,
|
||||
},
|
||||
created() {
|
||||
this.getPdLineList();
|
||||
},
|
||||
methods: {
|
||||
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 = '当前'; // 默认“当前”标签
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// ... 其他方法 ...
|
||||
},
|
||||
methods: {
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || [];
|
||||
@@ -363,7 +376,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 === 'his') {
|
||||
if (this.activeName === '历史') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@@ -375,13 +388,19 @@ export default {
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
currentMenu(val) {
|
||||
this.activeName = val === '历史' ? 'his' : 'now';
|
||||
if (this.activeName === 'his') {
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery.factoryId = undefined;
|
||||
this.listQuery.lineId = [];
|
||||
},
|
||||
currentMenu(val) {
|
||||
this.activeName = val; // 同步标签名到 activeName
|
||||
let actualName = val === '历史' ? 'his' : 'now'; // 转换为内部状态
|
||||
|
||||
// 后续逻辑不变（根据 activeName 加载对应数据）
|
||||
if (actualName === 'his') {
|
||||
// this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery.factoryId = undefined;
|
||||
if (!this.$route.query.lineId) {
|
||||
this.listQuery.lineId = [];
|
||||
|
||||
}
|
||||
// 获取当前时间
|
||||
const now = new Date();
|
||||
// 获取前一天的同一时间
|
||||
@@ -404,39 +423,98 @@ export default {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
if (this.listQuery.startTime) {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
this.tableData = response.data.map((item, index) => {
|
||||
item.originalLossNum = item.original?.lossNum;
|
||||
item.originalLossArea = item.original?.lossArea;
|
||||
item.edgeLossNum = item.edge?.lossNum;
|
||||
item.edgeLossArea = item.edge?.lossArea;
|
||||
item.drillLossNum = item.drill?.lossNum;
|
||||
item.drillLossArea = item.drill?.lossArea;
|
||||
item.coatingLossNum = item.coating?.lossNum;
|
||||
item.coatingLossArea = item.coating?.lossArea;
|
||||
item.silkLossNum = item.silk?.lossNum;
|
||||
item.silkLossArea = item.silk?.lossArea;
|
||||
item.temperingLossNum = item.tempering?.lossNum;
|
||||
item.temperingLossArea = item.tempering?.lossArea;
|
||||
item.packingLossNum = item.packing?.lossNum;
|
||||
item.packingLossArea = item.packing?.lossArea;
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
if(this.tableData.length>0){
|
||||
this.$refs.barChart.initChart();
|
||||
}
|
||||
});
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围');
|
||||
}
|
||||
},
|
||||
|
||||
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.tableData = response.data.map((item, index) => {
|
||||
item.originalLossNum = item.original?.lossNum;
|
||||
item.originalLossArea = item.original?.lossArea;
|
||||
item.edgeLossNum = item.edge?.lossNum;
|
||||
item.edgeLossArea = item.edge?.lossArea;
|
||||
item.drillLossNum = item.drill?.lossNum;
|
||||
item.drillLossArea = item.drill?.lossArea;
|
||||
item.coatingLossNum = item.coating?.lossNum;
|
||||
item.coatingLossArea = item.coating?.lossArea;
|
||||
item.silkLossNum = item.silk?.lossNum;
|
||||
item.silkLossArea = item.silk?.lossArea;
|
||||
item.temperingLossNum = item.tempering?.lossNum;
|
||||
item.temperingLossArea = item.tempering?.lossArea;
|
||||
item.packingLossNum = item.packing?.lossNum;
|
||||
item.packingLossArea = item.packing?.lossArea;
|
||||
return item;
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.tableData.length > 0) {
|
||||
this.$refs.barChart.initChart();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('接口请求失败:', error);
|
||||
this.$message.error('数据加载失败，请重试');
|
||||
})
|
||||
.finally(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围');
|
||||
}
|
||||
},
|
||||
// 获取数据2列表
|
||||
getDataList2() {
|
||||
getPdlAutoReportNewSearchNow().then((response) => {
|
||||
|
||||
@@ -6,208 +6,224 @@
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<el-table
|
||||
id="detail"
|
||||
:data="tableData"
|
||||
:header-cell-style="{
|
||||
<div>
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<el-table id="detail" :data="tableData" :header-cell-style="{
|
||||
background: '#F2F4F9',
|
||||
color: '#606266',
|
||||
}"
|
||||
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="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="inputArea" label="投入面积/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
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="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
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="lossNum" label="不良数量/片" />
|
||||
<el-table-column prop="lossArea" label="不良面积/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lossRatio" label="不良率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="outputRatio" label="投入产出率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.outputRatio != null
|
||||
? scope.row.outputRatio.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="processingRatio" label="加工成品率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.processingRatio != null
|
||||
? scope.row.processingRatio.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lossD" label="不良详情" align="center">
|
||||
<el-table-column prop="original" label="原片" align="center">
|
||||
<el-table-column prop="originalLossNum" label="原片不良/片" />
|
||||
<el-table-column prop="originalLossArea" label="原片不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.originalLossArea != null
|
||||
? scope.row.originalLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="edge" label="磨边" align="center">
|
||||
<el-table-column prop="edgeLossNum" label="磨边不良/片" />
|
||||
<el-table-column prop="edgeLossArea" label="磨边不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.edgeLossArea != null
|
||||
? scope.row.edgeLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="drill" label="打孔" align="center">
|
||||
<el-table-column prop="drillLossNum" label="打孔不良/片" />
|
||||
<el-table-column prop="drillLossArea" label="打孔不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.drillLossArea != null
|
||||
? scope.row.drillLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coating" label="镀膜" align="center">
|
||||
<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
|
||||
<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.coatingLossArea != null
|
||||
? scope.row.coatingLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="silk" label="丝印" align="center">
|
||||
<el-table-column prop="silkLossNum" label="丝印不良/片" />
|
||||
<el-table-column prop="silkLossArea" label="丝印不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.silkLossArea != null
|
||||
? scope.row.silkLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tempering" label="钢化" align="center">
|
||||
<el-table-column prop="temperingLossNum" label="钢化不良/片" />
|
||||
<el-table-column prop="temperingLossArea" label="钢化不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.temperingLossArea != null
|
||||
? scope.row.temperingLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</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>
|
||||
</div>
|
||||
}" border 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="数据上报时间">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.reportType === 0
|
||||
? parseTime(scope.row.edgeTime)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="outputN" label="打孔/丝印" align="center">
|
||||
<el-table-column prop="drillCoating" label="投入数量">
|
||||
<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)
|
||||
: '-'
|
||||
}}
|
||||
</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="数据上报时间">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.reportType === 0
|
||||
? parseTime(scope.row.silkTime)
|
||||
: '-'
|
||||
}}
|
||||
</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="不良率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="outputRatio" label="投入产出率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.outputRatio != null
|
||||
? scope.row.outputRatio.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="processingRatio" label="加工成品率/%">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.processingRatio != null
|
||||
? scope.row.processingRatio.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lossD" label="不良详情" align="center">
|
||||
<el-table-column prop="original" label="原片" align="center">
|
||||
<el-table-column prop="originalLossNum" label="原片不良/片" />
|
||||
<el-table-column prop="originalLossArea" label="原片不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.originalLossArea != null
|
||||
? scope.row.originalLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="edge" label="磨边" align="center">
|
||||
<el-table-column prop="edgeLossNum" label="磨边不良/片" />
|
||||
<el-table-column prop="edgeLossArea" label="磨边不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.edgeLossArea != null
|
||||
? scope.row.edgeLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="drill" label="打孔" align="center">
|
||||
<el-table-column prop="drillLossNum" label="打孔不良/片" />
|
||||
<el-table-column prop="drillLossArea" label="打孔不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.drillLossArea != null
|
||||
? scope.row.drillLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coating" label="镀膜" align="center">
|
||||
<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
|
||||
<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.coatingLossArea != null
|
||||
? scope.row.coatingLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="silk" label="丝印" align="center">
|
||||
<el-table-column prop="silkLossNum" label="丝印不良/片" />
|
||||
<el-table-column prop="silkLossArea" label="丝印不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.silkLossArea != null
|
||||
? scope.row.silkLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tempering" label="钢化" align="center">
|
||||
<el-table-column prop="temperingLossNum" label="钢化不良/片" />
|
||||
<el-table-column prop="temperingLossArea" label="钢化不良/m²">
|
||||
<template v-slot="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.temperingLossArea != null
|
||||
? scope.row.temperingLossArea.toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</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>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
|
||||
import { getTeamReportPageDet, exportGroupProductReportExcel } from '@/api/core/monitoring/auto';
|
||||
import * as XLSX from 'xlsx';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
@@ -215,7 +231,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData: [],
|
||||
id:null,
|
||||
dataListLoading: false,
|
||||
formConfig: [
|
||||
{
|
||||
@@ -233,7 +250,8 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
init(id) {
|
||||
init(id) {
|
||||
this.id = id
|
||||
this.dataListLoading = true;
|
||||
getTeamReportPageDet(id).then((response) => {
|
||||
this.tableData = response.data?.map((item, index) => {
|
||||
@@ -259,17 +277,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) {
|
||||
@@ -280,27 +298,33 @@ export default {
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
handleExport() {
|
||||
let tables = document.querySelector('#detail').cloneNode(true);
|
||||
let exportTable = XLSX.utils.table_to_book(tables);
|
||||
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);
|
||||
|
||||
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: 'reportName',
|
||||
prop: 'reportDate',
|
||||
label: '日期',
|
||||
width: 180,
|
||||
fixed: true
|
||||
@@ -89,211 +89,241 @@ 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: 'inputNum',
|
||||
label: '投入数量/片',
|
||||
prop: 'downNum',
|
||||
label: '成品数量',
|
||||
width:100
|
||||
},
|
||||
{
|
||||
prop: 'inputArea',
|
||||
label: '投入面积/m²',
|
||||
prop: 'scrapNum',
|
||||
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: '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
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
];
|
||||
|
||||
export default {
|
||||
@@ -309,17 +339,22 @@ export default {
|
||||
listQuery: {
|
||||
reportType: 1,
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
pageNo: 1,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
total: 1,
|
||||
},
|
||||
fileName: '',
|
||||
dataListLoading: false,
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'eq',
|
||||
btnName: '详情',
|
||||
},
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi(`monitoring:group-off:update`)
|
||||
? {
|
||||
type: 'eq',
|
||||
btnName: '详情',
|
||||
}
|
||||
: undefined,
|
||||
|
||||
].filter((v) => v),
|
||||
showData: [],
|
||||
tableData: [],
|
||||
@@ -339,15 +374,19 @@ export default {
|
||||
{
|
||||
type: 'select',
|
||||
label: '报表类型',
|
||||
selectOptions: [
|
||||
selectOptions: [
|
||||
{
|
||||
id: 0,
|
||||
name: '班',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '日',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '周',
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// name: '周',
|
||||
// },
|
||||
{
|
||||
id: 3,
|
||||
name: '月',
|
||||
@@ -364,15 +403,16 @@ export default {
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'timestamp',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
type: this.$auth.hasPermi('monitoring:group-off:query') ? 'button' : '',
|
||||
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
@@ -381,8 +421,8 @@ export default {
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
type: 'button',
|
||||
type: this.$auth.hasPermi('monitoring:group-off:export') ? 'button' : '',
|
||||
// type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
@@ -402,7 +442,9 @@ export default {
|
||||
// 设置为23:59:59
|
||||
const end = new Date(yesterday.getTime());
|
||||
end.setHours(23, 59, 59, 59);
|
||||
this.listQuery.reportStartTime = [yesterday.getTime(),end.getTime()];
|
||||
this.listQuery.startTime = yesterday.getTime(), [end.getTime()];
|
||||
this.listQuery.endTime = end.getTime()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm.formInline.timeVal = [yesterday.getTime(),end.getTime()];
|
||||
});
|
||||
@@ -461,9 +503,12 @@ export default {
|
||||
this.listQuery.factoryId = val.factoryId || undefined;
|
||||
this.listQuery.teamId = val.teamId || undefined;
|
||||
this.listQuery.reportType = val.reportType || undefined;
|
||||
this.listQuery.reportStartTime = val.timeVal
|
||||
? val.timeVal
|
||||
: undefined;
|
||||
this.listQuery.startTime = val.timeVal
|
||||
? val.timeVal[0]
|
||||
: undefined;
|
||||
this.listQuery.endTime = val.timeVal
|
||||
? val.timeVal[1]
|
||||
: undefined;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@@ -475,8 +520,10 @@ export default {
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
const arr = ['日', '周', '月', '年'];
|
||||
this.dataListLoading = true;
|
||||
console.log(this.listQuery);
|
||||
|
||||
const arr = ['班', '日', '', '月', '年']; // 索引0对应班，1对应日，3对应月，4对应年，索引2留空
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
if (!response.data.list) {
|
||||
this.showData = [];
|
||||
@@ -484,7 +531,8 @@ export default {
|
||||
return;
|
||||
}
|
||||
this.tableData = response.data?.list.map((item, index) => {
|
||||
item.reportType = arr[item.reportType - 1];
|
||||
item.reportType = arr[item.reportType] || item.reportType;
|
||||
item.drillOrCoating = item.drillNum + "/" + item.coatingNum
|
||||
item.originalLossNum = item.original?.lossNum;
|
||||
item.originalLossArea = item.original?.lossArea;
|
||||
item.edgeLossNum = item.edge?.lossNum;
|
||||
@@ -508,7 +556,7 @@ export default {
|
||||
},
|
||||
handleClick(val) {
|
||||
this.addOrUpdateVisible = true;
|
||||
const time = val.data.reportName?val.data.reportName:'- '
|
||||
const time = val.data.timeVal ? parseTime(val.data.timeVal[0]) + '-' + parseTime(val.data.timeVal[1]) : '- '
|
||||
const teamName = val.data.teamName?val.data.teamName:'- '
|
||||
const teamLeader = val.data.teamLeader?val.data.teamLeader:'- '
|
||||
this.addOrEditTitle =
|
||||
|
||||
123
src/views/materialReceiptIssue/base/add-or-updata.vue
Normal file
123
src/views/materialReceiptIssue/base/add-or-updata.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<!--
|
||||
* @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>
|
||||
243
src/views/materialReceiptIssue/base/index.vue
Normal file
243
src/views/materialReceiptIssue/base/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<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>
|
||||
100
src/views/materialReceiptIssue/mixins/basic-add.js
Normal file
100
src/views/materialReceiptIssue/mixins/basic-add.js
Normal file
@@ -0,0 +1,100 @@
|
||||
/*
|
||||
* @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()
|
||||
}
|
||||
}
|
||||
}
|
||||
168
src/views/materialReceiptIssue/mixins/basic-page.js
Normal file
168
src/views/materialReceiptIssue/mixins/basic-page.js
Normal file
@@ -0,0 +1,168 @@
|
||||
/*
|
||||
* @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(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
73
src/views/materialReceiptIssue/mixins/code-filter.js
Normal file
73
src/views/materialReceiptIssue/mixins/code-filter.js
Normal file
@@ -0,0 +1,73 @@
|
||||
|
||||
/*
|
||||
* @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]
|
||||
}
|
||||
}
|
||||
@@ -1,337 +0,0 @@
|
||||
<!--
|
||||
* @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) => {
|
||||
// Process original item
|
||||
const num = [
|
||||
'',
|
||||
'1672847052717821953',
|
||||
'1672847052717821954',
|
||||
'1686260211054157825',
|
||||
'1701892552632770122',
|
||||
'1714562503683465331',
|
||||
].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>
|
||||
File diff suppressed because it is too large
Load Diff
172
src/views/order/base/order/add-or-updata.vue
Normal file
172
src/views/order/base/order/add-or-updata.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<!--
|
||||
* @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>
|
||||
358
src/views/order/base/order/detail.vue
Normal file
358
src/views/order/base/order/detail.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<!--
|
||||
* @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>
|
||||
362
src/views/order/base/order/index.vue
Normal file
362
src/views/order/base/order/index.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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>
|
||||
109
src/views/order/mixins/basic-add.js
Normal file
109
src/views/order/mixins/basic-add.js
Normal file
@@ -0,0 +1,109 @@
|
||||
/*
|
||||
* @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()
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
168
src/views/order/mixins/basic-page.js
Normal file
168
src/views/order/mixins/basic-page.js
Normal file
@@ -0,0 +1,168 @@
|
||||
/*
|
||||
* @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(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
73
src/views/order/mixins/code-filter.js
Normal file
73
src/views/order/mixins/code-filter.js
Normal file
@@ -0,0 +1,73 @@
|
||||
|
||||
/*
|
||||
* @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]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user