mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lb #30

Merged
g7hoo merged 23 commits from lb into test 2023-09-22 09:57:16 +08:00
Conversation 0 Commits 23 Files Changed 41 +2631 -935
41 changed files with 2631 additions and 935 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/factory-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 710 B

BIN
src/assets/images/no-data-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

BIN
src/assets/images/tree-icon-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/tree-icon-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

194
src/assets/styles/index.scss
View File

@ -6,11 +6,12 @@
@import './btn.scss'; @import './btn.scss';
body { body {
height: 100%; height: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
} }
// label { // label {
@ -27,170 +28,195 @@ body {
} }
html { html {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
#app { #app {
height: 100%; height: 100%;
} }
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: inherit; box-sizing: inherit;
} }
.no-padding { .no-padding {
padding: 0px !important; padding: 0px !important;
} }
.padding-content { .padding-content {
padding: 4px 0; padding: 4px 0;
} }
a:focus, a:focus,
a:active { a:active {
outline: none; outline: none;
} }
a, a,
a:focus, a:focus,
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
div:focus { div:focus {
outline: none; outline: none;
} }
.fr { .fr {
float: right; float: right;
} }
.fl { .fl {
float: left; float: left;
} }
.pr-5 { .pr-5 {
padding-right: 5px; padding-right: 5px;
} }
.pl-5 { .pl-5 {
padding-left: 5px; padding-left: 5px;
} }
.block { .block {
display: block; display: block;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.inlineBlock { .inlineBlock {
display: block; display: block;
} }
.clearfix { .clearfix {
&:after { &:after {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: ' ';
clear: both; clear: both;
height: 0; height: 0;
} }
} }
aside { aside {
background: #eef1f6; background: #eef1f6;
padding: 8px 24px; padding: 8px 24px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 2px; border-radius: 2px;
display: block; display: block;
line-height: 32px; line-height: 32px;
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
color: #2c3e50; Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased; color: #2c3e50;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a { a {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);
} }
} }
} }
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 16px; padding: 16px;
} }
.components-container { .components-container {
margin: 30px 50px; margin: 30px 50px;
position: relative; position: relative;
} }
.text-center { .text-center {
text-align: center text-align: center;
} }
.sub-navbar { .sub-navbar {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
position: relative; position: relative;
width: 100%; width: 100%;
text-align: right; text-align: right;
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; 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%); 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 { .subtitle {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
&.draft { &.draft {
background: #d0d0d0; background: #d0d0d0;
} }
&.deleted { &.deleted {
background: #d0d0d0; background: #d0d0d0;
} }
} }
.link-type, .link-type,
.link-type:focus { .link-type:focus {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);
} }
} }
.filter-container { .filter-container {
padding-bottom: 10px; padding-bottom: 10px;
.filter-item { .filter-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
//refine vue-multiselect plugin //refine vue-multiselect plugin
.multiselect { .multiselect {
line-height: 16px; line-height: 16px;
} }
.multiselect--active { .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;
}
} }

279
src/assets/styles/ruoyi.scss
View File

@ -5,110 +5,123 @@
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 { .pr5 {
padding-right: 5px; padding-right: 5px;
} }
.pb5 { .pb5 {
padding-bottom: 5px; padding-bottom: 5px;
} }
.mt5 { .mt5 {
margin-top: 5px; margin-top: 5px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mb5 { .mb5 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mb8 { .mb8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml5 { .ml5 {
margin-left: 5px; margin-left: 5px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { .h1,
font-family: inherit; .h2,
font-weight: 500; .h3,
line-height: 1.1; .h4,
color: inherit; .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{ .el-message-box__status + .el-message-box__message {
word-break: break-word; word-break: break-word;
} }
.el-dialog:not(.is-fullscreen) { .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 { .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 70vh; max-height: 70vh;
padding: 10px 20px 0; padding: 10px 20px 0;
} }
.el-dialog{ .el-dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: calc(100% - 30px); max-width: calc(100% - 30px);
max-height: calc(100% - 70px); max-height: calc(100% - 70px);
.el-dialog__body { .el-dialog__body {
overflow: auto; overflow: auto;
} }
} }
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper,
th { .el-table__fixed-header-wrapper {
word-break: break-word; th {
background-color: #f8f8f9; word-break: break-word;
color: #515a6e; background-color: #f8f8f9;
height: 40px; color: #515a6e;
font-size: 13px; height: 40px;
} font-size: 13px;
} }
.el-table__body-wrapper { }
.el-button [class*="el-icon-"] + span { .el-table__body-wrapper {
margin-left: 1px; .el-button [class*='el-icon-'] + span {
} margin-left: 1px;
} }
}
} }
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size:15px; font-size: 15px;
color:#6379bb; color: #6379bb;
border-bottom:1px solid #ddd; border-bottom: 1px solid #ddd;
margin:8px 10px 25px 10px; margin: 8px 10px 25px 10px;
padding-bottom:5px padding-bottom: 5px;
} }
/** 表格布局 **/ /** 表格布局 **/
@ -122,169 +135,171 @@
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #FFFFFF none; background: #ffffff none;
border-radius:4px; border-radius: 4px;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; position: absolute;
} }
@media ( max-width : 768px) { @media (max-width: 768px) {
.pagination-container .el-pagination > .el-pagination__jump { .pagination-container .el-pagination > .el-pagination__jump {
display: none !important; display: none !important;
} }
.pagination-container .el-pagination > .el-pagination__sizes { .pagination-container .el-pagination > .el-pagination__sizes {
display: none !important; display: none !important;
} }
} }
.el-table .fixed-width .el-button--mini { .el-table .fixed-width .el-button--mini {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
width: inherit; width: inherit;
} }
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { .el-table .el-dropdown-link,
cursor: pointer; .el-table .el-dropdown-selfdefine {
margin-left: 5px; cursor: pointer;
margin-left: 5px;
} }
.el-table .el-dropdown, .el-icon-arrow-down { .el-table .el-dropdown,
font-size: 12px; .el-icon-arrow-down {
font-size: 12px;
} }
.el-tree-node__content > .el-checkbox { .el-tree-node__content > .el-checkbox {
margin-right: 8px; margin-right: 8px;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
} }
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
// border-bottom: 1px solid #e7eaec; // border-bottom: 1px solid #e7eaec;
// border-top: 1px solid #e7eaec; // border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 14px 15px 7px;
min-height: 40px; min-height: 40px;
} }
.el-card__body { .el-card__body {
padding: 15px 20px 20px 20px; padding: 15px 20px 20px 20px;
} }
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20B2AA; background: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48D1CC; background: #48d1cc;
border-color: #48D1CC; border-color: #48d1cc;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20B2AA; background-color: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
} }
.text-primary { .text-primary {
color: inherit; color: inherit;
} }
.text-success { .text-success {
color: #1c84c6; color: #1c84c6;
} }
.text-info { .text-info {
color: #23c6c8; color: #23c6c8;
} }
.text-warning { .text-warning {
color: #f8ac59; color: #f8ac59;
} }
.text-danger { .text-danger {
color: #ed5565; color: #ed5565;
} }
.text-muted { .text-muted {
color: #888888; color: #888888;
} }
/* image */ /* image */
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.img-lg { .img-lg {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.avatar-upload-preview { .avatar-upload-preview {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(50%, -50%); transform: translate(50%, -50%);
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
overflow: hidden; overflow: hidden;
} }
/* 拖拽列样式 */ /* 拖拽列样式 */
.sortable-ghost{ .sortable-ghost {
opacity: .8; opacity: 0.8;
color: #fff!important; color: #fff !important;
background: #42b983!important; background: #42b983 !important;
} }
.top-right-btn { .top-right-btn {
position: relative; position: relative;
float: right; float: right;
} }

10
src/utils/dynamicProps.js
View File

@ -1,3 +1,5 @@
import moment from 'moment';
/** /**
* 用于动态表结构的 tableProps 生成 * 用于动态表结构的 tableProps 生成
* @param {*} nameData * @param {*} nameData
@ -16,10 +18,9 @@ export function handleNameData(nameData) {
function step1(tree1) { function step1(tree1) {
return Array.from(new Set(tree1.map((item) => item.name))) return Array.from(new Set(tree1.map((item) => item.name)))
.sort() .sort()
.map((item) => ({ .map((time) => ({
prop: item, prop: time,
label: item, label: moment(time).format('YYYY-MM-DD HH:mm:ss'),
align: 'center',
children: [], children: [],
})); }));
} }
@ -33,7 +34,6 @@ function step2(firstTierProps, tree2) {
parent.children.push({ parent.children.push({
label: nd.name, label: nd.name,
prop: `${parent.prop}-${nd.name}`, prop: `${parent.prop}-${nd.name}`,
align: 'center',
}); });
} }
}); });

16
src/views/base/equipmentBindGroup/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -85,12 +86,11 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'equipmentName', label: '设备', align: 'center' }, { prop: 'equipmentName', label: '设备' },
{ prop: 'groupName', label: '分组', align: 'center' }, { prop: 'groupName', label: '分组' },
{ {
_action: 'equipment-bind-group-show-alert', _action: 'equipment-bind-group-show-alert',
label: '分组报警', label: '分组报警',
align: 'center',
subcomponent: { subcomponent: {
props: ['injectData'], props: ['injectData'],
render: function (h) { render: function (h) {
@ -98,7 +98,7 @@ export default {
return h( return h(
'el-button', 'el-button',
{ {
props: { type: 'text', size: 'mini' }, props: { type: 'text' },
on: { on: {
click: function () { click: function () {
console.log('inejctdata', _this.injectData); console.log('inejctdata', _this.injectData);
@ -162,6 +162,9 @@ export default {
label: '设备', label: '设备',
url: '/base/equipment/page?pageNo=1&pageSize=100', url: '/base/equipment/page?pageNo=1&pageSize=100',
prop: 'equipmentId', prop: 'equipmentId',
bind: {
filterable: true,
},
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
], ],
@ -173,6 +176,9 @@ export default {
// depends: '__product_line', // 依赖产线获取数据 // depends: '__product_line', // 依赖产线获取数据
// depends: 'productionLineId', // depends: 'productionLineId',
prop: 'groupId', prop: 'groupId',
bind: {
filterable: true,
},
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
], ],
@ -223,7 +229,7 @@ export default {
/** 查询列表 */ /** 查询列表 */
getList() { getList() {
this.loading = true; this.loading = true;
_// 执行查询 _; // 执行查询
getEquipmentBindGroupPage(this.queryParams).then((response) => { getEquipmentBindGroupPage(this.queryParams).then((response) => {
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;

13
src/views/base/equipmentBindSection/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -83,28 +84,26 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'productionLine', label: '产线名称', align: 'center' }, { prop: 'productionLine', label: '产线名称' },
{ prop: 'workshopSection', label: '工段名称', align: 'center' }, { prop: 'workshopSection', label: '工段名称' },
{ prop: 'equipment', label: '设备名称', align: 'center' }, { prop: 'equipment', label: '设备名称' },
{ prop: 'sort', label: '工段中排序', align: 'center' }, { prop: 'sort', label: '工段中排序' },
{ {
prop: 'lineDataType', prop: 'lineDataType',
label: '产线数据类型', label: '产线数据类型',
align: 'center',
filter: (val) => filter: (val) =>
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-', val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
}, },
{ {
prop: 'sectionDataType', prop: 'sectionDataType',
label: '工段数据类型', label: '工段数据类型',
align: 'center',
filter: (val) => filter: (val) =>
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-', val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
}, },
// { // {
// action: 'show-alert', // action: 'show-alert',
// label: '报警', // label: '报警',
// align: 'center', // ,
// subcomponent: { // subcomponent: {
// props: ['injectData'], // props: ['injectData'],
// render: function (h) { // render: function (h) {

19
src/views/base/equipmentGroup/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -84,13 +85,12 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备分组名称', align: 'center' }, { prop: 'name', label: '设备分组名称' },
{ prop: 'code', label: '检测分组编码', align: 'center' }, { prop: 'code', label: '设备分组编码' },
{ prop: 'remark', label: '备注', align: 'center' }, { prop: 'remark', label: '备注' },
{ {
_action: 'equipment-group-show-alert', _action: 'equipment-group-show-alert',
label: '报警', label: '报警',
align: 'center',
subcomponent: { subcomponent: {
props: ['injectData'], props: ['injectData'],
render: function (h) { render: function (h) {
@ -98,7 +98,7 @@ export default {
return h( return h(
'el-button', 'el-button',
{ {
props: { type: 'text', size: 'mini' }, props: { type: 'text' },
on: { on: {
click: function () { click: function () {
console.log('inejctdata', _this.injectData); console.log('inejctdata', _this.injectData);
@ -127,7 +127,7 @@ export default {
type: 'input', type: 'input',
label: '分组编码', label: '分组编码',
placeholder: '请输入设备分组编码', placeholder: '请输入设备分组编码',
param: 'codes', param: 'code',
}, },
{ {
type: 'button', type: 'button',
@ -172,6 +172,7 @@ export default {
label: '分组编码', label: '分组编码',
prop: 'code', prop: 'code',
url: '/base/equipment-group/getCode', url: '/base/equipment-group/getCode',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
], ],
[ [
@ -302,11 +303,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm( .confirm('是否确认删除设备分组 "' + row.name + '"?')
'是否确认删除设备分组（用于同类型不同厂家的设备区分）编号为"' +
id +
'"的数据项?'
)
.then(function () { .then(function () {
return deleteEquipmentGroup(id); return deleteEquipmentGroup(id);
}) })

177
src/views/base/equipmentGroupAlarm/dialogForm.vue Normal file
View 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>

57
src/views/base/equipmentGroupAlarm/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -37,7 +38,7 @@
@close="cancel" @close="cancel"
@cancel="cancel" @cancel="cancel"
@confirm="submitForm"> @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> </base-dialog>
</div> </div>
</template> </template>
@ -54,10 +55,11 @@ import {
import basicPageMixin from '@/mixins/lb/basicPageMixin'; import basicPageMixin from '@/mixins/lb/basicPageMixin';
import moment from 'moment'; import moment from 'moment';
import { publicFormatter } from '@/utils/dict'; import { publicFormatter } from '@/utils/dict';
import DialogForm from './dialogForm.vue';
export default { export default {
name: 'EquipmentGroupAlarm', name: 'EquipmentGroupAlarm',
components: {}, components: { DialogForm },
mixins: [basicPageMixin], mixins: [basicPageMixin],
data() { data() {
return { return {
@ -84,22 +86,27 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'code', label: '报警编码', align: 'center' }, { width: 240, prop: 'code', label: '报警编码' },
{ prop: 'type', label: '报警类型', align: 'center' }, {
prop: 'type',
label: '报警类型',
filter: (val) =>
val != null ? ['-', '字符型', '布尔型', '-'][val] : '-',
},
{ {
prop: 'grade', prop: 'grade',
label: '报警级别', label: '报警级别',
align: 'center',
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL), filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
}, },
{ prop: 'alarmCode', label: '设备报警编码', align: 'center' }, { prop: 'alarmCode', label: '设备报警编码' },
{ prop: 'plcParamName', label: '参数列名', align: 'center' }, { prop: 'plcParamName', label: '参数列名' },
{ prop: 'alarmContent', label: '报警内容', align: 'center' }, { prop: 'alarmContent', label: '报警内容' },
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'input', type: 'input',
label: '设备分组编码', label: '设备分组编码',
width: '220',
placeholder: '/', placeholder: '/',
param: 'equipmentGroupCode', param: 'equipmentGroupCode',
defaultSelect: null, defaultSelect: null,
@ -181,14 +188,14 @@ export default {
}, },
// 表单参数 // 表单参数
form: { form: {
id: undefined, id: null,
equipmentGroupId: undefined, equipmentGroupId: null,
code: undefined, code: null,
type: undefined, type: null,
grade: undefined, grade: null,
alarmCode: undefined, alarmCode: null,
alarmContent: undefined, alarmContent: null,
plcParamName: undefined, plcParamName: null,
}, },
// // 表单校验 // // 表单校验
// rules: { // rules: {
@ -249,14 +256,14 @@ export default {
/** 表单重置 */ /** 表单重置 */
reset() { reset() {
this.form = { this.form = {
id: undefined, id: null,
equipmentGroupId: undefined, equipmentGroupId: null,
code: undefined, code: null,
type: undefined, type: null,
grade: undefined, grade: null,
alarmCode: undefined, alarmCode: null,
alarmContent: undefined, alarmContent: null,
plcParamName: undefined, plcParamName: null,
}; };
this.resetForm('form'); this.resetForm('form');
}, },
@ -321,7 +328,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除设备分组报警明细编号为"' + id + '"的数据项?') .confirm('是否确认删除该报警?')
.then(function () { .then(function () {
return deleteEquipmentGroupAlarm(id); return deleteEquipmentGroupAlarm(id);
}) })

30
src/views/base/equipmentPlc/index.vue
View File

@ -12,6 +12,7 @@
:page="queryParams.pageNo" :page="queryParams.pageNo"
:limit="queryParams.pageSize" :limit="queryParams.pageSize"
:table-data="list" :table-data="list"
ref="pageTable"
@emitFun="handleEmitFun"> @emitFun="handleEmitFun">
<method-btn <method-btn
v-if="tableBtn.length" v-if="tableBtn.length"
@ -58,9 +59,12 @@ const switchBtn = {
name: 'SwitchBtn', name: 'SwitchBtn',
props: ['injectData'], props: ['injectData'],
data() { data() {
return { return {};
active: +this.injectData[this.injectData.prop] == 1 ? true : false, },
}; computed: {
active() {
return +this.injectData[this.injectData.prop] == 1 ? true : false;
},
}, },
methods: {}, methods: {},
render: function (h) { render: function (h) {
@ -72,8 +76,6 @@ const switchBtn = {
}, },
on: { on: {
change: (newVal) => { change: (newVal) => {
this.active = !this.active;
console.log('changed emit', newVal);
this.$emit('emitData', { this.$emit('emitData', {
action: 'update-collect', action: 'update-collect',
payload: { payload: {
@ -95,6 +97,7 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
tableKey: Math.random(),
searchBarKeys: ['name', 'plcTableName'], searchBarKeys: ['name', 'plcTableName'],
tableBtn: [ tableBtn: [
this.$auth.hasPermi('base:equipment-plc:update') this.$auth.hasPermi('base:equipment-plc:update')
@ -118,17 +121,16 @@ export default {
// width: 180, // width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), // filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// }, // },
{ prop: 'code', label: '编码', align: 'center' }, { prop: 'code', label: '编码' },
{ prop: 'plcTableName', label: '关联表名', align: 'center' }, { prop: 'plcTableName', label: '关联表名' },
{ prop: 'name', label: '标识名称', align: 'center' }, { prop: 'name', label: '标识名称' },
{ prop: 'enName', label: '英文名称', align: 'center' }, { prop: 'enName', label: '英文名称' },
{ {
prop: 'collection', prop: 'collection',
label: '是否采集', label: '是否采集',
align: 'center',
subcomponent: switchBtn, subcomponent: switchBtn,
}, },
{ prop: 'description', label: '描述', align: 'center' }, { prop: 'description', label: '描述' },
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {
@ -185,6 +187,7 @@ export default {
label: '编码', label: '编码',
prop: 'code', prop: 'code',
url: '/base/equipment-group/getCode', url: '/base/equipment-group/getCode',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
], ],
[ [
@ -192,7 +195,7 @@ export default {
input: true, input: true,
label: '标识', label: '标识',
prop: 'name', prop: 'name',
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
// bind: { // bind: {
// disabled: true, // some condition, like detail mode... // disabled: true, // some condition, like detail mode...
// } // }
@ -246,7 +249,7 @@ export default {
handleEmitFun({ action, payload }) { handleEmitFun({ action, payload }) {
switch (action) { switch (action) {
case 'update-collect': case 'update-collect':
this.reset(); this.reset();
const tempForm = {}; const tempForm = {};
Object.keys(this.form).forEach((key) => { Object.keys(this.form).forEach((key) => {
tempForm[key] = payload[key]; tempForm[key] = payload[key];
@ -267,6 +270,7 @@ export default {
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;
this.loading = false; this.loading = false;
// this.tableKey = Math.random(); // method 1
}); });
}, },
/** 取消按钮 */ /** 取消按钮 */

69
src/views/base/equipmentPlcConnect/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -61,7 +62,7 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
searchBarKeys: ['name', 'plcTableName'], searchBarKeys: ['equipmentId', 'plcId'],
// tableBtn: [ // tableBtn: [
// this.$auth.hasPermi('base:equipment-plc:update') // this.$auth.hasPermi('base:equipment-plc:update')
// ? { // ? {
@ -98,18 +99,17 @@ export default {
// width: 180, // width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), // filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// }, // },
{ prop: 'productionLine', label: '产线', align: 'center' }, { prop: 'productionLine', label: '产线' },
{ prop: 'workshopSection', label: '工段', align: 'center' }, { prop: 'workshopSection', label: '工段' },
{ prop: 'equipmentName', label: '设备名', align: 'center' }, { prop: 'equipmentName', label: '设备名' },
{ prop: 'equipmentCode', label: '设备编码', align: 'center' }, { prop: 'equipmentCode', label: '设备编码' },
{ prop: 'plcCode', label: '关联表编码', align: 'center' }, { prop: 'plcCode', label: '关联表编码' },
{ prop: 'plcTableName', label: '关联表名', align: 'center' }, { prop: 'plcTableName', label: '关联表名' },
{ prop: 'plcName', label: '标识名称', align: 'center' }, { prop: 'plcName', label: '标识名称' },
{ prop: 'bindingParameters', label: '绑定参数数量', align: 'center' }, { prop: 'bindingParameters', label: '绑定参数数量' },
{ {
_action: 'params-bind', _action: 'params-bind',
label: '查看绑定', label: '查看绑定',
align: 'center',
subcomponent: { subcomponent: {
props: ['injectData'], props: ['injectData'],
render: function (h) { render: function (h) {
@ -136,16 +136,18 @@ export default {
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'input', type: 'select',
label: '设备名', label: '设备名',
placeholder: '请输入设备名', placeholder: '请选择设备',
param: 'equipmentId', param: 'equipmentId',
selectOptions: [],
}, },
{ {
type: 'input', type: 'select',
label: '编码', label: 'PLC编码',
placeholder: '请输入编码', placeholder: '请选择编码',
param: 'plcId', param: 'plcId',
selectOptions: [],
}, },
{ {
type: 'button', type: 'button',
@ -179,6 +181,7 @@ export default {
select: true, select: true,
label: '关联表名', label: '关联表名',
prop: 'plcId', prop: 'plcId',
labelKey: `plcTableName`,
url: '/base/equipment-plc/listAll', url: '/base/equipment-plc/listAll',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
@ -207,8 +210,44 @@ export default {
}, },
created() { created() {
this.getList(); this.getList();
this.initSearchOptions();
}, },
methods: { 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 的默认实现 */
handleEmitFun({ action, payload }) { handleEmitFun({ action, payload }) {
switch (action) { switch (action) {

30
src/views/base/equipmentPlcParam/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -68,29 +69,27 @@ export default {
// width: 180, // width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), // filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// }, // },
{ prop: 'plcParamName', label: '参数列名', align: 'center' }, { prop: 'plcParamName', label: '参数列名' },
{ prop: 'name', label: '参数名称', align: 'center' }, { prop: 'name', label: '参数名称' },
{ {
prop: 'unit', prop: 'unit',
label: '单位', label: '单位',
align: 'center',
filter: publicFormatter('unit_dict'), filter: publicFormatter('unit_dict'),
}, },
{ {
prop: 'collection', prop: 'collection',
label: '是否采集', label: '是否采集',
align: 'center',
filter: (val) => (val != null ? ['否', '是'][val] : '-'), filter: (val) => (val != null ? ['否', '是'][val] : '-'),
}, },
{ prop: 'minValue', label: '最小值', align: 'center' }, { prop: 'minValue', label: '最小值' },
{ prop: 'maxValue', label: '最大值', align: 'center' }, { prop: 'maxValue', label: '最大值' },
{ prop: 'defaultValue', label: '标准值', align: 'center' }, { prop: 'defaultValue', label: '标准值' },
{ prop: 'description', label: '描述', align: 'center' }, { prop: 'description', label: '描述' },
{ prop: 'remark', label: '备注', align: 'center' }, { prop: 'remark', label: '备注' },
// { // {
// _action: 'params-bind', // _action: 'params-bind',
// label: '查看绑定', // label: '查看绑定',
// align: 'center', // ,
// subcomponent: { // subcomponent: {
// props: ['injectData'], // props: ['injectData'],
// render: function (h) { // render: function (h) {
@ -157,7 +156,7 @@ export default {
{ {
type: 'number', type: 'number',
message: '请输入正确的数字', message: '请输入正确的数字',
trigger: 'blur', trigger: 'change',
transform: (val) => Number(val), transform: (val) => Number(val),
}, },
], ],
@ -167,10 +166,13 @@ export default {
label: '最大值', label: '最大值',
prop: 'maxValue', prop: 'maxValue',
rules: [ rules: [
{
required: false,
},
{ {
type: 'number', type: 'number',
message: '请输入正确的数字', message: '请输入正确的数字',
trigger: 'blur', trigger: 'change',
transform: (val) => Number(val), transform: (val) => Number(val),
}, },
], ],
@ -349,8 +351,8 @@ export default {
plcParamName: undefined, plcParamName: undefined,
name: undefined, name: undefined,
unit: undefined, unit: undefined,
minValue: undefined, minValue: null,
maxValue: undefined, maxValue: null,
defaultValue: undefined, defaultValue: undefined,
collection: undefined, collection: undefined,
description: undefined, description: undefined,

16
src/views/core/base/equipment/index.vue
View File

@ -16,6 +16,7 @@
<method-btn <method-btn
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
:width="120"
label="操作" label="操作"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
@ -147,15 +148,14 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备名称', align: 'center' }, { prop: 'name', label: '设备名称' },
{ prop: 'code', label: '检测编码', align: 'center' }, { width: 256, prop: 'code', label: '检测编码' },
{ prop: 'equipmentType', label: '设备类型', align: 'center' }, { prop: 'equipmentType', label: '设备类型' },
{ prop: 'enName', label: '英文名称', align: 'center' }, { prop: 'enName', label: '英文名称' },
{ prop: 'abbr', label: '缩写', align: 'center' }, { prop: 'abbr', label: '缩写' },
{ {
action: 'show-detail', action: 'show-detail',
label: '详情', label: '详情',
align: 'center',
subcomponent: { subcomponent: {
props: ['injectData'], props: ['injectData'],
render: function (h) { render: function (h) {
@ -377,8 +377,8 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '属性名称', align: 'center' }, { prop: 'name', label: '属性名称' },
{ prop: 'value', label: '属性值', align: 'center' }, { prop: 'value', label: '属性值' },
], ],
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,

7
src/views/core/base/equipmentType/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -85,9 +86,9 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备类型名称', align: 'center' }, { prop: 'name', label: '设备类型名称', },
{ prop: 'code', label: '检测类型编码', align: 'center' }, { prop: 'code', label: '检测类型编码', },
{ prop: 'remark', label: '备注', align: 'center' }, { prop: 'remark', label: '备注', },
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {

234
src/views/equipment/analysis/efficiency/components/pieChart.vue
View File

@ -6,7 +6,34 @@
--> -->
<template> <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> </template>
<script> <script>
@ -19,7 +46,27 @@ export default {
data() { data() {
return { return {
chart: null, chart: null,
textData: {
workTime: '',
downTime: '',
stopTime: '',
peEfficiency: '',
},
config: { config: {
title: {
text: '产线1', //<=========
top: '35%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 18,
},
subtext: '设备', //<=========
subtextStyle: {
fontSize: 14,
},
},
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
grid: { grid: {
top: 0, top: 0,
left: 0, left: 0,
@ -30,6 +77,7 @@ export default {
trigger: 'item', trigger: 'item',
}, },
legend: { legend: {
show: false,
top: '0%', top: '0%',
left: 'center', left: 'center',
textStyle: { textStyle: {
@ -39,34 +87,70 @@ export default {
itemHeight: 10, itemHeight: 10,
}, },
series: [ series: [
// 嵌套环形图
{ {
name: this.value.equipmentName || 'Default', // 外环
name: '',
type: 'pie', type: 'pie',
radius: ['40%', '75%'], radius: ['75%', '90%'],
avoidLabelOverlap: false, center: ['50%', '45%'],
label: { label: {
show: false, show: false,
position: 'center',
}, },
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({ data: [
name: ['工作时长', '停机时长', '故障时长'][index], //<=========
value: this.value[v], { name: '工作时长', value: 1048 },
})), { name: '停机时长', value: 735 },
// data: [ { name: '故障时长', value: 580 },
// { value: 1048, name: 'Search Engine' }, ],
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' },
// ],
}, },
{
// 内环
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() { mounted() {
console.log('value', this.value);
if (!this.chart) { if (!this.chart) {
this.chart = echarts.init(this.$el); this.chart = echarts.init(this.$refs.pieChart);
this.$nextTick(() => { this.$nextTick(() => {
this.chart.setOption(this.config); this.chart.setOption(this.config);
}); });
@ -75,24 +159,120 @@ export default {
beforeDestroy() { beforeDestroy() {
if (this.chart) this.chart.dispose(); 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> </script>
<style scoped lang="scss"> <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; padding: 12px;
min-height: 320px;
background: #f1f1f1;
position: relative; position: relative;
} }
.pie-chart::before { .data-view {
content: attr(data-eqname); 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; font-size: 16px;
line-height: 1; line-height: 24px;
position: absolute; }
top: -16px;
left: 0; .data-view__item__title {
font-size: 8px;
line-height: 14px;
}
.blue {
color: #3da8fd;
}
.green {
color: #8ef0ab;
}
.purple {
color: #6b5cfd;
}
.yellow {
color: #ffc72a;
} }
</style> </style>

289
src/views/equipment/analysis/efficiency/index.vue
View File

@ -13,46 +13,64 @@
ref="search-bar" ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" /> @headBtnClick="handleSearchBarBtnClick" />
<!-- 列表 --> <el-row>
<base-table <el-col class="custom-tabs">
class="base-table__margin" <el-tabs
:table-props="tableProps" v-model="activeName"
:table-data="list" :stretch="true"
@emitFun="handleEmitFun"> @tab-click="handleTabClick">
<!-- :page="queryParams.pageNo" <el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
:limit="queryParams.pageSize" --> <!-- 列表 -->
<!-- <method-btn <base-table
v-if="tableBtn.length" class="base-table__margin"
slot="handleBtn" :table-props="tableProps"
label="操作" :page="1"
:method-list="tableBtn" :limit="10"
@clickBtn="handleTableBtnClick" /> --> :table-data="list"
</base-table> @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>
<!-- 分页组件 --> <div class="bg-grid grid-charts">
<!-- <pagination <pie-chart
v-show="total > 0" v-for="item in list"
:total="total" :key="item.id"
:page.sync="queryParams.pageNo" :value="item" />
:limit.sync="queryParams.pageSize" <!-- <pie-chart v-for="item in 5" :key="item" :value="item" /> -->
@pagination="getList" /> --> </div>
</div>
<!-- 对话框(添加 / 修改) --> </div>
<base-dialog </el-tab-pane>
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'" </el-tabs>
:dialogVisible="open" </el-col>
:width="visualizationOpen ? '80%' : '700px'" </el-row>
@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> </div>
</template> </template>
@ -68,6 +86,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
activeName: 'table',
open: false, open: false,
visualizationOpen: false, visualizationOpen: false,
trendOpen: false, trendOpen: false,
@ -86,84 +105,72 @@ export default {
// : undefined, // : undefined,
// ].filter((v) => v), // ].filter((v) => v),
tableProps: [ tableProps: [
{ prop: 'factoryName', label: '工厂', align: 'center' }, { prop: 'factoryName', label: '工厂' },
{ prop: 'lineName', label: '产线', align: 'center' }, { prop: 'lineName', label: '产线' },
{ prop: 'sectionName', label: '工段', align: 'center' }, { prop: 'sectionName', label: '工段' },
{ prop: 'equipmentName', label: '设备', align: 'center' }, { prop: 'equipmentName', label: '设备' },
{ {
label: '有效时间', label: '有效时间',
align: 'center',
children: [ children: [
{ {
width: 128, width: 128,
prop: 'workTime', prop: 'workTime',
label: '工作时长', label: '工作时长',
align: 'center',
}, },
{ {
width: 128, width: 128,
prop: 'workRate', prop: 'workRate',
label: '百分比', label: '百分比',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
], ],
}, },
{ {
label: '关机时间', label: '关机时间',
align: 'center',
children: [ children: [
{ {
width: 128, width: 128,
prop: 'stopTime', prop: 'stopTime',
label: '停机时长', label: '停机时长',
align: 'center',
}, },
{ width: 128, prop: 'stopRate', label: '百分比', align: 'center' }, { width: 128, prop: 'stopRate', label: '百分比' },
], ],
}, },
{ {
label: '中断损失', label: '中断损失',
align: 'center',
children: [ children: [
{ {
width: 128, width: 128,
prop: 'downTime', prop: 'downTime',
label: '故障时长', label: '故障时长',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
{ width: 128, prop: 'downRate', label: '百分比', align: 'center' }, { width: 128, prop: 'downRate', label: '百分比' },
{ {
width: 128, width: 128,
prop: 'timeEfficiency', prop: 'timeEfficiency',
label: '时间开动率', label: '时间开动率',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
], ],
}, },
{ {
label: '速度损失', label: '速度损失',
align: 'center',
children: [ children: [
{ {
width: 128, width: 128,
prop: 'realProcSpeed', prop: 'realProcSpeed',
label: '实际加工速度', label: '实际加工速度',
align: 'center',
}, },
{ {
width: 128, width: 128,
prop: 'designProcSpeed', prop: 'designProcSpeed',
label: '理论加工速度', label: '理论加工速度',
align: 'center',
}, },
{ {
width: 128, width: 128,
prop: 'peEfficiency', prop: 'peEfficiency',
label: '速度开动率', label: '速度开动率',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
], ],
@ -171,19 +178,17 @@ export default {
{ {
prop: 'oee', prop: 'oee',
label: 'OEE', label: 'OEE',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
{ {
prop: 'teep', prop: 'teep',
label: 'TEEP', label: 'TEEP',
align: 'center',
filter: (val) => (val != null ? +val.toFixed(3) : '-'), filter: (val) => (val != null ? +val.toFixed(3) : '-'),
}, },
// { // {
// _action: 'view-trend', // _action: 'view-trend',
// label: '趋势', // label: '趋势',
// align: 'center', // ,
// subcomponent: { // subcomponent: {
// props: ['injectData'], // props: ['injectData'],
// render: function (h) { // render: function (h) {
@ -240,7 +245,7 @@ export default {
parent: 'dateFilterType', parent: 'dateFilterType',
// 时间段选择 // 时间段选择
type: 'datePicker', type: 'datePicker',
label: '时间段', // label: '时间段',
dateType: 'daterange', dateType: 'daterange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
@ -254,7 +259,7 @@ export default {
parent: 'dateFilterType', parent: 'dateFilterType',
// 日期选择 // 日期选择
type: 'datePicker', type: 'datePicker',
label: '日期', // label: '日期',
dateType: 'date', dateType: 'date',
placeholder: '选择日期', placeholder: '选择日期',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
@ -269,16 +274,16 @@ export default {
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
{ // {
type: 'separate', // type: 'separate',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '设备可视化', // btnName: '设备可视化',
name: 'visualization', // name: 'visualization',
plain: true, // plain: true,
color: 'success', // color: 'success',
}, // },
// { // {
// type: 'button', // type: 'button',
// btnName: 'OEE', // btnName: 'OEE',
@ -364,7 +369,6 @@ export default {
params: this.queryParams, params: this.queryParams,
}); });
if (code == 0) { if (code == 0) {
console.log('data', data);
this.list = data; this.list = data;
} }
}, },
@ -407,6 +411,8 @@ export default {
}, },
submitForm() {}, submitForm() {},
handleTabClick() {},
}, },
}; };
</script> </script>
@ -416,4 +422,141 @@ export default {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr)); 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> </style>

66
src/views/equipment/analysis/exception/index.vue
View File

@ -50,39 +50,47 @@ export default {
data() { data() {
return { return {
searchBarKeys: ['name', 'code'], 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: [ 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', prop: 'mtbf',
label: '平均故障间隔时间[MTBF](h)', label: '平均故障间隔时间[MTBF](h)',
align: 'center',
}, },
{ {
width: 180, width: 240,
prop: 'mttr', prop: 'mttr',
label: '平均维修时间[MTTR](h)', label: '平均维修时间[MTTR](h)',
align: 'center',
}, },
{ prop: 'workTime', label: '工作时长(h)', align: 'center' }, { width: 128, prop: 'workTime', label: '工作时长(h)' },
{ prop: 'downTime', label: '故障时长(h)', align: 'center' }, { width: 128, prop: 'downTime', label: '故障时长(h)' },
{ prop: 'downCount', label: '故障次数', align: 'center' }, { prop: 'downCount', label: '故障次数' },
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {
@ -113,6 +121,8 @@ export default {
], ],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNo: 1,
pageSize: 10,
lineId: null, lineId: null,
factoryId: null, factoryId: null,
recordTime: null, recordTime: null,
@ -162,15 +172,13 @@ export default {
this.queryParams.recordTime = [ this.queryParams.recordTime = [
moment() moment()
.month(btn.month - 1) .month(btn.month - 1)
.format('YYYY-MM')+'-01 00:00:00', .format('YYYY-MM') + '-01 00:00:00',
moment() moment().month(btn.month).format('YYYY-MM') + '-01 00:00:00',
.month(btn.month)
.format('YYYY-MM')+'-01 00:00:00',
]; ];
} else { } else {
this.queryParams.recordTime = null; this.queryParams.recordTime = null;
} }
this.queryParams.lineId = btn.lineId || null; this.queryParams.lineId = btn.lineId || null;
this.handleQuery(); this.handleQuery();
break; break;
} }

128
src/views/equipment/analysis/quality/components/lineChart.vue
View File

@ -15,27 +15,143 @@ import * as echarts from 'echarts';
export default { export default {
name: 'LineChart', name: 'LineChart',
components: {}, components: {},
props: ['config'], props: ['config', 'list'],
data() { data() {
return { return {
chart: null, 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() { mounted() {
console.log('[linechart] mounted');
this.init(); this.init();
}, },
beforeDestroy() { beforeDestroy() {
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
} }
console.log('[linechart] destroyed');
}, },
methods: { methods: {
init() { init() {
console.log('thsi el', this.$el);
if (!this.chart) this.chart = echarts.init(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> </script>
@ -43,7 +159,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.line-chart { .line-chart {
padding: 0 12px; padding: 0 12px;
background: #e1e1e1; height: 1px;
min-height: 320px; flex: 1;
} }
</style> </style>

148
src/views/equipment/analysis/quality/index.vue
View File

@ -13,28 +13,35 @@
ref="search-bar" ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" /> @headBtnClick="handleSearchBarBtnClick" />
<!-- 列表 --> <el-row>
<base-table <el-col class="custom-tabs">
:table-props="tableProps" <el-tabs
:page="queryParams.pageNo" v-model="activeName"
:limit="queryParams.pageSize" :stretch="true"
:table-data="list" @tab-click="handleTabClick">
@emitFun="handleEmitFun"></base-table> <el-tab-pane :label="'数据列表'" name="table">
<!-- 列表 -->
<!-- 图形分析 dialog --> <base-table
<!-- <base-dialog :table-props="tableProps"
dialogTitle="图形视角" :page="queryParams.pageNo"
:dialogVisible="dialogVisible" :limit="queryParams.pageSize"
width="60%" :table-data="list"
@close="dialogClose" @emitFun="handleEmitFun"></base-table>
@cancel="dialogClose" </el-tab-pane>
@confirm="dialogClose"> <el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
<LineChart v-if="dialogVisible" :config="lineChartConfig" /> <div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
</base-dialog> --> <div class="blue-title">各设备加工数量</div>
<LineChart :list="list" />
</div>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment';
import LineChart from './components/lineChart.vue'; import LineChart from './components/lineChart.vue';
export default { export default {
@ -42,12 +49,14 @@ export default {
components: { LineChart }, components: { LineChart },
props: {}, props: {},
data() { data() {
const now = new Date();
const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
return { return {
dialogVisible: false, dialogVisible: false,
urls: { urls: {
page: '/analysis/equipment-analysis/quality', page: '/analysis/equipment-analysis/quality',
}, },
mode: 'table', // defaults to 'table' activeName: 'table', // defaults to 'table'
searchBarFormConfig: [ searchBarFormConfig: [
// 产品 // 产品
{ {
@ -72,13 +81,30 @@ export default {
dateType: 'daterange', // datetimerange dateType: 'daterange', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss', // format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
// valueFormat: 'timestamp', // valueFormat: 'timestamp',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始日期', startPlaceholder: '开始日期',
endPlaceholder: '结束日期', endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime', 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', type: 'button',
@ -86,9 +112,9 @@ export default {
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
{ // {
type: 'separate', // type: 'separate',
}, // },
// { // {
// type: 'button', // type: 'button',
// btnName: '列表数据', // btnName: '列表数据',
@ -111,43 +137,36 @@ export default {
// width: 160, // width: 160,
prop: 'sectionName', prop: 'sectionName',
label: '工段', label: '工段',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'equipmentName', prop: 'equipmentName',
label: '设备名称', label: '设备名称',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'products', prop: 'products',
label: '产品名称', label: '产品名称',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'inQuantity', prop: 'inQuantity',
label: '进片数量', label: '进片数量',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'outQuantity', prop: 'outQuantity',
label: '出片数量', label: '出片数量',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'nokQuantity', prop: 'nokQuantity',
label: '破损/不合格数', label: '破损/不合格数',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'passRate', prop: 'passRate',
label: '合格率', label: '合格率',
align: 'center',
}, },
], ],
lineChartConfig: { lineChartConfig: {
@ -161,14 +180,14 @@ export default {
top: 0, top: 0,
left: 0, left: 0,
padding: 5, padding: 5,
icon: 'roundRect', icon: 'roundRect',
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
fontSize: 14, fontSize: 14,
lineHeight: 14 lineHeight: 14,
}, },
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -176,13 +195,13 @@ export default {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '合格率', name: '合格率',
nameLocation: 'end', nameLocation: 'end',
nameTextStyle: { nameTextStyle: {
fontSize: 14, fontSize: 14,
align: 'right' align: 'right',
}, },
nameGap: 26 nameGap: 26,
}, },
series: [ series: [
{ {
@ -229,6 +248,11 @@ export default {
this.getList(); this.getList();
}, },
methods: { methods: {
handleTabClick(tab, event) {
// console.log('tab event', tab, event);
// tab is el-tab vue component.
},
async fillLineOptions() { async fillLineOptions() {
const { data } = await this.$axios({ const { data } = await this.$axios({
url: '/base/production-line/listAll', 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> </style>

15
src/views/equipment/timing-diagram/output/components/lineChart.vue
View File

@ -21,7 +21,14 @@ export default {
chart: null, chart: null,
}; };
}, },
computed: {}, watch: {
config: {
handler(value) {
if (value != null) this.setOption(value);
},
deep: true,
},
},
mounted() { mounted() {
this.init(); this.init();
}, },
@ -32,9 +39,11 @@ export default {
}, },
methods: { methods: {
init() { init() {
console.log('thsi el', this.$el);
if (!this.chart) this.chart = echarts.init(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);
}, },
}, },
}; };

235
src/views/equipment/timing-diagram/output/index.vue
View File

@ -6,25 +6,44 @@
--> -->
<template> <template>
<div class="app-container"> <div
<h1>设备产量时序图</h1> class="production-timegraph-container"
<!-- 搜索工作栏 --> style="background: #f2f4f9; flex: 1">
<SearchBar <el-row
:formConfigs="searchBarFormConfig" class=""
ref="search-bar" style="
@headBtnClick="handleSearchBarBtnClick" /> 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"> <el-row
<div class="graphs" v-if="graphList.length"> class=""
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key"> style="
<h2 class="graph-title">{{ eq.key }}</h2> margin-bottom: 12px;
<LineChart background: #fff;
:key="eq.key + '__linechart'" padding: 16px 16px 24px;
:config="getRealConfig(index)" /> border-radius: 8px;
">
<div class="blue-title">设备产量时序图</div>
<div class="main-area">
<div class="graphs" v-if="graphList.length">
<LineChart :config="templateConfig" />
</div> </div>
<div class="no-data-bg" v-else></div>
</div> </div>
<h2 v-else>请添加设备</h2> </el-row>
</div>
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<base-dialog <base-dialog
@ -58,6 +77,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
accumulators: new Map(),
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'select', type: 'select',
@ -77,15 +97,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间段', label: '时间段',
dateType: 'daterange', // datetimerange dateType: 'date', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss', // format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
// valueFormat: 'timestamp', // valueFormat: 'timestamp',
rangeSeparator: '-', // rangeSeparator: '-',
startPlaceholder: '开始日期', // startPlaceholder: '开始日期',
endPlaceholder: '结束日期', // endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'], // defaultTime: ['00:00:00', '23:59:59'],
placeholder: '选择日期',
param: 'recordTime', param: 'recordTime',
}, },
{ {
@ -99,9 +120,9 @@ export default {
}, },
{ {
type: 'button', type: 'button',
btnName: '设备对比', btnName: '添加对比',
name: 'compare', name: 'compare',
color: 'warning', color: 'primary',
plain: true, plain: true,
}, },
], ],
@ -115,30 +136,47 @@ export default {
eqList: [], eqList: [],
graphList: [], graphList: [],
templateConfig: { templateConfig: {
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
grid: { grid: {
top: 88, top: 48,
left: 56, left: 48,
right: 56, right: 24,
bottom: 56, bottom: 24,
}, },
legend: { legend: {
top: 0, top: 0,
left: 0, right: 12,
padding: 5, padding: 6,
icon: 'roundRect', itemWidth: 16,
itemWidth: 12, itemHeight: 8,
itemHeight: 12,
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
fontSize: 14, fontSize: 12,
lineHeight: 14, lineHeight: 12,
color: '#0007',
}, },
}, },
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Array(24) boundaryGap: true,
.fill(1) axisTick: {
.map((item, index) => `${index}:00`), // show: false,
alignWithLabel: true,
lineStyle: {
color: '#0003',
},
},
axisLabel: {
color: '#0007',
},
data: [],
// data: Array(24)
// .fill(1)
// .map((item, index) => `${index}:00`),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -146,19 +184,41 @@ export default {
nameLocation: 'end', nameLocation: 'end',
nameTextStyle: { nameTextStyle: {
fontSize: 14, fontSize: 14,
align: 'right', align: 'center',
}, },
nameGap: 26, nameGap: 26,
max: function (value) {
return value.max + Math.floor(value.max / 5);
},
}, },
series: [ series: [
{ // {
name: '产线1', // name: '产线1',
data: Array(24) // data: Array(24)
.fill(1) // .fill(1)
.map(() => Math.random() * 100), // .map(() => Math.random() * 100),
type: 'line', // type: 'line',
smooth: true, // 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.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null; this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || 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(); this.getList();
break; break;
case 'compare': case 'compare':
@ -230,10 +295,41 @@ export default {
// ]; // ];
// eq2.key = 'SS2'; // eq2.key = 'SS2';
// this.graphList = [eq1, eq2]; // 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) { getEquipmentQuantity(equipmentArr) {
return equipmentArr.map((item) => item.totalQuantity); 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() { async initEquipment() {
const { code, data } = await this.$axios({ const { code, data } = await this.$axios({
@ -313,18 +396,42 @@ export default {
method: 'get', method: 'get',
params: this.queryParams, params: this.queryParams,
}); });
this.queryParams.equipmentId = null; // 清空一下
if (code == 0) { if (code == 0) {
const newEqlist = this.objectToArray(data); const newEqlist = this.objectToArray(data);
if (!newEqlist || newEqlist.length == 0) { if (!newEqlist || newEqlist.length == 0) {
this.$message.error('该设备没有产量数据'); this.$message.error('该设备没有产量数据');
return; return;
} }
this.graphList.push(newEqlist[0]); this.graphList.push(...newEqlist);
newEqlist.forEach(this.setSeries);
} }
this.open = false; this.open = false;
} },
}, },
}; };
</script> </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>

277
src/views/equipment/timing-diagram/status/index.vue
View File

@ -6,29 +6,51 @@
--> -->
<template> <template>
<div class="app-container"> <div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
<h1>设备状态时序图</h1> <el-row
<!-- 搜索工作栏 --> class=""
<SearchBar style="
:formConfigs="searchBarFormConfig" margin-bottom: 12px;
ref="search-bar" background: #fff;
@headBtnClick="handleSearchBarBtnClick" /> 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"> <el-row
<div class="legend-row"> class=""
<div class="legend"> style="
<div class="icon running"></div> margin-bottom: 12px;
<div>运行中</div> background: #fff;
</div> padding: 16px 16px 32px;
<!-- <div class="legend"> 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 class="icon waiting"></div>
<div>待机</div> <div>待机</div>
</div> --> </div> -->
<div class="legend"> <div class="legend">
<div class="icon fault"></div> <div class="icon fault"></div>
<div>故障</div> <div>故障</div>
</div> </div>
<!-- <div class="legend"> <!-- <div class="legend">
<div class="icon lack"></div> <div class="icon lack"></div>
<div>缺料</div> <div>缺料</div>
</div> </div>
@ -36,83 +58,51 @@
<div class="icon full"></div> <div class="icon full"></div>
<div>满料</div> <div>满料</div>
</div> --> </div> -->
<div class="legend"> <div class="legend">
<div class="icon stop"></div> <div class="icon stop"></div>
<div>计划停机</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> </div>
<h2 v-else>请添加设备</h2>
</div> </div>
<div class="graphs" v-if="graphList.length"> </el-row>
<!-- <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>
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<base-dialog <base-dialog
@ -185,9 +175,9 @@ export default {
}, },
{ {
type: 'button', type: 'button',
btnName: '设备对比', btnName: '添加对比',
name: 'compare', name: 'compare',
color: 'warning', color: 'primary',
plain: true, plain: true,
}, },
], ],
@ -344,26 +334,52 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.graph { .graph {
border: 1px solid #ccc; // border: 1px solid #ccc;
padding: 12px 12px 28px 12px; // padding: 12px 12px 28px 12px;
margin: 64px 0; // margin: 64px 0;
position: relative; position: relative;
display: flex; display: flex;
} }
.graph-title { .graph-title {
position: absolute; // position: absolute;
top: -64px; // top: -64px;
left: -1px; // left: -1px;
padding: 8px 18px; // padding: 8px 18px;
background: #ccc; padding: 0 12px;
font-size: 18px; font-size: 14px;
line-height: 1; 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,
.graph-item-fixed { .graph-item-fixed {
height: 88px; // height: 88px;
// width: 24px; // width: 24px;
flex: 1; flex: 1;
// border: 1px solid #ccc; // border: 1px solid #ccc;
@ -405,32 +421,40 @@ export default {
} }
.running { .running {
background-color: #84f04e; background-color: #5ad8a6;
// background-color: #84f04e;
} }
.waiting { .waiting {
background-color: #409eff; background-color: #5ad8a6;
// background-color: #409eff;
} }
.fault { .fault {
background-color: #ea5b5b; // background-color: #ea5b5b;
background-color: #fc9c91;
} }
.full { .full {
background-color: #e6a23c; // background-color: #e6a23c;
background-color: #598fff;
} }
.lack { .lack {
background-color: #a69c8d; // background-color: #a69c8d;
background-color: #7585a2;
} }
.stop { .stop {
background-color: #000c; background-color: #000;
} }
.legend-row { .legend-row {
margin: 12px 0; margin: 6px 0;
padding-right: 12px;
display: flex; display: flex;
justify-content: flex-end;
> .legend:not(:last-child) { > .legend:not(:last-child) {
margin-right: 12px; margin-right: 12px;
} }
@ -441,9 +465,32 @@ export default {
} }
.icon { .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; height: 16px;
margin-right: 8px; width: 4px;
border-radius: 1px;
background: #0b58ff;
} }
} }
</style> </style>

14
src/views/monitoring/equipmentAlarmLog/index.vue
View File

@ -16,6 +16,7 @@
<method-btn <method-btn
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
:width="120"
label="操作" label="操作"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
@ -81,13 +82,12 @@ export default {
: undefined, : undefined,
].filter((v) => v), ].filter((v) => v),
tableProps: [ tableProps: [
{ width: 128, prop: 'productionLine', label: '产线', align: 'center' }, { width: 128, prop: 'productionLine', label: '产线' },
{ width: 128, prop: 'workshopSection', label: '工段', align: 'center' }, { width: 128, prop: 'workshopSection', label: '工段' },
{ width: 128, prop: 'equipment', label: '设备名称', align: 'center' }, { width: 128, prop: 'equipment', label: '设备名称' },
{ {
prop: 'alarmGrade', prop: 'alarmGrade',
label: '报警级别', label: '报警级别',
align: 'center',
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL), filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
}, },
{ {
@ -96,11 +96,11 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'alarmContent', label: '报警内容', align: 'center' }, { prop: 'alarmContent', label: '报警内容' },
// { // {
// _action: 'equipment-group-show-alert', // _action: 'equipment-group-show-alert',
// label: '报警', // label: '报警',
// align: 'center', // ,
// subcomponent: { // subcomponent: {
// props: ['injectData'], // props: ['injectData'],
// render: function (h) { // render: function (h) {
@ -166,7 +166,7 @@ export default {
this.getList(); this.getList();
}, },
methods: { methods: {
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */ /** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
handleSearchBarBtnClick(btn) { handleSearchBarBtnClick(btn) {
// 仅查询一种情况 // 仅查询一种情况
this.queryParams.createTime = btn.createTime; this.queryParams.createTime = btn.createTime;

8
src/views/monitoring/equipmentFullParams/index.vue
View File

@ -35,7 +35,9 @@
" /> " />
</div> </div>
</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> </div>
</template> </template>
@ -139,19 +141,16 @@ export default {
width: 48, width: 48,
prop: 'index', prop: 'index',
label: '序号', label: '序号',
align: 'center',
}, },
{ {
width: 160, width: 160,
prop: 'time', prop: 'time',
label: '时间', label: '时间',
align: 'center',
}, },
{ {
width: 200, width: 200,
prop: 'plcCode', prop: 'plcCode',
label: 'PLC编码', label: 'PLC编码',
align: 'center',
}, },
]; ];
const firstLineData = { const firstLineData = {
@ -162,7 +161,6 @@ export default {
otherList.forEach((item) => { otherList.forEach((item) => {
props.push({ props.push({
label: item.name, label: item.name,
align: 'center',
prop: item.name, prop: item.name,
width: 128, width: 128,
}); });

6
src/views/monitoring/equipmentProcessAmount/graph.vue
View File

@ -25,7 +25,7 @@ export default {
grid: { grid: {
top: 64, top: 64,
left: 56, left: 56,
right: 24, right: 64,
bottom: 56, bottom: 56,
}, },
title: { title: {
@ -64,6 +64,10 @@ export default {
color: '#ccc', color: '#ccc',
}, },
}, },
name: '数量',
nameTextStyle: {
fontSize: 14,
},
}, },
series: [ series: [
{ {

326
src/views/monitoring/equipmentProcessAmount/index.vue
View File

@ -9,15 +9,52 @@
<div style="flex: 1; display: flex; background: #f2f4f9"> <div style="flex: 1; display: flex; background: #f2f4f9">
<div <div
class="app-container" class="app-container"
style="margin-right: 12px; border-radius: 8px; background: #fff"> style="
<!-- side bar --> margin-right: 12px;
border-radius: 8px;
background: #fff;
padding: 0;
">
<div <div
class="side-bar__left" class="factory-list__selector"
style="width: 240px; padding: 12px; height: 100%"> 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 <el-tree
:data="sidebarContent" class="custom-tree-class"
:data="currentFactory?.children"
:props="treeProps" :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> </div>
<div <div
@ -30,28 +67,45 @@
ref="search-bar" ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" /> @headBtnClick="handleSearchBarBtnClick" />
<transition appear name="vvv" mode="out-in"> <el-row>
<base-table <el-col class="custom-tabs">
v-if="mode == 'table'" <el-tabs v-model="activeName" @tab-click="handleTabClick">
:table-props="tableProps" <el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
:page="1" <base-table
:limit="999" v-if="mode == 'table'"
:table-data="list" :table-props="tableProps"
@emitFun="handleEmitFun"> :page="1"
<!-- <method-btn :limit="999"
:table-data="list"
@emitFun="handleEmitFun">
<!-- <method-btn
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> --> @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" />
<div
v-else
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> <!-- <transition appear name="vvv" mode="out-in"></transition> -->
<!-- graph -->
<Graph v-if="list.length" :equipment-list="list" />
<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
</div>
</transition>
</div> </div>
</div> </div>
</div> </div>
@ -66,6 +120,16 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
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: [ sidebarContent: [
// { // {
// id: 'fc1', // id: 'fc1',
@ -152,6 +216,7 @@ export default {
// ], // ],
// }, // },
], ],
activeName: 'table',
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'datePicker', type: 'datePicker',
@ -172,23 +237,23 @@ export default {
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
{ // {
type: 'separate', // type: 'separate',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '表格', // btnName: '表格',
name: 'table', // name: 'table',
plain: true, // plain: true,
color: 'success', // color: 'success',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '图表', // btnName: '图表',
name: 'graph', // name: 'graph',
plain: true, // plain: true,
color: 'warning', // color: 'warning',
}, // },
// { // {
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '', // type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
// btnName: '导出', // btnName: '导出',
@ -197,11 +262,11 @@ export default {
// }, // },
], ],
tableProps: [ tableProps: [
{ prop: 'lineName', label: '产线', align: 'center' }, { prop: 'lineName', label: '产线' },
{ prop: 'sectionName', label: '工段', align: 'center' }, { prop: 'sectionName', label: '工段' },
{ prop: 'externalCode', label: '设备编码', align: 'center' }, { prop: 'externalCode', label: '设备编码' },
{ prop: 'equipmentName', label: '设备名称', align: 'center' }, { prop: 'equipmentName', label: '设备名称' },
{ prop: 'totalQuantity', label: '加工数量', align: 'center' }, { prop: 'totalQuantity', label: '加工数量' },
], ],
mode: 'table', // table | graph mode: 'table', // table | graph
queryParams: { queryParams: {
@ -230,20 +295,20 @@ export default {
this.$set(factory, 'label', factory.name); this.$set(factory, 'label', factory.name);
this.$set(factory, 'type', '工厂'); this.$set(factory, 'type', '工厂');
delete factory.name; delete factory.name;
factory.children = factory.lines; // factory.children = factory.lines;
delete factory.lines; // delete factory.lines;
factory.children?.forEach((line) => { factory.children?.forEach((line) => {
this.$set(line, 'label', line.name); this.$set(line, 'label', line.name);
this.$set(line, 'type', '产线'); this.$set(line, 'type', '产线');
delete line.name; delete line.name;
line.children = line.sections; // line.children = line.sections;
delete line.sections; // delete line.sections;
line.children?.forEach((ws) => { line.children?.forEach((ws) => {
this.$set(ws, 'label', ws.name); this.$set(ws, 'label', ws.name);
this.$set(ws, 'type', '工段'); this.$set(ws, 'type', '工段');
delete ws.name; delete ws.name;
ws.children = ws.equipments; // ws.children = ws.equipments;
delete ws.equipments; // delete ws.equipments;
ws.children?.forEach((eq) => { ws.children?.forEach((eq) => {
this.$set(eq, 'label', eq.name); this.$set(eq, 'label', eq.name);
this.$set(eq, 'type', '设备'); this.$set(eq, 'type', '设备');
@ -258,10 +323,23 @@ export default {
const { data } = await this.$axios('/base/factory/getTree'); const { data } = await this.$axios('/base/factory/getTree');
this.sidebarContent = data; this.sidebarContent = data;
this.buildTree(data); this.buildTree(data);
console.log('tree', this.sidebarContent);
},
handleTabClick(tab, event) {
console.log('handle tab click: ', tab, event);
},
factoryChangeHandler(event) {
this.factoryListOpen = false;
const fcId = event.target.dataset.value;
console.log('fc id', fcId);
this.handleSidebarItemClick({ id: fcId, type: '工厂' });
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
}, },
handleSidebarItemClick({ label, id, type }) { handleSidebarItemClick({ label, id, type }) {
console.log('lable clicked!', label, id, type); console.log('label clicked!', label, id, type);
switch (type) { switch (type) {
case '设备': case '设备':
this.queryParams.equipmentId = id; this.queryParams.equipmentId = id;
@ -317,8 +395,10 @@ export default {
<style scoped> <style scoped>
.side-bar__left >>> .is-current { .side-bar__left >>> .is-current {
padding: 0;
color: #111; color: #111;
background: #f2f4f7; /* background: #f2f4f7; */
background: #E3EFFF !important;
} }
.vvv-enter, .vvv-enter,
@ -338,4 +418,146 @@ export default {
/* transform: translateY(0) scaleY(1); */ /* transform: translateY(0) scaleY(1); */
transform: translateY(0); 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> </style>

42
src/views/monitoring/equipmentRecentHours/index.vue
View File

@ -11,14 +11,16 @@
:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]" :formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
ref="search-bar" /> ref="search-bar" />
<el-skeleton v-if="initing" :rows="6" animated /> <el-skeleton v-if="initing" :rows="6" animated />
<base-table <div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
v-else <base-table
:span-method="mergeColumnHandler" v-if="list && list.length > 0"
:table-props="tableProps" :span-method="mergeColumnHandler"
:table-data="list" :table-props="tableProps"
@emitFun="handleEmitFun"></base-table> :table-data="list"
<!-- :page="queryParams.pageNo" @emitFun="handleEmitFun"></base-table>
:limit="queryParams.pageSize" --> <!-- :page="queryParams.pageNo"
:limit="queryParams.pageSize" -->
</div>
</div> </div>
</template> </template>
@ -37,6 +39,7 @@ export default {
list: [], list: [],
tableProps: [], tableProps: [],
spanInfo: {}, spanInfo: {},
noData: true,
}; };
}, },
computed: {}, computed: {},
@ -51,24 +54,22 @@ export default {
} = item; } = item;
const props = [ const props = [
{ prop: 'productLine', label: '产线', align: 'center' }, { prop: 'productLine', label: '产线' },
{ prop: 'specification', label: '规格', align: 'center' }, { prop: 'specification', label: '规格' },
{ prop: 'equipmentName', label: '设备', align: 'center' }, { prop: 'equipmentName', label: '设备' },
{ prop: 'totalQuantity', label: '生产总数', align: 'center' }, { prop: 'totalQuantity', label: '生产总数' },
]; ];
for (const key of Object.keys(hourData).sort()) { for (const key of Object.keys(hourData).sort()) {
const subprop = { const subprop = {
label: key, label: key,
align: 'center',
children: [ children: [
{ prop: key + '__in', label: '进数据', align: 'center' }, { prop: key + '__in', label: '进数据' },
{ prop: key + '__out', label: '出数据', align: 'center' }, { prop: key + '__out', label: '出数据' },
{ prop: key + '__nok', label: '报废数据', align: 'center' }, { prop: key + '__nok', label: '报废数据' },
{ {
prop: key + '__ratio', prop: key + '__ratio',
label: '报废率', label: '报废率',
align: 'center',
filter: (val) => (val != null ? val + ' %' : '-'), filter: (val) => (val != null ? val + ' %' : '-'),
}, },
], ],
@ -138,6 +139,13 @@ export default {
// console.log('recent-24', data); // console.log('recent-24', data);
this.initing = true; this.initing = true;
if (!data || !data.length) {
this.initing = false;
this.noData = true;
return;
}
this.noData = false;
this.buildProps(data[0]); this.buildProps(data[0]);
this.buildData(data); this.buildData(data);
this.queryParams.pageSize = this.list.length; this.queryParams.pageSize = this.list.length;

13
src/views/monitoring/equipmentStatusAndParams/index.vue
View File

@ -18,6 +18,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -74,28 +75,24 @@ export default {
width: 128, width: 128,
prop: 'equipmentName', prop: 'equipmentName',
label: '设备名称', label: '设备名称',
align: 'center',
}, },
{ {
width: 128, width: 128,
prop: 'equipmentCode', prop: 'equipmentCode',
label: '设备编码', label: '设备编码',
align: 'center',
}, },
{ width: 128, prop: 'inQuantity', label: '投入数', align: 'center' }, { width: 128, prop: 'inQuantity', label: '投入数' },
{ width: 128, prop: 'outQuantity', label: '产出数', align: 'center' }, { width: 128, prop: 'outQuantity', label: '产出数' },
{ {
width: 128, width: 128,
prop: 'run', prop: 'run',
label: '是否运行', label: '是否运行',
align: 'center',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'), filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
}, },
{ {
width: 128, width: 128,
prop: 'status', prop: 'status',
label: '状态', label: '状态',
align: 'center',
filter: (val) => filter: (val) =>
val != null ? ['正常', '计划停机', '故障'][val] : '-', val != null ? ['正常', '计划停机', '故障'][val] : '-',
}, },
@ -103,7 +100,6 @@ export default {
width: 128, width: 128,
prop: 'error', prop: 'error',
label: '是否故障', label: '是否故障',
align: 'center',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'), filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
}, },
{ {
@ -121,7 +117,6 @@ export default {
{ {
_action: 'params-monitor', _action: 'params-monitor',
label: '参数监控', label: '参数监控',
align: 'center',
subcomponent: { subcomponent: {
props: ['injectData'], props: ['injectData'],
render: function (h) { render: function (h) {
@ -129,7 +124,7 @@ export default {
return h( return h(
'el-button', 'el-button',
{ {
props: { type: 'text', size: 'mini' }, props: { type: 'text' },
on: { on: {
click: function () { click: function () {
console.log('inejctdata', _this.injectData); console.log('inejctdata', _this.injectData);

233
src/views/quality/base/qualityInspectionBoxBtn/dialogForm.vue Normal file
View File

@ -0,0 +1,233 @@
<!--
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="[
{
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="[
{
type: 'number',
message: '请输入100以内的整数',
trigger: 'blur',
transform: (val) =>
Number(val) <= 100 && Number.isInteger(+val) && 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) {
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>

66
src/views/quality/base/qualityInspectionBoxBtn/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
fixed="right" fixed="right"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
@ -38,7 +39,7 @@
@close="cancel" @close="cancel"
@cancel="cancel" @cancel="cancel"
@confirm="submitForm"> @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> </base-dialog>
</div> </div>
</template> </template>
@ -54,11 +55,12 @@ import {
} from '@/api/base/qualityInspectionBoxBtn'; } from '@/api/base/qualityInspectionBoxBtn';
import basicPageMixin from '@/mixins/lb/basicPageMixin'; import basicPageMixin from '@/mixins/lb/basicPageMixin';
import moment from 'moment'; import moment from 'moment';
import DialogForm from './dialogForm.vue';
export default { export default {
name: 'QualityInspectionBoxBtn', name: 'QualityInspectionBoxBtn',
mixins: [basicPageMixin], mixins: [basicPageMixin],
components: {}, components: { DialogForm },
data() { data() {
return { return {
rows: [ rows: [
@ -81,6 +83,9 @@ export default {
url: '/base/workshop-section/listAll', url: '/base/workshop-section/listAll',
prop: 'sectionId', prop: 'sectionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: {
filterable: true,
},
}, },
], ],
[ [
@ -91,9 +96,10 @@ export default {
rules: [ rules: [
{ {
type: 'number', type: 'number',
message: '请输入数字', message: '请输入整数',
trigger: 'blur', trigger: 'blur',
transform: (val) => Number(val), transform: (val) =>
Number.isInteger(Number(val)) && Number(val),
}, },
], ],
}, },
@ -107,9 +113,10 @@ export default {
rules: [ rules: [
{ {
type: 'number', type: 'number',
message: '请输入100以内的数字', message: '请输入100以内的整数',
trigger: 'blur', 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 }, bind: { type: 'number', min: 0, max: 100 },
@ -120,7 +127,7 @@ export default {
textarea: true, textarea: true,
label: '检测内容', label: '检测内容',
prop: 'inspectionDetContent', 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'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ {
width: 128,
prop: 'productionName', prop: 'productionName',
label: '产线', label: '产线',
align: 'center',
}, },
{ {
width: 128,
prop: 'sectionName', prop: 'sectionName',
label: '工段', label: '工段',
align: 'center',
}, },
{ {
width: 128,
prop: 'inspectionDetContent', prop: 'inspectionDetContent',
label: '检测内容', label: '检测内容',
align: 'center',
}, },
{ {
width: 160, width: 160,
prop: 'buttonId', prop: 'buttonId',
label: '按钮盒识别码', label: '按钮盒识别码',
align: 'center',
}, },
// { // {
// width: 256, // width: 256,
// prop: 'productionId', // prop: 'productionId',
// label: '按钮盒所在产线ID', // label: '按钮盒所在产线ID',
// align: 'center', // ,
// }, // },
// { // {
// width: 256, // width: 256,
// prop: 'sectionId', // prop: 'sectionId',
// label: '按钮盒所在工段ID', // label: '按钮盒所在工段ID',
// align: 'center', // ,
// }, // },
{ width: 90, prop: 'keyValue', label: '按钮值', align: 'center' }, { width: 90, prop: 'keyValue', label: '按钮值' },
{ width: 128, prop: 'model', label: '按钮盒模式', align: 'center' }, { width: 128, prop: 'model', label: '按钮盒模式' },
], ],
// 查询参数 // 查询参数
queryParams: { queryParams: {
@ -220,13 +220,13 @@ export default {
// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应 // 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应
searchBarKeys: ['inspectionDetContent'], searchBarKeys: ['inspectionDetContent'],
form: { form: {
id: undefined, id: null,
inspectionDetId: undefined, buttonId: null,
inspectionDetContent: undefined, inspectionDetContent: null,
productionId: undefined, productionId: null,
sectionId: undefined, sectionId: null,
model: undefined, model: null,
keyValue: undefined, keyValue: null,
}, },
}; };
}, },
@ -247,13 +247,13 @@ export default {
/** 表单重置 */ /** 表单重置 */
reset() { reset() {
this.form = { this.form = {
id: undefined, id: null,
inspectionDetId: undefined, buttonId: null,
inspectionDetContent: undefined, inspectionDetContent: null,
productionId: undefined, productionId: null,
sectionId: undefined, sectionId: null,
model: undefined, model: null,
keyValue: undefined, keyValue: null,
}; };
this.resetForm('form'); this.resetForm('form');
}, },
@ -300,7 +300,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除安灯按钮16键对应编号为"' + id + '"的数据项?') .confirm('是否确认删除"' + row.sectionName + '"?')
.then(function () { .then(function () {
return deleteQualityInspectionBoxBtn(id); return deleteQualityInspectionBoxBtn(id);
}) })

11
src/views/quality/base/qualityInspectionDet/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
fixed="right" fixed="right"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
@ -172,10 +173,10 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'typeName', label: '类型名称', align: 'center' }, { prop: 'typeName', label: '类型名称', },
{ prop: 'content', label: '检测内容', align: 'center' }, { prop: 'content', label: '检测内容', },
{ prop: 'code', label: '检测编码', align: 'center' }, { prop: 'code', label: '检测编码', },
{ prop: 'remark', label: '备注', align: 'center' }, { prop: 'remark', label: '备注', },
], ],
// 查询参数 // 查询参数
queryParams: { queryParams: {
@ -275,7 +276,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除质量检测信息基础编号为"' + id + '"的数据项?') .confirm('是否确认删除检测信息"' + row.content + '"?')
.then(function () { .then(function () {
return deleteQualityInspectionDet(id); return deleteQualityInspectionDet(id);
}) })

9
src/views/quality/base/qualityInspectionType/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
@ -106,9 +107,9 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '检测类型名称', align: 'center' }, { prop: 'name', label: '检测类型名称' },
{ prop: 'code', label: '检测类型编码', align: 'center' }, { prop: 'code', label: '检测类型编码' },
{ prop: 'remark', label: '备注', align: 'center' }, { prop: 'remark', label: '备注' },
// { // {
// label: '操作', // label: '操作',
// alignt: 'center', // alignt: 'center',
@ -321,7 +322,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除质量检测类型基础编号为"' + id + '"的数据项?') .confirm('是否确认删除该质量检测类型?')
.then(function () { .then(function () {
return deleteQualityInspectionType(id); return deleteQualityInspectionType(id);
}) })

35
src/views/quality/monitoring/qualityInspectionRecord/index.vue
View File

@ -17,6 +17,7 @@
v-if="tableBtn.length" v-if="tableBtn.length"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:width="120"
fixed="right" fixed="right"
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
@ -68,7 +69,7 @@ export default {
[ [
{ {
select: true, select: true,
label: '检测内容ID', label: '检测内容',
url: '/base/quality-inspection-det/listAll', url: '/base/quality-inspection-det/listAll',
prop: 'inspectionDetId', prop: 'inspectionDetId',
labelKey: 'content', labelKey: 'content',
@ -97,6 +98,9 @@ export default {
label: '产线', label: '产线',
url: '/base/production-line/listAll', url: '/base/production-line/listAll',
prop: 'productionLineId', prop: 'productionLineId',
bind: {
filterable: true,
},
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
{ {
@ -105,6 +109,9 @@ export default {
url: '/base/workshop-section/listAll', // 这个 url 其实可加可不加，因为下面会更新 options url: '/base/workshop-section/listAll', // 这个 url 其实可加可不加，因为下面会更新 options
options: [], // 这个options也可加可不加, 因为下面会更新 options options: [], // 这个options也可加可不加, 因为下面会更新 options
prop: 'sectionId', prop: 'sectionId',
bind: {
filterable: true,
},
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, },
], ],
@ -118,6 +125,7 @@ export default {
datetime: true, datetime: true,
label: '检测时间', label: '检测时间',
prop: 'checkTime', prop: 'checkTime',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: { bind: {
format: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss',
'value-format': 'timestamp', 'value-format': 'timestamp',
@ -126,15 +134,15 @@ export default {
}, },
}, },
], ],
[ // [
{ // {
textarea: true, // textarea: true,
label: '检测内容', // label: '检测内容',
prop: 'inspectionDetContent', // prop: 'inspectionDetContent',
value: '', // value: '',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], // rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
}, // },
], // ],
[{ textarea: true, label: '描述', prop: 'explainText' }], [{ textarea: true, label: '描述', prop: 'explainText' }],
[{ input: true, label: '备注', prop: 'remark' }], [{ input: true, label: '备注', prop: 'remark' }],
], ],
@ -213,32 +221,27 @@ export default {
width: 128, width: 128,
prop: 'inspectionDetContent', prop: 'inspectionDetContent',
label: '检测内容', label: '检测内容',
align: 'center',
}, },
{ {
// width: 128, // width: 128,
prop: 'lineName', prop: 'lineName',
label: '产线', label: '产线',
align: 'center',
}, },
{ {
// width: 128, // width: 128,
prop: 'checkPerson', prop: 'checkPerson',
label: '检测人员', label: '检测人员',
align: 'center',
}, },
{ {
// width: 160, // width: 160,
prop: 'checkTime', prop: 'checkTime',
label: '检测时间', label: '检测时间',
align: 'center',
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ {
width: 90, width: 90,
prop: 'source', prop: 'source',
label: '来源', label: '来源',
align: 'center',
filter: (val) => ['未知', '手动', '自动'][val], filter: (val) => ['未知', '手动', '自动'][val],
}, },
], ],
@ -394,7 +397,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除质量检查信息记录表编号为"' + id + '"的数据项?') .confirm('是否确认删除"' + row.inspectionDetContent + '"?')
.then(function () { .then(function () {
return deleteQualityInspectionRecord(id); return deleteQualityInspectionRecord(id);
}) })

38
src/views/quality/monitoring/qualityRecentHours/index.vue
View File

@ -13,18 +13,20 @@
<!-- <pre><code v-html="jsondemo"></code></pre> --> <!-- <pre><code v-html="jsondemo"></code></pre> -->
<el-skeleton v-if="initing" :rows="6" animated /> <el-skeleton v-if="initing" :rows="6" animated />
<base-table <div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
v-else <base-table
:table-props="tableProps" v-if="list && list.length > 0"
:page="queryParams.pageNo" :table-props="tableProps"
:limit="queryParams.pageSize" :page="queryParams.pageNo"
:table-data="list" :limit="queryParams.pageSize"
@emitFun="handleEmitFun"></base-table> :table-data="list"
@emitFun="handleEmitFun"></base-table>
</div>
</div> </div>
</template> </template>
<script> <script>
import response from './response.json'; // import response from './response.json';
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps'; import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
// import hljs from 'highlight.js/lib/highlight'; // import hljs from 'highlight.js/lib/highlight';
// import json from 'highlight.js/lib/languages/json'; // import json from 'highlight.js/lib/languages/json';
@ -43,7 +45,6 @@ export default {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}, },
// jsondemo: '',
list: [ list: [
// { // {
// inspectionContent: '检测内容1', // inspectionContent: '检测内容1',
@ -56,7 +57,6 @@ export default {
{ {
prop: 'inspectionContent', prop: 'inspectionContent',
label: '检测内容', label: '检测内容',
align: 'center',
}, },
], ],
}; };
@ -67,20 +67,10 @@ export default {
}, },
methods: { methods: {
async getList() { async getList() {
// const response = await this.$axios({ const response = await this.$axios({
// url: '/monitoring/record-in-one-day/get', url: '/monitoring/record-in-one-day/get',
// method: 'get', method: 'get',
// }); });
console.log(response);
// const {
// // data: { nameData },
// code,
// } = response;
// this.jsondemo = hljs.highlight(
// 'json',
// JSON.stringify(response, null, 2),
// true
// ).value;
const { const {
data: { data: dyanmicData, nameData }, data: { data: dyanmicData, nameData },
} = response; } = response;

142
src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue
View File

@ -82,18 +82,22 @@ export default {
computed: { computed: {
config() { config() {
return { return {
color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
// title: { // title: {
// text: '折线图', // text: '折线图',
// }, // },
grid: { grid: {
top: '24%', top: '12%',
left: '3%', left: '2%',
right: '5%', right: '5%',
bottom: '5%', bottom: '5%',
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {
type: 'shadow',
},
}, },
legend: { legend: {
data: this.legend, data: this.legend,
@ -107,13 +111,145 @@ export default {
// }, // },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: true,
onZero: false,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
// color: 'red'
},
},
data: this.xProps, 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: { yAxis: {
type: 'value', 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: 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
src/views/quality/monitoring/qualityStatistics/components/summaryTable.vue
View File

@ -7,9 +7,9 @@
<template> <template>
<!-- 列表 --> <!-- 列表 -->
<!-- height="35vh" -->
<base-table <base-table
:table-props="tableProps" :table-props="tableProps"
height="35vh"
:page="queryParams.pageNo" :page="queryParams.pageNo"
:limit="queryParams.pageSize" :limit="queryParams.pageSize"
:table-data="list"></base-table> :table-data="list"></base-table>
@ -35,27 +35,22 @@ export default {
{ {
prop: 'lineName', prop: 'lineName',
label: '产线', label: '产线',
align: 'center',
}, },
{ {
prop: 'sumUp', prop: 'sumUp',
label: '上片总数', label: '上片总数',
align: 'center',
}, },
{ {
prop: 'sumDown', prop: 'sumDown',
label: '下片总数', label: '下片总数',
align: 'center',
}, },
{ {
prop: 'sumCheck', prop: 'sumCheck',
label: '检测总数', label: '检测总数',
align: 'center',
}, },
{ {
prop: 'scrapRatio', prop: 'scrapRatio',
label: '比例(%)', label: '比例(%)',
align: 'center',
}, },
], ],
}; };

19
src/views/quality/monitoring/qualityStatistics/graphPage.vue
View File

@ -7,14 +7,20 @@
<template> <template>
<div class="graph-page"> <div class="graph-page">
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览"> <!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
<TotalGraph :summary-list="summaryList" /> <TotalGraph :summary-list="summaryList" />
</DetailGraph> </DetailGraph> -->
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> <!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" /> <LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
</DetailGraph> </DetailGraph> -->
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" /> <!-- <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> </div>
</template> </template>
@ -55,7 +61,8 @@ export default {
console.log('this.list', this.lineData.list, this.lineData.xProps); console.log('this.list', this.lineData.list, this.lineData.xProps);
const seriesItem = { const seriesItem = {
name: item.inspectionContent, name: item.inspectionContent,
type: 'line', type: 'bar',
barCategoryGap: 12,
data: [], data: [],
}; };

288
src/views/quality/monitoring/qualityStatistics/index.vue
View File

@ -6,33 +6,84 @@
--> -->
<template> <template>
<div class="app-container"> <div class="quality-container" style="background: #f2f4f9; flex: 1">
<!-- 搜索工作栏 --> <el-row
<SearchBar class=""
:formConfigs="searchBarFormConfig" style="
ref="search-bar" margin-bottom: 12px;
@headBtnClick="handleSearchBarBtnClick" /> 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"> <el-row
<template v-if="mode == 'table'"> class=""
<!-- 列表 --> style="
<base-table margin-top: 0;
v-if="mode == 'table'" margin-bottom: 12px;
:table-props="tableProps" background: #fff;
:page="queryParams.pageNo" padding: 12px 16px 16px;
:limit="queryParams.pageSize" border-radius: 8px;
:table-data="list" ">
@emitFun="handleEmitFun"></base-table> <div class="blue-title">产线检测总览</div>
</template> <summaryTable :list="summaryList" />
</el-row>
<GraphPage <el-row
v-else class=""
:summary-list="summaryList" style="
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" /> margin-top: 0;
</transition> 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 实现 --> <!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
<base-dialog <!-- <base-dialog
dialogTitle="数据总览" dialogTitle="数据总览"
:dialogVisible="summaryOpen" :dialogVisible="summaryOpen"
width="50%" width="50%"
@ -40,7 +91,7 @@
@cancel="handleSummaryClose" @cancel="handleSummaryClose"
@confirm="handleSummaryClose"> @confirm="handleSummaryClose">
<summaryTable :list="summaryList" /> <summaryTable :list="summaryList" />
</base-dialog> </base-dialog> -->
</div> </div>
</template> </template>
@ -48,13 +99,58 @@
import GraphPage from './graphPage.vue'; import GraphPage from './graphPage.vue';
import summaryTable from './components/summaryTable.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 { export default {
name: 'QualityStatistics', name: 'QualityStatistics',
components: { GraphPage, summaryTable }, components: { GraphPage, summaryTable },
props: {}, props: {},
data() { data() {
const dateGetter = new DateGetter();
return { return {
mode: 'table', // defaults to 'table' // mode: 'table', // defaults to 'table'
activeName: 'table', // defaults to 'table'
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'datePicker', type: 'datePicker',
@ -70,6 +166,28 @@ export default {
defaultSelect: [], defaultSelect: [],
defaultTime: ['00:00:00', '23:59:59'], defaultTime: ['00:00:00', '23:59:59'],
param: 'timerange', 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', type: 'button',
@ -77,33 +195,33 @@ export default {
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
{ // {
type: 'separate', // type: 'separate',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '数据总览', // btnName: '数据总览',
name: 'summary', // name: 'summary',
color: 'text', // color: 'text',
}, // },
{ // {
type: 'separate', // type: 'separate',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '表格版', // btnName: '表格版',
name: 'tableVersion', // name: 'tableVersion',
color: 'text btn-table', // color: 'text btn-table',
}, // },
{ // {
type: 'separate', // type: 'separate',
}, // },
{ // {
type: 'button', // type: 'button',
btnName: '图形版', // btnName: '图形版',
name: 'graphVersion', // name: 'graphVersion',
color: 'text btn-graph', // color: 'text btn-graph',
}, // },
], ],
// 动态的 props // 动态的 props
dynamicProps: [], dynamicProps: [],
@ -166,26 +284,26 @@ export default {
}; };
}, },
computed: { computed: {
mode() {
return this.activeName;
},
tableProps() { tableProps() {
return [ return [
{ {
// width: 160, // width: 160,
prop: 'inspectionContent', prop: 'inspectionContent',
label: '检测内容', label: '检测内容',
align: 'center',
}, },
...this.dynamicProps, ...this.dynamicProps,
{ {
// width: 128, // width: 128,
prop: 'sumInput', prop: 'sumInput',
label: '检测类型总数', label: '检测类型总数',
align: 'center',
}, },
{ {
// width: 128, // width: 128,
prop: 'ratio', prop: 'ratio',
label: '比例', label: '比例',
align: 'center',
// subcomponent: { // subcomponent: {
// name: 'TextOnly', // name: 'TextOnly',
// props: { // props: {
@ -316,6 +434,14 @@ export default {
}; };
}); });
}, },
handleTabClick(tab, event) {
const { name } = tab;
if (name == 'graph') {
// 展示柱状图
} else {
// 展示表格
}
},
/** 总览关闭 */ /** 总览关闭 */
handleSummaryClose() { handleSummaryClose() {
this.summaryOpen = false; this.summaryOpen = false;
@ -400,6 +526,42 @@ export default {
.fade-down-leave { .fade-down-leave {
transform: translateY(0); 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> </style>
<!-- <!--
@ -407,47 +569,47 @@ export default {
// width: 128, // width: 128,
// prop: 'line1', // prop: 'line1',
// label: '产线1', // label: '产线1',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line2', // prop: 'line2',
// label: '产线2', // label: '产线2',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line3', // prop: 'line3',
// label: '产线3', // label: '产线3',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line4', // prop: 'line4',
// label: '产线4', // label: '产线4',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line5', // prop: 'line5',
// label: '产线5', // label: '产线5',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line6', // prop: 'line6',
// label: '产线6', // label: '产线6',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line7', // prop: 'line7',
// label: '产线7', // label: '产线7',
// align: 'center', // ,
// }, // },
// { // {
// width: 128, // width: 128,
// prop: 'line8', // prop: 'line8',
// label: '产线8', // label: '产线8',
// align: 'center', // ,
// }, --> // }, -->