Compare commits
183 Commits
dad71db912
...
projects/m
| Author | SHA1 | Date | |
|---|---|---|---|
| ec0c09a674 | |||
|
|
90e9b179eb | ||
|
|
8e2b332c7b | ||
| f37a12d2e1 | |||
| cb19872012 | |||
|
|
8ba79185d4 | ||
|
|
104cda5a41 | ||
|
|
151c5708c4 | ||
| 837735b7e8 | |||
|
|
e00a08385f | ||
|
|
a8c3d2c585 | ||
| eb097e77bd | |||
|
|
30eecb8bd1 | ||
|
|
f4a6229170 | ||
| ab593bff20 | |||
| 4b01dd3ec3 | |||
| ed3ea7dde8 | |||
| 1d9e272f99 | |||
|
|
43c9153777 | ||
|
|
c6d504583b | ||
|
|
22f3c87f02 | ||
|
|
1f54c9179d | ||
| f7247f5161 | |||
|
|
c8856f34b5 | ||
|
|
42c42abc08 | ||
| 0fffed9b0e | |||
|
|
d251daa3f5 | ||
|
|
ed5120ca97 | ||
|
|
becf34d089 | ||
| f0d64de77b | |||
| 56819176b3 | |||
| d302179f6f | |||
| 8c117fae8e | |||
|
|
b6cf7b2ddc | ||
|
|
2f98b42bd2 | ||
| fb8ae9226a | |||
| 3d3763c4ef | |||
| ea675b9dea | |||
| bda065e4be | |||
|
|
5ea4c219ed | ||
|
|
16186667da | ||
|
|
c7cd6e7b1e | ||
|
|
29c3a9fb72 | ||
|
|
1e1313d090 | ||
| d0eb1d84c8 | |||
|
|
445d8f4818 | ||
|
|
46ce982cfc | ||
| 391e06a382 | |||
| 72e1b4e8f9 | |||
| b41ba04cb4 | |||
|
|
4482ce0433 | ||
|
|
ecf6745c8a | ||
| c9128ce946 | |||
| ba08175de8 | |||
|
|
22f8322baf | ||
|
|
6f8abc9758 | ||
| 59d53b60c7 | |||
| d448280782 | |||
| 0337b54202 | |||
|
|
9dec81e0b2 | ||
|
|
64de2c50b6 | ||
|
|
bd0f9e24fd | ||
|
|
f3043ee11f | ||
| 5584a47575 | |||
| b0078cb099 | |||
| e5acd497b5 | |||
| 6b452dce36 | |||
| aacf87f6d3 | |||
|
|
bfa17e422d | ||
|
|
e25f872589 | ||
| 83b834d2fc | |||
| 1b2c16fcdb | |||
| 475ec35ec5 | |||
| 1328da9616 | |||
| 92b9ec7da7 | |||
| c1af47db81 | |||
| 15afbcd612 | |||
|
|
dabbc6b63a | ||
|
|
cfab3353d3 | ||
|
|
2298fc56b6 | ||
| bb77d0f8c6 | |||
|
|
e8938a62eb | ||
|
|
2a599d96b3 | ||
|
|
6050eb4df5 | ||
| 02c3b3db0d | |||
| 3308fcbef9 | |||
| cb7135bad5 | |||
| 4a56f92961 | |||
|
|
8f11c2f47c | ||
|
|
b41dc9593c | ||
| 862fe20760 | |||
| 1ed409a98e | |||
| 68e738cf12 | |||
|
|
4866198a98 | ||
|
|
49df8a72bd | ||
|
|
087af452de | ||
|
|
63a753d7d6 | ||
| b1cdf083dd | |||
| 673ddcb996 | |||
| a9e60dbe82 | |||
|
|
92d197a513 | ||
|
|
e7f440a142 | ||
| 5d3622bf62 | |||
| 5ccb9297e1 | |||
| ce528f18b6 | |||
|
|
024060182e | ||
|
|
4f111a95d6 | ||
| 8fc6b73179 | |||
| 7f504e5cdd | |||
| 7c5d8bde0b | |||
|
|
0b1761e83c | ||
|
|
cafa156d72 | ||
| ed46ed7d09 | |||
|
|
f89c6dfe14 | ||
|
|
a3b2eae33f | ||
| e70ff40554 | |||
| d3d93acd0f | |||
| 93236f9828 | |||
|
|
fef8824844 | ||
| a4fceeb981 | |||
| 84468cc883 | |||
| ea04d55fc1 | |||
| ef1078360a | |||
| 60f6c3a8fe | |||
| a4b340ac5d | |||
|
|
2592551e66 | ||
|
|
1fde96e677 | ||
| 0b16e1fe0d | |||
| abcec3bcdc | |||
| bdd14eec70 | |||
| 44e7e219a4 | |||
|
|
ec51beb8ea | ||
|
|
433618e71d | ||
| 812b72f10d | |||
|
|
05f10ab51d | ||
|
|
e7828fd277 | ||
| 58457487d1 | |||
|
|
6c54c223c5 | ||
|
|
b2cc509f8e | ||
| b6236e89b1 | |||
| cbc7cbc574 | |||
| b5b952e1cc | |||
| 33ed9f15fa | |||
| c85c6e4323 | |||
| 30d22b34e1 | |||
| 3d3fa2ccee | |||
| f960ece594 | |||
| 949675b3a2 | |||
| f52815abe6 | |||
|
|
ac4cea0c7e | ||
|
|
93fea84c79 | ||
| a06682de3f | |||
| e1773dae03 | |||
| f6d866907c | |||
| 7fe8d7e72c | |||
| 1e4a33a703 | |||
| d1ad913bab | |||
|
|
38edf00925 | ||
|
|
bf231f7157 | ||
| 04e2471a54 | |||
|
|
9e2ce5f636 | ||
|
|
8a54c046d9 | ||
| 3fa702cc12 | |||
| 8ebff703ee | |||
|
|
02e267e647 | ||
|
|
a6ffba4cf8 | ||
| 3de4d5c5f2 | |||
| c6c2d1c3b1 | |||
|
|
1bbd749094 | ||
|
|
073b4b8e20 | ||
| 3ec82a6a41 | |||
| 7c83268e0c | |||
| 49cb1e6877 | |||
|
|
481dde003a | ||
|
|
43e54e8ee7 | ||
| 28dbe075a4 | |||
|
|
4571786780 | ||
|
|
21cef13168 | ||
| 5f5e0ffc69 | |||
| 4d0841bd32 | |||
| b6d3b17300 | |||
|
|
34aeb029b5 | ||
|
|
caf614ca35 |
32
.env.dev
32
.env.dev
@@ -1,8 +1,8 @@
|
|||||||
###
|
###
|
||||||
# @Author: Do not edit
|
# @Author: zhp
|
||||||
# @Date: 2023-08-29 09:40:39
|
# @Date: 2024-04-12 14:30:48
|
||||||
# @LastEditTime: 2024-04-01 08:31:57
|
# @LastEditTime: 2024-04-23 17:25:25
|
||||||
# @LastEditors: zhp
|
# @LastEditors: DY
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
@@ -12,24 +12,18 @@ ENV = 'development'
|
|||||||
VUE_APP_TITLE = MES系统
|
VUE_APP_TITLE = MES系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
|
# VUE_APP_BASE_API = 'http://192.168.4.176:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080'
|
# 积木报表指向地址
|
||||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
VUE_APP_JIMU_API = 'http://192.168.1.101:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
# socket地址(现场)
|
||||||
VUE_APP_BASE_API = 'http://192.168.4.173:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
|
|
||||||
# socket地址
|
|
||||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||||
|
# socket地址(公司线上)
|
||||||
|
# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||||
|
# socket dcs地址(只有现场)
|
||||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||||
|
|
||||||
# 积木报表指向地址
|
|
||||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|||||||
@@ -1,11 +1,4 @@
|
|||||||
###
|
# 生产环境配置(许昌现场)
|
||||||
# @Author: zhp
|
|
||||||
# @Date: 2023-11-07 19:11:40
|
|
||||||
# @LastEditTime: 2023-11-16 16:40:59
|
|
||||||
# @LastEditors: zhp
|
|
||||||
# @Description:
|
|
||||||
###
|
|
||||||
# 生产环境配置
|
|
||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# 生产环境配置
|
# 公司线上环境(33服务器)
|
||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
@@ -7,15 +7,12 @@ VUE_APP_TITLE = MES系统
|
|||||||
# 芋道管理系统/生产环境
|
# 芋道管理系统/生产环境
|
||||||
VUE_APP_BASE_API = '/prod-api'
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
# dcs地址
|
|
||||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
|
||||||
# socket地址
|
|
||||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
|
||||||
|
|
||||||
# 积木报表指向地址
|
# 积木报表指向地址
|
||||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||||
# socket地址
|
# socket地址
|
||||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||||
|
# dcs地址(只有现场的)
|
||||||
|
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||||
|
|
||||||
|
|
||||||
# 根据服务器或域名修改
|
# 根据服务器或域名修改
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-10-21 11:50:46
|
* @Date: 2023-10-21 11:50:46
|
||||||
* @LastEditTime: 2023-10-30 14:37:28
|
* @LastEditTime: 2024-04-19 17:13:24
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@@ -65,4 +65,13 @@ export function getCoreDepartmentList(query) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 设备获得所有列表
|
||||||
|
export function getDepartmentList(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/dept/list-all-simple',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -53,4 +53,28 @@ export function energyQuantityManualExport(data) {
|
|||||||
data: data,
|
data: data,
|
||||||
responseType: 'blob'
|
responseType: 'blob'
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
// 获得能源表名配置分页
|
||||||
|
export function energyTablePage(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/energy-table/page',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获得能源表名配置
|
||||||
|
export function energyTableGet(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/energy-table/get',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 更新能源表名配置
|
||||||
|
export function energyTableUpdate(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/energy-table/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
}
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-06 15:38:12
|
* @Date: 2023-11-06 15:38:12
|
||||||
* @LastEditTime: 2023-12-15 15:29:16
|
* @LastEditTime: 2024-04-11 14:57:02
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@@ -94,7 +94,7 @@ export function getWorkerList(query) {
|
|||||||
|
|
||||||
export function getMaterialCheckList(query) {
|
export function getMaterialCheckList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/core-hot-material-check/listByMaterial',
|
url: 'base/quality-hot-material-det/filterList',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
@@ -102,7 +102,7 @@ export function getMaterialCheckList(query) {
|
|||||||
|
|
||||||
export function createQualityHotMaterialDet(query){
|
export function createQualityHotMaterialDet(query){
|
||||||
return request({
|
return request({
|
||||||
url: '/base/quality-hot-material-det/create',
|
url: 'base/quality-hot-material-det/createBatch',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: query
|
data: query
|
||||||
})
|
})
|
||||||
@@ -110,7 +110,7 @@ export function createQualityHotMaterialDet(query){
|
|||||||
|
|
||||||
export function updateQualityHotMaterialDet(query){
|
export function updateQualityHotMaterialDet(query){
|
||||||
return request({
|
return request({
|
||||||
url: '/base/quality-hot-material-det/listbyfilter',
|
url: 'base/quality-hot-material-det/updateBatch',
|
||||||
method: 'put',
|
method: 'put',
|
||||||
data: query
|
data: query
|
||||||
})
|
})
|
||||||
@@ -118,7 +118,7 @@ export function updateQualityHotMaterialDet(query){
|
|||||||
|
|
||||||
export function getQualityHotMaterialDetList(query){
|
export function getQualityHotMaterialDetList(query){
|
||||||
return request({
|
return request({
|
||||||
url: '/base/quality-hot-material-det/listbyfilter',
|
url: '/base/quality-hot-material-det/filterList',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-07 15:02:37
|
* @Date: 2023-11-07 15:02:37
|
||||||
* @LastEditTime: 2023-11-07 18:32:07
|
* @LastEditTime: 2024-04-09 15:14:42
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-07 14:10:18
|
* @Date: 2023-11-07 14:10:18
|
||||||
* @LastEditTime: 2023-11-16 17:49:52
|
* @LastEditTime: 2024-04-11 16:16:05
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@@ -18,14 +18,14 @@ export function getStatisticalDataPage(query) {
|
|||||||
|
|
||||||
export function getWorkOrderList(query) {
|
export function getWorkOrderList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/core-work-order/listbyfilter',
|
url: 'base/core-work-order/listbyfilter',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query,
|
params: query,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
export function getProductList(query) {
|
export function getProductList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/core-product/listAll',
|
url: 'base/core-product/listAll',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query,
|
params: query,
|
||||||
})
|
})
|
||||||
|
|||||||
45
src/api/report/customizedReports.js
Normal file
45
src/api/report/customizedReports.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
// 原片工段数据
|
||||||
|
export function originalSection(data) {
|
||||||
|
return request({
|
||||||
|
url: '/extend/customized-reports/originalSection',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 原片产线数据
|
||||||
|
export function getOriginalLine(query) {
|
||||||
|
return request({
|
||||||
|
url: '/extend/customized-reports/getOriginalLine',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 深加工产线数据
|
||||||
|
export function getProcessingLine(query) {
|
||||||
|
return request({
|
||||||
|
url: '/extend/customized-reports/getProcessingLine',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 深加工工段数据
|
||||||
|
export function processing(data) {
|
||||||
|
return request({
|
||||||
|
url: '/extend/customized-reports/processing',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// isra数据记录
|
||||||
|
export function israData(data) {
|
||||||
|
return request({
|
||||||
|
url: '/extend/customized-reports/isra',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
96
src/api/report/qcReport.js
Normal file
96
src/api/report/qcReport.js
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-04-18 09:27:54
|
||||||
|
* @LastEditTime: 2024-04-23 15:16:12
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 更新质量检测类型基础
|
||||||
|
export function getOriginalData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/original',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function getIngredientData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/materialCost',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCuttingtData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/cutting',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAutoDailyData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'base/report-auto-daily/listAll',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getQualityRecordReport(data) {
|
||||||
|
return request({
|
||||||
|
url: 'base/quality-inspection-record/qualityRecordReport',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProductChildData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'base/report-auto-ydaily-det/list',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateAutoDailyData(data) {
|
||||||
|
return request({
|
||||||
|
url: 'base/report-auto-daily/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCWSectionList(query) {
|
||||||
|
return request({
|
||||||
|
url: 'base/core-production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCuttingReportDataList(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/cuttingReport',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProcessingLineDataList(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/getProcessingLine',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getOriginalLineDataList(data) {
|
||||||
|
return request({
|
||||||
|
url: 'extend/customized-reports/getOriginalLine',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
138
src/components/ButtonNav/index.vue
Normal file
138
src/components/ButtonNav/index.vue
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<!--
|
||||||
|
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"
|
||||||
|
:data-text="m"
|
||||||
|
:class="[m === currentMenu ? 'active' : '']"></button>
|
||||||
|
</div>
|
||||||
|
<!-- 标签切换 -->
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="custom-tabs"
|
||||||
|
style="height: 100%; width: 100%">
|
||||||
|
<el-tabs
|
||||||
|
class="tag-nav"
|
||||||
|
v-model="currentMenu"
|
||||||
|
style="height: 100%">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(m, idx) in menus"
|
||||||
|
:key="m"
|
||||||
|
:label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
|
||||||
|
:name="m">
|
||||||
|
<slot :name="`tab${idx + 1}`"></slot>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ButtonNav',
|
||||||
|
props: {
|
||||||
|
menus: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => [],
|
||||||
|
validator: (val) => {
|
||||||
|
return val.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
buttonMode: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentMenu: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.currentMenu = this.menus[0];
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentMenu(val) {
|
||||||
|
this.$emit('change', val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.button-nav {
|
||||||
|
width: 100%;
|
||||||
|
// padding: 12px 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
color: #888;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: padding-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 50%;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #111;
|
||||||
|
border-bottom: 4px solid #0b58ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-tabs >>> .el-tabs__header {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
/* transform: translateY(-12px); */
|
||||||
|
}
|
||||||
|
.custom-tabs >>> .el-tabs__item {
|
||||||
|
padding-left: 0px !important;
|
||||||
|
padding-right: 0px !important;
|
||||||
|
line-height: 36px !important;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tabs >>> .el-tabs__content {
|
||||||
|
height: calc(100% - 42px);
|
||||||
|
}
|
||||||
|
.custom-tabs >>> .el-tab-pane {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
border: 10px solid #f002;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -5,6 +5,7 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
|
||||||
window.addEventListener('resize', this._setTableHeight);
|
window.addEventListener('resize', this._setTableHeight);
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
@@ -12,7 +13,8 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
_setTableHeight() {
|
_setTableHeight() {
|
||||||
this.tableH = this.tableHeight(260);
|
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
|
||||||
|
// this.tableH = this.tableHeight(260);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ const actions = {
|
|||||||
}
|
}
|
||||||
// 处理 dictValue 层级
|
// 处理 dictValue 层级
|
||||||
dictDataMap[dictData.dictType].push({
|
dictDataMap[dictData.dictType].push({
|
||||||
|
id: dictData.id,
|
||||||
value: dictData.value,
|
value: dictData.value,
|
||||||
label: dictData.label,
|
label: dictData.label,
|
||||||
colorType: dictData.colorType,
|
colorType: dictData.colorType,
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-03-29 16:49:00
|
* @LastEditTime: 2024-04-03 10:54:53
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
|
<base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
|
||||||
<div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
|
<div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
|
||||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: .5em">
|
||||||
<!-- <p v-if="op.outRate === 1" class="now-secondary-title"
|
<!-- <p v-if="op.outRate === 1" class="now-secondary-title"
|
||||||
style="font-size: 14px; opacity: calc(.6);color:#4679FD">
|
style="font-size: 14px; opacity: calc(.6);color:#4679FD">
|
||||||
<i class="el-icon-check" />
|
<i class="el-icon-check" />
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
</p> -->
|
</p> -->
|
||||||
<!-- <p class="now-secondary-title">{{ op.name }}</p> -->
|
<!-- <p class="now-secondary-title">{{ op.name }}</p> -->
|
||||||
<p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
|
<p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
|
||||||
<el-progress style="width: 910px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
|
<el-progress style="width: 935px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
|
||||||
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.outRate * 100" class="custom-progress-bar" />
|
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
@@ -606,8 +606,10 @@ export default {
|
|||||||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||||
}
|
}
|
||||||
::v-deep .el-progress__text {
|
::v-deep .el-progress__text {
|
||||||
|
width: 50px;
|
||||||
margin-top: -70px;
|
margin-top: -70px;
|
||||||
margin-left: 820px;
|
margin-left: 834px;
|
||||||
|
text-align: right;
|
||||||
// background-color: unset;
|
// background-color: unset;
|
||||||
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 16:50:26
|
* @Date: 2024-01-29 16:50:26
|
||||||
* @LastEditTime: 2024-04-02 15:01:40
|
* @LastEditTime: 2024-04-22 09:42:45
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -34,17 +34,18 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
|
<base-container :show-time="true" :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
|
||||||
:title-icon="'energyMonitoring'">
|
:title-icon="'energyMonitoring'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div> -->
|
||||||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 -->
|
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 -->
|
||||||
<div v-if="coldDetData" class="myLegend">
|
<div v-if="coldDetData" class="myLegend">
|
||||||
|
<div class=" barCircleLegend"></div>
|
||||||
|
<div class=" barCircle"></div>
|
||||||
|
<h4 class="barText">产线良品率</h4>
|
||||||
<div class="barLegend"></div>
|
<div class="barLegend"></div>
|
||||||
<h4 class="barText">产线产量</h4>
|
<h4 class="barCircleText">产线产量</h4>
|
||||||
<div class="barCircle"></div>
|
|
||||||
<h4 class="barCircleText">产线良品率</h4>
|
|
||||||
</div>
|
</div>
|
||||||
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
|
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
|
||||||
:height="359" :show-legend="true" />
|
:height="359" :show-legend="true" />
|
||||||
@@ -52,7 +53,8 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
|
<base-container :show-time="true" :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'"
|
||||||
|
:title-icon="'scrap'">
|
||||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
||||||
:table-data="ISRAList" /> -->
|
:table-data="ISRAList" /> -->
|
||||||
<ISRAChart ref="ISRAChart" />
|
<ISRAChart ref="ISRAChart" />
|
||||||
@@ -63,8 +65,8 @@
|
|||||||
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :no-content-padding="true" :height="256" :title="'废片 缺陷数据'" :size="'eqStatus'"
|
<base-container :show-time="true" :no-content-padding="true" :height="256" :title="'废片 缺陷数据'"
|
||||||
:title-icon="'scrap'">
|
:size="'eqStatus'" :title-icon="'scrap'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div> -->
|
||||||
@@ -97,7 +99,8 @@
|
|||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
|
||||||
<base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
|
<base-container :show-time="false" :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'"
|
||||||
|
:title-icon="'eqMonitoring'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div> -->
|
||||||
@@ -309,6 +312,7 @@ export default {
|
|||||||
window.location.reload()
|
window.location.reload()
|
||||||
}, 86400000)
|
}, 86400000)
|
||||||
// this.getData()
|
// this.getData()
|
||||||
|
// this.getReaiData()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.CutWebsocketClose()
|
this.CutWebsocketClose()
|
||||||
@@ -410,13 +414,13 @@ export default {
|
|||||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
||||||
productList.push(ele.productArea)
|
productList.push(ele.productArea)
|
||||||
wasteList.push(ele.wastArea)
|
wasteList.push(ele.wastArea)
|
||||||
nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
|
nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
|
||||||
// yieldList.push({
|
// yieldList.push({
|
||||||
// name: '良品',
|
// name: '良品',
|
||||||
// yield:ele.yield
|
// yield:ele.yield
|
||||||
// })
|
// })
|
||||||
sumAreaList.push(ele.sumArea)
|
sumAreaList.push(ele.sumArea)
|
||||||
yieldList.push((ele.yield * 100).toFixed(3))
|
yieldList.push((ele.yield * 100).toFixed(0))
|
||||||
})
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||||
@@ -427,39 +431,82 @@ export default {
|
|||||||
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
|
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getData() {
|
// getReaiData() {
|
||||||
let detData = [
|
// let detData = [
|
||||||
{
|
// {
|
||||||
name: '1',
|
// name: '1',
|
||||||
run: '运行',
|
// run: '运行',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '2',
|
// name: '2',
|
||||||
run: '未运行',
|
// run: '未运行',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '3',
|
// name: '3',
|
||||||
run: '运行',
|
// run: '运行',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '4',
|
// name: '4',
|
||||||
run: '未运行',
|
// run: '未运行',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '1',
|
// name: '1',
|
||||||
run: '运行',
|
// run: '运行',
|
||||||
},
|
// },
|
||||||
]
|
// ]
|
||||||
this.realEqList = detData.map((item, index) => [
|
// let arr = []
|
||||||
// console.log(item)
|
// let index = 0
|
||||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
// for (let i in detData) {
|
||||||
</span>`,
|
// index++,
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
|
// arr.push([
|
||||||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
|
// `<span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||||||
])
|
// </span>`,
|
||||||
this.realEqConfig.data = this.realEqList
|
// // `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
|
||||||
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
|
// // </span>`,
|
||||||
},
|
// `<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
|
||||||
|
// `<span style="color:rgba(255,255,255,0.5)"><div style="${detData[i] == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${detData[i] || ''}</span>`,
|
||||||
|
// ])
|
||||||
|
// }
|
||||||
|
// // this.$nextTick(() => {
|
||||||
|
// this.annealFunConfig.data = arr
|
||||||
|
// this.$refs['annealFunScrollBoard'].updateRows(arr)
|
||||||
|
// // })
|
||||||
|
// },
|
||||||
|
// getData() {
|
||||||
|
// let detData = [
|
||||||
|
// {
|
||||||
|
// name: '1',
|
||||||
|
// run: '运行',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '2',
|
||||||
|
// run: '未运行',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '3',
|
||||||
|
// run: '运行',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '4',
|
||||||
|
// run: '未运行',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '1',
|
||||||
|
// run: '运行',
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
// this.realEqList = detData.map((item, index) => [
|
||||||
|
// // console.log(item)
|
||||||
|
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||||
|
// </span>`,
|
||||||
|
// `<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
|
||||||
|
// `<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
|
||||||
|
// ])
|
||||||
|
// // this.$nextTick(() => {
|
||||||
|
// this.realEqConfig.data = this.realEqList
|
||||||
|
// this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
|
||||||
|
// // })
|
||||||
|
// },
|
||||||
CutWebsocketClose(e) {
|
CutWebsocketClose(e) {
|
||||||
this.Cutws.ws.onclose = (event) => { console.log(event );}
|
this.Cutws.ws.onclose = (event) => { console.log(event );}
|
||||||
},
|
},
|
||||||
@@ -572,16 +619,16 @@ export default {
|
|||||||
this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
|
this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||||||
let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
||||||
`<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
|
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||||
</span>`,
|
</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
|
`<span style="color:rgba(255,255,255,0.5)" >${item.lineName || ''}
|
||||||
</span>`,
|
</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)">${this.formatTime(item.time) || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)">${this.getSize(item.size) || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)">${this.NumFormat(item.productArea) + '㎡' || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)">${this.NumFormat(item.wasteArea) + '㎡' || ''}</span>`,
|
||||||
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
|
`<div style = "${(item.product * 100).toFixed(0) >= 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(0) + '%' || ''}</div>
|
||||||
<div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
|
<div style = "${(item.product * 100).toFixed(0) <= 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(0) + '%' || ''}</div>`
|
||||||
])
|
])
|
||||||
this.cutConfig.data = cutArr
|
this.cutConfig.data = cutArr
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
@@ -590,32 +637,34 @@ export default {
|
|||||||
// this.cutConfig.data = cutArr
|
// this.cutConfig.data = cutArr
|
||||||
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||||
let nameList = []
|
if (this.cutWsData.coldDetData.length !== 0) {
|
||||||
let nameWasteList = []
|
let nameList = []
|
||||||
let topNameList = []
|
let nameWasteList = []
|
||||||
let productList = []
|
let topNameList = []
|
||||||
let wasteList = []
|
let productList = []
|
||||||
let sumAreaList = []
|
let wasteList = []
|
||||||
let yieldList = []
|
let sumAreaList = []
|
||||||
this.coldDetData = this.cutWsData.coldDetData
|
let yieldList = []
|
||||||
// this.cutTableDataList =
|
this.coldDetData = this.cutWsData.coldDetData
|
||||||
this.cutWsData.coldDetData.forEach((ele, index) => {
|
// this.cutTableDataList =
|
||||||
nameList.push(ele.lineName)
|
this.cutWsData.coldDetData.forEach((ele, index) => {
|
||||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
nameList.push(ele.lineName)
|
||||||
productList.push(ele.productArea)
|
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
||||||
wasteList.push(ele.wastArea)
|
productList.push(ele.productArea)
|
||||||
nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
|
wasteList.push(ele.wastArea)
|
||||||
sumAreaList.push(ele.sumArea)
|
nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
|
||||||
yieldList.push(parseFloat((ele.yield * 100).toFixed(3)))
|
sumAreaList.push(ele.sumArea)
|
||||||
})
|
yieldList.push(parseFloat((ele.yield * 100).toFixed(2)))
|
||||||
this.$nextTick(() => {
|
})
|
||||||
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
this.$nextTick(() => {
|
||||||
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
|
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
||||||
this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
|
||||||
this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
|
||||||
this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
|
||||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
|
||||||
})
|
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// if (typeof (WebSocket) === 'undefined') {
|
// if (typeof (WebSocket) === 'undefined') {
|
||||||
@@ -700,6 +749,25 @@ export default {
|
|||||||
// this.funWebsocket.onclose = this.funWebsocketClose
|
// this.funWebsocket.onclose = this.funWebsocketClose
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
|
NumFormat(value) {
|
||||||
|
if (!value) return '0.00'
|
||||||
|
value = value.toFixed(2)
|
||||||
|
var intPart = Math.trunc(value) // 获取整数部分
|
||||||
|
// var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
|
||||||
|
var floatPart = '.00' // 预定义小数部分
|
||||||
|
var value2Array = value.split('.')
|
||||||
|
// =2表示数据有小数位
|
||||||
|
if (value2Array.length === 2) {
|
||||||
|
floatPart = value2Array[1].toString() // 拿到小数部分
|
||||||
|
if (floatPart.length === 1) {
|
||||||
|
return intPart + '.' + floatPart + '0'
|
||||||
|
} else {
|
||||||
|
return intPart + '.' + floatPart
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return intPart + floatPart
|
||||||
|
}
|
||||||
|
},
|
||||||
// funWebsocketOnOpen() {
|
// funWebsocketOnOpen() {
|
||||||
// console.log('socket连接成功')
|
// console.log('socket连接成功')
|
||||||
// this.SJGWebsocket.onmessage()
|
// this.SJGWebsocket.onmessage()
|
||||||
@@ -797,7 +865,7 @@ export default {
|
|||||||
.myLegend{
|
.myLegend{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
right: 50px;
|
right: 20px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: rgba(255,255,255,.6);
|
color: rgba(255,255,255,.6);
|
||||||
.barLegend{
|
.barLegend{
|
||||||
@@ -807,19 +875,29 @@ export default {
|
|||||||
height: 10px;
|
height: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
border-radius: 30%;
|
||||||
}
|
}
|
||||||
.barText{
|
.barText{
|
||||||
// float: right;
|
// float: right;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
.barCircleLegend{
|
||||||
|
width: 15px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: rgba(255, 209, 96, 1);
|
||||||
|
position: absolute;
|
||||||
|
left: -4.1715px;
|
||||||
|
top: 21.7px;
|
||||||
|
}
|
||||||
.barCircle{
|
.barCircle{
|
||||||
width: 7px;
|
width: 6px;
|
||||||
height: 7px;
|
height: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: rgba(255, 209, 96, 1);
|
background-color: rgba(255, 209, 96, 1);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 5px;
|
margin-right: 10px;
|
||||||
|
margin-bottom: 1.7px;
|
||||||
}
|
}
|
||||||
.barCircleText{
|
.barCircleText{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 13:45:56
|
* @Date: 2024-01-29 13:45:56
|
||||||
* @LastEditTime: 2024-03-13 08:58:01
|
* @LastEditTime: 2024-04-17 15:48:21
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -13,6 +13,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { position } from '@antv/x6-common/lib/dom/position';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
// import resize from './../mixins/resize'
|
// import resize from './../mixins/resize'
|
||||||
// import NotMsg from './../components/NotMsg'
|
// import NotMsg from './../components/NotMsg'
|
||||||
@@ -26,7 +27,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
// notMsg:true,
|
// notMsg:true,
|
||||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
colors: ['#2760ff', '#518eec', '#49FBD6', '#ddb523'],
|
||||||
chartData: []
|
chartData: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -45,8 +46,49 @@ export default {
|
|||||||
this.$emit('emitFun')
|
this.$emit('emitFun')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
mounted() {
|
||||||
|
this.chartData = [
|
||||||
|
{
|
||||||
|
name: '0904褶皱/严重',
|
||||||
|
num: 1112,
|
||||||
|
yield: 0.97,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '0904褶皱/严重',
|
||||||
|
num: 1112,
|
||||||
|
yield: 0.97,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '0904褶皱/严重',
|
||||||
|
num: 1112,
|
||||||
|
yield: 0.97,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '0904褶皱/严重',
|
||||||
|
num: 1112,
|
||||||
|
yield: 0.97,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
this.updateChart()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getEqualNewlineString(params, length) {
|
||||||
|
let text = ''
|
||||||
|
let count = Math.ceil(params.length / length) // 向上取整数
|
||||||
|
// 一行展示length个
|
||||||
|
if (count > 1) {
|
||||||
|
for (let z = 1; z <= count; z++) {
|
||||||
|
text += params.substr((z - 1) * length, length)
|
||||||
|
if (z < count) {
|
||||||
|
text += '\n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
text += params.substr(0, length)
|
||||||
|
}
|
||||||
|
return text
|
||||||
|
},
|
||||||
updateChart() {
|
updateChart() {
|
||||||
console.log('update')
|
console.log('update')
|
||||||
let num = 0
|
let num = 0
|
||||||
@@ -71,7 +113,7 @@ export default {
|
|||||||
color:this.colors,
|
color:this.colors,
|
||||||
title:{
|
title:{
|
||||||
text: num,
|
text: num,
|
||||||
subtext: '总数',
|
subtext: '总数/片',
|
||||||
top: '32%',
|
top: '32%',
|
||||||
left: '49%',
|
left: '49%',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
@@ -83,45 +125,77 @@ export default {
|
|||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
color: '#fff00',
|
color: '#fff00',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
grid: {
|
||||||
bottom: '10%',
|
left: '1%',
|
||||||
left: 'center',
|
right: '1%',
|
||||||
itemWidth: 12,
|
bottom: '0',
|
||||||
itemHeight:12,
|
containLabel: true
|
||||||
icon: 'rect',
|
},
|
||||||
textStyle: {
|
// legend: {
|
||||||
color: '#fff'
|
// bottom: '10%',
|
||||||
},
|
// left: 'center',
|
||||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
// itemWidth: 12,
|
||||||
name:item.name,
|
// itemHeight:12,
|
||||||
itemStyle:{
|
// icon: 'roundRect',
|
||||||
color: this.colors[index%4]
|
// textStyle: {
|
||||||
}
|
// color: '#fff'
|
||||||
}))
|
// },
|
||||||
},
|
// data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||||
|
// name:item.name,
|
||||||
|
// itemStyle:{
|
||||||
|
// color: this.colors[index%4]
|
||||||
|
// }
|
||||||
|
// }))
|
||||||
|
// },
|
||||||
series:[{
|
series:[{
|
||||||
name: 'ISRA缺陷检测',
|
name: 'ISRA缺陷检测',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
|
// position:outerHeight,
|
||||||
center: ['50%', '40%'],
|
center: ['50%', '40%'],
|
||||||
radius: ['45%', '70%'],
|
radius: ['45%', '70%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
show: false
|
show: true,
|
||||||
|
normal: {
|
||||||
|
alignTo: 'labelLine',
|
||||||
|
margin: 10,
|
||||||
|
edgeDistance: 10,
|
||||||
|
lineHeight: 16,
|
||||||
|
// 各分区的提示内容
|
||||||
|
// params: 即下面传入的data数组,通过自定义函数,展示你想要的内容和格式
|
||||||
|
formatter: function (params) {
|
||||||
|
console.log(params);
|
||||||
|
return ;
|
||||||
|
},
|
||||||
|
formatter: (params) => {
|
||||||
|
//调用自定义显示格式
|
||||||
|
return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%");
|
||||||
|
},
|
||||||
|
textStyle: { // 提示文字的样式
|
||||||
|
// color: '#595959',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
length: 25,
|
||||||
|
length2: 10,
|
||||||
},
|
},
|
||||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||||
name:item.name,
|
name:item.name,
|
||||||
value: item.num,
|
value: item.num,
|
||||||
|
label: {
|
||||||
|
color: this.colors[index % 4]
|
||||||
|
},
|
||||||
itemStyle:{
|
itemStyle:{
|
||||||
color:{
|
color:{
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 1,
|
x: 0,
|
||||||
y: 1,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 0,
|
y2: 1,
|
||||||
global: false,
|
global: false,
|
||||||
colorStops:[
|
colorStops:[
|
||||||
{offset: 0,color: this.colors[index%4]},
|
{offset: 0,color: this.colors[index%4]},
|
||||||
@@ -145,15 +219,19 @@ export default {
|
|||||||
.isra-chart {
|
.isra-chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 7%;
|
||||||
}
|
}
|
||||||
|
.isra-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isra-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.isra-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.isra-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2022-01-21 14:43:06
|
* @Date: 2022-01-21 14:43:06
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-03-29 14:50:50
|
* @LastEditTime: 2024-04-03 16:33:24
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -85,7 +85,6 @@ export default {
|
|||||||
defaultConfig: {
|
defaultConfig: {
|
||||||
// 默认的legend配置
|
// 默认的legend配置
|
||||||
legend: {
|
legend: {
|
||||||
orient: 'vertical',
|
|
||||||
left: '75%',
|
left: '75%',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
@@ -197,7 +196,7 @@ export default {
|
|||||||
// 默认配置
|
// 默认配置
|
||||||
...this.defaultConfig.legend,
|
...this.defaultConfig.legend,
|
||||||
// 外部传入配置
|
// 外部传入配置
|
||||||
...this.legendConfig
|
// ...this.legendConfig
|
||||||
},
|
},
|
||||||
color: this.barColor,
|
color: this.barColor,
|
||||||
series: [
|
series: [
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: gtz
|
* @Author: gtz
|
||||||
* @Date: 2022-01-19 15:58:17
|
* @Date: 2022-01-19 15:58:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-03-29 14:47:29
|
* @LastEditTime: 2024-04-22 09:41:21
|
||||||
* @Description: file content
|
* @Description: file content
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||||
-->
|
-->
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
<!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
<!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||||||
{{ time2 +'-'+ time }}
|
{{ time2 +'-'+ time }}
|
||||||
</span> -->
|
</span> -->
|
||||||
<span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
<span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||||||
{{ startTime + '-' + endTime }}
|
{{ startTime + '-' + endTime }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -56,6 +56,10 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
showTime: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
noPadding: {
|
noPadding: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2024-04-01 09:12:56
|
* @LastEditTime: 2024-04-23 15:34:56
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -83,6 +83,9 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// getNumLength(num) {
|
||||||
|
// return num.toString().length;
|
||||||
|
// },
|
||||||
initChart(nameList, passRateList, outputNumList) {
|
initChart(nameList, passRateList, outputNumList) {
|
||||||
console.log(nameList, passRateList)
|
console.log(nameList, passRateList)
|
||||||
let series= [
|
let series= [
|
||||||
@@ -97,11 +100,12 @@ export default {
|
|||||||
{ offset: 0.3, color: '#1295FF' }
|
{ offset: 0.3, color: '#1295FF' }
|
||||||
]),
|
]),
|
||||||
label: {
|
label: {
|
||||||
show: true, //开启显示
|
show: false, //开启显示
|
||||||
position: 'top', //在上方显示
|
position: 'top', //在上方显示
|
||||||
textStyle: { //数值样式
|
textStyle: { //数值样式
|
||||||
color: '#ced1d5',
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
fontSize: 12
|
fontSize: 12,
|
||||||
|
fontWight: 'bolder'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -155,6 +159,8 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
// color: colors,
|
// color: colors,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
className: "isra-chart-tooltip",
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross'
|
type: 'cross'
|
||||||
@@ -193,18 +199,19 @@ export default {
|
|||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'solid',
|
type: 'solid',
|
||||||
color: '#213259', // 左边线的颜色
|
color: '#25528f', // 左边线的颜色
|
||||||
width: '1' // 坐标线的宽度
|
width: '1' // 坐标线的宽度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
align: 'center',
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#213259'
|
color: '#25528f'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: nameList
|
data: nameList
|
||||||
@@ -214,18 +221,21 @@ export default {
|
|||||||
// },
|
// },
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
min: function() { // 取最小值向下取整为最小刻度
|
min: function () { // 取最小值向下取整为最小刻度
|
||||||
return 0
|
return 0
|
||||||
},
|
},
|
||||||
max: function(value) { // 取最大值向上取整为最大刻度
|
max: function (value) { // 取最大值向上取整为最大刻度
|
||||||
return Math.ceil(value.max)
|
|
||||||
},
|
},
|
||||||
scale: true,
|
scale: true,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '良品率/%',
|
name: '良品率/%',
|
||||||
|
max: 100,//最大值
|
||||||
|
min: 0,//最小值
|
||||||
|
interval: 20,//间隔
|
||||||
nameTextStyle: {// y轴上方单位的颜色
|
nameTextStyle: {// y轴上方单位的颜色
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
align: "left",
|
align: "left",
|
||||||
|
padding: [0, 0, 0, 8]
|
||||||
},
|
},
|
||||||
position: 'right',
|
position: 'right',
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
@@ -233,19 +243,20 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'solid',
|
type: 'solid',
|
||||||
color: '#213259', // 左边线的颜色
|
color: '#25528f', // 左边线的颜色
|
||||||
width: '1' // 坐标线的宽度
|
width: '1' // 坐标线的宽度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#ced1d5', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
formatter: '{value}%'
|
formatter: '{value}%',
|
||||||
|
align:'left',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#213259'
|
color: '#25528f'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// type: 'value'
|
// type: 'value'
|
||||||
@@ -257,12 +268,17 @@ export default {
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
min: function() { // 取最小值向下取整为最小刻度
|
min: function () { // 取最小值向下取整为最小刻度
|
||||||
return 0
|
return 0
|
||||||
},
|
},
|
||||||
max: function(value) { // 取最大值向上取整为最大刻度
|
max: function (value) { // 取最大值向上取整为最大刻度
|
||||||
return Math.ceil(value.max)
|
|
||||||
|
// console.log(value.max.toString().length)
|
||||||
|
// String(value.max)[0]
|
||||||
|
// for
|
||||||
|
// return String(value.max)[0] +
|
||||||
},
|
},
|
||||||
|
minInterval: 5,//间隔
|
||||||
scale: true,
|
scale: true,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量/㎡', // y轴上方的单位
|
name: '产量/㎡', // y轴上方的单位
|
||||||
@@ -270,6 +286,7 @@ export default {
|
|||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
// fontSize: 10,
|
// fontSize: 10,
|
||||||
align: "right",
|
align: "right",
|
||||||
|
padding:[0,4,0,0]
|
||||||
},
|
},
|
||||||
position: 'left',
|
position: 'left',
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
@@ -277,19 +294,21 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'solid',
|
type: 'solid',
|
||||||
color: '#213259', // 左边线的颜色
|
color: '#25528f', // 左边线的颜色
|
||||||
width: '1' // 坐标线的宽度
|
width: '1' // 坐标线的宽度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
// padding: [0, 20, 0, 0],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
margin: 60,
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
formatter: '{value} 片'
|
formatter: '{value} 片'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#213259'
|
color: '#25528f'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// type: 'value'
|
// type: 'value'
|
||||||
@@ -308,8 +327,16 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.coldProductChart{
|
.coldProductChart{
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
|
.isra-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isra-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2024-03-29 16:26:28
|
* @LastEditTime: 2024-04-23 15:36:35
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -105,7 +105,7 @@ export default {
|
|||||||
show: true, //开启显示
|
show: true, //开启显示
|
||||||
position: 'top', //在上方显示
|
position: 'top', //在上方显示
|
||||||
textStyle: { //数值样式
|
textStyle: { //数值样式
|
||||||
color: '#ced1d5',
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontWight:'bolder'
|
fontWight:'bolder'
|
||||||
}
|
}
|
||||||
@@ -162,24 +162,26 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
// color: colors,
|
// color: colors,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
className: "isra-chart-tooltip",
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross'
|
type: 'cross'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: { top: 90, right: 70, bottom: 20, left: 20, containLabel: true },
|
grid: { top: 70, right: 20, bottom: 10, left: 10, containLabel: true },
|
||||||
legend: {
|
// legend: {
|
||||||
itemWidth: 10,
|
// itemWidth: 10,
|
||||||
itemHeight: 10,
|
// itemHeight: 10,
|
||||||
top: '0%',
|
// top: '2%',
|
||||||
right: '20px',
|
// right: '30px',
|
||||||
data: ['产线良品率', '产线产量'],
|
// data: ['产线良品率', '产线产量'],
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
fontSize: 12 * this.beilv,
|
// fontSize: 12 * this.beilv,
|
||||||
color: '#ced1d5',
|
// color: '#ced1d5',
|
||||||
fontWight: 'bolder'
|
// fontWight: 'bolder'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false
|
||||||
@@ -215,18 +217,21 @@ export default {
|
|||||||
// },
|
// },
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
// min: function() { // 取最小值向下取整为最小刻度
|
min: function () { // 取最小值向下取整为最小刻度
|
||||||
// return 0
|
return 0
|
||||||
// },
|
},
|
||||||
// max: function(value) { // 取最大值向上取整为最大刻度
|
max: function (value) { // 取最大值向上取整为最大刻度
|
||||||
// return Math.ceil(value.max)
|
},
|
||||||
// },
|
|
||||||
scale: true,
|
scale: true,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '良品率/%',
|
name: '良品率/%',
|
||||||
|
max: 100,//最大值
|
||||||
|
min: 0,//最小值
|
||||||
|
interval: 20,//间隔
|
||||||
nameTextStyle: {// y轴上方单位的颜色
|
nameTextStyle: {// y轴上方单位的颜色
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
align: "left",
|
align: "left",
|
||||||
|
padding: [0, 0, 0, 2]
|
||||||
},
|
},
|
||||||
position: 'right',
|
position: 'right',
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
@@ -259,18 +264,24 @@ export default {
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// min: function() { // 取最小值向下取整为最小刻度
|
min: function () { // 取最小值向下取整为最小刻度
|
||||||
// return 0
|
return 0
|
||||||
// },
|
},
|
||||||
// max: function(value) { // 取最大值向上取整为最大刻度
|
max: function (value) { // 取最大值向上取整为最大刻度
|
||||||
// return Math.ceil(value.max)
|
|
||||||
// },
|
// console.log(value.max.toString().length)
|
||||||
|
// String(value.max)[0]
|
||||||
|
// for
|
||||||
|
// return String(value.max)[0] +
|
||||||
|
},
|
||||||
|
minInterval: 5,//间隔
|
||||||
scale: true,
|
scale: true,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量/片', // y轴上方的单位
|
name: '产量/片', // y轴上方的单位
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
// fontSize: 10,
|
// fontSize: 10,
|
||||||
|
padding: [0, 4, 0, 0],
|
||||||
align: "right",
|
align: "right",
|
||||||
},
|
},
|
||||||
// position: 'left',
|
// position: 'left',
|
||||||
@@ -322,4 +333,13 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
|
.isra-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isra-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -113,7 +113,7 @@ export default {
|
|||||||
textStyle: { //数值样式
|
textStyle: { //数值样式
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontWeight: 'bolder'
|
fontWeight: 'normal'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -128,12 +128,14 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
trigger: 'item',
|
||||||
|
className: "isra-chart-tooltip",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: { top: 90, right: 60, bottom: 20, left: 30, containLabel: true },
|
grid: { top: 70, right: 40, bottom: 10, left: 40, containLabel: true },
|
||||||
// legend: {
|
// legend: {
|
||||||
// itemWidth: 10,
|
// itemWidth: 10,
|
||||||
// itemHeight: 10,
|
// itemHeight: 10,
|
||||||
@@ -175,7 +177,7 @@ export default {
|
|||||||
name: '单位kwh',
|
name: '单位kwh',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||||
fontSize: 10,
|
fontSize: 12,
|
||||||
align: 'right',
|
align: 'right',
|
||||||
},
|
},
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@@ -226,4 +228,13 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
|
.isra-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isra-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-27 13:54:52
|
* @Date: 2023-12-27 13:54:52
|
||||||
* @LastEditTime: 2024-04-01 09:14:45
|
* @LastEditTime: 2024-04-19 15:43:08
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -101,11 +101,14 @@ export default {
|
|||||||
});;
|
});;
|
||||||
},
|
},
|
||||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||||
let rawData = []
|
if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
|
||||||
let colors = ['#0fdedb', '#2359ec']
|
return
|
||||||
|
} else {
|
||||||
|
let rawData = []
|
||||||
|
let colors = ['#0fdedb', '#2359ec']
|
||||||
rawData.push(passRateList, wasteList)
|
rawData.push(passRateList, wasteList)
|
||||||
const totalData = [];
|
const totalData = [];
|
||||||
// if (rawData.length != 0 && raw,Data,length != 0) {
|
// if (rawData.length != 0 && raw,Data,length != 0) {
|
||||||
for (let i = 0; i < rawData[0].length; ++i) {
|
for (let i = 0; i < rawData[0].length; ++i) {
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
for (let j = 0; j < rawData.length; ++j) {
|
for (let j = 0; j < rawData.length; ++j) {
|
||||||
@@ -113,146 +116,152 @@ export default {
|
|||||||
}
|
}
|
||||||
totalData.push(sum);
|
totalData.push(sum);
|
||||||
}
|
}
|
||||||
// }
|
// }
|
||||||
console.log('total', totalData)
|
// rawData[1].map((d, did) =>
|
||||||
const series = [
|
// console.log((d / totalData[did]).toFixed(3))
|
||||||
'良品',
|
// // totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||||
'废品',
|
// )
|
||||||
// 'Affiliate Ad',
|
console.log('total', totalData)
|
||||||
// 'Video Ad',
|
const series = [
|
||||||
// 'Search Engine'
|
'良品',
|
||||||
].map((name, sid) => {
|
'废品',
|
||||||
// console.log(sid)
|
// 'Affiliate Ad',
|
||||||
return {
|
// 'Video Ad',
|
||||||
name,
|
// 'Search Engine'
|
||||||
type: 'bar',
|
].map((name, sid) => {
|
||||||
stack: 'total',
|
// console.log(sid)
|
||||||
barWidth: 12,
|
return {
|
||||||
// label: {
|
name,
|
||||||
// show: true,
|
type: 'bar',
|
||||||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
stack: 'total',
|
||||||
// },
|
barWidth: 12,
|
||||||
color:colors[sid],
|
// label: {
|
||||||
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
// show: true,
|
||||||
totalData[did] <= 0 ? 0 : d / totalData[did]
|
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||||
) : []
|
// },
|
||||||
};
|
color: colors[sid],
|
||||||
});
|
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
||||||
// this.charts.resize({
|
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
||||||
// //width: width,
|
) : []
|
||||||
// //height: height,
|
};
|
||||||
// // es6解构
|
});
|
||||||
// width,
|
// this.charts.resize({
|
||||||
// height
|
// //width: width,
|
||||||
// })
|
// //height: height,
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
// // es6解构
|
||||||
let isFinished = false //标记 isFinished
|
// width,
|
||||||
this.chart.on('finished', _ => {
|
// height
|
||||||
if (!isFinished) {
|
// })
|
||||||
console.log('我只执行一次')
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
isFinished = true
|
let isFinished = false //标记 isFinished
|
||||||
// this.isLoading = false //关闭loading
|
this.chart.on('finished', _ => {
|
||||||
this.chart.resize() //重新渲染charts大小
|
if (!isFinished) {
|
||||||
}
|
console.log('我只执行一次')
|
||||||
console.log(113, 'finished')
|
isFinished = true
|
||||||
})
|
// this.isLoading = false //关闭loading
|
||||||
this.chart.setOption({
|
this.chart.resize() //重新渲染charts大小
|
||||||
legend: {
|
|
||||||
formatter: function (name) {
|
|
||||||
//通过name获取到数组对象中的单个对象
|
|
||||||
let singleData = series.filter(function (item) {
|
|
||||||
return item.name == name
|
|
||||||
})
|
|
||||||
return name + parseFloat((singleData[0].data * 100).toFixed(3)) + '%'
|
|
||||||
},
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 12,
|
|
||||||
bottom: '20',
|
|
||||||
left: '20',
|
|
||||||
icon: 'rect',
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,.6)',
|
|
||||||
fontSize:12,
|
|
||||||
}
|
}
|
||||||
},
|
console.log(113, 'finished')
|
||||||
grid: {
|
})
|
||||||
top:'0',
|
this.chart.setOption({
|
||||||
left: '3%',
|
legend: {
|
||||||
right: '4%',
|
formatter: function (name) {
|
||||||
// bottom: '3%',
|
//通过name获取到数组对象中的单个对象
|
||||||
width: 'auto',
|
let singleData = series.filter(function (item) {
|
||||||
height: '95',
|
return item.name == name
|
||||||
containLabel: true
|
})
|
||||||
},
|
return name + parseFloat((singleData[0].data * 100).toFixed(2)) + '%'
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
inverse: true,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
},
|
||||||
axisTick: {
|
itemWidth: 12,
|
||||||
show: false
|
itemHeight: 12,
|
||||||
},
|
bottom: '20',
|
||||||
axisLine: {
|
left: '20',
|
||||||
show: false
|
icon: 'roundRect',
|
||||||
},
|
textStyle: {
|
||||||
axisLabel: {
|
color: 'rgba(255,255,255,.9)',
|
||||||
show: true,
|
fontSize: 12,
|
||||||
inside: true,
|
}
|
||||||
interval: 0, //横轴信息全部显
|
|
||||||
splitNumber: 50,
|
|
||||||
// boundaryGap: [20, 20],
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,.6)',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 16,
|
|
||||||
align: 'left',
|
|
||||||
padding: [0, 0, 10, -5]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: topNameList
|
|
||||||
},
|
},
|
||||||
{
|
grid: {
|
||||||
type: 'category',
|
top: '0',
|
||||||
inverse: true,
|
left: '3%',
|
||||||
splitLine: {
|
right: '4%',
|
||||||
show: false
|
// bottom: '3%',
|
||||||
|
width: 'auto',
|
||||||
|
height: '95',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
inside: true,
|
||||||
|
interval: 0, //横轴信息全部显
|
||||||
|
splitNumber: 50,
|
||||||
|
// boundaryGap: [20, 20],
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,.9)',
|
||||||
|
verticalAlign: 'bottom',
|
||||||
|
fontSize: 16,
|
||||||
|
align: 'left',
|
||||||
|
padding: [0, 0, 10, -5]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: topNameList
|
||||||
},
|
},
|
||||||
axisTick: {
|
{
|
||||||
show: false
|
type: 'category',
|
||||||
},
|
inverse: true,
|
||||||
axisLine: {
|
splitLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisTick: {
|
||||||
show: true,
|
show: false
|
||||||
inside: true,
|
},
|
||||||
interval: 0, //横轴信息全部显
|
axisLine: {
|
||||||
splitNumber: 50,
|
show: false
|
||||||
// boundaryGap: [20, 20],
|
},
|
||||||
textStyle: {
|
axisLabel: {
|
||||||
color: 'rgba(255,255,255,.6)',
|
show: true,
|
||||||
verticalAlign: 'bottom',
|
inside: true,
|
||||||
fontSize: 16,
|
interval: 0, //横轴信息全部显
|
||||||
align: 'right',
|
splitNumber: 50,
|
||||||
padding: [0, 0, 10, -5]
|
// boundaryGap: [20, 20],
|
||||||
}
|
textStyle: {
|
||||||
},
|
color: 'rgba(255,255,255,.9)',
|
||||||
data: nameWasteList
|
verticalAlign: 'bottom',
|
||||||
}
|
fontSize: 16,
|
||||||
],
|
align: 'right',
|
||||||
xAxis: {
|
padding: [0, 0, 10, -5]
|
||||||
// max: 120,
|
}
|
||||||
show: false,
|
},
|
||||||
},
|
data: nameWasteList
|
||||||
series:series
|
}
|
||||||
})
|
],
|
||||||
this.$nextTick(() => {
|
xAxis: {
|
||||||
setTimeout(() => {
|
// max: 120,
|
||||||
this.resize()
|
show: false,
|
||||||
},1000);
|
},
|
||||||
})
|
series: series
|
||||||
|
})
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.resize()
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// this.chart.resize({
|
// this.chart.resize({
|
||||||
// width: 'auto',
|
// width: 'auto',
|
||||||
// height: 90
|
// height: 90
|
||||||
|
|||||||
@@ -2,16 +2,16 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-04-02 09:46:46
|
* @LastEditTime: 2024-04-24 14:48:00
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="container" ref="container" class="visual-container" :style="styles">
|
<div id="container" ref="container" class="visual-container" :style="styles">
|
||||||
<el-row class="container-title" :style="{
|
<el-row class="container-title" :style="{
|
||||||
height: 88 + 'px',
|
height: 88 + 'px',
|
||||||
lineHeight: 88 + 'px',
|
lineHeight: 88 + 'px',
|
||||||
fontSize: 31 + 'px',
|
fontSize: 31 + 'px',
|
||||||
}">
|
}">
|
||||||
<img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" />
|
<img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" />
|
||||||
许昌安彩深加工看板
|
许昌安彩深加工看板
|
||||||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3>
|
<h3 class="unit">单位:河南汇融数字科技有限公司</h3>
|
||||||
@@ -25,25 +25,40 @@
|
|||||||
<el-row class="container-main flex-col" type="flex">
|
<el-row class="container-main flex-col" type="flex">
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||||
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
|
<base-container :show-time="true" :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
|
||||||
<dv-scroll-board class="eqTable" :config="eqConfig" style="width: 100%; height: 350px"
|
<dv-scroll-board class="eqTable" :config="eqConfig" style="width: 100%; height: 350px"
|
||||||
ref="eqScrollBoard" />
|
ref="eqScrollBoard" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||||
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
|
<base-container :show-time="true" :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
|
||||||
<dv-scroll-board :config="processConfig" style="width: 100%; height: 350px" ref="processScrollBoard" />
|
<dv-scroll-board :config="processConfig" style="width: 100%; height: 350px" ref="processScrollBoard" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||||
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
<base-container :show-time="false" :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||||
<div class="order" style="width: 100%; overflow: hidden scroll; height: 350px">
|
<div class="order" style="width: 100%; overflow: hidden scroll; height: 350px">
|
||||||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
|
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;">
|
||||||
<!-- <el-col :span="12"> -->
|
<!-- <el-col :span="12"> -->
|
||||||
|
<!-- <div style="height: 34px;"> -->
|
||||||
<p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
|
<span style="display: inline-block;width: 330px;">
|
||||||
<el-progress style="width: 610px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
|
<span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
|
||||||
|
<el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider>
|
||||||
|
<!-- <span v-if="op.size" class="split"></span> -->
|
||||||
|
<span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
|
||||||
|
op.specifications }}</span>
|
||||||
|
<el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
|
||||||
|
<span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
|
||||||
|
op.planQuantity }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-if="op.actualQuantity" class="orderFinish" style="font-size: 14px;margin-left: 130px;">{{
|
||||||
|
op.actualQuantity
|
||||||
|
}}</span>
|
||||||
|
<el-divider class="split" style="background-color: rgba(0, 255, 247, 1)" v-if="op.actualQuantity"
|
||||||
|
direction="vertical"></el-divider>
|
||||||
|
<!-- </div> -->
|
||||||
|
<el-progress style="width: 620px;" text-color="rgba(0, 255, 247, 1)" :stroke-width="10"
|
||||||
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" />
|
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" />
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,8 +69,8 @@
|
|||||||
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'eqStatus'"
|
<base-container :show-time="true" :show-yes-time="true" :no-content-padding="true" :height="256"
|
||||||
:title="'能源监控'" :title-icon="'energyMonitoring'">
|
:size="'eqStatus'" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||||||
<el-row :gutter="9">
|
<el-row :gutter="9">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||||||
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
||||||
@@ -65,8 +80,15 @@
|
|||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
|
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
|
||||||
:title="'产线产量及良品率'" :title-icon="'productLine'">
|
:title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||||
|
<div class="myLegend">
|
||||||
|
<div class=" barCircleLegend"></div>
|
||||||
|
<div class=" barCircle"></div>
|
||||||
|
<h4 class="barText">产线良品率</h4>
|
||||||
|
<div class="barLegend"></div>
|
||||||
|
<h4 class="barCircleText">产线产量</h4>
|
||||||
|
</div>
|
||||||
<double-y-chart ref="productLineChart" :id="'doubleYChart'" :height="390" :show-legend="true" />
|
<double-y-chart ref="productLineChart" :id="'doubleYChart'" :height="390" :show-legend="true" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -88,80 +110,79 @@ const qualityYearList = [
|
|||||||
{
|
{
|
||||||
name: '翻转机',
|
name: '翻转机',
|
||||||
code: 'EQ20240110112358000235',
|
code: 'EQ20240110112358000235',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '烘干炉',
|
name: '烘干炉',
|
||||||
code: 'EQ20240110112537000241',
|
code: 'EQ20240110112537000241',
|
||||||
status: '运行',
|
status: '计划停机',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '清洗机',
|
name: '清洗机',
|
||||||
code: ' EQ20240110112310000232',
|
code: ' EQ20240110112310000232',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '钢化清洗机',
|
name: '钢化清洗机',
|
||||||
code: 'EQ20240110111700000208',
|
code: 'EQ20240110111700000208',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '固化机',
|
name: '固化机',
|
||||||
code: 'EQ20240110111700000201',
|
code: 'EQ20240110111700000201',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '磨边清洗机',
|
name: '磨边清洗机',
|
||||||
code: ' EQ20240110111700000208',
|
code: ' EQ20240110111700000208',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '预热机',
|
name: '预热机',
|
||||||
code: 'EQ20240110111700000205',
|
code: 'EQ20240110111700000205',
|
||||||
status: '故障',
|
status: '故障',
|
||||||
error: '是',
|
error: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '下片机',
|
name: '下片机',
|
||||||
code: 'EQ20240115151435000279',
|
code: 'EQ20240115151435000279',
|
||||||
status: '运行',
|
error: true,
|
||||||
error: '否',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '冷却机',
|
name: '冷却机',
|
||||||
code: 'EQ20240110111700000203',
|
code: 'EQ20240110111700000203',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'A储片机106',
|
name: 'A储片机106',
|
||||||
code: 'EQ20240110111700000202',
|
code: 'EQ20240110111700000202',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '二次清洗机',
|
name: '二次清洗机',
|
||||||
code: 'EQ20240110111700000209',
|
code: 'EQ20240110111700000209',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '二次磨边机',
|
name: '二次磨边机',
|
||||||
code: ' EQ20240110110927000181',
|
code: ' EQ20240110110927000181',
|
||||||
status: '故障',
|
status: '正常',
|
||||||
error: '是',
|
error: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '测试设备',
|
name: '测试设备',
|
||||||
code: 'EQ20240110111700000201',
|
code: 'EQ20240110111700000201',
|
||||||
status: '运行',
|
status: '正常',
|
||||||
error: '否',
|
error: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const qualityMonthList = [
|
const qualityMonthList = [
|
||||||
@@ -210,37 +231,37 @@ const qualityMonthList = [
|
|||||||
];
|
];
|
||||||
const orderProcessList = [
|
const orderProcessList = [
|
||||||
{
|
{
|
||||||
id: '1',
|
id: 1,
|
||||||
outRate: '.8',
|
outRate: '.8',
|
||||||
name: '凯盛0322',
|
name: '凯盛0322',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: 2,
|
||||||
outRate: '.4',
|
outRate: '.4',
|
||||||
name: '光伏玻璃4.0',
|
name: '光伏玻璃4.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '3',
|
id: 3,
|
||||||
outRate: '.5',
|
outRate: '.5',
|
||||||
name: '光伏玻璃3.0',
|
name: '光伏玻璃3.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '4',
|
id: 4,
|
||||||
outRate: '.3',
|
outRate: '.3',
|
||||||
name: '光伏玻璃2.0',
|
name: '光伏玻璃2.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '5',
|
id: 5,
|
||||||
outRate: '.5',
|
outRate: '.5',
|
||||||
name: '光伏玻璃1.0',
|
name: '光伏玻璃1.0',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '6',
|
id: 6,
|
||||||
outRate: '.8',
|
outRate: '.8',
|
||||||
name: '光伏玻璃',
|
name: '光伏玻璃',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '7',
|
id: 7,
|
||||||
outRate: '.8',
|
outRate: '.8',
|
||||||
name: '统计订单',
|
name: '统计订单',
|
||||||
},
|
},
|
||||||
@@ -357,23 +378,67 @@ export default {
|
|||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
name: '测试工单',
|
name: '测试工单',
|
||||||
progressRate: 0.933333,
|
progressRate: 0.933333,
|
||||||
|
specifications: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity:111,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: '2',
|
||||||
name: '测试工单2',
|
name: '测试工单2',
|
||||||
progressRate: 0.932323,
|
progressRate: 0.932323,
|
||||||
|
size: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '3',
|
id: '3',
|
||||||
name: '测试工单3',
|
name: '测试工单3',
|
||||||
progressRate: 0.23232,
|
progressRate: 0.23232,
|
||||||
|
size: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '4',
|
id: '4',
|
||||||
name: '测试工单4',
|
name: '测试工单4',
|
||||||
progressRate: 0.32323,
|
progressRate: 0.32323,
|
||||||
},
|
size: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
name: '测试工单4',
|
||||||
|
progressRate: 0.32323,
|
||||||
|
size: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
name: '测试工单4',
|
||||||
|
size: '1100*5554*22',
|
||||||
|
progressRate: 0.32323,
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
name: '测试工单4',
|
||||||
|
size: '1100*5554*22',
|
||||||
|
progressRate: 0.32323,
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '8',
|
||||||
|
name: '测试工单4',
|
||||||
|
progressRate: 0.32323,
|
||||||
|
size: '1100*5554*22',
|
||||||
|
plan: 11111,
|
||||||
|
actualQuantity: 111,
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// id: '5',
|
// id: '5',
|
||||||
// name: '测试工单',
|
// name: '测试工单',
|
||||||
@@ -389,7 +454,10 @@ export default {
|
|||||||
return {
|
return {
|
||||||
id: ele.id,
|
id: ele.id,
|
||||||
name: ele.name,
|
name: ele.name,
|
||||||
progressRate: parseFloat((ele.progressRate * 100).toFixed(3)),
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
|
||||||
|
specifications: ele.specifications ? '规格' + ele.specifications :null,
|
||||||
|
planQuantity: ele.plan ? '计划' + ele.plan + '片' : null,
|
||||||
|
actualQuantity: ele.actualQuantity + '片',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -413,32 +481,65 @@ export default {
|
|||||||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||||||
</span>`,
|
</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div> ${item.status || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == false ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:13px 10px 0 0 '}"></div> ${item.error == true ? '是' : '否' || ''}</span>`,
|
||||||
]);
|
]);
|
||||||
this.eqConfig.data = eqArr;
|
this.eqConfig.data = eqArr;
|
||||||
let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
let data = [
|
||||||
// let arr = [5, 6, 2, 4, 7, 9, 15];
|
{
|
||||||
// 因为7个数,所以长度减去一次为最大循环次数
|
lineName: 'D62',
|
||||||
for (let i = 0; i < arr.length - 1; i++) {
|
outputNum: '11111',
|
||||||
|
passRate: '0.9873'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: 'D63',
|
||||||
|
outputNum: '23212',
|
||||||
|
passRate: '0.9873'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: 'D61',
|
||||||
|
outputNum: '423323',
|
||||||
|
passRate: '0.9873'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: 'D64',
|
||||||
|
outputNum: '43434',
|
||||||
|
passRate: '0.9873'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
let nameList = [];
|
||||||
|
let passRateList = [];
|
||||||
|
let outputNumList = [];
|
||||||
|
// let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
||||||
|
for (let i = 0; i < data.length - 1; i++) {
|
||||||
// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
|
// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
|
||||||
for (let j = 0; j < arr.length - i - 1; j++) {
|
for (let j = 0; j < data.length - i - 1; j++) {
|
||||||
// 当前一个值大于后一个值
|
// 当前一个值大于后一个值
|
||||||
if (arr[j].substr(arr[j].length - 1, 1) > arr[j + 1].substr(arr[j + 1].length - 1, 1)) {
|
if (data[j].lineName.substr(data[j].lineName.length - 1, 1) > data[j + 1].lineName.substr(data[j + 1].lineName.length - 1, 1)) {
|
||||||
// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
|
// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
|
||||||
let temp = arr[j];
|
let temp = data[j];
|
||||||
arr[j] = arr[j + 1];
|
data[j] = data[j + 1];
|
||||||
arr[j + 1] = temp;
|
data[j + 1] = temp;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(arr);
|
data.forEach((ele) => {
|
||||||
this.$refs['eqScrollBoard'].updateRows(eqArr);
|
// if (item.id == ele.productionLineId) {
|
||||||
this.$refs.productLineChart.initChart(
|
// if (item.name.substr(0, 1) == "D") {
|
||||||
arr,
|
// console.log(ele)
|
||||||
[98, 97, 98.7, 98.5, 98.3],
|
nameList.push(ele.lineName);
|
||||||
[3134, 2323, 3232, 3233, 2321]
|
outputNumList.push(ele.outputNum);
|
||||||
);
|
passRateList.push(ele.passRate);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.productLineChart.initChart(
|
||||||
|
nameList,
|
||||||
|
passRateList,
|
||||||
|
outputNumList
|
||||||
|
);
|
||||||
|
})
|
||||||
// this.getList()
|
// this.getList()
|
||||||
this.initWebSocket();
|
this.initWebSocket();
|
||||||
this.SJGInitWebSocket();
|
this.SJGInitWebSocket();
|
||||||
@@ -630,7 +731,10 @@ export default {
|
|||||||
return {
|
return {
|
||||||
id: ele.id,
|
id: ele.id,
|
||||||
name: ele.name,
|
name: ele.name,
|
||||||
progressRate: parseFloat((ele.progressRate * 100).toFixed(3)),
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
|
||||||
|
specifications: ele.specifications ? '规格' + ele.specifications :null,
|
||||||
|
planQuantity: ele.planQuantity ? '计划' + ele.planQuantity + '片' : null,
|
||||||
|
actualQuantity: ele.actualQuantity ? ele.actualQuantity + '片' : null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -644,12 +748,8 @@ export default {
|
|||||||
`<span style="color:rgba(255,255,255,0.5)">${
|
`<span style="color:rgba(255,255,255,0.5)">${
|
||||||
item.code || ''
|
item.code || ''
|
||||||
}</span>`,
|
}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)"><span style="color:rgba(255,255,255,0.5)"></span> ${
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.status || ''}</span>`,
|
||||||
item.status || ''
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == false ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:10px 10px 0 0 '}"></div> ${item.error == true ?'是' :'否' || ''}</span>`,
|
||||||
}</span>`,
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${
|
|
||||||
item.error || ''
|
|
||||||
}</span>`,
|
|
||||||
]);
|
]);
|
||||||
this.eqConfig.data = eqArr;
|
this.eqConfig.data = eqArr;
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
@@ -661,29 +761,29 @@ export default {
|
|||||||
let nameList = [];
|
let nameList = [];
|
||||||
let passRateList = [];
|
let passRateList = [];
|
||||||
let outputNumList = [];
|
let outputNumList = [];
|
||||||
this.SJGWsData.detData.forEach((ele) => {
|
|
||||||
// if (item.id == ele.productionLineId) {
|
|
||||||
// if (item.name.substr(0, 1) == "D") {
|
|
||||||
// console.log(ele)
|
|
||||||
nameList.push(ele.lineName);
|
|
||||||
outputNumList.push(ele.outputNum);
|
|
||||||
passRateList.push(ele.passRate);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
// let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
// let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
||||||
for (let i = 0; i < nameList.length - 1; i++) {
|
for (let i = 0; i < this.SJGWsData.detData.length - 1; i++) {
|
||||||
// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
|
// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
|
||||||
for (let j = 0; j < nameList.length - i - 1; j++) {
|
for (let j = 0; j < this.SJGWsData.detData.length - i - 1; j++) {
|
||||||
// 当前一个值大于后一个值
|
// 当前一个值大于后一个值
|
||||||
if (nameList[j].substr(nameList[j].length - 1, 1) > nameList[j + 1].substr(nameList[j + 1].length - 1, 1)) {
|
if (this.SJGWsData.detData[j].lineName.substr(this.SJGWsData.detData[j].lineName.length - 1, 1) > this.SJGWsData.detData[j + 1].lineName.substr(this.SJGWsData.detData[j + 1].lineName.length - 1, 1)) {
|
||||||
// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
|
// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
|
||||||
let temp = nameList[j];
|
let temp = this.SJGWsData.detData[j];
|
||||||
nameList[j] = nameList[j + 1];
|
this.SJGWsData.detData[j] = this.SJGWsData.detData[j + 1];
|
||||||
nameList[j + 1] = temp;
|
this.SJGWsData.detData[j + 1] = temp;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.SJGWsData.detData.forEach((ele) => {
|
||||||
|
// if (item.id == ele.productionLineId) {
|
||||||
|
// if (item.name.substr(0, 1) == "D") {
|
||||||
|
// console.log(ele)
|
||||||
|
nameList.push(ele.lineName);
|
||||||
|
outputNumList.push(ele.outputNum);
|
||||||
|
passRateList.push(ele.passRate);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
});
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.productLineChart.initChart(
|
this.$refs.productLineChart.initChart(
|
||||||
nameList,
|
nameList,
|
||||||
@@ -691,7 +791,23 @@ export default {
|
|||||||
outputNumList
|
outputNumList
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
} else if (this.SJGInitWebSocket === 'inspection') {
|
} else if (this.SJGWsData.type === 'inspection') {
|
||||||
|
let processArr = this.SJGWsData.detData.map((item, index) => [
|
||||||
|
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||||
|
</span>`,
|
||||||
|
`<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||||||
|
</span>`,
|
||||||
|
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''
|
||||||
|
}</span>`,
|
||||||
|
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''
|
||||||
|
}</span>`,
|
||||||
|
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''
|
||||||
|
}</span>`,
|
||||||
|
]);
|
||||||
|
this.processConfig.data = processArr;
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
this.$refs['processScrollBoard'].updateRows(processArr);
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -742,6 +858,63 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.split{
|
||||||
|
width: 1px;
|
||||||
|
// display: inline-block;
|
||||||
|
height: 14px;
|
||||||
|
// margin-top: 2px;
|
||||||
|
// line-height: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
opacity:calc(.6);
|
||||||
|
margin-right: 8px;
|
||||||
|
background-color: #C8CDD7;
|
||||||
|
// border: 1px solid #C8CDD7;
|
||||||
|
}
|
||||||
|
.myLegend {
|
||||||
|
position: absolute;
|
||||||
|
top: -28px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, .6);
|
||||||
|
|
||||||
|
.barLegend {
|
||||||
|
// float: left;
|
||||||
|
background: linear-gradient(#9DD5FF, #1295FF);
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barText {
|
||||||
|
// float: right;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barCircleLegend {
|
||||||
|
width: 15px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: rgba(255, 209, 96, 1);
|
||||||
|
position: absolute;
|
||||||
|
left: -4.1715px;
|
||||||
|
top: 21.7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barCircle {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 209, 96, 1);
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 1.7px;
|
||||||
|
}
|
||||||
|
.barCircleText {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
.visual-container {
|
.visual-container {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 1080px;
|
height: 1080px;
|
||||||
@@ -797,12 +970,39 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.now-secondary-title {
|
.now-secondary-title {
|
||||||
|
display: inline-block;
|
||||||
|
width: 70px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1em;
|
font-size: 14px;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.orderSize {
|
||||||
|
display: inline-block;
|
||||||
|
width: 120px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2em;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.orderFinish {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2em;
|
||||||
|
text-align: right;
|
||||||
|
color: rgba(0, 255, 247, 1);
|
||||||
|
}
|
||||||
|
.orderPlan {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2em;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
.now-team-content {
|
.now-team-content {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
@@ -815,8 +1015,9 @@ export default {
|
|||||||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||||
}
|
}
|
||||||
::v-deep .el-progress__text {
|
::v-deep .el-progress__text {
|
||||||
|
width: 50px;
|
||||||
margin-top: -70px;
|
margin-top: -70px;
|
||||||
margin-left: 490px;
|
margin-left: 538px;
|
||||||
// background-color: unset;
|
// background-color: unset;
|
||||||
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -33,38 +34,49 @@ import {
|
|||||||
getcoreAlarmLogPage
|
getcoreAlarmLogPage
|
||||||
} from '@/api/base/coreAlarmLog';
|
} from '@/api/base/coreAlarmLog';
|
||||||
import {DICT_TYPE, getDictDatas, publicFormatter } from "@/utils/dict";
|
import {DICT_TYPE, getDictDatas, publicFormatter } from "@/utils/dict";
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'alarmTime',
|
prop: 'alarmTime',
|
||||||
label: '报警时间',
|
label: '报警时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'alarmSource',
|
prop: 'alarmSource',
|
||||||
label: '报警来源'
|
label: '报警来源',
|
||||||
|
width: 200,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'alarmType',
|
prop: 'alarmType',
|
||||||
label: '报警类型'
|
label: '报警类型',
|
||||||
|
width: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'alarmGrade',
|
prop: 'alarmGrade',
|
||||||
label: '报警级别',
|
label: '报警级别',
|
||||||
filter: publicFormatter(DICT_TYPE.EQU_ALARM_LEVEL)
|
filter: publicFormatter(DICT_TYPE.EQU_ALARM_LEVEL),
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'alarmReason',
|
prop: 'alarmReason',
|
||||||
label: '报警原因'
|
label: '报警原因',
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'alarmContent',
|
prop: 'alarmContent',
|
||||||
label: '报警详细'
|
label: '报警详细',
|
||||||
|
showOverflowtooltip: true
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -74,7 +86,7 @@ export default {
|
|||||||
tableBtn: [].filter((v)=>v),
|
tableBtn: [].filter((v)=>v),
|
||||||
tableData: [],
|
tableData: [],
|
||||||
listQuery: {
|
listQuery: {
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 0,
|
total: 0,
|
||||||
alarmSource: undefined,
|
alarmSource: undefined,
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-20 16:20:39
|
* @LastEditTime: 2024-04-02 16:46:17
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -96,7 +96,7 @@ export default {
|
|||||||
dataRule: {
|
dataRule: {
|
||||||
code: [{ required: true, message: "客户编号不能为空", trigger: "blur" }],
|
code: [{ required: true, message: "客户编号不能为空", trigger: "blur" }],
|
||||||
name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
|
name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
|
||||||
contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
|
// contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
|
||||||
telephone: [
|
telephone: [
|
||||||
{ required: false, trigger: "blur", message: "手机号不能为空" },
|
{ required: false, trigger: "blur", message: "手机号不能为空" },
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -45,41 +46,56 @@ import {
|
|||||||
getCustomerPage,
|
getCustomerPage,
|
||||||
deleteCustomer
|
deleteCustomer
|
||||||
} from '@/api/base/coreCustomer';
|
} from '@/api/base/coreCustomer';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '客户名称'
|
label: '客户名称',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '客户编码'
|
label: '客户编码',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'contact',
|
prop: 'contact',
|
||||||
label: '联系人'
|
label: '联系人',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'telephone',
|
prop: 'telephone',
|
||||||
label: '联系电话'
|
label: '联系电话',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'address',
|
prop: 'address',
|
||||||
label: '地址'
|
label: '地址',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -122,7 +138,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-customer:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-customer:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-customer:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -45,6 +46,7 @@ import {
|
|||||||
getCoreDepartmentPage,
|
getCoreDepartmentPage,
|
||||||
deleteCoreDepartment
|
deleteCoreDepartment
|
||||||
} from '@/api/base/coreDepartment';
|
} from '@/api/base/coreDepartment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -71,7 +73,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -108,7 +110,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-department:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-department:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-department:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -64,8 +64,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="进场日期" prop="enterTime" :rules="[]">
|
<el-form-item label="进厂日期" prop="enterTime" :rules="[]">
|
||||||
<el-date-picker v-model="form.enterTime" :disabled="disabled" type="datetime" placeholder="请选择进场日期"
|
<el-date-picker v-model="form.enterTime" :disabled="disabled" type="datetime" placeholder="请选择进厂日期"
|
||||||
value-format="timestamp"></el-date-picker>
|
value-format="timestamp"></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|||||||
@@ -12,7 +12,8 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emitFun="handleEmitFun">
|
@emitFun="handleEmitFun"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -78,7 +79,7 @@
|
|||||||
queryParams: {
|
queryParams: {
|
||||||
equipmentId: form.id,
|
equipmentId: form.id,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
},
|
},
|
||||||
tableBtn: [
|
tableBtn: [
|
||||||
this.$auth.hasPermi('base:core-equipment-attr:update')
|
this.$auth.hasPermi('base:core-equipment-attr:update')
|
||||||
@@ -118,6 +119,7 @@ import {
|
|||||||
} from '@/api/base/equipment';
|
} from '@/api/base/equipment';
|
||||||
import Editor from '@/components/Editor';
|
import Editor from '@/components/Editor';
|
||||||
import AssetsUpload from './components/AssetsUpload.vue';
|
import AssetsUpload from './components/AssetsUpload.vue';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Equipment',
|
name: 'Equipment',
|
||||||
@@ -125,7 +127,7 @@ export default {
|
|||||||
Editor,
|
Editor,
|
||||||
EquipmentDrawer,
|
EquipmentDrawer,
|
||||||
},
|
},
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
searchBarKeys: ['name', 'code'],
|
searchBarKeys: ['name', 'code'],
|
||||||
@@ -154,11 +156,11 @@ export default {
|
|||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
fixed: true,
|
fixed: true,
|
||||||
width: 180,
|
minWidth: 180,
|
||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
{ prop: 'name', label: '设备名称' },
|
{ prop: 'name', label: '设备名称', minWidth: 180, showOverflowtooltip: true },
|
||||||
{ width: 256, prop: 'code', label: '设备编码' },
|
{ minWidth: 250, prop: 'code', label: '设备编码' },
|
||||||
{ prop: 'equipmentTypeName', label: '设备类型' },
|
{ prop: 'equipmentTypeName', label: '设备类型' },
|
||||||
{ prop: 'enName', label: '英文名称' },
|
{ prop: 'enName', label: '英文名称' },
|
||||||
{ prop: 'abbr', label: '缩写' },
|
{ prop: 'abbr', label: '缩写' },
|
||||||
@@ -209,7 +211,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: (this.$auth.hasPermi('base:core-equipment:export') || this.$auth.hasPermi('base:core-equipment:create')) ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-equipment:export')
|
type: this.$auth.hasPermi('base:core-equipment:export')
|
||||||
@@ -484,7 +486,7 @@ export default {
|
|||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
code: '',
|
code: '',
|
||||||
name: '',
|
name: '',
|
||||||
special: false
|
special: false
|
||||||
|
|||||||
@@ -12,7 +12,8 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emitFun="handleEmitFun">
|
@emitFun="handleEmitFun"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -51,13 +52,13 @@
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
import DialogForm from './dialogForm.vue';
|
import DialogForm from './dialogForm.vue';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
// import { getAccessToken } from '@/utils/auth';
|
// import { getAccessToken } from '@/utils/auth';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EquipmentLineBind',
|
name: 'EquipmentLineBind',
|
||||||
components: { DialogForm },
|
components: { DialogForm },
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
basePath: '/base/core-equipment-bind-section',
|
basePath: '/base/core-equipment-bind-section',
|
||||||
@@ -81,12 +82,13 @@ export default {
|
|||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
fixed: true,
|
fixed: true,
|
||||||
width: 180,
|
width: 150,
|
||||||
|
showOverflowtooltip: true,
|
||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
{ prop: 'productionLineName', label: '产线名称' },
|
{ prop: 'productionLineName', label: '产线名称', width: 120, showOverflowtooltip: true },
|
||||||
{ prop: 'workshopSectionName', label: '工段名称' },
|
{ prop: 'workshopSectionName', label: '工段名称', width: 120, showOverflowtooltip: true },
|
||||||
{ prop: 'equipmentName', label: '设备名称' },
|
{ prop: 'equipmentName', label: '设备名称', width: 150, showOverflowtooltip: true },
|
||||||
{ prop: 'sort', label: '工段中排序' },
|
{ prop: 'sort', label: '工段中排序' },
|
||||||
{
|
{
|
||||||
prop: 'lineDataType',
|
prop: 'lineDataType',
|
||||||
@@ -124,7 +126,8 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-equipment-bind-section:create')
|
||||||
|
? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-equipment-bind-section:create')
|
type: this.$auth.hasPermi('base:core-equipment-bind-section:create')
|
||||||
@@ -236,7 +239,7 @@ export default {
|
|||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
equipmentName: null,
|
equipmentName: null,
|
||||||
productionLineId: null,
|
productionLineId: null,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -12,7 +12,8 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emitFun="handleEmitFun">
|
@emitFun="handleEmitFun"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -50,6 +51,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
createEquipmentType,
|
createEquipmentType,
|
||||||
@@ -65,7 +67,7 @@ import {
|
|||||||
export default {
|
export default {
|
||||||
name: 'EquipmentType',
|
name: 'EquipmentType',
|
||||||
components: {},
|
components: {},
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
searchBarKeys: ['name'],
|
searchBarKeys: ['name'],
|
||||||
@@ -88,7 +90,7 @@ export default {
|
|||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
fixed: true,
|
fixed: true,
|
||||||
width: 180,
|
minWidth: 180,
|
||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
{ prop: 'name', label: '类型名称' },
|
{ prop: 'name', label: '类型名称' },
|
||||||
@@ -109,7 +111,8 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-equipment-type:create')
|
||||||
|
? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-equipment-type:create')
|
type: this.$auth.hasPermi('base:core-equipment-type:create')
|
||||||
@@ -171,7 +174,7 @@ export default {
|
|||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
name: '',
|
name: '',
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -43,38 +44,51 @@ import basicPage from '../../core/mixins/basic-page';
|
|||||||
import { parseTime } from '../../core/mixins/code-filter';
|
import { parseTime } from '../../core/mixins/code-filter';
|
||||||
import { getHotMaterialPage, deleteHotMaterial } from '@/api/base/coreHotMaterial';
|
import { getHotMaterialPage, deleteHotMaterial } from '@/api/base/coreHotMaterial';
|
||||||
import { publicFormatter } from "@/utils/dict";
|
import { publicFormatter } from "@/utils/dict";
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
width: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '原料名称'
|
label: '原料名称',
|
||||||
|
minWidth: 250,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '原料编码'
|
label: '原料编码',
|
||||||
|
width: 250,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'unit',
|
prop: 'unit',
|
||||||
label: '单位',
|
label: '单位',
|
||||||
filter: publicFormatter('unit_dict')
|
filter: publicFormatter('unit_dict'),
|
||||||
|
width: 90,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'dailyCost',
|
prop: 'dailyCost',
|
||||||
label: '每日消耗量'
|
label: '每日消耗量',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -123,7 +137,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-hot-material-check:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-hot-material-check:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-hot-material-check:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -45,6 +46,7 @@ import {
|
|||||||
getCoreMajorPage,
|
getCoreMajorPage,
|
||||||
deleteCoreMajor
|
deleteCoreMajor
|
||||||
} from '@/api/base/coreMajor';
|
} from '@/api/base/coreMajor';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -71,7 +73,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -108,7 +110,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-major:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-major:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-major:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -2,15 +2,17 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-13 13:54:01
|
* @LastEditTime: 2024-03-27 13:47:24
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-drawer
|
<el-drawer
|
||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
:show-close="false"
|
:show-close="false"
|
||||||
:wrapper-closable="isdetail"
|
:wrapper-closable="true"
|
||||||
class="drawer"
|
class="drawer"
|
||||||
|
:before-close="beforeClose"
|
||||||
|
@closed="$emit('destroy')"
|
||||||
size="60%">
|
size="60%">
|
||||||
<small-title slot="title" :no-padding="true">
|
<small-title slot="title" :no-padding="true">
|
||||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||||
@@ -262,6 +264,15 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
beforeClose(done) {
|
||||||
|
if (!this.isdetail) {
|
||||||
|
this.$confirm('确认关闭?')
|
||||||
|
.then(_ => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch(_ => {});
|
||||||
|
}
|
||||||
|
},
|
||||||
clearArea() {
|
clearArea() {
|
||||||
this.$set(this.dataForm, 'area', 0)
|
this.$set(this.dataForm, 'area', 0)
|
||||||
this.$set(this.dataForm, 'weight', 0)
|
this.$set(this.dataForm, 'weight', 0)
|
||||||
|
|||||||
@@ -9,11 +9,12 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
:width="120"
|
:Width="120"
|
||||||
label="操作"
|
label="操作"
|
||||||
:method-list="tableBtn"
|
:method-list="tableBtn"
|
||||||
@clickBtn="handleClick" />
|
@clickBtn="handleClick" />
|
||||||
@@ -26,7 +27,8 @@
|
|||||||
<add-or-update
|
<add-or-update
|
||||||
v-if="addOrUpdateVisible"
|
v-if="addOrUpdateVisible"
|
||||||
ref="addOrUpdate"
|
ref="addOrUpdate"
|
||||||
@refreshDataList="getDataList" />
|
@refreshDataList="getDataList"
|
||||||
|
@destroy="addOrUpdateVisible = false" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -39,43 +41,58 @@ import {
|
|||||||
getCoreProductPage,
|
getCoreProductPage,
|
||||||
deleteCoreProduct
|
deleteCoreProduct
|
||||||
} from '@/api/base/coreProduct';
|
} from '@/api/base/coreProduct';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '产品名称'
|
label: '产品名称',
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '产品编码'
|
label: '产品编码',
|
||||||
|
minWidth: 190,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'productType',
|
prop: 'productType',
|
||||||
label: '产品类型',
|
label: '产品类型',
|
||||||
filter: publicFormatter('product_type')
|
filter: publicFormatter('product_type'),
|
||||||
|
minWidth: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'specifications',
|
prop: 'specifications',
|
||||||
label: '规格'
|
label: '规格',
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'unit',
|
prop: 'unit',
|
||||||
label: '单位',
|
label: '单位',
|
||||||
filter: publicFormatter('unit_dict')
|
filter: publicFormatter('unit_dict'),
|
||||||
|
minWidth: 90,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注',
|
label: '备注',
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -124,7 +141,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-product:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-product:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-product:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -9,11 +9,12 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
:width="120"
|
:minWidth="120"
|
||||||
label="操作"
|
label="操作"
|
||||||
:method-list="tableBtn"
|
:method-list="tableBtn"
|
||||||
@clickBtn="handleClick" />
|
@clickBtn="handleClick" />
|
||||||
@@ -29,7 +30,7 @@
|
|||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
@confirm="handleConfirm"
|
@confirm="handleConfirm"
|
||||||
:before-close="handleCancel"
|
:before-close="handleCancel"
|
||||||
width="50%">
|
minWidth="50%">
|
||||||
<add-or-update
|
<add-or-update
|
||||||
ref="addOrUpdate"
|
ref="addOrUpdate"
|
||||||
@refreshDataList="successSubmit"></add-or-update>
|
@refreshDataList="successSubmit"></add-or-update>
|
||||||
@@ -48,34 +49,47 @@ import {
|
|||||||
import { getStatus } from '@/api/core/base/productionLine';
|
import { getStatus } from '@/api/core/base/productionLine';
|
||||||
import codeFilter from '../../core/mixins/code-filter';
|
import codeFilter from '../../core/mixins/code-filter';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂'
|
label: '工厂',
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'roomNameDict',
|
prop: 'roomNameDict',
|
||||||
label: '车间名称',
|
label: '车间名称',
|
||||||
filter: publicFormatter('workshop')
|
filter: publicFormatter('workshop'),
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '产线名称'
|
label: '产线名称',
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '产线编码'
|
label: '产线编码',
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'enabled',
|
prop: 'enabled',
|
||||||
label: '当前状态',
|
label: '当前状态',
|
||||||
filter: codeFilter('lineStatus')
|
filter: codeFilter('lineStatus'),
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// prop: 'tvalue',
|
// prop: 'tvalue',
|
||||||
@@ -83,16 +97,20 @@ const tableProps = [
|
|||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
prop: 'description',
|
prop: 'description',
|
||||||
label: '描述'
|
label: '描述',
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
minWidth: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -129,7 +147,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-production-line:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-production-line:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-production-line:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2023-11-22 10:27:43
|
* @LastEditTime: 2024-04-02 16:46:49
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -79,7 +79,7 @@ export default {
|
|||||||
dataRule: {
|
dataRule: {
|
||||||
code: [{ required: true, message: "供应商编号不能为空", trigger: "blur" }],
|
code: [{ required: true, message: "供应商编号不能为空", trigger: "blur" }],
|
||||||
name: [{ required: true, message: "供应商名称不能为空", trigger: "blur" }],
|
name: [{ required: true, message: "供应商名称不能为空", trigger: "blur" }],
|
||||||
contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
|
// contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
|
||||||
telephone: [
|
telephone: [
|
||||||
{ required: false, trigger: "blur", message: "手机号不能为空" },
|
{ required: false, trigger: "blur", message: "手机号不能为空" },
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -45,41 +46,56 @@ import {
|
|||||||
getCoreSupplierPage,
|
getCoreSupplierPage,
|
||||||
deleteCoreSupplier
|
deleteCoreSupplier
|
||||||
} from '@/api/base/coreSupplier';
|
} from '@/api/base/coreSupplier';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '添加时间',
|
label: '添加时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '供应商编码'
|
label: '供应商编码',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '供应商名称'
|
label: '供应商名称',
|
||||||
|
width: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'contact',
|
prop: 'contact',
|
||||||
label: '联系人'
|
label: '联系人',
|
||||||
|
width: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'telephone',
|
prop: 'telephone',
|
||||||
label: '联系电话'
|
label: '联系电话',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'address',
|
prop: 'address',
|
||||||
label: '地址'
|
label: '地址',
|
||||||
|
width: 180,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
minWidth: 90,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -116,7 +132,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-supplier:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-supplier:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-supplier:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-22 08:53:20
|
* @LastEditTime: 2024-04-08 10:21:46
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -214,7 +214,9 @@ export default {
|
|||||||
actualQuantity: this.dataForm.actualQuantity
|
actualQuantity: this.dataForm.actualQuantity
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.$modal.msgSuccess("操作成功!工单状态稍后将会更新!");
|
this.$modal.msgSuccess("操作成功!工单状态稍后将会更新!");
|
||||||
this.saveData(tempList)
|
if (tempList.length > 0) {
|
||||||
|
this.saveData(tempList)
|
||||||
|
}
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit("refreshDataList");
|
this.$emit("refreshDataList");
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-21 16:52:46
|
* @LastEditTime: 2024-04-10 16:16:31
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -182,7 +182,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="orderList">
|
:table-data="orderList"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="!isdetail"
|
v-if="!isdetail"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -200,23 +201,26 @@
|
|||||||
@pagination="getList" /> -->
|
@pagination="getList" /> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card" style="padding-bottom: 16px;">
|
<div v-if="$auth.hasPermiAnd(['base:material-product-bom-det:query', 'extend:process-flow:query'])">
|
||||||
<div class="boxTitle">
|
<div class="card" style="padding-bottom: 16px;">
|
||||||
<span class="blueTitle"></span>
|
<div class="boxTitle">
|
||||||
<span>预计用料信息</span>
|
<span class="blueTitle"></span>
|
||||||
|
<span>预计用料信息</span>
|
||||||
|
</div>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps1"
|
||||||
|
:page="listQuery1.pageNo"
|
||||||
|
:limit="listQuery1.pageSize"
|
||||||
|
:table-data="materialList"
|
||||||
|
:max-height="tableH" />
|
||||||
|
<!-- <pagination
|
||||||
|
v-show="listQuery1.total > 0"
|
||||||
|
:total="listQuery1.total"
|
||||||
|
:page.sync="listQuery1.pageNo"
|
||||||
|
:limit.sync="listQuery1.pageSize"
|
||||||
|
:page-sizes="[5, 10, 15]"
|
||||||
|
@pagination="getList" /> -->
|
||||||
</div>
|
</div>
|
||||||
<base-table
|
|
||||||
:table-props="tableProps1"
|
|
||||||
:page="listQuery1.pageNo"
|
|
||||||
:limit="listQuery1.pageSize"
|
|
||||||
:table-data="materialList" />
|
|
||||||
<!-- <pagination
|
|
||||||
v-show="listQuery1.total > 0"
|
|
||||||
:total="listQuery1.total"
|
|
||||||
:page.sync="listQuery1.pageNo"
|
|
||||||
:limit.sync="listQuery1.pageSize"
|
|
||||||
:page-sizes="[5, 10, 15]"
|
|
||||||
@pagination="getList" /> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="drawer-body__footer">
|
<!-- <div class="drawer-body__footer">
|
||||||
@@ -235,6 +239,7 @@ import SmallTitle from './SmallTitle';
|
|||||||
import { publicFormatter } from "@/utils/dict";
|
import { publicFormatter } from "@/utils/dict";
|
||||||
import { parseTime } from '@/utils/ruoyi'
|
import { parseTime } from '@/utils/ruoyi'
|
||||||
import topTabVue from '../../order/base/orderManage/components/topTab.vue';
|
import topTabVue from '../../order/base/orderManage/components/topTab.vue';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableBtn = [
|
const tableBtn = [
|
||||||
{
|
{
|
||||||
@@ -292,9 +297,11 @@ const tableProps1 = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
mixins: [tableHeightMixin],
|
||||||
components: { SmallTitle, topTabVue },
|
components: { SmallTitle, topTabVue },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
heightNum: 380,
|
||||||
tableBtn,
|
tableBtn,
|
||||||
tableProps,
|
tableProps,
|
||||||
tableProps1,
|
tableProps1,
|
||||||
@@ -455,8 +462,8 @@ export default {
|
|||||||
// this.listQuery.total = response.data.total;
|
// this.listQuery.total = response.data.total;
|
||||||
});
|
});
|
||||||
// 获取预使用原料列表
|
// 获取预使用原料列表
|
||||||
console.log()
|
console.log('111我看看', this.dataForm.materialMethod)
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id && this.$auth.hasPermiAnd(['base:material-product-bom-det:query', 'extend:process-flow:query'])) {
|
||||||
if (this.dataForm.materialMethod === 1) {
|
if (this.dataForm.materialMethod === 1) {
|
||||||
// 产品
|
// 产品
|
||||||
getlistByProductId({
|
getlistByProductId({
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -62,7 +63,7 @@ import {
|
|||||||
getCoreWOList
|
getCoreWOList
|
||||||
} from '@/api/base/coreWorkOrder';
|
} from '@/api/base/coreWorkOrder';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -132,7 +133,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
components: {
|
components: {
|
||||||
AddWorkOrder,
|
AddWorkOrder,
|
||||||
AddOrUpdate,
|
AddOrUpdate,
|
||||||
@@ -156,92 +157,105 @@ export default {
|
|||||||
// showTip: '预使用原料信息'
|
// showTip: '预使用原料信息'
|
||||||
// }
|
// }
|
||||||
// : undefined,
|
// : undefined,
|
||||||
{
|
this.$auth.hasPermi(`base:core-work-order:update`)
|
||||||
type: 'active',
|
? {
|
||||||
btnName: '激活',
|
type: 'active',
|
||||||
showParam: {
|
btnName: '激活',
|
||||||
type: '|',
|
showParam: {
|
||||||
data: [
|
type: '|',
|
||||||
{
|
data: [
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 1
|
type: 'equal',
|
||||||
},
|
value: 1
|
||||||
{
|
},
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 3
|
type: 'equal',
|
||||||
}
|
value: 3
|
||||||
]
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
: undefined,
|
||||||
{
|
this.$auth.hasPermi(`base:core-work-order:update`)
|
||||||
type: 'pause',
|
? {
|
||||||
btnName: '暂停',
|
type: 'pause',
|
||||||
showParam: {
|
btnName: '暂停',
|
||||||
type: '|',
|
showParam: {
|
||||||
data: [
|
type: '|',
|
||||||
{
|
data: [
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 2
|
type: 'equal',
|
||||||
}
|
value: 2
|
||||||
]
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
: undefined,
|
||||||
{
|
this.$auth.hasPermi(`base:core-work-order:update`)
|
||||||
type: 'nullify',
|
? {
|
||||||
btnName: '作废',
|
type: 'nullify',
|
||||||
showParam: {
|
btnName: '作废',
|
||||||
type: '|',
|
showParam: {
|
||||||
data: [
|
type: '|',
|
||||||
{
|
data: [
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 1
|
type: 'equal',
|
||||||
}
|
value: 1
|
||||||
]
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
: undefined,
|
||||||
{
|
this.$auth.hasPermi(`base:core-work-order:update`)
|
||||||
type: 'finish',
|
? {
|
||||||
btnName: '完成',
|
type: 'finish',
|
||||||
showParam: {
|
btnName: '完成',
|
||||||
type: '|',
|
showParam: {
|
||||||
data: [
|
type: '|',
|
||||||
{
|
data: [
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 2
|
type: 'equal',
|
||||||
},
|
value: 2
|
||||||
{
|
},
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 3
|
type: 'equal',
|
||||||
}
|
value: 3
|
||||||
]
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
: undefined,
|
||||||
{
|
this.$auth.hasPermi(`base:core-work-order:update`)
|
||||||
type: 'stop',
|
? {
|
||||||
btnName: '终止',
|
type: 'stop',
|
||||||
showParam: {
|
btnName: '终止',
|
||||||
type: '|',
|
showParam: {
|
||||||
data: [
|
type: '|',
|
||||||
{
|
data: [
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 2
|
type: 'equal',
|
||||||
},
|
value: 2
|
||||||
{
|
},
|
||||||
name: 'status',
|
{
|
||||||
type: 'equal',
|
name: 'status',
|
||||||
value: 3
|
type: 'equal',
|
||||||
}
|
value: 3
|
||||||
]
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
: undefined,
|
||||||
this.$auth.hasPermi(`base:core-work-order:detail`)
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:core-work-order:query',
|
||||||
|
'base:order:query'
|
||||||
|
])
|
||||||
? {
|
? {
|
||||||
type: 'detail',
|
type: 'detail',
|
||||||
btnName: '查看详情',
|
btnName: '查看详情',
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -46,20 +47,27 @@ import {
|
|||||||
deleteCoreWorker
|
deleteCoreWorker
|
||||||
} from '@/api/base/coreWorker';
|
} from '@/api/base/coreWorker';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '创建时间',
|
label: '创建时间',
|
||||||
filter: parseTime
|
filter: parseTime,
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '姓名'
|
label: '姓名',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '员工号'
|
label: '员工号',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'sex',
|
prop: 'sex',
|
||||||
@@ -70,32 +78,44 @@ const tableProps = [
|
|||||||
prop: 'entryTime',
|
prop: 'entryTime',
|
||||||
label: '入职时间',
|
label: '入职时间',
|
||||||
filter: (val) => val ? moment(val).format('yyyy-MM-DD') : '',
|
filter: (val) => val ? moment(val).format('yyyy-MM-DD') : '',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'telephone',
|
prop: 'telephone',
|
||||||
label: '联系电话'
|
label: '联系电话',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'status',
|
prop: 'status',
|
||||||
label: '状态',
|
label: '状态',
|
||||||
filter: (val) => ['', '在职', '离职'][val]
|
filter: (val) => ['', '在职', '离职'][val],
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'departmentName',
|
prop: 'departmentName',
|
||||||
label: '部门'
|
label: '部门',
|
||||||
|
width: 120,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'majorName',
|
prop: 'majorName',
|
||||||
label: '专业'
|
label: '专业',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
width: 150,
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -143,7 +163,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-worker:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-worker:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-worker:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -45,6 +46,7 @@ import {
|
|||||||
getCWSectionPage,
|
getCWSectionPage,
|
||||||
deleteCWSection
|
deleteCWSection
|
||||||
} from '@/api/base/coreWorkshopSection';
|
} from '@/api/base/coreWorkshopSection';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -70,12 +72,13 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注'
|
label: '备注',
|
||||||
|
showOverflowtooltip: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -112,7 +115,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-workshop-section:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-workshop-section:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-workshop-section:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -1,19 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-drawer :visible.sync="drawer" :append-to-body="true" size="80%" >
|
<el-drawer
|
||||||
<small-title slot="title" :no-padding="true">
|
:visible.sync="drawer"
|
||||||
<!-- <template v-for="demo in demoList"> -->
|
:append-to-body="true"
|
||||||
<!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> -->
|
size="80%">
|
||||||
<!-- {{ $t('module.packingManage.printModelDesign') }} -->
|
<small-title
|
||||||
模板设计
|
slot="title"
|
||||||
<!-- </el-button> -->
|
:no-padding="true">
|
||||||
<!-- </template> -->
|
<!-- <template v-for="demo in demoList"> -->
|
||||||
</small-title>
|
<!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> -->
|
||||||
<el-card>
|
<!-- {{ $t('module.packingManage.printModelDesign') }} -->
|
||||||
<el-row style="margin-bottom: 10px">
|
模板设计
|
||||||
<el-col :span="4">
|
<!-- </el-button> -->
|
||||||
<!-- 模板选择 -->
|
<!-- </template> -->
|
||||||
|
</small-title>
|
||||||
|
<el-card>
|
||||||
|
<el-row style="margin-bottom: 10px">
|
||||||
|
<!-- <el-col :span="4"> -->
|
||||||
|
<!-- 模板选择 -->
|
||||||
|
|
||||||
<!-- <el-select
|
<!-- <el-select
|
||||||
v-model="mode"
|
v-model="mode"
|
||||||
filterable
|
filterable
|
||||||
:default-value="0"
|
:default-value="0"
|
||||||
@@ -25,393 +30,469 @@
|
|||||||
{{ opt.name }}
|
{{ opt.name }}
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select> -->
|
</el-select> -->
|
||||||
</el-col>
|
<!-- </el-col> -->
|
||||||
<el-col :span="20">
|
<el-col :span="24">
|
||||||
<!-- 纸张设置 -->
|
<!-- 纸张设置 -->
|
||||||
<el-button-group style="margin:0 10px">
|
<el-button-group style="margin: 0 10px">
|
||||||
<el-button v-for="(value,type) in paperTypes" :key="type" :type="curPaperType === type ? 'primary' : ' '"
|
<el-button
|
||||||
@click="setPaper(type,value)">
|
v-for="(value, type) in paperTypes"
|
||||||
{{ type }}
|
:key="type"
|
||||||
</el-button>
|
:type="curPaperType === type ? 'primary' : ' '"
|
||||||
</el-button-group>
|
@click="setPaper(type, value)">
|
||||||
<el-input-number style="margin:0 10px" :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin"
|
{{ type }}
|
||||||
:max="scaleMax" @change="changeScale" />
|
</el-button>
|
||||||
<el-popover v-model="paperPopVisible" placement="bottom" width="300" title="设置纸张宽高(mm)">
|
</el-button-group>
|
||||||
<div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
|
<el-input-number
|
||||||
<el-input v-model="paperWidth" type="number" style=" width: 100px; text-align: center" place="宽(mm)" />~
|
style="margin: 0 10px; width: 140px"
|
||||||
<el-input v-model="paperHeight" type="number" style=" width: 100px; text-align: center" place="高(mm)" />
|
:value="scaleValue"
|
||||||
</div>
|
:precision="2"
|
||||||
<div>
|
:step="0.1"
|
||||||
<el-button type="primary" style="width: 100%" size="mini" @click="otherPaper">确定</el-button>
|
:min="scaleMin"
|
||||||
</div>
|
:max="scaleMax"
|
||||||
<el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button>
|
@change="changeScale" />
|
||||||
</el-popover>
|
<el-popover
|
||||||
|
v-model="paperPopVisible"
|
||||||
|
placement="bottom"
|
||||||
|
width="300"
|
||||||
|
title="设置纸张宽高(mm)">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
">
|
||||||
|
<el-input
|
||||||
|
v-model="paperWidth"
|
||||||
|
type="number"
|
||||||
|
style="width: 100px; text-align: center"
|
||||||
|
place="宽(mm)" />
|
||||||
|
~
|
||||||
|
<el-input
|
||||||
|
v-model="paperHeight"
|
||||||
|
type="number"
|
||||||
|
style="width: 100px; text-align: center"
|
||||||
|
place="高(mm)" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
style="width: 100%"
|
||||||
|
size="mini"
|
||||||
|
@click="otherPaper">
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
slot="reference"
|
||||||
|
type="primary"
|
||||||
|
style="margin: 0 10px">
|
||||||
|
自定义宽高
|
||||||
|
</el-button>
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
<!-- <a-button-group>-->
|
<!-- <a-button-group>-->
|
||||||
<!-- <template v-for="(value,type) in paperTypes">-->
|
<!-- <template v-for="(value,type) in paperTypes">-->
|
||||||
<!-- <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">-->
|
<!-- <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">-->
|
||||||
<!-- {{ type }}-->
|
<!-- {{ type }}-->
|
||||||
<!-- </a-button>-->
|
<!-- </a-button>-->
|
||||||
<!-- </template>-->
|
<!-- </template>-->
|
||||||
<!-- <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">-->
|
<!-- <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">-->
|
||||||
<!-- <div slot="content">-->
|
<!-- <div slot="content">-->
|
||||||
<!-- <a-input-group compact style="margin: 10px 10px">-->
|
<!-- <a-input-group compact style="margin: 10px 10px">-->
|
||||||
<!-- <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"-->
|
<!-- <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"-->
|
||||||
<!-- placeholder="宽(mm)"/>-->
|
<!-- placeholder="宽(mm)"/>-->
|
||||||
<!-- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"-->
|
<!-- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"-->
|
||||||
<!-- placeholder="~" disabled-->
|
<!-- placeholder="~" disabled-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"-->
|
<!-- <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"-->
|
||||||
<!-- placeholder="高(mm)"/>-->
|
<!-- placeholder="高(mm)"/>-->
|
||||||
<!-- </a-input-group>-->
|
<!-- </a-input-group>-->
|
||||||
<!-- <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>-->
|
<!-- <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>-->
|
<!-- <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>-->
|
||||||
<!-- </a-popover>-->
|
<!-- </a-popover>-->
|
||||||
<!-- </a-button-group>-->
|
<!-- </a-button-group>-->
|
||||||
|
|
||||||
<!-- 预览/打印 -->
|
<!-- 预览/打印 -->
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
<el-button type="primary" icon="redo" @click="rotatePaper()">旋转</el-button>
|
<el-button
|
||||||
<el-button type="primary" icon="el-icon-view" @click="preView">
|
type="primary"
|
||||||
预览
|
icon="redo"
|
||||||
</el-button>
|
@click="rotatePaper()">
|
||||||
<!-- <el-button type="primary" icon="el-icon-printer" @click="print">
|
旋转
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-view"
|
||||||
|
@click="preView">
|
||||||
|
预览
|
||||||
|
</el-button>
|
||||||
|
<!-- <el-button type="primary" icon="el-icon-printer" @click="print">
|
||||||
直接打印
|
直接打印
|
||||||
</el-button> -->
|
</el-button> -->
|
||||||
<el-button type="primary" icon="el-icon-s-management" @click="save">
|
<el-button
|
||||||
保存
|
type="primary"
|
||||||
</el-button>
|
icon="el-icon-s-management"
|
||||||
<el-button type="danger" icon="el-icon-delete" @click="clearPaper">
|
@click="save">
|
||||||
清空
|
保存
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-button-group>
|
<el-button
|
||||||
<!-- 保存/清空 -->
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
</el-col>
|
@click="clearPaper">
|
||||||
</el-row>
|
清空
|
||||||
<el-row :gutter="24">
|
</el-button>
|
||||||
<el-col :span="4">
|
</el-button-group>
|
||||||
<el-card style="height: 100vh">
|
<!-- 保存/清空 -->
|
||||||
<el-row>
|
</el-col>
|
||||||
<el-col :span="24" class="rect-printElement-types hiprintEpContainer" />
|
</el-row>
|
||||||
</el-row>
|
<el-row :gutter="24">
|
||||||
</el-card>
|
<el-col :span="4">
|
||||||
</el-col>
|
<el-card style="height: 100vh">
|
||||||
<el-col :span="16">
|
<el-row>
|
||||||
<el-card class="card-design">
|
<el-col
|
||||||
<div id="hiprint-printTemplate" class="hiprint-printTemplate" />
|
:span="24"
|
||||||
</el-card>
|
class="rect-printElement-types hiprintEpContainer" />
|
||||||
</el-col>
|
</el-row>
|
||||||
<el-col :span="4" class="params_setting_container">
|
</el-card>
|
||||||
<el-card>
|
</el-col>
|
||||||
<el-row class="hinnn-layout-sider">
|
<el-col :span="16">
|
||||||
<div id="PrintElementOptionSetting" />
|
<el-card class="card-design">
|
||||||
</el-row>
|
<div
|
||||||
</el-card>
|
id="hiprint-printTemplate"
|
||||||
</el-col>
|
class="hiprint-printTemplate" />
|
||||||
</el-row>
|
</el-card>
|
||||||
<!-- 预览 -->
|
</el-col>
|
||||||
<print-preview ref="preView" />
|
<el-col
|
||||||
</el-card>
|
:span="4"
|
||||||
</el-drawer>
|
class="params_setting_container">
|
||||||
|
<el-card>
|
||||||
|
<el-row class="hinnn-layout-sider">
|
||||||
|
<div id="PrintElementOptionSetting" />
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 预览 -->
|
||||||
|
<print-preview ref="preView" />
|
||||||
|
</el-card>
|
||||||
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import printPreview from './preview';
|
||||||
import printPreview from './preview'
|
import { MessageBox } from 'element-ui';
|
||||||
import { MessageBox } from 'element-ui'
|
import { hiprint } from 'vue-plugin-hiprint';
|
||||||
import { hiprint } from 'vue-plugin-hiprint'
|
import providers from './providers';
|
||||||
import providers from './providers'
|
|
||||||
// import printData from './print-data'
|
// import printData from './print-data'
|
||||||
import $ from 'jquery'
|
import $ from 'jquery';
|
||||||
import SmallTitle from './SmallTitle.vue'
|
import SmallTitle from './SmallTitle.vue';
|
||||||
let hiprintTemplate = null
|
let hiprintTemplate = null;
|
||||||
export default {
|
export default {
|
||||||
name: 'PrintCustom',
|
name: 'PrintCustom',
|
||||||
components: { printPreview, SmallTitle },
|
components: { printPreview, SmallTitle },
|
||||||
// props: {
|
// props: {
|
||||||
// modelData: {
|
// modelData: {
|
||||||
// type: String,
|
// type: String,
|
||||||
// default: ''
|
// default: ''
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// paperPopVisible: false,
|
// paperPopVisible: false,
|
||||||
// 模板选择
|
// 模板选择
|
||||||
mode: 0,
|
mode: 0,
|
||||||
template: null,
|
template: null,
|
||||||
modeList: [],
|
modeList: [],
|
||||||
// 当前纸张
|
// 当前纸张
|
||||||
curPaper: {
|
curPaper: {
|
||||||
// type: 'other',
|
// type: 'other',
|
||||||
// width: 220,
|
// width: 220,
|
||||||
// height: 80
|
// height: 80
|
||||||
},
|
},
|
||||||
printData:{},
|
printData: {},
|
||||||
drawer: false,
|
drawer: false,
|
||||||
// 纸张类型
|
// 纸张类型
|
||||||
paperTypes: {
|
paperTypes: {
|
||||||
'A3': {
|
A3: {
|
||||||
width: 420,
|
width: 420,
|
||||||
height: 296.6
|
height: 296.6,
|
||||||
},
|
},
|
||||||
'A4': {
|
A4: {
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 297
|
height: 297,
|
||||||
},
|
},
|
||||||
'A5': {
|
A5: {
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 147.6
|
height: 147.6,
|
||||||
},
|
},
|
||||||
'B3': {
|
A6: {
|
||||||
width: 500,
|
width: 95,
|
||||||
height: 352.6
|
height: 125,
|
||||||
},
|
},
|
||||||
'B4': {
|
B3: {
|
||||||
width: 250,
|
width: 500,
|
||||||
height: 352.6
|
height: 352.6,
|
||||||
},
|
},
|
||||||
'B5': {
|
B4: {
|
||||||
width: 250,
|
width: 250,
|
||||||
height: 175.6
|
height: 352.6,
|
||||||
}
|
},
|
||||||
},
|
B5: {
|
||||||
scaleValue: 1,
|
width: 250,
|
||||||
scaleMax: 5,
|
height: 175.6,
|
||||||
scaleMin: 0.5,
|
},
|
||||||
// 自定义纸张
|
},
|
||||||
paperPopVisible: false,
|
scaleValue: 1,
|
||||||
paperWidth: '210',
|
scaleMax: 5,
|
||||||
paperHeight: '297'
|
scaleMin: 0.5,
|
||||||
}
|
// 自定义纸张
|
||||||
},
|
paperPopVisible: false,
|
||||||
computed: {
|
paperWidth: '210',
|
||||||
curPaperType() {
|
paperHeight: '297',
|
||||||
let type = 'other'
|
};
|
||||||
const types = this.paperTypes
|
},
|
||||||
for (const key in types) {
|
computed: {
|
||||||
const item = types[key]
|
curPaperType() {
|
||||||
const { width, height } = this.curPaper
|
let type = 'other';
|
||||||
if (item.width === width && item.height === height) {
|
const types = this.paperTypes;
|
||||||
type = key
|
for (const key in types) {
|
||||||
}
|
const item = types[key];
|
||||||
}
|
const { width, height } = this.curPaper;
|
||||||
return type
|
if (item.width === width && item.height === height) {
|
||||||
}
|
type = key;
|
||||||
},
|
}
|
||||||
created() {
|
}
|
||||||
// $('.hiprintEpContainer').empty()
|
return type;
|
||||||
},
|
},
|
||||||
destroyed () {
|
},
|
||||||
$('.hiprintEpContainer').empty()
|
created() {
|
||||||
console.log(11111)
|
// $('.hiprintEpContainer').empty()
|
||||||
},
|
},
|
||||||
methods: {
|
destroyed() {
|
||||||
// handleClose() {
|
$('.hiprintEpContainer').empty();
|
||||||
// $('.hiprintEpContainer').empty()
|
console.log(11111);
|
||||||
// },
|
},
|
||||||
closed() {
|
methods: {
|
||||||
$('.hiprintEpContainer').empty()
|
// handleClose() {
|
||||||
$('.hiprint-printTemplate').empty()
|
// $('.hiprintEpContainer').empty()
|
||||||
},
|
// },
|
||||||
init(data) {
|
closed() {
|
||||||
this.drawer = true
|
$('.hiprintEpContainer').empty();
|
||||||
this.modelData = data
|
$('.hiprint-printTemplate').empty();
|
||||||
this.modeList = providers.map((e) => {
|
},
|
||||||
return { type: e.type, name: e.name, value: e.value }
|
init(data) {
|
||||||
})
|
this.drawer = true;
|
||||||
this.changeMode()
|
this.modelData = data;
|
||||||
},
|
this.modeList = providers.map((e) => {
|
||||||
changeMode() {
|
return { type: e.type, name: e.name, value: e.value };
|
||||||
// hiprintTemplate.clear()
|
});
|
||||||
// console.log(this.modelData)
|
this.changeMode();
|
||||||
this.$nextTick(() => {
|
},
|
||||||
const { mode } = this
|
changeMode() {
|
||||||
const provider = providers[mode]
|
// hiprintTemplate.clear()
|
||||||
hiprint.init({
|
// console.log(this.modelData)
|
||||||
providers: [provider.f]
|
this.$nextTick(() => {
|
||||||
})
|
const { mode } = this;
|
||||||
|
const provider = providers[mode];
|
||||||
|
hiprint.init({
|
||||||
|
providers: [provider.f],
|
||||||
|
});
|
||||||
|
|
||||||
// $('#hiprint-printTemplate').empty()
|
// $('#hiprint-printTemplate').empty()
|
||||||
// console.log(JSON.parse(this.modelData))
|
// console.log(JSON.parse(this.modelData))
|
||||||
hiprint.setConfig()
|
hiprint.setConfig();
|
||||||
// 替换配置
|
// 替换配置
|
||||||
hiprint.setConfig({
|
hiprint.setConfig({
|
||||||
movingDistance: 2.5,
|
movingDistance: 2.5,
|
||||||
text: {
|
text: {
|
||||||
supportOptions: [
|
supportOptions: [
|
||||||
{
|
{
|
||||||
name: 'styler',
|
name: 'styler',
|
||||||
hidden: true
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'formatter',
|
name: 'formatter',
|
||||||
hidden: true
|
hidden: true,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
// console.log(this.modelData)
|
// console.log(this.modelData)
|
||||||
// console.log($('#hiprint-printTemplate').empty())
|
// console.log($('#hiprint-printTemplate').empty())
|
||||||
// if () {
|
// if () {
|
||||||
// console.log(this.modelData);
|
// console.log(this.modelData);
|
||||||
// $('.hiprintEpContainer').empty()
|
// $('.hiprintEpContainer').empty()
|
||||||
// hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
// hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
||||||
// $('.hiprint-printTemplate').empty()
|
// $('.hiprint-printTemplate').empty()
|
||||||
// hiprintTemplate = new hiprint.PrintTemplate({
|
// hiprintTemplate = new hiprint.PrintTemplate({
|
||||||
// template: JSON.parse(this.modelData),
|
// template: JSON.parse(this.modelData),
|
||||||
// settingContainer: '#PrintElementOptionSetting',
|
// settingContainer: '#PrintElementOptionSetting',
|
||||||
// paginationContainer: '.hiprint-printPagination'
|
// paginationContainer: '.hiprint-printPagination'
|
||||||
// })
|
// })
|
||||||
// } else {
|
// } else {
|
||||||
$('.hiprintEpContainer').empty()
|
$('.hiprintEpContainer').empty();
|
||||||
console.log(this.modelData || {});
|
console.log(this.modelData || {});
|
||||||
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
hiprint.PrintElementTypeManager.build(
|
||||||
$('.hiprint-printTemplate').empty()
|
'.hiprintEpContainer',
|
||||||
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
provider.value
|
||||||
const template = provider.value
|
);
|
||||||
// console.log(template)
|
$('.hiprint-printTemplate').empty();
|
||||||
if (this.modelData) {
|
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
||||||
hiprintTemplate = new hiprint.PrintTemplate({
|
const template = provider.value;
|
||||||
template: JSON.parse(this.modelData),
|
// console.log(template)
|
||||||
settingContainer: '#PrintElementOptionSetting',
|
if (this.modelData) {
|
||||||
paginationContainer: '.hiprint-printPagination'
|
hiprintTemplate = new hiprint.PrintTemplate({
|
||||||
})
|
template: JSON.parse(this.modelData),
|
||||||
} else {
|
settingContainer: '#PrintElementOptionSetting',
|
||||||
hiprintTemplate = new hiprint.PrintTemplate({
|
paginationContainer: '.hiprint-printPagination',
|
||||||
template:{},
|
});
|
||||||
settingContainer: '#PrintElementOptionSetting',
|
} else {
|
||||||
paginationContainer: '.hiprint-printPagination'
|
hiprintTemplate = new hiprint.PrintTemplate({
|
||||||
})
|
template: {},
|
||||||
}
|
settingContainer: '#PrintElementOptionSetting',
|
||||||
// }
|
paginationContainer: '.hiprint-printPagination',
|
||||||
hiprintTemplate.design('#hiprint-printTemplate')
|
});
|
||||||
// console.log(hiprintTemplate)
|
}
|
||||||
console.log(hiprintTemplate);
|
// }
|
||||||
// hiprintTemplate.design('#hiprint-printTemplate', { grid: true })
|
hiprintTemplate.design('#hiprint-printTemplate');
|
||||||
// 获取当前放大比例, 当zoom时传true 才会有
|
// console.log(hiprintTemplate)
|
||||||
this.scaleValue = hiprintTemplate.editingPanel.scale || 1
|
console.log(hiprintTemplate);
|
||||||
// this.scaleValue = hiprintTemplate.editingPanel.scale || 1
|
// hiprintTemplate.design('#hiprint-printTemplate', { grid: true })
|
||||||
})
|
// 获取当前放大比例, 当zoom时传true 才会有
|
||||||
},
|
this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
|
||||||
/**
|
// this.scaleValue = hiprintTemplate.editingPanel.scale || 1
|
||||||
* 设置纸张大小
|
});
|
||||||
* @param type [A3, A4, A5, B3, B4, B5, other]
|
},
|
||||||
* @param value {width,height} mm
|
/**
|
||||||
*/
|
* 设置纸张大小
|
||||||
setPaper(type, value) {
|
* @param type [A3, A4, A5, B3, B4, B5, other]
|
||||||
try {
|
* @param value {width,height} mm
|
||||||
if (Object.keys(this.paperTypes).includes(type)) {
|
*/
|
||||||
this.curPaper = { type: type, width: value.width, height: value.height }
|
setPaper(type, value) {
|
||||||
hiprintTemplate.setPaper(value.width, value.height)
|
try {
|
||||||
} else {
|
if (Object.keys(this.paperTypes).includes(type)) {
|
||||||
this.curPaper = { type: 'other', width: value.width, height: value.height }
|
this.curPaper = {
|
||||||
hiprintTemplate.setPaper(value.width, value.height)
|
type: type,
|
||||||
}
|
width: value.width,
|
||||||
} catch (error) {
|
height: value.height,
|
||||||
this.$message.error(`操作失败: ${error}`)
|
};
|
||||||
}
|
hiprintTemplate.setPaper(value.width, value.height);
|
||||||
},
|
} else {
|
||||||
changeScale(currentValue, oldValue) {
|
this.curPaper = {
|
||||||
let big = false
|
type: 'other',
|
||||||
currentValue <= oldValue ? big = false : big = true
|
width: value.width,
|
||||||
let scaleValue = this.scaleValue
|
height: value.height,
|
||||||
if (big) {
|
};
|
||||||
scaleValue += 0.1
|
hiprintTemplate.setPaper(value.width, value.height);
|
||||||
if (scaleValue > this.scaleMax) scaleValue = 5
|
}
|
||||||
} else {
|
} catch (error) {
|
||||||
scaleValue -= 0.1
|
this.$message.error(`操作失败: ${error}`);
|
||||||
if (scaleValue < this.scaleMin) scaleValue = 0.5
|
}
|
||||||
}
|
},
|
||||||
if (hiprintTemplate) {
|
changeScale(currentValue, oldValue) {
|
||||||
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
|
let big = false;
|
||||||
hiprintTemplate.zoom(scaleValue)
|
currentValue <= oldValue ? (big = false) : (big = true);
|
||||||
this.scaleValue = scaleValue
|
let scaleValue = this.scaleValue;
|
||||||
}
|
if (big) {
|
||||||
},
|
scaleValue += 0.1;
|
||||||
clearPaper() {
|
if (scaleValue > this.scaleMax) scaleValue = 5;
|
||||||
MessageBox.confirm('是否确认清空模板信息?', '警告', {
|
} else {
|
||||||
confirmButtonText: '确定',
|
scaleValue -= 0.1;
|
||||||
cancelButtonText: '取消',
|
if (scaleValue < this.scaleMin) scaleValue = 0.5;
|
||||||
type: 'warning'
|
}
|
||||||
}).then(() => {
|
if (hiprintTemplate) {
|
||||||
try {
|
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
|
||||||
hiprintTemplate.clear()
|
hiprintTemplate.zoom(scaleValue);
|
||||||
} catch (error) {
|
this.scaleValue = scaleValue;
|
||||||
this.$message.error(`操作失败: ${error}`)
|
}
|
||||||
}
|
},
|
||||||
}).catch((err) => {
|
clearPaper() {
|
||||||
console.log(err)
|
MessageBox.confirm('是否确认清空模板信息?', '警告', {
|
||||||
})
|
confirmButtonText: '确定',
|
||||||
},
|
cancelButtonText: '取消',
|
||||||
otherPaper() {
|
type: 'warning',
|
||||||
const value = {}
|
})
|
||||||
value.width = this.paperWidth
|
.then(() => {
|
||||||
value.height = this.paperHeight
|
try {
|
||||||
this.paperPopVisible = false
|
hiprintTemplate.clear();
|
||||||
this.setPaper('other', value)
|
} catch (error) {
|
||||||
},
|
this.$message.error(`操作失败: ${error}`);
|
||||||
rotatePaper() {
|
}
|
||||||
if (hiprintTemplate) {
|
})
|
||||||
hiprintTemplate.rotatePaper()
|
.catch((err) => {
|
||||||
}
|
console.log(err);
|
||||||
},
|
});
|
||||||
preView() {
|
},
|
||||||
const { width } = this.curPaper
|
otherPaper() {
|
||||||
this.$refs.preView.show(hiprintTemplate, this.printData, width)
|
const value = {};
|
||||||
},
|
value.width = this.paperWidth;
|
||||||
print() {
|
value.height = this.paperHeight;
|
||||||
// if (window.hiwebSocket.opened) {
|
this.paperPopVisible = false;
|
||||||
const printerList = hiprintTemplate.getPrinterList()
|
this.setPaper('other', value);
|
||||||
console.log(printerList)
|
},
|
||||||
hiprintTemplate.print2(this.printData, { printer: '', title: '预览打印' })
|
rotatePaper() {
|
||||||
// return
|
if (hiprintTemplate) {
|
||||||
// }
|
hiprintTemplate.rotatePaper();
|
||||||
// this.$message.error('客户端未连接,无法直接打印')
|
}
|
||||||
},
|
},
|
||||||
save() {
|
preView() {
|
||||||
// console.log(hiprintTemplate.getJson())
|
const { width } = this.curPaper;
|
||||||
const { mode } = this
|
this.$refs.preView.show(hiprintTemplate, this.printData, width);
|
||||||
const provider = providers[mode]
|
},
|
||||||
// console.log(hiprintTemplate.getJson())
|
print() {
|
||||||
this.setTemplate({
|
// if (window.hiwebSocket.opened) {
|
||||||
name: provider.value,
|
const printerList = hiprintTemplate.getPrinterList();
|
||||||
json: hiprintTemplate.getJson()
|
console.log(printerList);
|
||||||
})
|
hiprintTemplate.print2(this.printData, {
|
||||||
},
|
printer: '',
|
||||||
setTemplate(payload) {
|
title: '预览打印',
|
||||||
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
});
|
||||||
// console.log(payload.json)
|
// return
|
||||||
// templates[payload.name] = payload.json
|
// }
|
||||||
// this.$ls.set('KEY_TEMPLATES', templates)
|
// this.$message.error('客户端未连接,无法直接打印')
|
||||||
this.$message.info('保存成功')
|
},
|
||||||
// console.log(JSON.stringify(payload.json))
|
save() {
|
||||||
this.drawer = false
|
// console.log(hiprintTemplate.getJson())
|
||||||
this.$emit('saveData', payload.json)
|
const { mode } = this;
|
||||||
$('.hiprintEpContainer').empty()
|
const provider = providers[mode];
|
||||||
// this.$parent.$parent.getModelData(payload.json)
|
// console.log(hiprintTemplate.getJson())
|
||||||
}
|
this.setTemplate({
|
||||||
}
|
name: provider.value,
|
||||||
}
|
json: hiprintTemplate.getJson(),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setTemplate(payload) {
|
||||||
|
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
||||||
|
// console.log(payload.json)
|
||||||
|
// templates[payload.name] = payload.json
|
||||||
|
// this.$ls.set('KEY_TEMPLATES', templates)
|
||||||
|
this.$message.info('保存成功');
|
||||||
|
// console.log(JSON.stringify(payload.json))
|
||||||
|
this.drawer = false;
|
||||||
|
this.$emit('saveData', payload.json);
|
||||||
|
$('.hiprintEpContainer').empty();
|
||||||
|
// this.$parent.$parent.getModelData(payload.json)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// build 拖拽
|
// build 拖拽
|
||||||
::v-deep .hiprint-printElement-type >li>ul>li>a {
|
::v-deep .hiprint-printElement-type > li > ul > li > a {
|
||||||
padding: 4px 4px;
|
padding: 4px 4px;
|
||||||
color: #1296db;
|
color: #1296db;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
height: auto;
|
height: auto;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
// 设计容器
|
// 设计容器
|
||||||
.card-design {
|
.card-design {
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-21 15:21:32
|
* @LastEditTime: 2024-04-11 16:22:19
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -121,15 +121,15 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="attr-list" v-if="idAttrShow">
|
<div class="attr-list" v-if="idAttrShow && this.$auth.hasPermi('base:material-attr:query')">
|
||||||
<small-title
|
<small-title
|
||||||
style="margin: 16px 0; padding-left: 8px"
|
style="margin: 16px 0; padding-left: 8px"
|
||||||
:no-padding="true">
|
:no-padding="true">
|
||||||
物料属性
|
物料属性
|
||||||
</small-title>
|
</small-title>
|
||||||
|
|
||||||
<div v-if="!isdetail" class="action_btn">
|
<div v-if="!isdetail && this.$auth.hasPermi('base:material-attr:create')" class="action_btn">
|
||||||
<template>
|
<template>
|
||||||
<span style="display: inline-block;">
|
<span style="display: inline-block;">
|
||||||
<el-button type="text" @click="addNew()" icon="el-icon-plus">新增</el-button>
|
<el-button type="text" @click="addNew()" icon="el-icon-plus">新增</el-button>
|
||||||
@@ -182,16 +182,23 @@ import { parseTime } from '../../core/mixins/code-filter';
|
|||||||
import attrAdd from './attr-add';
|
import attrAdd from './attr-add';
|
||||||
import { getDictDatas } from "@/utils/dict";
|
import { getDictDatas } from "@/utils/dict";
|
||||||
|
|
||||||
const tableBtn = [
|
// const tableBtn = [
|
||||||
{
|
// this.$auth.hasPermiAnd([
|
||||||
type: 'edit',
|
// 'base:material-attr:create',
|
||||||
btnName: '编辑',
|
// 'base:material-attr:update'
|
||||||
},
|
// ]) ?
|
||||||
{
|
// {
|
||||||
type: 'delete',
|
// type: 'edit',
|
||||||
btnName: '删除',
|
// btnName: '编辑',
|
||||||
},
|
// }
|
||||||
];
|
// : undefined,
|
||||||
|
// this.$auth.hasPermi('base:material-attr:delete') ?
|
||||||
|
// {
|
||||||
|
// type: 'delete',
|
||||||
|
// btnName: '删除',
|
||||||
|
// }
|
||||||
|
// : undefined,
|
||||||
|
// ];
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
@@ -213,7 +220,23 @@ export default {
|
|||||||
components: { SmallTitle, attrAdd },
|
components: { SmallTitle, attrAdd },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableBtn,
|
tableBtn: [
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:material-attr:create',
|
||||||
|
'base:material-attr:update'
|
||||||
|
]) ?
|
||||||
|
{
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '编辑',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:material-attr:delete') ?
|
||||||
|
{
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
],
|
||||||
tableProps,
|
tableProps,
|
||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -40,6 +41,7 @@ import {
|
|||||||
} from '@/api/base/material';
|
} from '@/api/base/material';
|
||||||
import { listData } from "@/api/system/dict/data";
|
import { listData } from "@/api/system/dict/data";
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -75,7 +77,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -132,7 +134,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:material:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:material:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:material:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-03-21 14:39:52
|
* @LastEditTime: 2024-04-11 16:44:41
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -56,14 +56,14 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="attr-list" v-if="idAttrShow">
|
<div class="attr-list" v-if="idAttrShow && $auth.hasPermiAnd(['base:material-product-bom:query', 'base:material-product-bom-det:query'])">
|
||||||
<small-title
|
<small-title
|
||||||
style="margin: 16px 0; padding-left: 8px"
|
style="margin: 16px 0; padding-left: 8px"
|
||||||
:no-padding="true">
|
:no-padding="true">
|
||||||
BOM明细
|
BOM明细
|
||||||
</small-title>
|
</small-title>
|
||||||
|
|
||||||
<div v-if="!isdetail" class="action_btn">
|
<div v-if="!isdetail && $auth.hasPermi('base:material-product-bom:create')" class="action_btn">
|
||||||
<template>
|
<template>
|
||||||
<span style="display: inline-block;">
|
<span style="display: inline-block;">
|
||||||
<el-button type="text" @click="addNew()" icon="el-icon-plus">添加</el-button>
|
<el-button type="text" @click="addNew()" icon="el-icon-plus">添加</el-button>
|
||||||
@@ -116,16 +116,16 @@ import { parseTime } from '../../core/mixins/code-filter';
|
|||||||
import attrAdd from './attr-add';
|
import attrAdd from './attr-add';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
const tableBtn = [
|
// const tableBtn = [
|
||||||
{
|
// {
|
||||||
type: 'edit',
|
// type: 'edit',
|
||||||
btnName: '编辑',
|
// btnName: '编辑',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'delete',
|
// type: 'delete',
|
||||||
btnName: '删除',
|
// btnName: '删除',
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
@@ -160,7 +160,24 @@ export default {
|
|||||||
components: { SmallTitle, attrAdd },
|
components: { SmallTitle, attrAdd },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableBtn,
|
tableBtn: [
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:material-product-bom:update',
|
||||||
|
'base:material-product-bom-det:create',
|
||||||
|
'base:material-product-bom-det:update'
|
||||||
|
]) ?
|
||||||
|
{
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '编辑',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:material-product-bom:delete') ?
|
||||||
|
{
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
],
|
||||||
tableProps,
|
tableProps,
|
||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -38,6 +39,7 @@ import {
|
|||||||
getMaterialPBPage,
|
getMaterialPBPage,
|
||||||
deleteMaterialPB
|
deleteMaterialPB
|
||||||
} from '@/api/base/materialProductBom';
|
} from '@/api/base/materialProductBom';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -55,7 +57,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
components: {
|
components: {
|
||||||
AddOrUpdate,
|
AddOrUpdate,
|
||||||
},
|
},
|
||||||
@@ -108,7 +110,7 @@ export default {
|
|||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:material:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:material:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:material:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -2,38 +2,21 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-01 14:55:51
|
* @Date: 2023-08-01 14:55:51
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-02-28 10:38:34
|
* @LastEditTime: 2024-04-10 16:34:40
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<search-bar
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||||
:formConfigs="formConfig"
|
<base-table :max-height="tableH" :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||||
ref="searchBarForm"
|
:table-data="tableData">
|
||||||
@headBtnClick="buttonClick" />
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||||
<base-table
|
@clickBtn="handleClick" />
|
||||||
:table-props="tableProps"
|
</base-table>
|
||||||
:page="listQuery.pageNo"
|
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||||
:limit="listQuery.pageSize"
|
@pagination="getDataList" />
|
||||||
:table-data="tableData">
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
|
||||||
<method-btn
|
</div>
|
||||||
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" />
|
|
||||||
<add-or-update
|
|
||||||
v-if="addOrUpdateVisible"
|
|
||||||
ref="addOrUpdate"
|
|
||||||
@refreshDataList="getDataList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -41,6 +24,7 @@ import AddOrUpdate from './add-or-updata';
|
|||||||
// import unitDict from './unitDict';
|
// import unitDict from './unitDict';
|
||||||
import basicPage from '../mixins/basic-page';
|
import basicPage from '../mixins/basic-page';
|
||||||
import { parseTime } from '../mixins/code-filter';
|
import { parseTime } from '../mixins/code-filter';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
import {
|
import {
|
||||||
getPackingModel,
|
getPackingModel,
|
||||||
} from '@/api/base/printModel.js'
|
} from '@/api/base/printModel.js'
|
||||||
@@ -91,7 +75,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -144,7 +128,7 @@ export default {
|
|||||||
param: 'createTime',
|
param: 'createTime',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('base:packaging-print-log:query') ? 'button' : '',
|
||||||
btnName: '搜索',
|
btnName: '搜索',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
@@ -157,8 +141,8 @@ export default {
|
|||||||
// btnName: '重置',
|
// btnName: '重置',
|
||||||
// name: 'reset',
|
// name: 'reset',
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:packaging-print-log:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:packaging-print-log:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:packaging-print-log:create') ? 'button' : '',
|
||||||
@@ -314,7 +298,7 @@ export default {
|
|||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.pageNo = 1;
|
this.listQuery.pageNo = 1;
|
||||||
this.listQuery.pageSize = 10;
|
this.listQuery.pageSize = 20;
|
||||||
this.listQuery.workOrderId = val.workOrderId;
|
this.listQuery.workOrderId = val.workOrderId;
|
||||||
if (val.createTime && val.createTime.length != 0) {
|
if (val.createTime && val.createTime.length != 0) {
|
||||||
this.listQuery.createTime = val.createTime
|
this.listQuery.createTime = val.createTime
|
||||||
@@ -329,7 +313,7 @@ export default {
|
|||||||
case 'reset':
|
case 'reset':
|
||||||
this.$refs.searchBarForm.resetForm();
|
this.$refs.searchBarForm.resetForm();
|
||||||
this.listQuery = {
|
this.listQuery = {
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 1,
|
total: 1,
|
||||||
};
|
};
|
||||||
|
|||||||
45
src/views/base/packagingPrintLog2/components/InputArea.vue
Normal file
45
src/views/base/packagingPrintLog2/components/InputArea.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tableInner">
|
||||||
|
<el-input
|
||||||
|
v-if="list.isEdit"
|
||||||
|
type="number"
|
||||||
|
v-model="list[itemProp]"
|
||||||
|
@blur="changeInput" />
|
||||||
|
<span v-else>{{ list[itemProp] }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'InputArea',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
itemProp: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
injectData() {
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initData() {
|
||||||
|
this.list = this.injectData;
|
||||||
|
},
|
||||||
|
changeInput() {
|
||||||
|
this.$emit('emitData', this.list);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
226
src/views/base/packagingPrintLog2/components/OtherMsg.vue
Normal file
226
src/views/base/packagingPrintLog2/components/OtherMsg.vue
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<template>
|
||||||
|
<div class="other-msg-box">
|
||||||
|
<el-radio-group
|
||||||
|
v-model="chooseMsg"
|
||||||
|
@change="changeChoose">
|
||||||
|
<el-radio :label="1">
|
||||||
|
<div style="display: inline-block">
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="printMsg1"
|
||||||
|
class="demo-form-inline">
|
||||||
|
<el-form-item label="客户">
|
||||||
|
<el-select
|
||||||
|
size="small"
|
||||||
|
v-model="printMsg1.customerId"
|
||||||
|
filterable
|
||||||
|
placeholder="客户">
|
||||||
|
<el-option
|
||||||
|
v-for="item in customerList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封箱人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg1.sealWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="封箱人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="打包人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg1.packWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="打包人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="流程卡号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg1.processCard"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="流程卡号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="托盘规格">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg1.pallet"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="托盘规格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg1.remark"
|
||||||
|
size="small"
|
||||||
|
placeholder="备注"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="2">
|
||||||
|
<div style="display: inline-block">
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="printMsg2"
|
||||||
|
class="demo-form-inline">
|
||||||
|
<el-form-item label="客户">
|
||||||
|
<el-select
|
||||||
|
size="small"
|
||||||
|
v-model="printMsg2.customerId"
|
||||||
|
filterable
|
||||||
|
placeholder="客户">
|
||||||
|
<el-option
|
||||||
|
v-for="item in customerList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封箱人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg2.sealWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="封箱人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="打包人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg2.packWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="打包人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="流程卡号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg2.processCard"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="流程卡号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="托盘规格">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg2.pallet"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="托盘规格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg2.remark"
|
||||||
|
size="small"
|
||||||
|
placeholder="备注"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="3">
|
||||||
|
<div style="display: inline-block">
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="printMsg3"
|
||||||
|
class="demo-form-inline">
|
||||||
|
<el-form-item label="客户">
|
||||||
|
<el-select
|
||||||
|
size="small"
|
||||||
|
v-model="printMsg3.customerId"
|
||||||
|
filterable
|
||||||
|
placeholder="客户">
|
||||||
|
<el-option
|
||||||
|
v-for="item in customerList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封箱人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg3.sealWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="封箱人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="打包人员工号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg3.packWorker"
|
||||||
|
size="small"
|
||||||
|
placeholder="打包人员工号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="流程卡号">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg3.processCard"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="流程卡号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="托盘规格">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg3.pallet"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
placeholder="托盘规格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input
|
||||||
|
v-model="printMsg3.remark"
|
||||||
|
size="small"
|
||||||
|
placeholder="备注"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getCustomerList } from '@/api/base/packingInfo';
|
||||||
|
export default {
|
||||||
|
name: 'OtherMsg',
|
||||||
|
props: {
|
||||||
|
printMsg1: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
printMsg2: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
printMsg3: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chooseMsg: 1,
|
||||||
|
customerList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getCList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCList() {
|
||||||
|
getCustomerList().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
console.log('customer');
|
||||||
|
this.customerList = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeChoose(val) {
|
||||||
|
this.$emit('changeChoose', val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.other-msg-box {
|
||||||
|
.el-radio {
|
||||||
|
display: block;
|
||||||
|
line-height: 36px;
|
||||||
|
.demo-form-inline {
|
||||||
|
width: 100%;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
182
src/views/base/packagingPrintLog2/components/Printed.vue
Normal file
182
src/views/base/packagingPrintLog2/components/Printed.vue
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div class="show-box">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@headBtnClick="buttonClick2" />
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:page="queryParams2.pageNo"
|
||||||
|
:limit="queryParams2.pageSize"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="list2">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn2.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
:width="240"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn2"
|
||||||
|
@clickBtn="handleClick2" />
|
||||||
|
</base-table>
|
||||||
|
<pagination
|
||||||
|
:page.sync="queryParams2.pageNo"
|
||||||
|
:limit.sync="queryParams2.pageSize"
|
||||||
|
:total="total2"
|
||||||
|
@pagination="getList2" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { parseTime } from '@/utils/ruoyi';
|
||||||
|
import { getPackingPage } from '@/api/base/packingInfo';
|
||||||
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'packagingCode',
|
||||||
|
label: '成品周转编号',
|
||||||
|
minWidth: 180,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineId',
|
||||||
|
label: '产线',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'specifications',
|
||||||
|
label: '规格',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'check',
|
||||||
|
label: '判定',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workStation',
|
||||||
|
label: '工位号',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'num',
|
||||||
|
label: '片数',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'remark',
|
||||||
|
label: '备注1',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'printStatus',
|
||||||
|
label: '打印状态',
|
||||||
|
filter: (val) => (val == 1 ? '未打印' : '已打印'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '时间',
|
||||||
|
filter: parseTime,
|
||||||
|
minWidth: 160,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'groupClass',
|
||||||
|
label: '班次',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default {
|
||||||
|
name: 'Printed',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
defaultSelect: [],
|
||||||
|
width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 查询参数
|
||||||
|
queryParams2: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
printStatus: '2',
|
||||||
|
lineId: '',
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
total2: 0,
|
||||||
|
tableProps,
|
||||||
|
list2: [],
|
||||||
|
tableBtn2: [
|
||||||
|
this.$auth.hasPermi('base:order-group:update')
|
||||||
|
? {
|
||||||
|
type: 'reprint',
|
||||||
|
btnName: '重打',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:order-group:query')
|
||||||
|
? {
|
||||||
|
type: 'detail',
|
||||||
|
btnName: '详情',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:order-group:update',
|
||||||
|
'base:core-product:query',
|
||||||
|
'base:core-customer:query',
|
||||||
|
])
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '编辑',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLineList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getLineList() {
|
||||||
|
getCorePLList().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.formConfig[0].selectOptions = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getList2() {
|
||||||
|
getPackingPage({ ...this.queryParams2 }).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list2 = res.data.records || [];
|
||||||
|
this.total2 = res.data.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick2(val) {
|
||||||
|
console.log(val);
|
||||||
|
this.queryParams2.lineId = val.lineId;
|
||||||
|
this.queryParams2.createTime = val.timeVal;
|
||||||
|
this.getList2();
|
||||||
|
},
|
||||||
|
handleClick2() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
332
src/views/base/packagingPrintLog2/components/UnPrint.vue
Normal file
332
src/views/base/packagingPrintLog2/components/UnPrint.vue
Normal file
@@ -0,0 +1,332 @@
|
|||||||
|
<template>
|
||||||
|
<div class="show-box">
|
||||||
|
<!-- 单选 -->
|
||||||
|
<other-msg
|
||||||
|
:printMsg1="printMsg1"
|
||||||
|
:printMsg2="printMsg2"
|
||||||
|
:printMsg3="printMsg3"
|
||||||
|
@changeChoose="changeChoose" />
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="inputChange">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
:width="260"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleClick" />
|
||||||
|
</base-table>
|
||||||
|
<pagination
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@pagination="getList" />
|
||||||
|
<!-- 预览 -->
|
||||||
|
<print-preview ref="preView" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { parseTime } from '@/utils/ruoyi';
|
||||||
|
import inputArea from './InputArea.vue';
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'packagingCode',
|
||||||
|
label: '成品周转编号',
|
||||||
|
minWidth: 160,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineId',
|
||||||
|
label: '产线',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'specifications',
|
||||||
|
label: '规格',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'check',
|
||||||
|
label: '判定',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workStation',
|
||||||
|
label: '工位号',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'num',
|
||||||
|
label: '片数',
|
||||||
|
subcomponent: inputArea,
|
||||||
|
minWidth: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'remark',
|
||||||
|
label: '备注1',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'printStatus',
|
||||||
|
label: '打印状态',
|
||||||
|
filter: (val) => (val == 1 ? '未打印' : '已打印'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '时间',
|
||||||
|
filter: parseTime,
|
||||||
|
minWidth: 160,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'groupClass',
|
||||||
|
label: '班次',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
import OtherMsg from './OtherMsg';
|
||||||
|
import { getPackingPage, updatePacking } from '@/api/base/packingInfo';
|
||||||
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
|
import printPreview from './preview';
|
||||||
|
import printTemplate from '../print-template';
|
||||||
|
export default {
|
||||||
|
name: 'UnPrint',
|
||||||
|
components: { OtherMsg, printPreview },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
printMsg1: {
|
||||||
|
customerId: '',
|
||||||
|
sealWorker: '',
|
||||||
|
packWorker: '',
|
||||||
|
processCard: '',
|
||||||
|
pallet: '',
|
||||||
|
remark: '',
|
||||||
|
},
|
||||||
|
printMsg2: {
|
||||||
|
customerId: '',
|
||||||
|
sealWorker: '',
|
||||||
|
packWorker: '',
|
||||||
|
processCard: '',
|
||||||
|
pallet: '',
|
||||||
|
remark: '',
|
||||||
|
},
|
||||||
|
printMsg3: {
|
||||||
|
customerId: '',
|
||||||
|
sealWorker: '',
|
||||||
|
packWorker: '',
|
||||||
|
processCard: '',
|
||||||
|
pallet: '',
|
||||||
|
remark: '',
|
||||||
|
},
|
||||||
|
chooseMsg: 1, //单选
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
defaultSelect: [],
|
||||||
|
width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
printStatus: '1',
|
||||||
|
lineId: '',
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
tableProps,
|
||||||
|
list: [],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:order:query',
|
||||||
|
'base:order-con-group-order:create',
|
||||||
|
])
|
||||||
|
? {
|
||||||
|
type: 'view',
|
||||||
|
btnName: '预览',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:order-group:update')
|
||||||
|
? {
|
||||||
|
type: 'print',
|
||||||
|
btnName: '打印',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:order-group:update')
|
||||||
|
? {
|
||||||
|
type: 'printed',
|
||||||
|
btnName: '已打印',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:order-group:update',
|
||||||
|
'base:core-product:query',
|
||||||
|
'base:core-customer:query',
|
||||||
|
])
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '编辑',
|
||||||
|
showParam: {
|
||||||
|
type: '&',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'unequal',
|
||||||
|
name: 'isEdit',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermiAnd([
|
||||||
|
'base:order-group:update',
|
||||||
|
'base:core-product:query',
|
||||||
|
'base:core-customer:query',
|
||||||
|
])
|
||||||
|
? {
|
||||||
|
type: 'save',
|
||||||
|
btnName: '保存',
|
||||||
|
showParam: {
|
||||||
|
type: '&',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'equal',
|
||||||
|
name: 'isEdit',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:order-group:query')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
printData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLineList();
|
||||||
|
console.log(printTemplate);
|
||||||
|
console.log('================printTemplate');
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getLineList() {
|
||||||
|
getCorePLList().then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
getPackingPage({ ...this.queryParams }).then((res) => {
|
||||||
|
this.list = res.data.records || [];
|
||||||
|
this.total = res.data.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 单选
|
||||||
|
changeChoose(val) {
|
||||||
|
this.chooseMsg = val;
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
this.queryParams.lineId = val.lineId;
|
||||||
|
this.queryParams.createTime = val.timeVal;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleClick(val) {
|
||||||
|
console.log(val);
|
||||||
|
switch (val.type) {
|
||||||
|
case 'edit':
|
||||||
|
this.editNum(val.data);
|
||||||
|
break;
|
||||||
|
case 'save':
|
||||||
|
this.saveNum(val.data);
|
||||||
|
break;
|
||||||
|
case 'view':
|
||||||
|
this.preView();
|
||||||
|
break;
|
||||||
|
case 'print':
|
||||||
|
this.printTemp();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
editNum(val) {
|
||||||
|
let obj = this.list[val._pageIndex - 1];
|
||||||
|
obj.isEdit = true;
|
||||||
|
this.$set(this.list, val._pageIndex - 1, obj);
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
saveNum(val) {
|
||||||
|
// 调用修改接口
|
||||||
|
updatePacking({ id: val.id, num: val.num }).then(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 输入框改变num
|
||||||
|
inputChange(val) {
|
||||||
|
this.list[val._pageIndex - 1][val.prop] = val[val.prop];
|
||||||
|
},
|
||||||
|
// 预览
|
||||||
|
preView() {
|
||||||
|
var hiprintTemplate = new hiprint.PrintTemplate({
|
||||||
|
template: printTemplate,
|
||||||
|
});
|
||||||
|
this.$refs.preView.show(hiprintTemplate);
|
||||||
|
},
|
||||||
|
// 打印
|
||||||
|
printTemp() {
|
||||||
|
console.log('11');
|
||||||
|
var printData = {};
|
||||||
|
let hiprintTemplate = this.$print(
|
||||||
|
undefined,
|
||||||
|
printTemplate,
|
||||||
|
printData,
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
styleHandler: () => {
|
||||||
|
let css =
|
||||||
|
'<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
|
||||||
|
return css;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
console.log(hiprintTemplate);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
69
src/views/base/packagingPrintLog2/components/UnPrintEdit.vue
Normal file
69
src/views/base/packagingPrintLog2/components/UnPrintEdit.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="unPrintEdit"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="130px"
|
||||||
|
:model="form">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="成品周转编号"
|
||||||
|
prop="packagingCode">
|
||||||
|
<el-input
|
||||||
|
readonly
|
||||||
|
v-model="form.packagingCode"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="片数"
|
||||||
|
prop="num">
|
||||||
|
<el-input-number
|
||||||
|
v-model="form.num"
|
||||||
|
:min="0"
|
||||||
|
:max="999999"
|
||||||
|
style="width: 100%"
|
||||||
|
label="片数"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getPacking } from '@/api/base/packingInfo';
|
||||||
|
export default {
|
||||||
|
name: 'UnPrintEdit',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
id: '',
|
||||||
|
packagingCode: '',
|
||||||
|
num: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
num: [{ required: true, message: '片数不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(id) {
|
||||||
|
console.log('init');
|
||||||
|
this.form.id = id;
|
||||||
|
getPacking(id).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['unPrintEdit'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
console.log('保存');
|
||||||
|
this.$emit('successSubmit');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formClear() {
|
||||||
|
this.$refs.unPrintEdit.resetFields();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
100
src/views/base/packagingPrintLog2/components/preview.vue
Normal file
100
src/views/base/packagingPrintLog2/components/preview.vue
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="预览"
|
||||||
|
:dialogVisible="visible"
|
||||||
|
width="50%"
|
||||||
|
@cancel="hideModal"
|
||||||
|
:before-close="hideModal">
|
||||||
|
<!-- <div>
|
||||||
|
<el-button
|
||||||
|
:loading="waitShowPrinter"
|
||||||
|
type="primary"
|
||||||
|
icon="printer"
|
||||||
|
@click.stop="print">
|
||||||
|
打印
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="printer"
|
||||||
|
@click.stop="toPdf">
|
||||||
|
pdf
|
||||||
|
</el-button>
|
||||||
|
</div> -->
|
||||||
|
<div id="preview_content" />
|
||||||
|
<template slot="footer">
|
||||||
|
<el-button
|
||||||
|
key="close"
|
||||||
|
@click="hideModal">
|
||||||
|
关闭
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</base-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'PrintPreview',
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
spinning: true,
|
||||||
|
waitShowPrinter: false,
|
||||||
|
// 纸张宽 mm
|
||||||
|
width: 0,
|
||||||
|
// 模板
|
||||||
|
hiprintTemplate: {},
|
||||||
|
// 数据
|
||||||
|
printData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
hideModal() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
show(hiprintTemplate, printData, width = '210') {
|
||||||
|
this.visible = true;
|
||||||
|
this.spinning = true;
|
||||||
|
this.width = width;
|
||||||
|
this.hiprintTemplate = hiprintTemplate;
|
||||||
|
this.printData = printData;
|
||||||
|
console.log(hiprintTemplate);
|
||||||
|
console.log(printData);
|
||||||
|
setTimeout(() => {
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
$('#preview_content').html(hiprintTemplate.getHtml(printData));
|
||||||
|
this.spinning = false;
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
print() {
|
||||||
|
this.waitShowPrinter = true;
|
||||||
|
this.hiprintTemplate.print(
|
||||||
|
this.printData,
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
callback: () => {
|
||||||
|
console.log('callback');
|
||||||
|
this.waitShowPrinter = false;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
toPdf() {
|
||||||
|
this.hiprintTemplate.toPdf({}, '打印预览');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<!-- <style lang="less" scoped>
|
||||||
|
/deep/ .ant-modal-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-modal-content {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
</style> -->
|
||||||
47
src/views/base/packagingPrintLog2/index.vue
Normal file
47
src/views/base/packagingPrintLog2/index.vue
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div class="packagingPrintLog-box">
|
||||||
|
<div style="width: 100%">
|
||||||
|
<ButtonNav
|
||||||
|
:menus="['未打印', '已打印']"
|
||||||
|
:button-mode="true"
|
||||||
|
@change="currentMenu"></ButtonNav>
|
||||||
|
</div>
|
||||||
|
<!-- 未打印 -->
|
||||||
|
<UnPrint v-if="activeMenu == '未打印'" />
|
||||||
|
<!-- 已打印 -->
|
||||||
|
<Printed v-else />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ButtonNav from '@/components/ButtonNav';
|
||||||
|
import UnPrint from './components/UnPrint';
|
||||||
|
import Printed from './components/Printed';
|
||||||
|
export default {
|
||||||
|
name: 'packagingPrintLog',
|
||||||
|
components: { ButtonNav, UnPrint, Printed },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeMenu: '未打印',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
currentMenu(val) {
|
||||||
|
console.log(val);
|
||||||
|
this.activeMenu = val;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.packagingPrintLog-box {
|
||||||
|
min-height: calc(100vh - 120px - 8px);
|
||||||
|
background-color: #f2f4f9;
|
||||||
|
.show-box {
|
||||||
|
min-height: calc(100vh - 128px - 52px);
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
554
src/views/base/packagingPrintLog2/print-template.js
Normal file
554
src/views/base/packagingPrintLog2/print-template.js
Normal file
@@ -0,0 +1,554 @@
|
|||||||
|
export default {
|
||||||
|
panels: [
|
||||||
|
{
|
||||||
|
index: 0,
|
||||||
|
name: 1,
|
||||||
|
height: 125,
|
||||||
|
width: 95,
|
||||||
|
paperHeader: 0,
|
||||||
|
paperFooter: 354.33070866141736,
|
||||||
|
printElements: [
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 5,
|
||||||
|
height: 30,
|
||||||
|
width: 256.5,
|
||||||
|
right: 262.2421875,
|
||||||
|
bottom: 34.9921875,
|
||||||
|
vCenter: 133.9921875,
|
||||||
|
hCenter: 19.9921875,
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
borderColor: 'green',
|
||||||
|
backgroundColor: 'green',
|
||||||
|
},
|
||||||
|
printElementType: { title: '矩形', type: 'rect' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 35,
|
||||||
|
top: 15,
|
||||||
|
height: 20,
|
||||||
|
width: 195,
|
||||||
|
title: '厂内镀膜/钢化片周转标签',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 16.5,
|
||||||
|
color: '#ffffff',
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 232.9921875,
|
||||||
|
bottom: 35.24609375,
|
||||||
|
vCenter: 135.4921875,
|
||||||
|
hCenter: 25.24609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: { left: 50, top: 35, height: 52.5, width: 9 },
|
||||||
|
printElementType: { title: '竖线', type: 'vline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 35,
|
||||||
|
height: 309,
|
||||||
|
width: 256.5,
|
||||||
|
right: 261.4921875,
|
||||||
|
bottom: 343.9921875,
|
||||||
|
vCenter: 133.2421875,
|
||||||
|
hCenter: 189.4921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '矩形', type: 'rect' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 42.5,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '线别',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 45.99609375,
|
||||||
|
bottom: 60.4921875,
|
||||||
|
vCenter: 27.99609375,
|
||||||
|
hCenter: 51.4921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 55,
|
||||||
|
top: 42.5,
|
||||||
|
height: 18,
|
||||||
|
width: 200,
|
||||||
|
title: '判定:良品/保留/再检',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 93.4921875,
|
||||||
|
bottom: 59.25,
|
||||||
|
vCenter: 75.4921875,
|
||||||
|
hCenter: 50.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 62.5,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 259.9921875,
|
||||||
|
bottom: 72.4921875,
|
||||||
|
vCenter: 132.4921875,
|
||||||
|
hCenter: 67.9921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 55,
|
||||||
|
top: 70,
|
||||||
|
height: 18,
|
||||||
|
width: 46,
|
||||||
|
title: '备注:',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 91.2421875,
|
||||||
|
bottom: 86.25,
|
||||||
|
vCenter: 73.2421875,
|
||||||
|
hCenter: 77.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 190,
|
||||||
|
top: 87.5,
|
||||||
|
height: 169.5,
|
||||||
|
width: 9,
|
||||||
|
right: 199.74609375,
|
||||||
|
bottom: 255.75,
|
||||||
|
vCenter: 195.24609375,
|
||||||
|
hCenter: 171,
|
||||||
|
},
|
||||||
|
printElementType: { title: '竖线', type: 'vline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 87.5,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 260.7421875,
|
||||||
|
bottom: 96.75,
|
||||||
|
vCenter: 132.4921875,
|
||||||
|
hCenter: 92.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 77.5,
|
||||||
|
top: 90,
|
||||||
|
height: 15,
|
||||||
|
width: 36,
|
||||||
|
title: '规格',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 113.49609375,
|
||||||
|
bottom: 105.4921875,
|
||||||
|
vCenter: 95.49609375,
|
||||||
|
hCenter: 97.9921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 207.5,
|
||||||
|
top: 100,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '用户',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 242.7421875,
|
||||||
|
bottom: 116.25,
|
||||||
|
vCenter: 224.7421875,
|
||||||
|
hCenter: 107.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 25,
|
||||||
|
top: 102.5,
|
||||||
|
height: 15,
|
||||||
|
width: 156,
|
||||||
|
title: '长*宽*厚度(单位:mm)',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 179.25,
|
||||||
|
bottom: 117.4921875,
|
||||||
|
vCenter: 101.25,
|
||||||
|
hCenter: 109.9921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 117.5,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 263.7421875,
|
||||||
|
bottom: 125.7421875,
|
||||||
|
vCenter: 135.4921875,
|
||||||
|
hCenter: 121.2421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 130,
|
||||||
|
top: 145,
|
||||||
|
height: 55.5,
|
||||||
|
width: 9,
|
||||||
|
right: 138.99609375,
|
||||||
|
bottom: 199.5,
|
||||||
|
vCenter: 134.49609375,
|
||||||
|
hCenter: 171.75,
|
||||||
|
},
|
||||||
|
printElementType: { title: '竖线', type: 'vline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 145,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 260.25,
|
||||||
|
bottom: 154.2421875,
|
||||||
|
vCenter: 132,
|
||||||
|
hCenter: 149.7421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 45,
|
||||||
|
top: 155,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '编号',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 82.2421875,
|
||||||
|
bottom: 171.75,
|
||||||
|
vCenter: 64.2421875,
|
||||||
|
hCenter: 162.75,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 135,
|
||||||
|
top: 155,
|
||||||
|
height: 18,
|
||||||
|
width: 49.5,
|
||||||
|
title: '工位号',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 186,
|
||||||
|
bottom: 172.9921875,
|
||||||
|
vCenter: 161.25,
|
||||||
|
hCenter: 163.9921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 197.5,
|
||||||
|
top: 155,
|
||||||
|
height: 18,
|
||||||
|
width: 60,
|
||||||
|
title: '流程卡号',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 256.74609375,
|
||||||
|
bottom: 143.7421875,
|
||||||
|
vCenter: 226.74609375,
|
||||||
|
hCenter: 134.7421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 175,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 259.2421875,
|
||||||
|
bottom: 183.75,
|
||||||
|
vCenter: 130.9921875,
|
||||||
|
hCenter: 179.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 50,
|
||||||
|
top: 200,
|
||||||
|
height: 58.5,
|
||||||
|
width: 9,
|
||||||
|
right: 58.9921875,
|
||||||
|
bottom: 259.5,
|
||||||
|
vCenter: 54.4921875,
|
||||||
|
hCenter: 230.25,
|
||||||
|
},
|
||||||
|
printElementType: { title: '竖线', type: 'vline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 110,
|
||||||
|
top: 200,
|
||||||
|
height: 58.5,
|
||||||
|
width: 9,
|
||||||
|
right: 117.75,
|
||||||
|
bottom: 256.9921875,
|
||||||
|
vCenter: 113.25,
|
||||||
|
hCenter: 227.7421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '竖线', type: 'vline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 200,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 262.9921875,
|
||||||
|
bottom: 210.24609375,
|
||||||
|
vCenter: 134.7421875,
|
||||||
|
hCenter: 205.74609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 210,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '日期',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 45.99609375,
|
||||||
|
bottom: 228,
|
||||||
|
vCenter: 27.99609375,
|
||||||
|
hCenter: 219,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 67.5,
|
||||||
|
top: 210,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '班次',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 103.5,
|
||||||
|
bottom: 228,
|
||||||
|
vCenter: 85.5,
|
||||||
|
hCenter: 219,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 207.5,
|
||||||
|
top: 210,
|
||||||
|
height: 18,
|
||||||
|
width: 36,
|
||||||
|
title: '片数',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 243.4921875,
|
||||||
|
bottom: 228,
|
||||||
|
vCenter: 225.4921875,
|
||||||
|
hCenter: 219,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 230,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 261.4921875,
|
||||||
|
bottom: 239.25,
|
||||||
|
vCenter: 133.2421875,
|
||||||
|
hCenter: 234.75,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 257.5,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 261.4921875,
|
||||||
|
bottom: 266.49609375,
|
||||||
|
vCenter: 133.2421875,
|
||||||
|
hCenter: 261.99609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 262.5,
|
||||||
|
height: 18,
|
||||||
|
width: 87,
|
||||||
|
title: '封箱人员工号:',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 46.9921875,
|
||||||
|
bottom: 279.24609375,
|
||||||
|
vCenter: 28.9921875,
|
||||||
|
hCenter: 270.24609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 280,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 262.2421875,
|
||||||
|
bottom: 289.2421875,
|
||||||
|
vCenter: 133.9921875,
|
||||||
|
hCenter: 284.7421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 285,
|
||||||
|
height: 18,
|
||||||
|
width: 87,
|
||||||
|
title: '打包人员工号:',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 96.4921875,
|
||||||
|
bottom: 301.74609375,
|
||||||
|
vCenter: 52.9921875,
|
||||||
|
hCenter: 292.74609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 300,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 264.4921875,
|
||||||
|
bottom: 308.49609375,
|
||||||
|
vCenter: 136.2421875,
|
||||||
|
hCenter: 303.99609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 305,
|
||||||
|
height: 18,
|
||||||
|
width: 247.5,
|
||||||
|
title: '备注1:单层镀/双层镀/丝印打孔/打孔钢片',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 96.99609375,
|
||||||
|
bottom: 322.9921875,
|
||||||
|
vCenter: 53.49609375,
|
||||||
|
hCenter: 313.9921875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 5,
|
||||||
|
top: 322.5,
|
||||||
|
height: 9,
|
||||||
|
width: 256.5,
|
||||||
|
right: 262.2421875,
|
||||||
|
bottom: 332.7421875,
|
||||||
|
vCenter: 133.9921875,
|
||||||
|
hCenter: 328.2421875,
|
||||||
|
},
|
||||||
|
printElementType: { title: '横线', type: 'hline' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
left: 10,
|
||||||
|
top: 327.5,
|
||||||
|
height: 18,
|
||||||
|
width: 87,
|
||||||
|
title: '备注2:',
|
||||||
|
coordinateSync: false,
|
||||||
|
widthHeightSync: false,
|
||||||
|
fontSize: 12,
|
||||||
|
qrCodeLevel: 0,
|
||||||
|
right: 97.9921875,
|
||||||
|
bottom: 343.74609375,
|
||||||
|
vCenter: 54.4921875,
|
||||||
|
hCenter: 334.74609375,
|
||||||
|
},
|
||||||
|
printElementType: { title: '文本', type: 'text' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
paperNumberLeft: 372.5,
|
||||||
|
paperNumberTop: 337.5,
|
||||||
|
paperNumberContinue: true,
|
||||||
|
watermarkOptions: {},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -6,138 +6,130 @@
|
|||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-dialog class="baseDialog" :visible.sync="visible" :show-close="false" :wrapper-closable="false" width="30%" show-close="true">
|
<el-dialog
|
||||||
<small-title slot="title" :no-padding="true">
|
class="baseDialog"
|
||||||
{{ !dataForm.id ? '新增' : '编辑' }}
|
:visible.sync="visible"
|
||||||
</small-title>
|
:show-close="true"
|
||||||
|
:wrapper-closable="false"
|
||||||
|
width="50%">
|
||||||
|
<small-title
|
||||||
|
slot="title"
|
||||||
|
:no-padding="true">
|
||||||
|
{{ !dataForm.id ? '新增' : '编辑' }}
|
||||||
|
</small-title>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="visual-part">
|
<div class="visual-part">
|
||||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px"
|
<el-form
|
||||||
@keyup.enter.native="dataFormSubmit">
|
ref="dataForm"
|
||||||
<el-row :gutter="20">
|
:model="dataForm"
|
||||||
<el-col :span="12">
|
:rules="dataRule"
|
||||||
<el-form-item label="模板名称" prop="name">
|
label-width="100px"
|
||||||
<el-input v-model="dataForm.name" clearable placeholder="请输入模板名称" />
|
@keyup.enter.native="dataFormSubmit">
|
||||||
</el-form-item>
|
<el-row :gutter="20">
|
||||||
</el-col>
|
<el-col :span="24">
|
||||||
<el-col :span="12">
|
<el-form-item
|
||||||
<el-form-item label="标签类型" prop="typeId">
|
label="模板名称"
|
||||||
<el-select v-model="dataForm.typeId" style="width: 100%;" placeholder="请选择标签类型" clearable>
|
prop="name">
|
||||||
<el-option v-for="dict in typeList" :key="dict.id" :label="dict.name" :value="dict.id" />
|
<el-input
|
||||||
</el-select>
|
v-model="dataForm.name"
|
||||||
</el-form-item>
|
clearable
|
||||||
</el-col>
|
placeholder="请输入模板名称" />
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="24">
|
||||||
<el-form-item label="打印方式" prop="printModel">
|
<el-form-item
|
||||||
<el-select v-model="dataForm.printModel" style="width: 100%;" placeholder="请选择打印方式" clearable>
|
label="标签类型"
|
||||||
<el-option v-for="dict in printModelList" :key="dict.id" :label="dict.name" :value="dict.id" />
|
prop="typeId">
|
||||||
</el-select>
|
<el-select
|
||||||
</el-form-item>
|
v-model="dataForm.typeId"
|
||||||
</el-col>
|
style="width: 100%"
|
||||||
<el-col :span="12">
|
placeholder="请选择标签类型"
|
||||||
<el-form-item label="标签备注" prop="remark">
|
clearable>
|
||||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入标签备注" />
|
<el-option
|
||||||
</el-form-item>
|
v-for="dict in typeList"
|
||||||
</el-col>
|
:key="dict.id"
|
||||||
</el-row>
|
:label="dict.name"
|
||||||
<el-row :gutter="20">
|
:value="dict.id" />
|
||||||
<el-col :span="12">
|
</el-select>
|
||||||
<el-form-item label="模板设计" prop="content">
|
</el-form-item>
|
||||||
<el-button icon="el-icon-edit" @click="btnClickDesign()">模板设计</el-button>
|
</el-col>
|
||||||
</el-form-item>
|
</el-row>
|
||||||
</el-col>
|
<el-row :gutter="20">
|
||||||
<!-- <el-col :span="12">
|
<el-col :span="24">
|
||||||
<el-form-item label="单位平方数" prop="area">
|
<el-form-item
|
||||||
<el-input v-model="dataForm.area" placeholder="请输入单位平方数" />
|
label="打印方式"
|
||||||
</el-form-item>
|
prop="printModel">
|
||||||
</el-col> -->
|
<el-select
|
||||||
</el-row>
|
v-model="dataForm.printModel"
|
||||||
<!-- <el-row :gutter="20">
|
style="width: 100%"
|
||||||
<el-col :span="24">
|
placeholder="请选择打印方式"
|
||||||
<el-form-item label="完成单位产品用时" prop="processTime">
|
clearable>
|
||||||
<el-input v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" />
|
<el-option
|
||||||
</el-form-item>
|
v-for="dict in printModelList"
|
||||||
</el-col>
|
:key="dict.id"
|
||||||
</el-row> -->
|
:label="dict.name"
|
||||||
</el-form>
|
:value="dict.id" />
|
||||||
|
</el-select>
|
||||||
<!-- <small-title
|
</el-form-item>
|
||||||
style="margin: 16px 0; padding-left: 8px"
|
</el-col>
|
||||||
:no-padding="true">
|
<el-col :span="24">
|
||||||
产品属性列表
|
<el-form-item
|
||||||
</small-title>
|
label="标签备注"
|
||||||
|
prop="remark">
|
||||||
<div class="attr-list">
|
<el-input
|
||||||
<base-table
|
v-model="dataForm.remark"
|
||||||
:table-props="tableProps"
|
clearable
|
||||||
:page="listQuery.pageNo"
|
placeholder="请输入标签备注" />
|
||||||
:limit="listQuery.pageSize"
|
</el-form-item>
|
||||||
:add-button-show="isdetail ? null : '添加属性'"
|
</el-col>
|
||||||
@emitButtonClick="addNew()"
|
</el-row>
|
||||||
:table-data="productAttributeList">
|
<el-row :gutter="20">
|
||||||
<method-btn
|
<el-col :span="24">
|
||||||
v-if="!isdetail"
|
<el-form-item
|
||||||
slot="handleBtn"
|
label="模板设计"
|
||||||
:width="120"
|
prop="content">
|
||||||
label="操作"
|
<el-button
|
||||||
:method-list="tableBtn"
|
icon="el-icon-edit"
|
||||||
@clickBtn="handleClick" />
|
@click="btnClickDesign()">
|
||||||
</base-table>
|
模板设计
|
||||||
<pagination
|
</el-button>
|
||||||
v-show="listQuery.total > 0"
|
</el-form-item>
|
||||||
:total="listQuery.total"
|
</el-col>
|
||||||
:page.sync="listQuery.pageNo"
|
</el-row>
|
||||||
:limit.sync="listQuery.pageSize"
|
</el-form>
|
||||||
:page-sizes="[5, 10, 15]"
|
</div>
|
||||||
@pagination="getList" />
|
</div>
|
||||||
</div> -->
|
<template slot="footer">
|
||||||
</div>
|
<el-button
|
||||||
</div>
|
style=""
|
||||||
|
@click="goback()">
|
||||||
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
|
取消
|
||||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
|
||||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
|
||||||
编辑
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<span v-if="!isdetail">
|
<el-button
|
||||||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
|
type="primary"
|
||||||
<el-button
|
@click="dataFormSubmit()">
|
||||||
v-if="dataForm.id && !isdetail"
|
确定
|
||||||
type="primary"
|
</el-button>
|
||||||
@click="addNew()">
|
</template>
|
||||||
添加属性
|
<print-model-design
|
||||||
</el-button>
|
v-if="modelShow"
|
||||||
</span>
|
ref="printModelDesign"
|
||||||
</div> -->
|
@saveData="getModelData" />
|
||||||
<template slot="footer">
|
</el-dialog>
|
||||||
<el-button style="" @click="goback()">取消</el-button>
|
|
||||||
<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
|
|
||||||
编辑
|
|
||||||
</el-button> -->
|
|
||||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
||||||
</template>
|
|
||||||
<print-model-design v-if="modelShow" ref="printModelDesign" @saveData="getModelData" />
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {
|
import {
|
||||||
createPackingModel,
|
createPackingModel,
|
||||||
updatePackingModel,
|
updatePackingModel,
|
||||||
getPackingModel,
|
getPackingModel,
|
||||||
// getWorkOrderList,
|
getTypeList,
|
||||||
// getCode,
|
|
||||||
// getCustomerList,
|
|
||||||
getTypeList
|
|
||||||
} from '@/api/base/printModel.js';
|
} from '@/api/base/printModel.js';
|
||||||
// import productAttrAdd from './attr-add';
|
// import productAttrAdd from './attr-add';
|
||||||
import { parseTime } from '../mixins/code-filter';
|
import { parseTime } from '../mixins/code-filter';
|
||||||
import SmallTitle from './SmallTitle';
|
import SmallTitle from './SmallTitle';
|
||||||
import printModelDesign from '../custom/index'
|
import printModelDesign from '../custom/index';
|
||||||
|
|
||||||
const tableBtn = [
|
const tableBtn = [
|
||||||
{
|
{
|
||||||
@@ -166,42 +158,42 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SmallTitle, printModelDesign },
|
components: { SmallTitle, printModelDesign },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
tableBtn,
|
tableBtn,
|
||||||
tableProps,
|
tableProps,
|
||||||
modelShow:false,
|
modelShow: false,
|
||||||
typeList:[],
|
typeList: [],
|
||||||
dataForm: {
|
dataForm: {
|
||||||
id: null,
|
id: null,
|
||||||
// name: '', // 产品名称
|
// name: '', // 产品名称
|
||||||
name: '', // 产品编码
|
name: '', // 产品编码
|
||||||
// area: 0, // 单位平方数(float only)
|
// area: 0, // 单位平方数(float only)
|
||||||
typeId: null, // 产品类型id
|
typeId: null, // 产品类型id
|
||||||
printModel: null, // 单位产品用时 (s)
|
printModel: null, // 单位产品用时 (s)
|
||||||
content: '', // 规格
|
content: '', // 规格
|
||||||
remark: '', // 单位id
|
remark: '', // 单位id
|
||||||
},
|
},
|
||||||
printModelList: [
|
printModelList: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name:'自动'
|
name: '自动',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: '手动'
|
name: '手动',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
listQuery: {
|
listQuery: {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 0,
|
total: 0,
|
||||||
},
|
},
|
||||||
dataRule: {
|
dataRule: {
|
||||||
typeId: [
|
typeId: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '打印类型不能为空',
|
message: '打印类型不能为空',
|
||||||
@@ -221,7 +213,7 @@ export default {
|
|||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
printModel: [
|
printModel: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '模板类型不能为空',
|
message: '模板类型不能为空',
|
||||||
@@ -229,11 +221,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
content: [
|
content: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '模板不能为空',
|
message: '模板不能为空',
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
processTime: [
|
processTime: [
|
||||||
{
|
{
|
||||||
@@ -251,30 +243,30 @@ export default {
|
|||||||
},
|
},
|
||||||
// isdetail: false,
|
// isdetail: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getModelData(data) {
|
getModelData(data) {
|
||||||
console.log(data)
|
console.log(data);
|
||||||
this.content = JSON.stringify(data)
|
this.content = JSON.stringify(data);
|
||||||
this.dataForm.content = JSON.stringify(data)
|
this.dataForm.content = JSON.stringify(data);
|
||||||
},
|
},
|
||||||
btnClickDesign() {
|
btnClickDesign() {
|
||||||
console.log(11111)
|
console.log(11111);
|
||||||
this.modelShow = true
|
this.modelShow = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.printModelDesign.init(this.dataForm.content)
|
this.$refs.printModelDesign.init(this.dataForm.content);
|
||||||
console.log(this.dataForm.content)
|
console.log(this.dataForm.content);
|
||||||
})
|
});
|
||||||
// this.$router.push({
|
// this.$router.push({
|
||||||
// path: '/printModelDesign'
|
// path: '/printModelDesign'
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
// initData() {
|
// initData() {
|
||||||
// this.productAttributeList.splice(0);
|
// this.productAttributeList.splice(0);
|
||||||
// this.listQuery.total = 0;
|
// this.listQuery.total = 0;
|
||||||
// },
|
// },
|
||||||
init(id) {
|
init(id) {
|
||||||
this.getDict()
|
this.getDict();
|
||||||
// this.initData();
|
// this.initData();
|
||||||
// this.isdetail = isdetail || false;
|
// this.isdetail = isdetail || false;
|
||||||
this.dataForm.id = id || null;
|
this.dataForm.id = id || null;
|
||||||
@@ -284,34 +276,34 @@ export default {
|
|||||||
this.$refs['dataForm'].resetFields();
|
this.$refs['dataForm'].resetFields();
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id) {
|
||||||
// 获取产品详情
|
// 获取产品详情
|
||||||
getPackingModel(id).then((response) => {
|
getPackingModel(id).then((response) => {
|
||||||
this.dataForm = response.data;
|
this.dataForm = response.data;
|
||||||
});
|
});
|
||||||
// 获取产品的属性列表
|
// 获取产品的属性列表
|
||||||
// this.getList();
|
// this.getList();
|
||||||
} else {
|
} else {
|
||||||
// getCode().then((res) => {
|
// getCode().then((res) => {
|
||||||
// this.dataForm.packagingCode = res.data;
|
// this.dataForm.packagingCode = res.data;
|
||||||
// });
|
// });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getDict() {
|
getDict() {
|
||||||
// 获取产品的属性列表
|
// 获取产品的属性列表
|
||||||
// getCustomerList().then((response) => {
|
// getCustomerList().then((response) => {
|
||||||
// console.log(response);
|
// console.log(response);
|
||||||
// this.customerList = response.data
|
// this.customerList = response.data
|
||||||
// // this.listQuery.total = response.data.total;
|
// // this.listQuery.total = response.data.total;
|
||||||
// })
|
// })
|
||||||
getTypeList().then((response) => {
|
getTypeList().then((response) => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
this.typeList = response.data
|
this.typeList = response.data;
|
||||||
// this.listQuery.total = response.data.total;
|
// this.listQuery.total = response.data.total;
|
||||||
})
|
});
|
||||||
// getWorkOrderList().then((response) => {
|
// getWorkOrderList().then((response) => {
|
||||||
// // console.log(response);
|
// // console.log(response);
|
||||||
// this.workOrderList = response.data
|
// this.workOrderList = response.data
|
||||||
// // this.listQuery.total = response.data.total;
|
// // this.listQuery.total = response.data.total;
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
@@ -353,7 +345,7 @@ export default {
|
|||||||
if (valid) {
|
if (valid) {
|
||||||
// 修改的提交
|
// 修改的提交
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id) {
|
||||||
updatePackingModel(this.dataForm).then((response) => {
|
updatePackingModel(this.dataForm).then((response) => {
|
||||||
this.$modal.msgSuccess('修改成功');
|
this.$modal.msgSuccess('修改成功');
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit('refreshDataList');
|
this.$emit('refreshDataList');
|
||||||
@@ -361,7 +353,7 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 添加的提交
|
// 添加的提交
|
||||||
createPackingModel(this.dataForm).then((response) => {
|
createPackingModel(this.dataForm).then((response) => {
|
||||||
this.$modal.msgSuccess('新增成功');
|
this.$modal.msgSuccess('新增成功');
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit('refreshDataList');
|
this.$emit('refreshDataList');
|
||||||
@@ -439,35 +431,31 @@ export default {
|
|||||||
}
|
}
|
||||||
</style> -->
|
</style> -->
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
|
||||||
.baseDialog .el-dialog__header {
|
.baseDialog .el-dialog__header {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: rgba(0, 0, 0, 0.85);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 13px 24px;
|
padding: 13px 24px;
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
}
|
}
|
||||||
.baseDialog .el-dialog__header .titleStyle::before{
|
.baseDialog .el-dialog__header .titleStyle::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background-color: #0B58FF;
|
background-color: #0b58ff;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
.baseDialog .el-dialog__body {
|
.baseDialog .el-dialog__body {
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
}
|
}
|
||||||
.baseDialog .btnTextStyle {
|
.baseDialog .btnTextStyle {
|
||||||
letter-spacing:6px;
|
letter-spacing: 6px;
|
||||||
padding: 9px 10px 9px 16px;
|
padding: 9px 10px 9px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,13 +2,14 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-01 14:55:51
|
* @Date: 2023-08-01 14:55:51
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2023-12-04 13:38:45
|
* @LastEditTime: 2024-04-03 15:08:38
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
|
<base-table :max-height="tableH" :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"
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||||
@clickBtn="handleClick" />
|
@clickBtn="handleClick" />
|
||||||
</base-table>
|
</base-table>
|
||||||
@@ -25,7 +26,9 @@ import AddOrUpdate from './add-or-updata';
|
|||||||
import basicPage from '../mixins/basic-page';
|
import basicPage from '../mixins/basic-page';
|
||||||
import { parseTime } from '../mixins/code-filter';
|
import { parseTime } from '../mixins/code-filter';
|
||||||
import printModelDesign from '../custom/index'
|
import printModelDesign from '../custom/index'
|
||||||
import { updatePackingModel,} from '@/api/base/printModel.js';
|
import { updatePackingModel, } from '@/api/base/printModel.js';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
deletePackingModel,
|
deletePackingModel,
|
||||||
getPackingModelPage,
|
getPackingModelPage,
|
||||||
@@ -59,7 +62,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -162,7 +165,7 @@ export default {
|
|||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.pageNo = 1;
|
this.listQuery.pageNo = 1;
|
||||||
this.listQuery.pageSize = 10;
|
this.listQuery.pageSize = 20;
|
||||||
this.listQuery.packagingCode = val.packagingCode;
|
this.listQuery.packagingCode = val.packagingCode;
|
||||||
this.listQuery.createTime = val.createTime;
|
this.listQuery.createTime = val.createTime;
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
@@ -170,7 +173,7 @@ export default {
|
|||||||
case 'reset':
|
case 'reset':
|
||||||
this.$refs.searchBarForm.resetForm();
|
this.$refs.searchBarForm.resetForm();
|
||||||
this.listQuery = {
|
this.listQuery = {
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 1,
|
total: 1,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,106 +6,72 @@
|
|||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-dialog class="baseDialog" :visible.sync="visible" :show-close="false" :wrapper-closable="false" width="40%" show-close="true">
|
<el-dialog
|
||||||
<small-title slot="title" :no-padding="true">
|
class="baseDialog"
|
||||||
{{ !dataForm.id ? '新增' : '编辑' }}
|
:visible.sync="visible"
|
||||||
</small-title>
|
:show-close="true"
|
||||||
|
:wrapper-closable="false"
|
||||||
|
width="50%">
|
||||||
|
<small-title
|
||||||
|
slot="title"
|
||||||
|
:no-padding="true">
|
||||||
|
{{ !dataForm.id ? '新增' : '编辑' }}
|
||||||
|
</small-title>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="visual-part">
|
<div class="visual-part">
|
||||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="auto"
|
<el-form
|
||||||
@keyup.enter.native="dataFormSubmit">
|
ref="dataForm"
|
||||||
<el-row :gutter="20">
|
:model="dataForm"
|
||||||
<el-col :span="12">
|
:rules="dataRule"
|
||||||
<el-form-item label="名称" prop="name">
|
label-width="auto"
|
||||||
<el-input v-model="dataForm.name" clearable placeholder="名称" />
|
@keyup.enter.native="dataFormSubmit">
|
||||||
</el-form-item>
|
<el-row :gutter="20">
|
||||||
</el-col>
|
<el-col :span="24">
|
||||||
<el-col :span="12">
|
<el-form-item
|
||||||
<el-form-item label="类型描述" prop="description">
|
label="名称"
|
||||||
<el-input v-model="dataForm.description" clearable placeholder="类型描述" />
|
prop="name">
|
||||||
</el-form-item>
|
<el-input
|
||||||
</el-col>
|
v-model="dataForm.name"
|
||||||
</el-row>
|
clearable
|
||||||
<!-- <el-row :gutter="20">
|
placeholder="名称" />
|
||||||
<el-col :span="24">
|
</el-form-item>
|
||||||
<el-form-item label="完成单位产品用时" prop="processTime">
|
</el-col>
|
||||||
<el-input v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" />
|
<el-col :span="24">
|
||||||
</el-form-item>
|
<el-form-item
|
||||||
</el-col>
|
label="类型描述"
|
||||||
</el-row> -->
|
prop="description">
|
||||||
</el-form>
|
<el-input
|
||||||
|
v-model="dataForm.description"
|
||||||
<!-- <small-title
|
clearable
|
||||||
style="margin: 16px 0; padding-left: 8px"
|
placeholder="类型描述" />
|
||||||
:no-padding="true">
|
</el-form-item>
|
||||||
产品属性列表
|
</el-col>
|
||||||
</small-title>
|
</el-row>
|
||||||
|
</el-form>
|
||||||
<div class="attr-list">
|
</div>
|
||||||
<base-table
|
</div>
|
||||||
:table-props="tableProps"
|
<template slot="footer">
|
||||||
:page="listQuery.pageNo"
|
<el-button
|
||||||
:limit="listQuery.pageSize"
|
style=""
|
||||||
:add-button-show="isdetail ? null : '添加属性'"
|
@click="goback()">
|
||||||
@emitButtonClick="addNew()"
|
取消
|
||||||
:table-data="productAttributeList">
|
|
||||||
<method-btn
|
|
||||||
v-if="!isdetail"
|
|
||||||
slot="handleBtn"
|
|
||||||
:width="120"
|
|
||||||
label="操作"
|
|
||||||
:method-list="tableBtn"
|
|
||||||
@clickBtn="handleClick" />
|
|
||||||
</base-table>
|
|
||||||
<pagination
|
|
||||||
v-show="listQuery.total > 0"
|
|
||||||
:total="listQuery.total"
|
|
||||||
:page.sync="listQuery.pageNo"
|
|
||||||
:limit.sync="listQuery.pageSize"
|
|
||||||
:page-sizes="[5, 10, 15]"
|
|
||||||
@pagination="getList" />
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
|
|
||||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
|
||||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
|
||||||
编辑
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<span v-if="!isdetail">
|
<el-button
|
||||||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
|
type="primary"
|
||||||
<el-button
|
@click="dataFormSubmit()">
|
||||||
v-if="dataForm.id && !isdetail"
|
确定
|
||||||
type="primary"
|
</el-button>
|
||||||
@click="addNew()">
|
</template>
|
||||||
添加属性
|
</el-dialog>
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</div> -->
|
|
||||||
<template slot="footer">
|
|
||||||
<el-button style="" @click="goback()">取消</el-button>
|
|
||||||
<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
|
|
||||||
编辑
|
|
||||||
</el-button> -->
|
|
||||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {
|
import {
|
||||||
createPackingType,
|
createPackingType,
|
||||||
updatePackingType,
|
updatePackingType,
|
||||||
getPackingType,
|
getPackingType,
|
||||||
// getWorkOrderList,
|
|
||||||
// getCode,
|
|
||||||
// getCustomerList,
|
|
||||||
// getModelList
|
|
||||||
} from '@/api/base/modelType.js';
|
} from '@/api/base/modelType.js';
|
||||||
// import productAttrAdd from './attr-add';
|
|
||||||
import { parseTime } from '../mixins/code-filter';
|
import { parseTime } from '../mixins/code-filter';
|
||||||
import SmallTitle from './SmallTitle';
|
import SmallTitle from './SmallTitle';
|
||||||
|
|
||||||
@@ -142,20 +108,15 @@ export default {
|
|||||||
visible: false,
|
visible: false,
|
||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
tableBtn,
|
tableBtn,
|
||||||
tableProps,
|
tableProps,
|
||||||
customerList: [],
|
customerList: [],
|
||||||
modelList:[],
|
modelList: [],
|
||||||
workOrderList:[],
|
workOrderList: [],
|
||||||
productAttributeList: [],
|
productAttributeList: [],
|
||||||
dataForm: {
|
dataForm: {
|
||||||
id: null,
|
id: null,
|
||||||
// name: '', // 产品名称
|
name: '', // 产品编码
|
||||||
name: '', // 产品编码
|
description: null, // 产品类型id
|
||||||
// area: 0, // 单位平方数(float only)
|
|
||||||
description: null, // 产品类型id
|
|
||||||
// workOrderId: null, // 单位产品用时 (s)
|
|
||||||
// customerId: '', // 规格
|
|
||||||
// content: '', // 单位id
|
|
||||||
},
|
},
|
||||||
listQuery: {
|
listQuery: {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
@@ -171,18 +132,10 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// isdetail: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// initData() {
|
init(id) {
|
||||||
// this.productAttributeList.splice(0);
|
|
||||||
// this.listQuery.total = 0;
|
|
||||||
// },
|
|
||||||
init(id) {
|
|
||||||
// this.getDict()
|
|
||||||
// this.initData();
|
|
||||||
// this.isdetail = isdetail || false;
|
|
||||||
this.dataForm.id = id || null;
|
this.dataForm.id = id || null;
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
|
|
||||||
@@ -191,76 +144,20 @@ export default {
|
|||||||
|
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id) {
|
||||||
// 获取产品详情
|
// 获取产品详情
|
||||||
getPackingType(id).then((response) => {
|
getPackingType(id).then((response) => {
|
||||||
this.dataForm = response.data;
|
this.dataForm = response.data;
|
||||||
});
|
});
|
||||||
// 获取产品的属性列表
|
|
||||||
// this.getList();
|
|
||||||
} else {
|
|
||||||
// getCode().then((res) => {
|
|
||||||
// this.dataForm.packagingCode = res.data;
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// getDict() {
|
|
||||||
// // 获取产品的属性列表
|
|
||||||
// getCustomerList().then((response) => {
|
|
||||||
// console.log(response);
|
|
||||||
// this.customerList = response.data
|
|
||||||
// // this.listQuery.total = response.data.total;
|
|
||||||
// })
|
|
||||||
// getModelList().then((response) => {
|
|
||||||
// console.log(response);
|
|
||||||
// this.modelList = response.data
|
|
||||||
// // this.listQuery.total = response.data.total;
|
|
||||||
// })
|
|
||||||
// getWorkOrderList().then((response) => {
|
|
||||||
// // console.log(response);
|
|
||||||
// this.workOrderList = response.data
|
|
||||||
// // this.listQuery.total = response.data.total;
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// handleClick(raw) {
|
|
||||||
// if (raw.type === 'delete') {
|
|
||||||
// this.$confirm(
|
|
||||||
// `确定对${
|
|
||||||
// raw.data.name
|
|
||||||
// ? '[名称=' + raw.data.name + ']'
|
|
||||||
// : '[序号=' + raw.data._pageIndex + ']'
|
|
||||||
// }进行删除操作?`,
|
|
||||||
// '提示',
|
|
||||||
// {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// type: 'warning',
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
// .then(() => {
|
|
||||||
// deleteProductAttr(raw.data.id).then(({ data }) => {
|
|
||||||
// this.$message({
|
|
||||||
// message: '操作成功',
|
|
||||||
// type: 'success',
|
|
||||||
// duration: 1500,
|
|
||||||
// onClose: () => {
|
|
||||||
// this.getList();
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// .catch(() => {});
|
|
||||||
// } else {
|
|
||||||
// this.addNew(raw.data.id);
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit() {
|
dataFormSubmit() {
|
||||||
this.$refs['dataForm'].validate((valid) => {
|
this.$refs['dataForm'].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
// 修改的提交
|
// 修改的提交
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id) {
|
||||||
updatePackingType(this.dataForm).then((response) => {
|
updatePackingType(this.dataForm).then((response) => {
|
||||||
this.$modal.msgSuccess('修改成功');
|
this.$modal.msgSuccess('修改成功');
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit('refreshDataList');
|
this.$emit('refreshDataList');
|
||||||
@@ -268,7 +165,7 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 添加的提交
|
// 添加的提交
|
||||||
createPackingType(this.dataForm).then((response) => {
|
createPackingType(this.dataForm).then((response) => {
|
||||||
this.$modal.msgSuccess('新增成功');
|
this.$modal.msgSuccess('新增成功');
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit('refreshDataList');
|
this.$emit('refreshDataList');
|
||||||
@@ -294,88 +191,32 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- <style scoped>
|
|
||||||
.drawer >>> .el-drawer {
|
|
||||||
border-radius: 8px 0 0 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .el-form-item__label {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .el-drawer__header {
|
|
||||||
margin: 0;
|
|
||||||
padding: 32px 32px 24px;
|
|
||||||
border-bottom: 1px solid #dcdfe6;
|
|
||||||
}
|
|
||||||
.drawer >>> .el-drawer__body {
|
|
||||||
flex: 1;
|
|
||||||
height: 1px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .content {
|
|
||||||
padding: 30px 24px;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
/* height: 100%; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .visual-part {
|
|
||||||
flex: 1 auto;
|
|
||||||
max-height: 76vh;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
padding-right: 10px; /* 调整滚动条样式 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .el-form,
|
|
||||||
.drawer >>> .attr-list {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-body__footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 18px;
|
|
||||||
}
|
|
||||||
</style> -->
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
|
||||||
.baseDialog .el-dialog__header {
|
.baseDialog .el-dialog__header {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: rgba(0, 0, 0, 0.85);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 13px 24px;
|
padding: 13px 24px;
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
}
|
}
|
||||||
.baseDialog .el-dialog__header .titleStyle::before{
|
.baseDialog .el-dialog__header .titleStyle::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background-color: #0B58FF;
|
background-color: #0b58ff;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
.baseDialog .el-dialog__body {
|
.baseDialog .el-dialog__body {
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
}
|
}
|
||||||
.baseDialog .btnTextStyle {
|
.baseDialog .btnTextStyle {
|
||||||
letter-spacing:6px;
|
letter-spacing: 6px;
|
||||||
padding: 9px 10px 9px 16px;
|
padding: 9px 10px 9px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,38 +2,21 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-01 14:55:51
|
* @Date: 2023-08-01 14:55:51
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2023-12-04 13:44:01
|
* @LastEditTime: 2024-04-03 15:09:06
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<search-bar
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||||
:formConfigs="formConfig"
|
<base-table :max-height="tableH" :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||||
ref="searchBarForm"
|
:table-data="tableData">
|
||||||
@headBtnClick="buttonClick" />
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||||
<base-table
|
@clickBtn="handleClick" />
|
||||||
:table-props="tableProps"
|
</base-table>
|
||||||
:page="listQuery.pageNo"
|
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||||
:limit="listQuery.pageSize"
|
@pagination="getDataList" />
|
||||||
:table-data="tableData">
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
|
||||||
<method-btn
|
</div>
|
||||||
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" />
|
|
||||||
<add-or-update
|
|
||||||
v-if="addOrUpdateVisible"
|
|
||||||
ref="addOrUpdate"
|
|
||||||
@refreshDataList="getDataList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -41,6 +24,7 @@ import AddOrUpdate from './add-or-updata';
|
|||||||
// import unitDict from './unitDict';
|
// import unitDict from './unitDict';
|
||||||
import basicPage from '../mixins/basic-page';
|
import basicPage from '../mixins/basic-page';
|
||||||
import { parseTime } from '../mixins/code-filter';
|
import { parseTime } from '../mixins/code-filter';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
import {
|
import {
|
||||||
deletePackingType,
|
deletePackingType,
|
||||||
getPackingTypePage,
|
getPackingTypePage,
|
||||||
@@ -64,7 +48,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -154,7 +138,7 @@ export default {
|
|||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.pageNo = 1;
|
this.listQuery.pageNo = 1;
|
||||||
this.listQuery.pageSize = 10;
|
this.listQuery.pageSize = 20;
|
||||||
this.listQuery.packagingCode = val.packagingCode;
|
this.listQuery.packagingCode = val.packagingCode;
|
||||||
this.listQuery.createTime = val.createTime;
|
this.listQuery.createTime = val.createTime;
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
@@ -162,7 +146,7 @@ export default {
|
|||||||
case 'reset':
|
case 'reset':
|
||||||
this.$refs.searchBarForm.resetForm();
|
this.$refs.searchBarForm.resetForm();
|
||||||
this.listQuery = {
|
this.listQuery = {
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 1,
|
total: 1,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,348 +1,368 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="choicepart-container">
|
<div class="choicepart-container">
|
||||||
<navbar />
|
<navbar />
|
||||||
<div class="choicepart-wrapper">
|
<div class="choicepart-wrapper">
|
||||||
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1710px;height:538px;'" v-show="showItem">
|
<div
|
||||||
<div class="choicepart-line1">
|
class="choicepart-box"
|
||||||
<div
|
id="choicepartBox"
|
||||||
v-for="(item, index) in menuArr1"
|
:style="'transform:scale(' + scale + ')'"
|
||||||
:key="index"
|
style="width: 1710px; height: 538px"
|
||||||
class="choicepart-item"
|
v-show="showItem">
|
||||||
@click="handelClick(item, item.choicepart)"
|
<div class="choicepart-line1">
|
||||||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
|
<div
|
||||||
>
|
v-for="(item, index) in menuArr1"
|
||||||
<div>
|
:key="index"
|
||||||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
|
class="choicepart-item"
|
||||||
</div>
|
@click="handelClick(item, item.choicepart)"
|
||||||
<div class="choicepart-item-title">{{item.meta.title}}</div>
|
:style="{
|
||||||
</div>
|
opacity: item.visible ? 1 : 0.4,
|
||||||
</div>
|
pointerEvents: item.visible ? 'auto' : 'none',
|
||||||
<div class="choicepart-line2">
|
}">
|
||||||
<div
|
<div>
|
||||||
v-for="(item, index) in menuArr2"
|
<img
|
||||||
:key="index"
|
:src="
|
||||||
class="choicepart-item"
|
require(`../../assets/images/choicepart/${item.name}.png`)
|
||||||
@click="handelClick(item, item.choicepart)"
|
"
|
||||||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
|
alt="" />
|
||||||
>
|
</div>
|
||||||
<div>
|
<div class="choicepart-item-title">{{ item.meta.title }}</div>
|
||||||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="choicepart-item-title">{{item.meta.title}}</div>
|
<div class="choicepart-line2">
|
||||||
</div>
|
<div
|
||||||
</div>
|
v-for="(item, index) in menuArr2"
|
||||||
</div>
|
:key="index"
|
||||||
</div>
|
class="choicepart-item"
|
||||||
<div class="choicepart-footer">© 中建材智能自动化研究院有限公司</div>
|
@click="handelClick(item, item.choicepart)"
|
||||||
</div>
|
:style="{
|
||||||
|
opacity: item.visible ? 1 : 0.4,
|
||||||
|
pointerEvents: item.visible ? 'auto' : 'none',
|
||||||
|
}">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
:src="
|
||||||
|
require(`../../assets/images/choicepart/${item.name}.png`)
|
||||||
|
"
|
||||||
|
alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="choicepart-item-title">{{ item.meta.title }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="choicepart-footer">© 中建材智能自动化研究院有限公司</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Navbar from './components/Navbar'
|
import Navbar from './components/Navbar';
|
||||||
import { debounce } from '@/utils/debounce'
|
import { debounce } from '@/utils/debounce';
|
||||||
export default {
|
export default {
|
||||||
components: { Navbar },
|
components: { Navbar },
|
||||||
name: 'choicePart',
|
name: 'choicePart',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
boxReset: '',
|
scale: 1,
|
||||||
scale: 1,
|
menuArr1: [
|
||||||
menuArr1: [
|
{
|
||||||
{
|
name: 'Core',
|
||||||
name: 'Core',
|
title: '基础核心',
|
||||||
title: '基础核心',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Order',
|
||||||
name: 'Order',
|
title: '订单管理',
|
||||||
title: '订单管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Equipment',
|
||||||
name: 'Equipment',
|
title: '设备管理',
|
||||||
title: '设备管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Group',
|
||||||
name: 'Group',
|
title: '班组管理',
|
||||||
title: '班组管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Quality',
|
||||||
name: 'Quality',
|
title: '质量管理',
|
||||||
title: '质量管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Warehouse',
|
||||||
name: 'Warehouse',
|
title: '仓库管理',
|
||||||
title: '仓库管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Energy',
|
||||||
name: 'Energy',
|
title: '能源管理',
|
||||||
title: '能源管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Packaging',
|
||||||
name: 'Packaging',
|
title: '包装管理',
|
||||||
title: '包装管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
}
|
],
|
||||||
],
|
menuArr2: [
|
||||||
menuArr2: [
|
{
|
||||||
{
|
name: 'Material',
|
||||||
name: 'Material',
|
title: '物料管理',
|
||||||
title: '物料管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Extend',
|
||||||
name: 'Extend',
|
title: '工艺管理',
|
||||||
title: '工艺管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
// {
|
||||||
// {
|
// name: 'Delivery',
|
||||||
// name: 'Delivery',
|
// title: '成品发货',
|
||||||
// title: '成品发货',
|
// visible: false,
|
||||||
// visible: false,
|
// meta: {
|
||||||
// meta: {
|
// title: ''
|
||||||
// title: ''
|
// }
|
||||||
// }
|
// },
|
||||||
// },
|
{
|
||||||
{
|
name: 'Report',
|
||||||
name: 'Report',
|
title: '报表管理',
|
||||||
title: '报表管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Cost',
|
||||||
name: 'Cost',
|
title: '成本管理',
|
||||||
title: '成本管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'SafetyEnvironmental',
|
||||||
name: 'SafetyEnvironmental',
|
title: '安环管理',
|
||||||
title: '安环管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'Databoard',
|
||||||
name: 'Databoard',
|
title: '数据驾驶舱',
|
||||||
title: '数据驾驶舱',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: 'System',
|
||||||
name: 'System',
|
title: '系统管理',
|
||||||
title: '系统管理',
|
visible: false,
|
||||||
visible: false,
|
meta: {
|
||||||
meta: {
|
title: '',
|
||||||
title: ''
|
},
|
||||||
}
|
},
|
||||||
}
|
],
|
||||||
],
|
showItem: false,
|
||||||
showItem: false
|
};
|
||||||
}
|
},
|
||||||
},
|
// computed:{
|
||||||
// computed:{
|
// ...mapGetters(['sidebarRouters'])
|
||||||
// ...mapGetters(['sidebarRouters'])
|
// },
|
||||||
// },
|
mounted() {
|
||||||
mounted() {
|
this.getMsg();
|
||||||
this.getMsg()
|
this.boxReset();
|
||||||
this.boxReset = debounce(() => {
|
window.addEventListener('resize', this.boxReset);
|
||||||
this.resetSize()
|
},
|
||||||
}, 300)
|
destroyed() {
|
||||||
this.boxReset()
|
window.removeEventListener('resize', this.boxReset);
|
||||||
window.addEventListener('resize', () => {
|
},
|
||||||
this.boxReset()
|
methods: {
|
||||||
})
|
boxReset() {
|
||||||
},
|
debounce(() => {
|
||||||
methods: {
|
this.resetSize();
|
||||||
getMsg() {
|
}, 300)();
|
||||||
let menuList = this.$store.state.permission.sidebarRouters
|
},
|
||||||
console.log(menuList)
|
getMsg() {
|
||||||
if (menuList.length > 0) {
|
let menuList = this.$store.state.permission.sidebarRouters;
|
||||||
for (let i = 0; i < menuList.length; i ++) {
|
console.log(menuList);
|
||||||
for (let k = 0; k < 8; k++) {
|
if (menuList.length > 0) {
|
||||||
if (menuList[i].name === this.menuArr1[k].name) {
|
for (let i = 0; i < menuList.length; i++) {
|
||||||
this.menuArr1[k].visible = true
|
for (let k = 0; k < 8; k++) {
|
||||||
this.menuArr1[k].id = menuList[i].id
|
if (menuList[i].name === this.menuArr1[k].name) {
|
||||||
this.menuArr1[k].choicepart = i
|
this.menuArr1[k].visible = true;
|
||||||
this.menuArr1[k].children = menuList[i].children
|
this.menuArr1[k].id = menuList[i].id;
|
||||||
this.menuArr1[k].meta = menuList[i].meta
|
this.menuArr1[k].choicepart = i;
|
||||||
}
|
this.menuArr1[k].children = menuList[i].children;
|
||||||
}
|
this.menuArr1[k].meta = menuList[i].meta;
|
||||||
for (let j = 0; j < 7; j++) {
|
}
|
||||||
if (menuList[i].name === this.menuArr2[j].name) {
|
}
|
||||||
this.menuArr2[j].visible = true
|
for (let j = 0; j < 7; j++) {
|
||||||
this.menuArr2[j].id = menuList[i].id
|
if (menuList[i].name === this.menuArr2[j].name) {
|
||||||
this.menuArr2[j].choicepart = i
|
this.menuArr2[j].visible = true;
|
||||||
this.menuArr2[j].children = menuList[i].children
|
this.menuArr2[j].id = menuList[i].id;
|
||||||
this.menuArr2[j].meta = menuList[i].meta
|
this.menuArr2[j].choicepart = i;
|
||||||
}
|
this.menuArr2[j].children = menuList[i].children;
|
||||||
}
|
this.menuArr2[j].meta = menuList[i].meta;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(this.menuArr1)
|
}
|
||||||
console.log(this.menuArr2)
|
}
|
||||||
},
|
console.log(this.menuArr1);
|
||||||
handelClick(item, index) {
|
console.log(this.menuArr2);
|
||||||
// this.$router.push({name: 'SystemUser'})
|
},
|
||||||
this.$store.dispatch('app/setChoicepart', index)
|
handelClick(item, index) {
|
||||||
this.toRouter(item)
|
// this.$router.push({name: 'SystemUser'})
|
||||||
// if (item.meta.unuse) {
|
this.$store.dispatch('app/setChoicepart', index);
|
||||||
// this.$message.warning(this.$t('暂无数据'))
|
this.toRouter(item);
|
||||||
// } else {
|
// if (item.meta.unuse) {
|
||||||
// this.toRouter(item)
|
// this.$message.warning(this.$t('暂无数据'))
|
||||||
// }
|
// } else {
|
||||||
},
|
// this.toRouter(item)
|
||||||
toRouter(item) {
|
// }
|
||||||
console.log(item)
|
},
|
||||||
if (item.children) {
|
toRouter(item) {
|
||||||
this.toRouter(item.children[0])
|
console.log(item);
|
||||||
} else {
|
if (item.children) {
|
||||||
this.$router.push({ name: item.name })
|
this.toRouter(item.children[0]);
|
||||||
}
|
} else {
|
||||||
},
|
this.$router.push({ name: item.name });
|
||||||
resetSize() {
|
}
|
||||||
let _this = this
|
},
|
||||||
_this.showItem = false
|
resetSize() {
|
||||||
_this.loading = true
|
let _this = this;
|
||||||
let choicepartBox = document.querySelector('#choicepartBox')
|
_this.showItem = false;
|
||||||
let rw = parseFloat(window.innerWidth)
|
_this.loading = true;
|
||||||
let rh = parseFloat(window.innerHeight)
|
let choicepartBox = document.querySelector('#choicepartBox');
|
||||||
let bw = parseFloat(choicepartBox.style.width)
|
let rw = parseFloat(window.innerWidth);
|
||||||
let bh = parseFloat(choicepartBox.style.height)
|
let rh = parseFloat(window.innerHeight);
|
||||||
let wx = 0.82/(bw / rw)
|
let bw = parseFloat(choicepartBox.style.width);
|
||||||
let hx = 0.56/(bh / rh)
|
let bh = parseFloat(choicepartBox.style.height);
|
||||||
_this.scale = wx > hx ? hx : wx
|
let wx = 0.82 / (bw / rw);
|
||||||
setTimeout(_this.showItemFun, 700)
|
let hx = 0.56 / (bh / rh);
|
||||||
},
|
_this.scale = wx > hx ? hx : wx;
|
||||||
showItemFun() {
|
setTimeout(_this.showItemFun, 700);
|
||||||
this.loading = false
|
},
|
||||||
this.showItem = true
|
showItemFun() {
|
||||||
}
|
this.loading = false;
|
||||||
},
|
this.showItem = true;
|
||||||
beforeDestroy() {
|
},
|
||||||
this.showItem = false
|
},
|
||||||
}
|
beforeDestroy() {
|
||||||
}
|
this.showItem = false;
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
.choicepart-container {
|
.choicepart-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
|
background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.choicepart-wrapper {
|
.choicepart-wrapper {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(100vh - 94px);
|
height: calc(100vh - 94px);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.choicepart-box {
|
.choicepart-box {
|
||||||
// transition: all 0.3s linear;
|
// transition: all 0.3s linear;
|
||||||
.choicepart-line1 {
|
.choicepart-line1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
}
|
}
|
||||||
.choicepart-line2 {
|
.choicepart-line2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.choicepart-item {
|
.choicepart-item {
|
||||||
width: 184px;
|
width: 184px;
|
||||||
height: 224px;
|
height: 224px;
|
||||||
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat;
|
background: url('../../assets/images/choicepart/choice-item-back.png')
|
||||||
background-size: 100% 100%;
|
no-repeat;
|
||||||
border-radius: 5px;
|
background-size: 100% 100%;
|
||||||
overflow: hidden;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
overflow: hidden;
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
margin: 0 20px;
|
position: relative;
|
||||||
img {
|
margin: 0 20px;
|
||||||
width: 184px;
|
img {
|
||||||
height: 224px;
|
width: 184px;
|
||||||
}
|
height: 224px;
|
||||||
.choicepart-item-title {
|
}
|
||||||
overflow: hidden;
|
.choicepart-item-title {
|
||||||
padding: 0 10px;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
padding: 0 10px;
|
||||||
white-space: nowrap;
|
text-overflow: ellipsis;
|
||||||
position: absolute;
|
white-space: nowrap;
|
||||||
bottom: 0;
|
position: absolute;
|
||||||
left: 2px;
|
bottom: 0;
|
||||||
right: 2px;
|
left: 2px;
|
||||||
text-align: center;
|
right: 2px;
|
||||||
color: #fff;
|
text-align: center;
|
||||||
font-size: 16px;
|
color: #fff;
|
||||||
line-height: 40px;
|
font-size: 16px;
|
||||||
height: 40px;
|
line-height: 40px;
|
||||||
letter-spacing: 2px;
|
height: 40px;
|
||||||
background-color: rgba($color: #0b58ff, $alpha: 0.45);
|
letter-spacing: 2px;
|
||||||
}
|
background-color: rgba($color: #0b58ff, $alpha: 0.45);
|
||||||
}
|
}
|
||||||
.choicepart-item:hover {
|
}
|
||||||
.choicepart-item-title {
|
.choicepart-item:hover {
|
||||||
background-color: rgba($color: #0b58ff, $alpha: 1);
|
.choicepart-item-title {
|
||||||
}
|
background-color: rgba($color: #0b58ff, $alpha: 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.choicepart-footer {
|
}
|
||||||
position: absolute;
|
.choicepart-footer {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
color: #C7C7C7;
|
width: 100%;
|
||||||
user-select: none;
|
color: #c7c7c7;
|
||||||
font-size: 12px;
|
user-select: none;
|
||||||
letter-spacing: 1px;
|
font-size: 12px;
|
||||||
height: 30px;
|
letter-spacing: 1px;
|
||||||
display: grid;
|
height: 30px;
|
||||||
place-content: center;
|
display: grid;
|
||||||
bottom: 0;
|
place-content: center;
|
||||||
opacity: 0.5;
|
bottom: 0;
|
||||||
}
|
opacity: 0.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -106,6 +106,10 @@ export default {
|
|||||||
activeIndex(val) {
|
activeIndex(val) {
|
||||||
this.initChart(val);
|
this.initChart(val);
|
||||||
},
|
},
|
||||||
|
daterange(val) {
|
||||||
|
console.log('222', val)
|
||||||
|
this.templateOption.xAxis.data = val
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
@@ -124,8 +128,8 @@ export default {
|
|||||||
},
|
},
|
||||||
/** 初始化/设置 图表 */
|
/** 初始化/设置 图表 */
|
||||||
initChart(val) {
|
initChart(val) {
|
||||||
console.log('tableData', this.tableData);
|
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs.chartDiv);
|
if (!this.chart) this.chart = echarts.init(this.$refs.chartDiv);
|
||||||
|
this.chart.clear();
|
||||||
switch (val) {
|
switch (val) {
|
||||||
case 0:
|
case 0:
|
||||||
const eqCt = this.tableData.map((row) => ({
|
const eqCt = this.tableData.map((row) => ({
|
||||||
@@ -139,7 +143,7 @@ export default {
|
|||||||
...this.templateOption,
|
...this.templateOption,
|
||||||
yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
|
yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
|
||||||
series: eqCt,
|
series: eqCt,
|
||||||
});
|
}, true);
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
const eqTt = this.tableData.map((row) => ({
|
const eqTt = this.tableData.map((row) => ({
|
||||||
@@ -153,7 +157,7 @@ export default {
|
|||||||
...this.templateOption,
|
...this.templateOption,
|
||||||
yAxis: { ...this.templateOption.yAxis, name: '设备TT' },
|
yAxis: { ...this.templateOption.yAxis, name: '设备TT' },
|
||||||
series: eqTt,
|
series: eqTt,
|
||||||
});
|
}, true);
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
const plCt = this.tableData.map((row) => ({
|
const plCt = this.tableData.map((row) => ({
|
||||||
@@ -167,7 +171,7 @@ export default {
|
|||||||
...this.templateOption,
|
...this.templateOption,
|
||||||
yAxis: { ...this.templateOption.yAxis, name: '产线CT' },
|
yAxis: { ...this.templateOption.yAxis, name: '产线CT' },
|
||||||
series: plCt,
|
series: plCt,
|
||||||
});
|
}, true);
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
const plTt = this.tableData.map((row) => ({
|
const plTt = this.tableData.map((row) => ({
|
||||||
@@ -181,9 +185,10 @@ export default {
|
|||||||
...this.templateOption,
|
...this.templateOption,
|
||||||
yAxis: { ...this.templateOption.yAxis, name: '产线TT' },
|
yAxis: { ...this.templateOption.yAxis, name: '产线TT' },
|
||||||
series: plTt,
|
series: plTt,
|
||||||
});
|
}, true);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
this.activeIndex = 0
|
||||||
const eqCt2 = this.tableData.map((row) => ({
|
const eqCt2 = this.tableData.map((row) => ({
|
||||||
name: row.equName,
|
name: row.equName,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
@@ -195,7 +200,7 @@ export default {
|
|||||||
...this.templateOption,
|
...this.templateOption,
|
||||||
yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
|
yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
|
||||||
series: eqCt2,
|
series: eqCt2,
|
||||||
});
|
}, true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -18,13 +18,15 @@
|
|||||||
:page="1"
|
:page="1"
|
||||||
:limit="999"
|
:limit="999"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData" />
|
:table-data="tableData"
|
||||||
|
:max-height="tableH" />
|
||||||
<div v-if="tableData.length == 0" class="no-data-bg"></div>
|
<div v-if="tableData.length == 0" class="no-data-bg"></div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="'\u3000产线平衡分析图\u3000'" name="graph">
|
<el-tab-pane :label="'\u3000产线平衡分析图\u3000'" name="graph">
|
||||||
<div class="graph" style="height: 800px">
|
<div class="graph" style="height: 800px">
|
||||||
<!-- graph -->
|
<!-- graph -->
|
||||||
<AnalysisChart
|
<AnalysisChart
|
||||||
|
ref="analysisChart"
|
||||||
v-if="activeName == 'graph'"
|
v-if="activeName == 'graph'"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
:daterange="dateArr"></AnalysisChart>
|
:daterange="dateArr"></AnalysisChart>
|
||||||
@@ -47,13 +49,14 @@ import BalanceChart from '../balanceChart';
|
|||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
import AnalysisChart from './chart.vue';
|
import AnalysisChart from './chart.vue';
|
||||||
import { parseTime } from '@/utils/ruoyi'
|
import { parseTime } from '@/utils/ruoyi'
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BalanceChart,
|
BalanceChart,
|
||||||
AnalysisChart,
|
AnalysisChart,
|
||||||
},
|
},
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'table',
|
activeName: 'table',
|
||||||
@@ -176,6 +179,11 @@ export default {
|
|||||||
// const p = this.tableProps
|
// const p = this.tableProps
|
||||||
// const d = this.tableData
|
// const d = this.tableData
|
||||||
// debugger;
|
// debugger;
|
||||||
|
if (this.activeName == 'graph') {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['analysisChart'].initChart()
|
||||||
|
})
|
||||||
|
}
|
||||||
this.ready = true;
|
this.ready = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:table-data="tableData">
|
:table-data="tableData"
|
||||||
|
:max-height="tableH">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@@ -41,6 +42,7 @@
|
|||||||
import AddOrUpdate from './add-or-updata';
|
import AddOrUpdate from './add-or-updata';
|
||||||
import basicPage from '../../mixins/basic-page';
|
import basicPage from '../../mixins/basic-page';
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
import {
|
import {
|
||||||
deleteFactory,
|
deleteFactory,
|
||||||
getFactoryPage
|
getFactoryPage
|
||||||
@@ -71,7 +73,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage, tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -123,7 +125,7 @@ export default {
|
|||||||
// name: 'reset',
|
// name: 'reset',
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: this.$auth.hasPermi('base:core-factory:create') ? 'separate' : '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('base:core-factory:create') ? 'button' : '',
|
type: this.$auth.hasPermi('base:core-factory:create') ? 'button' : '',
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export default {
|
|||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
listQuery: {
|
listQuery: {
|
||||||
pageSize: 10,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
total: 1,
|
total: 1,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -27,13 +27,16 @@
|
|||||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
import { getSchedulingMonitoringRecord1 } from '@/api/monitoring/teamProduction'
|
import { getSchedulingMonitoringRecord1 } from '@/api/monitoring/teamProduction'
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'productionLineData24',
|
name: 'productionLineData24',
|
||||||
|
mixins: [tableHeightMixin],
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
heightNum: 240,
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
getDataListURL: getPdlDataOneDay
|
getDataListURL: getPdlDataOneDay
|
||||||
},
|
},
|
||||||
@@ -56,9 +59,9 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
// window.addEventListener('resize', () => {
|
||||||
this.tableH = this.tableHeight(240)
|
// this.tableH = this.tableHeight(240)
|
||||||
})
|
// })
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -115,7 +118,7 @@ export default {
|
|||||||
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||||
convertList(list) {
|
convertList(list) {
|
||||||
// let sectionArr= []
|
// let sectionArr= []
|
||||||
let temp = Object.values(list.datamap)
|
let temp = list.datamap ? Object.values(list?.datamap) : []
|
||||||
console.log('111', temp)
|
console.log('111', temp)
|
||||||
|
|
||||||
temp.forEach(item => {
|
temp.forEach(item => {
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ import {
|
|||||||
import { getEnergyTypeListAll } from '@/api/base/energyType';
|
import { getEnergyTypeListAll } from '@/api/base/energyType';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -61,7 +62,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage,tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -70,7 +71,6 @@ export default {
|
|||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableProps,
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
|
||||||
drawerVisible: false,
|
drawerVisible: false,
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@@ -92,13 +92,15 @@ export default {
|
|||||||
param: 'searchTime',
|
param: 'searchTime',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('extend:cost-energy-search:query')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('cost:energyCost:export')
|
type: this.$auth.hasPermi('extend:cost-energy-search:export')
|
||||||
? 'button'
|
? 'button'
|
||||||
: '',
|
: '',
|
||||||
btnName: '导出',
|
btnName: '导出',
|
||||||
@@ -111,9 +113,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {},
|
components: {},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260)
|
|
||||||
})
|
|
||||||
getEnergyTypeListAll().then((response) => {
|
getEnergyTypeListAll().then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ import {
|
|||||||
import { getEnergyTypeListAll } from '@/api/base/energyType';
|
import { getEnergyTypeListAll } from '@/api/base/energyType';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -71,7 +72,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage,tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -80,7 +81,6 @@ export default {
|
|||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableProps,
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
|
||||||
drawerVisible: false,
|
drawerVisible: false,
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@@ -116,13 +116,15 @@ export default {
|
|||||||
defaultSelect: [],
|
defaultSelect: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('extend:cost-enery-auto-report:query')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('cost:energyCostHis:export')
|
type: this.$auth.hasPermi('extend:cost-enery-auto-report:export')
|
||||||
? 'button'
|
? 'button'
|
||||||
: '',
|
: '',
|
||||||
btnName: '导出',
|
btnName: '导出',
|
||||||
@@ -135,9 +137,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {},
|
components: {},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260)
|
|
||||||
})
|
|
||||||
const end = new Date();
|
const end = new Date();
|
||||||
const start = new Date();
|
const start = new Date();
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:max-height="tableH"
|
:max-height="tableH"
|
||||||
:table-data="tableData">
|
:table-data="tableData">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
@@ -53,6 +53,7 @@ import {
|
|||||||
} from '@/api/cost/costMaterialSet';
|
} from '@/api/cost/costMaterialSet';
|
||||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -91,7 +92,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage,tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -99,15 +100,14 @@ export default {
|
|||||||
deleteURL: deleteCostMaterialSet,
|
deleteURL: deleteCostMaterialSet,
|
||||||
},
|
},
|
||||||
tableProps,
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
|
||||||
tableBtn: [
|
tableBtn: [
|
||||||
this.$auth.hasPermi(`cost:rawMaterialConfig:update`)
|
this.$auth.hasPermi(`extend:cost-material-set:update`)
|
||||||
? {
|
? {
|
||||||
type: 'edit',
|
type: 'edit',
|
||||||
btnName: '编辑',
|
btnName: '编辑',
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
this.$auth.hasPermi(`cost:rawMaterialConfig:delete`)
|
this.$auth.hasPermi(`extend:cost-material-set:delete`)
|
||||||
? {
|
? {
|
||||||
type: 'delete',
|
type: 'delete',
|
||||||
btnName: '删除',
|
btnName: '删除',
|
||||||
@@ -124,16 +124,22 @@ export default {
|
|||||||
filterable: true,
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('extend:cost-material-set:query')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type:
|
||||||
|
this.$auth.hasPermi('extend:cost-material-set:create') &&
|
||||||
|
this.$auth.hasPermi('extend:cost-material-set:query')
|
||||||
|
? 'separate'
|
||||||
|
: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('cost:rawMaterialConfig:create')
|
type: this.$auth.hasPermi('extend:cost-material-set:create')
|
||||||
? 'button'
|
? 'button'
|
||||||
: '',
|
: '',
|
||||||
btnName: '新增',
|
btnName: '新增',
|
||||||
@@ -148,9 +154,6 @@ export default {
|
|||||||
AddOrUpdate,
|
AddOrUpdate,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260)
|
|
||||||
})
|
|
||||||
getHotMaterialList().then((response) => {
|
getHotMaterialList().then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ import {
|
|||||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -66,7 +67,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage,tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -75,7 +76,6 @@ export default {
|
|||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableProps,
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
|
||||||
drawerVisible: false,
|
drawerVisible: false,
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@@ -97,13 +97,15 @@ export default {
|
|||||||
param: 'searchTime',
|
param: 'searchTime',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('extend:cost-material-search:query')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('cost:rawMaterialCost:export')
|
type: this.$auth.hasPermi('extend:cost-material-search:export')
|
||||||
? 'button'
|
? 'button'
|
||||||
: '',
|
: '',
|
||||||
btnName: '导出',
|
btnName: '导出',
|
||||||
@@ -116,9 +118,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {},
|
components: {},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260)
|
|
||||||
})
|
|
||||||
getHotMaterialList().then((response) => {
|
getHotMaterialList().then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ import {
|
|||||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@@ -70,7 +71,7 @@ const tableProps = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [basicPage],
|
mixins: [basicPage,tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
@@ -79,7 +80,6 @@ export default {
|
|||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableProps,
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
|
||||||
drawerVisible: false,
|
drawerVisible: false,
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@@ -115,13 +115,15 @@ export default {
|
|||||||
defaultSelect: [],
|
defaultSelect: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: this.$auth.hasPermi('extend:cost-material-auto-report:query')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: this.$auth.hasPermi('cost:rawMaterialCostHis:export')
|
type: this.$auth.hasPermi('extend:cost-material-auto-report:export')
|
||||||
? 'button'
|
? 'button'
|
||||||
: '',
|
: '',
|
||||||
btnName: '导出',
|
btnName: '导出',
|
||||||
@@ -134,9 +136,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {},
|
components: {},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260)
|
|
||||||
})
|
|
||||||
const end = new Date();
|
const end = new Date();
|
||||||
const start = new Date();
|
const start = new Date();
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
|||||||
@@ -1,22 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<NotMsg v-show="notMsg"/>
|
<NotMsg v-show="notMsg" />
|
||||||
<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
|
<div
|
||||||
|
id="gasChart"
|
||||||
|
class="gas-chart"
|
||||||
|
style="width: 600px; height: 200px"
|
||||||
|
v-show="!notMsg"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize';
|
||||||
import NotMsg from './../components/NotMsg'
|
import NotMsg from './../components/NotMsg';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasChart',
|
name: 'GasChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components:{ NotMsg },
|
components: { NotMsg },
|
||||||
props: {
|
props: {
|
||||||
chartType: '', // 能源类型
|
chartType: '', // 能源类型
|
||||||
chartTime: ''
|
chartTime: '',
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const colors = [
|
const colors = [
|
||||||
@@ -31,159 +35,170 @@ export default {
|
|||||||
];
|
];
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
notMsg:false
|
notMsg: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
gasChartMsg() {
|
gasChartMsg() {
|
||||||
return this.$store.state.websocket.sumGasInfo
|
return this.$store.state.websocket.sumGasInfo;
|
||||||
},
|
},
|
||||||
energyWeekTrend() {
|
energyWeekTrend() {
|
||||||
return this.$store.state.websocket.energyWeekTrend
|
return this.$store.state.websocket.energyWeekTrend;
|
||||||
},
|
},
|
||||||
energyMonthTrend() {
|
energyMonthTrend() {
|
||||||
return this.$store.state.websocket.energyMonthTrend
|
return this.$store.state.websocket.energyMonthTrend;
|
||||||
},
|
},
|
||||||
energyYearTrend() {
|
energyYearTrend() {
|
||||||
return this.$store.state.websocket.energyYearTrend
|
return this.$store.state.websocket.energyYearTrend;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
energyWeekTrend: {// 监听周电能,更新图
|
energyWeekTrend: {
|
||||||
|
// 监听周电能,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
energyMonthTrend: {// 监听月电能,更新图
|
energyMonthTrend: {
|
||||||
|
// 监听月电能,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
energyYearTrend: {// 监听年电能,更新图
|
energyYearTrend: {
|
||||||
|
// 监听年电能,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
gasChartMsg: {// 监听天然气,更新图
|
gasChartMsg: {
|
||||||
|
// 监听天然气,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
|
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
chartTime: {// 监听时间变化,更新图
|
chartTime: {
|
||||||
|
// 监听时间变化,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
chartType: {// 监听能源类型变化,更新图
|
chartType: {
|
||||||
|
// 监听能源类型变化,更新图
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$el.addEventListener('resize', () => {
|
this.$el.addEventListener('resize', () => {
|
||||||
console.log('resziing.....');
|
console.log('resziing.....');
|
||||||
});
|
});
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
let gasName = ''
|
let gasName = '';
|
||||||
const colors = ['#FFCB59'];
|
const colors = ['#FFCB59'];
|
||||||
let temp = []
|
let temp = [];
|
||||||
let seriesData = []
|
let seriesData = [];
|
||||||
let xData = []
|
let xData = [];
|
||||||
let yData = []
|
let yData = [];
|
||||||
switch (this.chartType) {
|
switch (this.chartType) {
|
||||||
case '电耗能':{
|
case '电耗能': {
|
||||||
gasName = '电耗能'
|
gasName = '电耗能';
|
||||||
if (this.chartTime === '周') {
|
if (this.chartTime === '周') {
|
||||||
temp = this.energyWeekTrend || []
|
temp = this.energyWeekTrend || [];
|
||||||
}else if(this.chartTime === '月') {
|
} else if (this.chartTime === '月') {
|
||||||
temp = this.energyMonthTrend || []
|
temp = this.energyMonthTrend || [];
|
||||||
}else{
|
} else {
|
||||||
temp = this.energyYearTrend || []
|
temp = this.energyYearTrend || [];
|
||||||
}
|
}
|
||||||
temp && temp.map(i => {
|
temp &&
|
||||||
xData.push(i.time)
|
temp.map((i) => {
|
||||||
yData.push(i.qty)
|
xData.push(i.time);
|
||||||
})
|
yData.push(i.qty);
|
||||||
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case '天然气I':{
|
case '天然气I': {
|
||||||
if (this.chartTime === '周') {
|
if (this.chartTime === '周') {
|
||||||
yData = this.gasChartMsg.hisSumGas1For7Day || []
|
yData = this.gasChartMsg.hisSumGas1For7Day || [];
|
||||||
}else if(this.chartTime === '月') {
|
} else if (this.chartTime === '月') {
|
||||||
yData = this.gasChartMsg.sumGas1ForMonth || []
|
yData = this.gasChartMsg.sumGas1ForMonth || [];
|
||||||
}else{
|
} else {
|
||||||
yData = this.gasChartMsg.sumGas1ForYear || []
|
yData = this.gasChartMsg.sumGas1ForYear || [];
|
||||||
}
|
}
|
||||||
gasName = '天然气I'
|
gasName = '天然气I';
|
||||||
xData = this.getXdata()
|
xData = this.getXdata();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
gasName = '天然气II'
|
gasName = '天然气II';
|
||||||
if (this.chartTime === '周') {
|
if (this.chartTime === '周') {
|
||||||
yData = this.gasChartMsg.hisSumGas2For7Day || []
|
yData = this.gasChartMsg.hisSumGas2For7Day || [];
|
||||||
}else if(this.chartTime === '月') {
|
} else if (this.chartTime === '月') {
|
||||||
yData = this.gasChartMsg.sumGas2ForMonth || []
|
yData = this.gasChartMsg.sumGas2ForMonth || [];
|
||||||
}else{
|
} else {
|
||||||
yData = this.gasChartMsg.sumGas2ForYear || []
|
yData = this.gasChartMsg.sumGas2ForYear || [];
|
||||||
}
|
}
|
||||||
xData = this.getXdata()
|
xData = this.getXdata();
|
||||||
}
|
}
|
||||||
if (yData.length === 0) {
|
if (yData.length === 0) {
|
||||||
this.notMsg = true
|
this.notMsg = true;
|
||||||
return
|
return;
|
||||||
} else {
|
} else {
|
||||||
this.notMsg = false
|
this.notMsg = false;
|
||||||
}
|
}
|
||||||
if (yData.length == 0) {
|
if (yData.length == 0) {
|
||||||
seriesData = []
|
seriesData = [];
|
||||||
}else {
|
} else {
|
||||||
seriesData = [{
|
yData = yData.map((item) => {
|
||||||
name: gasName,
|
return (item = Number(item.toFixed(2)));
|
||||||
data: yData,
|
});
|
||||||
type: "line",
|
seriesData = [
|
||||||
areaStyle: {
|
{
|
||||||
|
name: gasName,
|
||||||
|
data: yData,
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: '#FFCB59' + "40" },
|
{ offset: 0, color: '#FFCB59' + '40' },
|
||||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
{ offset: 0.5, color: '#FFCB59' + '20' },
|
||||||
{ offset: 1, color: '#FFCB59' + "00" },
|
{ offset: 1, color: '#FFCB59' + '00' },
|
||||||
]),
|
]),
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
lineStyle: {
|
];
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolSize: 5,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
|
|
||||||
}
|
}
|
||||||
// 绘图
|
// 绘图
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(document.getElementById('gasChart'));
|
this.chart = echarts.init(document.getElementById('gasChart'));
|
||||||
var option = {
|
var option = {
|
||||||
color: colors,
|
color: colors,
|
||||||
@@ -204,7 +219,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
|
name: this.chartType === '电耗能' ? '单位kwh' : '单位Nm³',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
@@ -230,10 +245,10 @@ export default {
|
|||||||
series: seriesData,
|
series: seriesData,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
className: "gas-tooltip"
|
className: 'gas-tooltip',
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
option && this.chart.setOption(option)
|
option && this.chart.setOption(option);
|
||||||
},
|
},
|
||||||
getXdata() {
|
getXdata() {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
@@ -242,31 +257,39 @@ export default {
|
|||||||
let days = 30;
|
let days = 30;
|
||||||
if (this.chartTime === '周') {
|
if (this.chartTime === '周') {
|
||||||
return Array(7)
|
return Array(7)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => {
|
.map((_, index) => {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
|
||||||
return `${new Date(dtimestamp).getMonth()+1}.${new Date(dtimestamp).getDate()}`;}).reverse()
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
}else if (this.chartTime == "月") {
|
dtimestamp
|
||||||
|
).getDate()}`;
|
||||||
|
})
|
||||||
|
.reverse();
|
||||||
|
} else if (this.chartTime == '月') {
|
||||||
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
|
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
|
||||||
days = 31;
|
days = 31;
|
||||||
} else if (currentMonth == 2) {
|
} else if (currentMonth == 2) {
|
||||||
days = this.isLeapYear(currentYear) ? 29 : 28;
|
days = this.isLeapYear(currentYear) ? 29 : 28;
|
||||||
}
|
}
|
||||||
return Array(days)
|
return Array(days)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => {
|
.map((_, index) => {
|
||||||
return `${currentMonth}.${days - index}`;}).reverse()
|
return `${currentMonth}.${days - index}`;
|
||||||
|
})
|
||||||
|
.reverse();
|
||||||
} else {
|
} else {
|
||||||
return Array(12)
|
return Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => {
|
.map((_, index) => {
|
||||||
return `${12 - index}`;}).reverse()
|
return `${12 - index}`;
|
||||||
|
})
|
||||||
|
.reverse();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isLeapYear(year) {
|
isLeapYear(year) {
|
||||||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -278,12 +301,12 @@ export default {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.gas-tooltip {
|
.gas-tooltip {
|
||||||
background: #0a2b4f77 !important;
|
background: #0a2b4f77 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.gas-tooltip * {
|
.gas-tooltip * {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,68 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<NotMsg v-show="notMsg"/>
|
<NotMsg v-show="notMsg" />
|
||||||
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
<div
|
||||||
|
id="israChart"
|
||||||
|
class="isra-chart"
|
||||||
|
style="width: 600px; height: 390px"
|
||||||
|
v-show="!notMsg"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize';
|
||||||
import NotMsg from './../components/NotMsg'
|
import NotMsg from './../components/NotMsg';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ISRAChart',
|
name: 'ISRAChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components:{ NotMsg },
|
components: { NotMsg },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
notMsg:true,
|
notMsg: true,
|
||||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
colors: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||||
chartData: []
|
chartData: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
activated() {
|
activated() {},
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
israChartMsg() {
|
israChartMsg() {
|
||||||
return this.$store.state.websocket.israKiln
|
return this.$store.state.websocket.israKiln;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
israChartMsg: {
|
israChartMsg: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
this.chartData = newVal || []
|
this.chartData = newVal || [];
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getEqualNewlineString(params, length) {
|
||||||
|
let text = '';
|
||||||
|
let count = Math.ceil(params.length / length); // 向上取整数
|
||||||
|
// 一行展示length个
|
||||||
|
if (count > 1) {
|
||||||
|
for (let z = 1; z <= count; z++) {
|
||||||
|
text += params.substr((z - 1) * length, length);
|
||||||
|
if (z < count) {
|
||||||
|
text += '\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
text += params.substr(0, length);
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
updateChart() {
|
updateChart() {
|
||||||
console.log('update')
|
console.log('update');
|
||||||
let num = 0
|
let num = 0;
|
||||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
this.chartData &&
|
||||||
num+=i.num
|
this.chartData.length > 0 &&
|
||||||
})
|
this.chartData.map((i) => {
|
||||||
|
num += i.num;
|
||||||
|
});
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose()
|
this.chart.dispose();
|
||||||
}
|
}
|
||||||
if (this.chartData && this.chartData.length > 0) {
|
if (this.chartData && this.chartData.length > 0) {
|
||||||
this.notMsg = false
|
this.notMsg = false;
|
||||||
} else {
|
} else {
|
||||||
this.notMsg = true
|
this.notMsg = true;
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(document.getElementById('israChart'));
|
this.chart = echarts.init(document.getElementById('israChart'));
|
||||||
var option = {
|
var option = {
|
||||||
color:this.colors,
|
color: this.colors,
|
||||||
title:{
|
title: {
|
||||||
text: num,
|
text: num,
|
||||||
subtext: '总数',
|
subtext: '总数',
|
||||||
top: '32%',
|
top: '32%',
|
||||||
@@ -81,55 +102,92 @@ export default {
|
|||||||
bottom: '2%',
|
bottom: '2%',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
itemWidth: 18,
|
itemWidth: 18,
|
||||||
itemHeight:18,
|
itemHeight: 18,
|
||||||
icon: 'circle',
|
icon: 'circle',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff',
|
||||||
},
|
},
|
||||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
data:
|
||||||
name:item.name,
|
this.chartData &&
|
||||||
itemStyle:{
|
this.chartData.length > 0 &&
|
||||||
color: this.colors[index%4]
|
this.chartData.map((item, index) => ({
|
||||||
}
|
name: item.name,
|
||||||
}))
|
itemStyle: {
|
||||||
|
color: this.colors[index % 4],
|
||||||
|
},
|
||||||
|
})),
|
||||||
},
|
},
|
||||||
series:[{
|
series: [
|
||||||
|
{
|
||||||
name: 'ISRA缺陷检测',
|
name: 'ISRA缺陷检测',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['50%', '40%'],
|
center: ['50%', '40%'],
|
||||||
radius: ['45%', '70%'],
|
radius: ['45%', '70%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
label: {
|
label: {
|
||||||
show: false
|
show: true,
|
||||||
|
normal: {
|
||||||
|
alignTo: 'labelLine',
|
||||||
|
margin: 10,
|
||||||
|
edgeDistance: 10,
|
||||||
|
lineHeight: 16,
|
||||||
|
formatter: (params) => {
|
||||||
|
//调用自定义显示格式
|
||||||
|
return this.getEqualNewlineString(
|
||||||
|
params.value + ' | ' + params.percent.toFixed(0) + '%'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
// 提示文字的样式
|
||||||
|
// color: '#595959',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
length: 25,
|
||||||
|
length2: 10,
|
||||||
},
|
},
|
||||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
data:
|
||||||
name:item.name,
|
this.chartData &&
|
||||||
value: item.num,
|
this.chartData.length > 0 &&
|
||||||
itemStyle:{
|
this.chartData.map((item, index) => ({
|
||||||
color:{
|
name: item.name,
|
||||||
type: 'linear',
|
value: item.num,
|
||||||
x: 1,
|
label: {
|
||||||
y: 1,
|
color: this.colors[index % 4],
|
||||||
x2: 0,
|
},
|
||||||
y2: 0,
|
itemStyle: {
|
||||||
global: false,
|
color: {
|
||||||
colorStops:[
|
type: 'linear',
|
||||||
{offset: 0,color: this.colors[index%4]},
|
x: 1,
|
||||||
{offset: 1,color: this.colors[index%4]+'33'}
|
y: 1,
|
||||||
]
|
x2: 0,
|
||||||
}
|
y2: 0,
|
||||||
}
|
global: false,
|
||||||
}))}],
|
colorStops: [
|
||||||
tooltip: {
|
{ offset: 0, color: this.colors[index % 4] },
|
||||||
trigger: 'item',
|
{ offset: 1, color: this.colors[index % 4] + '33' },
|
||||||
className: "isra-chart-tooltip"
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})),
|
||||||
},
|
},
|
||||||
}
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
className: 'isra-chart-tooltip',
|
||||||
|
},
|
||||||
|
};
|
||||||
this.chart.setOption(option);
|
this.chart.setOption(option);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -141,12 +199,12 @@ export default {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.isra-chart-tooltip {
|
.isra-chart-tooltip {
|
||||||
background: #0a2b4f77 !important;
|
background: #0a2b4f77 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.isra-chart-tooltip * {
|
.isra-chart-tooltip * {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,234 +1,258 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height: 370px;">
|
<div style="height: 370px">
|
||||||
<NotMsg v-show="notMsg"/>
|
<NotMsg v-show="notMsg" />
|
||||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
|
<div
|
||||||
</div>
|
id="numRateChart"
|
||||||
|
class="num-rate-chart"
|
||||||
|
style="width: 900px; height: 420px"
|
||||||
|
v-show="!notMsg"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize';
|
||||||
import NotMsg from './../components/NotMsg'
|
import NotMsg from './../components/NotMsg';
|
||||||
export default {
|
export default {
|
||||||
name: 'NumRateChart',
|
name: 'NumRateChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components:{ NotMsg },
|
components: { NotMsg },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
notMsg:true
|
notMsg: true,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
productline() {
|
productline() {
|
||||||
return this.$store.state.websocket.productline
|
return this.$store.state.websocket.productline;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
productline: {
|
productline: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (newVal === oldVal) {
|
if (newVal === oldVal) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
this.$emit('emitFun')
|
this.$emit('emitFun');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$el.addEventListener('resize', () => {
|
this.$el.addEventListener('resize', () => {
|
||||||
console.log('resziing.....');
|
console.log('resziing.....');
|
||||||
});
|
});
|
||||||
this.updateChart()
|
this.updateChart();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
if (this.productline && this.productline.length > 0) {
|
if (this.productline && this.productline.length > 0) {
|
||||||
this.notMsg = false
|
this.notMsg = false;
|
||||||
} else {
|
} else {
|
||||||
this.notMsg = true
|
this.notMsg = true;
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
let xData = []
|
let xData = [];
|
||||||
let outputNum = []
|
let outputNum = [];
|
||||||
let passRate = []
|
let passRate = [];
|
||||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
for (let i = 0; i < this.productline.length - 1; i++) {
|
||||||
if ((item.lineName).includes('D')) {
|
// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
|
||||||
xData.push(item.lineName)
|
for (let j = 0; j < this.productline.length - i - 1; j++) {
|
||||||
outputNum.push(item.outputNum)
|
// 当前一个值大于后一个值
|
||||||
passRate.push(item.passRate?item.passRate*100:null)
|
if (
|
||||||
}
|
this.productline[j].lineName.substr(
|
||||||
})
|
this.productline[j].lineName.length - 1,
|
||||||
if (
|
1
|
||||||
this.chart !== null &&
|
) >
|
||||||
this.chart !== '' &&
|
this.productline[j + 1].lineName.substr(
|
||||||
this.chart !== undefined
|
this.productline[j + 1].lineName.length - 1,
|
||||||
) {
|
1
|
||||||
this.chart.dispose()
|
)
|
||||||
}
|
) {
|
||||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
|
||||||
var option = {
|
let temp = this.productline[j];
|
||||||
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
this.productline[j] = this.productline[j + 1];
|
||||||
tooltip: {
|
this.productline[j + 1] = temp;
|
||||||
trigger: "axis",
|
}
|
||||||
axisPointer: {
|
}
|
||||||
type: "shadow",
|
}
|
||||||
},
|
this.productline &&
|
||||||
className: "num-rate-chart-tooltip"
|
this.productline.length > 0 &&
|
||||||
},
|
this.productline.map((item) => {
|
||||||
legend: {
|
if (item.lineName.includes('D')) {
|
||||||
itemWidth:10,
|
xData.push(item.lineName);
|
||||||
itemHeight:10,
|
outputNum.push(item.outputNum);
|
||||||
top: '2.5%',
|
passRate.push(item.passRate);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (
|
||||||
|
this.chart !== null &&
|
||||||
|
this.chart !== '' &&
|
||||||
|
this.chart !== undefined
|
||||||
|
) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||||
|
var option = {
|
||||||
|
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
className: 'num-rate-chart-tooltip',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
top: '2.5%',
|
||||||
right: '20px',
|
right: '20px',
|
||||||
icon: 'rect',
|
icon: 'rect',
|
||||||
data: [
|
data: [
|
||||||
{name:'产线产量',itemStyle:{color:'#364BFE'}},
|
{ name: '产线产量', itemStyle: { color: '#364BFE' } },
|
||||||
{name:'良品率',itemStyle:{color:'#FFCB59'}}
|
{ name: '良品率', itemStyle: { color: '#FFCB59' } },
|
||||||
],
|
],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#DFF1FE",
|
color: '#DFF1FE',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData,
|
data: xData,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
},
|
},
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 1,
|
width: 1,
|
||||||
color: "#213259",
|
color: '#213259',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量/片',
|
name: '产量/片',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
align: 'right',
|
align: 'right',
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
formatter: '{value}'
|
},
|
||||||
},
|
axisLine: {
|
||||||
axisLine: {
|
show: true,
|
||||||
show: true,
|
lineStyle: {
|
||||||
lineStyle: {
|
color: '#213259',
|
||||||
color: "#213259",
|
},
|
||||||
},
|
},
|
||||||
},
|
splitLine: {
|
||||||
splitLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
color: '#213259a0',
|
||||||
color: "#213259a0",
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
type: 'value',
|
||||||
type: 'value',
|
name: '良品率',
|
||||||
name: '良品率',
|
nameTextStyle: {
|
||||||
nameTextStyle: {
|
color: '#fff',
|
||||||
color: '#fff',
|
fontSize: 10,
|
||||||
fontSize: 10,
|
align: 'LEFT',
|
||||||
align: 'LEFT',
|
},
|
||||||
},
|
axisLabel: {
|
||||||
axisLabel: {
|
color: '#fff',
|
||||||
color: "#fff",
|
fontSize: 12,
|
||||||
fontSize: 12,
|
formatter: '{value}%',
|
||||||
formatter: () =>{
|
},
|
||||||
return value ? '{value} %': '-'
|
axisLine: {
|
||||||
}
|
show: true,
|
||||||
},
|
lineStyle: {
|
||||||
axisLine: {
|
color: '#213259',
|
||||||
show: true,
|
},
|
||||||
lineStyle: {
|
},
|
||||||
color: "#213259",
|
splitLine: {
|
||||||
},
|
lineStyle: {
|
||||||
},
|
color: '#213259a0',
|
||||||
splitLine: {
|
},
|
||||||
lineStyle: {
|
},
|
||||||
color: "#213259a0",
|
},
|
||||||
},
|
],
|
||||||
}
|
series: [
|
||||||
}
|
{
|
||||||
],
|
name: '产线产量',
|
||||||
series: [
|
type: 'bar',
|
||||||
{
|
tooltip: {
|
||||||
name: '产线产量',
|
valueFormatter: function (value) {
|
||||||
type: 'bar',
|
return value;
|
||||||
tooltip: {
|
},
|
||||||
valueFormatter: function (value) {
|
},
|
||||||
return value;
|
barWidth: 20,
|
||||||
}
|
itemStyle: {
|
||||||
},
|
|
||||||
barWidth: 20,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#5CB7FF' },
|
|
||||||
{ offset: 1, color: '#364BFE' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: outputNum
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '良品率',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
tooltip: {
|
|
||||||
valueFormatter: function (value) {
|
|
||||||
return value?value + '%':'-';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#FFD160'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: '#FFCB59' + "40" },
|
{ offset: 0, color: '#5CB7FF' },
|
||||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
{ offset: 1, color: '#364BFE' },
|
||||||
{ offset: 1, color: '#FFCB59' + "00" },
|
]),
|
||||||
]),
|
},
|
||||||
},
|
data: outputNum,
|
||||||
lineStyle: {
|
},
|
||||||
width: 1
|
{
|
||||||
},
|
name: '良品率',
|
||||||
symbol: 'circle',
|
type: 'line',
|
||||||
symbolSize: 5,
|
yAxisIndex: 1,
|
||||||
data: passRate
|
tooltip: {
|
||||||
}
|
valueFormatter: function (value) {
|
||||||
]
|
return value ? value + '%' : '-';
|
||||||
};
|
},
|
||||||
option && this.chart.setOption(option)
|
},
|
||||||
}
|
itemStyle: {
|
||||||
}
|
color: '#FFD160',
|
||||||
}
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#FFCB59' + '40' },
|
||||||
|
{ offset: 0.5, color: '#FFCB59' + '20' },
|
||||||
|
{ offset: 1, color: '#FFCB59' + '00' },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
data: passRate,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && this.chart.setOption(option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.num-rate-chart {
|
.num-rate-chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: -50px;
|
top: -50px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.num-rate-chart-tooltip {
|
.num-rate-chart-tooltip {
|
||||||
background: #0a2b4f77 !important;
|
background: #0a2b4f77 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.num-rate-chart-tooltip * {
|
.num-rate-chart-tooltip * {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,66 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1">
|
||||||
<Container name="各工序缺陷汇总" size="middle" style="">
|
<Container
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
name="各工序缺陷汇总"
|
||||||
<div style="padding: 5px 10px;">
|
size="middle"
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
style="">
|
||||||
</div>
|
<TimePrompt
|
||||||
</Container>
|
class="timeShow"
|
||||||
</div>
|
:timestr="timestr" />
|
||||||
|
<div style="padding: 5px 10px">
|
||||||
|
<dv-scroll-board
|
||||||
|
:config="config"
|
||||||
|
style="width: 575px; height: 380px"
|
||||||
|
ref="defectScrollBoard" />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'DefectSum',
|
name: 'DefectSum',
|
||||||
components: { Container, TimePrompt },
|
components: { Container, TimePrompt },
|
||||||
computed: {
|
computed: {
|
||||||
defectSum() {
|
defectSum() {
|
||||||
return this.$store.state.websocket.defectSum
|
return this.$store.state.websocket.defectSum;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timestr: '',
|
timestr: '',
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
header: ['序号', '产线', '工序', '损耗片数', '缺陷类型'],
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60],
|
columnWidth: [60],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
data: [],
|
data: [
|
||||||
// data: [[1, 'Y61', '破损','10','气泡']],
|
//假数据
|
||||||
rowNum: 10
|
[1, 'D61', '成型', '3片', '细长泡'],
|
||||||
}
|
[2, 'D62', '组合落板', '4片', '细长泡'],
|
||||||
}
|
[3, 'D61', '磨边', '6片', '开口泡'],
|
||||||
},
|
[4, 'D63', '清洗', '5片', '结石'],
|
||||||
mounted() {
|
[5, 'D64', '打孔', '2片', '结石'],
|
||||||
this.timestr = switchShowTime('日')
|
[6, 'D63', '成型', '7片', '开口泡'],
|
||||||
},
|
[7, 'D61', '上片', '8片', '结石'],
|
||||||
watch:{
|
],
|
||||||
defectSum: {
|
// data: [],
|
||||||
|
rowNum: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timestr = switchShowTime('日');
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
defectSum: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
let outArr = this.defectSum.map((item, index) => [
|
let outArr = this.defectSum.map((item, index) => [
|
||||||
index+1,
|
index + 1,
|
||||||
item.productionLineName,
|
item.productionLineName,
|
||||||
item.sectionName,
|
item.sectionName,
|
||||||
item.count,
|
item.count,
|
||||||
item.inspectionTypeName
|
item.inspectionTypeName,
|
||||||
]);
|
]);
|
||||||
this.config.data = outArr
|
this.config.data = outArr;
|
||||||
this.$refs['defectScrollBoard'].updateRows(outArr)
|
this.$refs['defectScrollBoard'].updateRows(outArr);
|
||||||
this.timestr = switchShowTime('日')
|
this.timestr = switchShowTime('日');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
.timeShow {
|
.timeShow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 240px;
|
left: 240px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,77 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1">
|
||||||
<Container name="设备报警" size="middle" style="">
|
<Container
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
name="设备报警"
|
||||||
<div style="padding: 5px 10px;">
|
size="middle"
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
style="">
|
||||||
</div>
|
<TimePrompt
|
||||||
</Container>
|
class="timeShow"
|
||||||
</div>
|
:timestr="timestr" />
|
||||||
|
<div style="padding: 5px 10px">
|
||||||
|
<dv-scroll-board
|
||||||
|
:config="config"
|
||||||
|
style="width: 575px; height: 380px"
|
||||||
|
ref="eqScrollBoard" />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'EqAlarm',
|
name: 'EqAlarm',
|
||||||
components: { Container, TimePrompt },
|
components: { Container, TimePrompt },
|
||||||
computed: {
|
computed: {
|
||||||
sjgEquipment() {
|
sjgEquipment() {
|
||||||
return this.$store.state.websocket.sjgEquipment
|
return this.$store.state.websocket.sjgEquipment;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timestr: '',
|
timestr: '',
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60, 150, 190],
|
columnWidth: [60, 150, 190],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
data: [],
|
data: [],
|
||||||
// data: [
|
// data: [
|
||||||
// [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
|
// [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
|
||||||
// [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
|
// [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
|
||||||
// [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
|
// [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
|
||||||
// [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
|
// [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
|
||||||
// [5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
|
// [5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||||
// [6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
|
// [6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||||
// [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
|
// [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
|
||||||
// [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
|
// [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
|
||||||
// [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
|
// [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
|
||||||
// [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
|
// [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
|
||||||
// ],
|
// ],
|
||||||
rowNum: 10
|
rowNum: 10,
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.timestr = switchShowTime('日')
|
this.timestr = switchShowTime('日');
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
sjgEquipment: {
|
sjgEquipment: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
let outArr = this.sjgEquipment.map((item, index) => [
|
let outArr = this.sjgEquipment.map((item, index) => [
|
||||||
index+1,
|
index + 1,
|
||||||
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
||||||
`<span title=${item.code || ''}>${item.code || ''}</span>`,
|
`<span title=${item.code || ''}>${item.code || ''}</span>`,
|
||||||
item.status,
|
`<span><div style="${
|
||||||
item.error? '是': '否'
|
item.status == '正常'
|
||||||
]);
|
? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
|
||||||
this.config.data = outArr
|
: 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:13px 10px 0 0 '
|
||||||
this.$refs['eqScrollBoard'].updateRows(outArr)
|
}"></div> ${item.status || ''}</span>`,
|
||||||
this.timestr = switchShowTime('日')
|
`<span"><div style="${
|
||||||
}
|
item.error == false
|
||||||
}
|
? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
|
||||||
}
|
: 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:13px 10px 0 0 '
|
||||||
}
|
}"></div> ${item.error == true ? '是' : '否' || ''}</span>`,
|
||||||
|
]);
|
||||||
|
this.config.data = outArr;
|
||||||
|
this.$refs['eqScrollBoard'].updateRows(outArr);
|
||||||
|
this.timestr = switchShowTime('日');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.timeShow {
|
.timeShow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 170px;
|
left: 170px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,67 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container name="工单监控" size="middle" style="">
|
<Container
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
name="工单监控"
|
||||||
<div style="padding: 5px 10px;" class="WOMonitoring">
|
size="middle"
|
||||||
<dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
|
style="">
|
||||||
</div>
|
<TimePrompt
|
||||||
</Container>
|
class="timeShow"
|
||||||
|
:timestr="timestr" />
|
||||||
|
<div
|
||||||
|
style="padding: 5px 10px"
|
||||||
|
class="WOMonitoring">
|
||||||
|
<dv-scroll-board
|
||||||
|
:config="config"
|
||||||
|
style="width: 900px; height: 380px"
|
||||||
|
ref="worderScrollBoard" />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
import { formatDate } from '@/utils'
|
import { formatDate } from '@/utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'WorkOrderMonitoring',
|
name: 'WorkOrderMonitoring',
|
||||||
components: { Container, TimePrompt },
|
components: { Container, TimePrompt },
|
||||||
computed: {
|
computed: {
|
||||||
order() {
|
order() {
|
||||||
return this.$store.state.websocket.workOrder
|
return this.$store.state.websocket.workOrder;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timestr: '',
|
timestr: '',
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
|
header: [
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
'序号',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
'工单名称',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
'规格',
|
||||||
columnWidth: [60, 120, 120, 60, 100, 150],
|
'产线',
|
||||||
align: ['center'],
|
'工单状态',
|
||||||
data: [],
|
'计划完成时间',
|
||||||
rowNum:10
|
'计划产量',
|
||||||
}
|
'实际产量',
|
||||||
}
|
'完成进度',
|
||||||
},
|
],
|
||||||
mounted(){
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
this.timestr = switchShowTime('日')
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
},
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
watch:{
|
columnWidth: [60, 120, 120, 60, 100, 150],
|
||||||
order: {
|
align: ['center'],
|
||||||
|
data: [],
|
||||||
|
rowNum: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timestr = switchShowTime('日');
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
order: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
let outArr = this.order.map((item, index) => [
|
let outArr = this.order.map((item, index) => [
|
||||||
index+1,
|
index + 1,
|
||||||
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
||||||
item.specifications,
|
item.specifications,
|
||||||
item.lines,
|
item.lines,
|
||||||
this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
|
this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
|
||||||
formatDate(item.planFinishTime),
|
formatDate(item.planFinishTime),
|
||||||
item.planQuantity,
|
item.planQuantity,
|
||||||
item.planAssignQuantity
|
item.actualQuantity,
|
||||||
]);
|
(item.progressRate * 100).toFixed(0) + '%',
|
||||||
this.config.data = outArr
|
]);
|
||||||
this.$refs['worderScrollBoard'].updateRows(outArr)
|
this.config.data = outArr;
|
||||||
this.timestr = switchShowTime('日')
|
this.$refs['worderScrollBoard'].updateRows(outArr);
|
||||||
}
|
this.timestr = switchShowTime('日');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.timeShow {
|
.timeShow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 170px;
|
left: 170px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
|
<div
|
||||||
|
id="deepProcessingContainerB"
|
||||||
|
ref="deepProcessingContainerB"
|
||||||
|
style="width: 100%; height: 100%">
|
||||||
<div
|
<div
|
||||||
id='deepProcessingContainer'
|
id="deepProcessingContainer"
|
||||||
ref='deepProcessingContainer'
|
ref="deepProcessingContainer"
|
||||||
class="deepProcessingBoard"
|
class="deepProcessingBoard"
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -16,15 +19,14 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
"
|
"
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
|
<KHeader
|
||||||
|
:isFullScreen="isFullScreen"
|
||||||
|
@screenfullChange="screenfullChange"
|
||||||
|
topTitle="深加工生产运行驾驶舱" />
|
||||||
<div
|
<div
|
||||||
class="main-body"
|
class="main-body"
|
||||||
style="
|
style="display: grid; gap: 16px; grid-template-rows: 462px 462px">
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 462px 462px;
|
|
||||||
">
|
|
||||||
<TopThree />
|
<TopThree />
|
||||||
<BottomTwo />
|
<BottomTwo />
|
||||||
</div>
|
</div>
|
||||||
@@ -47,16 +49,16 @@
|
|||||||
import KHeader from '../components/Header';
|
import KHeader from '../components/Header';
|
||||||
import TopThree from './TopThree';
|
import TopThree from './TopThree';
|
||||||
import BottomTwo from './BottomTwo';
|
import BottomTwo from './BottomTwo';
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull';
|
||||||
import { debounce } from '@/utils/debounce'
|
import { debounce } from '@/utils/debounce';
|
||||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
import { getDcsMsg, getMesMsg } from './../utils/wsInterface';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'deepProcessingBoard',
|
name: 'deepProcessingBoard',
|
||||||
components: {
|
components: {
|
||||||
KHeader,
|
KHeader,
|
||||||
TopThree,
|
TopThree,
|
||||||
BottomTwo
|
BottomTwo,
|
||||||
},
|
},
|
||||||
// provide() {
|
// provide() {
|
||||||
// return {
|
// return {
|
||||||
@@ -66,83 +68,90 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
scaleNum: 0.8
|
scaleNum: 0.8,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init()
|
this.init();
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
this.destroy()
|
this.destroy();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.boxReset = debounce(() => {
|
this.boxReset = debounce(() => {
|
||||||
this.resetSize()
|
this.resetSize();
|
||||||
}, 300)
|
}, 300);
|
||||||
this.boxReset()
|
this.boxReset();
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.boxReset()
|
this.boxReset();
|
||||||
})
|
});
|
||||||
// closeWebsocket()
|
// closeWebsocket()
|
||||||
// getDcsMsg()
|
// getDcsMsg()
|
||||||
// getMesMsg()
|
// getMesMsg()
|
||||||
console.log('mounted...........')
|
},
|
||||||
|
mounted() {
|
||||||
|
this.boxReset();
|
||||||
|
window.addEventListener('resize', this.boxReset);
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
console.log('destroyed...........')
|
window.removeEventListener('resize', this.boxReset);
|
||||||
|
this.destroy();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
boxReset() {
|
||||||
|
debounce(() => {
|
||||||
|
this.resetSize();
|
||||||
|
}, 300)();
|
||||||
|
},
|
||||||
change() {
|
change() {
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
this.isFullScreen = screenfull.isFullscreen;
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.on('change', this.change)
|
screenfull.on('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.off('change', this.change)
|
screenfull.off('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 全屏
|
// 全屏
|
||||||
screenfullChange() {
|
screenfullChange() {
|
||||||
if (!screenfull.isEnabled) {
|
if (!screenfull.isEnabled) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: 'you browser can not work',
|
message: 'you browser can not work',
|
||||||
type: 'warning'
|
type: 'warning',
|
||||||
})
|
});
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
screenfull.toggle(this.$refs.deepProcessingContainerB)
|
screenfull.toggle(this.$refs.deepProcessingContainerB);
|
||||||
},
|
},
|
||||||
resetSize() {
|
resetSize() {
|
||||||
let deepProcessingContainer = document.getElementById('deepProcessingContainer')
|
let deepProcessingContainer = document.getElementById(
|
||||||
let rw = parseFloat(window.innerWidth)
|
'deepProcessingContainer'
|
||||||
let rh = parseFloat(window.innerHeight)
|
);
|
||||||
let bw = parseFloat(deepProcessingContainer.style.width)
|
let rw = parseFloat(window.innerWidth);
|
||||||
let bh = parseFloat(deepProcessingContainer.style.height)
|
let rh = parseFloat(window.innerHeight);
|
||||||
let wx = 0
|
let bw = parseFloat(deepProcessingContainer.style.width);
|
||||||
let hx = 0
|
let bh = parseFloat(deepProcessingContainer.style.height);
|
||||||
|
let wx = 0;
|
||||||
|
let hx = 0;
|
||||||
if (screenfull.isFullscreen) {
|
if (screenfull.isFullscreen) {
|
||||||
console.log('全屏')
|
wx = rw / bw;
|
||||||
wx = rw / bw
|
hx = rh / bh;
|
||||||
hx = rh / bh
|
} else {
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
if (this.$store.state.app.sidebar.opened) {
|
||||||
wx = (rw-280) / bw
|
wx = (rw - 280) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}else{
|
} else {
|
||||||
wx = (rw-85) / bw
|
wx = (rw - 85) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.scaleNum = wx
|
this.scaleNum = wx;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +1,24 @@
|
|||||||
<!--
|
|
||||||
filename: MaterialCost.vue
|
|
||||||
author: liubin
|
|
||||||
date: 2023-12-06 09:09:27
|
|
||||||
description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="能耗" size="middle" style="">
|
<Container
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
name="能耗"
|
||||||
|
size="middle"
|
||||||
|
style="">
|
||||||
<EnergeTop />
|
<EnergeTop />
|
||||||
<SplitLine :horizontal="true" />
|
<SplitLine :horizontal="true" />
|
||||||
<div class="" style="flex: 2; padding: 8px">
|
<div
|
||||||
|
class=""
|
||||||
|
style="flex: 2; padding: 8px">
|
||||||
<div
|
<div
|
||||||
class="header-line"
|
class="header-line"
|
||||||
style="margin: 8px 0 16px; display: flex; align-items: center">
|
style="margin: 8px 0 16px; display: flex; align-items: center">
|
||||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
<h2
|
||||||
|
class=""
|
||||||
|
style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||||
能耗趋势图
|
能耗趋势图
|
||||||
</h2>
|
</h2>
|
||||||
|
<TimePrompt
|
||||||
|
class="timeShow"
|
||||||
|
:timestr="timestr" />
|
||||||
<!-- <Switcher /> -->
|
<!-- <Switcher /> -->
|
||||||
<div>
|
<div>
|
||||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||||
@@ -32,11 +34,21 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
|
:options="['电耗能', '天然气I', '天然气II']"
|
||||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
|
@emitFun="toggleType"
|
||||||
|
:active="chartType" />
|
||||||
|
<SelectorBtnGroup
|
||||||
|
:options="['周', '月', '年']"
|
||||||
|
@emitFun="toggleDate"
|
||||||
|
:active="chartTime" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
<div
|
||||||
<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
|
class="chart"
|
||||||
|
style="height: 200px; margin-top: 8px">
|
||||||
|
<GasChart
|
||||||
|
:chartType="chartType"
|
||||||
|
:chartTime="chartTime"
|
||||||
|
@emitFun="dateUpdate" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
@@ -51,7 +63,7 @@ import EnergeTop from './EnergeTop';
|
|||||||
import GasChart from '../components/GasChart.vue';
|
import GasChart from '../components/GasChart.vue';
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'EnergeCost',
|
name: 'EnergeCost',
|
||||||
components: {
|
components: {
|
||||||
@@ -61,48 +73,43 @@ export default {
|
|||||||
EnergeTop,
|
EnergeTop,
|
||||||
GasChart,
|
GasChart,
|
||||||
SelectorBtnGroup,
|
SelectorBtnGroup,
|
||||||
TimePrompt
|
TimePrompt,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartType:'电耗能',
|
chartType: '电耗能',
|
||||||
chartTime:'周',
|
chartTime: '周',
|
||||||
timestr: ''
|
timestr: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.timestr = switchShowTime(this.chartTime)
|
this.timestr = switchShowTime(this.chartTime);
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
gasInfoMsg() {
|
gasInfoMsg() {
|
||||||
return this.$store.state.websocket.gasInfo
|
return this.$store.state.websocket.gasInfo;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 切换能源
|
// 切换能源
|
||||||
toggleType(val) {
|
toggleType(val) {
|
||||||
this.chartType = val
|
this.chartType = val;
|
||||||
},
|
},
|
||||||
// 切换时间
|
// 切换时间
|
||||||
toggleDate(val) {
|
toggleDate(val) {
|
||||||
this.chartTime = val
|
this.chartTime = val;
|
||||||
this.timestr = switchShowTime(val)
|
this.timestr = switchShowTime(val);
|
||||||
},
|
},
|
||||||
// 数据更新
|
// 数据更新
|
||||||
dateUpdate() {
|
dateUpdate() {
|
||||||
this.timestr = switchShowTime(this.chartTime)
|
this.timestr = switchShowTime(this.chartTime);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.timeShow {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 120px;
|
|
||||||
}
|
|
||||||
.lgd {
|
.lgd {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="gas-handle" style="flex: 2">
|
<div
|
||||||
<Container name="烟气处理" size="large" style="">
|
class="gas-handle"
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
style="flex: 2">
|
||||||
|
<Container
|
||||||
|
name="烟气处理"
|
||||||
|
size="large"
|
||||||
|
style="">
|
||||||
<div
|
<div
|
||||||
class=""
|
class=""
|
||||||
style="
|
style="
|
||||||
@@ -24,7 +28,13 @@
|
|||||||
">
|
">
|
||||||
氧气含量
|
氧气含量
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(exhaustGasInfo.O2_float)).toFixed(2) : ''}}%</span>
|
<span style="font-size: 20px; line-height: 1.24; flex: 1">
|
||||||
|
{{
|
||||||
|
exhaustGasInfo?.O2_float
|
||||||
|
? Number(exhaustGasInfo.O2_float).toFixed(2)
|
||||||
|
: ''
|
||||||
|
}}%
|
||||||
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
<div
|
<div
|
||||||
@@ -33,13 +43,19 @@
|
|||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding:5px 8px 5px 0;
|
padding: 5px 8px 5px 0;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">氮氧化物</p>
|
<p style="margin: 0; line-height: inherit">氮氧化物</p>
|
||||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
|
||||||
|
{{
|
||||||
|
exhaustGasInfo?.NOX_float
|
||||||
|
? Number(exhaustGasInfo.NOX_float).toFixed(2)
|
||||||
|
: ''
|
||||||
|
}}mg/m³
|
||||||
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@@ -49,13 +65,19 @@
|
|||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding:5px 8px 5px 0;
|
padding: 5px 8px 5px 0;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
||||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (Number(exhaustGasInfo.SO2_float)).toFixed(2) : ''}}mg/m³</span>
|
<span style="font-size: 20px; line-height: 1.24; flex: 1">
|
||||||
|
{{
|
||||||
|
exhaustGasInfo?.SO2_float
|
||||||
|
? Number(exhaustGasInfo.SO2_float).toFixed(2)
|
||||||
|
: ''
|
||||||
|
}}mg/m³
|
||||||
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@@ -70,17 +92,30 @@
|
|||||||
">
|
">
|
||||||
颗粒物浓度
|
颗粒物浓度
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
|
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
|
||||||
|
{{
|
||||||
|
exhaustGasInfo?.dust_float
|
||||||
|
? Number(exhaustGasInfo.dust_float).toFixed(2)
|
||||||
|
: ''
|
||||||
|
}}mg/m³
|
||||||
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
<KilnLine :horizontal="true" />
|
<KilnLine :horizontal="true" />
|
||||||
<div class="" style="flex: 2; padding: 8px">
|
<div
|
||||||
|
class=""
|
||||||
|
style="flex: 2; padding: 8px">
|
||||||
<div
|
<div
|
||||||
class="header-line"
|
class="header-line"
|
||||||
style="margin-bottom: 10px; display: flex; align-items: center">
|
style="margin-bottom: 10px; display: flex; align-items: center">
|
||||||
<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
|
<h2
|
||||||
|
class=""
|
||||||
|
style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
|
||||||
烟气趋势图
|
烟气趋势图
|
||||||
</h2>
|
</h2>
|
||||||
|
<TimePrompt
|
||||||
|
class="timeShow"
|
||||||
|
:timestr="timestr" />
|
||||||
<!-- <Switcher /> -->
|
<!-- <Switcher /> -->
|
||||||
<div>
|
<div>
|
||||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||||
@@ -96,11 +131,21 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']"
|
||||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
@emitFun="toggleType"
|
||||||
|
:active="chartType" />
|
||||||
|
<SelectorBtnGroup
|
||||||
|
:options="['日', '周', '月', '年']"
|
||||||
|
@emitFun="toggleDate"
|
||||||
|
:active="chartTime" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
<div
|
||||||
<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
|
class="chart"
|
||||||
|
style="height: 250px; margin-top: 10px">
|
||||||
|
<FlueGasChart
|
||||||
|
:chartType="chartType"
|
||||||
|
:chartTime="chartTime"
|
||||||
|
@emitFun="dateUpdate" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
@@ -115,7 +160,7 @@ import KilnLine from '../components/line';
|
|||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||||
import FlueGasChart from '../components/FlueGasChart';
|
import FlueGasChart from '../components/FlueGasChart';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasHandle',
|
name: 'GasHandle',
|
||||||
@@ -125,49 +170,44 @@ export default {
|
|||||||
KilnLine,
|
KilnLine,
|
||||||
SelectorBtnGroup,
|
SelectorBtnGroup,
|
||||||
FlueGasChart,
|
FlueGasChart,
|
||||||
TimePrompt
|
TimePrompt,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartType:'氧气含量',
|
chartType: '氧气含量',
|
||||||
chartTime:'日',
|
chartTime: '日',
|
||||||
timestr: ''
|
timestr: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
exhaustGasInfo() {
|
exhaustGasInfo() {
|
||||||
return this.$store.state.websocket.exhaustGasInfo
|
return this.$store.state.websocket.exhaustGasInfo;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.timestr = switchShowTime(this.chartTime)
|
this.timestr = switchShowTime(this.chartTime);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 烟气
|
// 烟气
|
||||||
toggleType(val) {
|
toggleType(val) {
|
||||||
console.log('烟气' + val)
|
console.log('烟气' + val);
|
||||||
this.chartType = val
|
this.chartType = val;
|
||||||
},
|
},
|
||||||
// 切换时间
|
// 切换时间
|
||||||
toggleDate(val) {
|
toggleDate(val) {
|
||||||
this.chartTime = val
|
this.chartTime = val;
|
||||||
this.timestr = switchShowTime(val)
|
this.timestr = switchShowTime(val);
|
||||||
},
|
},
|
||||||
// 数据更新
|
// 数据更新
|
||||||
dateUpdate() {
|
dateUpdate() {
|
||||||
this.timestr = switchShowTime(this.chartTime)
|
this.timestr = switchShowTime(this.chartTime);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.timeShow {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 170px;
|
|
||||||
}
|
|
||||||
.gas-handle {
|
.gas-handle {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,95 +1,89 @@
|
|||||||
<!--
|
|
||||||
filename: MaterialCost.vue
|
|
||||||
author: liubin
|
|
||||||
date: 2023-12-06 09:09:27
|
|
||||||
description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="原料用量统计" size="middle" style="">
|
<Container
|
||||||
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
|
name="原料用量统计"
|
||||||
|
size="middle"
|
||||||
|
style="">
|
||||||
|
<TimePrompt
|
||||||
|
class="timeShow"
|
||||||
|
:timestr="timestr" />
|
||||||
|
<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
|
||||||
<div
|
<div
|
||||||
class="absolute"
|
class="absolute"
|
||||||
style="
|
style="
|
||||||
flex:3;
|
flex: 2;
|
||||||
padding: 12px 12px 0 12px;
|
padding: 12px 12px 0 12px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
grid-auto-rows: repeat(4, 1fr);
|
grid-auto-rows: repeat(3, 1fr);
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
">
|
">
|
||||||
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
|
<ShadowRect
|
||||||
|
v-for="(item, index) in materialMsg"
|
||||||
|
:key="index"
|
||||||
|
:rounded="false">
|
||||||
<div
|
<div
|
||||||
class="material"
|
class="material"
|
||||||
style="
|
style="
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 18px;
|
||||||
|
padding-top: 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
">
|
">
|
||||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
<span
|
||||||
{{item.materialUsed}}
|
style="
|
||||||
|
color: #0ee8e4;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
">
|
||||||
|
{{ item.materialUsed }}
|
||||||
</span>
|
</span>
|
||||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||||
- {{item.materialName}}/kg-
|
- {{ item.materialName }}/kg-
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</ShadowRect>
|
|
||||||
</div>
|
|
||||||
<div style="flex:1;
|
|
||||||
padding: 0 12px 12px 12px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 8px;">
|
|
||||||
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
|
|
||||||
<div
|
|
||||||
class="material"
|
|
||||||
style="
|
|
||||||
flex: 1;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
|
||||||
{{item.materialUsed}}
|
|
||||||
</span>
|
|
||||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
|
||||||
- {{item.materialName}}/kg-
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
|
import TimePrompt from '../components/TimePrompt';
|
||||||
|
import { switchShowTime } from '../utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'MaterialCost',
|
name: 'MaterialCost',
|
||||||
components: { Container, ShadowRect },
|
components: { Container, ShadowRect, TimePrompt },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
timestr: '',
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
materialMsg1() {
|
materialMsg() {
|
||||||
return this.$store.state.websocket.material.slice(0,9)
|
return this.$store.state.websocket.material;
|
||||||
},
|
},
|
||||||
materialMsg2() {
|
},
|
||||||
return this.$store.state.websocket.material.slice(9)
|
mounted() {
|
||||||
}
|
this.timestr = switchShowTime('日');
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style lang="scss" scoped>
|
||||||
|
.timeShow {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 210px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
<div
|
||||||
|
id="kilnContainerB"
|
||||||
|
ref="kilnContainerB"
|
||||||
|
style="width: 100%; height: 100%">
|
||||||
<div
|
<div
|
||||||
id='kilnContainer'
|
id="kilnContainer"
|
||||||
ref='kilnContainer'
|
ref="kilnContainer"
|
||||||
class="KilnDataBoard"
|
class="KilnDataBoard"
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -16,15 +19,22 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
"
|
"
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
|
<KHeader
|
||||||
|
:isFullScreen="isFullScreen"
|
||||||
|
@screenfullChange="screenfullChange"
|
||||||
|
topTitle="窑炉生产运行驾驶舱" />
|
||||||
<div
|
<div
|
||||||
class="main-body"
|
class="main-body"
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||||
<div class="left-side" style="flex: 2">
|
<div
|
||||||
|
class="left-side"
|
||||||
|
style="flex: 2">
|
||||||
<LeftFour />
|
<LeftFour />
|
||||||
</div>
|
</div>
|
||||||
<div class="right-side" style="flex: 1">
|
<div
|
||||||
|
class="right-side"
|
||||||
|
style="flex: 1">
|
||||||
<RightTwo />
|
<RightTwo />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,8 +46,8 @@
|
|||||||
import KHeader from '../components/Header';
|
import KHeader from '../components/Header';
|
||||||
import LeftFour from './LeftFour';
|
import LeftFour from './LeftFour';
|
||||||
import RightTwo from './RightTwo.vue';
|
import RightTwo from './RightTwo.vue';
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull';
|
||||||
import { debounce } from '@/utils/debounce'
|
import { debounce } from '@/utils/debounce';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Kiln',
|
name: 'Kiln',
|
||||||
@@ -46,10 +56,10 @@ export default {
|
|||||||
LeftFour,
|
LeftFour,
|
||||||
RightTwo,
|
RightTwo,
|
||||||
},
|
},
|
||||||
computed:{
|
computed: {
|
||||||
sidebarStatus() {
|
sidebarStatus() {
|
||||||
return this.$store.state.app.sidebar.opened;
|
return this.$store.state.app.sidebar.opened;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
// provide() {
|
// provide() {
|
||||||
// return {
|
// return {
|
||||||
@@ -59,84 +69,80 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
scaleNum: 0.8
|
scaleNum: 0.8,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
sidebarStatus() {
|
sidebarStatus() {
|
||||||
this.boxReset()
|
this.boxReset();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init()
|
this.init();
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
this.destroy()
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.boxReset = debounce(() => {
|
this.boxReset();
|
||||||
this.resetSize()
|
window.addEventListener('resize', this.boxReset);
|
||||||
}, 300)
|
},
|
||||||
this.boxReset()
|
destroyed() {
|
||||||
window.addEventListener('resize', () => {
|
window.removeEventListener('resize', this.boxReset);
|
||||||
this.boxReset()
|
this.destroy();
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
boxReset() {
|
||||||
|
debounce(() => {
|
||||||
|
this.resetSize();
|
||||||
|
}, 300)();
|
||||||
|
},
|
||||||
change() {
|
change() {
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
this.isFullScreen = screenfull.isFullscreen;
|
||||||
},
|
},
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.on('change', this.change)
|
screenfull.on('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.off('change', this.change)
|
screenfull.off('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 全屏
|
// 全屏
|
||||||
screenfullChange() {
|
screenfullChange() {
|
||||||
if (!screenfull.isEnabled) {
|
if (!screenfull.isEnabled) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: 'you browser can not work',
|
message: 'you browser can not work',
|
||||||
type: 'warning'
|
type: 'warning',
|
||||||
})
|
});
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
screenfull.toggle(this.$refs.kilnContainerB)
|
screenfull.toggle(this.$refs.kilnContainerB);
|
||||||
},
|
},
|
||||||
resetSize() {
|
resetSize() {
|
||||||
let kilnContainerBox = document.getElementById('kilnContainer')
|
let kilnContainerBox = document.getElementById('kilnContainer');
|
||||||
console.log(kilnContainerBox)
|
let rw = parseFloat(window.innerWidth);
|
||||||
let rw = parseFloat(window.innerWidth)
|
let rh = parseFloat(window.innerHeight);
|
||||||
let rh = parseFloat(window.innerHeight)
|
let bw = parseFloat(kilnContainerBox.style.width);
|
||||||
let bw = parseFloat(kilnContainerBox.style.width)
|
let bh = parseFloat(kilnContainerBox.style.height);
|
||||||
let bh = parseFloat(kilnContainerBox.style.height)
|
let wx = 0;
|
||||||
let wx = 0
|
let hx = 0;
|
||||||
let hx = 0
|
|
||||||
if (screenfull.isFullscreen) {
|
if (screenfull.isFullscreen) {
|
||||||
console.log('全屏')
|
wx = rw / bw;
|
||||||
wx = rw / bw
|
hx = rh / bh;
|
||||||
hx = rh / bh
|
} else {
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
if (this.$store.state.app.sidebar.opened) {
|
||||||
wx = (rw-280) / bw
|
wx = (rw - 280) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}else{
|
} else {
|
||||||
wx = (rw-85) / bw
|
wx = (rw - 85) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.scaleNum = wx
|
this.scaleNum = wx;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -29,6 +29,8 @@ export const switchShowTime = (type) => {
|
|||||||
}
|
}
|
||||||
if (lastMonth === 12) {
|
if (lastMonth === 12) {
|
||||||
startYear = currentYear - 1
|
startYear = currentYear - 1
|
||||||
|
}else{
|
||||||
|
startYear = currentYear
|
||||||
}
|
}
|
||||||
startTime = startYear+'.'+lastMonth+'.'+day
|
startTime = startYear+'.'+lastMonth+'.'+day
|
||||||
endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
|
endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
|
||||||
|
|||||||
@@ -1,70 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;" class="orderContainer">
|
<div
|
||||||
<Container name="订单完成情况" size="small" style="">
|
style="flex: 1"
|
||||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
class="orderContainer">
|
||||||
<div style="padding: 5px 10px;">
|
<Container
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
name="订单完成情况"
|
||||||
</div>
|
size="small"
|
||||||
</Container>
|
style="">
|
||||||
</div>
|
<TimePrompt
|
||||||
|
class="timeShow"
|
||||||
|
:timestr="timestr" />
|
||||||
|
<div style="padding: 5px 10px">
|
||||||
|
<dv-scroll-board
|
||||||
|
:config="config"
|
||||||
|
style="width: 575px; height: 230px"
|
||||||
|
ref="orderScrollBoard" />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container'
|
import Container from '../components/Container';
|
||||||
import TimePrompt from '../components/TimePrompt';
|
import TimePrompt from '../components/TimePrompt';
|
||||||
import { formatDate } from '@/utils'
|
import { formatDate } from '@/utils';
|
||||||
import { switchShowTime } from '../utils'
|
import { switchShowTime } from '../utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'OrderStatus',
|
name: 'OrderStatus',
|
||||||
components: { Container, TimePrompt },
|
components: { Container, TimePrompt },
|
||||||
computed: {
|
computed: {
|
||||||
order() {
|
order() {
|
||||||
return this.$store.state.websocket.order
|
return this.$store.state.websocket.order;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timestr: '',
|
timestr: '',
|
||||||
config: {
|
config: {
|
||||||
header: ['上线时间', '客户名称', '规格','完成度'],
|
header: ['上线时间', '客户名称', '规格', '完成度'],
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [155, 160, 150],
|
columnWidth: [155, 160, 150],
|
||||||
data: [],
|
data: [],
|
||||||
rowNum: 6
|
rowNum: 6,
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.timestr = switchShowTime('日')
|
this.timestr = switchShowTime('日');
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
order:{
|
order: {
|
||||||
handler() {
|
handler() {
|
||||||
let outArr = this.order.map((item) => [
|
let outArr = this.order.map((item) => [
|
||||||
formatDate(item.planStartTime) || '',
|
formatDate(item.planStartTime) || '',
|
||||||
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
|
`<span title=${item.customerName || ''}>${
|
||||||
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
|
item.customerName || ''
|
||||||
`<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
}</span>`,
|
||||||
|
`<span title=${item.specifications || ''}>${
|
||||||
|
item.specifications || ''
|
||||||
|
}</span>`,
|
||||||
|
`<span style="display:inline-block;width:60px;">${
|
||||||
|
item.completeRate
|
||||||
|
? (item.completeRate * 100).toFixed(2) + '%'
|
||||||
|
: '0%'
|
||||||
|
}</span>
|
||||||
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
||||||
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
||||||
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
||||||
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
|
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
|
||||||
|
item.completeRate
|
||||||
|
? item.completeRate.toFixed(2) * 37.68 +
|
||||||
|
',' +
|
||||||
|
(1 - item.completeRate.toFixed(2)) * 37.68
|
||||||
|
: 0 + ',' + 37.68
|
||||||
|
}"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>`
|
</div>`,
|
||||||
]);
|
]);
|
||||||
this.config.data = outArr
|
this.config.data = outArr;
|
||||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
this.$refs['orderScrollBoard'].updateRows(outArr);
|
||||||
this.timestr = switchShowTime('日')
|
this.timestr = switchShowTime('日');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.timeShow {
|
.timeShow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 210px;
|
left: 210px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
|
<div
|
||||||
|
id="wholePlantContainerB"
|
||||||
|
ref="wholePlantContainerB"
|
||||||
|
style="width: 100%; height: 100%">
|
||||||
<div
|
<div
|
||||||
id='wholePlantContainer'
|
id="wholePlantContainer"
|
||||||
ref='wholePlantContainer'
|
ref="wholePlantContainer"
|
||||||
class="wholePlantBoard"
|
class="wholePlantBoard"
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -16,18 +19,27 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
"
|
"
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
<KHeader
|
||||||
|
:isFullScreen="isFullScreen"
|
||||||
|
@screenfullChange="screenfullChange"
|
||||||
|
topTitle="全厂总览驾驶舱" />
|
||||||
<div
|
<div
|
||||||
class="main-body"
|
class="main-body"
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||||
<div class="left-side" style="flex: 1">
|
<div
|
||||||
|
class="left-side"
|
||||||
|
style="flex: 1">
|
||||||
<LeftTwo />
|
<LeftTwo />
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-side" style="flex: 1">
|
<div
|
||||||
|
class="middle-side"
|
||||||
|
style="flex: 1">
|
||||||
<MiddleTwo />
|
<MiddleTwo />
|
||||||
</div>
|
</div>
|
||||||
<div class="right-side" style="flex: 1">
|
<div
|
||||||
|
class="right-side"
|
||||||
|
style="flex: 1">
|
||||||
<RightTwo />
|
<RightTwo />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -40,8 +52,8 @@ import KHeader from '../components/Header';
|
|||||||
import LeftTwo from './LeftTwo';
|
import LeftTwo from './LeftTwo';
|
||||||
import MiddleTwo from './MiddleTwo';
|
import MiddleTwo from './MiddleTwo';
|
||||||
import RightTwo from './RightTwo';
|
import RightTwo from './RightTwo';
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull';
|
||||||
import { debounce } from '@/utils/debounce'
|
import { debounce } from '@/utils/debounce';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'wholePlantBoard',
|
name: 'wholePlantBoard',
|
||||||
@@ -49,7 +61,7 @@ export default {
|
|||||||
KHeader,
|
KHeader,
|
||||||
LeftTwo,
|
LeftTwo,
|
||||||
MiddleTwo,
|
MiddleTwo,
|
||||||
RightTwo
|
RightTwo,
|
||||||
},
|
},
|
||||||
// provide() {
|
// provide() {
|
||||||
// return {
|
// return {
|
||||||
@@ -59,80 +71,77 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
scaleNum: 0.8
|
scaleNum: 0.8,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init()
|
this.init();
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
this.destroy()
|
this.destroy();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.boxReset = debounce(() => {
|
this.boxReset();
|
||||||
this.resetSize()
|
window.addEventListener('resize', this.boxReset);
|
||||||
}, 300)
|
|
||||||
this.boxReset()
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.boxReset()
|
|
||||||
})
|
|
||||||
console.log('mounted...........')
|
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
console.log('destroyed...........')
|
window.removeEventListener('resize', this.boxReset);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
boxReset() {
|
||||||
|
debounce(() => {
|
||||||
|
this.resetSize();
|
||||||
|
}, 300)();
|
||||||
|
},
|
||||||
change() {
|
change() {
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
this.isFullScreen = screenfull.isFullscreen;
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.on('change', this.change)
|
screenfull.on('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.off('change', this.change)
|
screenfull.off('change', this.change);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 全屏
|
// 全屏
|
||||||
screenfullChange() {
|
screenfullChange() {
|
||||||
if (!screenfull.isEnabled) {
|
if (!screenfull.isEnabled) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: 'you browser can not work',
|
message: 'you browser can not work',
|
||||||
type: 'warning'
|
type: 'warning',
|
||||||
})
|
});
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||||
},
|
},
|
||||||
resetSize() {
|
resetSize() {
|
||||||
let wholePlantContainerBox = document.getElementById('wholePlantContainer')
|
let wholePlantContainerBox = document.getElementById(
|
||||||
let rw = parseFloat(window.innerWidth)
|
'wholePlantContainer'
|
||||||
let rh = parseFloat(window.innerHeight)
|
);
|
||||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
let rw = parseFloat(window.innerWidth);
|
||||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
let rh = parseFloat(window.innerHeight);
|
||||||
let wx = 0
|
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||||
let hx = 0
|
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||||
|
let wx = 0;
|
||||||
|
let hx = 0;
|
||||||
if (screenfull.isFullscreen) {
|
if (screenfull.isFullscreen) {
|
||||||
console.log('全屏')
|
wx = rw / bw;
|
||||||
wx = rw / bw
|
hx = rh / bh;
|
||||||
hx = rh / bh
|
} else {
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
if (this.$store.state.app.sidebar.opened) {
|
||||||
wx = (rw-280) / bw
|
wx = (rw - 280) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}else{
|
} else {
|
||||||
wx = (rw-85) / bw
|
wx = (rw - 85) / bw;
|
||||||
hx = (rh-116) / bh
|
hx = (rh - 116) / bh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.scaleNum = wx
|
this.scaleNum = wx;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,313 +1,324 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-bar
|
<search-bar
|
||||||
:formConfigs="formConfig"
|
:formConfigs="formConfig"
|
||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick"
|
@headBtnClick="buttonClick" />
|
||||||
/>
|
<!-- 列表 -->
|
||||||
<!-- 列表 -->
|
<base-table
|
||||||
<base-table
|
:page="queryParams.pageNo"
|
||||||
:page="queryParams.pageNo"
|
:limit="queryParams.pageSize"
|
||||||
:limit="queryParams.pageSize"
|
:table-props="tableProps"
|
||||||
:table-props="tableProps"
|
:table-data="list"
|
||||||
:table-data="list"
|
:max-height="tableH">
|
||||||
:max-height="tableH"
|
<method-btn
|
||||||
>
|
v-if="tableBtn.length"
|
||||||
<method-btn
|
slot="handleBtn"
|
||||||
v-if="tableBtn.length"
|
:width="160"
|
||||||
slot="handleBtn"
|
label="操作"
|
||||||
:width="160"
|
:method-list="tableBtn"
|
||||||
label="操作"
|
@clickBtn="handleClick" />
|
||||||
:method-list="tableBtn"
|
</base-table>
|
||||||
@clickBtn="handleClick"
|
<pagination
|
||||||
/>
|
:page.sync="queryParams.pageNo"
|
||||||
</base-table>
|
:limit.sync="queryParams.pageSize"
|
||||||
<pagination
|
:total="total"
|
||||||
:page.sync="queryParams.pageNo"
|
@pagination="getList" />
|
||||||
:limit.sync="queryParams.pageSize"
|
<!-- 新增 -->
|
||||||
:total="total"
|
<base-dialog
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
<!-- 新增 -->
|
|
||||||
<base-dialog
|
|
||||||
:dialogTitle="addOrEditTitle"
|
:dialogTitle="addOrEditTitle"
|
||||||
:dialogVisible="centervisible"
|
:dialogVisible="centervisible"
|
||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
@confirm="handleConfirm"
|
@confirm="handleConfirm"
|
||||||
:before-close="handleCancel"
|
:before-close="handleCancel"
|
||||||
width="50%"
|
width="50%">
|
||||||
>
|
<add-or-update
|
||||||
<add-or-update ref="addOrUpdate" @successSubmit="successSubmit" />
|
ref="addOrUpdate"
|
||||||
|
@successSubmit="successSubmit" />
|
||||||
</base-dialog>
|
</base-dialog>
|
||||||
<!-- 装车 -->
|
<!-- 装车 -->
|
||||||
<base-dialog
|
<base-dialog
|
||||||
dialogTitle="装车"
|
dialogTitle="装车"
|
||||||
:dialogVisible="centervisible2"
|
:dialogVisible="centervisible2"
|
||||||
@cancel="handleCancel2"
|
@cancel="handleCancel2"
|
||||||
@confirm="handleConfirm2"
|
@confirm="handleConfirm2"
|
||||||
:before-close="handleCancel2"
|
:before-close="handleCancel2"
|
||||||
width="50%"
|
width="50%">
|
||||||
>
|
<loaded-page
|
||||||
<loaded-page ref="loadedPage" @successSubmit="successSubmit2" />
|
ref="loadedPage"
|
||||||
|
@successSubmit="successSubmit2" />
|
||||||
</base-dialog>
|
</base-dialog>
|
||||||
<!-- 发货详情 -->
|
<!-- 发货详情 -->
|
||||||
<delivery-log-detail ref='deliveryLogDetail' v-if='showDetail' />
|
<delivery-log-detail
|
||||||
</div>
|
ref="deliveryLogDetail"
|
||||||
|
v-if="showDetail" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { parseTime } from '@/utils/ruoyi'
|
import { parseTime } from '@/utils/ruoyi';
|
||||||
import { deliveryLogPage, deliveryLogDelete } from '@/api/base/delivery'
|
import { deliveryLogPage, deliveryLogDelete } from '@/api/base/delivery';
|
||||||
import AddOrUpdate from './components/addOrUpdate'
|
import AddOrUpdate from './components/addOrUpdate';
|
||||||
import LoadedPage from './components/loadedPage'
|
import LoadedPage from './components/loadedPage';
|
||||||
import DeliveryLogDetail from './components/deliveryLogDetail.vue'
|
import DeliveryLogDetail from './components/deliveryLogDetail.vue';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'orderName',
|
prop: 'orderName',
|
||||||
label: '订单名',
|
label: '订单名',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '发货单名称',
|
label: '发货单名称',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'deliveryTime',
|
prop: 'deliveryTime',
|
||||||
label: '发货时间',
|
label: '发货时间',
|
||||||
filter: parseTime,
|
filter: parseTime,
|
||||||
minWidth: 160
|
minWidth: 160,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '发货单号',
|
label: '发货单号',
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'deliverPerName',
|
prop: 'deliverPerName',
|
||||||
label: '发货负责人',
|
label: '发货负责人',
|
||||||
minWidth: 100
|
minWidth: 100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'principal',
|
prop: 'principal',
|
||||||
label: '运输负责人',
|
label: '运输负责人',
|
||||||
minWidth: 100
|
minWidth: 100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'principalCall',
|
prop: 'principalCall',
|
||||||
label: '运输联系方式',
|
label: '运输联系方式',
|
||||||
minWidth: 110,
|
minWidth: 110,
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'principalCost',
|
prop: 'principalCost',
|
||||||
label: '运输费用',
|
label: '运输费用',
|
||||||
align: 'right'
|
align: 'right',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注',
|
label: '备注',
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
export default {
|
export default {
|
||||||
name: "DeliveryLog",
|
name: 'DeliveryLog',
|
||||||
data() {
|
mixins: [tableHeightMixin],
|
||||||
return {
|
data() {
|
||||||
formConfig: [
|
return {
|
||||||
{
|
formConfig: [
|
||||||
type: 'input',
|
{
|
||||||
label: '订单名',
|
type: 'input',
|
||||||
param: 'orderName',
|
label: '订单名',
|
||||||
defaultSelect: ''
|
param: 'orderName',
|
||||||
},
|
defaultSelect: '',
|
||||||
{
|
},
|
||||||
type: 'input',
|
{
|
||||||
label: '发货单名称',
|
type: 'input',
|
||||||
param: 'name'
|
label: '发货单名称',
|
||||||
},
|
param: 'name',
|
||||||
{
|
},
|
||||||
type: 'input',
|
{
|
||||||
label: '发货单号',
|
type: 'input',
|
||||||
param: 'code'
|
label: '发货单号',
|
||||||
},
|
param: 'code',
|
||||||
{
|
},
|
||||||
type: 'button',
|
{
|
||||||
btnName: '查询',
|
type: 'button',
|
||||||
name: 'search',
|
btnName: '查询',
|
||||||
color: 'primary'
|
name: 'search',
|
||||||
},
|
color: 'primary',
|
||||||
{
|
},
|
||||||
type: this.$auth.hasPermi('extend:delivery-log:create') ? 'separate' : '',
|
{
|
||||||
},
|
type: this.$auth.hasPermi('extend:delivery-log:create')
|
||||||
{
|
? 'separate'
|
||||||
type: this.$auth.hasPermi('extend:delivery-log:create') ? 'button' : '',
|
: '',
|
||||||
btnName: '新增',
|
},
|
||||||
name: 'add',
|
{
|
||||||
color: 'success',
|
type: this.$auth.hasPermi('extend:delivery-log:create')
|
||||||
plain: true
|
? 'button'
|
||||||
}
|
: '',
|
||||||
],
|
btnName: '新增',
|
||||||
// 查询参数
|
name: 'add',
|
||||||
queryParams: {
|
color: 'success',
|
||||||
pageNo: 1,
|
plain: true,
|
||||||
pageSize: 20,
|
},
|
||||||
orderName: '',
|
],
|
||||||
code: '',
|
// 查询参数
|
||||||
name: ''
|
queryParams: {
|
||||||
},
|
pageNo: 1,
|
||||||
tableProps,
|
pageSize: 20,
|
||||||
list: [],
|
orderName: '',
|
||||||
tableH: this.tableHeight(260),
|
code: '',
|
||||||
total: 0,
|
name: '',
|
||||||
tableBtn: [
|
},
|
||||||
this.$auth.hasPermi('extend:delivery-log:loaded')
|
tableProps,
|
||||||
? {
|
list: [],
|
||||||
type: 'loaded',
|
total: 0,
|
||||||
btnName: '装车'
|
tableBtn: [
|
||||||
}
|
this.$auth.hasPermi('extend:delivery-log:loaded')
|
||||||
: undefined,
|
? {
|
||||||
this.$auth.hasPermi('extend:delivery-log:detail')
|
type: 'loaded',
|
||||||
? {
|
btnName: '装车',
|
||||||
type: 'detail',
|
}
|
||||||
btnName: '详情'
|
: undefined,
|
||||||
}
|
this.$auth.hasPermi('extend:delivery-log:detail')
|
||||||
: undefined,
|
? {
|
||||||
this.$auth.hasPermi('extend:delivery-log:update')
|
type: 'detail',
|
||||||
? {
|
btnName: '详情',
|
||||||
type: 'edit',
|
}
|
||||||
btnName: '编辑'
|
: undefined,
|
||||||
}
|
this.$auth.hasPermi('extend:delivery-log:update')
|
||||||
: undefined,
|
? {
|
||||||
this.$auth.hasPermi('extend:delivery-log:delete')
|
type: 'edit',
|
||||||
? {
|
btnName: '编辑',
|
||||||
type: 'delete',
|
}
|
||||||
btnName: '删除'
|
: undefined,
|
||||||
}
|
this.$auth.hasPermi('extend:delivery-log:delete')
|
||||||
: undefined
|
? {
|
||||||
].filter((v) => v),
|
type: 'delete',
|
||||||
addOrEditTitle: '',
|
btnName: '删除',
|
||||||
centervisible: false,
|
}
|
||||||
centervisible2: false,
|
: undefined,
|
||||||
showDetail: false
|
].filter((v) => v),
|
||||||
}
|
addOrEditTitle: '',
|
||||||
},
|
centervisible: false,
|
||||||
created() {
|
centervisible2: false,
|
||||||
window.addEventListener('resize', () => {
|
showDetail: false,
|
||||||
this.tableH = this.tableHeight(260)
|
};
|
||||||
})
|
},
|
||||||
if (location.href.indexOf('?') > 0) {
|
created() {
|
||||||
let arr = location.href.split('?')[1]
|
if (location.href.indexOf('?') > 0) {
|
||||||
this.formConfig[0].defaultSelect = decodeURI(arr.split('=')[1])
|
let arr = location.href.split('?')[1];
|
||||||
} else {
|
this.formConfig[0].defaultSelect = decodeURI(arr.split('=')[1]);
|
||||||
this.formConfig[0].defaultSelect = ''
|
} else {
|
||||||
}
|
this.formConfig[0].defaultSelect = '';
|
||||||
this.queryParams.orderName = this.formConfig[0].defaultSelect
|
}
|
||||||
this.getList();
|
this.queryParams.orderName = this.formConfig[0].defaultSelect;
|
||||||
},
|
this.getList();
|
||||||
components: { AddOrUpdate, LoadedPage, DeliveryLogDetail },
|
},
|
||||||
watch: {
|
components: { AddOrUpdate, LoadedPage, DeliveryLogDetail },
|
||||||
$route: 'initData'
|
watch: {
|
||||||
},
|
$route: 'initData',
|
||||||
methods: {
|
},
|
||||||
initData(to) {
|
methods: {
|
||||||
if (to.name === 'DeliveryLog') {
|
initData(to) {
|
||||||
if (location.href.indexOf('?') > 0) {
|
if (to.name === 'DeliveryLog') {
|
||||||
let arr = location.href.split('?')[1]
|
if (location.href.indexOf('?') > 0) {
|
||||||
this.formConfig[0].defaultSelect = decodeURI(arr.split('=')[1])
|
let arr = location.href.split('?')[1];
|
||||||
} else {
|
this.formConfig[0].defaultSelect = decodeURI(arr.split('=')[1]);
|
||||||
this.formConfig[0].defaultSelect = ''
|
} else {
|
||||||
}
|
this.formConfig[0].defaultSelect = '';
|
||||||
this.queryParams.orderName = this.formConfig[0].defaultSelect
|
}
|
||||||
this.getList()
|
this.queryParams.orderName = this.formConfig[0].defaultSelect;
|
||||||
}
|
this.getList();
|
||||||
},
|
}
|
||||||
getList() {
|
},
|
||||||
deliveryLogPage({...this.queryParams}).then(res => {
|
getList() {
|
||||||
let arr = res.data.list || []
|
deliveryLogPage({ ...this.queryParams }).then((res) => {
|
||||||
arr && arr.map(item => {
|
let arr = res.data.list || [];
|
||||||
item.principalCost = item.principalCost.toFixed(2)
|
arr &&
|
||||||
})
|
arr.map((item) => {
|
||||||
this.list = arr
|
item.principalCost = item.principalCost.toFixed(2);
|
||||||
this.total = res.data.total || 0
|
});
|
||||||
})
|
this.list = arr;
|
||||||
},
|
this.total = res.data.total || 0;
|
||||||
buttonClick(val) {
|
});
|
||||||
if (val.btnName === 'search') {
|
},
|
||||||
this.queryParams.name = val.name
|
buttonClick(val) {
|
||||||
this.queryParams.orderName = val.orderName
|
if (val.btnName === 'search') {
|
||||||
this.queryParams.code = val.code
|
this.queryParams.name = val.name;
|
||||||
this.getList()
|
this.queryParams.orderName = val.orderName;
|
||||||
} else {
|
this.queryParams.code = val.code;
|
||||||
this.addOrEditTitle = '新增'
|
this.getList();
|
||||||
this.centervisible = true
|
} else {
|
||||||
this.$nextTick(() => {
|
this.addOrEditTitle = '新增';
|
||||||
this.$refs.addOrUpdate.init()
|
this.centervisible = true;
|
||||||
})
|
this.$nextTick(() => {
|
||||||
}
|
this.$refs.addOrUpdate.init();
|
||||||
},
|
});
|
||||||
handleClick(val) {
|
}
|
||||||
console.log(val)
|
},
|
||||||
switch (val.type) {
|
handleClick(val) {
|
||||||
case 'edit':
|
console.log(val);
|
||||||
this.addOrEditTitle = '编辑'
|
switch (val.type) {
|
||||||
this.centervisible = true
|
case 'edit':
|
||||||
this.$nextTick(() => {
|
this.addOrEditTitle = '编辑';
|
||||||
this.$refs.addOrUpdate.init(val.data.id)
|
this.centervisible = true;
|
||||||
})
|
this.$nextTick(() => {
|
||||||
break
|
this.$refs.addOrUpdate.init(val.data.id);
|
||||||
case 'delete':
|
});
|
||||||
this.handleDelete(val.data)
|
break;
|
||||||
break
|
case 'delete':
|
||||||
case 'loaded':
|
this.handleDelete(val.data);
|
||||||
this.centervisible2 = true
|
break;
|
||||||
this.$nextTick(() => {
|
case 'loaded':
|
||||||
this.$refs.loadedPage.init(val.data.id, val.data.code, val.data.orderId)
|
this.centervisible2 = true;
|
||||||
})
|
this.$nextTick(() => {
|
||||||
break
|
this.$refs.loadedPage.init(
|
||||||
default:
|
val.data.id,
|
||||||
this.showDetail = true
|
val.data.code,
|
||||||
this.$nextTick(() => {
|
val.data.orderId
|
||||||
this.$refs.deliveryLogDetail.init(val.data)
|
);
|
||||||
})
|
});
|
||||||
}
|
break;
|
||||||
},
|
default:
|
||||||
// 新增
|
this.showDetail = true;
|
||||||
handleCancel() {
|
this.$nextTick(() => {
|
||||||
this.$refs.addOrUpdate.formClear()
|
this.$refs.deliveryLogDetail.init(val.data);
|
||||||
this.centervisible = false
|
});
|
||||||
this.addOrEditTitle = ''
|
}
|
||||||
},
|
},
|
||||||
handleConfirm() {
|
// 新增
|
||||||
this.$refs.addOrUpdate.submitForm()
|
handleCancel() {
|
||||||
},
|
this.$refs.addOrUpdate.formClear();
|
||||||
successSubmit() {
|
this.centervisible = false;
|
||||||
this.handleCancel()
|
this.addOrEditTitle = '';
|
||||||
this.getList()
|
},
|
||||||
},
|
handleConfirm() {
|
||||||
// 删除
|
this.$refs.addOrUpdate.submitForm();
|
||||||
handleDelete(val) {
|
},
|
||||||
this.$modal.confirm('是否确认删除发货单名为"' + val.name + '"的数据项?').then(function() {
|
successSubmit() {
|
||||||
return deliveryLogDelete({ id: val.id })
|
this.handleCancel();
|
||||||
}).then(() => {
|
this.getList();
|
||||||
this.getList();
|
},
|
||||||
this.$modal.msgSuccess("操作成功");
|
// 删除
|
||||||
}).catch(() => {});
|
handleDelete(val) {
|
||||||
},
|
this.$modal
|
||||||
// 装车
|
.confirm('是否确认删除发货单名为"' + val.name + '"的数据项?')
|
||||||
handleCancel2() {
|
.then(function () {
|
||||||
this.$refs.loadedPage.formClear()
|
return deliveryLogDelete({ id: val.id });
|
||||||
this.centervisible2 = false
|
})
|
||||||
},
|
.then(() => {
|
||||||
handleConfirm2() {
|
this.getList();
|
||||||
this.$refs.loadedPage.submitForm()
|
this.$modal.msgSuccess('操作成功');
|
||||||
},
|
})
|
||||||
successSubmit2() {
|
.catch(() => {});
|
||||||
this.handleCancel2()
|
},
|
||||||
this.getList()
|
// 装车
|
||||||
}
|
handleCancel2() {
|
||||||
}
|
this.$refs.loadedPage.formClear();
|
||||||
}
|
this.centervisible2 = false;
|
||||||
|
},
|
||||||
|
handleConfirm2() {
|
||||||
|
this.$refs.loadedPage.submitForm();
|
||||||
|
},
|
||||||
|
successSubmit2() {
|
||||||
|
this.handleCancel2();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -1,130 +1,124 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-bar
|
<search-bar
|
||||||
:formConfigs="formConfig"
|
:formConfigs="formConfig"
|
||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick"
|
@headBtnClick="buttonClick" />
|
||||||
/>
|
<!-- 列表 -->
|
||||||
<!-- 列表 -->
|
<base-table
|
||||||
<base-table
|
:page="queryParams.pageNo"
|
||||||
:page="queryParams.pageNo"
|
:limit="queryParams.pageSize"
|
||||||
:limit="queryParams.pageSize"
|
:table-props="tableProps"
|
||||||
:table-props="tableProps"
|
:table-data="list"
|
||||||
:table-data="list"
|
:max-height="tableH">
|
||||||
:max-height="tableH"
|
<method-btn
|
||||||
>
|
v-if="tableBtn.length"
|
||||||
<method-btn
|
slot="handleBtn"
|
||||||
v-if="tableBtn.length"
|
:width="80"
|
||||||
slot="handleBtn"
|
label="操作"
|
||||||
:width="80"
|
:method-list="tableBtn"
|
||||||
label="操作"
|
@clickBtn="handleClick" />
|
||||||
:method-list="tableBtn"
|
</base-table>
|
||||||
@clickBtn="handleClick"
|
<pagination
|
||||||
/>
|
:page.sync="queryParams.pageNo"
|
||||||
</base-table>
|
:limit.sync="queryParams.pageSize"
|
||||||
<pagination
|
:total="total"
|
||||||
:page.sync="queryParams.pageNo"
|
@pagination="getList" />
|
||||||
:limit.sync="queryParams.pageSize"
|
<!-- 详情抽屉 -->
|
||||||
:total="total"
|
<delivery-log-det-detail ref="deliveryLogDetail" />
|
||||||
@pagination="getList"
|
</div>
|
||||||
/>
|
|
||||||
<!-- 详情抽屉 -->
|
|
||||||
<delivery-log-det-detail ref='deliveryLogDetail'/>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { deliveryProgressPage } from '@/api/base/delivery'
|
import { deliveryProgressPage } from '@/api/base/delivery';
|
||||||
import DeliveryLogDetDetail from './components/deliveryLogDetDetail.vue'
|
import DeliveryLogDetDetail from './components/deliveryLogDetDetail.vue';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'orderName',
|
prop: 'orderName',
|
||||||
label: '订单名',
|
label: '订单名',
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'customerName',
|
prop: 'customerName',
|
||||||
label: '客户名称',
|
label: '客户名称',
|
||||||
showOverflowtooltip: true
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'unit',
|
prop: 'unit',
|
||||||
label: '单位'
|
label: '单位',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'orderNum',
|
prop: 'orderNum',
|
||||||
label: '订单数量'
|
label: '订单数量',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'num',
|
prop: 'num',
|
||||||
label: '发货数量'
|
label: '发货数量',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'rate',
|
prop: 'rate',
|
||||||
label: '累计发货比例(%)'
|
label: '累计发货比例(%)',
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
export default {
|
export default {
|
||||||
name: "DeliveryLogDet",
|
name: 'DeliveryLogDet',
|
||||||
data() {
|
mixins: [tableHeightMixin],
|
||||||
return {
|
data() {
|
||||||
formConfig: [
|
return {
|
||||||
{
|
formConfig: [
|
||||||
type: 'input',
|
{
|
||||||
label: '订单名',
|
type: 'input',
|
||||||
param: 'orderName'
|
label: '订单名',
|
||||||
},
|
param: 'orderName',
|
||||||
{
|
},
|
||||||
type: 'button',
|
{
|
||||||
btnName: '查询',
|
type: 'button',
|
||||||
name: 'search',
|
btnName: '查询',
|
||||||
color: 'primary'
|
name: 'search',
|
||||||
}
|
color: 'primary',
|
||||||
],
|
},
|
||||||
// 查询参数
|
],
|
||||||
queryParams: {
|
// 查询参数
|
||||||
pageNo: 1,
|
queryParams: {
|
||||||
pageSize: 20,
|
pageNo: 1,
|
||||||
orderName: ''
|
pageSize: 20,
|
||||||
},
|
orderName: '',
|
||||||
tableProps,
|
},
|
||||||
list: [],
|
tableProps,
|
||||||
tableH: this.tableHeight(260),
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
tableBtn: [
|
tableBtn: [
|
||||||
this.$auth.hasPermi('extend:delivery-log-det:detail')
|
this.$auth.hasPermi('extend:delivery-log-det:detail')
|
||||||
? {
|
? {
|
||||||
type: 'detail',
|
type: 'detail',
|
||||||
btnName: '详情'
|
btnName: '详情',
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined,
|
||||||
].filter((v) => v)
|
].filter((v) => v),
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
components: { DeliveryLogDetDetail },
|
components: { DeliveryLogDetDetail },
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('resize', () => {
|
this.getList();
|
||||||
this.tableH = this.tableHeight(260)
|
},
|
||||||
})
|
methods: {
|
||||||
this.getList();
|
getList() {
|
||||||
},
|
deliveryProgressPage({ ...this.queryParams }).then((res) => {
|
||||||
methods: {
|
this.list = res.data.list || [];
|
||||||
getList() {
|
this.total = res.data.total || 0;
|
||||||
deliveryProgressPage({...this.queryParams}).then(res => {
|
});
|
||||||
this.list = res.data.list || []
|
},
|
||||||
this.total = res.data.total || 0
|
buttonClick(val) {
|
||||||
})
|
this.queryParams.orderName = val.orderName;
|
||||||
},
|
this.getList();
|
||||||
buttonClick(val) {
|
},
|
||||||
this.queryParams.orderName = val.orderName
|
handleClick(val) {
|
||||||
this.getList()
|
console.log(val);
|
||||||
},
|
this.$nextTick(() => {
|
||||||
handleClick(val) {
|
this.$refs.deliveryLogDetail.init(val.data);
|
||||||
console.log(val)
|
});
|
||||||
this.$nextTick(() => {
|
},
|
||||||
this.$refs.deliveryLogDetail.init(val.data)
|
},
|
||||||
})
|
};
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
@@ -76,10 +76,6 @@ export default {
|
|||||||
name: this.chartData[i].objName + this.chartData[i].objCode,
|
name: this.chartData[i].objName + this.chartData[i].objCode,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barMaxWidth: 20,
|
barMaxWidth: 20,
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
},
|
|
||||||
data: [],
|
data: [],
|
||||||
};
|
};
|
||||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode);
|
legendData.push(this.chartData[i].objName + this.chartData[i].objCode);
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="searchBarBox divHeight"
|
class="searchBarBox divHeight"
|
||||||
ref="searchBarRef"
|
ref="searchBarRef">
|
||||||
:style="{ paddingRight: isFold ? '55px' : '0px' }">
|
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
class="demo-form-inline">
|
class="demo-form-inline">
|
||||||
@@ -187,8 +186,11 @@
|
|||||||
@click="resetBtn">
|
@click="resetBtn">
|
||||||
重置
|
重置
|
||||||
</el-button>
|
</el-button>
|
||||||
<span class="separateStyle"></span>
|
<span
|
||||||
|
class="separateStyle"
|
||||||
|
v-hasPermi="['analysis:contrast-analysis:export']"></span>
|
||||||
<el-button
|
<el-button
|
||||||
|
v-hasPermi="['analysis:contrast-analysis:export']"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
plain
|
plain
|
||||||
@@ -197,13 +199,6 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<span
|
|
||||||
v-if="isFold"
|
|
||||||
class="foldClass"
|
|
||||||
@click="switchMode">
|
|
||||||
{{ isExpand ? '收起' : '展开' }}
|
|
||||||
<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -214,16 +209,8 @@ import { getFactoryList } from '@/api/core/base/factory';
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
export default {
|
export default {
|
||||||
name: 'searchArea',
|
name: 'searchArea',
|
||||||
props: {
|
|
||||||
isFold: {
|
|
||||||
// 多行模式(默认否)
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isExpand: false, // 展开收起
|
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
energyTypeId: null,
|
energyTypeId: null,
|
||||||
@@ -522,16 +509,6 @@ export default {
|
|||||||
let value = new Date(newData).getTime();
|
let value = new Date(newData).getTime();
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
switchMode() {
|
|
||||||
// 展开和收起切换
|
|
||||||
this.isExpand = !this.isExpand;
|
|
||||||
const element = this.$refs.searchBarRef;
|
|
||||||
if (this.isExpand) {
|
|
||||||
element.classList.remove('divHeight');
|
|
||||||
} else {
|
|
||||||
element.classList.add('divHeight');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -570,21 +547,6 @@ export default {
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.searchBarBox .foldClass {
|
|
||||||
position: absolute;
|
|
||||||
top: 14px;
|
|
||||||
right: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.searchBarBox .foldClass .iconfont {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.divHeight {
|
|
||||||
height: 45px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.separateStyle {
|
.separateStyle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
|
|||||||
@@ -4,7 +4,6 @@
|
|||||||
id="contrastAnalysisBox">
|
id="contrastAnalysisBox">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area
|
<search-area
|
||||||
:isFold="isFold"
|
|
||||||
@submit="getList"
|
@submit="getList"
|
||||||
@export="exportExl" />
|
@export="exportExl" />
|
||||||
<div v-show="chartData.length">
|
<div v-show="chartData.length">
|
||||||
@@ -38,7 +37,6 @@ export default {
|
|||||||
mixins: [tableHeightMixin],
|
mixins: [tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFold: false,
|
|
||||||
chartData: [],
|
chartData: [],
|
||||||
timeDim: '',
|
timeDim: '',
|
||||||
tableProps: [],
|
tableProps: [],
|
||||||
@@ -46,13 +44,6 @@ export default {
|
|||||||
tableH: this.tableHeight(250) / 2,
|
tableH: this.tableHeight(250) / 2,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
|
|
||||||
// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
|
|
||||||
});
|
|
||||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
_setTableHeight() {
|
_setTableHeight() {
|
||||||
this.tableH = this.tableHeight(250) / 2;
|
this.tableH = this.tableHeight(250) / 2;
|
||||||
|
|||||||
@@ -1,138 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
id="analysischartLine"
|
id="analysischartLine"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
:style="{ height: chartHeight + 'px' }"
|
:style="{ height: chartHeight + 'px' }"></div>
|
||||||
></div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts';
|
||||||
import resize from '@/utils/chartMixins/resize'
|
import resize from '@/utils/chartMixins/resize';
|
||||||
export default {
|
export default {
|
||||||
name: "LineChart",
|
name: 'LineChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(370)
|
chartHeight: this.tableHeight(370),
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return [];
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
chartData: function () {
|
chartData: function () {
|
||||||
this.getChart()
|
this.getChart();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.chartHeight = this.tableHeight(370)
|
this.chartHeight = this.tableHeight(370);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getChart() {
|
getChart() {
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||||
}
|
}
|
||||||
this.chartDom = document.getElementById('analysischartLine')
|
this.chartDom = document.getElementById('analysischartLine');
|
||||||
this.chart = echarts.init(this.chartDom)
|
this.chart = echarts.init(this.chartDom);
|
||||||
if (this.chartData.length === 0) {
|
if (this.chartData.length === 0) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
let arr = this.chartData[0].type // [水,电,煤]
|
let arr = this.chartData[0].type; // [水,电,煤]
|
||||||
let keys = Object.keys(this.chartData[0])
|
let keys = Object.keys(this.chartData[0]);
|
||||||
let yData = [
|
let yData = [
|
||||||
{
|
{
|
||||||
name: '本期',
|
name: '本期',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: [],
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
},
|
||||||
show: true,
|
{
|
||||||
position: 'top'
|
name: '上期',
|
||||||
}
|
type: 'bar',
|
||||||
},
|
data: [],
|
||||||
{
|
barWidth: 20,
|
||||||
name: '上期',
|
},
|
||||||
type: 'bar',
|
];
|
||||||
data: [],
|
for (let j = 0; j < arr.length; j++) {
|
||||||
barWidth: 20,
|
for (let k = 0; k < keys.length; k++) {
|
||||||
label: {
|
if (keys[k].indexOf(arr[j] + '_上期') > -1) {
|
||||||
show: true,
|
yData[1].data.push(this.chartData[0][keys[k]]);
|
||||||
position: 'top'
|
}
|
||||||
}
|
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
||||||
}
|
yData[0].data.push(this.chartData[0][keys[k]]);
|
||||||
]
|
}
|
||||||
for (let j = 0; j < arr.length; j++) {
|
}
|
||||||
for (let k = 0; k < keys.length; k++) {
|
}
|
||||||
if (keys[k].indexOf(arr[j]+'_上期') > -1) {
|
var option = {
|
||||||
yData[1].data.push(this.chartData[0][keys[k]])
|
color: ['#288AFF', '#8EF0AB'],
|
||||||
}
|
tooltip: {
|
||||||
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
|
trigger: 'axis',
|
||||||
yData[0].data.push(this.chartData[0][keys[k]])
|
axisPointer: {
|
||||||
}
|
type: 'shadow',
|
||||||
}
|
},
|
||||||
}
|
formatter: function (params) {
|
||||||
var option = {
|
return (
|
||||||
color:['#288AFF','#8EF0AB'],
|
params[0].axisValue +
|
||||||
tooltip: {
|
`<br>` +
|
||||||
trigger: 'axis',
|
params
|
||||||
axisPointer: {
|
.map((item) => {
|
||||||
type: 'shadow'
|
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
|
||||||
},
|
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
|
||||||
formatter: function(params) {
|
let value = item.value ? item.value : '-';
|
||||||
return (
|
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
|
||||||
params[0].axisValue +
|
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||||
`<br>` +
|
|
||||||
params.map((item) => {
|
|
||||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
|
|
||||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
|
|
||||||
let value = item.value ? item.value : '-'
|
|
||||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
|
|
||||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
|
||||||
<span>${str}${seriesNameStr}</span>
|
<span>${str}${seriesNameStr}</span>
|
||||||
<span>${valueStr}</span>
|
<span>${valueStr}</span>
|
||||||
</span>`
|
</span>`;
|
||||||
}).join(``)
|
})
|
||||||
)
|
.join(``)
|
||||||
}
|
);
|
||||||
},
|
},
|
||||||
legend: {
|
},
|
||||||
right: '1%',
|
legend: {
|
||||||
icon: 'rect',
|
right: '1%',
|
||||||
itemHeight: 8,
|
icon: 'rect',
|
||||||
itemWidth: 8
|
itemHeight: 8,
|
||||||
},
|
itemWidth: 8,
|
||||||
grid: {
|
},
|
||||||
left: '1%',
|
grid: {
|
||||||
right: '1%',
|
left: '1%',
|
||||||
bottom: '3%',
|
right: '1%',
|
||||||
containLabel: true
|
bottom: '3%',
|
||||||
},
|
containLabel: true,
|
||||||
yAxis: {
|
},
|
||||||
type: 'value',
|
yAxis: {
|
||||||
boundaryGap: [0, 0.01]
|
type: 'value',
|
||||||
},
|
boundaryGap: [0, 0.01],
|
||||||
xAxis: {
|
},
|
||||||
type: 'category',
|
xAxis: {
|
||||||
data: arr
|
type: 'category',
|
||||||
},
|
data: arr,
|
||||||
series: yData
|
},
|
||||||
}
|
series: yData,
|
||||||
option && this.chart.setOption(option);
|
};
|
||||||
}
|
option && this.chart.setOption(option);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
</script>
|
};
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -80,10 +80,13 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<span class="separateStyle"></span>
|
<span
|
||||||
|
class="separateStyle"
|
||||||
|
v-hasPermi="['analysis:qoq-analysis:export']"></span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button
|
<el-button
|
||||||
|
v-hasPermi="['analysis:qoq-analysis:export']"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
@click="exportData"
|
@click="exportData"
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(214) - 100,
|
chartHeight: this.tableHeight(314),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -37,7 +37,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.chartHeight = this.tableHeight(214) - 70;
|
this.chartHeight = this.tableHeight(314);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -68,9 +68,9 @@ export default {
|
|||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
color: ['#288AFF'],
|
color: ['#288AFF'],
|
||||||
// tooltip: {
|
tooltip: {
|
||||||
// trigger: 'axis'
|
trigger: 'axis',
|
||||||
// },
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '4%',
|
left: '4%',
|
||||||
right: '1%',
|
right: '1%',
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="searchBarBox divHeight"
|
class="searchBarBox"
|
||||||
ref="searchBarRef"
|
ref="searchBarRef">
|
||||||
:style="{ paddingRight: isFold ? '55px' : '0px' }">
|
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
class="demo-form-inline">
|
class="demo-form-inline">
|
||||||
@@ -170,8 +169,11 @@
|
|||||||
@click="resetBtn">
|
@click="resetBtn">
|
||||||
重置
|
重置
|
||||||
</el-button>
|
</el-button>
|
||||||
<span class="separateStyle"></span>
|
<span
|
||||||
|
class="separateStyle"
|
||||||
|
v-hasPermi="['analysis:energy-analysis:query']"></span>
|
||||||
<el-button
|
<el-button
|
||||||
|
v-hasPermi="['analysis:energy-analysis:query']"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
plain
|
plain
|
||||||
@@ -180,13 +182,6 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<span
|
|
||||||
v-if="isFold"
|
|
||||||
class="foldClass"
|
|
||||||
@click="switchMode">
|
|
||||||
{{ isExpand ? '收起' : '展开' }}
|
|
||||||
<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -195,16 +190,8 @@ import { getEnergyTypeListAll } from '@/api/base/energyType';
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
export default {
|
export default {
|
||||||
name: 'searchArea',
|
name: 'searchArea',
|
||||||
props: {
|
|
||||||
isFold: {
|
|
||||||
// 多行模式(默认否)
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isExpand: false, // 展开收起
|
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
energyTypeId: null,
|
energyTypeId: null,
|
||||||
@@ -506,16 +493,6 @@ export default {
|
|||||||
let value = new Date(newData).getTime();
|
let value = new Date(newData).getTime();
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
switchMode() {
|
|
||||||
// 展开和收起切换
|
|
||||||
this.isExpand = !this.isExpand;
|
|
||||||
const element = this.$refs.searchBarRef;
|
|
||||||
if (this.isExpand) {
|
|
||||||
element.classList.remove('divHeight');
|
|
||||||
} else {
|
|
||||||
element.classList.add('divHeight');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -554,21 +531,6 @@ export default {
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.searchBarBox .foldClass {
|
|
||||||
position: absolute;
|
|
||||||
top: 14px;
|
|
||||||
right: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.searchBarBox .foldClass .iconfont {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.divHeight {
|
|
||||||
height: 45px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.separateStyle {
|
.separateStyle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
|
|||||||
@@ -4,7 +4,6 @@
|
|||||||
id="trendAnalysisBox">
|
id="trendAnalysisBox">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area
|
<search-area
|
||||||
:isFold="isFold"
|
|
||||||
@submit="getList"
|
@submit="getList"
|
||||||
@export="exportExl" />
|
@export="exportExl" />
|
||||||
<div v-show="chartData.length">
|
<div v-show="chartData.length">
|
||||||
@@ -33,20 +32,12 @@ export default {
|
|||||||
components: { SearchArea, LineChart },
|
components: { SearchArea, LineChart },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFold: false,
|
|
||||||
chartData: [],
|
chartData: [],
|
||||||
timeDim: '',
|
timeDim: '',
|
||||||
tableProps: [],
|
tableProps: [],
|
||||||
list: [],
|
list: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.tableH = this.tableHeight(260);
|
|
||||||
this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
|
|
||||||
});
|
|
||||||
this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getList(params) {
|
getList(params) {
|
||||||
this.timeDim = params.timeDim;
|
this.timeDim = params.timeDim;
|
||||||
@@ -66,8 +57,14 @@ export default {
|
|||||||
let listObj = { useNum: '消耗量' }; // 数据
|
let listObj = { useNum: '消耗量' }; // 数据
|
||||||
for (let i = 0; i < arr.length; i++) {
|
for (let i = 0; i < arr.length; i++) {
|
||||||
let obj = {};
|
let obj = {};
|
||||||
|
if (this.timeDim === '3') {
|
||||||
|
let fName = arr[i].time.slice(0, 4);
|
||||||
|
let lName = arr[i].time.slice(4, 6);
|
||||||
|
obj.label = fName + ' 第 ' + lName + ' 周';
|
||||||
|
} else {
|
||||||
|
obj.label = arr[i].time;
|
||||||
|
}
|
||||||
obj.prop = arr[i].time;
|
obj.prop = arr[i].time;
|
||||||
obj.label = arr[i].time;
|
|
||||||
obj.minWidth = 100;
|
obj.minWidth = 100;
|
||||||
tempX.push(obj);
|
tempX.push(obj);
|
||||||
listObj[arr[i].time] = arr[i].useNum || null;
|
listObj[arr[i].time] = arr[i].useNum || null;
|
||||||
@@ -77,37 +74,20 @@ export default {
|
|||||||
},
|
},
|
||||||
// 导出excel
|
// 导出excel
|
||||||
exportExl(params) {
|
exportExl(params) {
|
||||||
exportTrend({ ...params }).then((res) => {
|
exportTrend({ ...params })
|
||||||
// let fileName = '';
|
.then((response) => {
|
||||||
// const contentDisposition = res.headers['content-disposition'];
|
this.$download.excel(response, '走势分析.xls');
|
||||||
// if (contentDisposition) {
|
|
||||||
// fileName = decodeURIComponent(
|
|
||||||
// contentDisposition.slice(
|
|
||||||
// contentDisposition.indexOf('filename=') + 9
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
const blob = new Blob([res.data]);
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(blob);
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.download = '走势分析';
|
|
||||||
a.href = e.target.result;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
this.$message.success('导出成功');
|
this.$message.success('导出成功');
|
||||||
};
|
})
|
||||||
});
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang="scss">
|
||||||
.trendAnalysisBox {
|
.trendAnalysisBox {
|
||||||
.trend-out-table {
|
.trend-out-table {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,102 +1,119 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="analysischartLine" style="width: 100%;height: 100%;"></div>
|
<div
|
||||||
|
id="analysischartLine"
|
||||||
|
style="width: 100%"
|
||||||
|
:style="{ height: chartHeight + 'px' }"></div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts';
|
||||||
import resize from '@/utils/chartMixins/resize'
|
import resize from '@/utils/chartMixins/resize';
|
||||||
export default {
|
export default {
|
||||||
name: "LineChart",
|
name: 'LineChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(214) - 70
|
chartHeight: this.tableHeight(250) / 2,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return [];
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
chartData: function () {
|
chartData: function () {
|
||||||
this.getChart()
|
this.getChart();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.chartHeight = this.tableHeight(214) - 70
|
this.chartHeight = this.tableHeight(250) / 2;
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getChart() {
|
getChart() {
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||||
}
|
}
|
||||||
this.chartDom = document.getElementById('analysischartLine')
|
this.chartDom = document.getElementById('analysischartLine');
|
||||||
this.chart = echarts.init(this.chartDom)
|
this.chart = echarts.init(this.chartDom);
|
||||||
if (this.chartData.length === 0) {
|
if (this.chartData.length === 0) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
let xData = []
|
let xData = [];
|
||||||
let arr = this.chartData[0].type
|
let arr = this.chartData[0].type;
|
||||||
let keys = Object.keys(this.chartData[0])
|
let keys = Object.keys(this.chartData[0]);
|
||||||
let yData = []
|
let yData = [];
|
||||||
for (let j = 0; j < arr.length; j++) {
|
for (let j = 0; j < arr.length; j++) {
|
||||||
for (let k = 0; k < keys.length; k++) {
|
for (let k = 0; k < keys.length; k++) {
|
||||||
if (keys[k].indexOf(arr[j] + '_上年同期') > -1 || keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
if (
|
||||||
let obj = {
|
keys[k].indexOf(arr[j] + '_上年同期') > -1 ||
|
||||||
name: '',
|
keys[k].indexOf(arr[j] + '_能源消耗') > -1
|
||||||
type: 'line',
|
) {
|
||||||
data: []
|
let obj = {
|
||||||
}
|
name: '',
|
||||||
obj.name = keys[k]
|
type: 'line',
|
||||||
yData.push(obj)
|
data: [],
|
||||||
}
|
};
|
||||||
}
|
obj.name = keys[k];
|
||||||
}
|
yData.push(obj);
|
||||||
for (let i = 0; i < this.chartData.length; i++) {
|
}
|
||||||
xData.push(this.chartData[i].time)
|
}
|
||||||
for (let p = 0; p < yData.length; p++) {
|
}
|
||||||
yData[p].data.push(this.chartData[i][yData[p].name])
|
for (let i = 0; i < this.chartData.length; i++) {
|
||||||
}
|
xData.push(this.chartData[i].time);
|
||||||
}
|
for (let p = 0; p < yData.length; p++) {
|
||||||
var option = {
|
yData[p].data.push(this.chartData[i][yData[p].name]);
|
||||||
color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'],
|
}
|
||||||
legend: {
|
}
|
||||||
data: keys,
|
var option = {
|
||||||
right: '1%'
|
color: [
|
||||||
},
|
'#FFDC94',
|
||||||
tooltip: {
|
'#8EF0AB',
|
||||||
trigger: 'axis'
|
'#63BDFF',
|
||||||
},
|
'#288AFF',
|
||||||
grid: {
|
'#7164FF',
|
||||||
left: '1%',
|
'#FF6860',
|
||||||
right: '1%',
|
'#FF9747',
|
||||||
bottom: '3%',
|
'#B0EB42',
|
||||||
containLabel: true
|
'#D680FF',
|
||||||
},
|
'#0043D2',
|
||||||
xAxis: {
|
],
|
||||||
type: 'category',
|
legend: {
|
||||||
data: xData
|
data: keys,
|
||||||
},
|
right: '1%',
|
||||||
yAxis: {
|
},
|
||||||
type: 'value'
|
tooltip: {
|
||||||
},
|
trigger: 'axis',
|
||||||
series: yData
|
},
|
||||||
};
|
grid: {
|
||||||
|
left: '1%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: yData,
|
||||||
|
};
|
||||||
|
|
||||||
option && this.chart.setOption(option);
|
option && this.chart.setOption(option);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -69,10 +69,13 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<span class="separateStyle"></span>
|
<span
|
||||||
|
class="separateStyle"
|
||||||
|
v-hasPermi="['analysis:yoy-analysis:export']"></span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button
|
<el-button
|
||||||
|
v-hasPermi="['analysis:yoy-analysis:export']"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
@click="exportData"
|
@click="exportData"
|
||||||
|
|||||||
@@ -1,143 +1,153 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area @submit="getList" @exportD="exportData"/>
|
<search-area
|
||||||
<div v-show='chartData.length'>
|
@submit="getList"
|
||||||
<div class="chartTitle">同比分析图</div>
|
@exportD="exportData" />
|
||||||
<div style='width: 100%;height: 400px;'>
|
<div v-show="chartData.length">
|
||||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
<div class="chartTitle">同比分析图</div>
|
||||||
</div>
|
<div style="width: 100%">
|
||||||
<!-- 表格 -->
|
<line-chart
|
||||||
<base-table
|
ref="analysisLineChart"
|
||||||
:table-props="tableProps"
|
:chartData="chartData" />
|
||||||
:table-data="list"
|
</div>
|
||||||
:max-height="tableH"
|
<!-- 表格 -->
|
||||||
class="yoy-out-table"
|
<base-table
|
||||||
/>
|
:table-props="tableProps"
|
||||||
</div>
|
:table-data="list"
|
||||||
<!-- 没有数据 -->
|
:max-height="tableH"
|
||||||
<div class="no-data-bg" v-show='!chartData.length'></div>
|
class="yoy-out-table" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 没有数据 -->
|
||||||
|
<div
|
||||||
|
class="no-data-bg"
|
||||||
|
v-show="!chartData.length"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getYoy } from "@/api/analysis/energyAnalysis"
|
import { getYoy } from '@/api/analysis/energyAnalysis';
|
||||||
import subRate from "./components/subRate.vue"
|
import subRate from './components/subRate.vue';
|
||||||
import SearchArea from "./components/searchArea"
|
import SearchArea from './components/searchArea';
|
||||||
import LineChart from "./components/lineChart"
|
import LineChart from './components/lineChart';
|
||||||
import FileSaver from "file-saver"
|
import FileSaver from 'file-saver';
|
||||||
import * as XLSX from 'xlsx/xlsx.mjs'
|
import * as XLSX from 'xlsx/xlsx.mjs';
|
||||||
export default {
|
export default {
|
||||||
name: 'YoyAnalysis',
|
name: 'YoyAnalysis',
|
||||||
components: { SearchArea, LineChart },
|
components: { SearchArea, LineChart },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartData: [],
|
chartData: [],
|
||||||
tableProps: [],
|
tableProps: [],
|
||||||
list: [],
|
list: [],
|
||||||
tableH: this.tableHeight(640)
|
tableH: this.tableHeight(250) / 2,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.tableH = this.tableHeight(640)
|
this.tableH = this.tableHeight(250) / 2;
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getList(params) {
|
getList(params) {
|
||||||
getYoy({ ...params }).then((res) => {
|
getYoy({ ...params }).then((res) => {
|
||||||
if (res.code === 0 && res.data) {
|
if (res.code === 0 && res.data) {
|
||||||
this.getTableList(res.data)
|
this.getTableList(res.data);
|
||||||
} else {
|
} else {
|
||||||
this.chartData = []
|
this.chartData = [];
|
||||||
this.list = []
|
this.list = [];
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getTableList(arr) {
|
getTableList(arr) {
|
||||||
let data = arr.data
|
let data = arr.data;
|
||||||
let nameData = arr.nameData
|
let nameData = arr.nameData;
|
||||||
let tempX = []
|
let tempX = [];
|
||||||
data[0].data.map((item) => {
|
data[0].data.map((item) => {
|
||||||
let obj = {}
|
let obj = {};
|
||||||
obj.prop = item.dynamicName
|
obj.prop = item.dynamicName;
|
||||||
obj.label = item.dynamicName
|
obj.label = item.dynamicName;
|
||||||
obj.id = item.id
|
obj.id = item.id;
|
||||||
obj.children = []
|
obj.children = [];
|
||||||
tempX.push(obj)
|
tempX.push(obj);
|
||||||
})
|
});
|
||||||
for (let i = 0; i < nameData.length; i++) {
|
for (let i = 0; i < nameData.length; i++) {
|
||||||
for (let j = 0; j < tempX.length; j++) {
|
for (let j = 0; j < tempX.length; j++) {
|
||||||
if (tempX[j].id === nameData[i].parentId) {
|
if (tempX[j].id === nameData[i].parentId) {
|
||||||
let obj = {}
|
let obj = {};
|
||||||
obj.prop = tempX[j].prop + '_' + nameData[i].name
|
obj.prop = tempX[j].prop + '_' + nameData[i].name;
|
||||||
obj.label = nameData[i].name
|
obj.label = nameData[i].name;
|
||||||
if (obj.label.indexOf('同比')!= -1) {
|
if (obj.label.indexOf('同比') != -1) {
|
||||||
obj.subcomponent = subRate
|
obj.subcomponent = subRate;
|
||||||
}
|
}
|
||||||
tempX[j].children.push(obj)
|
tempX[j].children.push(obj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
|
this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
|
||||||
console.log(this.tableProps)
|
console.log(this.tableProps);
|
||||||
// 数据
|
// 数据
|
||||||
this.list = []
|
this.list = [];
|
||||||
for (let k = 0; k < data.length; k++) {
|
for (let k = 0; k < data.length; k++) {
|
||||||
let obj = {}
|
let obj = {};
|
||||||
obj.time = data[k].time
|
obj.time = data[k].time;
|
||||||
let arr1 = data[k].data
|
let arr1 = data[k].data;
|
||||||
obj.type = []
|
obj.type = [];
|
||||||
for (let q = 0; q < arr1.length; q++) {
|
for (let q = 0; q < arr1.length; q++) {
|
||||||
let name = arr1[q].dynamicName
|
let name = arr1[q].dynamicName;
|
||||||
obj.type.push(name)
|
obj.type.push(name);
|
||||||
let arr2 = arr1[q].children
|
let arr2 = arr1[q].children;
|
||||||
for (let p = 0; p < arr2.length; p++) {
|
for (let p = 0; p < arr2.length; p++) {
|
||||||
let prop = name + '_' + arr2[p].dynamicName
|
let prop = name + '_' + arr2[p].dynamicName;
|
||||||
obj[prop] = arr2[p].dynamicValue
|
obj[prop] = arr2[p].dynamicValue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.list.push(obj)
|
this.list.push(obj);
|
||||||
}
|
}
|
||||||
this.chartData = this.list
|
this.chartData = this.list;
|
||||||
},
|
},
|
||||||
exportData(val) {
|
exportData(val) {
|
||||||
if (this.list.length > 0) {
|
if (this.list.length > 0) {
|
||||||
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
|
var wb = XLSX.utils.table_to_book(
|
||||||
let fileName = val.name + "同比分析.xlsx"
|
document.querySelector('.yoy-out-table')
|
||||||
var wbout = XLSX.write(wb, {
|
);
|
||||||
bookType: "xlsx",
|
let fileName = val.name + '同比分析.xlsx';
|
||||||
bookSST: true,
|
var wbout = XLSX.write(wb, {
|
||||||
type: "array"
|
bookType: 'xlsx',
|
||||||
})
|
bookSST: true,
|
||||||
try {
|
type: 'array',
|
||||||
FileSaver.saveAs(
|
});
|
||||||
new Blob([wbout], { type: "application/octet-stream" }),
|
try {
|
||||||
fileName
|
FileSaver.saveAs(
|
||||||
)
|
new Blob([wbout], { type: 'application/octet-stream' }),
|
||||||
} catch (e) {
|
fileName
|
||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
);
|
||||||
}
|
} catch (e) {
|
||||||
return wbout
|
if (typeof console !== 'undefined') console.log(e, wbout);
|
||||||
} else {
|
}
|
||||||
this.$modal.msgWarning("暂无数据导出")
|
return wbout;
|
||||||
}
|
} else {
|
||||||
}
|
this.$modal.msgWarning('暂无数据导出');
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
|
.yoy-out-table {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
.chartTitle {
|
.chartTitle {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
.chartTitle::before {
|
.chartTitle::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-color: #0B58FF;
|
background-color: #0b58ff;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user