Compare commits
40 Commits
bb6bfc5ab6
...
projects/z
| Author | SHA1 | Date | |
|---|---|---|---|
| 10219fd841 | |||
| 74a2a3b8e5 | |||
| c3b4223e5b | |||
| 070e01c2c4 | |||
| 2665b6a0b0 | |||
| a71fb90e6a | |||
| ac85c83cf9 | |||
| c2e987aee4 | |||
| 0e4ed597cd | |||
| 3e7914ac91 | |||
| 9c19a6197a | |||
| 074b35b6a6 | |||
| 9be57ad750 | |||
| f7313c5911 | |||
| a7e81ad8fb | |||
| 32cbf9076f | |||
| 9a411cc663 | |||
|
|
445a88e540 | ||
|
|
2b355aaf8f | ||
| f60a46ed1d | |||
| 2688896660 | |||
|
|
4a67e226e1 | ||
|
|
11ee0d6541 | ||
| 98b3237c9a | |||
|
|
46aaa47e07 | ||
| ca0f62b2eb | |||
| 5534104e87 | |||
| b72fe1bfed | |||
| f4493bde1c | |||
|
|
d682ecc91c | ||
|
|
2b76ef7d23 | ||
| 9ec13b35b8 | |||
| 7acccd3de0 | |||
| e40f45a79a | |||
| 77083a84a1 | |||
| 9f53ea6981 | |||
| 8f634d012c | |||
| 03c573d5b2 | |||
| 348714edaf | |||
| 814fe4605a |
2
.env.dev
2
.env.dev
@@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2023-09-18 10:44:07
|
||||
# @LastEditTime: 2023-10-16 09:22:52
|
||||
# @LastEditors: DY
|
||||
# @Description:
|
||||
###
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.8",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-plugin-hiprint": "^0.0.54-fix",
|
||||
"vue-plugin-hiprint": "0.0.54-fix",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.4.9",
|
||||
"vue-video-player": "^5.0.2",
|
||||
|
||||
BIN
public/static/videos/login.webm
Normal file
BIN
public/static/videos/login.webm
Normal file
Binary file not shown.
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-28 15:30:53
|
||||
* @LastEditTime: 2023-10-13 17:08:33
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建产线目前生产产品表 主要为更新
|
||||
@@ -35,11 +42,11 @@ export function getLineBindProductLog(id) {
|
||||
}
|
||||
|
||||
// 获得产线目前生产产品表 主要为更新分页
|
||||
export function getLineBindProductLogPage(query) {
|
||||
export function getLineBindProductLogPage(data) {
|
||||
return request({
|
||||
url: '/base/line-bind-product-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
15
src/assets/icons/svg/changelogo.svg
Normal file
15
src/assets/icons/svg/changelogo.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<?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>状态切换备份 3</title>
|
||||
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon和插图" transform="translate(-877.000000, -246.000000)">
|
||||
<g id="状态切换备份-3" transform="translate(885.000000, 254.000000) rotate(-270.000000) translate(-885.000000, -254.000000) translate(877.000000, 246.000000)">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<g id="错误" transform="translate(0.000000, 0.000000)" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="6.4293957e-15" width="16" height="16"></rect>
|
||||
<path d="M8,1 C11.85,1 15,4.15 15,8 C15,11.85 11.85,15 8,15 C4.15,15 1,11.85 1,8 C1,4.15 4.15,1 8,1 Z M8,2.19926499 C4.80249503,2.19926499 2.18635461,4.80959575 2.18635461,8 C2.18635461,11.1904043 4.80249503,13.800735 8,13.800735 C11.197505,13.800735 13.8136454,11.1904043 13.8136454,8 C13.8136454,4.80959575 11.197505,2.19926499 8,2.19926499 Z M9.18342887,4.39602962 C9.42080763,4.39602962 9.61773566,4.56921978 9.65474747,4.7961346 L9.66099805,4.87359881 L9.66052938,9.97276858 L10.1621026,9.47231604 C10.3071657,9.32725295 10.5223305,9.29501672 10.6985498,9.37560733 L10.7713701,9.41705393 L10.837514,9.47231606 C11.0033004,9.63810246 11.0217211,9.89545015 10.8927761,10.0815835 L10.837514,10.1477274 L9.52115984,11.4640816 C9.38457467,11.600698 9.17913638,11.6415719 9.00066062,11.5676398 C8.84450229,11.5029526 8.73591407,11.3615296 8.71120699,11.1977853 L8.70585968,11.1264012 L8.70585968,4.87359881 C8.70585968,4.60984463 8.91967469,4.39602962 9.18342887,4.39602962 Z M6.99933939,4.43236016 C7.15549771,4.49704738 7.26408594,4.63847045 7.28879302,4.80221473 L7.29414032,4.87359881 L7.29414032,11.1264012 C7.29414032,11.2530604 7.24382515,11.374532 7.15426356,11.4640936 C7.06470196,11.5536552 6.94323037,11.6039704 6.81657114,11.6039704 C6.68991191,11.6039704 6.56844032,11.5536552 6.47887872,11.4640936 C6.40722945,11.3924443 6.36069788,11.3003726 6.34495123,11.2015604 L6.33900196,11.1264012 L6.33858601,6.02634681 L5.83789738,6.52768395 C5.69283427,6.67274705 5.47766955,6.70498329 5.30145018,6.62439268 L5.22862992,6.58294608 L5.162486,6.52768394 C4.9966996,6.36189754 4.97827889,6.10454984 5.10722387,5.91841648 L5.162486,5.85227257 L6.47884017,4.53591839 C6.61542534,4.39930202 6.82086362,4.35842813 6.99933939,4.43236016 Z" id="形状结合" fill="#0B58FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
14
src/assets/icons/svg/icon-upload.svg
Normal file
14
src/assets/icons/svg/icon-upload.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" 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" opacity="0.65">
|
||||
<g id="上传_Resources/Button" transform="translate(-12.000000, -9.000000)">
|
||||
<g id="上传" transform="translate(12.000000, 9.000000)">
|
||||
<g id="upload" transform="translate(0.875000, 0.875000)" fill="currentColor" fill-rule="nonzero">
|
||||
<path d="M5.80371094,0.138085937 C5.8953125,0.046484375 6.01699219,0 6.13867188,0 C6.26035156,0 6.38066406,0.046484375 6.47363281,0.138085937 L8.60371094,2.26953125 C8.78828125,2.45410156 8.78828125,2.75351562 8.60371094,2.93808594 C8.51484375,3.02695312 8.39589844,3.07617188 8.27011719,3.07617188 C8.14433594,3.07617188 8.02539062,3.02695312 7.93652344,2.93808594 L6.61171875,1.61328125 L6.61171875,9.51289062 C6.61171875,9.77402344 6.39980469,9.9859375 6.13867188,9.9859375 C5.87753906,9.9859375 5.665625,9.77402344 5.665625,9.51289062 L5.665625,1.61328125 L4.34082031,2.93808594 C4.15625,3.12265625 3.85683594,3.12265625 3.67363281,2.93808594 C3.4890625,2.75351562 3.4890625,2.45410156 3.67226563,2.26953125 L5.80371094,0.138085937 Z M11.7769531,7.88046875 C11.5158203,7.88046875 11.3039063,8.09238281 11.3039063,8.35351563 L11.3039063,11.025 C11.3039063,11.1794922 11.178125,11.3066406 11.0222656,11.3066406 L1.22636719,11.3066406 C1.071875,11.3066406 0.944726562,11.1808594 0.944726562,11.025 L0.944726562,8.35214844 C0.944726562,8.09101563 0.7328125,7.87910156 0.471679688,7.87910156 C0.210546875,7.87910156 0,8.09238281 0,8.35214844 L0,11.3996094 C0,11.8685547 0.381445313,12.2486328 0.849023437,12.2486328 L11.4009766,12.2486328 C11.8699219,12.2486328 12.25,11.8671875 12.25,11.3996094 L12.25,8.35214844 C12.25,8.09238281 12.0380859,7.88046875 11.7769531,7.88046875 Z" id="Shape"></path>
|
||||
</g>
|
||||
<rect id="Rectangle-49" x="0" y="0" width="14" height="14"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/default-file-icon.png
Normal file
BIN
src/assets/images/default-file-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/login-bg.png
Normal file
BIN
src/assets/images/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
src/assets/images/tuple.png
Normal file
BIN
src/assets/images/tuple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
BIN
src/assets/logo/cnbm.png
Normal file
BIN
src/assets/logo/cnbm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -1,10 +1,13 @@
|
||||
/* ===== PC DESIGN ===== */
|
||||
$W: 1000;
|
||||
$W: 1080;
|
||||
$H: 1920;
|
||||
$picW: 438;
|
||||
$picH: 560;
|
||||
$formW: 320;
|
||||
// $picW: 438;
|
||||
// $picH: 560;
|
||||
$picW: 1080;
|
||||
$picH: 1118;
|
||||
$formW: 420;
|
||||
$tabW: $formW / 2;
|
||||
// $rowH: 56;
|
||||
$rowH: 56;
|
||||
$buttonH: 50;
|
||||
|
||||
@@ -15,6 +18,7 @@ $containerBgImage: '../assets/images/bg.png';
|
||||
$logoWidth: 417px;
|
||||
$logoHeight: 64px;
|
||||
$logoImage: '../assets/logo/login-logo.png';
|
||||
$cnbmLogo: '../assets/logo/cnbm.png';
|
||||
// container-content
|
||||
$contentWidth: round($W / $H * 100) * 1vw;
|
||||
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
|
||||
@@ -22,7 +26,8 @@ $contentBgColor: #ffffff;
|
||||
// container-content-pic
|
||||
$picWidth: round($picW / $H * 100) * 1vw;
|
||||
$picHeight: inherit;
|
||||
$picImage: '../assets/images/pic.png';
|
||||
// $picImage: '../assets/images/pic.png';
|
||||
$picImage: '../assets/images/login-bg.png';
|
||||
// container-content-field
|
||||
$fieldWidth: $contentWidth - $picWidth;
|
||||
$fieldHeight: inherit;
|
||||
@@ -34,231 +39,310 @@ $buttonHeight: $buttonH * 1px;
|
||||
|
||||
// - - - - - 页面基础设置
|
||||
.container {
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width:100%;max-width:100px; height:auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// 元素
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
min-width: 1080px;
|
||||
min-height: 620px;
|
||||
background-color: $containerBgColor;
|
||||
background-image: url($containerBgImage);
|
||||
background-size: cover;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
.logo {
|
||||
// 元素
|
||||
width: $logoWidth;
|
||||
height: $logoHeight;
|
||||
// background-image: url($logoImage);
|
||||
// background-size: contain;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
margin-left: -$logoWidth/2;
|
||||
}
|
||||
.content {
|
||||
// 元素
|
||||
width: $contentWidth;
|
||||
height: $contentHeight;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20px;
|
||||
// 定位
|
||||
position: relative;
|
||||
.pic {
|
||||
// 元素
|
||||
width: $picWidth;
|
||||
height: $picHeight;
|
||||
background-image: url($picImage);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 20px 0 0 20px;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.field {
|
||||
width: $fieldWidth;
|
||||
height: $fieldHeight;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: $picWidth;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pc-title{ width: 100%; clear: both;}
|
||||
.mobile-title,
|
||||
.mobile-switch {
|
||||
display: none;
|
||||
}
|
||||
.form {
|
||||
box-sizing: border-box;
|
||||
width: $formWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
// 元素
|
||||
width: $tabWidth;
|
||||
height: $rowHeight;
|
||||
padding: 0;
|
||||
// 文字
|
||||
line-height: $rowHeight;
|
||||
color: #666666;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
font-weight: bold;
|
||||
color: #2F53EB;
|
||||
}
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 100%;
|
||||
height: $rowHeight;
|
||||
background: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
line-height: 19px;
|
||||
color: #262626;
|
||||
}
|
||||
.code:deep(.el-input__inner) {
|
||||
padding: 0 24px;
|
||||
// 文字
|
||||
text-align: left;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-input-placeholder) { /* WebKit browsers */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
:deep(.el-input__inner:-moz-placeholder) { /* Mozilla Firefox 4 to 18 */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
:deep(.el-input__inner::-moz-placeholder) { /* Mozilla Firefox 19+ */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
opacity:1;
|
||||
}
|
||||
:deep(.el-input__inner:-ms-input-placeholder) { /* Internet Explorer 10+ */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C !important;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
position: relative;
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $rowHeight;
|
||||
box-sizing: border-box;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
// 文字
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #2F53EB;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid #D9D9D9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form-item__error) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
height: $buttonHeight;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
// 文字
|
||||
line-height: 26px;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.button-active {
|
||||
background: #2F53EB;
|
||||
box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
// 元素
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
// 定位
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// 元素
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
min-width: 1080px;
|
||||
min-height: 620px;
|
||||
background-color: $containerBgColor;
|
||||
// background-image: url($containerBgImage);
|
||||
background-size: cover;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
.logo {
|
||||
// 元素
|
||||
width: $logoWidth;
|
||||
height: $logoHeight;
|
||||
// background-image: url($logoImage);
|
||||
// background-size: contain;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
margin-left: -$logoWidth/2;
|
||||
}
|
||||
.content {
|
||||
// 元素
|
||||
// width: $contentWidth;
|
||||
// height: $contentHeight;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
// box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
|
||||
// border-radius: 20px;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.pic {
|
||||
// 元素
|
||||
width: $picWidth;
|
||||
height: $picHeight;
|
||||
background-image: url($picImage);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: #f003;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
// background: #ccc3;
|
||||
position: relative;
|
||||
padding-top: 196px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
.pc-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: -36px;
|
||||
|
||||
// h3.title {
|
||||
// position: relative;
|
||||
|
||||
// &::before {
|
||||
// content: '';
|
||||
// background: url($cnbmLogo) 100% / 100% no-repeat;
|
||||
// height: 48px;
|
||||
// width: 48px;
|
||||
// position: absolute;
|
||||
// left: 0px;
|
||||
// top: 4px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.mobile-title,
|
||||
.mobile-switch {
|
||||
display: none;
|
||||
}
|
||||
.form {
|
||||
margin-top: 32px;
|
||||
box-sizing: border-box;
|
||||
// width: $formWidth;
|
||||
width: 100%;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__nav) {
|
||||
// background: #f0f3;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
user-select: none;
|
||||
// 元素
|
||||
width: $tabWidth;
|
||||
height: $rowHeight;
|
||||
padding: 0;
|
||||
// 文字
|
||||
line-height: $rowHeight;
|
||||
color: #666666;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
font-weight: 500;
|
||||
color: #2f53eb;
|
||||
}
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 100%;
|
||||
height: $rowHeight;
|
||||
background: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
line-height: 19px;
|
||||
color: #262626;
|
||||
}
|
||||
.code:deep(.el-input__inner) {
|
||||
padding: 0 24px;
|
||||
// 文字
|
||||
text-align: left;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-input-placeholder) {
|
||||
/* WebKit browsers */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
:deep(.el-input__inner:-moz-placeholder) {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
:deep(.el-input__inner::-moz-placeholder) {
|
||||
/* Mozilla Firefox 19+ */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
opacity: 1;
|
||||
}
|
||||
:deep(.el-input__inner:-ms-input-placeholder) {
|
||||
/* Internet Explorer 10+ */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
position: relative;
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $rowHeight;
|
||||
box-sizing: border-box;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
// 文字
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #2f53eb;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form-item__error) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
height: $buttonHeight;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
// 文字
|
||||
line-height: 26px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.button-active {
|
||||
background: #2f53eb;
|
||||
box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 420px;
|
||||
height: 66px;
|
||||
color: #262626;
|
||||
font-size: 18px;
|
||||
}
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: 18px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
user-select: none;
|
||||
// 元素
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
// 定位
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// - - - - - PC 最小尺寸设置
|
||||
@media screen and (min-width: 599px) and (max-width: 1366px) {
|
||||
.container {
|
||||
.content {
|
||||
width: 710px;
|
||||
height: 397px;
|
||||
.pic {
|
||||
width: 314px;
|
||||
}
|
||||
.field {
|
||||
width: calc(710px - 314px);
|
||||
left: 314px;
|
||||
.form {
|
||||
width: 320px;
|
||||
:deep(.el-input__inner) {
|
||||
width: 320px;
|
||||
height: 56px;
|
||||
}
|
||||
.button {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
min-width: 599px;
|
||||
.content {
|
||||
// width: 710px;
|
||||
// height: 397px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.pic {
|
||||
// width: 314px;
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
// width: calc(710px - 314px);
|
||||
// left: 314px;
|
||||
// justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.pc-title {
|
||||
h3 {
|
||||
font-size: 2.4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
// width: 320px;
|
||||
:deep(.el-input__inner) {
|
||||
width: 320px;
|
||||
height: 56px;
|
||||
}
|
||||
.button {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== MOBILE DESIGN ===== */
|
||||
$mobileW: 375;
|
||||
@@ -273,115 +357,142 @@ $mobileButtonH: 48;
|
||||
$mobileContainerBgImage: '../assets/images/bg-mobile.png';
|
||||
// container-content
|
||||
$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
|
||||
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
|
||||
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 *
|
||||
$mobileContentWidth;
|
||||
// container-content-field-form
|
||||
$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
|
||||
$mobileFormWidth: round($mobileFormW / $mobileW * 100) * 1vw;
|
||||
$mobileRowHeight: $mobileRowH * 1px;
|
||||
$mobileButtonHeight: $mobileButtonH * 1px;
|
||||
$iconBgImage: '../assets/images/icon.png';
|
||||
|
||||
// - - - - - 移动端设置
|
||||
@media screen and (max-width: 599px) {
|
||||
.container {
|
||||
// 元素
|
||||
background-image: url($mobileContainerBgImage);
|
||||
min-width: 280px;
|
||||
min-height: 568px;
|
||||
// 文字
|
||||
font-size: 17px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
// 元素
|
||||
background-image: url($mobileContainerBgImage);
|
||||
min-width: 280px;
|
||||
min-height: 568px;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
// 元素
|
||||
width: $mobileContentWidth;
|
||||
height: $mobileContentHeight;
|
||||
min-width: 250px;
|
||||
min-height: 340px;
|
||||
// 定位
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pic {
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
// 元素
|
||||
width: inherit;
|
||||
min-height: inherit;
|
||||
// 定位
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mobile-title {
|
||||
// 元素
|
||||
margin: 0 0 20px;
|
||||
display: block;
|
||||
}
|
||||
.form {
|
||||
width: $mobileFormWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: $mobileButtonHeight;
|
||||
line-height: 24px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.mobile-switch {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
.pc-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
// 元素
|
||||
width: $mobileContentWidth;
|
||||
height: $mobileContentHeight;
|
||||
min-width: 250px;
|
||||
min-height: 340px;
|
||||
// 定位
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pic {
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
padding: 0;
|
||||
// 元素
|
||||
width: inherit;
|
||||
min-height: inherit;
|
||||
// 定位
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mobile-title {
|
||||
// 元素
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: 0;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url($iconBgImage);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.mobile-switch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
// 元素
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
color: #333333;
|
||||
opacity: 0.6;
|
||||
// 定位
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
width: $mobileFormWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: $mobileButtonHeight;
|
||||
line-height: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
:deep(#button-form-item) {
|
||||
margin: 0 !important;
|
||||
button {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile-switch {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
margin: 0;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url($iconBgImage);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.mobile-switch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
// 元素
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
color: #333333;
|
||||
opacity: 0.6;
|
||||
// 定位
|
||||
// position: absolute;
|
||||
bottom: -32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="`${labelWidth}px`"
|
||||
:size="size"
|
||||
:label-position="labelPosition"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
|
||||
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
|
||||
@@ -46,23 +48,6 @@
|
||||
:placeholder="`请选择${col.label}`"
|
||||
value-format="timestamp"
|
||||
v-bind="col.bind"></el-date-picker>
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:file-list="uploadedFileList"
|
||||
:action="col.url"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="col.bind?.disabled || false">
|
||||
点击上传
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="form[col.prop]"
|
||||
@@ -74,6 +59,47 @@
|
||||
:key="col.key"
|
||||
:is="col.subcomponent"
|
||||
:inlineStyle="col.style"></component>
|
||||
|
||||
<div
|
||||
class="upload-area"
|
||||
:class="uploadOpen ? '' : 'height-48'"
|
||||
ref="uploadArea"
|
||||
v-if="col.upload">
|
||||
<span class="close-icon" :class="uploadOpen ? 'open' : ''">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-arrow-right"
|
||||
@click="handleFilesOpen" />
|
||||
</span>
|
||||
<!-- :file-list="uploadedFileList" -->
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
icon="el-icon-upload2"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button size="mini" :disabled="col.bind?.disabled || false">
|
||||
<svg-icon
|
||||
icon-class="icon-upload"
|
||||
style="color: inherit"></svg-icon>
|
||||
上传文件
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<uploadedFile
|
||||
class="file"
|
||||
v-for="file in form[col.prop] || []"
|
||||
:file="file"
|
||||
:key="file.fileUrl"
|
||||
@delete="handleDeleteFile(file)" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -81,6 +107,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import tupleImg from '@/assets/images/tuple.png';
|
||||
|
||||
/**
|
||||
* 找到最长的label
|
||||
* @param {*} options
|
||||
@@ -99,6 +128,47 @@ function findMaxLabelWidth(rows) {
|
||||
return max;
|
||||
}
|
||||
|
||||
const uploadedFile = {
|
||||
name: 'UploadedFile',
|
||||
props: ['file'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
handleDelete() {
|
||||
this.$emit('delete', this.file);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
render: function (h) {
|
||||
return (
|
||||
<div
|
||||
title={this.file.fileName}
|
||||
style={{
|
||||
background: `url(${tupleImg}) no-repeat`,
|
||||
backgroundSize: '14px',
|
||||
backgroundPosition: '0 55%',
|
||||
paddingLeft: '20px',
|
||||
paddingRight: '24px',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
}}>
|
||||
{this.file.fileName}
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
|
||||
class="dialog__upload_component__close"
|
||||
onClick={this.handleDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
@@ -106,7 +176,7 @@ export default {
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
components: { uploadedFile },
|
||||
props: {
|
||||
rows: {
|
||||
type: Array,
|
||||
@@ -119,14 +189,30 @@ export default {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
hasFile: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'right',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadOpen: false,
|
||||
form: {},
|
||||
formLoading: true,
|
||||
optionListOf: {},
|
||||
uploadedFileList: [],
|
||||
dataLoaded: false,
|
||||
uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers,url都是固定的
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -136,21 +222,10 @@ export default {
|
||||
return max * 20;
|
||||
// return max * 20 + 'px';
|
||||
},
|
||||
form: {
|
||||
get() {
|
||||
// if (this.dataLoaded) return this.dataForm;
|
||||
// else return {}
|
||||
return this.dataForm;
|
||||
},
|
||||
set(val) {
|
||||
console.log('set form', val);
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
rows: {
|
||||
handler() {
|
||||
console.log('watch triggered!');
|
||||
this.$nextTick(() => {
|
||||
this.handleOptions('watch');
|
||||
});
|
||||
@@ -158,6 +233,16 @@ export default {
|
||||
deep: true,
|
||||
immediate: false,
|
||||
},
|
||||
dataForm: {
|
||||
handler(val) {
|
||||
this.form = JSON.parse(JSON.stringify(val));
|
||||
if (this.hasFile) {
|
||||
this.form.files = this.form.files ?? [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 处理 options
|
||||
@@ -273,23 +358,29 @@ export default {
|
||||
beforeUpload() {},
|
||||
// 上传前的验证规则可通过 bind 属性传入
|
||||
handleUploadSuccess(response, file, fileList) {
|
||||
console.log(
|
||||
'[dialogForm:handleUploadSuccess]',
|
||||
response,
|
||||
file,
|
||||
fileList,
|
||||
this.form
|
||||
);
|
||||
// 保存原始文件名
|
||||
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
|
||||
// 保存完整地址
|
||||
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
|
||||
this.form.files.push({
|
||||
fileName: file.name,
|
||||
fileUrl: response.data,
|
||||
fileType: 2,
|
||||
});
|
||||
this.$modal.msgSuccess('上传成功');
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
|
||||
getFileName(fileUrl) {
|
||||
return fileUrl.split('/').pop();
|
||||
},
|
||||
|
||||
handleFilesOpen() {
|
||||
this.uploadOpen = !this.uploadOpen;
|
||||
},
|
||||
|
||||
handleDeleteFile(file) {
|
||||
this.form.files = this.form.files.filter(
|
||||
(item) => item.fileUrl != file.fileUrl
|
||||
);
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -299,4 +390,52 @@ export default {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
// background: #ccc;
|
||||
// display: grid;
|
||||
// grid-auto-rows: 34px;
|
||||
// grid-template-columns: repeat(6, minmax(32px, max-content));
|
||||
// gap: 8px;
|
||||
// align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.upload-in-dialog {
|
||||
// display: inline-block;
|
||||
margin-right: 24px;
|
||||
// background: #ccc;
|
||||
position: relative;
|
||||
// top: -13px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
// background: #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
z-index: 100;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.close-icon.open {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.dialog__upload_component__close {
|
||||
color: #ccc;
|
||||
}
|
||||
.dialog__upload_component__close:hover {
|
||||
/* color: #777; */
|
||||
color: red;
|
||||
}
|
||||
|
||||
.height-48 {
|
||||
height: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="dataBoard" class=""></div>
|
||||
<div ref="dataBoard" class="data-board">
|
||||
<el-button type="text" @click="goback" class="go-back--btn">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -24,39 +26,42 @@ export default {
|
||||
mainFooter: null, // dom
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.modify();
|
||||
});
|
||||
},
|
||||
activated() {
|
||||
this.modify();
|
||||
},
|
||||
deactivated() {
|
||||
this.recover();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.recover();
|
||||
},
|
||||
// mounted() {
|
||||
// this.$nextTick(() => {
|
||||
// this.modify();
|
||||
// });
|
||||
// },
|
||||
// activated() {
|
||||
// this.modify();
|
||||
// },
|
||||
// deactivated() {
|
||||
// this.recover();
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// this.recover();
|
||||
// },
|
||||
methods: {
|
||||
modify() {
|
||||
// 在这个页面临时修改下父类的margin,结束时需还原
|
||||
this.appMain = document.querySelector('.app-main');
|
||||
// this.appMain.style.minHeight = 'calc(100vh - 90px)';
|
||||
this.appMain.style.margin = 0;
|
||||
// 在这个页面临时删除 main-footer 元素,结束时需还原
|
||||
// this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
|
||||
// document.querySelector('.main-footer').remove();
|
||||
this.$refs.dataBoard.classList.add('data-board');
|
||||
},
|
||||
recover() {
|
||||
this.$refs.dataBoard.classList.remove('data-board');
|
||||
this.$nextTick(() => {
|
||||
this.appMain.style.margin = this.parentStyle.margin;
|
||||
// this.appMain.style.minHeight = this.parentStyle.minHeight;
|
||||
// this.appMain.insertAdjacentElement('afterend', this.mainFooter);
|
||||
});
|
||||
},
|
||||
// modify() {
|
||||
// // 在这个页面临时修改下父类的margin,结束时需还原
|
||||
// this.appMain = document.querySelector('.app-main');
|
||||
// // this.appMain.style.minHeight = 'calc(100vh - 90px)';
|
||||
// this.appMain.style.margin = 0;
|
||||
// // 在这个页面临时删除 main-footer 元素,结束时需还原
|
||||
// // this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
|
||||
// // document.querySelector('.main-footer').remove();
|
||||
// this.$refs.dataBoard.classList.add('data-board');
|
||||
// },
|
||||
// recover() {
|
||||
// this.$refs.dataBoard.classList.remove('data-board');
|
||||
// this.$nextTick(() => {
|
||||
// this.appMain.style.margin = this.parentStyle.margin;
|
||||
// // this.appMain.style.minHeight = this.parentStyle.minHeight;
|
||||
// // this.appMain.insertAdjacentElement('afterend', this.mainFooter);
|
||||
// });
|
||||
// },
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -71,4 +76,25 @@ export default {
|
||||
background: url('../../../assets/images/DataBoard.png') 100% 100% / contain
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.go-back--btn {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: 6px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "\2BAA";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: -26px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
</base-dialog>
|
||||
|
||||
<!-- 抽屉 详情 -->
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
v-if="showForm"
|
||||
ref="form"
|
||||
:disabled="mode.includes('detail')"
|
||||
:dataForm="form"
|
||||
v-model="form"
|
||||
:rows="formRows" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows"/>
|
||||
</base-dialog>
|
||||
|
||||
<!-- 抽屉 详情 -->
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
v-if="showForm"
|
||||
ref="form"
|
||||
:disabled="mode.includes('detail')"
|
||||
:dataForm="form"
|
||||
v-model="form"
|
||||
:rows="formRows" />
|
||||
</div>
|
||||
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
name: '',
|
||||
plcParamName: '',
|
||||
unit: '',
|
||||
collection: '',
|
||||
collection: 1,
|
||||
minValue: '',
|
||||
maxValue: '',
|
||||
defaultValue: '',
|
||||
@@ -370,7 +370,7 @@ export default {
|
||||
name: '',
|
||||
plcParamName: '',
|
||||
unit: '',
|
||||
collection: '',
|
||||
collection: 1,
|
||||
minValue: '',
|
||||
maxValue: '',
|
||||
defaultValue: '',
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
</base-dialog>
|
||||
|
||||
<!-- 抽屉 详情 -->
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-13 09:02:25
|
||||
* @LastEditTime: 2023-10-08 15:39:38
|
||||
* @LastEditTime: 2023-10-16 14:56:58
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<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" />
|
||||
<div v-if="tableData.length">
|
||||
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
|
||||
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
|
||||
<balance-chart ref="lineChart" />
|
||||
</div>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -89,7 +93,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
}
|
||||
@@ -144,11 +148,6 @@ export default {
|
||||
// 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 = [
|
||||
@@ -228,11 +227,17 @@ export default {
|
||||
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;
|
||||
if (val.time) {
|
||||
if (val.time && val.lineIds) {
|
||||
this.tableData = []
|
||||
this.xData = []
|
||||
this.yData = []
|
||||
this.tableProps = []
|
||||
this.spanArr = []
|
||||
this.timeList = []
|
||||
this.getData()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择时间',
|
||||
message: '请选择产线和时间',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<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" />
|
||||
<div v-if="tableData.length">
|
||||
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
|
||||
<SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" />
|
||||
<line-chart ref="lineChart" />
|
||||
</div>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -72,7 +76,7 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'datetime',
|
||||
dateType: 'month',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
@@ -82,7 +86,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
}
|
||||
@@ -101,6 +105,8 @@ export default {
|
||||
this.optionArrUrl.forEach((item, index) => {
|
||||
item(params).then((response) => {
|
||||
this.formConfig[index].selectOptions = response.data.list
|
||||
// this.formConfig[0].defaultSelect = response.data.list[0].id
|
||||
this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id)
|
||||
});
|
||||
});
|
||||
},
|
||||
@@ -112,11 +118,13 @@ export default {
|
||||
let arr = [
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线'
|
||||
label: '产线',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'sum',
|
||||
label: '合计'
|
||||
label: '合计',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: res.data ? res.data.nameData[0].name : undefined,
|
||||
@@ -220,7 +228,6 @@ export default {
|
||||
});
|
||||
},
|
||||
buttonClick(val) {
|
||||
// console.log(val)
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined
|
||||
|
||||
422
src/views/core/base/equipment/components/AssetsUpload.vue
Normal file
422
src/views/core/base/equipment/components/AssetsUpload.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<!--
|
||||
filename: AssetsUpload.vue
|
||||
author: liubin
|
||||
date: 2023-10-12 16:40:14
|
||||
description: 上传资料/图片 组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="assets-upload">
|
||||
<section class="operations">
|
||||
<el-button type="text" class="expand-btn" @click="expand = !expand">
|
||||
<i class="el-icon-folder-opened" v-if="expand"></i>
|
||||
<i class="el-icon-folder" v-else></i>
|
||||
展开
|
||||
</el-button>
|
||||
<!-- <div class="preview-btn">
|
||||
<i class="el-icon-view"></i>
|
||||
预览
|
||||
</div> -->
|
||||
</section>
|
||||
<section
|
||||
class="file-area"
|
||||
:style="{
|
||||
height: expand ? 'auto' : isPicMode ? '180px' : '152px',
|
||||
gap: isPicMode ? '0 24px' : '24px',
|
||||
gridAutoRows: isPicMode ? '180px' : '152px',
|
||||
}">
|
||||
<el-upload
|
||||
class="equipment-upload"
|
||||
:style="{ marginBottom: isPicMode ? '48px' : '24px' }"
|
||||
:disabled="disabled"
|
||||
drag
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
multiple
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
<span>将文件拖到此处或</span>
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
{{
|
||||
isPicMode ? '仅支持上传 .jpg .png 格式文件, 且' : ''
|
||||
}}文件大小不超过2MB
|
||||
</div>
|
||||
</el-upload>
|
||||
<!-- <div
|
||||
class="file-list__item"
|
||||
v-for="n in 9"
|
||||
:key="n"
|
||||
:style="{
|
||||
display: n > 4 && !expand ? 'none' : 'block',
|
||||
}"
|
||||
:data-name="n"
|
||||
:class="{ 'default-icon': !isPicMode }">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div> -->
|
||||
<div
|
||||
class="file-list__item"
|
||||
v-for="(file, index) in files"
|
||||
:key="file.fileName"
|
||||
:style="{
|
||||
background: isPicMode
|
||||
? `url(${file.fileUrl}) no-repeat`
|
||||
: `url(${defaultBg}) no-repeat`,
|
||||
backgroundSize: isPicMode ? '100% 100%' : '64px',
|
||||
backgroundPosition: isPicMode ? '0% 0%' : 'center',
|
||||
}"
|
||||
:data-name="file.fileName">
|
||||
<el-button
|
||||
v-if="!disabled"
|
||||
type="text"
|
||||
class="el-icon-delete"
|
||||
style="padding: 0"
|
||||
@click="(e) => handleDelete(file)" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import defaultBg from '../../../../../assets/images/default-file-icon.png';
|
||||
|
||||
function checkSize(file, message) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('上传文件大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
|
||||
function checkPic(file, message) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isPic = isJPG || isPNG;
|
||||
if (!isPic) {
|
||||
message.error('上传图片只能是 JPG/PNG 格式!');
|
||||
}
|
||||
return isPic;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AssetsUpload',
|
||||
components: {},
|
||||
model: {
|
||||
prop: 'dataSource',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'image',
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
equipmentId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isPicMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update-filelist'],
|
||||
data() {
|
||||
return {
|
||||
defaultBg,
|
||||
expand: false,
|
||||
headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
|
||||
fileList: [],
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload',
|
||||
files: [
|
||||
// 服务器返回的结构
|
||||
// {
|
||||
// fileName: 'sf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'sddf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'jjj.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdfasdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdkj.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'lkasjdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'afdffff.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
|
||||
// },
|
||||
],
|
||||
updateTimer: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dataSource: {
|
||||
handler(val) {
|
||||
this.files = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// handle success, per file!
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '上传成功! 点击确认保存上传结果',
|
||||
type: 'success',
|
||||
});
|
||||
if (
|
||||
response == null ||
|
||||
!('data' in response) ||
|
||||
response.data == null ||
|
||||
response.data.trim() == ''
|
||||
) {
|
||||
this.$message.error('上传出错了!');
|
||||
return;
|
||||
}
|
||||
this.files.push({
|
||||
fileName: file.name,
|
||||
fileUrl: response.data,
|
||||
fileType: this.isPicMode ? 1 : 2,
|
||||
});
|
||||
// debugger;
|
||||
|
||||
// 延时更新
|
||||
if (this.updateTimer) {
|
||||
clearTimeout(this.updateTimer);
|
||||
}
|
||||
this.updateTimer = setTimeout(() => {
|
||||
// console.log('[AssetsUpload] 更新上传列表');
|
||||
this.emitFilelist();
|
||||
clearTimeout(this.updateTimer);
|
||||
this.updateTimer = null;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
emitFilelist() {
|
||||
this.$emit('update', this.files);
|
||||
},
|
||||
|
||||
handleRemove(file, fileList) {
|
||||
debugger;
|
||||
},
|
||||
|
||||
handleDelete(file) {
|
||||
// fileName fileType 都可能一样,但 fileUrl 一定不一样
|
||||
this.files = this.files.filter((item) => item.fileUrl != file.fileUrl);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功! 需点击确认保存删除结果',
|
||||
type: 'success',
|
||||
});
|
||||
this.emitFilelist();
|
||||
},
|
||||
|
||||
beforeUpload(file) {
|
||||
if (this.isPicMode) {
|
||||
return checkPic(file, this.$message) && checkSize(file, this.$message);
|
||||
}
|
||||
return checkSize(file, this.$message);
|
||||
},
|
||||
|
||||
handleUpload() {
|
||||
switch (this.type) {
|
||||
case 'image':
|
||||
break;
|
||||
case 'asset':
|
||||
break;
|
||||
}
|
||||
},
|
||||
updateFileList(appendFilelist) {
|
||||
// Array
|
||||
this.$emit('update-filelist', this.appendFilelist);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.assets-upload {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.operations {
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expand-btn,
|
||||
.preview-btn {
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.preview-btn {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.expand-btn,
|
||||
.preview-btn:hover,
|
||||
.preview-btn.active {
|
||||
// color: #0042d0;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
:deep(.equipment-upload) {
|
||||
.el-upload-dragger {
|
||||
width: 188px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.el-icon-upload {
|
||||
margin: 12px 0;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
font-size: 12px;
|
||||
line-height: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
em {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #d1d1d1;
|
||||
margin: 0 0 12px;
|
||||
transform: translateY(-12px);
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-upload {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
// custom
|
||||
.file-area {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 188px);
|
||||
grid-auto-rows: 152px;
|
||||
gap: 48px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-list__item {
|
||||
height: 128px;
|
||||
background-color: #fff;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
.el-icon-delete {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-delete {
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
color: rgb(210, 41, 41);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-list__item:hover {
|
||||
border-color: #0b58ff;
|
||||
}
|
||||
|
||||
.file-list__item::after {
|
||||
content: attr(data-name);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -26px;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
background: url(../../../../../assets/images/default-file-icon.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: 64px;
|
||||
}
|
||||
</style>
|
||||
313
src/views/core/base/equipment/components/DialogForm.vue
Normal file
313
src/views/core/base/equipment/components/DialogForm.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-08-15 10:32:36
|
||||
description: 弹窗的表单组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="`${labelWidth}px`"
|
||||
:size="size"
|
||||
:label-position="labelPosition"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
|
||||
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
|
||||
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
|
||||
<el-input
|
||||
v-if="col.input"
|
||||
v-model="form[col.prop]"
|
||||
@change="$emit('update', form)"
|
||||
:placeholder="`请输入${col.label}`"
|
||||
v-bind="col.bind" />
|
||||
<el-input
|
||||
v-if="col.textarea"
|
||||
type="textarea"
|
||||
v-model="form[col.prop]"
|
||||
@change="$emit('update', form)"
|
||||
:placeholder="`请输入${col.label}`"
|
||||
v-bind="col.bind" />
|
||||
<el-select
|
||||
v-if="col.select"
|
||||
v-model="form[col.prop]"
|
||||
:placeholder="`请选择${col.label}`"
|
||||
@change="$emit('update', form)"
|
||||
v-bind="col.bind">
|
||||
<el-option
|
||||
v-for="opt in optionListOf[col.prop]"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-if="col.datetime"
|
||||
v-model="form[col.prop]"
|
||||
type="datetime"
|
||||
:placeholder="`请选择${col.label}`"
|
||||
value-format="timestamp"
|
||||
v-bind="col.bind"></el-date-picker>
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:file-list="uploadedFileList"
|
||||
:action="col.url"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="col.bind?.disabled || false">
|
||||
点击上传
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="form[col.prop]"
|
||||
active-color="#0b58ff"
|
||||
inactive-color="#e1e1e1"
|
||||
v-bind="col.bind"></el-switch>
|
||||
<component
|
||||
v-if="col.subcomponent"
|
||||
:key="col.key"
|
||||
:is="col.subcomponent"
|
||||
v-bind="col.bind"
|
||||
:inlineStyle="col.style"></component>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 找到最长的label
|
||||
* @param {*} options
|
||||
*/
|
||||
function findMaxLabelWidth(rows) {
|
||||
let max = 0;
|
||||
rows.forEach((row) => {
|
||||
row.forEach((opt) => {
|
||||
// debugger;
|
||||
if (!opt.label) return 0;
|
||||
if (opt.label.length > max) {
|
||||
max = opt.label.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
return max;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
props: {
|
||||
rows: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'right',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLoading: true,
|
||||
optionListOf: {},
|
||||
uploadedFileList: [],
|
||||
dataLoaded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
labelWidth() {
|
||||
let max = findMaxLabelWidth(this.rows);
|
||||
// 每个汉字占20px
|
||||
return max * 20;
|
||||
// return max * 20 + 'px';
|
||||
},
|
||||
form: {
|
||||
get() {
|
||||
// if (this.dataLoaded) return this.dataForm;
|
||||
// else return {}
|
||||
return this.dataForm;
|
||||
},
|
||||
set(val) {
|
||||
console.log('set form', val);
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
rows: {
|
||||
handler() {
|
||||
console.log('watch triggered!');
|
||||
this.$nextTick(() => {
|
||||
this.handleOptions('watch');
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
immediate: false,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 处理 options
|
||||
this.handleOptions();
|
||||
},
|
||||
methods: {
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
// getCode
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
async handleOptions(trigger = 'monuted') {
|
||||
console.log('[dialogForm:handleOptions]');
|
||||
const promiseList = [];
|
||||
this.rows.forEach((cols) => {
|
||||
cols.forEach((opt) => {
|
||||
if (opt.value && !this.form[opt.prop]) {
|
||||
// 默认值
|
||||
this.form[opt.prop] = opt.value;
|
||||
}
|
||||
|
||||
if (opt.options) {
|
||||
this.$set(this.optionListOf, opt.prop, opt.options);
|
||||
} else if (opt.url) {
|
||||
// 如果有 depends,则暂时先不获取,注册一个watcher
|
||||
if (opt.depends) {
|
||||
console.log('[handleOptions] setting watch');
|
||||
this.$watch(
|
||||
() => this.form[opt.depends],
|
||||
(id) => {
|
||||
console.log('<', opt.depends, '>', 'changed', id);
|
||||
if (id == null) return;
|
||||
// 清空原有选项
|
||||
this.form[opt.prop] = null;
|
||||
// 获取新的选项
|
||||
this.$axios({
|
||||
url: `${opt.url}?id=${id}`,
|
||||
}).then((res) => {
|
||||
this.$set(
|
||||
this.optionListOf,
|
||||
opt.prop,
|
||||
res.data.map((item) => ({
|
||||
label: item[opt.labelKey ?? 'name'],
|
||||
value: item[opt.valueKey ?? 'id'],
|
||||
}))
|
||||
);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
return;
|
||||
}
|
||||
// 如果是下拉框,或者新增模式下的输入框,才去请求
|
||||
if (opt.select || (opt.input && !this.form?.id)) {
|
||||
promiseList.push(async () => {
|
||||
const response = await this.$axios(opt.url, {
|
||||
method: opt.method ?? 'get',
|
||||
});
|
||||
console.log('[dialogForm:handleOptions:response]', response);
|
||||
if (opt.select) {
|
||||
// 处理下拉框选项
|
||||
const list =
|
||||
'list' in response.data
|
||||
? response.data.list
|
||||
: response.data;
|
||||
this.$set(
|
||||
this.optionListOf,
|
||||
opt.prop,
|
||||
list.map((item) => ({
|
||||
label: item[opt.labelKey ?? 'name'],
|
||||
value: item[opt.valueKey ?? 'id'],
|
||||
}))
|
||||
);
|
||||
} else if (opt.input) {
|
||||
console.log('setting code: ', response.data);
|
||||
// 处理输入框数据
|
||||
this.form[opt.prop] = response.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log('[dialogForm:handleOptions] done!');
|
||||
|
||||
// 如果是 watch 触发的,不需要执行进一步的请求
|
||||
if (trigger == 'watch') {
|
||||
this.formLoading = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Promise.all(promiseList.map((fn) => fn()));
|
||||
this.formLoading = false;
|
||||
this.dataLoaded = true;
|
||||
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
|
||||
} catch (error) {
|
||||
console.log('[dialogForm:handleOptions:error]', error);
|
||||
this.formLoading = false;
|
||||
}
|
||||
if (!promiseList.length) this.formLoading = false;
|
||||
},
|
||||
// 上传成功的特殊处理
|
||||
beforeUpload() {},
|
||||
// 上传前的验证规则可通过 bind 属性传入
|
||||
handleUploadSuccess(response, file, fileList) {
|
||||
console.log(
|
||||
'[dialogForm:handleUploadSuccess]',
|
||||
response,
|
||||
file,
|
||||
fileList,
|
||||
this.form
|
||||
);
|
||||
// 保存原始文件名
|
||||
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
|
||||
// 保存完整地址
|
||||
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
|
||||
this.$modal.msgSuccess('上传成功');
|
||||
},
|
||||
|
||||
getFileName(fileUrl) {
|
||||
return fileUrl.split('/').pop();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!--
|
||||
filename: EquipmentAssets.vue
|
||||
author: liubin
|
||||
date: 2023-08-22 11:11:18
|
||||
description: 设备资产
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="equipment-assets"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EquipmentAssets",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.equipment-assets {
|
||||
background: #f1f1f1;
|
||||
padding: 12px;
|
||||
min-height: 128px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -29,23 +29,28 @@
|
||||
<section v-for="(section, index) in sections" :key="section.key">
|
||||
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
|
||||
|
||||
<div class="form-part" v-if="section.key == 'base'">
|
||||
<div
|
||||
class="form-part"
|
||||
v-if="section.key == 'base'"
|
||||
style="margin-bottom: 32px">
|
||||
<el-skeleton v-if="!showForm" animated />
|
||||
<DialogForm
|
||||
<EquipmentInfoForm
|
||||
key="drawer-dialog-form"
|
||||
v-if="showForm"
|
||||
ref="form"
|
||||
:dataForm="form"
|
||||
:rows="formRows" />
|
||||
:disabled="mode.includes('detail')"
|
||||
:sync-filelist="syncFileListFlag"
|
||||
v-model="form" />
|
||||
</div>
|
||||
|
||||
<div v-if="section.key == 'attrs'" style="margin-top: 12px">
|
||||
<base-table
|
||||
v-loading="attrListLoading"
|
||||
:table-props="section.props"
|
||||
:page="section.pageNo || 1"
|
||||
:limit="section.pageSize || 10"
|
||||
:page="attrQuery?.params.pageNo || 1"
|
||||
:limit="attrQuery?.params.pageSize || 10"
|
||||
:table-data="list"
|
||||
:add-button-show="mode.includes('detail') ? null : '添加属性'"
|
||||
@emitButtonClick="handleAddAttr"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="section.tableBtn"
|
||||
@@ -54,27 +59,31 @@
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="attrQuery.params.pageNo"
|
||||
:limit.sync="attrQuery.params.pageSize"
|
||||
@pagination="getAttrList" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="drawer-body__footer">
|
||||
<el-button style="margin-right: 10px" @click="handleCancel">
|
||||
返回
|
||||
</el-button>
|
||||
<el-button style="" @click="handleCancel">取消</el-button>
|
||||
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||||
编辑
|
||||
</el-button>
|
||||
<span v-else>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
<!-- sections的第二项必须是 属性列表 -->
|
||||
<el-button
|
||||
<el-button v-else type="primary" @click="handleConfirm">确定</el-button>
|
||||
<!-- sections的第二项必须是 属性列表 -->
|
||||
<!-- <el-button
|
||||
v-if="sections[1].allowAdd"
|
||||
type="primary"
|
||||
@click="handleAddAttr">
|
||||
添加属性
|
||||
</el-button>
|
||||
</span>
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,11 +108,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogForm from '@/components/DialogForm';
|
||||
import DialogForm from './DialogForm';
|
||||
import EquipmentInfoForm from './EquipmentInfoForm.vue';
|
||||
|
||||
const SmallTitle = {
|
||||
name: 'SmallTitle',
|
||||
props: ['size'],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
@@ -127,12 +138,13 @@ const SmallTitle = {
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { SmallTitle, DialogForm },
|
||||
components: { SmallTitle, DialogForm, EquipmentInfoForm },
|
||||
props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
showForm: false,
|
||||
btnLoading: false,
|
||||
total: 0,
|
||||
form: {},
|
||||
list: [],
|
||||
@@ -161,10 +173,16 @@ export default {
|
||||
},
|
||||
],
|
||||
],
|
||||
attrQuery: null, // 属性列表的请求
|
||||
attrQuery: {
|
||||
params: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
}, // 属性列表的请求
|
||||
infoQuery: null, // 基本信息的请求
|
||||
attrFormSubmitting: false,
|
||||
attrListLoading: false,
|
||||
syncFileListFlag: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -175,15 +193,19 @@ export default {
|
||||
// 重置图片的位置
|
||||
return {
|
||||
...col,
|
||||
bind: {
|
||||
...col.bind,
|
||||
},
|
||||
style: {
|
||||
left: 0,
|
||||
right: 'unset'
|
||||
}
|
||||
}
|
||||
right: 'unset',
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
...col,
|
||||
bind: {
|
||||
...col.bind,
|
||||
// 详情 模式下,禁用各种输入
|
||||
disabled: this.mode == 'detail',
|
||||
},
|
||||
@@ -208,9 +230,52 @@ export default {
|
||||
this.$axios(query).then(({ data }) => {
|
||||
if (section.key == 'base') {
|
||||
this.form = data;
|
||||
// this.form = {
|
||||
// code: 'gj',
|
||||
// name: '下片机',
|
||||
// enName: 'unload',
|
||||
// abbr: '',
|
||||
// equipmentTypeId: 21084,
|
||||
// remark: '备注',
|
||||
// id: '1712367395052384257',
|
||||
// createTime: 1697095176000,
|
||||
// enterTime: 0,
|
||||
// productionTime: 0,
|
||||
// files: [
|
||||
// {
|
||||
// fileName: '测试.xlsx',
|
||||
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0108%2F0f0c6f30j00r5cle9000sc000hs00gtc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试2.xlsx',
|
||||
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0415%2F2cd23619j00racb96000kc000hs00hsc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试3.xlsx',
|
||||
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1fea91a0-d088-409e-b145-e0e61254b28b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=2e0fe7d1de7f54adff3007efe133d67c',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试4.xlsx',
|
||||
// fileUrl: 'https://pics5.baidu.com/feed/b7003af33a87e950cdfb4b4546eed044faf2b40d.jpeg?token=1d7484cfe4b014dd201f8c8725cab945',
|
||||
// fileType: 2
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试5.xlsx',
|
||||
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe3500876-9c46-4b70-8d37-4799520cdd13%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=4abc1df930e62730e5361a7d3765e0f2',
|
||||
// fileType: 2
|
||||
// },
|
||||
// ],
|
||||
// tvalue: 0,
|
||||
// processingTime: 0,
|
||||
// manufacturer: '',
|
||||
// spec: '',
|
||||
// description: '描述',
|
||||
// };
|
||||
this.showForm = true;
|
||||
this.infoQuery = query;
|
||||
console.log('setting form: ', this.form, data);
|
||||
} else if (section.key == 'attrs') {
|
||||
this.attrQuery = query;
|
||||
this.list = data.list;
|
||||
@@ -231,6 +296,24 @@ export default {
|
||||
break;
|
||||
}
|
||||
},
|
||||
async handleConfirm() {
|
||||
this.btnLoading = true;
|
||||
this.syncFileListFlag = Math.random();
|
||||
|
||||
this.$nextTick(async () => {
|
||||
const { code, data } = await this.$axios({
|
||||
url: this.sections[0].urlUpdate,
|
||||
method: 'put',
|
||||
data: this.form,
|
||||
});
|
||||
if (code == 0) {
|
||||
this.$modal.msgSuccess('更新成功');
|
||||
}
|
||||
|
||||
this.btnLoading = false;
|
||||
this.handleCancel();
|
||||
});
|
||||
},
|
||||
|
||||
handleEmitFun(val) {
|
||||
console.log('handleEmitFun', val);
|
||||
@@ -273,7 +356,7 @@ export default {
|
||||
|
||||
// 开启编辑
|
||||
toggleEdit() {
|
||||
this.mode = 'edit';
|
||||
this.$emit('update-mode', 'edit');
|
||||
},
|
||||
|
||||
// 新增属性
|
||||
@@ -331,33 +414,44 @@ export default {
|
||||
},
|
||||
|
||||
// 提交属性表
|
||||
async submitAttrForm() {
|
||||
this.$refs['attrForm'].validate((valid) => {
|
||||
submitAttrForm() {
|
||||
this.$refs['attrForm'].validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
console.log('this.attrform', this.attrForm);
|
||||
const isEdit = this.attrForm.id != null;
|
||||
this.attrFormSubmitting = true;
|
||||
const res = await this.$axios({
|
||||
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
|
||||
method: isEdit ? 'put' : 'post',
|
||||
data: this.attrForm,
|
||||
});
|
||||
|
||||
if (res.code == 0) {
|
||||
this.closeAttrForm();
|
||||
this.$message({
|
||||
message: `${isEdit ? '更新' : '创建'}成功`,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getAttrList();
|
||||
},
|
||||
});
|
||||
}
|
||||
this.attrFormSubmitting = false;
|
||||
try {
|
||||
const isEdit = this.attrForm.id != null;
|
||||
this.attrFormSubmitting = true;
|
||||
const res = await this.$axios({
|
||||
url: isEdit
|
||||
? this.sections[1].urlUpdate
|
||||
: this.sections[1].urlCreate,
|
||||
method: isEdit ? 'put' : 'post',
|
||||
data: this.attrForm,
|
||||
});
|
||||
|
||||
if (res.code == 0) {
|
||||
this.closeAttrForm();
|
||||
this.$message({
|
||||
message: `${isEdit ? '更新' : '创建'}成功`,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getAttrList();
|
||||
},
|
||||
});
|
||||
}
|
||||
this.attrFormSubmitting = false;
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: err,
|
||||
type: 'error',
|
||||
duration: 1500,
|
||||
});
|
||||
this.attrFormSubmitting = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeAttrForm() {
|
||||
|
||||
337
src/views/core/base/equipment/components/EquipmentInfoForm.vue
Normal file
337
src/views/core/base/equipment/components/EquipmentInfoForm.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-08-15 10:32:36
|
||||
description: 弹窗的表单组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
class="equipment-info-form"
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="200px"
|
||||
label-position="top"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="设备名称"
|
||||
prop="name"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备编码" prop="code" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.code"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="英文名称" prop="enName" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.enName"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入英文名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="缩写" prop="abbr" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.abbr"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入名称缩写"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备类型" prop="equipmentTypeId" :rules="[]">
|
||||
<el-select
|
||||
v-model="form.equipmentTypeId"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
placeholder="请选择设备类型">
|
||||
<el-option
|
||||
v-for="eqType in eqTypeList"
|
||||
:key="eqType.id"
|
||||
:label="eqType.name"
|
||||
:value="eqType.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="备注" prop="remark" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="生产日期" prop="productionTime" :rules="[]">
|
||||
<el-date-picker
|
||||
v-model="form.enterTime"
|
||||
:disabled="disabled"
|
||||
type="datetime"
|
||||
placeholder="请选择生产日期"
|
||||
value-format="timestamp"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="进场日期" prop="enterTime" :rules="[]">
|
||||
<el-date-picker
|
||||
v-model="form.enterTime"
|
||||
:disabled="disabled"
|
||||
type="datetime"
|
||||
placeholder="请选择进场日期"
|
||||
value-format="timestamp"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="设备TT值"
|
||||
prop="tvalue"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字值',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="form.tvalue"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备TT值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="产品加工时间(s)"
|
||||
prop="processingTime"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字值',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="form.processingTime"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入产品加工时间"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="制造商" prop="manufacturer" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.manufacturer"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入制造商"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备规格" prop="spec" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.spec"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备规格"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 功能描述 -->
|
||||
<el-col>
|
||||
<el-form-item label="功能描述" prop="description" :rules="[]">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:disabled="disabled"
|
||||
v-model="form.description"
|
||||
placeholder="请填写功能描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 上传资料 -->
|
||||
<el-col>
|
||||
<el-form-item label="上传资料" prop="assets" :rules="[]">
|
||||
<AssetsUpload v-model="form.assets" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 上传图片 -->
|
||||
<el-col>
|
||||
<el-form-item label="上传图片" prop="pics" :rules="[]">
|
||||
<AssetsUpload
|
||||
:is-pic-mode="true"
|
||||
v-model="form.pics"
|
||||
:disabled="disabled" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AssetsUpload from './AssetsUpload.vue';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentInfoForm',
|
||||
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
|
||||
emits: ['update'],
|
||||
|
||||
components: { AssetsUpload },
|
||||
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
syncFilelist: {
|
||||
type: Number,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLoading: false,
|
||||
form: {
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
equipmentTypeId: '',
|
||||
remark: '',
|
||||
productionTime: '',
|
||||
enterTime: '',
|
||||
tvalue: '',
|
||||
processingTime: '',
|
||||
manufacturer: '',
|
||||
spec: '',
|
||||
description: '',
|
||||
assets: [],
|
||||
pics: [],
|
||||
},
|
||||
eqTypeList: [],
|
||||
dataLoaded: false,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler(val) {
|
||||
// debugger;
|
||||
this.form = JSON.parse(JSON.stringify(val));
|
||||
this.form.assets =
|
||||
this.form.files?.filter((item) => item.fileType == '2') || [];
|
||||
this.form.pics =
|
||||
this.form.files?.filter((item) => item.fileType == '1') || [];
|
||||
delete this.form.files;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
syncFilelist: {
|
||||
handler(val) {
|
||||
if (val != null) {
|
||||
this.updateForm();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getEqTypeList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateForm() {
|
||||
console.log('update form ==> ');
|
||||
this.form.files = [...this.form.assets, ...this.form.pics];
|
||||
delete this.form.assets;
|
||||
delete this.form.pics;
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
|
||||
async getEqTypeList() {
|
||||
this.formLoading = true;
|
||||
const { code, data } = await this.$axios(
|
||||
'/base/equipment-type/page?pageNo=1&pageSize=100'
|
||||
);
|
||||
// debugger;
|
||||
if (code == 0) {
|
||||
this.eqTypeList = data.list;
|
||||
}
|
||||
this.formLoading = false;
|
||||
},
|
||||
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
// getCode
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
// 上传成功的特殊处理
|
||||
beforeUpload() {},
|
||||
// 上传前的验证规则可通过 bind 属性传入
|
||||
handleUploadSuccess(response, file, fileList) {
|
||||
console.log(
|
||||
'[dialogForm:handleUploadSuccess]',
|
||||
response,
|
||||
file,
|
||||
fileList,
|
||||
this.form
|
||||
);
|
||||
// 保存原始文件名
|
||||
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
|
||||
// 保存完整地址
|
||||
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
|
||||
this.$modal.msgSuccess('上传成功');
|
||||
},
|
||||
|
||||
getFileName(fileUrl) {
|
||||
return fileUrl.split('/').pop();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,111 +0,0 @@
|
||||
<!--
|
||||
filename: EquipmentPics.vue
|
||||
author: liubin
|
||||
date: 2023-08-18 16:29:39
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="equipment-pics">
|
||||
<div v-for="(url, idx) in images" :key="url">
|
||||
<img :src="url" :alt="url" />
|
||||
<figure class="big-img" :style="inlineStyle">
|
||||
<img :src="url" :alt="url" />
|
||||
<figcaption>{{ desc[idx] }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EquipmentPics',
|
||||
components: {},
|
||||
props: {
|
||||
inlineStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
desc: [
|
||||
'车间设备 - 1',
|
||||
'车间设备 - 2',
|
||||
'车间设备 - 3',
|
||||
'车间设备 - 4',
|
||||
'车间设备 - 5',
|
||||
'车间设备 - 6',
|
||||
'车间设备 - 7',
|
||||
'车间设备 - 8',
|
||||
'车间设备 - 9',
|
||||
'车间设备 - 10',
|
||||
'车间设备 - 11',
|
||||
'车间设备 - 12',
|
||||
],
|
||||
images: Array(10)
|
||||
.fill(1)
|
||||
.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.equipment-pics {
|
||||
// background: #cfcfcf;
|
||||
padding: 12px;
|
||||
// margin: 8px;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.equipment-pics > div {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.equipment-pics > div:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.equipment-pics > div > img {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure {
|
||||
display: none;
|
||||
position: fixed;
|
||||
// inset: 0;
|
||||
// margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// width: 640px;
|
||||
// height: 480px;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
|
||||
.equipment-pics > div:hover > figure {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure > img {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure > figcaption {
|
||||
height: 24px;
|
||||
margin-top: 8px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -36,13 +36,17 @@
|
||||
:dialogVisible="open"
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
width="60%"
|
||||
@confirm="submitForm">
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
key="index-dialog-form"
|
||||
ref="form"
|
||||
:dataForm="form"
|
||||
:rows="rows" />
|
||||
label-position="top"
|
||||
size="small"
|
||||
v-model="form"
|
||||
:rows="computedRows"
|
||||
:has-file="true" />
|
||||
</base-dialog>
|
||||
|
||||
<!-- 设备 详情 - 编辑 -->
|
||||
@@ -50,12 +54,13 @@
|
||||
v-if="editVisible"
|
||||
ref="drawer"
|
||||
:mode="editMode"
|
||||
@update-mode="editMode = $event"
|
||||
:data-id="form.id"
|
||||
:sections="[
|
||||
{
|
||||
name: '基本信息',
|
||||
key: 'base',
|
||||
rows: rows,
|
||||
rows: computedRows,
|
||||
url: '/base/equipment/get',
|
||||
urlUpdate: '/base/equipment/update',
|
||||
urlCreate: '/base/equipment/create',
|
||||
@@ -93,17 +98,14 @@
|
||||
},
|
||||
]"
|
||||
@refreshDataList="getList"
|
||||
@cancel="editVisible = false"
|
||||
@destroy="editVisible = false" />
|
||||
@cancel="cancelEdit"
|
||||
@destroy="cancelEdit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import EquipmentPics from './components/EquipmentPics';
|
||||
import EquipmentAssets from './components/EquipmentAssets';
|
||||
import EquipmentDrawer from './components/EquipmentDrawer';
|
||||
|
||||
import {
|
||||
@@ -115,6 +117,7 @@ import {
|
||||
exportEquipmentExcel,
|
||||
} from '@/api/base/equipment';
|
||||
import Editor from '@/components/Editor';
|
||||
import AssetsUpload from './components/AssetsUpload.vue';
|
||||
|
||||
export default {
|
||||
name: 'Equipment',
|
||||
@@ -127,6 +130,12 @@ export default {
|
||||
return {
|
||||
searchBarKeys: ['name', 'code'],
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi(`base:equipment:update`)
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:equipment:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
@@ -139,12 +148,6 @@ export default {
|
||||
btnName: '删除',
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi(`base:equipment:update`)
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
}
|
||||
: undefined,
|
||||
].filter((v) => v),
|
||||
tableProps: [
|
||||
{
|
||||
@@ -155,7 +158,7 @@ export default {
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备名称' },
|
||||
{ width: 256, prop: 'code', label: '检测编码' },
|
||||
{ width: 256, prop: 'code', label: '设备编码' },
|
||||
{ prop: 'equipmentType', label: '设备类型' },
|
||||
{ prop: 'enName', label: '英文名称' },
|
||||
{ prop: 'abbr', label: '缩写' },
|
||||
@@ -208,6 +211,13 @@ export default {
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
plain: true,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
|
||||
btnName: '新增',
|
||||
@@ -215,12 +225,6 @@ export default {
|
||||
plain: true,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
[
|
||||
@@ -239,8 +243,6 @@ export default {
|
||||
prop: 'code',
|
||||
url: '/base/equipment/getCode',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
input: true,
|
||||
label: '英文名称',
|
||||
@@ -250,6 +252,8 @@ export default {
|
||||
// disabled: true, // some condition, like detail mode...
|
||||
// }
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
input: true,
|
||||
label: '缩写',
|
||||
@@ -259,13 +263,15 @@ export default {
|
||||
// disabled: true, // some condition, like detail mode...
|
||||
// }
|
||||
},
|
||||
],
|
||||
[
|
||||
|
||||
{
|
||||
select: true,
|
||||
label: '设备类型',
|
||||
prop: 'equipmentTypeId',
|
||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// select: true,
|
||||
@@ -286,8 +292,6 @@ export default {
|
||||
label: '进厂日期',
|
||||
prop: 'enterTime',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
input: true,
|
||||
prop: 'tvalue',
|
||||
@@ -302,11 +306,14 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
input: true,
|
||||
label: '产品加工时间',
|
||||
label: '产品加工时间(s)',
|
||||
prop: 'processingTime',
|
||||
rules: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字值',
|
||||
@@ -315,8 +322,7 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
[
|
||||
|
||||
{
|
||||
input: true,
|
||||
label: '制造商',
|
||||
@@ -337,40 +343,79 @@ export default {
|
||||
prop: 'description',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
upload: true,
|
||||
label: '上传资料',
|
||||
prop: 'uploadFiles',
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||
bind: {
|
||||
headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
'show-file-list': false,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
diy: true,
|
||||
key: 'eq-assets',
|
||||
label: '设备资料',
|
||||
prop: 'fileNames',
|
||||
subcomponent: EquipmentAssets,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
diy: true,
|
||||
key: 'eq-pics',
|
||||
label: '设备图片',
|
||||
prop: 'fileUrls',
|
||||
subcomponent: EquipmentPics,
|
||||
pictures: async () => {
|
||||
// some async request
|
||||
return [];
|
||||
},
|
||||
},
|
||||
],
|
||||
// [
|
||||
// {
|
||||
// assetUpload: true,
|
||||
// label: '上传资料',
|
||||
// fieldName: 'assets',
|
||||
// subcomponent: AssetsUpload
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// {
|
||||
// assetUpload: true,
|
||||
// label: '上传图片',
|
||||
// fieldName: 'images',
|
||||
// subcomponent: AssetsUpload
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// {
|
||||
// upload: true,
|
||||
// label: '上传资料',
|
||||
// prop: 'uploadFiles',
|
||||
// url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||
// uploadFnName: 'assetsUpload', // 上传方法名
|
||||
// bind: {
|
||||
// headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
// 'show-file-list': false,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// diy: true,
|
||||
// key: 'eq-assets',
|
||||
// label: '设备资料',
|
||||
// prop: 'fileNames',
|
||||
// subcomponent: EquipmentAssets,
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// {
|
||||
// upload: true,
|
||||
// label: '上传图片',
|
||||
// prop: 'uploadImages',
|
||||
// url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||
// uploadFnName: 'imagesUpload', // 上传方法名
|
||||
// bind: {
|
||||
// headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
// 'show-file-list': false,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// diy: true,
|
||||
// key: 'eq-pics',
|
||||
// label: '设备图片',
|
||||
// prop: 'fileUrls',
|
||||
// subcomponent: EquipmentPics,
|
||||
// pictures: async () => {
|
||||
// // some async request
|
||||
// return [];
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// {
|
||||
// diy: true,
|
||||
// key: 'eq-pics',
|
||||
// label: '设备图片',
|
||||
// prop: 'fileUrls',
|
||||
// subcomponent: EquipmentPics,
|
||||
// pictures: async () => {
|
||||
// // some async request
|
||||
// return [];
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
],
|
||||
editVisible: false,
|
||||
editMode: 'edit', // 'edit', 'detail'
|
||||
@@ -399,11 +444,49 @@ export default {
|
||||
form: {
|
||||
id: null,
|
||||
},
|
||||
showUploadComponents: false, // 是否显示上传组件
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
computedRows() {
|
||||
return this.showUploadComponents
|
||||
? [
|
||||
...this.rows,
|
||||
[
|
||||
{
|
||||
assetUpload: true,
|
||||
key: 'eq-assets', // 用于区分不同的上传组件
|
||||
label: '上传资料',
|
||||
fieldName: 'assets',
|
||||
subcomponent: AssetsUpload,
|
||||
prop: 'uploadedAssets',
|
||||
default: [],
|
||||
bind: {
|
||||
'is-pic-mode': false,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
assetUpload: true,
|
||||
key: 'eq-pics', // 用于区分不同的上传组件
|
||||
label: '上传图片',
|
||||
fieldName: 'images',
|
||||
subcomponent: AssetsUpload,
|
||||
// prop: '',
|
||||
// default: [],
|
||||
bind: {
|
||||
'is-pic-mode': true,
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
: this.rows;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
@@ -420,6 +503,10 @@ export default {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
cancelEdit() {
|
||||
this.showUploadComponents = false;
|
||||
this.editVisible = false;
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
@@ -445,11 +532,13 @@ export default {
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.showUploadComponents = false;
|
||||
this.title = '添加设备';
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.showUploadComponents = true;
|
||||
const id = row.id;
|
||||
getEquipment(id).then((response) => {
|
||||
this.form = response.data;
|
||||
@@ -516,6 +605,7 @@ export default {
|
||||
viewDetail(id) {
|
||||
this.reset();
|
||||
this.editMode = 'detail';
|
||||
this.showUploadComponents = true;
|
||||
this.form.id = id;
|
||||
this.editVisible = true;
|
||||
this.$nextTick(() => {
|
||||
@@ -524,11 +614,11 @@ export default {
|
||||
},
|
||||
// overwrite basicPageMixin 里的 处理表格按钮 方法
|
||||
handleTableBtnClick({ data, type }) {
|
||||
console.log('[handleTableBtnClick]', data, type);
|
||||
switch (type) {
|
||||
case 'edit':
|
||||
this.reset();
|
||||
this.editMode = 'edit';
|
||||
this.showUploadComponents = true;
|
||||
this.form.id = data.id;
|
||||
this.editVisible = true;
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -37,7 +37,12 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
ref="form"
|
||||
v-model="form"
|
||||
:rows="rows"
|
||||
:has-file="true" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -55,7 +60,7 @@ import {
|
||||
exportEquipmentTypeExcel,
|
||||
} from '@/api/base/equipmentType';
|
||||
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
// import { getAccessToken } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentType',
|
||||
@@ -86,9 +91,9 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备类型名称', },
|
||||
{ prop: 'code', label: '检测类型编码', },
|
||||
{ prop: 'remark', label: '备注', },
|
||||
{ prop: 'name', label: '设备类型名称' },
|
||||
{ prop: 'code', label: '检测类型编码' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@@ -149,15 +154,13 @@ export default {
|
||||
prop: 'parentId',
|
||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||
},
|
||||
{},
|
||||
],
|
||||
[
|
||||
{
|
||||
upload: true,
|
||||
label: '上传资料',
|
||||
prop: 'uploadFiles',
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||
bind: {
|
||||
headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
'show-file-list': false,
|
||||
},
|
||||
prop: 'files',
|
||||
},
|
||||
],
|
||||
[{ input: true, label: '备注', prop: 'remark' }],
|
||||
@@ -209,8 +212,6 @@ export default {
|
||||
name: undefined,
|
||||
parentId: undefined,
|
||||
remark: undefined,
|
||||
fileNames: [],
|
||||
fileUrls: [],
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
@@ -236,6 +237,25 @@ export default {
|
||||
const id = row.id;
|
||||
getEquipmentType(id).then((response) => {
|
||||
this.form = response.data;
|
||||
// this.form = {
|
||||
// code: 'SBLX20230925184444000041',
|
||||
// name: '测试131',
|
||||
// remark: '测试可删除',
|
||||
// id: '1706258479729336322',
|
||||
// files: [
|
||||
// { fileName: '1.png', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '2.txt', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.rar', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.kkk', fileUrl: '', fileType: 2 },
|
||||
// { fileName: 'test.file', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '222', fileUrl: '', fileType: 2 },
|
||||
// { fileName: 'g', fileUrl: '', fileType: 2 },
|
||||
// ],
|
||||
// createTime: 1695638697000,
|
||||
// parentId: '1701869972319584257',
|
||||
// };
|
||||
// debugger;
|
||||
this.open = true;
|
||||
this.title = '修改设备类型';
|
||||
});
|
||||
@@ -267,7 +287,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除设备类型"' + row.name + '"?')
|
||||
.then(function () {
|
||||
return deleteEquipmentType(id);
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-08-01 16:59:06
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-16 11:16:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -12,21 +12,30 @@
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<el-form-item label="工厂编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入工厂编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工厂名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入工厂名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工厂编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入工厂编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工厂名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入工厂名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-form-item label="启用状态" prop="enabled">
|
||||
<el-select
|
||||
v-model="dataForm.enabled"
|
||||
@@ -38,9 +47,12 @@
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="70%">
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
@@ -51,7 +51,7 @@ const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '工厂编码'
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '工厂名称'
|
||||
|
||||
@@ -2,15 +2,14 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-02 15:12:42
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-10 16:49:03
|
||||
* @LastEditTime: 2023-10-13 16:35:03
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
:formConfigs="[{ label: '产线在制产品', type: 'title' }]"
|
||||
ref="searchBarForm" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
@@ -36,20 +35,17 @@ import { getProductPage } from '@/api/core/base/product';
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '在制产品',
|
||||
align: 'center',
|
||||
list: [],
|
||||
subcomponent: selectProduct,
|
||||
},
|
||||
{
|
||||
prop: 'recordTime',
|
||||
label: '开始时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
];
|
||||
@@ -63,14 +59,14 @@ export default {
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '同步',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
// formConfig: [
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '同步',
|
||||
// name: 'search',
|
||||
// color: 'primary',
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-03 14:09:18
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-10 16:54:09
|
||||
* @LastEditTime: 2023-10-13 16:47:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="tableInner">
|
||||
<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input>
|
||||
<el-popover
|
||||
placement="top"
|
||||
title="切换在制产品"
|
||||
@@ -28,8 +27,11 @@
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="text" slot="reference">切换</el-button>
|
||||
<el-button type="text" slot="reference">
|
||||
<svg-icon icon-class="changelogo"/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<el-input readonly v-model="list.productName" style="width: 50%;margin-left: 5px" ></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -61,6 +63,7 @@ export default {
|
||||
switchLineBindProduct(data).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.visible = false;
|
||||
this.list.productName = this.list.string.split('+')[1]
|
||||
this.$emit('emitData');
|
||||
});
|
||||
},
|
||||
|
||||
@@ -28,24 +28,20 @@ import { getProductPage } from '@/api/core/base/product';
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '在制产品',
|
||||
align: 'center',
|
||||
label: '在制产品'
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '结束时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
];
|
||||
@@ -86,7 +82,8 @@ export default {
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'createTime',
|
||||
param: 'startTime',
|
||||
valueFormat: 'timestamp'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -126,7 +123,7 @@ export default {
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productionLineId = val.productionLineId;
|
||||
this.listQuery.productId = val.productId;
|
||||
this.listQuery.createTime = val.createTime;
|
||||
this.listQuery.startTime = val.startTime;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<el-form-item label="产品类型" prop="typeDictValue">
|
||||
<el-select
|
||||
v-model="dataForm.typeDictValue"
|
||||
style="width: 100%"
|
||||
style="width: 100%"
|
||||
:disabled="isdetail"
|
||||
placeholder="请选择产品类型">
|
||||
<el-option
|
||||
@@ -58,7 +58,7 @@
|
||||
<el-form-item label="单位" prop="unitDictValue">
|
||||
<el-select
|
||||
v-model="dataForm.unitDictValue"
|
||||
style="width: 100%"
|
||||
style="width: 100%"
|
||||
:disabled="isdetail"
|
||||
placeholder="请选择单位">
|
||||
<el-option
|
||||
@@ -83,8 +83,8 @@
|
||||
<el-form-item label="单位平方数" prop="area">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.area"
|
||||
placeholder="请输入单位平方数" />
|
||||
v-model="dataForm.area"
|
||||
placeholder="请输入单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -111,6 +111,8 @@
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:add-button-show="isdetail ? null : '添加属性'"
|
||||
@emitButtonClick="addNew()"
|
||||
:table-data="productAttributeList">
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
@@ -123,15 +125,15 @@
|
||||
<pagination
|
||||
v-show="listQuery.total > 0"
|
||||
:total="listQuery.total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px">
|
||||
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
|
||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
@@ -145,6 +147,14 @@
|
||||
添加属性
|
||||
</el-button>
|
||||
</span>
|
||||
</div> -->
|
||||
|
||||
<div class="drawer-body__footer">
|
||||
<el-button style="" @click="goback()">取消</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</div>
|
||||
|
||||
<product-attr-add
|
||||
@@ -250,12 +260,12 @@ export default {
|
||||
},
|
||||
],
|
||||
area: [
|
||||
// {
|
||||
// type: 'float',
|
||||
// message: '单位平方数为浮点类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Float(val)',
|
||||
// },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数值',
|
||||
trigger: 'change',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
],
|
||||
processTime: [
|
||||
{
|
||||
@@ -263,12 +273,12 @@ export default {
|
||||
message: '完成单位产品用时不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
// {
|
||||
// type: 'number',
|
||||
// message: '完成单位产品用时为浮点类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Number(val)',
|
||||
// },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数值',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
],
|
||||
},
|
||||
isdetail: false,
|
||||
@@ -277,6 +287,7 @@ export default {
|
||||
methods: {
|
||||
initData() {
|
||||
this.productAttributeList.splice(0);
|
||||
this.listQuery.total = 0;
|
||||
},
|
||||
init(id, isdetail) {
|
||||
this.initData();
|
||||
@@ -304,12 +315,10 @@ export default {
|
||||
|
||||
getList() {
|
||||
// 获取产品的属性列表
|
||||
const params = {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
getProductAttrPage({
|
||||
...this.listQuery,
|
||||
productId: this.dataForm.id,
|
||||
};
|
||||
getProductAttrPage(params).then((response) => {
|
||||
}).then((response) => {
|
||||
this.productAttributeList = response.data.list;
|
||||
this.listQuery.total = response.data.total;
|
||||
});
|
||||
@@ -390,6 +399,8 @@ export default {
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
@@ -400,14 +411,20 @@ export default {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.drawer >>> .el-drawer__body {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
padding: 30px 24px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
@@ -422,4 +439,10 @@ export default {
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.drawer-body__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-01 14:55:51
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-08-03 15:22:53
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-13 10:27:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -50,30 +50,25 @@ import {
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '产品编码',
|
||||
align: 'center',
|
||||
label: '产品编码'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产品名称',
|
||||
align: 'center',
|
||||
label: '产品名称'
|
||||
},
|
||||
{
|
||||
prop: 'specifications',
|
||||
label: '规格',
|
||||
align: 'center',
|
||||
label: '规格'
|
||||
},
|
||||
{
|
||||
prop: 'unitDictValue',
|
||||
label: '单位',
|
||||
align: 'center',
|
||||
subcomponent: unitDict,
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
filter: parseTime
|
||||
},
|
||||
];
|
||||
|
||||
@@ -127,14 +122,14 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
|
||||
@@ -7,53 +7,84 @@
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
class="dialog-inner__form"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="90px">
|
||||
<el-form-item label="产线编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入产线编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入产线名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="factoryId" label="工厂名称">
|
||||
<el-select
|
||||
v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
|
||||
<el-option
|
||||
v-for="item in urlOptions.optionArr.arr0"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线TT值(h)" prop="tvalue">
|
||||
<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="额外编码" prop="externalCode">
|
||||
<el-input
|
||||
v-model="dataForm.externalCode"
|
||||
clearable
|
||||
placeholder="请输入额外编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
type="textarea"
|
||||
placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入产线编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入产线名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="factoryId" label="工厂名称">
|
||||
<el-select
|
||||
v-model="dataForm.factoryId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择工厂">
|
||||
<el-option
|
||||
v-for="item in urlOptions.optionArr.arr0"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线TT值(h)" prop="tvalue">
|
||||
<el-input
|
||||
v-model="dataForm.tvalue"
|
||||
clearable
|
||||
placeholder="请输入每小时下片数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="额外编码" prop="externalCode">
|
||||
<el-input
|
||||
v-model="dataForm.externalCode"
|
||||
clearable
|
||||
placeholder="请输入额外编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
clearable
|
||||
placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
type="textarea"
|
||||
placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
@@ -65,22 +96,20 @@ import {
|
||||
getProductionLine,
|
||||
getCode,
|
||||
} from '@/api/core/base/productionLine';
|
||||
import {
|
||||
getFactoryPage,
|
||||
} from '@/api/core/base/factory';
|
||||
import { getFactoryPage } from '@/api/core/base/factory';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getOption: true,
|
||||
isGetCode: true,
|
||||
codeURL: getCode,
|
||||
getOption: true,
|
||||
isGetCode: true,
|
||||
codeURL: getCode,
|
||||
createURL: createProductionLine,
|
||||
updateURL: updateProductionLine,
|
||||
infoURL: getProductionLine,
|
||||
optionArrUrl: [getFactoryPage],
|
||||
optionArrUrl: [getFactoryPage],
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
@@ -99,13 +128,26 @@ export default {
|
||||
name: [
|
||||
{ required: true, message: '产线名称不能为空', trigger: 'blur' },
|
||||
],
|
||||
factoryId: [
|
||||
factoryId: [
|
||||
{ required: true, message: '工厂不能为空', trigger: 'change' },
|
||||
],
|
||||
tvalue: [
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字',
|
||||
trigger: 'change',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-inner__form >>> .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="70%">
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
@@ -52,45 +52,37 @@ import {
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '产线编码',
|
||||
align: 'center',
|
||||
label: '产线编码'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'factoryName',
|
||||
label: '工厂',
|
||||
align: 'center',
|
||||
label: '工厂'
|
||||
},
|
||||
{
|
||||
prop: 'externalCode',
|
||||
label: '额外编码',
|
||||
align: 'center',
|
||||
label: '额外编码'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '当前状态',
|
||||
align: 'center',
|
||||
filter: codeFilter('lineStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: '描述',
|
||||
align: 'center',
|
||||
label: '描述'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
align: 'center',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
filter: parseTime
|
||||
},
|
||||
];
|
||||
|
||||
@@ -132,14 +124,14 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
@@ -173,7 +165,7 @@ export default {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
this.total = response.data.total;
|
||||
this.listQuery.total = response.data.total;
|
||||
this.getStatus(response.data.list);
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
@@ -195,7 +187,7 @@ export default {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;.7
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.name = val.name;
|
||||
this.getDataList();
|
||||
break;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-01 13:52:10
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-09-21 10:48:54
|
||||
* @LastEditTime: 2023-10-16 13:40:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -12,33 +12,45 @@
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="90px">
|
||||
<el-form-item label="工段编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入工段编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工段名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入工段名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="productionLineId" label="产线">
|
||||
<el-select
|
||||
v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
|
||||
<el-option
|
||||
v-for="item in urlOptions.optionArr.arr0"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工段编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
placeholder="请输入工段编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工段名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
placeholder="请输入工段名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="productionLineId" label="产线">
|
||||
<el-select
|
||||
v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
|
||||
<el-option
|
||||
v-for="item in urlOptions.optionArr.arr0"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="70%">
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
@@ -50,34 +50,28 @@ import {
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '工段编码',
|
||||
align: 'center',
|
||||
label: '工段编码'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '工段名称',
|
||||
align: 'center',
|
||||
label: '工段名称'
|
||||
},
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: '排序',
|
||||
align: 'center',
|
||||
label: '排序'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
align: 'center',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
filter: parseTime
|
||||
},
|
||||
];
|
||||
|
||||
@@ -119,14 +113,14 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-10-09 09:08:08
|
||||
* @LastEditTime: 2023-10-16 15:10:42
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -12,6 +12,7 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
@@ -22,6 +23,7 @@
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -117,6 +119,7 @@ export default {
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
},
|
||||
fileName: '',
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
dialogVisible: false,
|
||||
@@ -194,7 +197,8 @@ export default {
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
};
|
||||
@@ -207,6 +211,7 @@ export default {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
var that = this
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
@@ -242,7 +247,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('产线统计自动报表.pdf')
|
||||
pdf.save(that.fileName + '产线产量.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
@@ -285,7 +290,7 @@ export default {
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '产线统计自动报表.xlsx')
|
||||
}), this.fileName + '产线产量.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
@@ -310,6 +315,9 @@ export default {
|
||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
|
||||
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
|
||||
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
|
||||
if (val.timeVal && val.timeVal.length > 0) {
|
||||
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
|
||||
}
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@@ -327,7 +335,7 @@ export default {
|
||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||
return item
|
||||
});
|
||||
this.total = response.data.total;
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
this.showData = this.tableData
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-10-09 15:14:42
|
||||
* @LastEditTime: 2023-10-16 15:18:23
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -12,6 +12,7 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
@@ -29,6 +30,7 @@
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -110,7 +112,7 @@ export default {
|
||||
showData: [],
|
||||
tableData: [],
|
||||
selectedList: [],
|
||||
fileName: [],
|
||||
fileName: '',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -145,7 +147,8 @@ export default {
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
};
|
||||
@@ -156,7 +159,7 @@ export default {
|
||||
}
|
||||
// const time = new Date()
|
||||
// this.formConfig[1].defaultSelect = [time, time]
|
||||
// this.getDataList()
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
@@ -199,7 +202,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_产线产量.pdf')
|
||||
pdf.save(that.fileName + '产线产量.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
@@ -222,7 +225,7 @@ export default {
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), this.fileName[0] + '-' + this.fileName[1] + '_产线产量.xlsx')
|
||||
}), this.fileName + '产线产量.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
@@ -265,17 +268,10 @@ export default {
|
||||
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;
|
||||
console.log('nihc 你好', val.timeVal)
|
||||
if (val.timeVal && val.timeVal.length > 0) {
|
||||
this.fileName[0] = val.timeVal[0].slice(0, 10)
|
||||
this.fileName[1] = val.timeVal[1].slice(0, 10)
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择时间',
|
||||
type: 'warning'
|
||||
});
|
||||
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
|
||||
}
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
@@ -289,7 +285,7 @@ export default {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data;
|
||||
this.total = response.data.total;
|
||||
this.listQuery.total = response.data.length;
|
||||
this.dataListLoading = false;
|
||||
this.showData = this.tableData
|
||||
});
|
||||
|
||||
@@ -11,13 +11,14 @@
|
||||
ref="search-bar" />
|
||||
<el-skeleton v-if="initing" :rows="6" animated />
|
||||
<!-- :span-method="mergeColumnHandler" -->
|
||||
<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }">
|
||||
<base-table
|
||||
v-else
|
||||
v-if="tableData && tableData.length > 0"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
@emitFun="handleEmitFun"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -65,10 +66,10 @@ export default {
|
||||
label: times.slice(0, 10) + ' ' + times.slice(11),
|
||||
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' }
|
||||
{ prop: times + '_in', label: '投入数量' },
|
||||
{ prop: times + '_out', label: '产出数量' },
|
||||
{ prop: times + '_junk', label: '报废数量' },
|
||||
{ prop: times + '_area', label: '产出面积' }
|
||||
]
|
||||
}
|
||||
this.arr.push(subprop)
|
||||
@@ -149,14 +150,14 @@ export default {
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '生产线',
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '产品规格',
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
this.buildProps(res.data.nameData);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-10-08 10:51:49
|
||||
* @LastEditTime: 2023-10-16 15:19:04
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -13,6 +13,7 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
@@ -30,6 +31,7 @@
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -129,6 +131,7 @@ export default {
|
||||
tableBtn: [],
|
||||
tableData: [],
|
||||
showData: [],
|
||||
fileName: '',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -187,7 +190,8 @@ export default {
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
};
|
||||
@@ -200,6 +204,7 @@ export default {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
var that = this
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
@@ -235,7 +240,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('工段统计自动报表.pdf')
|
||||
pdf.save(that.fileName + '工段统计.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
@@ -258,7 +263,7 @@ export default {
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '工段统计自动报表.xlsx')
|
||||
}), this.fileName + '工段统计.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
@@ -307,6 +312,9 @@ export default {
|
||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
|
||||
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
|
||||
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
|
||||
if (val.timeVal && val.timeVal.length > 0) {
|
||||
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
|
||||
}
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@@ -325,7 +333,7 @@ export default {
|
||||
return item
|
||||
});
|
||||
this.showData = this.tableData
|
||||
this.total = response.data.total;
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
@@ -3,15 +3,20 @@
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@select-changed="handleSearchBarChanged"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:table-data="showData"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:selectWidth="55"
|
||||
:table-data="showData"
|
||||
@selection-change="selectChange"
|
||||
/>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
@@ -45,38 +50,31 @@ import html2canvas from 'html2canvas'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
label: '工段名称',
|
||||
align: 'center',
|
||||
label: '工段名称'
|
||||
},
|
||||
{
|
||||
prop: 'inputNum',
|
||||
label: '进片数量/片',
|
||||
align: 'center',
|
||||
label: '进片数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'outputNum',
|
||||
label: '出片数量/片',
|
||||
align: 'center',
|
||||
label: '出片数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
label: '损耗数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/m²',
|
||||
align: 'center',
|
||||
label: '损耗面积/m²'
|
||||
},
|
||||
{
|
||||
prop: 'lossRate',
|
||||
label: '损耗比例/%',
|
||||
align: 'center',
|
||||
label: '损耗比例/%'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -110,6 +108,7 @@ export default {
|
||||
param: 'proLineId',
|
||||
defaultSelect: '',
|
||||
filterable: true,
|
||||
onchange: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@@ -132,15 +131,20 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
},
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
@@ -151,9 +155,39 @@ export default {
|
||||
// this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 根据产线获取工段 */
|
||||
async getWorksectionById(lineId) {
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/base/workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: {
|
||||
id: lineId,
|
||||
},
|
||||
});
|
||||
if (code == 0) {
|
||||
this.formConfig[1].selectOptions = data.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
handleSearchBarChanged({ param, value }) {
|
||||
if (!value) {
|
||||
this.formConfig[1].selectOptions = [];
|
||||
return;
|
||||
}
|
||||
switch (param) {
|
||||
case 'proLineId':
|
||||
this.getWorksectionById(value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
var that = this
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
@@ -189,7 +223,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('工段统计数据查询报表.pdf')
|
||||
pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
@@ -212,7 +246,7 @@ export default {
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '工段统计数据查询报表.xlsx')
|
||||
}), this.fileName[0] + '-' + this.fileName[1] + '_工段统计.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
@@ -293,10 +327,9 @@ export default {
|
||||
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.fileName[0] = val.timeSlot[0]
|
||||
this.fileName[1] = val.timeSlot[1]
|
||||
console.log('wfjmmki文件名称', this.fileName)
|
||||
if (val.timeSlot) {
|
||||
if (val.timeSlot && val.timeSlot.length > 0) {
|
||||
this.fileName[0] = val.timeSlot[0].slice(0, 10)
|
||||
this.fileName[1] = val.timeSlot[1].slice(0, 10)
|
||||
this.getDataList()
|
||||
} else {
|
||||
this.$message({
|
||||
@@ -315,7 +348,14 @@ export default {
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
if (val.timeSlot && val.timeSlot.length > 0) {
|
||||
this.handleExport();
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择时间',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
|
||||
@@ -97,6 +97,22 @@ export default {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params) {
|
||||
return (
|
||||
params[0].axisValue +
|
||||
`<br>` +
|
||||
params.map((item) => {
|
||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
|
||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
|
||||
let value = item.value ? item.value : '-'
|
||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
|
||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||
<span>${str}${seriesNameStr}</span>
|
||||
<span>${valueStr}</span>
|
||||
</span>`
|
||||
}).join(``)
|
||||
)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
@@ -106,7 +122,11 @@ export default {
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: legendData
|
||||
data: legendData,
|
||||
right: '1%',
|
||||
icon: 'rect',
|
||||
itemHeight: 8,
|
||||
itemWidth: 8
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
@@ -103,7 +103,8 @@ export default {
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: legendData
|
||||
data: legendData,
|
||||
right: '1%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
@@ -425,7 +425,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang='scss'>
|
||||
/* 时间整点 */
|
||||
.noneMinute .el-time-spinner__wrapper {
|
||||
width: 100%;
|
||||
@@ -433,6 +433,16 @@ export default {
|
||||
.noneMinute .el-scrollbar:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
@@ -446,8 +456,6 @@ export default {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.searchBarBox .foldClass {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
|
||||
@@ -15,7 +15,7 @@ export default {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(350)
|
||||
chartHeight: this.tableHeight(370)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(350)
|
||||
this.chartHeight = this.tableHeight(370)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@@ -86,17 +86,35 @@ export default {
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: 'World Population'
|
||||
// },
|
||||
color:['#288AFF','#8EF0AB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params) {
|
||||
return (
|
||||
params[0].axisValue +
|
||||
`<br>` +
|
||||
params.map((item) => {
|
||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
|
||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
|
||||
let value = item.value ? item.value : '-'
|
||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
|
||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||
<span>${str}${seriesNameStr}</span>
|
||||
<span>${valueStr}</span>
|
||||
</span>`
|
||||
}).join(``)
|
||||
)
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
legend: {
|
||||
right: '1%',
|
||||
icon: 'rect',
|
||||
itemHeight: 8,
|
||||
itemWidth: 8
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
|
||||
@@ -194,13 +194,23 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang='scss'>
|
||||
/* 级联选择器 */
|
||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
|
||||
display: none;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
@@ -208,8 +218,6 @@ export default {
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
:table-data="list"
|
||||
class="qoq-out-table"
|
||||
/>
|
||||
<div style='width: 100%;height: 300px;padding-top: 30px;'>
|
||||
<div class="chartTitle">环比分析图</div>
|
||||
<div style='width: 100%'>
|
||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,4 +112,21 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.chartTitle {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chartTitle::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
@@ -68,12 +68,6 @@ export default {
|
||||
}
|
||||
var option = {
|
||||
color:['#288AFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
|
||||
@@ -70,9 +70,9 @@ export default {
|
||||
|
||||
var option = {
|
||||
color:['#288AFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis'
|
||||
// },
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
|
||||
@@ -385,7 +385,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang='scss'>
|
||||
/* 级联选择器 */
|
||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
|
||||
display: none;
|
||||
@@ -397,6 +397,16 @@ export default {
|
||||
.noneMinute .el-scrollbar:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
@@ -410,8 +420,6 @@ export default {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.searchBarBox .foldClass {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
|
||||
@@ -77,7 +77,8 @@ export default {
|
||||
var option = {
|
||||
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
|
||||
legend: {
|
||||
data: keys
|
||||
data: keys,
|
||||
right:'1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
|
||||
@@ -125,7 +125,31 @@ export default {
|
||||
this.$emit('submit', this.queryParams)
|
||||
},
|
||||
exportData() {
|
||||
this.$emit('exportD')
|
||||
let name
|
||||
if (this.queryParams.objId) {
|
||||
name = this.getObjName(this.objList, this.queryParams.objId)
|
||||
} else {
|
||||
this.$modal.msgWarning("对象不能为空")
|
||||
return false
|
||||
}
|
||||
this.$emit('exportD', {name: name})
|
||||
},
|
||||
// 递归取对象name
|
||||
getObjName(list, id) {
|
||||
let _this = this
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let a = list[i]
|
||||
if (a.id === id) {
|
||||
return a.name
|
||||
} else {
|
||||
if (a.children && a.children.length > 0) {
|
||||
let res = _this.getObjName(a.children, id)
|
||||
if (res) {
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
transformTime(timeStamp) {// 本月最后一天
|
||||
let year = moment(timeStamp).format('YYYY')
|
||||
@@ -143,19 +167,20 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang='scss'>
|
||||
/* 级联选择器 */
|
||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@@ -170,4 +195,11 @@ export default {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area @submit="getList" @exportD="exportData"/>
|
||||
<div v-show='chartData.length'>
|
||||
<div class="chartTitle">同比分析图</div>
|
||||
<div style='width: 100%;height: 400px;'>
|
||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||||
</div>
|
||||
@@ -33,12 +34,12 @@ export default {
|
||||
chartData: [],
|
||||
tableProps: [],
|
||||
list: [],
|
||||
tableH: this.tableHeight(600)
|
||||
tableH: this.tableHeight(640)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(600)
|
||||
this.tableH = this.tableHeight(640)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@@ -99,9 +100,10 @@ export default {
|
||||
}
|
||||
this.chartData = this.list
|
||||
},
|
||||
exportData() {
|
||||
exportData(val) {
|
||||
if (this.list.length > 0) {
|
||||
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
|
||||
let fileName = val.name + "同比分析.xlsx"
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
@@ -110,7 +112,7 @@ export default {
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
"同比分析.xlsx"
|
||||
fileName
|
||||
)
|
||||
} catch (e) {
|
||||
if (typeof console !== "undefined") console.log(e, wbout);
|
||||
@@ -122,4 +124,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.chartTitle {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
.chartTitle::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
this.plcTableName = data.plcTableName
|
||||
this.objName = data.objName
|
||||
this.getList()
|
||||
if (title === 'view') {
|
||||
if (title === 'detail') {
|
||||
this.showBtn = false
|
||||
this.tableBtn = []
|
||||
} else {
|
||||
|
||||
@@ -113,22 +113,22 @@ export default {
|
||||
],
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:energy-plc-connect:bind')
|
||||
? {
|
||||
type: 'connect',
|
||||
btnName: '绑定'
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: '详情'
|
||||
},
|
||||
this.$auth.hasPermi('base:energy-plc-connect:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
type: 'view',
|
||||
btnName: '查看'
|
||||
},
|
||||
this.$auth.hasPermi('base:energy-plc-connect:bind')
|
||||
? {
|
||||
type: 'connect',
|
||||
btnName: '绑定'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:energy-plc-connect:delete')
|
||||
? {
|
||||
type: 'delete',
|
||||
@@ -205,10 +205,10 @@ export default {
|
||||
case 'delete':
|
||||
this.handleDelete(val.data)
|
||||
break
|
||||
case 'view':
|
||||
case 'detail':
|
||||
this.paramVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.plcParam.init(val.data, 'view')
|
||||
this.$refs.plcParam.init(val.data, 'detail')
|
||||
})
|
||||
break
|
||||
default:
|
||||
|
||||
@@ -1,54 +1,72 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
|
||||
<el-form-item label="监控对象" prop="objectId">
|
||||
<el-cascader
|
||||
style='width: 100%;'
|
||||
v-model="objIds"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
@change="selectObj"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型" prop="energyTypeId">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
|
||||
<el-option
|
||||
v-for="item in this.energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监控模式" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
|
||||
<el-option label="合并" :value= "1" ></el-option>
|
||||
<el-option label="详细" :value= "2" ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标类型" prop="limitType">
|
||||
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量阈值" prop="limitValue">
|
||||
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="监控对象" prop="objectId">
|
||||
<el-cascader
|
||||
style='width: 100%;'
|
||||
v-model="objIds"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
@change="selectObj"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="能源类型" prop="energyTypeId">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
|
||||
<el-option
|
||||
v-for="item in this.energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="监控模式" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
|
||||
<el-option label="合并" :value= "1" ></el-option>
|
||||
<el-option label="详细" :value= "2" ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="指标类型" prop="limitType">
|
||||
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="消耗量阈值" prop="limitValue">
|
||||
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -124,7 +124,7 @@ export default {
|
||||
this.energyType = data.energyType
|
||||
this.energyTypeId = data.energyTypeId
|
||||
this.getList()
|
||||
if (title === 'view') {
|
||||
if (title === 'detail') {
|
||||
this.showBtn = false
|
||||
this.tableBtn = []
|
||||
} else {
|
||||
|
||||
@@ -111,22 +111,22 @@ export default {
|
||||
],
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('monitoring:energy-statistics:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
type: 'view',
|
||||
btnName: '查看'
|
||||
},
|
||||
this.$auth.hasPermi('monitoring:energy-statistics:bind')
|
||||
? {
|
||||
type: 'connect',
|
||||
btnName: '绑定'
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: '详情'
|
||||
},
|
||||
this.$auth.hasPermi('monitoring:energy-statistics:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('monitoring:energy-statistics:delete')
|
||||
? {
|
||||
type: 'delete',
|
||||
@@ -199,9 +199,9 @@ export default {
|
||||
case 'delete':
|
||||
this.handleDelete(val.data)
|
||||
break
|
||||
case 'view':
|
||||
case 'detail':
|
||||
this.$nextTick(() => {
|
||||
this.$refs.plcParam.init(val.data, 'view')
|
||||
this.$refs.plcParam.init(val.data, 'detail')
|
||||
})
|
||||
break
|
||||
default:
|
||||
|
||||
@@ -43,7 +43,7 @@ export default {
|
||||
eq.okQuantity,
|
||||
eq.nokQuantity,
|
||||
eq.totalQuantity,
|
||||
eq.passRate.toFixed(4),
|
||||
eq.passRate?.toFixed(4),
|
||||
]);
|
||||
});
|
||||
return {
|
||||
|
||||
@@ -29,7 +29,10 @@
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
|
||||
<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
|
||||
<div
|
||||
v-if="activeName == 'graph'"
|
||||
class="graph"
|
||||
style="height: 40vh; display: flex; flex-direction: column">
|
||||
<div class="blue-title">各设备加工数量</div>
|
||||
<LineChart v-if="list && list.length" :list="list" />
|
||||
<div v-else class="no-data-bg"></div>
|
||||
@@ -87,6 +90,7 @@ export default {
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'recordTime',
|
||||
defaultSelect: [
|
||||
new Date(y, m, d)
|
||||
@@ -246,7 +250,9 @@ export default {
|
||||
created() {
|
||||
this.fillLineOptions();
|
||||
this.fillProductOptions();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
this.$refs['search-bar'].headBtnClick('search');
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab, event) {
|
||||
@@ -307,12 +313,16 @@ export default {
|
||||
},
|
||||
|
||||
handleSearchBarBtnClick(btn) {
|
||||
console.log('handleSearchBarBtnClick', btn);
|
||||
// debugger;
|
||||
switch (btn.btnName) {
|
||||
case 'search':
|
||||
this.queryParams.lineId = btn.lineId;
|
||||
this.queryParams.productId = btn.productId;
|
||||
this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null;
|
||||
this.queryParams.recordTime = btn.recordTime
|
||||
? btn.recordTime.map((time) =>
|
||||
moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
)
|
||||
: null;
|
||||
this.$nextTick(() => {
|
||||
this.getList();
|
||||
});
|
||||
@@ -388,7 +398,7 @@ export default {
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
@@ -398,5 +408,4 @@ export default {
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@ import * as echarts from 'echarts';
|
||||
*
|
||||
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
|
||||
*/
|
||||
function renderItem(params, api) { }
|
||||
// function renderItem(params, api) { }
|
||||
|
||||
export default class Gantt {
|
||||
constructor(el) {
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
<script>
|
||||
import LineChart from './components/lineChart.vue';
|
||||
import response from './response.json';
|
||||
// import response from './response.json';
|
||||
|
||||
export default {
|
||||
name: 'SGProduction',
|
||||
|
||||
@@ -1,497 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
|
||||
|
||||
<script src="./echarts.js"></script>
|
||||
<script>
|
||||
function getStartTime(timestamp) {
|
||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||
}
|
||||
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
console.log(`
|
||||
categoryIndex: ${categoryIndex},
|
||||
start: ${start},
|
||||
end: ${end},
|
||||
api.value0: ${api.value(0)}
|
||||
api.value1: ${api.value(1)}
|
||||
api.value2: ${api.value(2)}
|
||||
params.coordSys: ${JSON.stringify(params.coordSys)}
|
||||
api.size: ${api.size([0, 1])}
|
||||
api.style(): ${JSON.stringify(api.style())}
|
||||
`);
|
||||
|
||||
var height = api.size([0, 1])[1] * 2;
|
||||
// 用一个矩形去截取另一个矩形
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
// 被截取矩形
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height,
|
||||
},
|
||||
// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
|
||||
// 截取矩形
|
||||
{
|
||||
// 截取掉grid以外的部分,实质是计算方块的偏移量
|
||||
x: params.coordSys.x, // {number} grid rect 的 x
|
||||
// y: params.coordSys.y, // {number} grid rect 的 y
|
||||
y: params.coordSys.y - 16, // {number} grid rect 的 y,并多减掉 16 个单位
|
||||
// width: end[0] - start[0],
|
||||
width: params.coordSys.width, // {number} grid rect 的 width
|
||||
height: params.coordSys.height, // {number} grid rect 的 height
|
||||
}
|
||||
);
|
||||
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style(),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function getXaxisRange(startTime) {
|
||||
return Array(24)
|
||||
.fill(startTime)
|
||||
.map((item, index) => {
|
||||
return new Date(item + index * 3600 * 1000)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
});
|
||||
}
|
||||
|
||||
function getTodayStart(today) {
|
||||
const [y, m, d] = [
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate(),
|
||||
];
|
||||
return new Date(y, m, d).getTime();
|
||||
}
|
||||
|
||||
/** 颜色配置 */
|
||||
const types = [
|
||||
{ name: '运行', color: '#288AFF' },
|
||||
{ name: '故障', color: '#FC9C91' },
|
||||
{ name: '计划停机', color: '#FFDC94' },
|
||||
{ name: '空白', color: '#F2F4F9' },
|
||||
];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985',
|
||||
// },
|
||||
},
|
||||
formatter: (params) => {
|
||||
// console.log('formatter', params)
|
||||
// return `
|
||||
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
|
||||
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
|
||||
// <span>${params[0].seriesName}</span>
|
||||
// <span>${params[0].name}</span>
|
||||
// </div>
|
||||
// `
|
||||
return `
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
|
||||
<h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
|
||||
</div>
|
||||
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
|
||||
`
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
id: 0,
|
||||
top: 10,
|
||||
left: 128,
|
||||
right: 64,
|
||||
height: 56,
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// top: 80,
|
||||
// height: 56,
|
||||
// },
|
||||
// ***************** 添加第二个grid *****************
|
||||
{
|
||||
id: 1,
|
||||
top: 180,
|
||||
left: 128,
|
||||
right: 64,
|
||||
height: 56
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
id: 'asdf',
|
||||
gridIndex: 0,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
inside: true,
|
||||
},
|
||||
type: 'time',
|
||||
min: getTodayStart(new Date()), // <===
|
||||
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
margin: 12,
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
// data: getXaxisRange(getTodayStart(new Date())),
|
||||
},
|
||||
{
|
||||
id: 'asdff',
|
||||
gridIndex: 0,
|
||||
axisLabel: { show: false },
|
||||
axisLine: { show: false },
|
||||
},
|
||||
// ***************** 添加第二个 xAxis *****************
|
||||
{
|
||||
id: 'asdfjk',
|
||||
gridIndex: 1,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
inside: true,
|
||||
},
|
||||
type: 'time',
|
||||
min: getTodayStart(new Date()), // <===
|
||||
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
margin: 12,
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
// data: getXaxisRange(getTodayStart(new Date())),
|
||||
},
|
||||
{
|
||||
id: 'fjkd',
|
||||
gridIndex: 1,
|
||||
axisLabel: { show: false },
|
||||
axisLine: { show: false },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
// 主y轴
|
||||
{
|
||||
id: 0,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
name: '设备1',
|
||||
nameLocation: 'center',
|
||||
nameGap: 56,
|
||||
nameRotate: 0,
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {},
|
||||
},
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
// 辅y轴
|
||||
{
|
||||
id: 1,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
// ***************** 添加第二个 yAxis *****************
|
||||
{
|
||||
id: 2,
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
name: '设备1',
|
||||
nameLocation: 'center',
|
||||
nameGap: 56,
|
||||
nameRotate: 0,
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {},
|
||||
},
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
// 辅y轴
|
||||
{
|
||||
id: 3,
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// 沉默的背景
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '无数据',
|
||||
value: [0, 1696694400000, 1696780800000, 0],
|
||||
tooltip: { show: false },
|
||||
// silent: true,
|
||||
// animation: false,
|
||||
// universalTransition: { enable: false },
|
||||
// hoverAnimation: false,
|
||||
// selectMode: true,
|
||||
// select: { disabled: true },
|
||||
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
|
||||
// z: 0,
|
||||
// zlevel: 0,
|
||||
// emphasis: { disabled: true },
|
||||
itemStyle: {
|
||||
color: '#ccc',
|
||||
opacity: 0.3,
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备1',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696694400000, 1696699400000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696730000000, 1696734040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '故障',
|
||||
value: [0, 1696737040000, 1696754040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1696755000000, 1696759000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696759000000, 1696769000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1696769400000, 1696779000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// ***************** 添加第二个设备 *****************
|
||||
{
|
||||
// 沉默的背景
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '无数据',
|
||||
value: [0, 1696694400000, 1696780800000, 0],
|
||||
tooltip: { show: false },
|
||||
// silent: true,
|
||||
// animation: false,
|
||||
// universalTransition: { enable: false },
|
||||
// hoverAnimation: false,
|
||||
// selectMode: true,
|
||||
// select: { disabled: true },
|
||||
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
|
||||
// z: 0,
|
||||
// zlevel: 0,
|
||||
// emphasis: { disabled: true },
|
||||
itemStyle: {
|
||||
color: '#ccc',
|
||||
opacity: 0.3,
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696694400000, 1696699400000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
// showBackground: true,
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696730000000, 1696734040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '故障',
|
||||
value: [0, 1696737040000, 1696754040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1696755000000, 1696759000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1696759000000, 1696769000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1696769400000, 1696779000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const el = document.getElementById('app');
|
||||
const myChart = echarts.init(el);
|
||||
|
||||
console.log('mychart', myChart);
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -37,7 +37,7 @@
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width='70%'
|
||||
width='50%'
|
||||
>
|
||||
<group-class-add ref="classList" @successSubmit="successSubmit" />
|
||||
</base-dialog>
|
||||
@@ -108,12 +108,6 @@ export default {
|
||||
],
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:group-classes:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
type: 'cancel',
|
||||
btnName: '作废',
|
||||
@@ -128,6 +122,12 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
this.$auth.hasPermi('base:group-classes:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:group-classes:delete')
|
||||
? {
|
||||
type: 'delete',
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="80px" :model="form">
|
||||
<el-form-item label="班组名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组编码" prop="code">
|
||||
<el-input v-model="form.code" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组人数" prop="num">
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组编码" prop="code">
|
||||
<el-input v-model="form.code" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组人数" prop="num">
|
||||
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组组长" prop="leaderName">
|
||||
<el-input v-model="form.leaderName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -308,6 +308,16 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
}
|
||||
.groupTeamScheduling {
|
||||
background-color: #F2F4F9;
|
||||
.operationArea {
|
||||
|
||||
@@ -1,81 +1,238 @@
|
||||
<template xmlns="">
|
||||
<div class="container">
|
||||
<div class="logo"></div>
|
||||
<!-- 登录区域 -->
|
||||
<div class="content">
|
||||
<!-- 配图 -->
|
||||
<div class="pic"></div>
|
||||
<!-- 表单 -->
|
||||
<div class="field">
|
||||
<!-- [移动端]标题 -->
|
||||
<h2 class="mobile-title">
|
||||
<h3 class="title">芋道后台管理系统</h3>
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="logo"></div>
|
||||
<!-- 登录区域 -->
|
||||
<div class="content">
|
||||
<!-- 配图 -->
|
||||
<div class="pic">
|
||||
<div
|
||||
class="welcome"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
">
|
||||
<strong
|
||||
style="
|
||||
letter-spacing: 1px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 88px;
|
||||
">
|
||||
<span style="color: #26b9de">Wel</span>
|
||||
<span style="color: #fff">come</span>
|
||||
</strong>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
letter-spacing: 1px;
|
||||
color: #26b9de;
|
||||
opacity: 75%;
|
||||
">
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 8px;
|
||||
margin-right: 12px;
|
||||
border-radius: 100%;
|
||||
background: #26b9de;
|
||||
"></span>
|
||||
产线生产监控系统
|
||||
</p>
|
||||
</div>
|
||||
<video
|
||||
src="/static/videos/login.webm"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
style="
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
"></video>
|
||||
</div>
|
||||
<!-- 表单 -->
|
||||
<div class="field">
|
||||
<!-- [移动端]标题 -->
|
||||
<h2 class="mobile-title">
|
||||
<h3 class="title">中建材智能自动化研究院有限公司</h3>
|
||||
</h2>
|
||||
<h2 class="pc-title" style="">
|
||||
<h3
|
||||
class="title"
|
||||
style="
|
||||
margin: 0;
|
||||
margin-left: 32px;
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
color: #000;
|
||||
font-size: 36px;
|
||||
line-height: 54px;
|
||||
letter-spacing: 2px;
|
||||
">
|
||||
<img
|
||||
src="../assets/logo/cnbm.png"
|
||||
alt="cnbm_logo"
|
||||
style="
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
" />
|
||||
<span>中建材智能自动化研究院有限公司</span>
|
||||
</h3>
|
||||
<h3
|
||||
class="sub-title"
|
||||
style="
|
||||
margin: 0;
|
||||
margin-left: 32px;
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
color: #000;
|
||||
font-size: 36px;
|
||||
line-height: 54px;
|
||||
letter-spacing: 2px;
|
||||
">
|
||||
产线生产监控系统
|
||||
</h3>
|
||||
</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont">
|
||||
<el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
|
||||
<el-tab-pane label="账号密码登录" name="uname">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="短信验证码登录" name="sms">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
|
||||
<svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 账号密码登录 -->
|
||||
<div v-if="loginForm.loginType === 'uname'">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter.native="getCode">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
|
||||
</div>
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont">
|
||||
<el-tabs
|
||||
class="form"
|
||||
v-model="loginForm.loginType"
|
||||
style="float: none">
|
||||
<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane>
|
||||
<el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div style="">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="LoginRules"
|
||||
class="login-form">
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input
|
||||
v-model="loginForm.tenantName"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="租户">
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="tree"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 账号密码登录 -->
|
||||
<div v-if="loginForm.loginType === 'uname'">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="账号">
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="getCode">
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-checkbox
|
||||
v-model="loginForm.rememberMe"
|
||||
style="margin: 0 0 25px 0">
|
||||
记住密码
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- 短信验证码登录 -->
|
||||
<div v-if="loginForm.loginType === 'sms'">
|
||||
<el-form-item prop="mobile">
|
||||
<el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
|
||||
<svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobileCode">
|
||||
<el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
|
||||
class="sms-login-mobile-code-prefix" @keyup.enter.native="handleLogin">
|
||||
<template>
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
<template slot="append">
|
||||
<span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode"
|
||||
style="cursor: pointer;">获取验证码</span>
|
||||
<span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 短信验证码登录 -->
|
||||
<div v-if="loginForm.loginType === 'sms'">
|
||||
<el-form-item prop="mobile">
|
||||
<el-input
|
||||
v-model="loginForm.mobile"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="请输入手机号">
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="phone"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobileCode">
|
||||
<el-input
|
||||
v-model="loginForm.mobileCode"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="短信验证码"
|
||||
class="sms-login-mobile-code-prefix"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<!-- <template>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon" />
|
||||
</template> -->
|
||||
<template slot="suffix">
|
||||
<span
|
||||
v-if="mobileCodeTimer <= 0"
|
||||
class="getMobileCode"
|
||||
@click="getSmsCode"
|
||||
style="
|
||||
cursor: pointer;
|
||||
color: #0b58ff;
|
||||
font-size: 18px;
|
||||
line-height: 66px;
|
||||
padding-right: 12px;
|
||||
">
|
||||
获取验证码
|
||||
</span>
|
||||
<span v-if="mobileCodeTimer > 0" class="getMobileCode">
|
||||
{{ mobileCodeTimer }}秒后可重新获取
|
||||
</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
||||
@click.native.prevent="getCode">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%; height: 66px; font-size: 18px;"
|
||||
@click.native.prevent="getCode">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 社交登录 -->
|
||||
<!-- <el-form-item style="width:100%;">
|
||||
<!-- 社交登录 -->
|
||||
<!-- <el-form-item style="width:100%;">
|
||||
<div class="oauth-login" style="display:flex">
|
||||
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
|
||||
<img :src="item.img" height="25px" width="25px" alt="登录" >
|
||||
@@ -83,265 +240,305 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图形验证码 -->
|
||||
<Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }"
|
||||
@success="handleLogin" />
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
Copyright © 2023 中建材智能自动化院 All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
Copyright © 2023 中建材智能自动化院 All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图形验证码 -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
:captcha-type="'blockPuzzle'"
|
||||
:img-size="{ width: '400px', height: '200px' }"
|
||||
@success="handleLogin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sendSmsCode, socialAuthRedirect } from "@/api/login";
|
||||
import { getTenantIdByName } from "@/api/system/tenant";
|
||||
import { SystemUserSocialTypeEnum } from "@/utils/constants";
|
||||
import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
|
||||
import { sendSmsCode, socialAuthRedirect } from '@/api/login';
|
||||
import { getTenantIdByName } from '@/api/system/tenant';
|
||||
import { SystemUserSocialTypeEnum } from '@/utils/constants';
|
||||
import { getCaptchaEnable, getTenantEnable } from '@/utils/ruoyi';
|
||||
import {
|
||||
getPassword,
|
||||
getRememberMe, getTenantName,
|
||||
getUsername,
|
||||
removePassword, removeRememberMe, removeTenantName,
|
||||
removeUsername,
|
||||
setPassword, setRememberMe, setTenantId, setTenantName,
|
||||
setUsername
|
||||
} from "@/utils/auth";
|
||||
getPassword,
|
||||
getRememberMe,
|
||||
getTenantName,
|
||||
getUsername,
|
||||
removePassword,
|
||||
removeRememberMe,
|
||||
removeTenantName,
|
||||
removeUsername,
|
||||
setPassword,
|
||||
setRememberMe,
|
||||
setTenantId,
|
||||
setTenantName,
|
||||
setUsername,
|
||||
} from '@/utils/auth';
|
||||
|
||||
import Verify from '@/components/Verifition/Verify';
|
||||
import { resetUserPwd } from "@/api/system/user";
|
||||
import { resetUserPwd } from '@/api/system/user';
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
captchaEnable: true,
|
||||
tenantEnable: true,
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: "uname",
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
captchaVerification: "",
|
||||
mobile: "",
|
||||
mobileCode: "",
|
||||
rememberMe: false,
|
||||
tenantName: "技术中心",
|
||||
},
|
||||
scene: 21,
|
||||
name: 'Login',
|
||||
components: {
|
||||
Verify,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
codeUrl: '',
|
||||
captchaEnable: true,
|
||||
tenantEnable: true,
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: 'uname',
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
captchaVerification: '',
|
||||
mobile: '',
|
||||
mobileCode: '',
|
||||
rememberMe: false,
|
||||
tenantName: '技术中心',
|
||||
},
|
||||
scene: 21,
|
||||
|
||||
LoginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, trigger: "blur", message: "手机号不能为空" },
|
||||
{
|
||||
validator: function (rule, value, callback) {
|
||||
if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
|
||||
callback(new Error("手机号格式错误"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}, trigger: "blur"
|
||||
}
|
||||
],
|
||||
tenantName: [
|
||||
{ required: true, trigger: "blur", message: "租户不能为空" },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// debugger
|
||||
getTenantIdByName(value).then(res => {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
// 设置租户
|
||||
setTenantId(tenantId)
|
||||
callback();
|
||||
} else {
|
||||
callback('租户不存在');
|
||||
}
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
// 枚举
|
||||
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 租户开关
|
||||
this.tenantEnable = getTenantEnable();
|
||||
if (this.tenantEnable) {
|
||||
getTenantIdByName(this.loginForm.tenantName).then(res => { // 设置租户
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId)
|
||||
}
|
||||
});
|
||||
}
|
||||
// 验证码开关
|
||||
this.captchaEnable = getCaptchaEnable();
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
// 情况一,未开启:则直接登录
|
||||
if (!this.captchaEnable) {
|
||||
this.handleLogin({})
|
||||
return;
|
||||
}
|
||||
LoginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: 'blur', message: '用户名不能为空' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', message: '密码不能为空' },
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, trigger: 'blur', message: '手机号不能为空' },
|
||||
{
|
||||
validator: function (rule, value, callback) {
|
||||
if (
|
||||
/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
|
||||
value
|
||||
) === false
|
||||
) {
|
||||
callback(new Error('手机号格式错误'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
tenantName: [
|
||||
{ required: true, trigger: 'blur', message: '租户不能为空' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// debugger
|
||||
getTenantIdByName(value).then((res) => {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
// 设置租户
|
||||
setTenantId(tenantId);
|
||||
callback();
|
||||
} else {
|
||||
callback('租户不存在');
|
||||
}
|
||||
});
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
// 枚举
|
||||
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 租户开关
|
||||
this.tenantEnable = getTenantEnable();
|
||||
if (this.tenantEnable) {
|
||||
getTenantIdByName(this.loginForm.tenantName).then((res) => {
|
||||
// 设置租户
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 验证码开关
|
||||
this.captchaEnable = getCaptchaEnable();
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect
|
||||
? decodeURIComponent(this.$route.query.redirect)
|
||||
: undefined;
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
// 情况一,未开启:则直接登录
|
||||
if (!this.captchaEnable) {
|
||||
this.handleLogin({});
|
||||
return;
|
||||
}
|
||||
|
||||
// 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录
|
||||
// 弹出验证码
|
||||
this.$refs.verify.show()
|
||||
},
|
||||
getCookie() {
|
||||
const username = getUsername();
|
||||
const password = getPassword();
|
||||
const rememberMe = getRememberMe();
|
||||
const tenantName = getTenantName();
|
||||
this.loginForm = {
|
||||
...this.loginForm,
|
||||
username: username ? username : this.loginForm.username,
|
||||
password: password ? password : this.loginForm.password,
|
||||
rememberMe: rememberMe ? getRememberMe() : false,
|
||||
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
|
||||
};
|
||||
},
|
||||
handleLogin(captchaParams) {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
// 设置 Cookie
|
||||
if (this.loginForm.rememberMe) {
|
||||
setUsername(this.loginForm.username)
|
||||
setPassword(this.loginForm.password)
|
||||
setRememberMe(this.loginForm.rememberMe)
|
||||
setTenantName(this.loginForm.tenantName)
|
||||
} else {
|
||||
removeUsername()
|
||||
removePassword()
|
||||
removeRememberMe()
|
||||
removeTenantName()
|
||||
}
|
||||
this.loginForm.captchaVerification = captchaParams.captchaVerification
|
||||
// 发起登陆
|
||||
// console.log("发起登录", this.loginForm);
|
||||
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => {
|
||||
});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async doSocialLogin(socialTypeEnum) {
|
||||
// 设置登录中
|
||||
this.loading = true;
|
||||
let tenant = false;
|
||||
if (this.tenantEnable) {
|
||||
await this.$prompt('请输入租户名称', "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消"
|
||||
}).then(async ({ value }) => {
|
||||
await getTenantIdByName(value).then(res => {
|
||||
const tenantId = res.data;
|
||||
tenant = true
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId)
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
// 取消登录按钮 loading状态
|
||||
this.loading = false;
|
||||
// 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录
|
||||
// 弹出验证码
|
||||
this.$refs.verify.show();
|
||||
},
|
||||
getCookie() {
|
||||
const username = getUsername();
|
||||
const password = getPassword();
|
||||
const rememberMe = getRememberMe();
|
||||
const tenantName = getTenantName();
|
||||
this.loginForm = {
|
||||
...this.loginForm,
|
||||
username: username ? username : this.loginForm.username,
|
||||
password: password ? password : this.loginForm.password,
|
||||
rememberMe: rememberMe ? getRememberMe() : false,
|
||||
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
|
||||
};
|
||||
},
|
||||
handleLogin(captchaParams) {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
// 设置 Cookie
|
||||
if (this.loginForm.rememberMe) {
|
||||
setUsername(this.loginForm.username);
|
||||
setPassword(this.loginForm.password);
|
||||
setRememberMe(this.loginForm.rememberMe);
|
||||
setTenantName(this.loginForm.tenantName);
|
||||
} else {
|
||||
removeUsername();
|
||||
removePassword();
|
||||
removeRememberMe();
|
||||
removeTenantName();
|
||||
}
|
||||
this.loginForm.captchaVerification =
|
||||
captchaParams.captchaVerification;
|
||||
// 发起登陆
|
||||
// console.log("发起登录", this.loginForm);
|
||||
this.$store
|
||||
.dispatch(
|
||||
this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login',
|
||||
this.loginForm
|
||||
)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' }).catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async doSocialLogin(socialTypeEnum) {
|
||||
// 设置登录中
|
||||
this.loading = true;
|
||||
let tenant = false;
|
||||
if (this.tenantEnable) {
|
||||
await this.$prompt('请输入租户名称', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(async ({ value }) => {
|
||||
await getTenantIdByName(value).then((res) => {
|
||||
const tenantId = res.data;
|
||||
tenant = true;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消登录按钮 loading状态
|
||||
this.loading = false;
|
||||
|
||||
return false
|
||||
});
|
||||
} else {
|
||||
tenant = true
|
||||
}
|
||||
if (tenant) {
|
||||
// 计算 redirectUri
|
||||
const redirectUri = location.origin + '/social-login?'
|
||||
+ encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢
|
||||
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
|
||||
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
|
||||
// 进行跳转
|
||||
socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
|
||||
// console.log(res.url);
|
||||
window.location.href = res.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** ========== 以下为升级短信登录 ========== */
|
||||
getSmsCode() {
|
||||
if (this.mobileCodeTimer > 0) return;
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (!valid) return;
|
||||
sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => {
|
||||
this.$modal.msgSuccess("获取验证码成功")
|
||||
this.mobileCodeTimer = 60;
|
||||
let msgTimer = setInterval(() => {
|
||||
this.mobileCodeTimer = this.mobileCodeTimer - 1;
|
||||
if (this.mobileCodeTimer <= 0) {
|
||||
clearInterval(msgTimer);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
tenant = true;
|
||||
}
|
||||
if (tenant) {
|
||||
// 计算 redirectUri
|
||||
const redirectUri =
|
||||
location.origin +
|
||||
'/social-login?' +
|
||||
encodeURIComponent(
|
||||
'type=' +
|
||||
socialTypeEnum.type +
|
||||
'&redirect=' +
|
||||
(this.redirect || '/')
|
||||
); // 重定向不能丢
|
||||
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
|
||||
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
|
||||
// 进行跳转
|
||||
socialAuthRedirect(
|
||||
socialTypeEnum.type,
|
||||
encodeURIComponent(redirectUri)
|
||||
).then((res) => {
|
||||
// console.log(res.url);
|
||||
window.location.href = res.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** ========== 以下为升级短信登录 ========== */
|
||||
getSmsCode() {
|
||||
if (this.mobileCodeTimer > 0) return;
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (!valid) return;
|
||||
sendSmsCode(
|
||||
this.loginForm.mobile,
|
||||
this.scene,
|
||||
this.loginForm.uuid,
|
||||
this.loginForm.code
|
||||
).then((res) => {
|
||||
this.$modal.msgSuccess('获取验证码成功');
|
||||
this.mobileCodeTimer = 60;
|
||||
let msgTimer = setInterval(() => {
|
||||
this.mobileCodeTimer = this.mobileCodeTimer - 1;
|
||||
if (this.mobileCodeTimer <= 0) {
|
||||
clearInterval(msgTimer);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/login.scss";
|
||||
|
||||
@import '~@/assets/styles/login.scss';
|
||||
|
||||
.oauth-login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oauth-login-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.oauth-login-item img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.oauth-login-item span:hover {
|
||||
text-decoration: underline red;
|
||||
color: red;
|
||||
text-decoration: underline red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.sms-login-mobile-code-prefix {
|
||||
:deep(.el-input__prefix) {
|
||||
top: 22%;
|
||||
}
|
||||
}</style>
|
||||
:deep(.el-input__prefix) {
|
||||
top: 22%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -77,7 +77,6 @@ export default {
|
||||
label: '设备名称',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'equipmentCode',
|
||||
label: '设备编码',
|
||||
},
|
||||
@@ -117,6 +116,7 @@ export default {
|
||||
{
|
||||
_action: 'params-monitor',
|
||||
label: '操作',
|
||||
width: 56,
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@@ -124,10 +124,10 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
class: 'iconfont icon-detail',
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
_this.$emit('emitData', {
|
||||
action: _this.injectData._action,
|
||||
// value: _this.injectData.id,
|
||||
@@ -135,8 +135,8 @@ export default {
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
'查看详情'
|
||||
}
|
||||
// '查看详情'
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
ref="form"
|
||||
:dataForm="form"
|
||||
v-model="form"
|
||||
:rows="[
|
||||
[
|
||||
{
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
ref="form"
|
||||
:dataForm="form"
|
||||
v-model="form"
|
||||
:rows="[
|
||||
[
|
||||
{
|
||||
|
||||
@@ -64,6 +64,7 @@ export default {
|
||||
name: item.inspectionContent,
|
||||
type: 'bar',
|
||||
barCategoryGap: 12,
|
||||
barWidth: 20,
|
||||
data: [],
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user