Compare commits
22 Commits
e2a777069e
...
ee3d6f9dc6
| Author | SHA1 | Date | |
|---|---|---|---|
| ee3d6f9dc6 | |||
| 2265c549e6 | |||
| a74242f3b3 | |||
| ebcf3d4d78 | |||
| ff9e93d264 | |||
|
ee0affc78f | ||
|
|
dfec94be17 | ||
| 646859aeef | |||
| 5a31498224 | |||
| 282ef45114 | |||
| 0371859d14 | |||
| eff5e0d1e1 | |||
| 60dc449a27 | |||
| 159d626b30 | |||
|
|
bc5d3d44d5 | ||
|
|
e9538744c3 | ||
|
|
8cf2f9f7e9 | ||
| 97f9b52e87 | |||
|
f85cb9c50f | ||
|
|
e8cc1fc50b | ||
| f08c79fc23 | |||
| 2c6a6b001c |
2
.env.dev
2
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2023-09-11 15:55:29
|
||||
# @LastEditTime: 2023-09-18 10:44:07
|
||||
# @LastEditors: DY
|
||||
# @Description:
|
||||
###
|
||||
|
||||
@ -55,8 +55,10 @@
|
||||
"file-saver": "^2.0.5",
|
||||
"fuse.js": "6.6.2",
|
||||
"highlight.js": "9.18.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"js-beautify": "1.13.0",
|
||||
"jsencrypt": "3.3.1",
|
||||
"jspdf": "^2.5.1",
|
||||
"min-dash": "3.5.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"moment": "^2.29.4",
|
||||
|
||||
@ -50,3 +50,11 @@ export function getCode() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得可用的排班列表
|
||||
export function listEnabled() {
|
||||
return request({
|
||||
url: '/base/group-team/listEnabled',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,54 +1,28 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建排班信息
|
||||
export function createGroupTeamScheduling(data) {
|
||||
// 获取某月预排班-已有排班
|
||||
export function getPreset(query) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新排班信息
|
||||
export function updateGroupTeamScheduling(data) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除排班信息
|
||||
export function deleteGroupTeamScheduling(id) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得排班信息
|
||||
export function getGroupTeamScheduling(id) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得排班信息分页
|
||||
export function getGroupTeamSchedulingPage(query) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/page',
|
||||
url: '/base/group-team-scheduling/getPreset',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出排班信息 Excel
|
||||
export function exportGroupTeamSchedulingExcel(query) {
|
||||
// 批量创建-更新排班信息
|
||||
export function createOrUpdateList(data) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
url: '/base/group-team-scheduling/createOrUpdateList',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 自动排班，填充上月已有的排班
|
||||
export function autoSet(query) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/autoSet',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
24
src/api/core/analysis/index.js
Normal file
24
src/api/core/analysis/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-12 14:07:04
|
||||
* @LastEditTime: 2023-09-13 09:53:45
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getYieldAnalysisPageData(data) {
|
||||
return request({
|
||||
url: '/analysis/production-analysis/getOutput',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCT(data) {
|
||||
return request({
|
||||
url: '/analysis/production-analysis/getCT',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
25
src/api/core/monitoring/auto.js
Normal file
25
src/api/core/monitoring/auto.js
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-09-12 09:44:53
|
||||
* @LastEditTime: 2023-09-13 16:11:41
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得工厂分页
|
||||
export function getPdlAutoReport(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getPdlAutoReport',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有工厂产线列表
|
||||
export function getPdList() {
|
||||
return request({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
25
src/api/core/monitoring/data.js
Normal file
25
src/api/core/monitoring/data.js
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-09-12 09:44:53
|
||||
* @LastEditTime: 2023-09-14 10:25:46
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得产线统计数据查询
|
||||
export function getPdlDataSearch(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getPdlDataSearch',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有工厂产线列表
|
||||
export function getPdList() {
|
||||
return request({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
17
src/api/core/monitoring/data24.js
Normal file
17
src/api/core/monitoring/data24.js
Normal file
@ -0,0 +1,17 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-09-12 09:44:53
|
||||
* @LastEditTime: 2023-09-15 14:12:26
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得近24小时产线生产数据
|
||||
export function getPdlDataOneDay(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getPdlDataOneDay',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
16
src/api/core/monitoring/index.js
Normal file
16
src/api/core/monitoring/index.js
Normal file
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-12 14:07:04
|
||||
* @LastEditTime: 2023-09-13 09:46:44
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getSectionDataSearch(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getSectionDataSearch',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
33
src/api/core/monitoring/sectionStatistics.js
Normal file
33
src/api/core/monitoring/sectionStatistics.js
Normal file
@ -0,0 +1,33 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-09-12 09:44:53
|
||||
* @LastEditTime: 2023-09-14 14:01:12
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得工段自动统计数据查询
|
||||
export function getSectionAutoReport(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getSectionAutoReport',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有工厂产线列表
|
||||
export function getPdList() {
|
||||
return request({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有产线工段列表
|
||||
export function getWorkshopSectionList() {
|
||||
return request({
|
||||
url: '/base/workshop-section/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
12
src/assets/icons/svg/downward.svg
Normal file
12
src/assets/icons/svg/downward.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>下拉展开</title>
|
||||
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-43" transform="translate(-1870.000000, -119.000000)" fill-rule="nonzero">
|
||||
<g id="下拉展开" transform="translate(1870.000000, 119.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="18" height="18"></rect>
|
||||
<path d="M9.79014922,13.2165873 L16.1721224,6.15356667 C16.6092925,5.77338351 16.6092925,5.16518371 16.1721224,4.78500055 C15.964758,4.60350795 15.6800768,4.50112918 15.3827707,4.50112918 C15.0854647,4.50112918 14.8007835,4.60350795 14.5934191,4.78500055 L9.00013482,11.162609 L3.40552499,4.78387137 C3.19816065,4.60237877 2.91347942,4.5 2.61617336,4.5 C2.3188673,4.5 2.03418606,4.60237877 1.82682172,4.78387137 C1.39105943,5.16454327 1.39105943,5.77176559 1.82682172,6.15243749 L8.20879489,13.214329 C8.31400161,13.3066969 8.440317,13.3797143 8.57994259,13.4288732 C8.99637706,13.5753327 9.475517,13.4912854 9.79014922,13.2165873 Z" id="路径" fill="#0B58FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
10
src/assets/icons/svg/toggle.svg
Normal file
10
src/assets/icons/svg/toggle.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>切换</title>
|
||||
<g id="1班组管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="切换" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M14.5,9.15 C14.969442,9.15 15.35,9.53055796 15.35,10 C15.35,10.4333311 15.0257376,10.7909267 14.6066222,10.8433773 L14.5,10.85 L3.523,10.8493636 L5.10448737,12.4305126 C5.26177017,12.5877954 5.34716031,12.7990496 5.34764236,13.015701 L5.34074746,13.1242515 L5.31933966,13.2323523 C5.24258033,13.518822 5.01882201,13.7425803 4.73235229,13.8193397 C4.48169128,13.8865041 4.21633806,13.832194 4.01342676,13.6770775 L3.93051263,13.6044874 L1.04232939,10.7055042 C0.831903536,10.5688042 0.689345737,10.3541899 0.656994192,10.1075365 L0.65,10 L0.65778959,9.88152374 C0.670925502,9.77175364 0.705946489,9.66606949 0.76033092,9.57061601 L0.821076439,9.47880032 L0.894170559,9.39517056 C1.02591288,9.26342824 1.19742791,9.1808136 1.37731459,9.15882561 L1.5,9.15 L14.5,9.15 Z M11.9865732,2.32292254 L12.0694874,2.39551263 L14.9508862,5.29019827 C15.1653597,5.42263107 15.3074642,5.64305498 15.3419246,5.89182346 L15.35,6 L15.3417548,6.1198336 C15.3282251,6.22918814 15.2930578,6.33441548 15.2387207,6.42946868 L15.1780851,6.52090655 L15.1052179,6.60421789 C14.9738843,6.73555151 14.8030912,6.81820523 14.622959,6.840766 L14.5,6.85 L1.5,6.85 C1.03055796,6.85 0.65,6.46944204 0.65,6 C0.65,5.56666889 0.974262406,5.20907332 1.39337781,5.15662271 L1.5,5.15 L12.475,5.14936355 L10.8955126,3.56948738 C10.7382298,3.41220459 10.6528397,3.20095039 10.6523576,2.98429905 L10.6592525,2.8757485 L10.6806603,2.76764771 C10.7478247,2.5169867 10.9275353,2.31433911 11.1633258,2.21617103 L11.2676477,2.18066033 C11.5183087,2.11349592 11.7836619,2.167806 11.9865732,2.32292254 Z" id="形状结合"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
14
src/assets/icons/svg/upward.svg
Normal file
14
src/assets/icons/svg/upward.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>收起</title>
|
||||
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-43" transform="translate(-1870.000000, -485.000000)" fill-rule="nonzero">
|
||||
<g id="编组-18备份" transform="translate(1.000000, 366.000000)">
|
||||
<g id="收起" transform="translate(1878.000000, 128.000000) scale(1, -1) translate(-1878.000000, -128.000000) translate(1869.000000, 119.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="18" height="18"></rect>
|
||||
<path d="M9.79014922,13.2165873 L16.1721224,6.15356667 C16.6092925,5.77338351 16.6092925,5.16518371 16.1721224,4.78500055 C15.964758,4.60350795 15.6800768,4.50112918 15.3827707,4.50112918 C15.0854647,4.50112918 14.8007835,4.60350795 14.5934191,4.78500055 L9.00013482,11.162609 L3.40552499,4.78387137 C3.19816065,4.60237877 2.91347942,4.5 2.61617336,4.5 C2.3188673,4.5 2.03418606,4.60237877 1.82682172,4.78387137 C1.39105943,5.16454327 1.39105943,5.77176559 1.82682172,6.15243749 L8.20879489,13.214329 C8.31400161,13.3066969 8.440317,13.3797143 8.57994259,13.4288732 C8.99637706,13.5753327 9.475517,13.4912854 9.79014922,13.2165873 Z" id="路径" fill="#0B58FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1 +1 @@
|
||||
<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
|
||||
<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -14,8 +14,17 @@ body {
|
||||
Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
// label {
|
||||
// font-weight: 700;
|
||||
// }
|
||||
.searchBarBox .el-form-item--medium .el-form-item__label {
|
||||
line-height: 40px;
|
||||
}
|
||||
.searchBarBox .el-form-item--medium .el-form-item__content {
|
||||
line-height: 40px;
|
||||
}
|
||||
.searchBarBox .el-range-editor--small.el-input__inner {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@ -52,6 +52,13 @@ Vue.prototype.divide = divide;
|
||||
Vue.prototype.tableHeight = function(n) {
|
||||
return window.innerHeight - n
|
||||
}
|
||||
Vue.prototype.searchBarWidth = function(name, num) {
|
||||
if (document.getElementById(name) && document.getElementById(name).offsetWidth < num) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag);
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-11 16:18:44
|
||||
* @LastEditTime: 2023-09-12 14:25:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import Mock from 'mockjs';
|
||||
|
||||
const baseURL = 'http://192.168.1.49:48080/admin-api';
|
||||
const baseURL = 'http://192.168.1.188:48080/admin-api';
|
||||
|
||||
Mock.setup({
|
||||
timeout: 200,
|
||||
|
||||
93
src/views/core/analysis/LineChart.vue
Normal file
93
src/views/core/analysis/LineChart.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-13 09:02:25
|
||||
* @LastEditTime: 2023-09-13 10:33:20
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
// autoResize: {
|
||||
// type: Boolean,
|
||||
// default: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler(val) {
|
||||
// this.setOptions(val)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// if (!this.chart) {
|
||||
// return
|
||||
// }
|
||||
// this.chart.dispose()
|
||||
// this.chart = null
|
||||
// },
|
||||
methods: {
|
||||
initChart(xData, yData,lineName) {
|
||||
console.log(xData,yData);
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(xData, yData, lineName)
|
||||
},
|
||||
setOptions(xData, yData, lineName) {
|
||||
let seriesData = []
|
||||
lineName.forEach((item,index) => {
|
||||
seriesData.push({
|
||||
name: item,
|
||||
data: yData[index],
|
||||
type: 'line',
|
||||
})
|
||||
})
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData
|
||||
},
|
||||
legend: {
|
||||
data:lineName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: seriesData
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,159 +1,248 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-11 14:21:21
|
||||
* @LastEditTime: 2023-09-11 14:26:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData" />
|
||||
<pagination
|
||||
<div class="app-container">
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
|
||||
<balance-chart ref="lineChart" />
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPage from '../../mixins/basic-page';
|
||||
// import basicPage from '../../mixins/basic-page';
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog';
|
||||
import { getCT } from '@/api/core/analysis/index';
|
||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
import BalanceChart from '../balanceChart'
|
||||
import { time } from 'echarts';
|
||||
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '工段名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '进片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '出片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗面积/m²',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗比例/%',
|
||||
align: 'center',
|
||||
}
|
||||
];
|
||||
// const tableProps = [
|
||||
// // {
|
||||
// // prop: 'lineName',
|
||||
// // label: '产线',
|
||||
// // align: 'center',
|
||||
// // },
|
||||
// // {
|
||||
// // prop: 'sum',
|
||||
// // label: '合计',
|
||||
// // align: 'center',
|
||||
// // },
|
||||
// // {
|
||||
// // prop: 'dynamicValue',
|
||||
// // label: 'dynamicName',
|
||||
// // align: 'center',
|
||||
// // children:[
|
||||
|
||||
// // ]
|
||||
// // }
|
||||
// ];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getLineBindProductLogPage,
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'productionLineId',
|
||||
defaultSelect: '',
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'createTime',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
},
|
||||
created() {
|
||||
this.getArr();
|
||||
},
|
||||
methods: {
|
||||
getArr() {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 500,
|
||||
};
|
||||
this.optionArrUrl.forEach((item, index) => {
|
||||
item(params).then((response) => {
|
||||
this.formConfig[index].selectOptions = response.data.list;
|
||||
});
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productionLineId = val.productionLineId;
|
||||
this.listQuery.productId = val.productId;
|
||||
this.listQuery.createTime = val.createTime;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
components: {
|
||||
BalanceChart
|
||||
},
|
||||
// mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getCT,
|
||||
},
|
||||
tableProps: [],
|
||||
dataListLoading: false,
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
// time: ''
|
||||
endTime: undefined,
|
||||
lineId:undefined,
|
||||
startTime:undefined
|
||||
},
|
||||
timeList: [],
|
||||
spanArr: [],
|
||||
xData: [],
|
||||
yData: [],
|
||||
optionArrUrl: [getProductionLinePage],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'lineIds',
|
||||
defaultSelect: '',
|
||||
multiple: false,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
width: 350,
|
||||
param: 'time',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getArr();
|
||||
},
|
||||
methods: {
|
||||
getArr() {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 500
|
||||
}
|
||||
this.optionArrUrl.forEach((item, index) => {
|
||||
item(params).then((response) => {
|
||||
this.formConfig[index].selectOptions = response.data.list
|
||||
});
|
||||
});
|
||||
},
|
||||
setRowSpan(arr) {
|
||||
let count = 0
|
||||
arr.forEach((item, index) => {
|
||||
if(index === 0) {
|
||||
this.spanArr.push(1)
|
||||
} else {
|
||||
if (item === arr[index - 1]) {
|
||||
this.spanArr[count] += 1
|
||||
this.spanArr.push(0)
|
||||
} else {
|
||||
count = index
|
||||
this.spanArr.push(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 合并table列的规则 */
|
||||
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex == 0) {
|
||||
if (this.spanArr[rowIndex]) {
|
||||
return [
|
||||
this.spanArr[rowIndex], // row span
|
||||
1, // col span
|
||||
];
|
||||
} else {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
getData() {
|
||||
// this.listQuery.lineId = '1672847052717821953'
|
||||
// this.listQuery.startTime = '1693497600000';
|
||||
// this.listQuery.endTime = '1693843200000';
|
||||
this.tableData.splice(0)
|
||||
this.xData.splice(0)
|
||||
this.yData.splice(0)
|
||||
this.tableProps.splice(0)
|
||||
this.spanArr.splice(0)
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||
console.log(res)
|
||||
let arr = [
|
||||
{
|
||||
prop: 'sectionName',
|
||||
label: '工段',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'equName',
|
||||
label: '设备',
|
||||
align: 'center',
|
||||
}
|
||||
]
|
||||
let sectionArr= []
|
||||
res.data.data.forEach((ele, index) => {
|
||||
let tempData = []
|
||||
let eqData = []
|
||||
let plData = []
|
||||
ele.data.forEach((item, index) => {
|
||||
item.children.forEach(params => {
|
||||
if (params.dynamicName === '设备CT') {
|
||||
tempData[item.dynamicName + '_eq'] = params.dynamicValue
|
||||
eqData[index] = params.dynamicValue
|
||||
} else {
|
||||
tempData[item.dynamicName + '_pl'] = params.dynamicValue
|
||||
plData[index] = params.dynamicValue
|
||||
}
|
||||
})
|
||||
})
|
||||
const equipment = {
|
||||
name: ele.equName,
|
||||
eqData: eqData,
|
||||
plData: plData
|
||||
}
|
||||
tempData['equName'] = ele.equName
|
||||
tempData['sectionName'] = ele.sectionName
|
||||
this.tableData.push(tempData)
|
||||
const { sectionName } = tempData
|
||||
sectionArr.push(sectionName)
|
||||
this.yData.push(equipment)
|
||||
console.log('看看equ', this.yData)
|
||||
})
|
||||
this.setRowSpan(sectionArr)
|
||||
res.data.nameData.forEach(item => {
|
||||
this.timeList.push(item.name)
|
||||
})
|
||||
const timeArray = Array.from(new Set(this.timeList))
|
||||
for (const times of timeArray) {
|
||||
if (times !== '设备CT' && times !== '产线CT') {
|
||||
const subprop = {
|
||||
label: times,
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: times + '_eq', label: '设备CT', align: 'center' },
|
||||
{ prop: times + '_pl', label: '产线CT', align: 'center' }
|
||||
]
|
||||
}
|
||||
arr.push(subprop)
|
||||
this.xData.push(times)
|
||||
}
|
||||
}
|
||||
this.tableProps = arr
|
||||
|
||||
console.log('表格横坐标', this.xData)
|
||||
this.$refs.lineChart.initChart(this.xData, this.yData)
|
||||
// this.total = response.data.total;
|
||||
// this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
// console.log(val)
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
// this.listQuery.pageNo = 1;
|
||||
// this.listQuery.pageSize = 10;
|
||||
this.listQuery.lineId = val.lineIds
|
||||
this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
|
||||
this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined;
|
||||
this.getData()
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
102
src/views/core/analysis/balanceChart.vue
Normal file
102
src/views/core/analysis/balanceChart.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-13 09:02:25
|
||||
* @LastEditTime: 2023-09-20 09:29:40
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin: 20px">
|
||||
<el-button v-for="(item, index) in dataArray" :key="index" @click="changeChart(index)">{{ item.name }}</el-button>
|
||||
</div>
|
||||
<div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
// autoResize: {
|
||||
// type: Boolean,
|
||||
// default: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
dataArray: [],
|
||||
xDatas: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeChart(index) {
|
||||
this.setOptions(this.xDatas, this.dataArray[index])
|
||||
},
|
||||
initChart(xData, yData, lineName) {
|
||||
this.dataArray = yData
|
||||
this.xDatas = xData
|
||||
console.log(xData,yData);
|
||||
console.log('zale', yData[0].eqData)
|
||||
this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
|
||||
this.setOptions(xData, yData[0], lineName)
|
||||
},
|
||||
setOptions(xData, dataList, lineName) {
|
||||
// let seriesData = []
|
||||
// lineName.forEach((item,index) => {
|
||||
// seriesData.push({
|
||||
// name: item,
|
||||
// data: yData[index],
|
||||
// type: 'line',
|
||||
// })
|
||||
// })
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:lineName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '设备CT',
|
||||
data: dataList.eqData,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '产线CT',
|
||||
data: dataList.plData,
|
||||
type: 'line',
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,114 +1,95 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData" />
|
||||
<pagination
|
||||
<div class="app-container">
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
|
||||
<line-chart ref="lineChart" />
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPage from '../../mixins/basic-page';
|
||||
// import basicPage from '../../mixins/basic-page';
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog';
|
||||
import { getYieldAnalysisPageData } from '@/api/core/analysis/index';
|
||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
import lineChart from '../LineChart'
|
||||
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '合计',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '进片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '出片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗面积/m²',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
label: '损耗比例/%',
|
||||
align: 'center',
|
||||
}
|
||||
];
|
||||
// const tableProps = [
|
||||
// // {
|
||||
// // prop: 'lineName',
|
||||
// // label: '产线',
|
||||
// // align: 'center',
|
||||
// // },
|
||||
// // {
|
||||
// // prop: 'sum',
|
||||
// // label: '合计',
|
||||
// // align: 'center',
|
||||
// // },
|
||||
// // {
|
||||
// // prop: 'dynamicValue',
|
||||
// // label: 'dynamicName',
|
||||
// // align: 'center',
|
||||
// // children:[
|
||||
|
||||
// // ]
|
||||
// // }
|
||||
// ];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
components: {
|
||||
lineChart,
|
||||
},
|
||||
// mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getLineBindProductLogPage,
|
||||
getDataListURL: getYieldAnalysisPageData,
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
||||
tableProps:[],
|
||||
dataListLoading:false,
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
lineIds: [],
|
||||
time: ''
|
||||
},
|
||||
xData: [],
|
||||
yData:[],
|
||||
optionArrUrl: [getProductionLinePage ],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'productionLineId',
|
||||
defaultSelect: '',
|
||||
param: 'lineIds',
|
||||
defaultSelect: '',
|
||||
multiple:true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'daterange',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'createTime',
|
||||
param: 'time',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
},
|
||||
created() {
|
||||
this.getArr();
|
||||
},
|
||||
@ -120,19 +101,109 @@ export default {
|
||||
};
|
||||
this.optionArrUrl.forEach((item, index) => {
|
||||
item(params).then((response) => {
|
||||
this.formConfig[index].selectOptions = response.data.list;
|
||||
this.formConfig[index].selectOptions = response.data.list
|
||||
});
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
},
|
||||
getData() {
|
||||
// this.listQuery.lineIds = ['1672847052717821953']
|
||||
// this.listQuery.productId = val.productId;
|
||||
// this.listQuery.time = '1694486098000';
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||
let arr = [
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'sum',
|
||||
label: '合计',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: res.data.nameData[0].name,
|
||||
label: res.data.nameData[0].name,
|
||||
align: 'center',
|
||||
children:[
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
console.log(res.data.nameData.slice(1))
|
||||
res.data.nameData.slice(1).forEach(item => {
|
||||
const props = {
|
||||
'prop': item.name,
|
||||
'label': item.name,
|
||||
'align': 'center'
|
||||
}
|
||||
arr[2].children.push(props)
|
||||
})
|
||||
let tableDataArr =[]
|
||||
res.data.data.forEach(item => {
|
||||
let obj = {}
|
||||
obj.lineName= item.lineName,
|
||||
obj.sum= item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
// console.log(ele)
|
||||
ele.children.forEach((e) => {
|
||||
console.log(e.dynamicName)
|
||||
obj['' + e.dynamicName + ''] = e.dynamicValue
|
||||
console.log(obj['' + e.dynamicName + '']);
|
||||
})
|
||||
})
|
||||
tableDataArr.push(obj)
|
||||
});
|
||||
this.tableData = tableDataArr
|
||||
console.log(this.tableData)
|
||||
console.log(arr)
|
||||
this.tableProps = arr
|
||||
let xData = []
|
||||
|
||||
res.data.nameData.slice(1).forEach(item => {
|
||||
xData.push(item.name)
|
||||
// arr[2].children.push(props)
|
||||
})
|
||||
let yAllData = []
|
||||
let lineName = []
|
||||
res.data.data.forEach(item => {
|
||||
let yData = []
|
||||
lineName.push(item.lineName)
|
||||
// let obj = {}
|
||||
// obj.lineName = item.lineName,
|
||||
// obj.sum = item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
// console.log(ele)
|
||||
ele.children.forEach((e) => {
|
||||
// let yData = []
|
||||
yData.push(e.dynamicValue)
|
||||
})
|
||||
})
|
||||
yAllData.push(yData)
|
||||
});
|
||||
console.log(lineName)
|
||||
// res.data.data[0].data[0].children.forEach((item, index) => {
|
||||
// // console.log(item)
|
||||
// yData.push(item.dynamicValue)
|
||||
// // let data = 'data' + Number(index+1)
|
||||
// // obj['' + item.dynamicName + ''] = item.dynamicValue
|
||||
// })
|
||||
// console.log(this.yData)
|
||||
this.$refs.lineChart.initChart(xData, yAllData, lineName)
|
||||
// this.total = response.data.total;
|
||||
// this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
// console.log(val)
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productionLineId = val.productionLineId;
|
||||
this.listQuery.productId = val.productId;
|
||||
this.listQuery.createTime = val.createTime;
|
||||
this.getDataList();
|
||||
case 'search':
|
||||
this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined
|
||||
// this.listQuery.productId = val.productId;
|
||||
this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
|
||||
// this.listQuery.pageNo = 1;
|
||||
// this.listQuery.pageSize = 10;
|
||||
this.getData()
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
/*
|
||||
* @Date: 2020-12-29 16:49:28
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-08-01 11:10:04
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-09-12 11:13:34
|
||||
* @FilePath: \basic-admin\src\filters\basicData\index.js
|
||||
* @Description:
|
||||
*/
|
||||
@ -13,6 +13,11 @@ const table = {
|
||||
2: '停止',
|
||||
3: '未知',
|
||||
},
|
||||
reportType: {
|
||||
1: '日',
|
||||
2: '周',
|
||||
3: '月'
|
||||
}
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-09-11 15:52:20
|
||||
* @LastEditTime: 2023-09-16 17:34:17
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -32,100 +32,104 @@
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<!-- <div>
|
||||
<el-button @click="down()">1111</el-button>
|
||||
<el-table :data="tableData1" stripe style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180" />
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="address" label="地址" />
|
||||
</el-table>
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
<!-- <div v-show="false" ref="pdf">
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="selectedList"
|
||||
/>
|
||||
</div> -->
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="reportType" label="报表类型" />
|
||||
<el-table-column prop="reportStartTime" label="统计开始时间" />
|
||||
<el-table-column prop="reportEndTime" label="统计结束时间" />
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import {
|
||||
getFactoryPage,
|
||||
exportFactoryExcel,
|
||||
} from '@/api/core/base/factory';
|
||||
import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
|
||||
// import jsPDF from 'jspdf'
|
||||
// import html2canvas from 'html2canvas'
|
||||
// import codeFilter from '../../mixins/code-filter'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
|
||||
const tableData1 = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'fom',
|
||||
address: 'No'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'fom',
|
||||
address: '189'
|
||||
},
|
||||
{
|
||||
date: '2016-0225-03',
|
||||
name: 'fom',
|
||||
address: 'Ndddo'
|
||||
},
|
||||
{
|
||||
date: '2016-04445-02',
|
||||
name: 'fom',
|
||||
address: '18edd9'
|
||||
}
|
||||
]
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
prop: 'reportType',
|
||||
label: '报表类型',
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
prop: 'reportStartTime',
|
||||
label: '统计开始时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'createTime3',
|
||||
prop: 'reportEndTime',
|
||||
label: '统计结束时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
prop: 'proLineName',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
prop: 'inputNum',
|
||||
label: '投入数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark44',
|
||||
prop: 'outputNum',
|
||||
label: '产出数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark23',
|
||||
prop: 'outputArea',
|
||||
label: '产出面积/㎡',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark145',
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark22',
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/㎡',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark1',
|
||||
prop: 'lossRatio',
|
||||
label: '损耗比例%',
|
||||
align: 'center',
|
||||
}
|
||||
@ -135,16 +139,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getFactoryPage,
|
||||
exportURL: exportFactoryExcel,
|
||||
getDataListURL: getPdlAutoReport
|
||||
},
|
||||
urlOptions: {
|
||||
getDataListURL: '',
|
||||
deleteURL: '',
|
||||
statusUrl: '',
|
||||
exportURL: ''
|
||||
},
|
||||
tableData1,
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
@ -152,10 +148,12 @@ export default {
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [],
|
||||
selectedList: [],
|
||||
// tableBtn: [
|
||||
// this.$auth.hasPermi(`base:factory:update`)
|
||||
// ? {
|
||||
@ -181,8 +179,21 @@ export default {
|
||||
{
|
||||
type: 'select',
|
||||
label: '报表类型',
|
||||
selectOptions: [],
|
||||
param: 'name',
|
||||
selectOptions: [
|
||||
{
|
||||
id: 1,
|
||||
name: '日'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '周'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '月'
|
||||
}
|
||||
],
|
||||
param: 'reportType',
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
@ -216,16 +227,63 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
// imgDownload() {
|
||||
// let that = this
|
||||
// let img = this.$refs['pdf']
|
||||
// // 图片高度
|
||||
// var w = parseInt(window.getComputedStyle(img).width)
|
||||
// // 图片宽度
|
||||
// var h = parseInt(window.getComputedStyle(img).height)
|
||||
// // 滚轮置顶，避免留白
|
||||
// window.pageYOffset = 0
|
||||
// html2canvas(img).then(function(canvas) {
|
||||
|
||||
// })
|
||||
// },
|
||||
pdf() {
|
||||
// console.log('打印看看[df]')
|
||||
// const pdf = new jsPDF()
|
||||
// const content = this.$refs.pdf.innerHTML
|
||||
// console.log('打印看看', content)
|
||||
// pdf.text(content, 15, 15)
|
||||
// // pdf.text('Hello world!', 10, 10)
|
||||
// pdf.save('test.pdf')
|
||||
// console.log('打印看看', pdf)
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.focus()
|
||||
// printWindow.document.writeln(this.$refs.pdf.innerHTML)
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组
|
||||
const selectedData = this.tableData1.slice(0, 2)
|
||||
console.log('你好', selectedData, this.tableData1)
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{date: '日期', name: '姓名', address: '地址'},
|
||||
...selectedData
|
||||
{reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
@ -233,7 +291,7 @@ export default {
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), 'hihi.xlsx')
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
@ -241,14 +299,22 @@ export default {
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
console.log('勾选数据', this.selectedList)
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.name = val.name;
|
||||
this.listQuery.code = val.code;
|
||||
this.listQuery.lineId = val.line ? val.line : undefined;
|
||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
|
||||
this.listQuery.reportStartTime = [new Date(val.timeVal[0]).getTime()];
|
||||
this.listQuery.reportEndTime = [new Date(val.timeVal[1]).getTime()];
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@ -262,7 +328,10 @@ export default {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list;
|
||||
this.tableData = response.data.list.map(item => {
|
||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||
return item
|
||||
});
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
@ -279,17 +348,15 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.urlOptions.exportURL(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '工厂.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// this.$modal.confirm('是否确认导出所选数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// // this.down()
|
||||
// this.pdf()
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-08-31 15:15:31
|
||||
* @LastEditTime: 2023-09-20 10:55:23
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -33,50 +33,65 @@
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossNum" label="损耗数量/片" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getFactoryPage,
|
||||
exportFactoryExcel,
|
||||
} from '@/api/core/base/factory';
|
||||
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
prop: 'proLineName',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: '投入数量/片',
|
||||
align: 'center',
|
||||
prop: 'inputNum',
|
||||
label: '投入数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark44',
|
||||
label: '产出数量/片',
|
||||
align: 'center',
|
||||
prop: 'outputNum',
|
||||
label: '产出数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark23',
|
||||
label: '产出面积/㎡',
|
||||
align: 'center',
|
||||
prop: 'outputArea',
|
||||
label: '产出面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'remark145',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark22',
|
||||
label: '损耗面积/㎡',
|
||||
align: 'center',
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'remark1',
|
||||
label: '损耗比例%',
|
||||
align: 'center',
|
||||
prop: 'lossRate',
|
||||
label: '损耗比例%'
|
||||
}
|
||||
];
|
||||
|
||||
@ -84,28 +99,24 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getFactoryPage,
|
||||
exportURL: exportFactoryExcel,
|
||||
getDataListURL: getPdlDataSearch
|
||||
},
|
||||
urlOptions: {
|
||||
getDataListURL: '',
|
||||
deleteURL: '',
|
||||
statusUrl: '',
|
||||
exportURL: ''
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
proLineId: undefined
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [],
|
||||
tableData: [],
|
||||
selectedList: [],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@ -145,8 +156,62 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
if (this.$route.params.startTime) {
|
||||
this.formConfig[1].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
}
|
||||
// const time = new Date()
|
||||
// this.formConfig[1].defaultSelect = [time, time]
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
pdf() {
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计数据查询.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
@ -156,8 +221,9 @@ export default {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.name = val.name;
|
||||
this.listQuery.code = val.code;
|
||||
this.listQuery.proLineId = val.line ? val.line : undefined;
|
||||
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
|
||||
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@ -171,7 +237,7 @@ export default {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list;
|
||||
this.tableData = response.data;
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
@ -188,17 +254,21 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.urlOptions.exportURL(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '工厂.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
// let params = { ...this.queryParams };
|
||||
// params.pageNo = undefined;
|
||||
// params.pageSize = undefined;
|
||||
// this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// return this.urlOptions.exportURL(params);
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工厂.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
207
src/views/core/monitoring/data24/index.vue
Normal file
207
src/views/core/monitoring/data24/index.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-08-04 14:44:58
|
||||
description: 设备24小时生产记录
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<SearchBar
|
||||
:formConfigs="[{ label: '设备近24小时产线生产数据', type: 'title' }]"
|
||||
ref="search-bar" />
|
||||
<el-skeleton v-if="initing" :rows="6" animated />
|
||||
<base-table
|
||||
v-else
|
||||
:span-method="mergeColumnHandler"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
||||
|
||||
export default {
|
||||
name: 'productionLineData24',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPdlDataOneDay
|
||||
},
|
||||
initing: false,
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
list: [],
|
||||
arr: [],
|
||||
spanArr: [],
|
||||
timeList: [],
|
||||
tableData: [],
|
||||
tableProps: [],
|
||||
spanInfo: {},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
||||
buildProps(plData) {
|
||||
plData.forEach(item => {
|
||||
this.timeList.push(item.name)
|
||||
})
|
||||
const timeArray = Array.from(new Set(this.timeList))
|
||||
console.log('nihc', timeArray)
|
||||
for (const times of timeArray) {
|
||||
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
|
||||
const subprop = {
|
||||
label: times,
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: times + '_in', label: '投入数量', align: 'center' },
|
||||
{ prop: times + '_out', label: '产出数量', align: 'center' },
|
||||
{ prop: times + '_junk', label: '报废数量', align: 'center' },
|
||||
{ prop: times + '_area', label: '产出面积', align: 'center' }
|
||||
]
|
||||
}
|
||||
this.arr.push(subprop)
|
||||
}
|
||||
}
|
||||
this.tableProps = this.arr
|
||||
},
|
||||
setRowSpan(arr) {
|
||||
let count = 0
|
||||
arr.forEach((item, index) => {
|
||||
if(index === 0) {
|
||||
this.spanArr.push(1)
|
||||
} else {
|
||||
if (item === arr[index - 1]) {
|
||||
this.spanArr[count] += 1
|
||||
this.spanArr.push(0)
|
||||
} else {
|
||||
count = index
|
||||
this.spanArr.push(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('打印数组长度', this.spanArr)
|
||||
},
|
||||
|
||||
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||
convertList(list) {
|
||||
let sectionArr= []
|
||||
console.log('打印看下数据list', list)
|
||||
list.forEach((ele, index) => {
|
||||
let tempData = []
|
||||
ele.data.forEach(item => {
|
||||
item.children.forEach(params => {
|
||||
if (params.dynamicName === '投入数量') {
|
||||
tempData[item.dynamicName + '_in'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '产出数量') {
|
||||
tempData[item.dynamicName + '_out'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '报废数量') {
|
||||
tempData[item.dynamicName + '_junk'] = params.dynamicValue
|
||||
} else {
|
||||
tempData[item.dynamicName + '_area'] = params.dynamicValue
|
||||
}
|
||||
})
|
||||
})
|
||||
tempData['proLineName'] = ele.proLineName
|
||||
tempData['spec'] = ele.spec
|
||||
this.tableData.push(tempData)
|
||||
console.log('看看数据', this.tableData, tempData)
|
||||
const { sectionName } = tempData
|
||||
sectionArr.push(sectionName)
|
||||
})
|
||||
this.setRowSpan(sectionArr)
|
||||
console.log('工段名称列表', sectionArr)
|
||||
},
|
||||
|
||||
buildData(data) {
|
||||
this.convertList(data);
|
||||
},
|
||||
|
||||
/** 合并table列的规则 */
|
||||
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex == 0) {
|
||||
if (this.spanArr[rowIndex]) {
|
||||
return [
|
||||
this.spanArr[rowIndex], // row span
|
||||
1, // col span
|
||||
];
|
||||
} else {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async getList() {
|
||||
this.urlOptions.getDataListURL().then(res => {
|
||||
console.log('看看数据', res)
|
||||
this.arr = [
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '生产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '产品规格',
|
||||
align: 'center',
|
||||
}
|
||||
]
|
||||
this.buildProps(res.data.nameData);
|
||||
this.buildData(res.data.data);
|
||||
})
|
||||
|
||||
// // const data = this.res.data;
|
||||
// // console.log('recent-24', data);
|
||||
|
||||
// this.initing = true;
|
||||
|
||||
// this.queryParams.pageSize = this.list.length;
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.initing = false;
|
||||
// }, 1000);
|
||||
},
|
||||
|
||||
handleEmitFun(payload) {
|
||||
console.log('payload', payload);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 10px;
|
||||
background: #f6f8faf6;
|
||||
border: 1px solid #e1e4e8;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
position: fixed;
|
||||
// top: 15vh;
|
||||
top: 10vh;
|
||||
left: 0;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
z-index: 100000;
|
||||
box-shadow: 0 0 32px 12px #0001;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-08-31 15:31:40
|
||||
* @LastEditTime: 2023-09-16 17:41:53
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -9,6 +9,7 @@
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
:isFold="true"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
@ -33,73 +34,88 @@
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="reportType" label="产线类型" />
|
||||
<el-table-column prop="reportStartTime" label="统计开始时间" />
|
||||
<el-table-column prop="reportEndTime" label="统计结束时间" />
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="sectionName" label="工段名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossNum" label="损耗数量/片" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import {
|
||||
getFactoryPage,
|
||||
exportFactoryExcel,
|
||||
} from '@/api/core/base/factory';
|
||||
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '产线类型',
|
||||
align: 'center',
|
||||
prop: 'reportType',
|
||||
label: '产线类型'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
prop: 'reportStartTime',
|
||||
label: '统计开始时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'createTime3',
|
||||
prop: 'reportEndTime',
|
||||
label: '统计结束时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
prop: 'lineName',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'name1',
|
||||
label: '工段名称',
|
||||
align: 'center',
|
||||
prop: 'sectionName',
|
||||
label: '工段名称'
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: '投入数量/片',
|
||||
align: 'center',
|
||||
prop: 'inputNum',
|
||||
label: '投入数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark44',
|
||||
label: '产出数量/片',
|
||||
align: 'center',
|
||||
prop: 'outputNum',
|
||||
label: '产出数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark23',
|
||||
label: '产出面积/㎡',
|
||||
align: 'center',
|
||||
prop: 'outputArea',
|
||||
label: '产出面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'remark145',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'remark22',
|
||||
label: '损耗面积/㎡',
|
||||
align: 'center',
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'remark1',
|
||||
label: '损耗比例%',
|
||||
align: 'center',
|
||||
prop: 'lossRatio',
|
||||
label: '损耗比例%'
|
||||
}
|
||||
];
|
||||
|
||||
@ -107,15 +123,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getFactoryPage,
|
||||
exportURL: exportFactoryExcel,
|
||||
getDataListURL: getSectionAutoReport
|
||||
},
|
||||
urlOptions: {
|
||||
getDataListURL: '',
|
||||
deleteURL: '',
|
||||
statusUrl: '',
|
||||
exportURL: ''
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
@ -124,6 +133,8 @@ export default {
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
selectedList: [],
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
@ -145,8 +156,21 @@ export default {
|
||||
{
|
||||
type: 'select',
|
||||
label: '报表类型',
|
||||
selectOptions: [],
|
||||
param: 'name',
|
||||
selectOptions: [
|
||||
{
|
||||
id: 1,
|
||||
name: '日'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '周'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '月'
|
||||
}
|
||||
],
|
||||
param: 'reportType',
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
@ -158,8 +182,7 @@ export default {
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
defaultSelect: [],
|
||||
width: 350
|
||||
defaultSelect: []
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -180,8 +203,61 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
pdf() {
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{reportType: '产线类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', lineName: '产线名称', sectionName: '工段名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '工段统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
// 获取工段list
|
||||
getWorkshopSectionList().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || []
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
@ -191,8 +267,11 @@ export default {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.name = val.name;
|
||||
this.listQuery.code = val.code;
|
||||
this.listQuery.lineId = val.line ? val.line : undefined;
|
||||
this.listQuery.sectionId = val.section ? val.section : undefined;
|
||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
|
||||
this.listQuery.reportStartTime = [new Date(val.timeVal[0]).getTime()];
|
||||
this.listQuery.reportEndTime = [new Date(val.timeVal[1]).getTime()];
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@ -206,7 +285,10 @@ export default {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list;
|
||||
this.tableData = response.data.list.map(item => {
|
||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||
return item
|
||||
});
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
@ -223,17 +305,21 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.urlOptions.exportURL(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '工厂.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
// let params = { ...this.queryParams };
|
||||
// params.pageNo = undefined;
|
||||
// params.pageSize = undefined;
|
||||
// this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// return this.urlOptions.exportURL(params);
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工厂.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -7,78 +7,82 @@
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData" />
|
||||
<pagination
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPage from '../../mixins/basic-page';
|
||||
// import basicPage from '../../mixins/basic-page';
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog';
|
||||
import { getSectionDataSearch } from '@/api/core/monitoring';
|
||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
prop: 'proLineName',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'sectionName',
|
||||
label: '工段名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'inputNum',
|
||||
label: '进片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'outputNum',
|
||||
label: '出片数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/m²',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '',
|
||||
prop: 'lossRate',
|
||||
label: '损耗比例/%',
|
||||
align: 'center',
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
// mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getLineBindProductLogPage,
|
||||
getDataListURL: getSectionDataSearch,
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
proLineId:undefined,
|
||||
sectionId: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
},
|
||||
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'productionLineId',
|
||||
param: 'proLineId',
|
||||
defaultSelect: '',
|
||||
filterable: true,
|
||||
},
|
||||
@ -86,7 +90,7 @@ export default {
|
||||
type: 'select',
|
||||
label: '工段',
|
||||
selectOptions: [],
|
||||
param: 'productId',
|
||||
param: 'sectionId',
|
||||
defaultSelect: '',
|
||||
filterable: true,
|
||||
},
|
||||
@ -99,7 +103,7 @@ export default {
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'createTime',
|
||||
param: 'timeSlot',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -118,7 +122,8 @@ export default {
|
||||
components: {
|
||||
},
|
||||
created() {
|
||||
this.getArr();
|
||||
this.getArr();
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
getArr() {
|
||||
@ -131,16 +136,30 @@ export default {
|
||||
this.formConfig[index].selectOptions = response.data.list;
|
||||
});
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productionLineId = val.productionLineId;
|
||||
this.listQuery.productId = val.productId;
|
||||
this.listQuery.createTime = val.createTime;
|
||||
this.getDataList();
|
||||
},
|
||||
getDataList() {
|
||||
// this.listQuery.proLineId = '1672847052717821953';
|
||||
// this.listQuery.startTime = '1690626657000'
|
||||
// this.listQuery.endTime = '1693564257000'
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||
this.tableData = res.data
|
||||
// this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
console.log(val.timeSlot);
|
||||
|
||||
// this.listQuery.pageNo = 1;
|
||||
// this.listQuery.pageSize = 10;
|
||||
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined
|
||||
this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
|
||||
this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined
|
||||
this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
|
||||
@ -1,143 +1,160 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
|
||||
<el-option
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<div v-show="queryParams.timeDim === '1'">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
popper-class="noneMinute"
|
||||
@change="timeSelect"
|
||||
:clearable="false"
|
||||
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;" size="small">
|
||||
<el-option
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<div v-show="queryParams.timeDim === '1'">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
popper-class="noneMinute"
|
||||
@change="timeSelect"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '2'">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '3'">
|
||||
<el-date-picker
|
||||
v-model="weekValue1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
style='width:170px;'
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="startWeek"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
v-model="weekValue2"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
:picker-options="pickerOptionsWeek"
|
||||
style='width:170px;'
|
||||
@change="endWeek"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '4'">
|
||||
<el-date-picker
|
||||
v-model="monthValue"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:clearable="false"
|
||||
:picker-options="pickerOptions"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '5'">
|
||||
<el-date-picker
|
||||
style='width:170px;'
|
||||
v-model="yearValue1"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="startYear"
|
||||
size="small"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '2'">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
:clearable="false"
|
||||
@change="timeSelect"
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
style='width:170px;'
|
||||
v-model="yearValue2"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="endYear"
|
||||
size="small"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '3'">
|
||||
<el-date-picker
|
||||
v-model="weekValue1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
style='width:150px;'
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="startWeek"
|
||||
:clearable="false"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
v-model="weekValue2"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
:picker-options="pickerOptionsWeek"
|
||||
style='width:150px;'
|
||||
@change="endWeek"
|
||||
:clearable="false"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '4'">
|
||||
<el-date-picker
|
||||
v-model="monthValue"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:clearable="false"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '5'">
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue1"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="startYear"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue2"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="endYear"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象维度">
|
||||
<el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象选择">
|
||||
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
|
||||
<el-option
|
||||
v-for="item in objectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
<span style="float: left">{{ item.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象维度">
|
||||
<el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs" size="small">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象选择">
|
||||
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;" size="small">
|
||||
<el-option
|
||||
v-for="item in objectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
<span style="float: left">{{ item.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-if="isFold" class="foldClass" @click='switchMode'>
|
||||
{{ isExpand ? '收起' : '展开' }}
|
||||
<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
|
||||
@ -147,8 +164,15 @@ import { getEquipmentAll } from "@/api/base/equipment"
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: 'searchArea',
|
||||
props: {
|
||||
isFold: {// 多行模式（默认否）
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpand: false, // 展开收起
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
energyTypeId: null,
|
||||
@ -388,6 +412,15 @@ export default {
|
||||
let newData = year+'-12-31 23:59:59'
|
||||
let value = new Date(newData).getTime()
|
||||
return value
|
||||
},
|
||||
switchMode() {// 展开和收起切换
|
||||
this.isExpand = !this.isExpand
|
||||
const element = this.$refs.searchBarRef
|
||||
if (this.isExpand) {
|
||||
element.classList.remove('divHeight')
|
||||
} else {
|
||||
element.classList.add('divHeight')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -400,4 +433,34 @@ export default {
|
||||
.noneMinute .el-scrollbar:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" id="contrastAnalysisBox">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area @submit="getList"/>
|
||||
<search-area :isFold="isFold" @submit="getList"/>
|
||||
<el-tabs v-model="activeName" @tab-click="switchChart">
|
||||
<el-tab-pane label="柱状图" name="bar">
|
||||
<bar-chart ref="analysisBarChart" :chartData="chartData" />
|
||||
@ -23,11 +23,19 @@ export default {
|
||||
components: { SearchArea, BarChart, LineChart },
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
activeName: 'bar',
|
||||
chartData: []
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
|
||||
// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
|
||||
})
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
|
||||
},
|
||||
methods: {
|
||||
getList(params) {
|
||||
getCompare({ ...params }).then((res) => {
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="对象选择">
|
||||
<el-cascader
|
||||
v-model="objArr"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
size="small"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
|
||||
<el-option
|
||||
v-for="item in timeType"
|
||||
:key="item.id"
|
||||
@ -27,6 +29,7 @@
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
@ -38,6 +41,7 @@
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
@ -48,18 +52,19 @@
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择日">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button type="primary" size="small" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="separateStyle"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="exportData" plain>导出</el-button>
|
||||
<el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -178,4 +183,17 @@ export default {
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,122 +1,141 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
|
||||
<el-option
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象选择">
|
||||
<el-cascader
|
||||
v-model="objArr"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<div v-show="queryParams.timeDim === '1'">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
popper-class="noneMinute"
|
||||
@change="timeSelect"
|
||||
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;" size="small">
|
||||
<el-option
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象选择">
|
||||
<el-cascader
|
||||
v-model="objArr"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
size="small"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
size="small">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<div v-show="queryParams.timeDim === '1'">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
popper-class="noneMinute"
|
||||
@change="timeSelect"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '2'">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '3'">
|
||||
<el-date-picker
|
||||
v-model="weekValue1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
style='width:170px;'
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="startWeek"
|
||||
size="small"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
v-model="weekValue2"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
:picker-options="pickerOptionsWeek"
|
||||
style='width:170px;'
|
||||
@change="endWeek"
|
||||
size="small"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '4'">
|
||||
<el-date-picker
|
||||
v-model="monthValue"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
size="small"
|
||||
style='width:350px;'
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '5'">
|
||||
<el-date-picker
|
||||
style='width:170px;'
|
||||
v-model="yearValue1"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
size="small"
|
||||
@change="startYear"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '2'">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
style='width:170px;'
|
||||
v-model="yearValue2"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
size="small"
|
||||
@change="endYear"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '3'">
|
||||
<el-date-picker
|
||||
v-model="weekValue1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
style='width:150px;'
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="startWeek"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
v-model="weekValue2"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
:picker-options="pickerOptionsWeek"
|
||||
style='width:150px;'
|
||||
@change="endWeek"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '4'">
|
||||
<el-date-picker
|
||||
v-model="monthValue"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '5'">
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue1"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="startYear"
|
||||
>
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue2"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="endYear"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-if="isFold" class="foldClass" @click='switchMode'>
|
||||
{{ isExpand ? '收起' : '展开' }}
|
||||
<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
|
||||
@ -124,8 +143,15 @@ import { getTree } from '@/api/base/factory'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: 'searchArea',
|
||||
props: {
|
||||
isFold: {// 多行模式（默认否）
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpand: false, // 展开收起
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
energyTypeId: null,
|
||||
@ -162,6 +188,7 @@ export default {
|
||||
this.getTypeList()
|
||||
this.getObjTree()
|
||||
this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
|
||||
this.timeValue = [moment().startOf('day'), moment().endOf('day')-59*61*1000]
|
||||
},
|
||||
methods: {
|
||||
getTypeList() {
|
||||
@ -266,7 +293,7 @@ export default {
|
||||
this.$modal.msgError('请选择能源类型')
|
||||
return false
|
||||
}
|
||||
if (!this.objArr.length === 0) {
|
||||
if (this.objArr.length === 0) {
|
||||
this.$modal.msgError('请选择对象')
|
||||
return false
|
||||
} else {
|
||||
@ -345,6 +372,15 @@ export default {
|
||||
let newData = year+'-12-31 23:59:59'
|
||||
let value = new Date(newData).getTime()
|
||||
return value
|
||||
},
|
||||
switchMode() {// 展开和收起切换
|
||||
this.isExpand = !this.isExpand
|
||||
const element = this.$refs.searchBarRef
|
||||
if (this.isExpand) {
|
||||
element.classList.remove('divHeight')
|
||||
} else {
|
||||
element.classList.add('divHeight')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -361,4 +397,34 @@ export default {
|
||||
.noneMinute .el-scrollbar:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" id="trendAnalysisBox">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area @submit="getList"/>
|
||||
<search-area :isFold="isFold" @submit="getList"/>
|
||||
<el-tabs v-model="activeName" @tab-click="switchChart">
|
||||
<el-tab-pane label="柱状图" name="bar">
|
||||
<bar-chart ref="analysisBarChart" :chartData="chartData" />
|
||||
@ -23,11 +23,18 @@ export default {
|
||||
components: { SearchArea, BarChart, LineChart },
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
activeName: 'bar',
|
||||
chartData: []
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
|
||||
})
|
||||
this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
|
||||
},
|
||||
methods: {
|
||||
getList(params) {
|
||||
getEnergyTrend({ ...params }).then((res) => {
|
||||
@ -37,16 +44,6 @@ export default {
|
||||
this.chartData = []
|
||||
}
|
||||
})
|
||||
// getEnergyTrend({
|
||||
// energyTypeId: "1681183397517406210",
|
||||
// objId: "1679031282510532610",
|
||||
// timeDim: "2",
|
||||
// startTime: "1690732800000",
|
||||
// endTime: "1690992000000"
|
||||
// }).then((res) => {
|
||||
// console.log(res)
|
||||
// this.chartData = res.data
|
||||
// })
|
||||
},
|
||||
switchChart() {
|
||||
if (this.activeName === 'bar') {
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="对象选择">
|
||||
<el-cascader
|
||||
v-model="objArr"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
size="small"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
|
||||
<el-option
|
||||
v-for="item in timeType"
|
||||
:key="item.id"
|
||||
@ -27,6 +29,7 @@
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
@ -37,18 +40,19 @@
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button type="primary" size="small" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="separateStyle"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="exportData" plain>导出</el-button>
|
||||
<el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -153,4 +157,17 @@ export default {
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
type: 'input',
|
||||
label: '标识名',
|
||||
placeholder: '标识名',
|
||||
param: 'name'
|
||||
param: 'cnName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -149,7 +149,7 @@ export default {
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
name: null
|
||||
cnName: null
|
||||
},
|
||||
paramVisible: false,
|
||||
energyTypeList: [],
|
||||
@ -173,7 +173,7 @@ export default {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.queryParams.pageNo = 1;
|
||||
this.queryParams.name = val.name
|
||||
this.queryParams.cnName = val.cnName
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:selectWidth="55"
|
||||
:max-height="tableH"
|
||||
@selection-change="selectChange"
|
||||
/>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
@ -25,9 +27,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime";
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType";
|
||||
import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime"
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
|
||||
// import { publicFormatter } from '@/utils/dict'
|
||||
import FileSaver from "file-saver"
|
||||
import * as XLSX from 'xlsx/xlsx.mjs'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'objName',
|
||||
@ -113,7 +117,8 @@ export default {
|
||||
startTime: null,
|
||||
endTime: null
|
||||
},
|
||||
energyTypeList: []
|
||||
energyTypeList: [],
|
||||
exportList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -134,12 +139,13 @@ export default {
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
this.$modal.confirm('是否确认导出').then(() => {
|
||||
return exportEnergyQuantityRealtimeExcel({...this.queryParams});
|
||||
}).then(response => {
|
||||
console.log(response)
|
||||
this.$download.excel(response, '能源抄表.xls');
|
||||
}).catch(() => {})
|
||||
this.exportTable()
|
||||
// this.$modal.confirm('是否确认导出').then(() => {
|
||||
// return exportEnergyQuantityRealtimeExcel({...this.queryParams});
|
||||
// }).then(response => {
|
||||
// console.log(response)
|
||||
// this.$download.excel(response, '能源抄表.xls');
|
||||
// }).catch(() => {})
|
||||
}
|
||||
},
|
||||
/** 查询列表 */
|
||||
@ -147,6 +153,7 @@ export default {
|
||||
getEnergyQuantityRealtimePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list || []
|
||||
this.total = response.data.total;
|
||||
this.exportList = []
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
@ -154,6 +161,48 @@ export default {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
this.energyTypeList = res.data || []
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.exportList = val
|
||||
},
|
||||
// 勾选导出
|
||||
exportTable() {
|
||||
if (this.exportList.length > 0) {
|
||||
let body = this.exportList.map((x) => [
|
||||
x.objName,
|
||||
x.objRemark,
|
||||
x.energyTypeName,
|
||||
x.startValue,
|
||||
x.endValue,
|
||||
x.diffValue,
|
||||
x.amount
|
||||
])
|
||||
let header = []
|
||||
this.tableProps.map((y) => {
|
||||
header.push(y.label)
|
||||
})
|
||||
body.unshift(header)
|
||||
console.log(body)
|
||||
const filename = '能源抄表.xlsx'
|
||||
const ws_name = 'Sheet1'
|
||||
const wb = XLSX.utils.book_new()
|
||||
const ws = XLSX.utils.aoa_to_sheet(body)
|
||||
XLSX.utils.book_append_sheet(wb, ws, ws_name)
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: false,
|
||||
type: 'array'
|
||||
})
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], {
|
||||
type: 'application/octet-stream'
|
||||
}),
|
||||
filename
|
||||
)
|
||||
} else {
|
||||
this.$modal.msgWarning('请勾选需要导出的数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -37,12 +37,12 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-show="form.pricingMethod === 2">
|
||||
<el-form-item label="单价(元)" prop="singlePrice">
|
||||
<el-input v-model="form.singlePrice"></el-input>
|
||||
<el-form-item label="单价(元)" prop="pricingMethod">
|
||||
<el-input-number v-model="form.singlePrice" :precision="2" :min="0" :max="999999999" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-show="form.pricingMethod === 0">
|
||||
<el-form-item label="时间段">
|
||||
<el-form-item label="时间段" prop="pricingMethod">
|
||||
<base-table
|
||||
:key='timeKye'
|
||||
:table-props="tableProps1"
|
||||
@ -63,7 +63,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-show="form.pricingMethod === 1">
|
||||
<el-form-item label="使用量">
|
||||
<el-form-item label="使用量" prop="pricingMethod">
|
||||
<base-table
|
||||
:key='usedKye'
|
||||
:table-props="tableProps2"
|
||||
@ -140,12 +140,13 @@ export default {
|
||||
name: '',
|
||||
code: '',
|
||||
nuit: '',
|
||||
pricingMethod: 1,
|
||||
pricingMethod: 2,
|
||||
leaderName: ''
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
name: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }]
|
||||
name: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }],
|
||||
pricingMethod: [{ required: true, message: '计价方式不能为空', trigger: 'change' }]
|
||||
},
|
||||
timeKye: 0,
|
||||
usedKye: 0,
|
||||
@ -275,7 +276,7 @@ export default {
|
||||
break;
|
||||
default:// 固定单价
|
||||
if (!this.form.singlePrice) {
|
||||
this.$modal.msgError('单价有误请检查1，请检查')
|
||||
this.$modal.msgError('单价有误请检查，请检查')
|
||||
return false
|
||||
}
|
||||
}
|
||||
@ -321,6 +322,7 @@ export default {
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields()
|
||||
this.form.singlePrice = 0
|
||||
this.isEdit = false
|
||||
this.timeKye = 0
|
||||
this.usedKye = 0
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
|
||||
<el-form-item label="监控对象" prop="objectId">
|
||||
<el-cascader
|
||||
style='width: 100%;'
|
||||
@ -11,7 +11,7 @@
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型" prop="energyTypeId">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
|
||||
<el-option
|
||||
v-for="item in this.energyTypeList"
|
||||
:key="item.id"
|
||||
@ -26,7 +26,7 @@
|
||||
<el-option label="详细" :value= "2" ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
|
||||
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
|
||||
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
|
||||
<el-option
|
||||
v-for="item in detailList"
|
||||
@ -47,7 +47,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量阈值" prop="limitValue">
|
||||
<el-input v-model="form.limitValue"></el-input>
|
||||
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -128,7 +128,15 @@ export default {
|
||||
console.log(this.form)
|
||||
this.form.plcParamId = ''
|
||||
if (val === 2) {
|
||||
if (this.form.objectId && this.form.energyTypeId) {
|
||||
this.getDetailList()
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleType() {
|
||||
if (this.form.energyTypeId && this.form.type) {
|
||||
this.getDetailList()
|
||||
this.form.plcParamId = ''
|
||||
}
|
||||
},
|
||||
// 递归处理分类回显问题
|
||||
@ -158,6 +166,10 @@ export default {
|
||||
selectObj(val) {
|
||||
this.form.objectId = val[val.length-1]
|
||||
this.form.objectType = val.length-1
|
||||
if (this.form.energyTypeId && this.form.type) {
|
||||
this.getDetailList()
|
||||
this.form.plcParamId = ''
|
||||
}
|
||||
},
|
||||
selectDetail() {
|
||||
this.$forceUpdate()
|
||||
|
||||
@ -65,7 +65,8 @@ const tableProps = [
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '监控模式'
|
||||
label: '监控模式',
|
||||
filter: (val) => (val != null ? ['合并', '详细'][val-1] : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'plcParamName',
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" id='energyReportBox'>
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
:isFold="isFold"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
@ -72,6 +73,7 @@ export default {
|
||||
name: "EnergyLimit",
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@ -138,10 +140,14 @@ export default {
|
||||
created() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('energyReportBox', 1198)
|
||||
})
|
||||
this.getList()
|
||||
this.getTypeList()
|
||||
},
|
||||
mounted() {
|
||||
this.isFold = this.searchBarWidth('energyReportBox', 1198)
|
||||
},
|
||||
methods: {
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" id='energyReportSearchBox'>
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
:isFold="isFold"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
@ -53,6 +54,7 @@ export default {
|
||||
name: "EnergyReportSearch",
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
@ -114,17 +116,38 @@ export default {
|
||||
energyTypeList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('energyReportSearchBox', 1180)
|
||||
})
|
||||
this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.formConfig[2].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
} else {
|
||||
this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
|
||||
}
|
||||
this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
|
||||
this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
|
||||
this.getList()
|
||||
this.getTypeList()
|
||||
this.isFold = this.searchBarWidth('energyReportSearchBox', 1180)
|
||||
},
|
||||
watch: {
|
||||
$route: 'initData'
|
||||
},
|
||||
methods: {
|
||||
initData(to) {
|
||||
if (to.name === 'EnergyReportSearch') {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.formConfig[2].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
} else {
|
||||
this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
|
||||
}
|
||||
this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
|
||||
this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || []
|
||||
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
{
|
||||
type: 'input',
|
||||
label: '参数名称',
|
||||
placeholder: '方案名称',
|
||||
placeholder: '参数名称',
|
||||
param: 'paramName'
|
||||
},
|
||||
{
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
format='HH:mm'
|
||||
value-format='HH:mm'
|
||||
style="width: 100%;"
|
||||
@change="timeFun"
|
||||
@change="timeFun('start')"
|
||||
>
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
@ -58,7 +58,7 @@
|
||||
format='HH:mm'
|
||||
value-format='HH:mm'
|
||||
style="width: 100%;"
|
||||
@change="timeFun"
|
||||
@change="timeFun('end')"
|
||||
>
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
@ -126,12 +126,19 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
timeFun() {
|
||||
timeFun(val) {
|
||||
if (this.form.startTime && this.form.endTime) {
|
||||
if (this.form.startTime > this.form.endTime) {
|
||||
this.form.daySpan = 1
|
||||
} else {
|
||||
} else if (this.form.startTime < this.form.endTime) {
|
||||
this.form.daySpan = 0
|
||||
} else {
|
||||
if (val === 'start') {
|
||||
this.form.startTime = ''
|
||||
} else {
|
||||
this.form.endTime = ''
|
||||
}
|
||||
this.$modal.msgWarning('班次开始时间和结束时间不能相同')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -116,7 +116,17 @@ export default {
|
||||
: undefined,
|
||||
{
|
||||
type: 'cancel',
|
||||
btnName: '作废'
|
||||
btnName: '作废',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
{
|
||||
type: 'unequal',
|
||||
name: 'status',
|
||||
value: '不可用'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
this.$auth.hasPermi('base:group-classes:delete')
|
||||
? {
|
||||
@ -225,8 +235,9 @@ export default {
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
if (row.status) {
|
||||
let _this = this
|
||||
console.log(row)
|
||||
let _this = this
|
||||
if (row.status === '可用') {// 可用
|
||||
_this.$modal.confirm('删除的班次"' + row.name + '"可能会影响交接班计划，请点取消再次确认！').then(function() {
|
||||
return _this.$modal.confirm('是否确认删除班次名称为"' + row.name + '"的数据项?').then(function() {
|
||||
return deleteGroupClasses(row.id);
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<el-input v-model="form.code" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组人数" prop="num">
|
||||
<el-input v-model="form.num"></el-input>
|
||||
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组组长" prop="leaderName">
|
||||
<el-input v-model="form.leaderName"></el-input>
|
||||
|
||||
@ -1,67 +1,470 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<div class="groupTeamScheduling">
|
||||
<div class="operationArea">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="月份选择">
|
||||
<el-date-picker
|
||||
v-model="queryParams.startDay"
|
||||
v-model="startDay"
|
||||
type="month"
|
||||
placeholder="选择月">
|
||||
placeholder="选择月"
|
||||
size="small"
|
||||
:disabled="showSetting"
|
||||
@change="selectMonth"
|
||||
:clearable="false"
|
||||
style="width: 120px">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">自动排班</el-button>
|
||||
<span class="separateStyle"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">编辑</el-button>
|
||||
<el-button type="primary" size="small" :disabled="showSetting || settingBtnDis" @click="settingMsg">设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
|
||||
<el-button type="primary" size="small" v-show="showSetting && autoScheduling" @click="schedulingBtn">自动排班</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain>班组能源查询</el-button>
|
||||
<span class="separateStyle" v-show="showSetting"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain>班组检测查询</el-button>
|
||||
<el-button type="primary" size="small" v-show="showSetting" @click="confirmSetting">确认</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="请先选择查询的班组" class="rightItem">
|
||||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button>
|
||||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button>
|
||||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 班组上下片查询 -->
|
||||
<group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
|
||||
<!-- 日历区域 -->
|
||||
<div class="calenderArea">
|
||||
<div style="font-size: 24px;font-weight: 500">{{ this.month }} {{ this.year }}</div>
|
||||
<el-calendar v-model="startDay">
|
||||
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
||||
<template
|
||||
slot="dateCell"
|
||||
slot-scope="{date, data}">
|
||||
<div v-if="data.type === 'current-month'">
|
||||
<!-- 日期 -->
|
||||
<div class="dateStyle">
|
||||
{{ Number(data.day.split('-')[2]) }}
|
||||
</div>
|
||||
<!-- 班次班组 -->
|
||||
<!-- class有两个样式，一个是类似class1，还有个是选中红框显示 -->
|
||||
<el-row :gutter="2" :class="'class' + (index+1) + (chooseTip === (item.startDay+item.classesId) ? ' team-active' : '')" v-for="(item, index) in list[Number(data.day.split('-')[2])]" :key='index'>
|
||||
<el-col :span="12">
|
||||
<div class="selectDiv">
|
||||
<!-- 选择班组图标 -->
|
||||
<div class="toggle-icon" v-show="showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true)">
|
||||
<svg-icon icon-class="toggle"/>
|
||||
</div>
|
||||
<!-- 不能选择班组 -->
|
||||
<div class="toggle-icon-hide" v-show="!(showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true))"></div>
|
||||
<el-select v-model="item.teamId" size='small' :disabled="!showSetting || (new Date(data.day).valueOf() > new Date().valueOf() ? false: true)">
|
||||
<el-option
|
||||
v-for="i in teamList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button class="labelClass" @click="chooseTeam(item)">{{ item.classesName }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
|
||||
import GroupUpperLower from "./components/groupUpperLower.vue"
|
||||
import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
|
||||
import { listEnabled } from "@/api/base/groupTeam";
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
name: "GroupTeamScheduling",
|
||||
components: { GroupUpperLower },
|
||||
data() {
|
||||
return {
|
||||
monthList: [
|
||||
{id: ''}
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
upperLowerVisible: false
|
||||
startDay: '',// 查询参数
|
||||
year: '',// 2023
|
||||
month: '',// 九月
|
||||
monthList: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
|
||||
list: {},
|
||||
teamList: [],// 班组下拉
|
||||
showSetting: false,// 设置模式。自动排班，确认，取消按钮显示
|
||||
settingBtnDis: false,
|
||||
jumpDisabled: true,// 操作按钮控制
|
||||
chooseObj: {}, //当前选中的数据，查询按钮用
|
||||
chooseTip: '',// 当前选中数据的唯一值，显示红框
|
||||
autoScheduling: false // 只有在当前日期后的月份才生效
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.startDay = new Date()
|
||||
// 设置按钮是否置灰
|
||||
this.settingBtn()
|
||||
this.getTeamList()
|
||||
this.toggleMonth()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {},
|
||||
toUpperLower() {
|
||||
this.upperLowerVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.upperLowerParam.init()
|
||||
// 切换月份
|
||||
selectMonth() {
|
||||
if (this.startDay) {
|
||||
this.settingBtn() // 设置按钮状态,需在getlist前面
|
||||
this.toggleMonth()
|
||||
this.getList()
|
||||
this.clearChoose()
|
||||
if ( moment(this.startDay).valueOf() > moment().endOf('month').valueOf()) {
|
||||
this.autoScheduling = true
|
||||
} else {
|
||||
this.autoScheduling = false
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取班组列表
|
||||
getTeamList() {
|
||||
listEnabled().then(res => {
|
||||
this.teamList = res.data || []
|
||||
})
|
||||
},
|
||||
// 获取日历数据
|
||||
getList() {
|
||||
let year = moment(this.startDay).format('YYYY')
|
||||
let month = moment(this.startDay).format('M')
|
||||
getPreset({
|
||||
year: year,
|
||||
month: month
|
||||
}).then(res => {
|
||||
let obj = res.data || {}
|
||||
if (obj) {
|
||||
for (let item in obj) {
|
||||
for (let i = 0; i < obj[item].length; i++) {
|
||||
if (!obj[item][i].teamId) {
|
||||
obj[item][i].teamId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.list = obj
|
||||
}).catch(() => {
|
||||
this.list = {}
|
||||
this.settingBtnDis = true // 禁用设置按钮
|
||||
})
|
||||
},
|
||||
// 设置
|
||||
settingMsg() {
|
||||
this.showSetting = !this.showSetting
|
||||
this.clearChoose()
|
||||
},
|
||||
// 取消
|
||||
cancelSetting() {
|
||||
this.showSetting = !this.showSetting
|
||||
this.getList() // 数据还原
|
||||
},
|
||||
// 确认
|
||||
confirmSetting() {
|
||||
let num = 0
|
||||
// 当月数据的话，今天及今天之前的不传
|
||||
if (moment(this.startDay).format('YYYY-MM') === moment().format('YYYY-MM')) {
|
||||
num = Number(moment().format('DD'))
|
||||
} else {
|
||||
num = 0
|
||||
}
|
||||
// 下月数据全部都传
|
||||
// 打平数据
|
||||
let tempArr = Object.values(this.list)
|
||||
let arr = []
|
||||
for (let i = num; i < tempArr.length; i++) {
|
||||
for (let j = 0; j < tempArr[i].length; j++) {
|
||||
arr.push(tempArr[i][j])
|
||||
}
|
||||
}
|
||||
createOrUpdateList(arr).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.showSetting = !this.showSetting
|
||||
this.$modal.msgSuccess("操作成功")
|
||||
this.getList() // 数据更新
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击班次红框选中当前数据
|
||||
chooseTeam(value) {
|
||||
if (this.showSetting) {
|
||||
this.$modal.msgWarning("当前处于设置模式")
|
||||
return false
|
||||
}
|
||||
this.chooseObj = value
|
||||
this.chooseTip = value.startDay + value.classesId // 匹配当前的样式
|
||||
this.jumpDisabled = false //查询按钮不禁用
|
||||
},
|
||||
// 自动排班
|
||||
schedulingBtn() {
|
||||
let tempData = this.list
|
||||
// 次月1号有值前端排班
|
||||
if (this.list[1][0].teamId) {
|
||||
let tempArr = Object.values(this.list)
|
||||
let arr = []
|
||||
let n = 0
|
||||
for (let i = 0; i < tempArr.length; i++) {
|
||||
if (n > 0) {
|
||||
break;
|
||||
}
|
||||
for (let j = 0; j < tempArr[i].length; j++) {
|
||||
if (tempArr[i][j].teamId) {
|
||||
arr.push(tempArr[i][j].teamId)
|
||||
} else {
|
||||
n++
|
||||
}
|
||||
}
|
||||
}
|
||||
let tempNum = 0
|
||||
for (let k = 0; k < tempArr.length; k++) {
|
||||
for (let v = 0; v < tempArr[k].length; v++) {
|
||||
let t = tempNum % arr.length
|
||||
if (arr.length === 1) {
|
||||
tempData[k+1][v].teamId = arr[0]
|
||||
} else {
|
||||
tempData[k+1][v].teamId = arr[t]
|
||||
}
|
||||
tempNum++
|
||||
}
|
||||
}
|
||||
this.list = []
|
||||
this.list = tempData
|
||||
} else {
|
||||
// 次月1号没有值,接口排班
|
||||
// console.log(moment(this.startDay).format("YYYY-MM-DD"))
|
||||
autoSet({
|
||||
year: this.year,
|
||||
month: moment(this.startDay).month() + 1
|
||||
}).then(res => {
|
||||
this.list = res.data || {}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置按钮如果是上个月或者今天是本月最后一天，设置按钮置灰
|
||||
settingBtn() {
|
||||
let nowMonth = moment().startOf('month').valueOf()
|
||||
let startMonth = moment(this.startDay).valueOf()
|
||||
let nowDate = moment(new Date()).date()
|
||||
let sumDate = moment().daysInMonth()
|
||||
if (nowMonth > startMonth) { // 之前月
|
||||
this.settingBtnDis = true
|
||||
} else {
|
||||
if (nowDate < sumDate) {
|
||||
this.settingBtnDis = false
|
||||
} else {
|
||||
this.settingBtnDis = true
|
||||
}
|
||||
}
|
||||
},
|
||||
// 清除红框选中数据
|
||||
clearChoose() {
|
||||
this.chooseObj = {}
|
||||
this.chooseTip = ""
|
||||
this.jumpDisabled = true
|
||||
},
|
||||
// 切换月份显示
|
||||
toggleMonth() {
|
||||
this.year = moment(this.startDay).format("YYYY")
|
||||
let month = Number(moment(this.startDay).format("MM"))
|
||||
this.month = this.monthList[month - 1]
|
||||
},
|
||||
// 3个跳转按钮
|
||||
toOtherPage(val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.$router.push({
|
||||
// path: '/core/monitoring/production-line-data',
|
||||
name: 'ProductionLineData',
|
||||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||||
})
|
||||
break;
|
||||
case '2': // 能源
|
||||
this.$router.push({
|
||||
name: 'EnergyReportSearch',
|
||||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||||
})
|
||||
break;
|
||||
default:
|
||||
this.$router.push({
|
||||
// path: '/quality/monitoring/quality-statistics',
|
||||
name: 'QualityStatistics',
|
||||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.groupTeamScheduling {
|
||||
background-color: #F2F4F9;
|
||||
.operationArea {
|
||||
padding: 14px 10px 0 16px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.rightItem {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
// 日历
|
||||
.calenderArea {
|
||||
padding: 14px 10px 0 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
.el-calendar__body {
|
||||
padding: 10px 16px 16px 0;
|
||||
}
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar-table > thead {
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
background-color: rgba(242, 244, 249, 1);
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
height: 133px;
|
||||
.prev, .next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.el-calendar-day {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
.dateStyle {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
text-align: right;
|
||||
height: 32px;
|
||||
line-height: 28px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.team-active {// 选中班组
|
||||
border:2px solid red
|
||||
}
|
||||
.class1, .class2, .class3 {
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
.selectDiv {
|
||||
position: relative;
|
||||
.toggle-icon {
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.toggle-icon-hide {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
z-index: 1;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: none;
|
||||
}
|
||||
.el-input--suffix .el-input__inner {
|
||||
padding: 0 4px 0 28px;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
height: 28px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.labelClass {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.class1 {
|
||||
.selectDiv {
|
||||
.toggle-icon, .toggle-icon-hide {
|
||||
background-color: #FACE00;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
color: #E7A200;
|
||||
background-color: #FFEFC0;
|
||||
}
|
||||
}
|
||||
.labelClass {
|
||||
color: #E7A200;
|
||||
background-color: #FFEFC0;
|
||||
}
|
||||
}
|
||||
.class2 {
|
||||
.selectDiv {
|
||||
.toggle-icon, .toggle-icon-hide {
|
||||
background-color: #3984FF;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
color: #2D7BFF;
|
||||
background-color: #BEEAFF;
|
||||
}
|
||||
}
|
||||
.labelClass {
|
||||
color: #2D7BFF;
|
||||
background-color: #BEEAFF;
|
||||
}
|
||||
}
|
||||
.class3 {
|
||||
.selectDiv {
|
||||
.toggle-icon, .toggle-icon-hide {
|
||||
background-color: #37D97F;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
color: #129F51;
|
||||
background-color: #E0FFEE;
|
||||
}
|
||||
}
|
||||
.labelClass {
|
||||
color: #129F51;
|
||||
background-color: #E0FFEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -163,6 +163,7 @@ export default {
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultSelect: [],
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'timerange',
|
||||
pickerOptions: {
|
||||
@ -330,9 +331,34 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
this.queryParams.param = {};
|
||||
this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime);
|
||||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
|
||||
} else {
|
||||
this.searchBarFormConfig[0].defaultSelect = []
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
watch: {
|
||||
$route: 'initData'
|
||||
},
|
||||
methods: {
|
||||
initData(to) {
|
||||
// console.log(to)
|
||||
if (to.name === 'QualityStatistics') {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
this.queryParams.param = {};
|
||||
this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime);
|
||||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
|
||||
} else {
|
||||
this.searchBarFormConfig[0].defaultSelect = []
|
||||
}
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.getSummaryList();
|
||||
this.getDetailedList();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user