Merge branch 'test' into dy
This commit is contained in:
helloDy
commit
699810f40a
@ -19,9 +19,10 @@ export function createOrUpdateList(data) {
|
||||
}
|
||||
|
||||
// 自动排班，填充上月已有的排班
|
||||
export function autoSet() {
|
||||
export function autoSet(query) {
|
||||
return request({
|
||||
url: '/base/group-team-scheduling/autoSet',
|
||||
method: 'get'
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/factory-icon.png
Normal file
BIN
src/assets/images/factory-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
src/assets/images/no-data-bg.png
Normal file
BIN
src/assets/images/no-data-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
BIN
src/assets/images/tree-icon-1.png
Normal file
BIN
src/assets/images/tree-icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/tree-icon-2.png
Normal file
BIN
src/assets/images/tree-icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@ -6,11 +6,12 @@
|
||||
@import './btn.scss';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
// label {
|
||||
@ -27,170 +28,195 @@ body {
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 4px 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
background: #eef1f6;
|
||||
padding: 8px 24px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #eef1f6;
|
||||
padding: 8px 24px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(32, 182, 249, 1) 0%,
|
||||
rgba(32, 182, 249, 1) 0%,
|
||||
rgba(33, 120, 241, 1) 100%,
|
||||
rgba(33, 120, 241, 1) 100%
|
||||
);
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
&.draft {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
&.deleted {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//refine vue-multiselect plugin
|
||||
.multiselect {
|
||||
line-height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.multiselect--active {
|
||||
z-index: 1000 !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.no-data-bg {
|
||||
height: 240px;
|
||||
background: url(../images/no-data-bg.png) 50% 100% / contain
|
||||
no-repeat;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '暂无数据';
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #ccc;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,110 +5,123 @@
|
||||
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-message-box__status + .el-message-box__message{
|
||||
word-break: break-word;
|
||||
.el-message-box__status + .el-message-box__message {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
// margin-top: 6vh !important;
|
||||
margin-top: 12vh !important;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
}
|
||||
|
||||
.el-dialog{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - 30px);
|
||||
max-height: calc(100% - 70px);
|
||||
.el-dialog__body {
|
||||
overflow: auto;
|
||||
}
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - 30px);
|
||||
max-height: calc(100% - 70px);
|
||||
.el-dialog__body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9;
|
||||
color: #515a6e;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*="el-icon-"] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9;
|
||||
color: #515a6e;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*='el-icon-'] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
.form-header {
|
||||
font-size:15px;
|
||||
color:#6379bb;
|
||||
border-bottom:1px solid #ddd;
|
||||
margin:8px 10px 25px 10px;
|
||||
padding-bottom:5px
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/** 表格布局 **/
|
||||
@ -122,169 +135,171 @@
|
||||
|
||||
/* tree border */
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #FFFFFF none;
|
||||
border-radius:4px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #ffffff none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-container .el-pagination {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media ( max-width : 768px) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--mini {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/** 表格更多操作下拉样式 */
|
||||
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
.el-table .el-dropdown-link,
|
||||
.el-table .el-dropdown-selfdefine {
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
.el-table .el-dropdown,
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
// border-bottom: 1px solid #e7eaec;
|
||||
// border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
// border-bottom: 1px solid #e7eaec;
|
||||
// border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px;
|
||||
padding: 15px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
background: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48D1CC;
|
||||
border-color: #48D1CC;
|
||||
color: #FFFFFF;
|
||||
background: #48d1cc;
|
||||
border-color: #48d1cc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
background-color: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖拽列样式 */
|
||||
.sortable-ghost{
|
||||
opacity: .8;
|
||||
color: #fff!important;
|
||||
background: #42b983!important;
|
||||
.sortable-ghost {
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import moment from 'moment';
|
||||
|
||||
/**
|
||||
* 用于动态表结构的 tableProps 生成
|
||||
* @param {*} nameData
|
||||
@ -16,10 +18,9 @@ export function handleNameData(nameData) {
|
||||
function step1(tree1) {
|
||||
return Array.from(new Set(tree1.map((item) => item.name)))
|
||||
.sort()
|
||||
.map((item) => ({
|
||||
prop: item,
|
||||
label: item,
|
||||
align: 'center',
|
||||
.map((time) => ({
|
||||
prop: time,
|
||||
label: moment(time).format('YYYY-MM-DD HH:mm:ss'),
|
||||
children: [],
|
||||
}));
|
||||
}
|
||||
@ -33,7 +34,6 @@ function step2(firstTierProps, tree2) {
|
||||
parent.children.push({
|
||||
label: nd.name,
|
||||
prop: `${parent.prop}-${nd.name}`,
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -85,12 +86,11 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||
{ prop: 'groupName', label: '分组', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备' },
|
||||
{ prop: 'groupName', label: '分组' },
|
||||
{
|
||||
_action: 'equipment-bind-group-show-alert',
|
||||
label: '分组报警',
|
||||
align: 'center',
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
@ -162,6 +162,9 @@ export default {
|
||||
label: '设备',
|
||||
url: '/base/equipment/page?pageNo=1&pageSize=100',
|
||||
prop: 'equipmentId',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
@ -173,6 +176,9 @@ export default {
|
||||
// depends: '__product_line', // 依赖产线获取数据
|
||||
// depends: 'productionLineId',
|
||||
prop: 'groupId',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
@ -223,7 +229,7 @@ export default {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
_// 执行查询
|
||||
_; // 执行查询
|
||||
getEquipmentBindGroupPage(this.queryParams).then((response) => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -83,28 +84,26 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'productionLine', label: '产线名称', align: 'center' },
|
||||
{ prop: 'workshopSection', label: '工段名称', align: 'center' },
|
||||
{ prop: 'equipment', label: '设备名称', align: 'center' },
|
||||
{ prop: 'sort', label: '工段中排序', align: 'center' },
|
||||
{ prop: 'productionLine', label: '产线名称' },
|
||||
{ prop: 'workshopSection', label: '工段名称' },
|
||||
{ prop: 'equipment', label: '设备名称' },
|
||||
{ prop: 'sort', label: '工段中排序' },
|
||||
{
|
||||
prop: 'lineDataType',
|
||||
label: '产线数据类型',
|
||||
align: 'center',
|
||||
filter: (val) =>
|
||||
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
|
||||
},
|
||||
{
|
||||
prop: 'sectionDataType',
|
||||
label: '工段数据类型',
|
||||
align: 'center',
|
||||
filter: (val) =>
|
||||
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
|
||||
},
|
||||
// {
|
||||
// action: 'show-alert',
|
||||
// label: '报警',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// subcomponent: {
|
||||
// props: ['injectData'],
|
||||
// render: function (h) {
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -84,13 +85,12 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备分组名称', align: 'center' },
|
||||
{ prop: 'code', label: '检测分组编码', align: 'center' },
|
||||
{ prop: 'remark', label: '备注', align: 'center' },
|
||||
{ prop: 'name', label: '设备分组名称' },
|
||||
{ prop: 'code', label: '设备分组编码' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
{
|
||||
_action: 'equipment-group-show-alert',
|
||||
label: '报警',
|
||||
align: 'center',
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
type: 'input',
|
||||
label: '分组编码',
|
||||
placeholder: '请输入设备分组编码',
|
||||
param: 'codes',
|
||||
param: 'code',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -172,6 +172,7 @@ export default {
|
||||
label: '分组编码',
|
||||
prop: 'code',
|
||||
url: '/base/equipment-group/getCode',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -302,11 +303,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm(
|
||||
'是否确认删除设备分组（用于同类型不同厂家的设备区分）编号为"' +
|
||||
id +
|
||||
'"的数据项?'
|
||||
)
|
||||
.confirm('是否确认删除设备分组 "' + row.name + '"?')
|
||||
.then(function () {
|
||||
return deleteEquipmentGroup(id);
|
||||
})
|
||||
|
||||
177
src/views/base/equipmentGroupAlarm/dialogForm.vue
Normal file
177
src/views/base/equipmentGroupAlarm/dialogForm.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-09-11 15:55:13
|
||||
description: DialogForm for equipmentBindSection only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="dataForm"
|
||||
label-width="100px"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="报警编码"
|
||||
prop="code"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入工段排序" />
|
||||
</el-form-item>
|
||||
<!--
|
||||
<el-form-item
|
||||
label="报警编码"
|
||||
prop="code"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.code"
|
||||
placeholder="请选择产线"
|
||||
@change="handleProductlineChange">
|
||||
<el-option
|
||||
v-for="opt in productionLineList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="报警类型"
|
||||
prop="type"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.type"
|
||||
placeholder="请选择报警类型"
|
||||
@change="$emit('update', dataForm)">
|
||||
<el-option
|
||||
v-for="opt in [
|
||||
{ label: '布尔型', value: 2 },
|
||||
{ label: '字符型', value: 1 },
|
||||
]"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="报警级别"
|
||||
prop="grade"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.grade"
|
||||
placeholder="请选择报警级别"
|
||||
@change="$emit('update', dataForm)">
|
||||
<el-option
|
||||
v-for="opt in getDictDatas(DICT_TYPE.EQU_ALARM_LEVEL)"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
v-if="+dataForm.type == 1"
|
||||
label="设备报警编码"
|
||||
prop="alarmCode">
|
||||
<el-input
|
||||
v-model="dataForm.alarmCode"
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入设备报警编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="参数列名"
|
||||
prop="plcParamName"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="dataForm.plcParamName"
|
||||
placeholder="请输入参数列名"
|
||||
@change="$emit('update', dataForm)"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="报警内容"
|
||||
prop="alarmContent"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="dataForm.alarmContent"
|
||||
placeholder="请输入报警内容"
|
||||
@change="$emit('update', dataForm)"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLoading: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getCode('/base/equipment-group-alarm/getCode').then((code) => {
|
||||
this.formLoading = false;
|
||||
this.$emit('update', {
|
||||
...this.dataForm,
|
||||
code,
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
async handleProductlineChange(id) {
|
||||
await this.getWorksectionList(id);
|
||||
this.dataForm.workshopSectionId = null;
|
||||
this.$emit('update', this.dataForm);
|
||||
},
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -37,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>
|
||||
@ -54,10 +55,11 @@ import {
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
import moment from 'moment';
|
||||
import { publicFormatter } from '@/utils/dict';
|
||||
import DialogForm from './dialogForm.vue';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentGroupAlarm',
|
||||
components: {},
|
||||
components: { DialogForm },
|
||||
mixins: [basicPageMixin],
|
||||
data() {
|
||||
return {
|
||||
@ -84,22 +86,27 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'code', label: '报警编码', align: 'center' },
|
||||
{ prop: 'type', label: '报警类型', align: 'center' },
|
||||
{ width: 240, prop: 'code', label: '报警编码' },
|
||||
{
|
||||
prop: 'type',
|
||||
label: '报警类型',
|
||||
filter: (val) =>
|
||||
val != null ? ['-', '字符型', '布尔型', '-'][val] : '-',
|
||||
},
|
||||
{
|
||||
prop: 'grade',
|
||||
label: '报警级别',
|
||||
align: 'center',
|
||||
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||
},
|
||||
{ prop: 'alarmCode', label: '设备报警编码', align: 'center' },
|
||||
{ prop: 'plcParamName', label: '参数列名', align: 'center' },
|
||||
{ prop: 'alarmContent', label: '报警内容', align: 'center' },
|
||||
{ prop: 'alarmCode', label: '设备报警编码' },
|
||||
{ prop: 'plcParamName', label: '参数列名' },
|
||||
{ prop: 'alarmContent', label: '报警内容' },
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '设备分组编码',
|
||||
width: '220',
|
||||
placeholder: '/',
|
||||
param: 'equipmentGroupCode',
|
||||
defaultSelect: null,
|
||||
@ -181,14 +188,14 @@ export default {
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
id: undefined,
|
||||
equipmentGroupId: undefined,
|
||||
code: undefined,
|
||||
type: undefined,
|
||||
grade: undefined,
|
||||
alarmCode: undefined,
|
||||
alarmContent: undefined,
|
||||
plcParamName: undefined,
|
||||
id: null,
|
||||
equipmentGroupId: null,
|
||||
code: null,
|
||||
type: null,
|
||||
grade: null,
|
||||
alarmCode: null,
|
||||
alarmContent: null,
|
||||
plcParamName: null,
|
||||
},
|
||||
// // 表单校验
|
||||
// rules: {
|
||||
@ -249,14 +256,14 @@ export default {
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
equipmentGroupId: undefined,
|
||||
code: undefined,
|
||||
type: undefined,
|
||||
grade: undefined,
|
||||
alarmCode: undefined,
|
||||
alarmContent: undefined,
|
||||
plcParamName: undefined,
|
||||
id: null,
|
||||
equipmentGroupId: null,
|
||||
code: null,
|
||||
type: null,
|
||||
grade: null,
|
||||
alarmCode: null,
|
||||
alarmContent: null,
|
||||
plcParamName: null,
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
@ -321,7 +328,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除设备分组报警明细编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除该报警?')
|
||||
.then(function () {
|
||||
return deleteEquipmentGroupAlarm(id);
|
||||
})
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
ref="pageTable"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
@ -58,9 +59,12 @@ const switchBtn = {
|
||||
name: 'SwitchBtn',
|
||||
props: ['injectData'],
|
||||
data() {
|
||||
return {
|
||||
active: +this.injectData[this.injectData.prop] == 1 ? true : false,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
return +this.injectData[this.injectData.prop] == 1 ? true : false;
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
render: function (h) {
|
||||
@ -72,8 +76,6 @@ const switchBtn = {
|
||||
},
|
||||
on: {
|
||||
change: (newVal) => {
|
||||
this.active = !this.active;
|
||||
console.log('changed emit', newVal);
|
||||
this.$emit('emitData', {
|
||||
action: 'update-collect',
|
||||
payload: {
|
||||
@ -95,6 +97,7 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
tableKey: Math.random(),
|
||||
searchBarKeys: ['name', 'plcTableName'],
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:equipment-plc:update')
|
||||
@ -118,17 +121,16 @@ export default {
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'code', label: '编码', align: 'center' },
|
||||
{ prop: 'plcTableName', label: '关联表名', align: 'center' },
|
||||
{ prop: 'name', label: '标识名称', align: 'center' },
|
||||
{ prop: 'enName', label: '英文名称', align: 'center' },
|
||||
{ prop: 'code', label: '编码' },
|
||||
{ prop: 'plcTableName', label: '关联表名' },
|
||||
{ prop: 'name', label: '标识名称' },
|
||||
{ prop: 'enName', label: '英文名称' },
|
||||
{
|
||||
prop: 'collection',
|
||||
label: '是否采集',
|
||||
align: 'center',
|
||||
subcomponent: switchBtn,
|
||||
},
|
||||
{ prop: 'description', label: '描述', align: 'center' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@ -185,6 +187,7 @@ export default {
|
||||
label: '编码',
|
||||
prop: 'code',
|
||||
url: '/base/equipment-group/getCode',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -192,7 +195,7 @@ export default {
|
||||
input: true,
|
||||
label: '标识',
|
||||
prop: 'name',
|
||||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
// bind: {
|
||||
// disabled: true, // some condition, like detail mode...
|
||||
// }
|
||||
@ -246,7 +249,7 @@ export default {
|
||||
handleEmitFun({ action, payload }) {
|
||||
switch (action) {
|
||||
case 'update-collect':
|
||||
this.reset();
|
||||
this.reset();
|
||||
const tempForm = {};
|
||||
Object.keys(this.form).forEach((key) => {
|
||||
tempForm[key] = payload[key];
|
||||
@ -267,6 +270,7 @@ export default {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
// this.tableKey = Math.random(); // method 1
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -61,7 +62,7 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
searchBarKeys: ['name', 'plcTableName'],
|
||||
searchBarKeys: ['equipmentId', 'plcId'],
|
||||
// tableBtn: [
|
||||
// this.$auth.hasPermi('base:equipment-plc:update')
|
||||
// ? {
|
||||
@ -98,18 +99,17 @@ export default {
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'productionLine', label: '产线', align: 'center' },
|
||||
{ prop: 'workshopSection', label: '工段', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备名', align: 'center' },
|
||||
{ prop: 'equipmentCode', label: '设备编码', align: 'center' },
|
||||
{ prop: 'plcCode', label: '关联表编码', align: 'center' },
|
||||
{ prop: 'plcTableName', label: '关联表名', align: 'center' },
|
||||
{ prop: 'plcName', label: '标识名称', align: 'center' },
|
||||
{ prop: 'bindingParameters', label: '绑定参数数量', align: 'center' },
|
||||
{ prop: 'productionLine', label: '产线' },
|
||||
{ prop: 'workshopSection', label: '工段' },
|
||||
{ prop: 'equipmentName', label: '设备名' },
|
||||
{ prop: 'equipmentCode', label: '设备编码' },
|
||||
{ prop: 'plcCode', label: '关联表编码' },
|
||||
{ prop: 'plcTableName', label: '关联表名' },
|
||||
{ prop: 'plcName', label: '标识名称' },
|
||||
{ prop: 'bindingParameters', label: '绑定参数数量' },
|
||||
{
|
||||
_action: 'params-bind',
|
||||
label: '查看绑定',
|
||||
align: 'center',
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@ -136,16 +136,18 @@ export default {
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
type: 'select',
|
||||
label: '设备名',
|
||||
placeholder: '请输入设备名',
|
||||
placeholder: '请选择设备',
|
||||
param: 'equipmentId',
|
||||
selectOptions: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '编码',
|
||||
placeholder: '请输入编码',
|
||||
type: 'select',
|
||||
label: 'PLC编码',
|
||||
placeholder: '请选择编码',
|
||||
param: 'plcId',
|
||||
selectOptions: [],
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -179,6 +181,7 @@ export default {
|
||||
select: true,
|
||||
label: '关联表名',
|
||||
prop: 'plcId',
|
||||
labelKey: `plcTableName`,
|
||||
url: '/base/equipment-plc/listAll',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
@ -207,8 +210,44 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.initSearchOptions();
|
||||
},
|
||||
methods: {
|
||||
async getEquipmentOptions() {
|
||||
const res = await this.$axios({
|
||||
url: '/base/equipment/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async getPlcOptions() {
|
||||
const res = await this.$axios({
|
||||
url: '/base/equipment-plc/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
|
||||
/** 初始化查询条件 */
|
||||
async initSearchOptions() {
|
||||
Promise.all([this.getEquipmentOptions(), this.getPlcOptions()]).then(
|
||||
([eqList, plcList]) => {
|
||||
this.searchBarFormConfig[0].selectOptions = eqList.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
this.searchBarFormConfig[1].selectOptions = plcList.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 覆盖 handleEmitFun 的默认实现 */
|
||||
handleEmitFun({ action, payload }) {
|
||||
switch (action) {
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -68,29 +69,27 @@ export default {
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'plcParamName', label: '参数列名', align: 'center' },
|
||||
{ prop: 'name', label: '参数名称', align: 'center' },
|
||||
{ prop: 'plcParamName', label: '参数列名' },
|
||||
{ prop: 'name', label: '参数名称' },
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '单位',
|
||||
align: 'center',
|
||||
filter: publicFormatter('unit_dict'),
|
||||
},
|
||||
{
|
||||
prop: 'collection',
|
||||
label: '是否采集',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? ['否', '是'][val] : '-'),
|
||||
},
|
||||
{ prop: 'minValue', label: '最小值', align: 'center' },
|
||||
{ prop: 'maxValue', label: '最大值', align: 'center' },
|
||||
{ prop: 'defaultValue', label: '标准值', align: 'center' },
|
||||
{ prop: 'description', label: '描述', align: 'center' },
|
||||
{ prop: 'remark', label: '备注', align: 'center' },
|
||||
{ prop: 'minValue', label: '最小值' },
|
||||
{ prop: 'maxValue', label: '最大值' },
|
||||
{ prop: 'defaultValue', label: '标准值' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
// {
|
||||
// _action: 'params-bind',
|
||||
// label: '查看绑定',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// subcomponent: {
|
||||
// props: ['injectData'],
|
||||
// render: function (h) {
|
||||
@ -157,7 +156,7 @@ export default {
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字',
|
||||
trigger: 'blur',
|
||||
trigger: 'change',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
],
|
||||
@ -167,10 +166,13 @@ export default {
|
||||
label: '最大值',
|
||||
prop: 'maxValue',
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字',
|
||||
trigger: 'blur',
|
||||
trigger: 'change',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
],
|
||||
@ -349,8 +351,8 @@ export default {
|
||||
plcParamName: undefined,
|
||||
name: undefined,
|
||||
unit: undefined,
|
||||
minValue: undefined,
|
||||
maxValue: undefined,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
defaultValue: undefined,
|
||||
collection: undefined,
|
||||
description: undefined,
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
@ -147,15 +148,14 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备名称', align: 'center' },
|
||||
{ prop: 'code', label: '检测编码', align: 'center' },
|
||||
{ prop: 'equipmentType', label: '设备类型', align: 'center' },
|
||||
{ prop: 'enName', label: '英文名称', align: 'center' },
|
||||
{ prop: 'abbr', label: '缩写', align: 'center' },
|
||||
{ prop: 'name', label: '设备名称' },
|
||||
{ width: 256, prop: 'code', label: '检测编码' },
|
||||
{ prop: 'equipmentType', label: '设备类型' },
|
||||
{ prop: 'enName', label: '英文名称' },
|
||||
{ prop: 'abbr', label: '缩写' },
|
||||
{
|
||||
action: 'show-detail',
|
||||
label: '详情',
|
||||
align: 'center',
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@ -377,8 +377,8 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '属性名称', align: 'center' },
|
||||
{ prop: 'value', label: '属性值', align: 'center' },
|
||||
{ prop: 'name', label: '属性名称' },
|
||||
{ prop: 'value', label: '属性值' },
|
||||
],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -85,9 +86,9 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备类型名称', align: 'center' },
|
||||
{ prop: 'code', label: '检测类型编码', align: 'center' },
|
||||
{ prop: 'remark', label: '备注', align: 'center' },
|
||||
{ prop: 'name', label: '设备类型名称', },
|
||||
{ prop: 'code', label: '检测类型编码', },
|
||||
{ prop: 'remark', label: '备注', },
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
|
||||
@ -443,7 +443,7 @@ export default {
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
size="small"
|
||||
style="width: 250px;"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
@ -157,7 +158,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')
|
||||
|
||||
@ -83,9 +83,10 @@ export default {
|
||||
}
|
||||
this.chartData = this.list
|
||||
},
|
||||
exportData() {
|
||||
exportData(val) {
|
||||
if (this.list.length > 0) {
|
||||
var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
|
||||
let fileName = val.name + "环比分析.xlsx"
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
@ -94,7 +95,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);
|
||||
|
||||
@ -407,7 +407,7 @@ export default {
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:selectWidth="55"
|
||||
:max-height="tableH"
|
||||
@selection-change="selectChange"
|
||||
/>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
@ -25,9 +27,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime";
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType";
|
||||
import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime"
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
|
||||
// import { publicFormatter } from '@/utils/dict'
|
||||
import FileSaver from "file-saver"
|
||||
import * as XLSX from 'xlsx/xlsx.mjs'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'objName',
|
||||
@ -113,7 +117,8 @@ export default {
|
||||
startTime: null,
|
||||
endTime: null
|
||||
},
|
||||
energyTypeList: []
|
||||
energyTypeList: [],
|
||||
exportList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -134,12 +139,13 @@ export default {
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
this.$modal.confirm('是否确认导出').then(() => {
|
||||
return exportEnergyQuantityRealtimeExcel({...this.queryParams});
|
||||
}).then(response => {
|
||||
console.log(response)
|
||||
this.$download.excel(response, '能源抄表.xls');
|
||||
}).catch(() => {})
|
||||
this.exportTable()
|
||||
// this.$modal.confirm('是否确认导出').then(() => {
|
||||
// return exportEnergyQuantityRealtimeExcel({...this.queryParams});
|
||||
// }).then(response => {
|
||||
// console.log(response)
|
||||
// this.$download.excel(response, '能源抄表.xls');
|
||||
// }).catch(() => {})
|
||||
}
|
||||
},
|
||||
/** 查询列表 */
|
||||
@ -147,6 +153,7 @@ export default {
|
||||
getEnergyQuantityRealtimePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list || []
|
||||
this.total = response.data.total;
|
||||
this.exportList = []
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
@ -154,6 +161,48 @@ export default {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
this.energyTypeList = res.data || []
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.exportList = val
|
||||
},
|
||||
// 勾选导出
|
||||
exportTable() {
|
||||
if (this.exportList.length > 0) {
|
||||
let body = this.exportList.map((x) => [
|
||||
x.objName,
|
||||
x.objRemark,
|
||||
x.energyTypeName,
|
||||
x.startValue,
|
||||
x.endValue,
|
||||
x.diffValue,
|
||||
x.amount
|
||||
])
|
||||
let header = []
|
||||
this.tableProps.map((y) => {
|
||||
header.push(y.label)
|
||||
})
|
||||
body.unshift(header)
|
||||
console.log(body)
|
||||
const filename = '能源抄表.xlsx'
|
||||
const ws_name = 'Sheet1'
|
||||
const wb = XLSX.utils.book_new()
|
||||
const ws = XLSX.utils.aoa_to_sheet(body)
|
||||
XLSX.utils.book_append_sheet(wb, ws, ws_name)
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: false,
|
||||
type: 'array'
|
||||
})
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], {
|
||||
type: 'application/octet-stream'
|
||||
}),
|
||||
filename
|
||||
)
|
||||
} else {
|
||||
this.$modal.msgWarning('请勾选需要导出的数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
|
||||
<el-form-item label="监控对象" prop="objectId">
|
||||
<el-cascader
|
||||
style='width: 100%;'
|
||||
@ -11,7 +11,7 @@
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型" prop="energyTypeId">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;">
|
||||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
|
||||
<el-option
|
||||
v-for="item in this.energyTypeList"
|
||||
:key="item.id"
|
||||
@ -26,7 +26,7 @@
|
||||
<el-option label="详细" :value= "2" ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
|
||||
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
|
||||
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
|
||||
<el-option
|
||||
v-for="item in detailList"
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
if (res.code === 0) {
|
||||
this.form = res.data
|
||||
this.form.plcParamId = res.data.plcParamId || ''
|
||||
this.form.limitType = this.form.limitType + ''
|
||||
this.form.limitType = this.form.limitType ? this.form.limitType + '' : ''
|
||||
this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
|
||||
if (this.form.type === 2) {
|
||||
this.getDetailList()
|
||||
@ -128,7 +128,15 @@ export default {
|
||||
console.log(this.form)
|
||||
this.form.plcParamId = ''
|
||||
if (val === 2) {
|
||||
if (this.form.objectId && this.form.energyTypeId) {
|
||||
this.getDetailList()
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleType() {
|
||||
if (this.form.energyTypeId && this.form.type) {
|
||||
this.getDetailList()
|
||||
this.form.plcParamId = ''
|
||||
}
|
||||
},
|
||||
// 递归处理分类回显问题
|
||||
@ -158,6 +166,10 @@ export default {
|
||||
selectObj(val) {
|
||||
this.form.objectId = val[val.length-1]
|
||||
this.form.objectType = val.length-1
|
||||
if (this.form.energyTypeId && this.form.type) {
|
||||
this.getDetailList()
|
||||
this.form.plcParamId = ''
|
||||
}
|
||||
},
|
||||
selectDetail() {
|
||||
this.$forceUpdate()
|
||||
|
||||
@ -65,7 +65,8 @@ const tableProps = [
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '监控模式'
|
||||
label: '监控模式',
|
||||
filter: (val) => (val != null ? ['合并', '详细'][val-1] : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'plcParamName',
|
||||
|
||||
@ -46,7 +46,7 @@ const tableProps = [
|
||||
label: '监控模式'
|
||||
},
|
||||
{
|
||||
prop: 'plcParamId',
|
||||
prop: 'paramName',
|
||||
label: '监控参数'
|
||||
},
|
||||
{
|
||||
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
energyTypeList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('energyReportSearchBox', 1180)
|
||||
@ -130,11 +130,24 @@ export default {
|
||||
this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
|
||||
this.getList()
|
||||
this.getTypeList()
|
||||
},
|
||||
mounted() {
|
||||
this.isFold = this.searchBarWidth('energyReportSearchBox', 1180)
|
||||
},
|
||||
watch: {
|
||||
$route: 'initData'
|
||||
},
|
||||
methods: {
|
||||
initData(to) {
|
||||
if (to.name === 'EnergyReportSearch') {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.formConfig[2].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
} else {
|
||||
this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
|
||||
}
|
||||
this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
|
||||
this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || []
|
||||
|
||||
@ -6,7 +6,34 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
|
||||
<div class="chart-grid-item" style="">
|
||||
<div
|
||||
class="pie-chart"
|
||||
ref="pieChart"
|
||||
:data-eqname="value.equipmentName || 'Default'"></div>
|
||||
<div class="data-view">
|
||||
<div class="data-view__item">
|
||||
<!-- <div class="data-view__item__value">111</div> -->
|
||||
<div class="data-view__item__value">{{ textData.workTime }}</div>
|
||||
<div class="data-view__item__title blue">工作时长</div>
|
||||
</div>
|
||||
<div class="data-view__item">
|
||||
<!-- <div class="data-view__item__value">22</div> -->
|
||||
<div class="data-view__item__value">{{ textData.stopTime }}</div>
|
||||
<div class="data-view__item__title green">停机时长</div>
|
||||
</div>
|
||||
<div class="data-view__item">
|
||||
<!-- <div class="data-view__item__value">10</div> -->
|
||||
<div class="data-view__item__value">{{ textData.downTime }}</div>
|
||||
<div class="data-view__item__title purple">故障时长</div>
|
||||
</div>
|
||||
<div class="data-view__item">
|
||||
<!-- <div class="data-view__item__value">100%</div> -->
|
||||
<div class="data-view__item__value">{{ textData.peEfficiency }}</div>
|
||||
<div class="data-view__item__title yellow">速度开动率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -19,7 +46,27 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
textData: {
|
||||
workTime: '',
|
||||
downTime: '',
|
||||
stopTime: '',
|
||||
peEfficiency: '',
|
||||
},
|
||||
config: {
|
||||
title: {
|
||||
text: '产线1', //<=========
|
||||
top: '35%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
},
|
||||
subtext: '设备', //<=========
|
||||
subtextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
@ -30,6 +77,7 @@ export default {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
top: '0%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
@ -39,34 +87,70 @@ export default {
|
||||
itemHeight: 10,
|
||||
},
|
||||
series: [
|
||||
// 嵌套环形图
|
||||
{
|
||||
name: this.value.equipmentName || 'Default',
|
||||
// 外环
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['40%', '75%'],
|
||||
avoidLabelOverlap: false,
|
||||
radius: ['75%', '90%'],
|
||||
center: ['50%', '45%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
|
||||
name: ['工作时长', '停机时长', '故障时长'][index],
|
||||
value: this.value[v],
|
||||
})),
|
||||
// data: [
|
||||
// { value: 1048, name: 'Search Engine' },
|
||||
// { value: 735, name: 'Direct' },
|
||||
// { value: 580, name: 'Email' },
|
||||
// { value: 484, name: 'Union Ads' },
|
||||
// { value: 300, name: 'Video Ads' },
|
||||
// ],
|
||||
data: [
|
||||
//<=========
|
||||
{ name: '工作时长', value: 1048 },
|
||||
{ name: '停机时长', value: 735 },
|
||||
{ name: '故障时长', value: 580 },
|
||||
],
|
||||
},
|
||||
{
|
||||
// 内环
|
||||
name: '',
|
||||
type: 'pie',
|
||||
center: ['50%', '45%'],
|
||||
radius: ['60%', '75%'],
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
//<=========
|
||||
{ name: '总', value: 3000 },
|
||||
{ name: '', value: 1400 },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: this.value.equipmentName || 'Default',
|
||||
// type: 'pie',
|
||||
// radius: ['40%', '75%'],
|
||||
// avoidLabelOverlap: false,
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center',
|
||||
// },
|
||||
// data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
|
||||
// name: ['工作时长', '停机时长', '故障时长'][index],
|
||||
// value: this.value[v],
|
||||
// })),
|
||||
// // data: [
|
||||
// // { value: 1048, name: 'Search Engine' },
|
||||
// // { value: 735, name: 'Direct' },
|
||||
// // { value: 580, name: 'Email' },
|
||||
// // { value: 484, name: 'Union Ads' },
|
||||
// // { value: 300, name: 'Video Ads' },
|
||||
// // ],
|
||||
// },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log('value', this.value);
|
||||
if (!this.chart) {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(this.$refs.pieChart);
|
||||
this.$nextTick(() => {
|
||||
this.chart.setOption(this.config);
|
||||
});
|
||||
@ -75,24 +159,120 @@ export default {
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.updateConfig(val);
|
||||
if (this.chart) this.chart.setOption(this.config);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateConfig(item) {
|
||||
const {
|
||||
lineName, // 产线
|
||||
equipmentName, // 设备
|
||||
downTime, // 故障时长(h)
|
||||
stopTime, // 停机时长(h)
|
||||
workTime, // 工作时长(h)
|
||||
peEfficiency, // 速度开动率
|
||||
timeEfficiency, // 时间开动率
|
||||
//===============//
|
||||
sectionName,
|
||||
workRate,
|
||||
stopRate,
|
||||
downRate,
|
||||
realProcSpeed,
|
||||
designProcSpeed,
|
||||
oee,
|
||||
teep,
|
||||
downCount,
|
||||
mtbf,
|
||||
mttr,
|
||||
} = item;
|
||||
this.config.title.text = lineName;
|
||||
this.config.title.subtext = equipmentName;
|
||||
this.config.series[0].data = [
|
||||
{ name: '工作时长', value: workTime },
|
||||
{ name: '停机时长', value: stopTime },
|
||||
{ name: '故障时长', value: downTime },
|
||||
];
|
||||
this.config.series[1].data = [
|
||||
{ name: '速度开动率', value: peEfficiency },
|
||||
{ name: '', value: Math.ceil(peEfficiency) - peEfficiency },
|
||||
];
|
||||
//
|
||||
this.textData = {
|
||||
workTime: +workTime.toFixed(2),
|
||||
stopTime: +stopTime.toFixed(2),
|
||||
downTime: +downTime.toFixed(2),
|
||||
peEfficiency: +peEfficiency.toFixed(2),
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pie-chart {
|
||||
.chart-grid-item {
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
min-height: 320px;
|
||||
background: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pie-chart::before {
|
||||
content: attr(data-eqname);
|
||||
.data-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.data-view__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.data-view__item:not(:last-child) {
|
||||
border-right: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.data-view__item__value {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.data-view__item__title {
|
||||
font-size: 8px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #3da8fd;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #8ef0ab;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #6b5cfd;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: #ffc72a;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,46 +13,64 @@
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
class="base-table__margin"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
<!-- <method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" /> -->
|
||||
</base-table>
|
||||
<el-row>
|
||||
<el-col class="custom-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
class="base-table__margin"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="10"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="'\u3000可视化\u3000'" name="graph">
|
||||
<div
|
||||
v-if="activeName == 'graph'"
|
||||
class="graph"
|
||||
style="display: flex; flex-direction: column; position: relative">
|
||||
<div class="blue-title">各设备加工数量</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="icon blue"></span>
|
||||
<span class="text">工作时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon green"></span>
|
||||
<span class="text">停机时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon purple"></span>
|
||||
<span class="text">故障时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon yellow"></span>
|
||||
<span class="text">速度开动率</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="graph-grid">
|
||||
<div class="bg-grid grid-line">
|
||||
<div class="grid-item" v-for="item in list.length" :key="item"></div>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<!-- <pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" /> -->
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'"
|
||||
:dialogVisible="open"
|
||||
:width="visualizationOpen ? '80%' : '700px'"
|
||||
@closed="closed"
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<div class="visualization" v-if="visualizationOpen">
|
||||
<pie-chart v-for="item in list" :key="item.id" :value="item" />
|
||||
</div>
|
||||
<div v-if="trendOpen">
|
||||
<h1>查看趋势</h1>
|
||||
</div>
|
||||
</base-dialog>
|
||||
<div class="bg-grid grid-charts">
|
||||
<pie-chart
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:value="item" />
|
||||
<!-- <pie-chart v-for="item in 5" :key="item" :value="item" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -68,6 +86,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'table',
|
||||
open: false,
|
||||
visualizationOpen: false,
|
||||
trendOpen: false,
|
||||
@ -86,84 +105,72 @@ export default {
|
||||
// : undefined,
|
||||
// ].filter((v) => v),
|
||||
tableProps: [
|
||||
{ prop: 'factoryName', label: '工厂', align: 'center' },
|
||||
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||
{ prop: 'factoryName', label: '工厂' },
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'sectionName', label: '工段' },
|
||||
{ prop: 'equipmentName', label: '设备' },
|
||||
{
|
||||
label: '有效时间',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
width: 128,
|
||||
prop: 'workTime',
|
||||
label: '工作时长',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'workRate',
|
||||
label: '百分比',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '关机时间',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
width: 128,
|
||||
prop: 'stopTime',
|
||||
label: '停机时长',
|
||||
align: 'center',
|
||||
},
|
||||
{ width: 128, prop: 'stopRate', label: '百分比', align: 'center' },
|
||||
{ width: 128, prop: 'stopRate', label: '百分比' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '中断损失',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
width: 128,
|
||||
prop: 'downTime',
|
||||
label: '故障时长',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
{ width: 128, prop: 'downRate', label: '百分比', align: 'center' },
|
||||
{ width: 128, prop: 'downRate', label: '百分比' },
|
||||
{
|
||||
width: 128,
|
||||
prop: 'timeEfficiency',
|
||||
label: '时间开动率',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '速度损失',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
width: 128,
|
||||
prop: 'realProcSpeed',
|
||||
label: '实际加工速度',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'designProcSpeed',
|
||||
label: '理论加工速度',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'peEfficiency',
|
||||
label: '速度开动率',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
],
|
||||
@ -171,19 +178,17 @@ export default {
|
||||
{
|
||||
prop: 'oee',
|
||||
label: 'OEE',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'teep',
|
||||
label: 'TEEP',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
// {
|
||||
// _action: 'view-trend',
|
||||
// label: '趋势',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// subcomponent: {
|
||||
// props: ['injectData'],
|
||||
// render: function (h) {
|
||||
@ -240,7 +245,7 @@ export default {
|
||||
parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// label: '时间段',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
@ -254,7 +259,7 @@ export default {
|
||||
parent: 'dateFilterType',
|
||||
// 日期选择
|
||||
type: 'datePicker',
|
||||
label: '日期',
|
||||
// label: '日期',
|
||||
dateType: 'date',
|
||||
placeholder: '选择日期',
|
||||
format: 'yyyy-MM-dd',
|
||||
@ -269,16 +274,16 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备可视化',
|
||||
name: 'visualization',
|
||||
plain: true,
|
||||
color: 'success',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '设备可视化',
|
||||
// name: 'visualization',
|
||||
// plain: true,
|
||||
// color: 'success',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: 'OEE',
|
||||
@ -364,7 +369,6 @@ export default {
|
||||
params: this.queryParams,
|
||||
});
|
||||
if (code == 0) {
|
||||
console.log('data', data);
|
||||
this.list = data;
|
||||
}
|
||||
},
|
||||
@ -407,6 +411,8 @@ export default {
|
||||
},
|
||||
|
||||
submitForm() {},
|
||||
|
||||
handleTabClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -416,4 +422,141 @@ export default {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
:deep(.custom-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-grid {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #ccc;
|
||||
// background: #0003;
|
||||
}
|
||||
.bg-grid {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
grid-template-columns: repeat(4, minmax(280px, 1fr));
|
||||
grid-auto-columns: 280px;
|
||||
grid-auto-rows: 290px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
display: inline-block;
|
||||
border: 8px solid #fff;
|
||||
}
|
||||
|
||||
.grid-charts {
|
||||
position: absolute;
|
||||
width: calc(100% - 24px);
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.grid-item:not(:first-child) {
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.legend .legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.legend .legend-item .icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.legend .legend-item .text {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3da8fd;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #8ef0ab;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #6b5cfd;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffc72a;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1390px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(3, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1190px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(1, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,39 +50,47 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
searchBarKeys: ['name', 'code'],
|
||||
// tableBtn: [
|
||||
// this.$auth.hasPermi('base:equipment-group:update')
|
||||
// ? {
|
||||
// type: 'edit',
|
||||
// btnName: '修改',
|
||||
// }
|
||||
// : undefined,
|
||||
// this.$auth.hasPermi('base:equipment-group:delete')
|
||||
// ? {
|
||||
// type: 'delete',
|
||||
// btnName: '删除',
|
||||
// }
|
||||
// : undefined,
|
||||
// ].filter((v) => v),
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:equipment-group:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '修改',
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:equipment-group:delete')
|
||||
? {
|
||||
type: 'delete',
|
||||
btnName: '删除',
|
||||
}
|
||||
: undefined,
|
||||
].filter((v) => v),
|
||||
tableProps: [
|
||||
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||
{
|
||||
width: 188,
|
||||
type: 'edit',
|
||||
btnName: '修改',
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: '删除',
|
||||
},
|
||||
],
|
||||
tableProps: [
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'sectionName', label: '工段' },
|
||||
{ prop: 'equipmentName', label: '设备' },
|
||||
{
|
||||
width: 240,
|
||||
prop: 'mtbf',
|
||||
label: '平均故障间隔时间[MTBF](h)',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 180,
|
||||
width: 240,
|
||||
prop: 'mttr',
|
||||
label: '平均维修时间[MTTR](h)',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'workTime', label: '工作时长(h)', align: 'center' },
|
||||
{ prop: 'downTime', label: '故障时长(h)', align: 'center' },
|
||||
{ prop: 'downCount', label: '故障次数', align: 'center' },
|
||||
{ width: 128, prop: 'workTime', label: '工作时长(h)' },
|
||||
{ width: 128, prop: 'downTime', label: '故障时长(h)' },
|
||||
{ prop: 'downCount', label: '故障次数' },
|
||||
],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@ -113,6 +121,8 @@ export default {
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
lineId: null,
|
||||
factoryId: null,
|
||||
recordTime: null,
|
||||
@ -162,15 +172,13 @@ export default {
|
||||
this.queryParams.recordTime = [
|
||||
moment()
|
||||
.month(btn.month - 1)
|
||||
.format('YYYY-MM')+'-01 00:00:00',
|
||||
moment()
|
||||
.month(btn.month)
|
||||
.format('YYYY-MM')+'-01 00:00:00',
|
||||
.format('YYYY-MM') + '-01 00:00:00',
|
||||
moment().month(btn.month).format('YYYY-MM') + '-01 00:00:00',
|
||||
];
|
||||
} else {
|
||||
this.queryParams.recordTime = null;
|
||||
}
|
||||
this.queryParams.lineId = btn.lineId || null;
|
||||
this.queryParams.lineId = btn.lineId || null;
|
||||
this.handleQuery();
|
||||
break;
|
||||
}
|
||||
|
||||
@ -15,27 +15,143 @@ import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'LineChart',
|
||||
components: {},
|
||||
props: ['config'],
|
||||
props: ['config', 'list'],
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
// watch: {
|
||||
// list: {
|
||||
// handler(listdata) {
|
||||
// if (listdata && listdata.length) {
|
||||
// console.log('[linechart] list changed', listdata);
|
||||
// const option = this.handleList(listdata);
|
||||
// this.setOption(option);
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
// },
|
||||
computed: {
|
||||
option() {
|
||||
const opt = [];
|
||||
this.list.map((eq) => {
|
||||
/** [设备名, ok数量, 不ok数量] */
|
||||
opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
|
||||
});
|
||||
return {
|
||||
color: ['#288AFF', '#8EF0AB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
right: 0
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '8%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
// xAxis: [
|
||||
// {
|
||||
// type: 'category',
|
||||
// data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
|
||||
// },
|
||||
// ],
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// lineStyle: {
|
||||
// color: '#0001',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: opt.map((item) => item[0]),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#0001',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '合格数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[1]),
|
||||
},
|
||||
{
|
||||
name: '不合格数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[2]),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log('[linechart] mounted');
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
console.log('[linechart] destroyed');
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('thsi el', this.$el);
|
||||
if (!this.chart) this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.config);
|
||||
console.log('[linechart] initialized', this.$el);
|
||||
this.$nextTick(() => {
|
||||
this.setOption();
|
||||
});
|
||||
},
|
||||
|
||||
setOption() {
|
||||
if (this.chart) this.chart.setOption(this.option);
|
||||
console.log('[linechart] option settled');
|
||||
},
|
||||
|
||||
// handleList(list) {
|
||||
// /** 清空数据 */
|
||||
// this.option.series[0].data.splice(0);
|
||||
// this.option.series[1].data.splice(0);
|
||||
// this.option.xAxis.data.splice(0);
|
||||
|
||||
// list.map((eq) => {
|
||||
// this.option.xAxis.data.push(eq.equipmentName);
|
||||
// this.option.series[0].data.push(eq.nokQuantity);
|
||||
// this.option.series[1].data.push(eq.okQuantity);
|
||||
// });
|
||||
|
||||
// this.setOption();
|
||||
|
||||
// // const pureList = list.map((eq) => ({
|
||||
// // name: eq.equipmentName,
|
||||
// // ok: eq.okQuantity,
|
||||
// // nok: eq.nokQuantity,
|
||||
// // }));
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -43,7 +159,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.line-chart {
|
||||
padding: 0 12px;
|
||||
background: #e1e1e1;
|
||||
min-height: 320px;
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,28 +13,35 @@
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
|
||||
<!-- 图形分析 dialog -->
|
||||
<!-- <base-dialog
|
||||
dialogTitle="图形视角"
|
||||
:dialogVisible="dialogVisible"
|
||||
width="60%"
|
||||
@close="dialogClose"
|
||||
@cancel="dialogClose"
|
||||
@confirm="dialogClose">
|
||||
<LineChart v-if="dialogVisible" :config="lineChartConfig" />
|
||||
</base-dialog> -->
|
||||
<el-row>
|
||||
<el-col class="custom-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane :label="'数据列表'" name="table">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@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 class="blue-title">各设备加工数量</div>
|
||||
<LineChart :list="list" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import LineChart from './components/lineChart.vue';
|
||||
|
||||
export default {
|
||||
@ -42,12 +49,14 @@ export default {
|
||||
components: { LineChart },
|
||||
props: {},
|
||||
data() {
|
||||
const now = new Date();
|
||||
const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||
return {
|
||||
dialogVisible: false,
|
||||
urls: {
|
||||
page: '/analysis/equipment-analysis/quality',
|
||||
},
|
||||
mode: 'table', // defaults to 'table'
|
||||
activeName: 'table', // defaults to 'table'
|
||||
searchBarFormConfig: [
|
||||
// 产品
|
||||
{
|
||||
@ -72,13 +81,30 @@ export default {
|
||||
dateType: 'daterange', // datetimerange
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'recordTime',
|
||||
defaultSelect: [
|
||||
new Date(y, m, d)
|
||||
.toLocaleString()
|
||||
.split('/')
|
||||
.map((item, index) => {
|
||||
if (index == 1 || index == 2) return item.padStart(2, '0');
|
||||
return item;
|
||||
})
|
||||
.join('-'),
|
||||
new Date(y, m, d, 23, 59, 59)
|
||||
.toLocaleString()
|
||||
.split('/')
|
||||
.map((item, index) => {
|
||||
if (index == 1 || index == 2) return item.padStart(2, '0');
|
||||
return item;
|
||||
})
|
||||
.join('-'),
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -86,9 +112,9 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '列表数据',
|
||||
@ -111,43 +137,36 @@ export default {
|
||||
// width: 160,
|
||||
prop: 'sectionName',
|
||||
label: '工段',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'equipmentName',
|
||||
label: '设备名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'products',
|
||||
label: '产品名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'inQuantity',
|
||||
label: '进片数量',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'outQuantity',
|
||||
label: '出片数量',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'nokQuantity',
|
||||
label: '破损/不合格数',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'passRate',
|
||||
label: '合格率',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
lineChartConfig: {
|
||||
@ -161,14 +180,14 @@ export default {
|
||||
top: 0,
|
||||
left: 0,
|
||||
padding: 5,
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 20,
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -176,13 +195,13 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '合格率',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
align: 'right'
|
||||
},
|
||||
nameGap: 26
|
||||
name: '合格率',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
},
|
||||
nameGap: 26,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -229,6 +248,11 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab, event) {
|
||||
// console.log('tab event', tab, event);
|
||||
// tab is el-tab vue component.
|
||||
},
|
||||
|
||||
async fillLineOptions() {
|
||||
const { data } = await this.$axios({
|
||||
url: '/base/production-line/listAll',
|
||||
@ -340,4 +364,38 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,14 @@ export default {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
config: {
|
||||
handler(value) {
|
||||
if (value != null) this.setOption(value);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
@ -32,9 +39,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('thsi el', this.$el);
|
||||
if (!this.chart) this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.config);
|
||||
this.setOption(this.config);
|
||||
},
|
||||
setOption(option) {
|
||||
if (this.chart) this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,25 +6,44 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>设备产量时序图</h1>
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div
|
||||
class="production-timegraph-container"
|
||||
style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">生产节拍时序图</div>
|
||||
<!-- <h1>设备状态时序图</h1> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
<LineChart
|
||||
:key="eq.key + '__linechart'"
|
||||
:config="getRealConfig(index)" />
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 24px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">设备产量时序图</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<LineChart :config="templateConfig" />
|
||||
</div>
|
||||
<div class="no-data-bg" v-else></div>
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
@ -58,6 +77,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
accumulators: new Map(),
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@ -77,15 +97,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange', // datetimerange
|
||||
dateType: 'date', // datetimerange
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
// rangeSeparator: '-',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
placeholder: '选择日期',
|
||||
param: 'recordTime',
|
||||
},
|
||||
{
|
||||
@ -99,9 +120,9 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备对比',
|
||||
btnName: '添加对比',
|
||||
name: 'compare',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
@ -115,30 +136,47 @@ export default {
|
||||
eqList: [],
|
||||
graphList: [],
|
||||
templateConfig: {
|
||||
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
|
||||
grid: {
|
||||
top: 88,
|
||||
left: 56,
|
||||
right: 56,
|
||||
bottom: 56,
|
||||
top: 48,
|
||||
left: 48,
|
||||
right: 24,
|
||||
bottom: 24,
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
padding: 5,
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
right: 12,
|
||||
padding: 6,
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
fontSize: 12,
|
||||
lineHeight: 12,
|
||||
color: '#0007',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((item, index) => `${index}:00`),
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
// show: false,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#0003',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0007',
|
||||
},
|
||||
data: [],
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map((item, index) => `${index}:00`),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -146,19 +184,41 @@ export default {
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
align: 'center',
|
||||
},
|
||||
nameGap: 26,
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产线1',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map(() => Math.random() * 100),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
// {
|
||||
// name: '产线1',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '产线2',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '产线3',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -176,7 +236,12 @@ export default {
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
this.queryParams.recordTime = payload.recordTime || null;
|
||||
this.queryParams.recordTime = payload.recordTime
|
||||
? [
|
||||
payload.recordTime,
|
||||
payload.recordTime.replace('00:00:00', '23:59:59'),
|
||||
]
|
||||
: null;
|
||||
this.getList();
|
||||
break;
|
||||
case 'compare':
|
||||
@ -230,10 +295,41 @@ export default {
|
||||
// ];
|
||||
// eq2.key = 'SS2';
|
||||
// this.graphList = [eq1, eq2];
|
||||
console.log('graph list', this.graphList);
|
||||
|
||||
this.graphList.forEach(this.setSeries);
|
||||
} else {
|
||||
this.graphList = [];
|
||||
this.graphList.forEach(this.setSeries);
|
||||
}
|
||||
},
|
||||
|
||||
setSeries(eqArr) {
|
||||
if (eqArr.length == 0) {
|
||||
this.templateConfig.series = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let isInit = false;
|
||||
if (this.accumulators.has(eqArr.key) == false) {
|
||||
this.accumulators.set(eqArr.key, 0);
|
||||
isInit = true;
|
||||
}
|
||||
|
||||
let accumulator = this.accumulators.get(eqArr.key);
|
||||
if ((accumulator && !isInit) || (accumulator == 0 && isInit == false)) {
|
||||
accumulator++;
|
||||
this.accumulators.set(eqArr.key, accumulator);
|
||||
}
|
||||
|
||||
this.templateConfig.series.push({
|
||||
name: eqArr.key + (accumulator == 0 ? '' : '-' + accumulator),
|
||||
// name: Math.random(),
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
data: this.getEquipmentQuantity(eqArr),
|
||||
});
|
||||
},
|
||||
|
||||
/** 获得设备产量 */
|
||||
getEquipmentQuantity(equipmentArr) {
|
||||
return equipmentArr.map((item) => item.totalQuantity);
|
||||
@ -246,19 +342,6 @@ export default {
|
||||
);
|
||||
},
|
||||
|
||||
getRealConfig(index) {
|
||||
// if (!this.graphList || this.graphList.length == 0) return;
|
||||
const config = JSON.parse(JSON.stringify(this.templateConfig));
|
||||
// config.legend.data = this.graphList[index].key;
|
||||
config.series[0].name = this.graphList[index]?.key;
|
||||
// console.log("this.graphList?.[index]", this.graphList?.[index]);
|
||||
config.series[0].data = this.getEquipmentQuantity(
|
||||
this.graphList?.[index] || []
|
||||
);
|
||||
config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
|
||||
return config;
|
||||
},
|
||||
|
||||
/** 准备设备数据 */
|
||||
async initEquipment() {
|
||||
const { code, data } = await this.$axios({
|
||||
@ -313,18 +396,42 @@ export default {
|
||||
method: 'get',
|
||||
params: this.queryParams,
|
||||
});
|
||||
|
||||
this.queryParams.equipmentId = null; // 清空一下
|
||||
if (code == 0) {
|
||||
const newEqlist = this.objectToArray(data);
|
||||
if (!newEqlist || newEqlist.length == 0) {
|
||||
this.$message.error('该设备没有产量数据');
|
||||
return;
|
||||
}
|
||||
this.graphList.push(newEqlist[0]);
|
||||
this.graphList.push(...newEqlist);
|
||||
newEqlist.forEach(this.setSeries);
|
||||
}
|
||||
this.open = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,29 +6,51 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>设备状态时序图</h1>
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">生产节拍时序图</div>
|
||||
<!-- <h1>设备状态时序图</h1> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="legend-row">
|
||||
<div class="legend">
|
||||
<div class="icon running"></div>
|
||||
<div>运行中</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 32px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="blue-title">设备状态时序图</div>
|
||||
</el-col>
|
||||
<el-col :span="18" class="legend-row">
|
||||
<div class="legend">
|
||||
<div class="icon running"></div>
|
||||
<div>运行中</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="icon waiting"></div>
|
||||
<div>待机</div>
|
||||
</div> -->
|
||||
<div class="legend">
|
||||
<div class="icon fault"></div>
|
||||
<div>故障</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="legend">
|
||||
<div class="icon fault"></div>
|
||||
<div>故障</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="icon lack"></div>
|
||||
<div>缺料</div>
|
||||
</div>
|
||||
@ -36,83 +58,51 @@
|
||||
<div class="icon full"></div>
|
||||
<div>满料</div>
|
||||
</div> -->
|
||||
<div class="legend">
|
||||
<div class="icon stop"></div>
|
||||
<div>计划停机</div>
|
||||
<div class="legend">
|
||||
<div class="icon stop"></div>
|
||||
<div>计划停机</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
|
||||
<div class="graph-content">
|
||||
<el-popover
|
||||
trigger="hover"
|
||||
v-for="blc in eq"
|
||||
:key="blc.startTime"
|
||||
:title="
|
||||
blc.status == 0
|
||||
? '运行'
|
||||
: blc.status == 2
|
||||
? '故障'
|
||||
: '计划停机'
|
||||
"
|
||||
placement="top"
|
||||
:content="new Date(blc.startTime).toLocaleTimeString()">
|
||||
<div
|
||||
slot="reference"
|
||||
:key="blc.startTime + '__div'"
|
||||
class="graph-item-fixed tick"
|
||||
:class="{
|
||||
running: blc.status == 0,
|
||||
fault: blc.status == 2,
|
||||
stop: blc.status == 1,
|
||||
}"
|
||||
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
|
||||
:data-time="
|
||||
new Date(blc.startTime).toLocaleTimeString()
|
||||
"></div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<!-- <div class="graph">
|
||||
<h2 class="graph-title">设备1</h2>
|
||||
<div class="graph-item running tick" data-time="00:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item lack tick" data-time="03:00"></div>
|
||||
<div class="graph-item full tick" data-time="04:00"></div>
|
||||
<div class="graph-item waiting tick" data-time="05:00"></div>
|
||||
<div class="graph-item running tick" data-time="06:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item fault tick" data-time="08:00"></div>
|
||||
<div class="graph-item waiting tick" data-time="09:00"></div>
|
||||
<div class="graph-item running tick" data-time="10:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item lack tick" data-time="13:00"></div>
|
||||
<div class="graph-item full tick" data-time="14:00"></div>
|
||||
<div class="graph-item running tick" data-time="15:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item fault tick" data-time="18:00"></div>
|
||||
<div class="graph-item running tick" data-time="19:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item stop tick" data-time="23:00"></div>
|
||||
</div> -->
|
||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
<div
|
||||
v-for="blc in eq"
|
||||
:key="blc.startTime"
|
||||
class="graph-item-fixed tick"
|
||||
:class="{
|
||||
running: blc.status == 0,
|
||||
fault: blc.status == 2,
|
||||
stop: blc.status == 1,
|
||||
}"
|
||||
:style="{ width: blc.duration * 2 + 'px' }"
|
||||
:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
|
||||
</div>
|
||||
<!-- <div class="graph">
|
||||
<h2 class="graph-title">设备3</h2>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
@ -185,9 +175,9 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备对比',
|
||||
btnName: '添加对比',
|
||||
name: 'compare',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
@ -344,26 +334,52 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.graph {
|
||||
border: 1px solid #ccc;
|
||||
padding: 12px 12px 28px 12px;
|
||||
margin: 64px 0;
|
||||
// border: 1px solid #ccc;
|
||||
// padding: 12px 12px 28px 12px;
|
||||
// margin: 64px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.graph-title {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
left: -1px;
|
||||
padding: 8px 18px;
|
||||
background: #ccc;
|
||||
font-size: 18px;
|
||||
// position: absolute;
|
||||
// top: -64px;
|
||||
// left: -1px;
|
||||
// padding: 8px 18px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.graph-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 22px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-width: 2px;
|
||||
border-top: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-content::after,
|
||||
.graph-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 80%;
|
||||
background: #fff;
|
||||
right: -1px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.graph-content::before {
|
||||
right: unset;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.graph-item,
|
||||
.graph-item-fixed {
|
||||
height: 88px;
|
||||
// height: 88px;
|
||||
// width: 24px;
|
||||
flex: 1;
|
||||
// border: 1px solid #ccc;
|
||||
@ -405,32 +421,40 @@ export default {
|
||||
}
|
||||
|
||||
.running {
|
||||
background-color: #84f04e;
|
||||
background-color: #5ad8a6;
|
||||
// background-color: #84f04e;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
background-color: #409eff;
|
||||
background-color: #5ad8a6;
|
||||
// background-color: #409eff;
|
||||
}
|
||||
|
||||
.fault {
|
||||
background-color: #ea5b5b;
|
||||
// background-color: #ea5b5b;
|
||||
background-color: #fc9c91;
|
||||
}
|
||||
|
||||
.full {
|
||||
background-color: #e6a23c;
|
||||
// background-color: #e6a23c;
|
||||
background-color: #598fff;
|
||||
}
|
||||
|
||||
.lack {
|
||||
background-color: #a69c8d;
|
||||
// background-color: #a69c8d;
|
||||
background-color: #7585a2;
|
||||
}
|
||||
|
||||
.stop {
|
||||
background-color: #000c;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
margin: 12px 0;
|
||||
margin: 6px 0;
|
||||
padding-right: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .legend:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@ -441,9 +465,32 @@ export default {
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -243,7 +243,11 @@ export default {
|
||||
this.list = tempData
|
||||
} else {
|
||||
// 次月1号没有值,接口排班
|
||||
autoSet().then(res => {
|
||||
// console.log(moment(this.startDay).format("YYYY-MM-DD"))
|
||||
autoSet({
|
||||
year: this.year,
|
||||
month: moment(this.startDay).month() + 1
|
||||
}).then(res => {
|
||||
this.list = res.data || {}
|
||||
})
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
@ -81,13 +82,12 @@ export default {
|
||||
: undefined,
|
||||
].filter((v) => v),
|
||||
tableProps: [
|
||||
{ width: 128, prop: 'productionLine', label: '产线', align: 'center' },
|
||||
{ width: 128, prop: 'workshopSection', label: '工段', align: 'center' },
|
||||
{ width: 128, prop: 'equipment', label: '设备名称', align: 'center' },
|
||||
{ width: 128, prop: 'productionLine', label: '产线' },
|
||||
{ width: 128, prop: 'workshopSection', label: '工段' },
|
||||
{ width: 128, prop: 'equipment', label: '设备名称' },
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: '报警级别',
|
||||
align: 'center',
|
||||
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||
},
|
||||
{
|
||||
@ -96,11 +96,11 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'alarmContent', label: '报警内容', align: 'center' },
|
||||
{ prop: 'alarmContent', label: '报警内容' },
|
||||
// {
|
||||
// _action: 'equipment-group-show-alert',
|
||||
// label: '报警',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// subcomponent: {
|
||||
// props: ['injectData'],
|
||||
// render: function (h) {
|
||||
@ -166,7 +166,7 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
|
||||
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
|
||||
handleSearchBarBtnClick(btn) {
|
||||
// 仅查询一种情况
|
||||
this.queryParams.createTime = btn.createTime;
|
||||
|
||||
@ -35,7 +35,9 @@
|
||||
" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="margin-top: 20px; color: #c7c7c7; text-align: center;">暂无数据</div>
|
||||
<div v-else style="margin-top: 20px; color: #c7c7c7; text-align: center">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -139,19 +141,16 @@ export default {
|
||||
width: 48,
|
||||
prop: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 160,
|
||||
prop: 'time',
|
||||
label: '时间',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 200,
|
||||
prop: 'plcCode',
|
||||
label: 'PLC编码',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
const firstLineData = {
|
||||
@ -162,7 +161,6 @@ export default {
|
||||
otherList.forEach((item) => {
|
||||
props.push({
|
||||
label: item.name,
|
||||
align: 'center',
|
||||
prop: item.name,
|
||||
width: 128,
|
||||
});
|
||||
|
||||
@ -17,15 +17,16 @@ import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'LineChartInEquipmentProcessAmount',
|
||||
components: {},
|
||||
props: ['equipmentList'],
|
||||
props: ['equipmentList', 'render'],
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: ['#288AFF'],
|
||||
grid: {
|
||||
top: 64,
|
||||
left: 56,
|
||||
right: 24,
|
||||
right: 64,
|
||||
bottom: 56,
|
||||
},
|
||||
title: {
|
||||
@ -64,6 +65,10 @@ export default {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -85,16 +90,19 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// console.log('this.eq list', this.equipmentList);
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.chart.setOption(this.updateConfig(this.option));
|
||||
});
|
||||
watch: {
|
||||
render: {
|
||||
handler: function (newVal, oldVal) {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
|
||||
this.$nextTick(() => {
|
||||
if (this.chart) this.chart.setOption(this.updateConfig(this.option));
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chart.dispose();
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {
|
||||
updateConfig(config) {
|
||||
@ -122,5 +130,6 @@ export default {
|
||||
.chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// background: lightcoral;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,15 +9,52 @@
|
||||
<div style="flex: 1; display: flex; background: #f2f4f9">
|
||||
<div
|
||||
class="app-container"
|
||||
style="margin-right: 12px; border-radius: 8px; background: #fff">
|
||||
<!-- side bar -->
|
||||
style="
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
">
|
||||
<div
|
||||
class="side-bar__left"
|
||||
style="width: 240px; padding: 12px; height: 100%">
|
||||
class="factory-list__selector"
|
||||
style="margin: 12px"
|
||||
title="点击切换工厂"
|
||||
@mouseenter="factoryListOpen = true"
|
||||
@mouseleave="factoryListOpen = false">
|
||||
{{ currentFactory?.label || '工厂名称' }}
|
||||
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
|
||||
<ul
|
||||
class="factory-list"
|
||||
v-if="sidebarContent.length"
|
||||
@click.prevent="factoryChangeHandler">
|
||||
<li
|
||||
v-for="fc in sidebarContent"
|
||||
:key="fc.id"
|
||||
:data-value="fc.id"
|
||||
class="factory-list__item"
|
||||
:class="{ 'is-current': fc.id == currentFactory?.id }">
|
||||
{{ fc.label }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else style="color: #0008; width: 128px; text-align: center">
|
||||
- 无 -
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- side bar -->
|
||||
<div class="side-bar__left" style="width: 240px; height: 100%">
|
||||
<el-tree
|
||||
:data="sidebarContent"
|
||||
class="custom-tree-class"
|
||||
:data="currentFactory?.children"
|
||||
:props="treeProps"
|
||||
@node-click="handleSidebarItemClick" />
|
||||
:empty-text="' - 暂无数据 - '"
|
||||
icon-class="custom-icon-class"
|
||||
@node-click="handleSidebarItemClick">
|
||||
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span class="icon"></span>
|
||||
<span>{{ node.label }}</span>
|
||||
</div> -->
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -30,28 +67,48 @@
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
|
||||
<transition appear name="vvv" mode="out-in">
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="999"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<!-- <method-btn
|
||||
<el-row>
|
||||
<el-col class="custom-tabs">
|
||||
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
||||
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="999"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<!-- <method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" /> -->
|
||||
</base-table>
|
||||
</base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
|
||||
<div class="graph" style="height: 56vh">
|
||||
<!-- graph -->
|
||||
<Graph
|
||||
v-if="list.length"
|
||||
:equipment-list="list"
|
||||
:render="renderKey" />
|
||||
<div
|
||||
v-if="list.length == 0"
|
||||
style="
|
||||
color: #c7c7c7;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
">
|
||||
没有设备
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="graph" style="height: 56vh;" v-else>
|
||||
<!-- graph -->
|
||||
<Graph v-if="list.length" :equipment-list="list" />
|
||||
<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- <transition appear name="vvv" mode="out-in"></transition> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,6 +123,17 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
renderKey: Math.random(),
|
||||
factoryListOpen: false,
|
||||
currentFactory: null,
|
||||
factoryList: [
|
||||
{ name: '1', value: 1 },
|
||||
{ name: '2', value: 2 },
|
||||
{ name: '3', value: 3 },
|
||||
{ name: '4', value: 4 },
|
||||
{ name: '5', value: 5 },
|
||||
{ name: '6', value: 6 },
|
||||
],
|
||||
sidebarContent: [
|
||||
// {
|
||||
// id: 'fc1',
|
||||
@ -152,6 +220,7 @@ export default {
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
activeName: 'table',
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
@ -172,23 +241,23 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '表格',
|
||||
name: 'table',
|
||||
plain: true,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '图表',
|
||||
name: 'graph',
|
||||
plain: true,
|
||||
color: 'warning',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '表格',
|
||||
// name: 'table',
|
||||
// plain: true,
|
||||
// color: 'success',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '图表',
|
||||
// name: 'graph',
|
||||
// plain: true,
|
||||
// color: 'warning',
|
||||
// },
|
||||
// {
|
||||
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
|
||||
// btnName: '导出',
|
||||
@ -197,11 +266,11 @@ export default {
|
||||
// },
|
||||
],
|
||||
tableProps: [
|
||||
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||
{ prop: 'externalCode', label: '设备编码', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备名称', align: 'center' },
|
||||
{ prop: 'totalQuantity', label: '加工数量', align: 'center' },
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'sectionName', label: '工段' },
|
||||
{ prop: 'externalCode', label: '设备编码' },
|
||||
{ prop: 'equipmentName', label: '设备名称' },
|
||||
{ prop: 'totalQuantity', label: '加工数量' },
|
||||
],
|
||||
mode: 'table', // table | graph
|
||||
queryParams: {
|
||||
@ -230,20 +299,20 @@ export default {
|
||||
this.$set(factory, 'label', factory.name);
|
||||
this.$set(factory, 'type', '工厂');
|
||||
delete factory.name;
|
||||
factory.children = factory.lines;
|
||||
delete factory.lines;
|
||||
// factory.children = factory.lines;
|
||||
// delete factory.lines;
|
||||
factory.children?.forEach((line) => {
|
||||
this.$set(line, 'label', line.name);
|
||||
this.$set(line, 'type', '产线');
|
||||
delete line.name;
|
||||
line.children = line.sections;
|
||||
delete line.sections;
|
||||
// line.children = line.sections;
|
||||
// delete line.sections;
|
||||
line.children?.forEach((ws) => {
|
||||
this.$set(ws, 'label', ws.name);
|
||||
this.$set(ws, 'type', '工段');
|
||||
delete ws.name;
|
||||
ws.children = ws.equipments;
|
||||
delete ws.equipments;
|
||||
// ws.children = ws.equipments;
|
||||
// delete ws.equipments;
|
||||
ws.children?.forEach((eq) => {
|
||||
this.$set(eq, 'label', eq.name);
|
||||
this.$set(eq, 'type', '设备');
|
||||
@ -258,10 +327,22 @@ export default {
|
||||
const { data } = await this.$axios('/base/factory/getTree');
|
||||
this.sidebarContent = data;
|
||||
this.buildTree(data);
|
||||
console.log('tree', this.sidebarContent);
|
||||
},
|
||||
|
||||
handleTabClick(tab, event) {
|
||||
if (tab.name == 'graph') this.renderKey = Math.random();
|
||||
},
|
||||
|
||||
factoryChangeHandler(event) {
|
||||
this.factoryListOpen = false;
|
||||
const fcId = event.target.dataset.value;
|
||||
this.handleSidebarItemClick({ id: fcId, type: '工厂' });
|
||||
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
|
||||
},
|
||||
|
||||
handleSidebarItemClick({ label, id, type }) {
|
||||
console.log('lable clicked!', label, id, type);
|
||||
console.log('label clicked!', label, id, type);
|
||||
switch (type) {
|
||||
case '设备':
|
||||
this.queryParams.equipmentId = id;
|
||||
@ -317,8 +398,10 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.side-bar__left >>> .is-current {
|
||||
padding: 0;
|
||||
color: #111;
|
||||
background: #f2f4f7;
|
||||
/* background: #f2f4f7; */
|
||||
background: #e3efff !important;
|
||||
}
|
||||
|
||||
.vvv-enter,
|
||||
@ -338,4 +421,149 @@ export default {
|
||||
/* transform: translateY(0) scaleY(1); */
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.custom-tabs >>> .el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
.custom-tabs >>> .el-tabs__item {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.factory-list__selector {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
padding-left: 28px;
|
||||
background: url(../../../assets/images/factory-icon.png) 0 / 10% no-repeat;
|
||||
}
|
||||
|
||||
.factory-list__selector:hover {
|
||||
cursor: pointer;
|
||||
color: #0008;
|
||||
}
|
||||
|
||||
.factory-list__selector::after {
|
||||
/* content: ''; */
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 12px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
/* background: #5c5c5c; */
|
||||
border-color: #000;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.factory-list__selector:hover::after {
|
||||
/* cursor: pointer; */
|
||||
border-left-color: #0008;
|
||||
}
|
||||
|
||||
.factory-list__wrapper {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 32px 10px #0002;
|
||||
border-radius: 8px;
|
||||
top: 36px;
|
||||
left: 90px;
|
||||
/* max-width: 128px; */
|
||||
height: auto;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/* transition: all 0.3s ease-out; */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.factory-list__wrapper.open {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.factory-list {
|
||||
color: #0008;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.factory-list__item {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 8px 64px 8px 16px;
|
||||
/* min-width: 64px; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.factory-list__item:hover,
|
||||
.factory-list__item.is-current {
|
||||
background: #e3efff;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.factory-list__item.is-current::after {
|
||||
content: '√';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-tree-class >>> .el-tree-node__content {
|
||||
height: auto !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
.custom-tree-class >>> .el-tree-node__content:hover {
|
||||
background: #e3efff;
|
||||
}
|
||||
|
||||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
|
||||
padding: 8px 18px !important;
|
||||
}
|
||||
|
||||
.custom-tree-class
|
||||
>>> .el-tree-node__children
|
||||
.el-tree-node__children
|
||||
.el-tree-node__content {
|
||||
padding: 8px 24px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.custom-icon-class {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
background: url('../../../assets/images/tree-icon-1.png') 100% / contain
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.custom-icon-class.el-tree-node__expand-icon.expanded {
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.el-tree-node__children .custom-icon-class {
|
||||
background: url('../../../assets/images/tree-icon-2.png') 100% / contain
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__children .custom-icon-class {
|
||||
background: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,14 +11,16 @@
|
||||
:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
|
||||
ref="search-bar" />
|
||||
<el-skeleton v-if="initing" :rows="6" animated />
|
||||
<base-table
|
||||
v-else
|
||||
:span-method="mergeColumnHandler"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
<div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
|
||||
<base-table
|
||||
v-if="list && list.length > 0"
|
||||
:span-method="mergeColumnHandler"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,6 +39,7 @@ export default {
|
||||
list: [],
|
||||
tableProps: [],
|
||||
spanInfo: {},
|
||||
noData: true,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@ -51,24 +54,22 @@ export default {
|
||||
} = item;
|
||||
|
||||
const props = [
|
||||
{ prop: 'productLine', label: '产线', align: 'center' },
|
||||
{ prop: 'specification', label: '规格', align: 'center' },
|
||||
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
|
||||
{ prop: 'productLine', label: '产线' },
|
||||
{ prop: 'specification', label: '规格' },
|
||||
{ prop: 'equipmentName', label: '设备' },
|
||||
{ prop: 'totalQuantity', label: '生产总数' },
|
||||
];
|
||||
|
||||
for (const key of Object.keys(hourData).sort()) {
|
||||
const subprop = {
|
||||
label: key,
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: key + '__in', label: '进数据', align: 'center' },
|
||||
{ prop: key + '__out', label: '出数据', align: 'center' },
|
||||
{ prop: key + '__nok', label: '报废数据', align: 'center' },
|
||||
{ prop: key + '__in', label: '进数据' },
|
||||
{ prop: key + '__out', label: '出数据' },
|
||||
{ prop: key + '__nok', label: '报废数据' },
|
||||
{
|
||||
prop: key + '__ratio',
|
||||
label: '报废率',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? val + ' %' : '-'),
|
||||
},
|
||||
],
|
||||
@ -138,6 +139,13 @@ export default {
|
||||
// console.log('recent-24', data);
|
||||
|
||||
this.initing = true;
|
||||
|
||||
if (!data || !data.length) {
|
||||
this.initing = false;
|
||||
this.noData = true;
|
||||
return;
|
||||
}
|
||||
this.noData = false;
|
||||
this.buildProps(data[0]);
|
||||
this.buildData(data);
|
||||
this.queryParams.pageSize = this.list.length;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -74,28 +75,24 @@ export default {
|
||||
width: 128,
|
||||
prop: 'equipmentName',
|
||||
label: '设备名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'equipmentCode',
|
||||
label: '设备编码',
|
||||
align: 'center',
|
||||
},
|
||||
{ width: 128, prop: 'inQuantity', label: '投入数', align: 'center' },
|
||||
{ width: 128, prop: 'outQuantity', label: '产出数', align: 'center' },
|
||||
{ width: 128, prop: 'inQuantity', label: '投入数' },
|
||||
{ width: 128, prop: 'outQuantity', label: '产出数' },
|
||||
{
|
||||
width: 128,
|
||||
prop: 'run',
|
||||
label: '是否运行',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
filter: (val) =>
|
||||
val != null ? ['正常', '计划停机', '故障'][val] : '-',
|
||||
},
|
||||
@ -103,7 +100,6 @@ export default {
|
||||
width: 128,
|
||||
prop: 'error',
|
||||
label: '是否故障',
|
||||
align: 'center',
|
||||
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
|
||||
},
|
||||
{
|
||||
@ -121,7 +117,6 @@ export default {
|
||||
{
|
||||
_action: 'params-monitor',
|
||||
label: '参数监控',
|
||||
align: 'center',
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@ -129,7 +124,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
|
||||
238
src/views/quality/base/qualityInspectionBoxBtn/dialogForm.vue
Normal file
238
src/views/quality/base/qualityInspectionBoxBtn/dialogForm.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-09-11 15:55:13
|
||||
description: DialogForm for equipmentBindSection only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="dataForm"
|
||||
label-width="100px"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="产线"
|
||||
prop="productionId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.productionId"
|
||||
placeholder="请选择产线"
|
||||
filterable
|
||||
@change="handleProductlineChange">
|
||||
<el-option
|
||||
v-for="opt in productionLineList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="工段"
|
||||
prop="sectionId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.sectionId"
|
||||
placeholder="请选择工段"
|
||||
filterable
|
||||
@change="$emit('update', dataForm)">
|
||||
<el-option
|
||||
v-for="opt in workshopSectionList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="按钮盒识别码"
|
||||
prop="buttonId"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入整数',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number.isInteger(Number(val)) && Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="dataForm.buttonId"
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入整数" />
|
||||
</el-form-item>
|
||||
<!--
|
||||
<el-form-item
|
||||
label="报警编码"
|
||||
prop="code"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.code"
|
||||
placeholder="请选择产线"
|
||||
@change="handleProductlineChange">
|
||||
<el-option
|
||||
v-for="opt in productionLineList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-col>
|
||||
|
||||
<el-col>
|
||||
<el-form-item label="按钮盒模式" prop="model">
|
||||
<el-input
|
||||
v-model="dataForm.model"
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入按钮盒模式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="按钮值"
|
||||
prop="keyValue"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入100以内的整数',
|
||||
trigger: 'blur',
|
||||
transform: (val) =>
|
||||
Number.isInteger(+val) &&
|
||||
Number(val) >= 0 &&
|
||||
Number(val) <= 100 &&
|
||||
Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="dataForm.keyValue"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入按钮盒模式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col>
|
||||
<el-form-item label="检测内容" prop="inspectionDetContent">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="dataForm.inspectionDetContent"
|
||||
placeholder="请输入检测内容"
|
||||
@change="$emit('update', dataForm)"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLoading: true,
|
||||
productionLineList: [],
|
||||
workshopSectionList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getProductionLineList();
|
||||
// this.getWorksectionList();
|
||||
// this.getCode('/base/equipment-group-alarm/getCode').then((code) => {
|
||||
// this.formLoading = false;
|
||||
// this.$emit('update', {
|
||||
// ...this.dataForm,
|
||||
// code,
|
||||
// });
|
||||
// });
|
||||
},
|
||||
watch: {
|
||||
'dataForm.productionId': {
|
||||
handler(id) {
|
||||
if (id != null) this.getWorksectionList(id);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
async getProductionLineList() {
|
||||
this.formLoading = true;
|
||||
const res = await this.$axios({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
if (res.code == 0) {
|
||||
this.productionLineList = res.data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
}
|
||||
this.formLoading = false;
|
||||
},
|
||||
|
||||
async getWorksectionList(id) {
|
||||
this.formLoading = true;
|
||||
const res = await this.$axios({
|
||||
url: '/base/workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
if (res.code == 0) {
|
||||
this.workshopSectionList = res.data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
}
|
||||
this.formLoading = false;
|
||||
},
|
||||
|
||||
async handleProductlineChange(id) {
|
||||
await this.getWorksectionList(id);
|
||||
this.dataForm.sectionId = null;
|
||||
this.$emit('update', this.dataForm);
|
||||
},
|
||||
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
fixed="right"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
@ -38,7 +39,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>
|
||||
@ -54,11 +55,12 @@ import {
|
||||
} from '@/api/base/qualityInspectionBoxBtn';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
import moment from 'moment';
|
||||
import DialogForm from './dialogForm.vue';
|
||||
|
||||
export default {
|
||||
name: 'QualityInspectionBoxBtn',
|
||||
mixins: [basicPageMixin],
|
||||
components: {},
|
||||
components: { DialogForm },
|
||||
data() {
|
||||
return {
|
||||
rows: [
|
||||
@ -81,6 +83,9 @@ export default {
|
||||
url: '/base/workshop-section/listAll',
|
||||
prop: 'sectionId',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -91,9 +96,10 @@ export default {
|
||||
rules: [
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入数字',
|
||||
message: '请输入整数',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
transform: (val) =>
|
||||
Number.isInteger(Number(val)) && Number(val),
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -107,9 +113,10 @@ export default {
|
||||
rules: [
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入100以内的数字',
|
||||
message: '请输入100以内的整数',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val) <= 100 && Number(val),
|
||||
transform: (val) =>
|
||||
Number(val) <= 100 && Number.isInteger(+val) && Number(val),
|
||||
},
|
||||
],
|
||||
bind: { type: 'number', min: 0, max: 100 },
|
||||
@ -120,7 +127,7 @@ export default {
|
||||
textarea: true,
|
||||
label: '检测内容',
|
||||
prop: 'inspectionDetContent',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
],
|
||||
@ -173,43 +180,36 @@ export default {
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'productionName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'sectionName',
|
||||
label: '工段',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'inspectionDetContent',
|
||||
label: '检测内容',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
width: 160,
|
||||
prop: 'buttonId',
|
||||
label: '按钮盒识别码',
|
||||
align: 'center',
|
||||
},
|
||||
// {
|
||||
// width: 256,
|
||||
// prop: 'productionId',
|
||||
// label: '按钮盒所在产线ID',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 256,
|
||||
// prop: 'sectionId',
|
||||
// label: '按钮盒所在工段ID',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
{ width: 90, prop: 'keyValue', label: '按钮值', align: 'center' },
|
||||
{ width: 128, prop: 'model', label: '按钮盒模式', align: 'center' },
|
||||
{ width: 90, prop: 'keyValue', label: '按钮值' },
|
||||
{ width: 128, prop: 'model', label: '按钮盒模式' },
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
@ -220,13 +220,13 @@ export default {
|
||||
// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应
|
||||
searchBarKeys: ['inspectionDetContent'],
|
||||
form: {
|
||||
id: undefined,
|
||||
inspectionDetId: undefined,
|
||||
inspectionDetContent: undefined,
|
||||
productionId: undefined,
|
||||
sectionId: undefined,
|
||||
model: undefined,
|
||||
keyValue: undefined,
|
||||
id: null,
|
||||
buttonId: null,
|
||||
inspectionDetContent: null,
|
||||
productionId: null,
|
||||
sectionId: null,
|
||||
model: null,
|
||||
keyValue: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -247,13 +247,13 @@ export default {
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
inspectionDetId: undefined,
|
||||
inspectionDetContent: undefined,
|
||||
productionId: undefined,
|
||||
sectionId: undefined,
|
||||
model: undefined,
|
||||
keyValue: undefined,
|
||||
id: null,
|
||||
buttonId: null,
|
||||
inspectionDetContent: null,
|
||||
productionId: null,
|
||||
sectionId: null,
|
||||
model: null,
|
||||
keyValue: null,
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
@ -300,7 +300,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除安灯按钮16键对应编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除"' + row.sectionName + '"?')
|
||||
.then(function () {
|
||||
return deleteQualityInspectionBoxBtn(id);
|
||||
})
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
fixed="right"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
@ -172,10 +173,10 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'typeName', label: '类型名称', align: 'center' },
|
||||
{ prop: 'content', label: '检测内容', align: 'center' },
|
||||
{ prop: 'code', label: '检测编码', align: 'center' },
|
||||
{ prop: 'remark', label: '备注', align: 'center' },
|
||||
{ prop: 'typeName', label: '类型名称', },
|
||||
{ prop: 'content', label: '检测内容', },
|
||||
{ prop: 'code', label: '检测编码', },
|
||||
{ prop: 'remark', label: '备注', },
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
@ -275,7 +276,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除质量检测信息基础编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除检测信息"' + row.content + '"?')
|
||||
.then(function () {
|
||||
return deleteQualityInspectionDet(id);
|
||||
})
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
@ -106,9 +107,9 @@ export default {
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '检测类型名称', align: 'center' },
|
||||
{ prop: 'code', label: '检测类型编码', align: 'center' },
|
||||
{ prop: 'remark', label: '备注', align: 'center' },
|
||||
{ prop: 'name', label: '检测类型名称' },
|
||||
{ prop: 'code', label: '检测类型编码' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
// {
|
||||
// label: '操作',
|
||||
// alignt: 'center',
|
||||
@ -321,7 +322,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除质量检测类型基础编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除该质量检测类型?')
|
||||
.then(function () {
|
||||
return deleteQualityInspectionType(id);
|
||||
})
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
fixed="right"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
@ -68,7 +69,7 @@ export default {
|
||||
[
|
||||
{
|
||||
select: true,
|
||||
label: '检测内容ID',
|
||||
label: '检测内容',
|
||||
url: '/base/quality-inspection-det/listAll',
|
||||
prop: 'inspectionDetId',
|
||||
labelKey: 'content',
|
||||
@ -97,6 +98,9 @@ export default {
|
||||
label: '产线',
|
||||
url: '/base/production-line/listAll',
|
||||
prop: 'productionLineId',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
@ -105,6 +109,9 @@ export default {
|
||||
url: '/base/workshop-section/listAll', // 这个 url 其实可加可不加，因为下面会更新 options
|
||||
options: [], // 这个options也可加可不加, 因为下面会更新 options
|
||||
prop: 'sectionId',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
@ -118,6 +125,7 @@ export default {
|
||||
datetime: true,
|
||||
label: '检测时间',
|
||||
prop: 'checkTime',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
bind: {
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
'value-format': 'timestamp',
|
||||
@ -126,15 +134,15 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
textarea: true,
|
||||
label: '检测内容',
|
||||
prop: 'inspectionDetContent',
|
||||
value: '',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
],
|
||||
// [
|
||||
// {
|
||||
// textarea: true,
|
||||
// label: '检测内容',
|
||||
// prop: 'inspectionDetContent',
|
||||
// value: '',
|
||||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
// },
|
||||
// ],
|
||||
[{ textarea: true, label: '描述', prop: 'explainText' }],
|
||||
[{ input: true, label: '备注', prop: 'remark' }],
|
||||
],
|
||||
@ -213,32 +221,28 @@ export default {
|
||||
width: 128,
|
||||
prop: 'inspectionDetContent',
|
||||
label: '检测内容',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'checkPerson',
|
||||
label: '检测人员',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'checkTime',
|
||||
label: '检测时间',
|
||||
align: 'center',
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
filter: (val) =>
|
||||
val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-',
|
||||
},
|
||||
{
|
||||
width: 90,
|
||||
prop: 'source',
|
||||
label: '来源',
|
||||
align: 'center',
|
||||
filter: (val) => ['未知', '手动', '自动'][val],
|
||||
},
|
||||
],
|
||||
@ -394,7 +398,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除质量检查信息记录表编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除"' + row.inspectionDetContent + '"?')
|
||||
.then(function () {
|
||||
return deleteQualityInspectionRecord(id);
|
||||
})
|
||||
|
||||
@ -13,18 +13,20 @@
|
||||
<!-- <pre><code v-html="jsondemo"></code></pre> -->
|
||||
|
||||
<el-skeleton v-if="initing" :rows="6" animated />
|
||||
<base-table
|
||||
v-else
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
<div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
|
||||
<base-table
|
||||
v-if="list && list.length > 0"
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import response from './response.json';
|
||||
// import response from './response.json';
|
||||
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
|
||||
// import hljs from 'highlight.js/lib/highlight';
|
||||
// import json from 'highlight.js/lib/languages/json';
|
||||
@ -43,7 +45,6 @@ export default {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// jsondemo: '',
|
||||
list: [
|
||||
// {
|
||||
// inspectionContent: '检测内容1',
|
||||
@ -56,7 +57,6 @@ export default {
|
||||
{
|
||||
prop: 'inspectionContent',
|
||||
label: '检测内容',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -67,20 +67,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
// const response = await this.$axios({
|
||||
// url: '/monitoring/record-in-one-day/get',
|
||||
// method: 'get',
|
||||
// });
|
||||
console.log(response);
|
||||
// const {
|
||||
// // data: { nameData },
|
||||
// code,
|
||||
// } = response;
|
||||
// this.jsondemo = hljs.highlight(
|
||||
// 'json',
|
||||
// JSON.stringify(response, null, 2),
|
||||
// true
|
||||
// ).value;
|
||||
const response = await this.$axios({
|
||||
url: '/monitoring/record-in-one-day/get',
|
||||
method: 'get',
|
||||
});
|
||||
const {
|
||||
data: { data: dyanmicData, nameData },
|
||||
} = response;
|
||||
|
||||
@ -82,18 +82,22 @@ export default {
|
||||
computed: {
|
||||
config() {
|
||||
return {
|
||||
color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
|
||||
// title: {
|
||||
// text: '折线图',
|
||||
// },
|
||||
grid: {
|
||||
top: '24%',
|
||||
left: '3%',
|
||||
top: '12%',
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: this.legend,
|
||||
@ -107,13 +111,145 @@ export default {
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
boundaryGap: true,
|
||||
onZero: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: 'red'
|
||||
},
|
||||
},
|
||||
data: this.xProps,
|
||||
// data: [
|
||||
// '设备1',
|
||||
// '设备2',
|
||||
// '设备3',
|
||||
// '设备4',
|
||||
// '设备5',
|
||||
// '设备6',
|
||||
// '设备7',
|
||||
// '设备8',
|
||||
// '设备9',
|
||||
// '设备10',
|
||||
// '设备11',
|
||||
// '设备12',
|
||||
// '设备13',
|
||||
// '设备14',
|
||||
// '设备15',
|
||||
// '设备16',
|
||||
// '设备17',
|
||||
// '设备18',
|
||||
// '设备19',
|
||||
// '设备20',
|
||||
// ],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
nameTextStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
},
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
},
|
||||
},
|
||||
// 缩放 - 滑动
|
||||
dataZoom: {
|
||||
type: 'inside',
|
||||
},
|
||||
series: this.series,
|
||||
// series: [
|
||||
// {
|
||||
// name: '上片数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 77,
|
||||
// 99,
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '下片数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '检测数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// barCategoryGap: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
|
||||
<template>
|
||||
<!-- 列表 -->
|
||||
<!-- height="35vh" -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
height="35vh"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"></base-table>
|
||||
@ -35,27 +35,22 @@ export default {
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'sumUp',
|
||||
label: '上片总数',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'sumDown',
|
||||
label: '下片总数',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'sumCheck',
|
||||
label: '检测总数',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'scrapRatio',
|
||||
label: '比例(%)',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -7,14 +7,20 @@
|
||||
|
||||
<template>
|
||||
<div class="graph-page">
|
||||
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||
<!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||
<TotalGraph :summary-list="summaryList" />
|
||||
</DetailGraph>
|
||||
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||
</DetailGraph> -->
|
||||
<!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
|
||||
</DetailGraph>
|
||||
</DetailGraph> -->
|
||||
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
||||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||
<div v-if="!series || series.length == 0" style="color: #777; font-size: 16px; letter-spacing: 1px; text-align: center; padding-top: 56px; text-decoration: underline;">暂无数据</div>
|
||||
<LineGraph
|
||||
v-else
|
||||
:x-props="lineData.xProps"
|
||||
:legend="legend"
|
||||
:series="series" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -55,7 +61,8 @@ export default {
|
||||
console.log('this.list', this.lineData.list, this.lineData.xProps);
|
||||
const seriesItem = {
|
||||
name: item.inspectionContent,
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
barCategoryGap: 12,
|
||||
data: [],
|
||||
};
|
||||
|
||||
|
||||
@ -6,33 +6,84 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div class="quality-container" style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<transition mode="out-in" name="fade-down">
|
||||
<template v-if="mode == 'table'">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</template>
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 12px 16px 16px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">产线检测总览</div>
|
||||
<summaryTable :list="summaryList" />
|
||||
</el-row>
|
||||
|
||||
<GraphPage
|
||||
v-else
|
||||
:summary-list="summaryList"
|
||||
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
|
||||
</transition>
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 12px 16px 16px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<div class="blue-title">产线检测详细</div>
|
||||
<div class="custom-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
:label="'\u2002数据列表\u2002'"
|
||||
name="table"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u3000柱状图\u3000'"
|
||||
name="graph"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<transition mode="out-in" name="fade-down">
|
||||
<template v-if="mode == 'table'">
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</template>
|
||||
|
||||
<GraphPage
|
||||
v-else
|
||||
:summary-list="summaryList"
|
||||
:line-data="{
|
||||
list: list,
|
||||
xProps: dynamicProps.map((v) => v.prop),
|
||||
}" />
|
||||
</transition>
|
||||
</el-row>
|
||||
|
||||
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
|
||||
<base-dialog
|
||||
<!-- <base-dialog
|
||||
dialogTitle="数据总览"
|
||||
:dialogVisible="summaryOpen"
|
||||
width="50%"
|
||||
@ -40,7 +91,7 @@
|
||||
@cancel="handleSummaryClose"
|
||||
@confirm="handleSummaryClose">
|
||||
<summaryTable :list="summaryList" />
|
||||
</base-dialog>
|
||||
</base-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,13 +99,58 @@
|
||||
import GraphPage from './graphPage.vue';
|
||||
import summaryTable from './components/summaryTable.vue';
|
||||
|
||||
class DateGetter {
|
||||
constructor() {
|
||||
this.today = new Date();
|
||||
this.y = this.today.getFullYear();
|
||||
this.m = this.today.getMonth();
|
||||
this.d = this.today.getDate();
|
||||
}
|
||||
getWeekRange() {
|
||||
const weekStart = new Date(this.y, this.m, this.d - this.today.getDay());
|
||||
const weekEnd = new Date(
|
||||
this.y,
|
||||
this.m,
|
||||
this.d + (6 - this.today.getDay()),
|
||||
23,
|
||||
59,
|
||||
59
|
||||
);
|
||||
// console.log('week', [weekStart, weekEnd]);
|
||||
return [weekStart, weekEnd];
|
||||
}
|
||||
|
||||
getMonthRange() {
|
||||
const monthStart = new Date(this.y, this.m, 1);
|
||||
const monthEnd = new Date(this.y, this.m + 1, 0, 23, 59, 59);
|
||||
// console.log('month', [monthStart, monthEnd]);
|
||||
return [monthStart, monthEnd];
|
||||
}
|
||||
|
||||
getQuarterRange() {
|
||||
const quarterStart = new Date(this.y, this.m - (this.m % 3), 1);
|
||||
const quarterEnd = new Date(
|
||||
this.y,
|
||||
this.m - (this.m % 3) + 3,
|
||||
0,
|
||||
23,
|
||||
59,
|
||||
59
|
||||
);
|
||||
// console.log('quarter', [quarterStart, quarterEnd]);
|
||||
return [quarterStart, quarterEnd];
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'QualityStatistics',
|
||||
components: { GraphPage, summaryTable },
|
||||
props: {},
|
||||
data() {
|
||||
const dateGetter = new DateGetter();
|
||||
return {
|
||||
mode: 'table', // defaults to 'table'
|
||||
// mode: 'table', // defaults to 'table'
|
||||
activeName: 'table', // defaults to 'table'
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
@ -70,6 +166,28 @@ export default {
|
||||
defaultSelect: [],
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'timerange',
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本周',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getWeekRange());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getMonthRange());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '本季',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getQuarterRange());
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -77,33 +195,33 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '数据总览',
|
||||
name: 'summary',
|
||||
color: 'text',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '表格版',
|
||||
name: 'tableVersion',
|
||||
color: 'text btn-table',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '图形版',
|
||||
name: 'graphVersion',
|
||||
color: 'text btn-graph',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '数据总览',
|
||||
// name: 'summary',
|
||||
// color: 'text',
|
||||
// },
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '表格版',
|
||||
// name: 'tableVersion',
|
||||
// color: 'text btn-table',
|
||||
// },
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '图形版',
|
||||
// name: 'graphVersion',
|
||||
// color: 'text btn-graph',
|
||||
// },
|
||||
],
|
||||
// 动态的 props
|
||||
dynamicProps: [],
|
||||
@ -166,26 +284,26 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mode() {
|
||||
return this.activeName;
|
||||
},
|
||||
tableProps() {
|
||||
return [
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'inspectionContent',
|
||||
label: '检测内容',
|
||||
align: 'center',
|
||||
},
|
||||
...this.dynamicProps,
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'sumInput',
|
||||
label: '检测类型总数',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'ratio',
|
||||
label: '比例',
|
||||
align: 'center',
|
||||
// subcomponent: {
|
||||
// name: 'TextOnly',
|
||||
// props: {
|
||||
@ -214,16 +332,51 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||
this.searchBarFormConfig[0].defaultSelect = [
|
||||
this.$route.params.startTime,
|
||||
this.$route.params.endTime,
|
||||
];
|
||||
this.queryParams.param = {};
|
||||
this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime);
|
||||
this.$set(
|
||||
this.queryParams.param,
|
||||
'startTime',
|
||||
this.$route.params.startTime
|
||||
);
|
||||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
|
||||
} else {
|
||||
this.searchBarFormConfig[0].defaultSelect = []
|
||||
}
|
||||
} else {
|
||||
this.searchBarFormConfig[0].defaultSelect = [];
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
watch: {
|
||||
$route: 'initData',
|
||||
},
|
||||
methods: {
|
||||
initData(to) {
|
||||
// console.log(to)
|
||||
if (to.name === 'QualityStatistics') {
|
||||
if (this.$route.params.startTime && this.$route.params.endTime) {
|
||||
this.searchBarFormConfig[0].defaultSelect = [
|
||||
this.$route.params.startTime,
|
||||
this.$route.params.endTime,
|
||||
];
|
||||
this.queryParams.param = {};
|
||||
this.$set(
|
||||
this.queryParams.param,
|
||||
'startTime',
|
||||
this.$route.params.startTime
|
||||
);
|
||||
this.$set(
|
||||
this.queryParams.param,
|
||||
'endTime',
|
||||
this.$route.params.endTime
|
||||
);
|
||||
} else {
|
||||
this.searchBarFormConfig[0].defaultSelect = [];
|
||||
}
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.getSummaryList();
|
||||
this.getDetailedList();
|
||||
@ -232,20 +385,17 @@ export default {
|
||||
async getSummaryList() {
|
||||
const response = await this.$axios({
|
||||
url: '/monitoring/statistical-data/getUpPart',
|
||||
method: 'get',
|
||||
params: this.queryParams.param
|
||||
method: 'post',
|
||||
data: this.queryParams.param
|
||||
? {
|
||||
param: {
|
||||
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00',
|
||||
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
|
||||
startTime: this.queryParams.param.startTime,
|
||||
endTime: this.queryParams.param.endTime,
|
||||
},
|
||||
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00',
|
||||
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
|
||||
startTime: this.queryParams.param.startTime,
|
||||
endTime: this.queryParams.param.endTime,
|
||||
}
|
||||
: null,
|
||||
: {},
|
||||
});
|
||||
this.summaryList = response.data;
|
||||
console.log('summaryList', this.summaryList);
|
||||
},
|
||||
/** 获取 检测内容和产线关联 列表 */
|
||||
async getDetailedList() {
|
||||
@ -253,22 +403,21 @@ export default {
|
||||
data: { data, otherList, otherMap, nameData },
|
||||
} = await this.$axios({
|
||||
url: '/monitoring/statistical-data/getDownPart',
|
||||
params: this.queryParams.param
|
||||
method: 'post',
|
||||
data: this.queryParams.param
|
||||
? {
|
||||
param: {
|
||||
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
|
||||
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
|
||||
startTime: this.queryParams.param.startTime,
|
||||
endTime: this.queryParams.param.endTime,
|
||||
},
|
||||
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
|
||||
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
|
||||
startTime: this.queryParams.param.startTime,
|
||||
endTime: this.queryParams.param.endTime,
|
||||
}
|
||||
: null,
|
||||
: {},
|
||||
});
|
||||
// this.list = response.data;
|
||||
console.log('data', data);
|
||||
console.log('otherList', otherList);
|
||||
console.log('otherMap', otherMap);
|
||||
console.log('nameData', nameData);
|
||||
// console.log('data', data);
|
||||
// console.log('otherList', otherList);
|
||||
// console.log('otherMap', otherMap);
|
||||
// console.log('nameData', nameData);
|
||||
|
||||
this.dynamicProps = this.filterNameData(nameData);
|
||||
this.list = this.filterData(data);
|
||||
@ -299,6 +448,14 @@ export default {
|
||||
};
|
||||
});
|
||||
},
|
||||
handleTabClick(tab, event) {
|
||||
const { name } = tab;
|
||||
if (name == 'graph') {
|
||||
// 展示柱状图
|
||||
} else {
|
||||
// 展示表格
|
||||
}
|
||||
},
|
||||
/** 总览关闭 */
|
||||
handleSummaryClose() {
|
||||
this.summaryOpen = false;
|
||||
@ -383,6 +540,42 @@ export default {
|
||||
.fade-down-leave {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-left: 12px;
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
@ -390,47 +583,47 @@ export default {
|
||||
// width: 128,
|
||||
// prop: 'line1',
|
||||
// label: '产线1',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line2',
|
||||
// label: '产线2',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line3',
|
||||
// label: '产线3',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line4',
|
||||
// label: '产线4',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line5',
|
||||
// label: '产线5',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line6',
|
||||
// label: '产线6',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line7',
|
||||
// label: '产线7',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'line8',
|
||||
// label: '产线8',
|
||||
// align: 'center',
|
||||
// ,
|
||||
// }, -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user