commit
14e06d9456
4
.env.dev
4
.env.dev
@ -5,8 +5,10 @@ ENV = 'development'
|
|||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 芋道管理系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
|
VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||||
|
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
|
# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
|
||||||
VUE_APP_BASE_API = 'http://192.168.1.188:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|||||||
@ -58,6 +58,7 @@
|
|||||||
"js-beautify": "1.13.0",
|
"js-beautify": "1.13.0",
|
||||||
"jsencrypt": "3.3.1",
|
"jsencrypt": "3.3.1",
|
||||||
"min-dash": "3.5.2",
|
"min-dash": "3.5.2",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"qrcode.vue": "^1.7.0",
|
"qrcode.vue": "^1.7.0",
|
||||||
|
|||||||
@ -1,216 +1,215 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
|
<title><%= webpackConfig.name %></title>
|
||||||
|
<!--[if lt IE 11]>
|
||||||
|
<script>
|
||||||
|
window.location.href = 'html/ie.html';
|
||||||
|
</script>
|
||||||
|
<![endif]-->
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
<head>
|
.chromeframe {
|
||||||
<meta charset="utf-8">
|
margin: 0.2em 0;
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
background: #ccc;
|
||||||
<meta name="renderer" content="webkit">
|
color: #000;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
padding: 0.2em 0;
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
}
|
||||||
<title>
|
|
||||||
<%= webpackConfig.name %>
|
|
||||||
</title>
|
|
||||||
<!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chromeframe {
|
#loader-wrapper {
|
||||||
margin: 0.2em 0;
|
position: fixed;
|
||||||
background: #ccc;
|
top: 0;
|
||||||
color: #000;
|
left: 0;
|
||||||
padding: 0.2em 0;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
z-index: 999999;
|
||||||
|
}
|
||||||
|
|
||||||
#loader-wrapper {
|
#loader {
|
||||||
position: fixed;
|
display: block;
|
||||||
top: 0;
|
position: relative;
|
||||||
left: 0;
|
left: 50%;
|
||||||
width: 100%;
|
top: 50%;
|
||||||
height: 100%;
|
width: 150px;
|
||||||
z-index: 999999;
|
height: 150px;
|
||||||
}
|
margin: -75px 0 0 -75px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: #fff;
|
||||||
|
-webkit-animation: spin 2s linear infinite;
|
||||||
|
-ms-animation: spin 2s linear infinite;
|
||||||
|
-moz-animation: spin 2s linear infinite;
|
||||||
|
-o-animation: spin 2s linear infinite;
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
#loader {
|
#loader:before {
|
||||||
display: block;
|
content: '';
|
||||||
position: relative;
|
position: absolute;
|
||||||
left: 50%;
|
top: 5px;
|
||||||
top: 50%;
|
left: 5px;
|
||||||
width: 150px;
|
right: 5px;
|
||||||
height: 150px;
|
bottom: 5px;
|
||||||
margin: -75px 0 0 -75px;
|
border-radius: 50%;
|
||||||
border-radius: 50%;
|
border: 3px solid transparent;
|
||||||
border: 3px solid transparent;
|
border-top-color: #fff;
|
||||||
border-top-color: #FFF;
|
-webkit-animation: spin 3s linear infinite;
|
||||||
-webkit-animation: spin 2s linear infinite;
|
-moz-animation: spin 3s linear infinite;
|
||||||
-ms-animation: spin 2s linear infinite;
|
-o-animation: spin 3s linear infinite;
|
||||||
-moz-animation: spin 2s linear infinite;
|
-ms-animation: spin 3s linear infinite;
|
||||||
-o-animation: spin 2s linear infinite;
|
animation: spin 3s linear infinite;
|
||||||
animation: spin 2s linear infinite;
|
}
|
||||||
z-index: 1001;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loader:before {
|
#loader:after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 15px;
|
||||||
left: 5px;
|
left: 15px;
|
||||||
right: 5px;
|
right: 15px;
|
||||||
bottom: 5px;
|
bottom: 15px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
border-top-color: #FFF;
|
border-top-color: #fff;
|
||||||
-webkit-animation: spin 3s linear infinite;
|
-moz-animation: spin 1.5s linear infinite;
|
||||||
-moz-animation: spin 3s linear infinite;
|
-o-animation: spin 1.5s linear infinite;
|
||||||
-o-animation: spin 3s linear infinite;
|
-ms-animation: spin 1.5s linear infinite;
|
||||||
-ms-animation: spin 3s linear infinite;
|
-webkit-animation: spin 1.5s linear infinite;
|
||||||
animation: spin 3s linear infinite;
|
animation: spin 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loader:after {
|
@-webkit-keyframes spin {
|
||||||
content: "";
|
0% {
|
||||||
position: absolute;
|
-webkit-transform: rotate(0deg);
|
||||||
top: 15px;
|
-ms-transform: rotate(0deg);
|
||||||
left: 15px;
|
transform: rotate(0deg);
|
||||||
right: 15px;
|
}
|
||||||
bottom: 15px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid transparent;
|
|
||||||
border-top-color: #FFF;
|
|
||||||
-moz-animation: spin 1.5s linear infinite;
|
|
||||||
-o-animation: spin 1.5s linear infinite;
|
|
||||||
-ms-animation: spin 1.5s linear infinite;
|
|
||||||
-webkit-animation: spin 1.5s linear infinite;
|
|
||||||
animation: spin 1.5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
-ms-transform: rotate(0deg);
|
-ms-transform: rotate(0deg);
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
-ms-transform: rotate(360deg);
|
-ms-transform: rotate(360deg);
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
#loader-wrapper .loader-section {
|
||||||
0% {
|
position: fixed;
|
||||||
-webkit-transform: rotate(0deg);
|
top: 0;
|
||||||
-ms-transform: rotate(0deg);
|
width: 51%;
|
||||||
transform: rotate(0deg);
|
height: 100%;
|
||||||
}
|
background: #7171c6;
|
||||||
|
z-index: 1000;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-ms-transform: translateX(0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
100% {
|
#loader-wrapper .loader-section.section-left {
|
||||||
-webkit-transform: rotate(360deg);
|
left: 0;
|
||||||
-ms-transform: rotate(360deg);
|
}
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
#loader-wrapper .loader-section.section-right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#loader-wrapper .loader-section {
|
.loaded #loader-wrapper .loader-section.section-left {
|
||||||
position: fixed;
|
-webkit-transform: translateX(-100%);
|
||||||
top: 0;
|
-ms-transform: translateX(-100%);
|
||||||
width: 51%;
|
transform: translateX(-100%);
|
||||||
height: 100%;
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
background: #7171C6;
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
z-index: 1000;
|
}
|
||||||
-webkit-transform: translateX(0);
|
|
||||||
-ms-transform: translateX(0);
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#loader-wrapper .loader-section.section-left {
|
.loaded #loader-wrapper .loader-section.section-right {
|
||||||
left: 0;
|
-webkit-transform: translateX(100%);
|
||||||
}
|
-ms-transform: translateX(100%);
|
||||||
|
transform: translateX(100%);
|
||||||
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
|
||||||
#loader-wrapper .loader-section.section-right {
|
.loaded #loader {
|
||||||
right: 0;
|
opacity: 0;
|
||||||
}
|
-webkit-transition: all 0.3s ease-out;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loaded #loader-wrapper {
|
||||||
|
visibility: hidden;
|
||||||
|
-webkit-transform: translateY(-100%);
|
||||||
|
-ms-transform: translateY(-100%);
|
||||||
|
transform: translateY(-100%);
|
||||||
|
-webkit-transition: all 0.3s 1s ease-out;
|
||||||
|
transition: all 0.3s 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-left {
|
.no-js #loader-wrapper {
|
||||||
-webkit-transform: translateX(-100%);
|
display: none;
|
||||||
-ms-transform: translateX(-100%);
|
}
|
||||||
transform: translateX(-100%);
|
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-right {
|
.no-js h1 {
|
||||||
-webkit-transform: translateX(100%);
|
color: #222222;
|
||||||
-ms-transform: translateX(100%);
|
}
|
||||||
transform: translateX(100%);
|
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loaded #loader {
|
#loader-wrapper .load_title {
|
||||||
opacity: 0;
|
font-family: 'Open Sans';
|
||||||
-webkit-transition: all 0.3s ease-out;
|
color: #fff;
|
||||||
transition: all 0.3s ease-out;
|
font-size: 19px;
|
||||||
}
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 9999999999999;
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
opacity: 1;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.loaded #loader-wrapper {
|
#loader-wrapper .load_title span {
|
||||||
visibility: hidden;
|
font-weight: normal;
|
||||||
-webkit-transform: translateY(-100%);
|
font-style: italic;
|
||||||
-ms-transform: translateY(-100%);
|
font-size: 13px;
|
||||||
transform: translateY(-100%);
|
color: #fff;
|
||||||
-webkit-transition: all 0.3s 1s ease-out;
|
opacity: 0.5;
|
||||||
transition: all 0.3s 1s ease-out;
|
}
|
||||||
}
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
.no-js #loader-wrapper {
|
<body>
|
||||||
display: none;
|
<div id="app">
|
||||||
}
|
<div id="loader-wrapper">
|
||||||
|
<div id="loader"></div>
|
||||||
.no-js h1 {
|
<div class="loader-section section-left"></div>
|
||||||
color: #222222;
|
<div class="loader-section section-right"></div>
|
||||||
}
|
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||||
|
</div>
|
||||||
#loader-wrapper .load_title {
|
</div>
|
||||||
font-family: 'Open Sans';
|
</body>
|
||||||
color: #FFF;
|
</html>
|
||||||
font-size: 19px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 9999999999999;
|
|
||||||
position: absolute;
|
|
||||||
top: 60%;
|
|
||||||
opacity: 1;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loader-wrapper .load_title span {
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #FFF;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<div id="loader-wrapper">
|
|
||||||
<div id="loader"></div>
|
|
||||||
<div class="loader-section section-left"></div>
|
|
||||||
<div class="loader-section section-right"></div>
|
|
||||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|||||||
@ -1,8 +1,61 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备
|
||||||
|
export function createEquipment(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备
|
||||||
|
export function updateEquipment(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备
|
||||||
|
export function deleteEquipment(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备
|
||||||
|
export function getEquipment(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备分页
|
||||||
|
export function getEquipmentPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备 Excel
|
||||||
|
export function exportEquipmentExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
// 获得所有设备列表
|
// 获得所有设备列表
|
||||||
export function getEquipmentAll() {
|
export function getEquipmentAll() {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/equipment/listAll',
|
url: '/base/equipment/listAll',
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
54
src/api/base/equipmentAttr.js
Normal file
54
src/api/base/equipmentAttr.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备属性
|
||||||
|
export function createEquipmentAttr(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备属性
|
||||||
|
export function updateEquipmentAttr(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备属性
|
||||||
|
export function deleteEquipmentAttr(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备属性
|
||||||
|
export function getEquipmentAttr(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备属性分页
|
||||||
|
export function getEquipmentAttrPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备属性 Excel
|
||||||
|
export function exportEquipmentAttrExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-attr/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentBindGroup.js
Normal file
54
src/api/base/equipmentBindGroup.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备与分组绑定
|
||||||
|
export function createEquipmentBindGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备与分组绑定
|
||||||
|
export function updateEquipmentBindGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备与分组绑定
|
||||||
|
export function deleteEquipmentBindGroup(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备与分组绑定
|
||||||
|
export function getEquipmentBindGroup(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备与分组绑定分页
|
||||||
|
export function getEquipmentBindGroupPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备与分组绑定 Excel
|
||||||
|
export function exportEquipmentBindGroupExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-group/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentBindSection.js
Normal file
54
src/api/base/equipmentBindSection.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建工段设备绑定
|
||||||
|
export function createEquipmentBindSection(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新工段设备绑定
|
||||||
|
export function updateEquipmentBindSection(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除工段设备绑定
|
||||||
|
export function deleteEquipmentBindSection(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得工段设备绑定
|
||||||
|
export function getEquipmentBindSection(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得工段设备绑定分页
|
||||||
|
export function getEquipmentBindSectionPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出工段设备绑定 Excel
|
||||||
|
export function exportEquipmentBindSectionExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-bind-section/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentFile.js
Normal file
54
src/api/base/equipmentFile.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备文件对应
|
||||||
|
export function createEquipmentFile(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备文件对应
|
||||||
|
export function updateEquipmentFile(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备文件对应
|
||||||
|
export function deleteEquipmentFile(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备文件对应
|
||||||
|
export function getEquipmentFile(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备文件对应分页
|
||||||
|
export function getEquipmentFilePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备文件对应 Excel
|
||||||
|
export function exportEquipmentFileExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-file/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentGroup.js
Normal file
54
src/api/base/equipmentGroup.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备分组（用于同类型不同厂家的设备区分）
|
||||||
|
export function createEquipmentGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备分组（用于同类型不同厂家的设备区分）
|
||||||
|
export function updateEquipmentGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备分组（用于同类型不同厂家的设备区分）
|
||||||
|
export function deleteEquipmentGroup(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备分组（用于同类型不同厂家的设备区分）
|
||||||
|
export function getEquipmentGroup(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备分组（用于同类型不同厂家的设备区分）分页
|
||||||
|
export function getEquipmentGroupPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备分组（用于同类型不同厂家的设备区分） Excel
|
||||||
|
export function exportEquipmentGroupExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentGroupAlarm.js
Normal file
54
src/api/base/equipmentGroupAlarm.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备分组报警明细
|
||||||
|
export function createEquipmentGroupAlarm(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备分组报警明细
|
||||||
|
export function updateEquipmentGroupAlarm(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备分组报警明细
|
||||||
|
export function deleteEquipmentGroupAlarm(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备分组报警明细
|
||||||
|
export function getEquipmentGroupAlarm(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备分组报警明细分页
|
||||||
|
export function getEquipmentGroupAlarmPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备分组报警明细 Excel
|
||||||
|
export function exportEquipmentGroupAlarmExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-group-alarm/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentPlc.js
Normal file
54
src/api/base/equipmentPlc.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建实时数据采集配置
|
||||||
|
export function createEquipmentPlc(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新实时数据采集配置
|
||||||
|
export function updateEquipmentPlc(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除实时数据采集配置
|
||||||
|
export function deleteEquipmentPlc(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得实时数据采集配置
|
||||||
|
export function getEquipmentPlc(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得实时数据采集配置分页
|
||||||
|
export function getEquipmentPlcPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出实时数据采集配置 Excel
|
||||||
|
export function exportEquipmentPlcExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentPlcConnect.js
Normal file
54
src/api/base/equipmentPlcConnect.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备与实时采集关系表（一对多）
|
||||||
|
export function createEquipmentPlcConnect(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备与实时采集关系表（一对多）
|
||||||
|
export function updateEquipmentPlcConnect(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备与实时采集关系表（一对多）
|
||||||
|
export function deleteEquipmentPlcConnect(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备与实时采集关系表（一对多）
|
||||||
|
export function getEquipmentPlcConnect(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备与实时采集关系表（一对多）分页
|
||||||
|
export function getEquipmentPlcConnectPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备与实时采集关系表（一对多） Excel
|
||||||
|
export function exportEquipmentPlcConnectExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-connect/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentPlcParam.js
Normal file
54
src/api/base/equipmentPlcParam.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备数采详情
|
||||||
|
export function createEquipmentPlcParam(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备数采详情
|
||||||
|
export function updateEquipmentPlcParam(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备数采详情
|
||||||
|
export function deleteEquipmentPlcParam(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备数采详情
|
||||||
|
export function getEquipmentPlcParam(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备数采详情分页
|
||||||
|
export function getEquipmentPlcParamPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备数采详情 Excel
|
||||||
|
export function exportEquipmentPlcParamExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-plc-param/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentQuantityLog.js
Normal file
54
src/api/base/equipmentQuantityLog.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建后端用 设备生产数量统计表（按一定时间段写入）
|
||||||
|
export function createEquipmentQuantityLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新后端用 设备生产数量统计表（按一定时间段写入）
|
||||||
|
export function updateEquipmentQuantityLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除后端用 设备生产数量统计表（按一定时间段写入）
|
||||||
|
export function deleteEquipmentQuantityLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备生产数量统计表（按一定时间段写入）
|
||||||
|
export function getEquipmentQuantityLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备生产数量统计表（按一定时间段写入）分页
|
||||||
|
export function getEquipmentQuantityLogPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出后端用 设备生产数量统计表（按一定时间段写入） Excel
|
||||||
|
export function exportEquipmentQuantityLogExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-log/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentQuantityRealtime.js
Normal file
54
src/api/base/equipmentQuantityRealtime.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建后端用 设备生产数量实时
|
||||||
|
export function createEquipmentQuantityRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新后端用 设备生产数量实时
|
||||||
|
export function updateEquipmentQuantityRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除后端用 设备生产数量实时
|
||||||
|
export function deleteEquipmentQuantityRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备生产数量实时
|
||||||
|
export function getEquipmentQuantityRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备生产数量实时分页
|
||||||
|
export function getEquipmentQuantityRealtimePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出后端用 设备生产数量实时 Excel
|
||||||
|
export function exportEquipmentQuantityRealtimeExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-quantity-realtime/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentStatusLog.js
Normal file
54
src/api/base/equipmentStatusLog.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建后端用 设备工作状态
|
||||||
|
export function createEquipmentStatusLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新后端用 设备工作状态
|
||||||
|
export function updateEquipmentStatusLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除后端用 设备工作状态
|
||||||
|
export function deleteEquipmentStatusLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备工作状态
|
||||||
|
export function getEquipmentStatusLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备工作状态分页
|
||||||
|
export function getEquipmentStatusLogPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出后端用 设备工作状态 Excel
|
||||||
|
export function exportEquipmentStatusLogExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-log/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentStatusRealtime.js
Normal file
54
src/api/base/equipmentStatusRealtime.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建后端用 设备状态实时
|
||||||
|
export function createEquipmentStatusRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新后端用 设备状态实时
|
||||||
|
export function updateEquipmentStatusRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除后端用 设备状态实时
|
||||||
|
export function deleteEquipmentStatusRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备状态实时
|
||||||
|
export function getEquipmentStatusRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得后端用 设备状态实时分页
|
||||||
|
export function getEquipmentStatusRealtimePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出后端用 设备状态实时 Excel
|
||||||
|
export function exportEquipmentStatusRealtimeExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-status-realtime/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentType.js
Normal file
54
src/api/base/equipmentType.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备类型
|
||||||
|
export function createEquipmentType(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备类型
|
||||||
|
export function updateEquipmentType(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备类型
|
||||||
|
export function deleteEquipmentType(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备类型
|
||||||
|
export function getEquipmentType(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备类型分页
|
||||||
|
export function getEquipmentTypePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备类型 Excel
|
||||||
|
export function exportEquipmentTypeExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/base/equipmentTypeFile.js
Normal file
54
src/api/base/equipmentTypeFile.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备类型文件关联
|
||||||
|
export function createEquipmentTypeFile(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备类型文件关联
|
||||||
|
export function updateEquipmentTypeFile(data) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备类型文件关联
|
||||||
|
export function deleteEquipmentTypeFile(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备类型文件关联
|
||||||
|
export function getEquipmentTypeFile(id) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备类型文件关联分页
|
||||||
|
export function getEquipmentTypeFilePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备类型文件关联 Excel
|
||||||
|
export function exportEquipmentTypeFileExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/base/equipment-type-file/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/monitoring/equipmentAlarmLog.js
Normal file
54
src/api/monitoring/equipmentAlarmLog.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备报警日志
|
||||||
|
export function createEquipmentAlarmLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备报警日志
|
||||||
|
export function updateEquipmentAlarmLog(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备报警日志
|
||||||
|
export function deleteEquipmentAlarmLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备报警日志
|
||||||
|
export function getEquipmentAlarmLog(id) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备报警日志分页
|
||||||
|
export function getEquipmentAlarmLogPage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备报警日志 Excel
|
||||||
|
export function exportEquipmentAlarmLogExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-log/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
54
src/api/monitoring/equipmentAlarmRealtime.js
Normal file
54
src/api/monitoring/equipmentAlarmRealtime.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 创建设备报警实时信息
|
||||||
|
export function createEquipmentAlarmRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新设备报警实时信息
|
||||||
|
export function updateEquipmentAlarmRealtime(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除设备报警实时信息
|
||||||
|
export function deleteEquipmentAlarmRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/delete?id=' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备报警实时信息
|
||||||
|
export function getEquipmentAlarmRealtime(id) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/get?id=' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得设备报警实时信息分页
|
||||||
|
export function getEquipmentAlarmRealtimePage(query) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出设备报警实时信息 Excel
|
||||||
|
export function exportEquipmentAlarmRealtimeExcel(query) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/equipment-alarm-realtime/export-excel',
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: dialogForm.vue
|
filename: dialogForm.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2023-08-02 10:32:36
|
date: 2023-08-15 10:32:36
|
||||||
description: 弹窗的表单组件
|
description: 弹窗的表单组件
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@ -44,7 +44,36 @@
|
|||||||
v-model="form[col.prop]"
|
v-model="form[col.prop]"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
:placeholder="`请选择${col.label}`"
|
:placeholder="`请选择${col.label}`"
|
||||||
|
value-format="timestamp"
|
||||||
v-bind="col.bind"></el-date-picker>
|
v-bind="col.bind"></el-date-picker>
|
||||||
|
<el-upload
|
||||||
|
class="upload-in-dialog"
|
||||||
|
v-if="col.upload"
|
||||||
|
:file-list="uploadedFileList"
|
||||||
|
:action="col.url"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
v-bind="col.bind">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
:disabled="col.bind?.disabled || false">
|
||||||
|
点击上传
|
||||||
|
</el-button>
|
||||||
|
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||||
|
{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<el-switch
|
||||||
|
v-if="col.switch"
|
||||||
|
v-model="form[col.prop]"
|
||||||
|
active-color="#0b58ff"
|
||||||
|
inactive-color="#e1e1e1"
|
||||||
|
v-bind="col.bind"></el-switch>
|
||||||
|
<component
|
||||||
|
v-if="col.subcomponent"
|
||||||
|
:key="col.key"
|
||||||
|
:is="col.subcomponent"
|
||||||
|
:inlineStyle="col.style"></component>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -90,6 +119,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
formLoading: true,
|
formLoading: true,
|
||||||
optionListOf: {},
|
optionListOf: {},
|
||||||
|
uploadedFileList: [],
|
||||||
|
dataLoaded: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -101,6 +132,8 @@ export default {
|
|||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
get() {
|
get() {
|
||||||
|
// if (this.dataLoaded) return this.dataForm;
|
||||||
|
// else return {}
|
||||||
return this.dataForm;
|
return this.dataForm;
|
||||||
},
|
},
|
||||||
set(val) {
|
set(val) {
|
||||||
@ -138,7 +171,7 @@ export default {
|
|||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
async handleOptions(trigger = 'monuted') {
|
async handleOptions(trigger = 'monuted') {
|
||||||
// console.log("[dialogForm:handleOptions]")
|
console.log('[dialogForm:handleOptions]');
|
||||||
const promiseList = [];
|
const promiseList = [];
|
||||||
this.rows.forEach((cols) => {
|
this.rows.forEach((cols) => {
|
||||||
cols.forEach((opt) => {
|
cols.forEach((opt) => {
|
||||||
@ -150,6 +183,36 @@ export default {
|
|||||||
if (opt.options) {
|
if (opt.options) {
|
||||||
this.$set(this.optionListOf, opt.prop, opt.options);
|
this.$set(this.optionListOf, opt.prop, opt.options);
|
||||||
} else if (opt.url) {
|
} else if (opt.url) {
|
||||||
|
// 如果有 depends，则暂时先不获取，注册一个watcher
|
||||||
|
if (opt.depends) {
|
||||||
|
console.log('[handleOptions] setting watch');
|
||||||
|
this.$watch(
|
||||||
|
() => this.form[opt.depends],
|
||||||
|
(id) => {
|
||||||
|
console.log('<', opt.depends, '>', 'changed', id);
|
||||||
|
if (id == null) return;
|
||||||
|
// 清空原有选项
|
||||||
|
this.form[opt.prop] = null;
|
||||||
|
// 获取新的选项
|
||||||
|
this.$axios({
|
||||||
|
url: `${opt.url}?id=${id}`,
|
||||||
|
}).then((res) => {
|
||||||
|
this.$set(
|
||||||
|
this.optionListOf,
|
||||||
|
opt.prop,
|
||||||
|
res.data.map((item) => ({
|
||||||
|
label: item[opt.labelKey ?? 'name'],
|
||||||
|
value: item[opt.valueKey ?? 'id'],
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
// 如果是下拉框，或者新增模式下的输入框，才去请求
|
// 如果是下拉框，或者新增模式下的输入框，才去请求
|
||||||
if (opt.select || (opt.input && !this.form?.id)) {
|
if (opt.select || (opt.input && !this.form?.id)) {
|
||||||
promiseList.push(async () => {
|
promiseList.push(async () => {
|
||||||
@ -172,6 +235,7 @@ export default {
|
|||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
} else if (opt.input) {
|
} else if (opt.input) {
|
||||||
|
console.log('setting code: ', response.data);
|
||||||
// 处理输入框数据
|
// 处理输入框数据
|
||||||
this.form[opt.prop] = response.data;
|
this.form[opt.prop] = response.data;
|
||||||
}
|
}
|
||||||
@ -181,6 +245,8 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log('[dialogForm:handleOptions] done!');
|
||||||
|
|
||||||
// 如果是 watch 触发的，不需要执行进一步的请求
|
// 如果是 watch 触发的，不需要执行进一步的请求
|
||||||
if (trigger == 'watch') {
|
if (trigger == 'watch') {
|
||||||
this.formLoading = false;
|
this.formLoading = false;
|
||||||
@ -189,6 +255,7 @@ export default {
|
|||||||
try {
|
try {
|
||||||
await Promise.all(promiseList.map((fn) => fn()));
|
await Promise.all(promiseList.map((fn) => fn()));
|
||||||
this.formLoading = false;
|
this.formLoading = false;
|
||||||
|
this.dataLoaded = true;
|
||||||
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
|
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('[dialogForm:handleOptions:error]', error);
|
console.log('[dialogForm:handleOptions:error]', error);
|
||||||
@ -196,6 +263,27 @@ export default {
|
|||||||
}
|
}
|
||||||
if (!promiseList.length) this.formLoading = false;
|
if (!promiseList.length) this.formLoading = false;
|
||||||
},
|
},
|
||||||
|
// 上传成功的特殊处理
|
||||||
|
beforeUpload() {},
|
||||||
|
// 上传前的验证规则可通过 bind 属性传入
|
||||||
|
handleUploadSuccess(response, file, fileList) {
|
||||||
|
console.log(
|
||||||
|
'[dialogForm:handleUploadSuccess]',
|
||||||
|
response,
|
||||||
|
file,
|
||||||
|
fileList,
|
||||||
|
this.form
|
||||||
|
);
|
||||||
|
// 保存原始文件名
|
||||||
|
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
|
||||||
|
// 保存完整地址
|
||||||
|
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
|
||||||
|
this.$modal.msgSuccess('上传成功');
|
||||||
|
},
|
||||||
|
|
||||||
|
getFileName(fileUrl) {
|
||||||
|
return fileUrl.split('/').pop();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
89
src/components/SequenceGraph/index.vue
Normal file
89
src/components/SequenceGraph/index.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-29 14:39:40
|
||||||
|
description: 状态时序图
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="sequence-graph">
|
||||||
|
<SequenceGraphItem v-for="eq in Object.keys(list)" :key="eq" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SequenceGraphItem from './sequenceGraphItem.vue';
|
||||||
|
export default {
|
||||||
|
name: 'SequenceGraph',
|
||||||
|
components: { SequenceGraphItem },
|
||||||
|
props: {
|
||||||
|
colors: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['', '', '', '', '', ''], // 默认颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: {
|
||||||
|
打孔机: {
|
||||||
|
equipmentId: 1,
|
||||||
|
equipmentName: 'EQ1',
|
||||||
|
status: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
startPos: '',
|
||||||
|
relativeDuring: '',
|
||||||
|
},
|
||||||
|
磨边机: {
|
||||||
|
equipmentId: 12,
|
||||||
|
equipmentName: 'EQ2',
|
||||||
|
status: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
startPos: '',
|
||||||
|
relativeDuring: '',
|
||||||
|
},
|
||||||
|
清洗机: {
|
||||||
|
equipmentId: 13,
|
||||||
|
equipmentName: 'EQ3',
|
||||||
|
status: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
startPos: '',
|
||||||
|
relativeDuring: '',
|
||||||
|
},
|
||||||
|
窑炉: {
|
||||||
|
equipmentId: 14,
|
||||||
|
equipmentName: 'EQ4',
|
||||||
|
status: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
startPos: '',
|
||||||
|
relativeDuring: '',
|
||||||
|
},
|
||||||
|
AGV: {
|
||||||
|
equipmentId: 15,
|
||||||
|
equipmentName: 'EQ5',
|
||||||
|
status: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
startPos: '',
|
||||||
|
relativeDuring: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.sequence-graph {
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin: 12px;
|
||||||
|
box-shadow: 0 0 32px 8px rgba($color: #000000, $alpha: 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
51
src/components/SequenceGraph/sequenceGraphItem.vue
Normal file
51
src/components/SequenceGraph/sequenceGraphItem.vue
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!--
|
||||||
|
filename: sequenceGraphItem.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-29 14:40:51
|
||||||
|
description: 时序图最小单元
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="sequence-graph-item" :style="styles">
|
||||||
|
<span v-if="time != null">{{ time }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SequenceGraphItem',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'black',
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles() {
|
||||||
|
return {
|
||||||
|
color: this.color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.sequence-graph-item {
|
||||||
|
background: #fff;
|
||||||
|
padding: 12px;
|
||||||
|
width: 40px;
|
||||||
|
height: 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -46,6 +46,8 @@ export default {
|
|||||||
.app-main {
|
.app-main {
|
||||||
/* 84 = navbar + tags-view = 50 + 34 */
|
/* 84 = navbar + tags-view = 50 + 34 */
|
||||||
min-height: calc(100vh - 120px - 8px);
|
min-height: calc(100vh - 120px - 8px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-header + .app-main {
|
.fixed-header + .app-main {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import DialogForm from '../components/dialogForm.vue';
|
import DialogForm from '@/components/DialogForm/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { DialogForm },
|
components: { DialogForm },
|
||||||
@ -31,7 +31,6 @@ export default {
|
|||||||
// dialogFormConfig: [], // 占位
|
// dialogFormConfig: [], // 占位
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {},
|
|
||||||
methods: {
|
methods: {
|
||||||
// 过滤后端传回的详情数据
|
// 过滤后端传回的详情数据
|
||||||
filterData(data, keys) {
|
filterData(data, keys) {
|
||||||
@ -45,8 +44,6 @@ export default {
|
|||||||
});
|
});
|
||||||
return obj;
|
return obj;
|
||||||
},
|
},
|
||||||
// 处理搜索条件
|
|
||||||
handleSearchBarBtnClick() {},
|
|
||||||
// 处理表格按钮
|
// 处理表格按钮
|
||||||
handleTableBtnClick({ data, type }) {
|
handleTableBtnClick({ data, type }) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
@ -87,9 +84,13 @@ export default {
|
|||||||
},
|
},
|
||||||
handleEmitFun(val) {
|
handleEmitFun(val) {
|
||||||
console.log('emit unf', val);
|
console.log('emit unf', val);
|
||||||
|
switch (val.action) {
|
||||||
|
// 查看详情
|
||||||
|
case 'show-detail':
|
||||||
|
this.viewDetail(val.value); // 交由每个组件自己实现
|
||||||
|
break;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 获取列表数据
|
|
||||||
getList() {},
|
|
||||||
/** 搜索按钮操作 */
|
/** 搜索按钮操作 */
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
this.queryParams.pageNo = 1;
|
this.queryParams.pageNo = 1;
|
||||||
@ -89,6 +89,9 @@ export const DICT_TYPE = {
|
|||||||
|
|
||||||
// ============== ENERGY - 能源模块 =============
|
// ============== ENERGY - 能源模块 =============
|
||||||
ENERGY_UNIT: 'energy_unit',
|
ENERGY_UNIT: 'energy_unit',
|
||||||
|
|
||||||
|
// ============== ENERGY - 能源模块 =============
|
||||||
|
EQU_ALARM_LEVEL: 'equ_alarm_level',
|
||||||
MONITOR_INDEX_TYPE: 'monitor_index_type',
|
MONITOR_INDEX_TYPE: 'monitor_index_type',
|
||||||
OBJECT_TYPE: 'object_type',
|
OBJECT_TYPE: 'object_type',
|
||||||
STATISTIC_TYPE: 'statistic_type',
|
STATISTIC_TYPE: 'statistic_type',
|
||||||
|
|||||||
63
src/utils/dynamicProps.js
Normal file
63
src/utils/dynamicProps.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/**
|
||||||
|
* 用于动态表结构的 tableProps 生成
|
||||||
|
* @param {*} nameData
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function handleNameData(nameData) {
|
||||||
|
const props = step1(nameData.filter((item) => item.tree == 1));
|
||||||
|
step2(
|
||||||
|
props,
|
||||||
|
nameData.filter((item) => item.tree == 2)
|
||||||
|
);
|
||||||
|
// console.log('level 1', JSON.stringify(props, null, 2));
|
||||||
|
return props;
|
||||||
|
}
|
||||||
|
|
||||||
|
function step1(tree1) {
|
||||||
|
return Array.from(new Set(tree1.map((item) => item.name)))
|
||||||
|
.sort()
|
||||||
|
.map((item) => ({
|
||||||
|
prop: item,
|
||||||
|
label: item,
|
||||||
|
align: 'center',
|
||||||
|
children: [],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function step2(firstTierProps, tree2) {
|
||||||
|
tree2.map((nd) => {
|
||||||
|
const parent = firstTierProps.find(
|
||||||
|
({ prop }) => nd.parentId.indexOf(prop) > -1
|
||||||
|
);
|
||||||
|
if (notRepeat(parent.children, nd.name)) {
|
||||||
|
parent.children.push({
|
||||||
|
label: nd.name,
|
||||||
|
prop: `${parent.prop}-${nd.name}`,
|
||||||
|
align: 'center',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function notRepeat(propArray, name) {
|
||||||
|
return propArray.every((item) => item.label !== name);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用于调整服务器返回的动态数据
|
||||||
|
* @param {*} dynamicData
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function handleDynamicData(dynamicData) {
|
||||||
|
return dynamicData.map((dd) => {
|
||||||
|
const initData = {
|
||||||
|
inspectionContent: dd.inspectionDetContent,
|
||||||
|
};
|
||||||
|
dd.data.forEach((column) => {
|
||||||
|
column.children.forEach((ch) => {
|
||||||
|
initData[`${column.dynamicName}-${ch.dynamicName}`] = ch.dynamicValue;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return initData;
|
||||||
|
});
|
||||||
|
}
|
||||||
214
src/views/base/equipmentAttr/index.vue
Normal file
214
src/views/base/equipmentAttr/index.vue
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-attr:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-attr:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="ID" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="属性名称" align="center" prop="name" />
|
||||||
|
<el-table-column label="属性值" align="center" prop="value" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-attr:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-attr:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="属性名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入属性名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="属性值" prop="value">
|
||||||
|
<el-input v-model="form.value" placeholder="请输入属性值" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentAttr, updateEquipmentAttr, deleteEquipmentAttr, getEquipmentAttr, getEquipmentAttrPage, exportEquipmentAttrExcel } from "@/api/base/equipmentAttr";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentAttr",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 设备属性列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
equipmentId: [{ required: true, message: "设备id不能为空", trigger: "blur" }],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentAttrPage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
name: undefined,
|
||||||
|
value: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加设备属性";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentAttr(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改设备属性";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentAttr(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentAttr(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除设备属性编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentAttr(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有设备属性数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentAttrExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '设备属性.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
330
src/views/base/equipmentBindGroup/index.vue
Normal file
330
src/views/base/equipmentBindGroup/index.vue
Normal file
@ -0,0 +1,330 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="700px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentBindGroup,
|
||||||
|
updateEquipmentBindGroup,
|
||||||
|
deleteEquipmentBindGroup,
|
||||||
|
getEquipmentBindGroup,
|
||||||
|
getEquipmentBindGroupPage,
|
||||||
|
exportEquipmentBindGroupExcel,
|
||||||
|
} from '@/api/base/equipmentBindGroup';
|
||||||
|
|
||||||
|
import { getEquipmentGroupPage } from '@/api/base/equipmentGroup';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentBindGroup',
|
||||||
|
components: {},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['groupId', 'equipmentName'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-bind-group:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-bind-group:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||||
|
{ prop: 'groupName', label: '分组', align: 'center' },
|
||||||
|
{
|
||||||
|
_action: 'equipment-bind-group-show-alert',
|
||||||
|
label: '分组报警',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: {
|
||||||
|
props: ['injectData'],
|
||||||
|
render: function (h) {
|
||||||
|
const _this = this;
|
||||||
|
return h(
|
||||||
|
'el-button',
|
||||||
|
{
|
||||||
|
props: { type: 'text', size: 'mini' },
|
||||||
|
on: {
|
||||||
|
click: function () {
|
||||||
|
console.log('inejctdata', _this.injectData);
|
||||||
|
_this.$emit('emitData', {
|
||||||
|
action: _this.injectData._action,
|
||||||
|
value: _this.injectData,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'查看报警'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '分组',
|
||||||
|
placeholder: '请选择分组',
|
||||||
|
param: 'groupId',
|
||||||
|
filterable: true,
|
||||||
|
selectOptions: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备',
|
||||||
|
placeholder: '请输入设备',
|
||||||
|
param: 'equipmentName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment-bind-group:create')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '设备',
|
||||||
|
url: '/base/equipment/page?pageNo=1&pageSize=100',
|
||||||
|
prop: 'equipmentId',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '报警分组',
|
||||||
|
url: '/base/equipment-group/listAll', // 根据产线获取
|
||||||
|
// depends: '__product_line', // 依赖产线获取数据
|
||||||
|
// depends: 'productionLineId',
|
||||||
|
prop: 'groupId',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentName: null,
|
||||||
|
groupId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
getEquipmentGroupPage({ pageNo: 1, pageSize: 100 }).then((res) => {
|
||||||
|
this.searchBarFormConfig[0].selectOptions = res.data.list;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 覆盖 handleEmitFun 的默认实现 */
|
||||||
|
handleEmitFun({ action, value }) {
|
||||||
|
const {
|
||||||
|
groupId: equipmentGroupId,
|
||||||
|
groupName: equipmentGroupName,
|
||||||
|
groupCode: equipmentGroupCode,
|
||||||
|
} = value;
|
||||||
|
switch (action) {
|
||||||
|
case 'equipment-bind-group-show-alert':
|
||||||
|
// this.$router.push({ path: '/equipment/base/equipment-group-alarm' });
|
||||||
|
this.$router.push({
|
||||||
|
name: 'EquipmentGroupAlarm',
|
||||||
|
params: {
|
||||||
|
equipmentGroupId,
|
||||||
|
equipmentGroupCode,
|
||||||
|
equipmentGroupName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
_// 执行查询
|
||||||
|
getEquipmentBindGroupPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
groupId: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备与分组绑定';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentBindGroup(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备与分组绑定';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentBindGroup(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentBindGroup(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备与分组绑定编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentBindGroup(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备与分组绑定数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentBindGroupExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备与分组绑定.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
357
src/views/base/equipmentBindSection/index.vue
Normal file
357
src/views/base/equipmentBindSection/index.vue
Normal file
@ -0,0 +1,357 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="700px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentBindSection,
|
||||||
|
updateEquipmentBindSection,
|
||||||
|
deleteEquipmentBindSection,
|
||||||
|
getEquipmentBindSection,
|
||||||
|
getEquipmentBindSectionPage,
|
||||||
|
exportEquipmentBindSectionExcel,
|
||||||
|
} from '@/api/base/equipmentBindSection';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentBindSection',
|
||||||
|
components: {},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['workshopSectionId', 'equipmentName'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-bind-section:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-bind-section:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'productionLine', label: '产线名称', align: 'center' },
|
||||||
|
{ prop: 'workshopSection', label: '工段名称', align: 'center' },
|
||||||
|
{ prop: 'equipment', label: '设备名称', align: 'center' },
|
||||||
|
{ prop: 'sort', label: '工段中排序', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: 'lineDataType',
|
||||||
|
label: '产线数据类型',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) =>
|
||||||
|
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sectionDataType',
|
||||||
|
label: '工段数据类型',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) =>
|
||||||
|
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// action: 'show-alert',
|
||||||
|
// label: '报警',
|
||||||
|
// align: 'center',
|
||||||
|
// subcomponent: {
|
||||||
|
// props: ['injectData'],
|
||||||
|
// render: function (h) {
|
||||||
|
// const _this = this;
|
||||||
|
// return h(
|
||||||
|
// 'el-button',
|
||||||
|
// {
|
||||||
|
// props: { type: 'text', size: 'mini' },
|
||||||
|
// on: {
|
||||||
|
// click: function () {
|
||||||
|
// console.log('inejctdata', _this.injectData);
|
||||||
|
// _this.$emit('emitData', {
|
||||||
|
// action: _this.injectData.action,
|
||||||
|
// value: _this.injectData.id,
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// '查看报警'
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工段',
|
||||||
|
placeholder: '请选择工段',
|
||||||
|
param: 'workshopSectionId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备',
|
||||||
|
placeholder: '请输入设备',
|
||||||
|
param: 'equipmentName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment-bind-section:create')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '产线',
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
// prop: '__product_line', // __开头代表不传递给服务器
|
||||||
|
prop: 'productionLineId', // 编辑接口返回的产线id，所以不能使用上面那种形式
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '工段',
|
||||||
|
url: '/base/workshop-section/listByParentId', // 根据产线获取
|
||||||
|
// depends: '__product_line', // 依赖产线获取数据
|
||||||
|
depends: 'productionLineId',
|
||||||
|
prop: 'workshopSectionId',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '设备',
|
||||||
|
url: '/base/equipment/page?pageNo=1&pageSize=100',
|
||||||
|
prop: 'equipmentId',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '工段排序',
|
||||||
|
prop: 'sort',
|
||||||
|
// url: '/base/equipment-group/getCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '产线数据类型',
|
||||||
|
options: [
|
||||||
|
{ label: '无类型', value: 0 },
|
||||||
|
{ label: '进口统计', value: 1 },
|
||||||
|
{ label: '出口统计', value: 2 },
|
||||||
|
],
|
||||||
|
prop: 'lineDataType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '工段数据类型',
|
||||||
|
options: [
|
||||||
|
{ label: '无类型', value: 0 },
|
||||||
|
{ label: '进口统计', value: 1 },
|
||||||
|
{ label: '出口统计', value: 2 },
|
||||||
|
],
|
||||||
|
prop: 'sectionDataType',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
workshopSectionId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentBindSectionPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
workshopSectionId: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
sort: undefined,
|
||||||
|
lineDataType: undefined,
|
||||||
|
sectionDataType: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
version: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加工段设备绑定';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentBindSection(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改工段设备绑定';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentBindSection(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentBindSection(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除工段设备绑定编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentBindSection(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有工段设备绑定数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentBindSectionExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '工段设备绑定.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
225
src/views/base/equipmentFile/index.vue
Normal file
225
src/views/base/equipmentFile/index.vue
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备ID" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备ID" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-file:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-file:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备ID" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="文件类型 1.图片 2.设备资料" align="center" prop="fileType">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<dict-tag :type="DICT_TYPE.EQU_FILE_TYPE" :value="scope.row.fileType" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="原始文件名" align="center" prop="fileName" />
|
||||||
|
<el-table-column label="文件url" align="center" prop="fileUrl" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-file:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-file:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备ID" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备ID" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件类型 1.图片 2.设备资料" prop="fileType">
|
||||||
|
<el-select v-model="form.fileType" placeholder="请选择文件类型 1.图片 2.设备资料">
|
||||||
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.EQU_FILE_TYPE)"
|
||||||
|
:key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="原始文件名" prop="fileName">
|
||||||
|
<el-input v-model="form.fileName" placeholder="请输入原始文件名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件url" prop="fileUrl">
|
||||||
|
<el-input v-model="form.fileUrl" placeholder="请输入文件url" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentFile, updateEquipmentFile, deleteEquipmentFile, getEquipmentFile, getEquipmentFilePage, exportEquipmentFileExcel } from "@/api/base/equipmentFile";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentFile",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 设备文件对应列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentFilePage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
fileType: undefined,
|
||||||
|
fileName: undefined,
|
||||||
|
fileUrl: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加设备文件对应";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentFile(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改设备文件对应";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentFile(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentFile(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除设备文件对应编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentFile(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有设备文件对应数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentFileExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '设备文件对应.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
344
src/views/base/equipmentGroup/index.vue
Normal file
344
src/views/base/equipmentGroup/index.vue
Normal file
@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="500px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentGroup,
|
||||||
|
updateEquipmentGroup,
|
||||||
|
deleteEquipmentGroup,
|
||||||
|
getEquipmentGroup,
|
||||||
|
getEquipmentGroupPage,
|
||||||
|
exportEquipmentGroupExcel,
|
||||||
|
} from '@/api/base/equipmentGroup';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import { getAccessToken } from '@/utils/auth';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentGroup',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name', 'code'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-group:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-group:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'name', label: '设备分组名称', align: 'center' },
|
||||||
|
{ prop: 'code', label: '检测分组编码', align: 'center' },
|
||||||
|
{ prop: 'remark', label: '备注', align: 'center' },
|
||||||
|
{
|
||||||
|
_action: 'equipment-group-show-alert',
|
||||||
|
label: '报警',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: {
|
||||||
|
props: ['injectData'],
|
||||||
|
render: function (h) {
|
||||||
|
const _this = this;
|
||||||
|
return h(
|
||||||
|
'el-button',
|
||||||
|
{
|
||||||
|
props: { type: 'text', size: 'mini' },
|
||||||
|
on: {
|
||||||
|
click: function () {
|
||||||
|
console.log('inejctdata', _this.injectData);
|
||||||
|
_this.$emit('emitData', {
|
||||||
|
action: _this.injectData._action,
|
||||||
|
// value: _this.injectData.id,
|
||||||
|
value: _this.injectData,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'查看报警'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '分组名称',
|
||||||
|
placeholder: '请输入设备分组名称',
|
||||||
|
param: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '分组编码',
|
||||||
|
placeholder: '请输入设备分组编码',
|
||||||
|
param: 'codes',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment-group:create')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '分组名称',
|
||||||
|
prop: 'name',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '分组编码',
|
||||||
|
prop: 'code',
|
||||||
|
url: '/base/equipment-group/getCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '备注',
|
||||||
|
prop: 'remark',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
bind: {
|
||||||
|
placeholder: '请输入备注',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
code: null,
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 覆盖 handleEmitFun 的默认实现 */
|
||||||
|
handleEmitFun({ action, value }) {
|
||||||
|
const {
|
||||||
|
id: equipmentGroupId,
|
||||||
|
name: equipmentGroupName,
|
||||||
|
code: equipmentGroupCode,
|
||||||
|
} = value;
|
||||||
|
switch (action) {
|
||||||
|
case 'equipment-group-show-alert':
|
||||||
|
// this.$router.push({ path: '/equipment/base/equipment-group-alarm' });
|
||||||
|
this.$router.push({
|
||||||
|
name: 'EquipmentGroupAlarm',
|
||||||
|
params: {
|
||||||
|
equipmentGroupId,
|
||||||
|
equipmentGroupCode,
|
||||||
|
equipmentGroupName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentGroupPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
code: undefined,
|
||||||
|
name: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备分组（用于同类型不同厂家的设备区分）';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentGroup(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备分组（用于同类型不同厂家的设备区分）';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentGroup(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentGroup(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'是否确认删除设备分组（用于同类型不同厂家的设备区分）编号为"' +
|
||||||
|
id +
|
||||||
|
'"的数据项?'
|
||||||
|
)
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentGroup(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'是否确认导出所有设备分组（用于同类型不同厂家的设备区分）数据项?'
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentGroupExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(
|
||||||
|
response,
|
||||||
|
'设备分组（用于同类型不同厂家的设备区分）.xls'
|
||||||
|
);
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
354
src/views/base/equipmentGroupAlarm/index.vue
Normal file
354
src/views/base/equipmentGroupAlarm/index.vue
Normal file
@ -0,0 +1,354 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="736px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentGroupAlarm,
|
||||||
|
updateEquipmentGroupAlarm,
|
||||||
|
deleteEquipmentGroupAlarm,
|
||||||
|
getEquipmentGroupAlarm,
|
||||||
|
getEquipmentGroupAlarmPage,
|
||||||
|
exportEquipmentGroupAlarmExcel,
|
||||||
|
} from '@/api/base/equipmentGroupAlarm';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentGroupAlarm',
|
||||||
|
components: {},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: [''],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-group-alarm:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-group-alarm:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'code', label: '报警编码', align: 'center' },
|
||||||
|
{ prop: 'type', label: '报警类型', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: 'grade',
|
||||||
|
label: '报警级别',
|
||||||
|
align: 'center',
|
||||||
|
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||||
|
},
|
||||||
|
{ prop: 'alarmCode', label: '设备报警编码', align: 'center' },
|
||||||
|
{ prop: 'plcParamName', label: '参数列名', align: 'center' },
|
||||||
|
{ prop: 'alarmContent', label: '报警内容', align: 'center' },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备分组编码',
|
||||||
|
placeholder: '/',
|
||||||
|
param: 'equipmentGroupCode',
|
||||||
|
defaultSelect: null,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备分组名称',
|
||||||
|
placeholder: '/',
|
||||||
|
param: 'equipmentGroupName',
|
||||||
|
defaultSelect: null,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment-group-alarm:create')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '报警编码', // 自动生成
|
||||||
|
prop: 'code',
|
||||||
|
url: '/base/equipment-group-alarm/getCode',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '报警类型', // 固定选项
|
||||||
|
prop: 'type',
|
||||||
|
options: [
|
||||||
|
{ label: '布尔型', value: 2 },
|
||||||
|
{ label: '字符型', value: 1 },
|
||||||
|
],
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '报警级别', // 字典
|
||||||
|
prop: 'grade',
|
||||||
|
options: this.getDictDatas(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备报警编码', // 对应到设备实际的报警编码
|
||||||
|
prop: 'alarmCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '参数列名', // 在实时数据库的列名
|
||||||
|
prop: 'plcParamName',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '报警内容',
|
||||||
|
prop: 'alarmContent',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentGroupId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {
|
||||||
|
id: undefined,
|
||||||
|
equipmentGroupId: undefined,
|
||||||
|
code: undefined,
|
||||||
|
type: undefined,
|
||||||
|
grade: undefined,
|
||||||
|
alarmCode: undefined,
|
||||||
|
alarmContent: undefined,
|
||||||
|
plcParamName: undefined,
|
||||||
|
},
|
||||||
|
// // 表单校验
|
||||||
|
// rules: {
|
||||||
|
// equipmentGroupId: [{ required: true, message: "设备分组ID，关联base_equipment_group不能为空", trigger: "blur" }],
|
||||||
|
// type: [{ required: true, message: "报警类型:1.字符型，2.布尔型不能为空", trigger: "change" }],
|
||||||
|
// alarmContent: [{ required: true, message: "报警内容 该条报警具体的解释不能为空", trigger: "blur" }],
|
||||||
|
// plcParamName: [{ required: true, message: "关联编码，对应到plc_param_name的编码，用于链接数采不能为空", trigger: "blur" }],
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// watch: {
|
||||||
|
// $route(value) {
|
||||||
|
// console.log('new route info', value)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// created() {
|
||||||
|
// this.getList();
|
||||||
|
// },
|
||||||
|
activated() {
|
||||||
|
// 设置顶部搜索栏信息
|
||||||
|
const { equipmentGroupName, equipmentGroupCode, equipmentGroupId } =
|
||||||
|
this.$route.params;
|
||||||
|
this.setSearchBarFormValue('equipmentGroupName', equipmentGroupName);
|
||||||
|
this.setSearchBarFormValue('equipmentGroupCode', equipmentGroupCode);
|
||||||
|
this.queryParams.equipmentGroupId = equipmentGroupId;
|
||||||
|
// if (!equipmentGroupId) this.getList(); // 拦截
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
this.setSearchBarFormValue('equipmentGroupName', null);
|
||||||
|
this.setSearchBarFormValue('equipmentGroupCode', null);
|
||||||
|
this.queryParams.equipmentGroupId = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 设置 searchBarForm 的默认值 - 用得比较少 */
|
||||||
|
setSearchBarFormValue(param, value) {
|
||||||
|
this.searchBarFormConfig.forEach((config) => {
|
||||||
|
if (config.param == param) {
|
||||||
|
config.defaultSelect = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentGroupAlarmPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentGroupId: undefined,
|
||||||
|
code: undefined,
|
||||||
|
type: undefined,
|
||||||
|
grade: undefined,
|
||||||
|
alarmCode: undefined,
|
||||||
|
alarmContent: undefined,
|
||||||
|
plcParamName: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
if (this.queryParams.equipmentGroupId == null)
|
||||||
|
return this.$message.error('没有检测到设备分组信息');
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备分组报警明细';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentGroupAlarm(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备分组报警明细';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentGroupAlarm({
|
||||||
|
...this.form,
|
||||||
|
equipmentGroupId: this.queryParams.equipmentGroupId,
|
||||||
|
}).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentGroupAlarm({
|
||||||
|
...this.form,
|
||||||
|
equipmentGroupId: this.queryParams.equipmentGroupId,
|
||||||
|
}).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备分组报警明细编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentGroupAlarm(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备分组报警明细数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentGroupAlarmExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备分组报警明细.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
373
src/views/base/equipmentPlc/index.vue
Normal file
373
src/views/base/equipmentPlc/index.vue
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="700px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentPlc,
|
||||||
|
updateEquipmentPlc,
|
||||||
|
deleteEquipmentPlc,
|
||||||
|
getEquipmentPlc,
|
||||||
|
getEquipmentPlcPage,
|
||||||
|
exportEquipmentPlcExcel,
|
||||||
|
} from '@/api/base/equipmentPlc';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
|
const switchBtn = {
|
||||||
|
name: 'SwitchBtn',
|
||||||
|
props: ['injectData'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: +this.injectData[this.injectData.prop] == 1 ? true : false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
render: function (h) {
|
||||||
|
return h(
|
||||||
|
'el-switch',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
value: this.active,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
change: (newVal) => {
|
||||||
|
this.active = !this.active;
|
||||||
|
console.log('changed emit', newVal);
|
||||||
|
this.$emit('emitData', {
|
||||||
|
action: 'update-collect',
|
||||||
|
payload: {
|
||||||
|
...this.injectData,
|
||||||
|
collection: newVal ? 1 : 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
null
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentPlc',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name', 'plcTableName'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-plc:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-plc:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
// {
|
||||||
|
// prop: 'createTime',
|
||||||
|
// label: '添加时间',
|
||||||
|
// fixed: true,
|
||||||
|
// width: 180,
|
||||||
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
// },
|
||||||
|
{ prop: 'code', label: '编码', align: 'center' },
|
||||||
|
{ prop: 'plcTableName', label: '关联表名', align: 'center' },
|
||||||
|
{ prop: 'name', label: '标识名称', align: 'center' },
|
||||||
|
{ prop: 'enName', label: '英文名称', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: 'collection',
|
||||||
|
label: '是否采集',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: switchBtn,
|
||||||
|
},
|
||||||
|
{ prop: 'description', label: '描述', align: 'center' },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '表名',
|
||||||
|
placeholder: '请输入表名',
|
||||||
|
param: 'plcTableName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '标识',
|
||||||
|
placeholder: '请输入标识',
|
||||||
|
param: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-plc:create')
|
||||||
|
// ? 'button'
|
||||||
|
// : '',
|
||||||
|
type: 'button',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '关联表名',
|
||||||
|
prop: 'plcTableName',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '编码',
|
||||||
|
prop: 'code',
|
||||||
|
url: '/base/equipment-group/getCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '标识',
|
||||||
|
prop: 'name',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '英文名',
|
||||||
|
prop: 'enName',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
switch: true,
|
||||||
|
label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
|
||||||
|
prop: 'collection',
|
||||||
|
bind: {
|
||||||
|
'active-value': 1,
|
||||||
|
'inactive-value': 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
textarea: true,
|
||||||
|
label: '描述',
|
||||||
|
prop: 'description',
|
||||||
|
bind: {
|
||||||
|
placeholder: '请输入备注',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
// 是否显示弹出
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
plcTableName: null,
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 覆盖 handleEmitFun 的默认实现 */
|
||||||
|
handleEmitFun({ action, payload }) {
|
||||||
|
switch (action) {
|
||||||
|
case 'update-collect':
|
||||||
|
this.reset();
|
||||||
|
const tempForm = {};
|
||||||
|
Object.keys(this.form).forEach((key) => {
|
||||||
|
tempForm[key] = payload[key];
|
||||||
|
});
|
||||||
|
updateEquipmentPlc(tempForm).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentPlcPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
plcTableName: undefined,
|
||||||
|
code: undefined,
|
||||||
|
name: undefined,
|
||||||
|
enName: undefined,
|
||||||
|
description: undefined,
|
||||||
|
collection: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加实时数据采集配置';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentPlc(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改实时数据采集配置';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentPlc(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentPlc(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除实时数据采集配置编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentPlc(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有实时数据采集配置数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentPlcExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '实时数据采集配置.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
78
src/views/base/equipmentPlcConnect/http.js
Normal file
78
src/views/base/equipmentPlcConnect/http.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import Mock from 'mockjs';
|
||||||
|
|
||||||
|
const baseURL = 'http://192.168.1.49:48080/admin-api';
|
||||||
|
|
||||||
|
Mock.setup({
|
||||||
|
timeout: 200,
|
||||||
|
});
|
||||||
|
|
||||||
|
// @database
|
||||||
|
const list = Mock.mock({
|
||||||
|
'data|1-10': [
|
||||||
|
{
|
||||||
|
'id|+1': 1,
|
||||||
|
productionLine: (options) => {
|
||||||
|
// console.log('otpsion', options.context.currentContext);
|
||||||
|
return `EQ${options.context.currentContext.id}`;
|
||||||
|
},
|
||||||
|
workshopSection: ({ context: { currentContext } }) =>
|
||||||
|
`EQ${currentContext.id}_WS${Mock.Random.integer(1, 10)}`,
|
||||||
|
equipmentName: ({ context: { currentContext } }) =>
|
||||||
|
`设备${currentContext.id}`,
|
||||||
|
equipmentCode: ({ context: { currentContext } }) =>
|
||||||
|
`${currentContext.equipmentName}_Code`,
|
||||||
|
plcCode: ({ context: { currentContext } }) =>
|
||||||
|
`PLC_TABLE_CODE_${currentContext.id}`,
|
||||||
|
plcTableName: ({ context: { currentContext } }) =>
|
||||||
|
`PLC_TABLE_${currentContext.id}`,
|
||||||
|
plcName: ({ context: { currentContext } }) => `PLC_${currentContext.id}`,
|
||||||
|
'bindingParameters|1-10': 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
// @page
|
||||||
|
Mock.mock(
|
||||||
|
RegExp(baseURL + '/base/equipment-plc-connect/page' + '.*'),
|
||||||
|
'get',
|
||||||
|
(options) => {
|
||||||
|
console.log('[Mock url]', options.url, list);
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
data: {
|
||||||
|
list: list.data,
|
||||||
|
total: list.data.length,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// @create
|
||||||
|
Mock.mock(baseURL + '/base/equipment-plc-connect/create', 'post', (options) => {
|
||||||
|
console.log('options', options);
|
||||||
|
const { url, type, body } = options;
|
||||||
|
const newItem = JSON.parse(body);
|
||||||
|
list.data.push(newItem);
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
data: null,
|
||||||
|
msg: 'success',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// @update
|
||||||
|
Mock.mock(
|
||||||
|
baseURL + '/admin-api/base/equipment-plc-connect/update',
|
||||||
|
'put',
|
||||||
|
(options) => {
|
||||||
|
const { url, type, body } = options;
|
||||||
|
const { id } = JSON.parse(body);
|
||||||
|
const newItem = list.data.find((item) => item.id == id);
|
||||||
|
newItem = { ...newItem, ...JSON.parse(body) };
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
msg: 'success',
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
349
src/views/base/equipmentPlcConnect/index.vue
Normal file
349
src/views/base/equipmentPlcConnect/index.vue
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="700px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentPlcConnect,
|
||||||
|
updateEquipmentPlcConnect,
|
||||||
|
deleteEquipmentPlcConnect,
|
||||||
|
getEquipmentPlcConnect,
|
||||||
|
getEquipmentPlcConnectPage,
|
||||||
|
exportEquipmentPlcConnectExcel,
|
||||||
|
} from '@/api/base/equipmentPlcConnect';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
// import './http';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentPlcConnect',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name', 'plcTableName'],
|
||||||
|
// tableBtn: [
|
||||||
|
// this.$auth.hasPermi('base:equipment-plc:update')
|
||||||
|
// ? {
|
||||||
|
// type: 'edit',
|
||||||
|
// btnName: '修改',
|
||||||
|
// }
|
||||||
|
// : undefined,
|
||||||
|
// this.$auth.hasPermi('base:equipment-plc:delete')
|
||||||
|
// ? {
|
||||||
|
// type: 'delete',
|
||||||
|
// btnName: '删除',
|
||||||
|
// }
|
||||||
|
// : undefined,
|
||||||
|
// ].filter((v) => v),
|
||||||
|
tableBtn: [
|
||||||
|
{
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'params-bind',
|
||||||
|
// btnName: '参数绑定',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableProps: [
|
||||||
|
// {
|
||||||
|
// prop: 'createTime',
|
||||||
|
// label: '添加时间',
|
||||||
|
// fixed: true,
|
||||||
|
// width: 180,
|
||||||
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
// },
|
||||||
|
{ prop: 'productionLine', label: '产线', align: 'center' },
|
||||||
|
{ prop: 'workshopSection', label: '工段', align: 'center' },
|
||||||
|
{ prop: 'equipmentName', label: '设备名', align: 'center' },
|
||||||
|
{ prop: 'equipmentCode', label: '设备编码', align: 'center' },
|
||||||
|
{ prop: 'plcCode', label: '关联表编码', align: 'center' },
|
||||||
|
{ prop: 'plcTableName', label: '关联表名', align: 'center' },
|
||||||
|
{ prop: 'plcName', label: '标识名称', align: 'center' },
|
||||||
|
{ prop: 'bindingParameters', label: '绑定参数数量', align: 'center' },
|
||||||
|
{
|
||||||
|
_action: 'params-bind',
|
||||||
|
label: '查看绑定',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: {
|
||||||
|
props: ['injectData'],
|
||||||
|
render: function (h) {
|
||||||
|
const _this = this;
|
||||||
|
return h(
|
||||||
|
'el-button',
|
||||||
|
{
|
||||||
|
props: { type: 'text' },
|
||||||
|
on: {
|
||||||
|
click: function () {
|
||||||
|
console.log('inejctdata', _this.injectData);
|
||||||
|
_this.$emit('emitData', {
|
||||||
|
action: _this.injectData._action,
|
||||||
|
payload: _this.injectData,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'查看绑定'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备名',
|
||||||
|
placeholder: '请输入设备名',
|
||||||
|
param: 'equipmentId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '编码',
|
||||||
|
placeholder: '请输入编码',
|
||||||
|
param: 'plcId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-plc:create')
|
||||||
|
// ? 'button'
|
||||||
|
// : '',
|
||||||
|
type: 'button',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '关联表名',
|
||||||
|
prop: 'plcId',
|
||||||
|
url: '/base/equipment-plc/listAll',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '设备',
|
||||||
|
prop: 'equipmentId',
|
||||||
|
url: '/base/equipment/page?pageNo=1&pageSize=99',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
plcId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 覆盖 handleEmitFun 的默认实现 */
|
||||||
|
handleEmitFun({ action, payload }) {
|
||||||
|
switch (action) {
|
||||||
|
case 'params-bind':
|
||||||
|
this.reset();
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
equipmentName,
|
||||||
|
equipmentId,
|
||||||
|
plcId,
|
||||||
|
plcName,
|
||||||
|
plcTableName,
|
||||||
|
} = payload;
|
||||||
|
// console.log('Cha看绑定参数弹窗', id, equipmentName, plcTableName);
|
||||||
|
this.$router.push({
|
||||||
|
name: 'EquipmentPlcParam',
|
||||||
|
params: {
|
||||||
|
id,
|
||||||
|
equipmentName,
|
||||||
|
plcTableName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentPlcConnectPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
plcId: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备与实时采集关系表（一对多）';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentPlcConnect(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备与实时采集关系表（一对多）';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentPlcConnect(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentPlcConnect(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'是否确认删除设备与实时采集关系表（一对多）编号为"' +
|
||||||
|
id +
|
||||||
|
'"的数据项?'
|
||||||
|
)
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentPlcConnect(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备与实时采集关系表（一对多）数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentPlcConnectExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备与实时采集关系表（一对多）.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
450
src/views/base/equipmentPlcParam/index.vue
Normal file
450
src/views/base/equipmentPlcParam/index.vue
Normal file
@ -0,0 +1,450 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="700px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentPlcParam,
|
||||||
|
updateEquipmentPlcParam,
|
||||||
|
deleteEquipmentPlcParam,
|
||||||
|
getEquipmentPlcParam,
|
||||||
|
getEquipmentPlcParamPage,
|
||||||
|
exportEquipmentPlcParamExcel,
|
||||||
|
} from '@/api/base/equipmentPlcParam';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentPlcParam',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps: [
|
||||||
|
// {
|
||||||
|
// prop: 'createTime',
|
||||||
|
// label: '添加时间',
|
||||||
|
// fixed: true,
|
||||||
|
// width: 180,
|
||||||
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
// },
|
||||||
|
{ prop: 'plcParamName', label: '参数列名', align: 'center' },
|
||||||
|
{ prop: 'name', label: '参数名称', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: 'unit',
|
||||||
|
label: '单位',
|
||||||
|
align: 'center',
|
||||||
|
filter: publicFormatter('unit_dict'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'collection',
|
||||||
|
label: '是否采集',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? ['否', '是'][val] : '-'),
|
||||||
|
},
|
||||||
|
{ prop: 'minValue', label: '最小值', align: 'center' },
|
||||||
|
{ prop: 'maxValue', label: '最大值', align: 'center' },
|
||||||
|
{ prop: 'defaultValue', label: '标准值', align: 'center' },
|
||||||
|
{ prop: 'description', label: '描述', align: 'center' },
|
||||||
|
{ prop: 'remark', label: '备注', align: 'center' },
|
||||||
|
// {
|
||||||
|
// _action: 'params-bind',
|
||||||
|
// label: '查看绑定',
|
||||||
|
// align: 'center',
|
||||||
|
// subcomponent: {
|
||||||
|
// props: ['injectData'],
|
||||||
|
// render: function (h) {
|
||||||
|
// const _this = this;
|
||||||
|
// return h(
|
||||||
|
// 'el-button',
|
||||||
|
// {
|
||||||
|
// props: { type: 'text' },
|
||||||
|
// on: {
|
||||||
|
// click: function () {
|
||||||
|
// console.log('inejctdata', _this.injectData);
|
||||||
|
// _this.$emit('emitData', {
|
||||||
|
// action: _this.injectData._action,
|
||||||
|
// payload: _this.injectData,
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// '查看绑定'
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '参数列名',
|
||||||
|
prop: 'plcParamName',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '参数名称',
|
||||||
|
prop: 'name',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '单位',
|
||||||
|
prop: 'unit',
|
||||||
|
options: this.getDictDatas(this.DICT_TYPE.UNIT_DICT),
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
switch: true,
|
||||||
|
label: '是否采集',
|
||||||
|
prop: 'collection',
|
||||||
|
bind: {
|
||||||
|
'active-value': 1,
|
||||||
|
'inactive-value': 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '最小值',
|
||||||
|
prop: 'minValue',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入正确的数字',
|
||||||
|
trigger: 'blur',
|
||||||
|
transform: (val) => Number(val),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '最大值',
|
||||||
|
prop: 'maxValue',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入正确的数字',
|
||||||
|
trigger: 'blur',
|
||||||
|
transform: (val) => Number(val),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '标准值',
|
||||||
|
prop: 'defaultValue',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '描述',
|
||||||
|
prop: 'description',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '备注',
|
||||||
|
prop: 'remark',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
connectId: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
connectId: null,
|
||||||
|
equipmentName: '',
|
||||||
|
plcTableName: '',
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备名',
|
||||||
|
disabled: true,
|
||||||
|
param: 'equipmentName',
|
||||||
|
defaultSelect: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '关联表名',
|
||||||
|
disabled: true,
|
||||||
|
param: 'plcName',
|
||||||
|
defaultSelect: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:
|
||||||
|
this.$auth.hasPermi('base:equipment-plc-param:create') &&
|
||||||
|
!this.isDetailPage
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isDetailPage() {
|
||||||
|
return this.$route.params.detail === true;
|
||||||
|
},
|
||||||
|
tableBtn() {
|
||||||
|
return [
|
||||||
|
this.$auth.hasPermi('base:equipment-plc-param:update') &&
|
||||||
|
!this.isDetailPage
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-plc-param:delete') &&
|
||||||
|
!this.isDetailPage
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v);
|
||||||
|
},
|
||||||
|
// searchBarFormConfig() {
|
||||||
|
// console.log(
|
||||||
|
// 'ers',
|
||||||
|
// JSON.stringify({ eid: this.equipmentName, plc: this.plcTableName })
|
||||||
|
// );
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// type: 'input',
|
||||||
|
// label: '设备名',
|
||||||
|
// disabled: true,
|
||||||
|
// param: 'equipmentName',
|
||||||
|
// defaultSelect: this.equipmentName,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'input',
|
||||||
|
// label: '关联表名',
|
||||||
|
// disabled: true,
|
||||||
|
// param: 'plcName',
|
||||||
|
// defaultSelect: this.plcTableName,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type:
|
||||||
|
// this.$auth.hasPermi('base:equipment-plc-param:create') &&
|
||||||
|
// !this.isDetailPage
|
||||||
|
// ? 'button'
|
||||||
|
// : '',
|
||||||
|
// btnName: '新增',
|
||||||
|
// name: 'add',
|
||||||
|
// plain: true,
|
||||||
|
// color: 'success',
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
console.log('activated,,,');
|
||||||
|
// 设置顶部搜索栏信息
|
||||||
|
const { equipmentName, id: connectId, plcTableName } = this.$route.params;
|
||||||
|
// this.equipmentName = equipmentName;
|
||||||
|
// this.plcTableName = plcTableName;
|
||||||
|
this.setSearchBarFormValue('equipmentName', equipmentName);
|
||||||
|
this.setSearchBarFormValue('plcName', plcTableName);
|
||||||
|
this.queryParams.connectId = connectId;
|
||||||
|
// if (!equipmentGroupId) this.getList(); // 拦截
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
console.log('deactivated,,,');
|
||||||
|
this.setSearchBarFormValue('equipmentName', '');
|
||||||
|
this.setSearchBarFormValue('plcName', '');
|
||||||
|
// this.equipmentName = null;
|
||||||
|
// this.plcTableName = null;
|
||||||
|
this.queryParams.connectId = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 设置 searchBarForm 的默认值 - 用得比较少 */
|
||||||
|
setSearchBarFormValue(param, value) {
|
||||||
|
this.searchBarFormConfig.forEach((config) => {
|
||||||
|
if (config.param == param) {
|
||||||
|
config.defaultSelect = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentPlcParamPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
connectId: undefined,
|
||||||
|
plcParamName: undefined,
|
||||||
|
name: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
minValue: undefined,
|
||||||
|
maxValue: undefined,
|
||||||
|
defaultValue: undefined,
|
||||||
|
collection: undefined,
|
||||||
|
description: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备数采详情';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentPlcParam(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备数采详情';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentPlcParam({
|
||||||
|
...this.form,
|
||||||
|
connectId: this.queryParams.connectId,
|
||||||
|
}).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentPlcParam({
|
||||||
|
...this.form,
|
||||||
|
connectId: this.queryParams.connectId,
|
||||||
|
}).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentPlcParam(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备数采详情数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentPlcParamExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备数采详情.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
277
src/views/base/equipmentQuantityLog/index.vue
Normal file
277
src/views/base/equipmentQuantityLog/index.vue
Normal file
@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="进入设备的数量" prop="inQuantity">
|
||||||
|
<el-input v-model="queryParams.inQuantity" placeholder="请输入进入设备的数量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
|
||||||
|
<el-input v-model="queryParams.outQuantity" placeholder="请输入离开设备的数量，若plc只记录一个生产数量，也写入该字段" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="正常生产量" prop="okQuantity">
|
||||||
|
<el-input v-model="queryParams.okQuantity" placeholder="请输入正常生产量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备上报的报废数量" prop="nokQuantity">
|
||||||
|
<el-input v-model="queryParams.nokQuantity" placeholder="请输入设备上报的报废数量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产数量的记录时间" prop="recordTime">
|
||||||
|
<el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-quantity-log:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-quantity-log:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="equipmentName" />
|
||||||
|
<el-table-column label="进入设备的数量" align="center" prop="inQuantity" />
|
||||||
|
<el-table-column label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" align="center" prop="outQuantity" />
|
||||||
|
<el-table-column label="正常生产量" align="center" prop="okQuantity" />
|
||||||
|
<el-table-column label="设备上报的报废数量" align="center" prop="nokQuantity" />
|
||||||
|
<el-table-column label="生产数量的记录时间" align="center" prop="recordTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.recordTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="版本号" align="center" prop="version" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-quantity-log:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-quantity-log:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="进入设备的数量" prop="inQuantity">
|
||||||
|
<el-input v-model="form.inQuantity" placeholder="请输入进入设备的数量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
|
||||||
|
<el-input v-model="form.outQuantity" placeholder="请输入离开设备的数量，若plc只记录一个生产数量，也写入该字段" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="正常生产量" prop="okQuantity">
|
||||||
|
<el-input v-model="form.okQuantity" placeholder="请输入正常生产量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备上报的报废数量" prop="nokQuantity">
|
||||||
|
<el-input v-model="form.nokQuantity" placeholder="请输入设备上报的报废数量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产数量的记录时间" prop="recordTime">
|
||||||
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择生产数量的记录时间" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="form.version" placeholder="请输入版本号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentQuantityLog, updateEquipmentQuantityLog, deleteEquipmentQuantityLog, getEquipmentQuantityLog, getEquipmentQuantityLogPage, exportEquipmentQuantityLogExcel } from "@/api/base/equipmentQuantityLog";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentQuantityLog",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 后端用 设备生产数量统计表（按一定时间段写入）列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
equipmentName: null,
|
||||||
|
inQuantity: null,
|
||||||
|
outQuantity: null,
|
||||||
|
okQuantity: null,
|
||||||
|
nokQuantity: null,
|
||||||
|
recordTime: [],
|
||||||
|
version: null,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
equipmentName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentQuantityLogPage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
equipmentName: undefined,
|
||||||
|
inQuantity: undefined,
|
||||||
|
outQuantity: undefined,
|
||||||
|
okQuantity: undefined,
|
||||||
|
nokQuantity: undefined,
|
||||||
|
recordTime: undefined,
|
||||||
|
version: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加后端用 设备生产数量统计表（按一定时间段写入）";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentQuantityLog(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改后端用 设备生产数量统计表（按一定时间段写入）";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentQuantityLog(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentQuantityLog(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除后端用 设备生产数量统计表（按一定时间段写入）编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentQuantityLog(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有后端用 设备生产数量统计表（按一定时间段写入）数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentQuantityLogExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '后端用 设备生产数量统计表（按一定时间段写入）.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
276
src/views/base/equipmentQuantityRealtime/index.vue
Normal file
276
src/views/base/equipmentQuantityRealtime/index.vue
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="进入设备的基板数量" prop="inQuantity">
|
||||||
|
<el-input v-model="queryParams.inQuantity" placeholder="请输入进入设备的基板数量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
|
||||||
|
<el-input v-model="queryParams.outQuantity" placeholder="请输入离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="正常生产量" prop="okQuantity">
|
||||||
|
<el-input v-model="queryParams.okQuantity" placeholder="请输入正常生产量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备上报的报废数量" prop="nokQuantity">
|
||||||
|
<el-input v-model="queryParams.nokQuantity" placeholder="请输入设备上报的报废数量" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-quantity-realtime:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-quantity-realtime:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="equipmentName" />
|
||||||
|
<el-table-column label="进入设备的基板数量" align="center" prop="inQuantity" />
|
||||||
|
<el-table-column label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" align="center" prop="outQuantity" />
|
||||||
|
<el-table-column label="正常生产量" align="center" prop="okQuantity" />
|
||||||
|
<el-table-column label="设备上报的报废数量" align="center" prop="nokQuantity" />
|
||||||
|
<el-table-column label="记录时间" align="center" prop="recordTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.recordTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="版本号" align="center" prop="version" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-quantity-realtime:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-quantity-realtime:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="进入设备的基板数量" prop="inQuantity">
|
||||||
|
<el-input v-model="form.inQuantity" placeholder="请输入进入设备的基板数量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
|
||||||
|
<el-input v-model="form.outQuantity" placeholder="请输入离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="正常生产量" prop="okQuantity">
|
||||||
|
<el-input v-model="form.okQuantity" placeholder="请输入正常生产量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备上报的报废数量" prop="nokQuantity">
|
||||||
|
<el-input v-model="form.nokQuantity" placeholder="请输入设备上报的报废数量" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="form.version" placeholder="请输入版本号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentQuantityRealtime, updateEquipmentQuantityRealtime, deleteEquipmentQuantityRealtime, getEquipmentQuantityRealtime, getEquipmentQuantityRealtimePage, exportEquipmentQuantityRealtimeExcel } from "@/api/base/equipmentQuantityRealtime";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentQuantityRealtime",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 后端用 设备生产数量实时列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
equipmentName: null,
|
||||||
|
inQuantity: null,
|
||||||
|
outQuantity: null,
|
||||||
|
okQuantity: null,
|
||||||
|
nokQuantity: null,
|
||||||
|
recordTime: [],
|
||||||
|
version: null,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentQuantityRealtimePage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
equipmentName: undefined,
|
||||||
|
inQuantity: undefined,
|
||||||
|
outQuantity: undefined,
|
||||||
|
okQuantity: undefined,
|
||||||
|
nokQuantity: undefined,
|
||||||
|
recordTime: undefined,
|
||||||
|
version: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加后端用 设备生产数量实时";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentQuantityRealtime(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改后端用 设备生产数量实时";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentQuantityRealtime(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentQuantityRealtime(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除后端用 设备生产数量实时编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentQuantityRealtime(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有后端用 设备生产数量实时数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentQuantityRealtimeExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '后端用 设备生产数量实时.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
289
src/views/base/equipmentStatusLog/index.vue
Normal file
289
src/views/base/equipmentStatusLog/index.vue
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="plc id" prop="plcId">
|
||||||
|
<el-input v-model="queryParams.plcId" placeholder="请输入plc id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="plc" prop="plc">
|
||||||
|
<el-input v-model="queryParams.plc" placeholder="请输入plc" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" placeholder="请选择状态，0正常 1计划停机 2故障" clearable size="small">
|
||||||
|
<el-option label="请选择字典生成" value="" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="持续时间（分钟），状态变动时记录并更新" prop="duration">
|
||||||
|
<el-input v-model="queryParams.duration" placeholder="请输入持续时间（分钟），状态变动时记录并更新" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-status-log:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-status-log:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="equipmentName" />
|
||||||
|
<el-table-column label="plc id" align="center" prop="plcId" />
|
||||||
|
<el-table-column label="plc" align="center" prop="plc" />
|
||||||
|
<el-table-column label="状态，0正常 1计划停机 2故障" align="center" prop="status" />
|
||||||
|
<el-table-column label="记录时间" align="center" prop="recordTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.recordTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="持续时间（分钟），状态变动时记录并更新" align="center" prop="duration" />
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" />
|
||||||
|
<el-table-column label="版本号" align="center" prop="version" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-status-log:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-status-log:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="plc id" prop="plcId">
|
||||||
|
<el-input v-model="form.plcId" placeholder="请输入plc id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="plc" prop="plc">
|
||||||
|
<el-input v-model="form.plc" placeholder="请输入plc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio label="1">请选择字典生成</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="持续时间（分钟），状态变动时记录并更新" prop="duration">
|
||||||
|
<el-input v-model="form.duration" placeholder="请输入持续时间（分钟），状态变动时记录并更新" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="form.version" placeholder="请输入版本号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentStatusLog, updateEquipmentStatusLog, deleteEquipmentStatusLog, getEquipmentStatusLog, getEquipmentStatusLogPage, exportEquipmentStatusLogExcel } from "@/api/base/equipmentStatusLog";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentStatusLog",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 后端用 设备工作状态列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
equipmentName: null,
|
||||||
|
plcId: null,
|
||||||
|
plc: null,
|
||||||
|
status: null,
|
||||||
|
recordTime: [],
|
||||||
|
duration: null,
|
||||||
|
remark: null,
|
||||||
|
version: null,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentStatusLogPage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
equipmentName: undefined,
|
||||||
|
plcId: undefined,
|
||||||
|
plc: undefined,
|
||||||
|
status: undefined,
|
||||||
|
recordTime: undefined,
|
||||||
|
duration: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
version: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加后端用 设备工作状态";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentStatusLog(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改后端用 设备工作状态";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentStatusLog(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentStatusLog(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除后端用 设备工作状态编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentStatusLog(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有后端用 设备工作状态数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentStatusLogExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '后端用 设备工作状态.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
296
src/views/base/equipmentStatusRealtime/index.vue
Normal file
296
src/views/base/equipmentStatusRealtime/index.vue
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" placeholder="请选择状态，0正常 1计划停机 2故障" clearable size="small">
|
||||||
|
<el-option label="请选择字典生成" value="" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否运行中" prop="run">
|
||||||
|
<el-select v-model="queryParams.run" placeholder="请选择是否运行中" clearable size="small">
|
||||||
|
<el-option label="请选择字典生成" value="" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否发生运行错误" prop="error">
|
||||||
|
<el-select v-model="queryParams.error" placeholder="请选择是否发生运行错误" clearable size="small">
|
||||||
|
<el-option label="请选择字典生成" value="" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-status-realtime:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-status-realtime:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备id" align="center" prop="equipmentId" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="equipmentName" />
|
||||||
|
<el-table-column label="状态，0正常 1计划停机 2故障" align="center" prop="status" />
|
||||||
|
<el-table-column label="是否运行中" align="center" prop="run" />
|
||||||
|
<el-table-column label="是否发生运行错误" align="center" prop="error" />
|
||||||
|
<el-table-column label="描述" align="center" prop="description" />
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" />
|
||||||
|
<el-table-column label="记录时间" align="center" prop="recordTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.recordTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="版本号" align="center" prop="version" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-status-realtime:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-status-realtime:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备id" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="equipmentName">
|
||||||
|
<el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio label="1">请选择字典生成</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否运行中" prop="run">
|
||||||
|
<el-radio-group v-model="form.run">
|
||||||
|
<el-radio label="1">请选择字典生成</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否发生运行错误" prop="error">
|
||||||
|
<el-radio-group v-model="form.error">
|
||||||
|
<el-radio label="1">请选择字典生成</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<editor v-model="form.description" :min-height="192"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间" prop="recordTime">
|
||||||
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本号" prop="version">
|
||||||
|
<el-input v-model="form.version" placeholder="请输入版本号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentStatusRealtime, updateEquipmentStatusRealtime, deleteEquipmentStatusRealtime, getEquipmentStatusRealtime, getEquipmentStatusRealtimePage, exportEquipmentStatusRealtimeExcel } from "@/api/base/equipmentStatusRealtime";
|
||||||
|
import Editor from '@/components/Editor';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentStatusRealtime",
|
||||||
|
components: {
|
||||||
|
Editor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 后端用 设备状态实时列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentId: null,
|
||||||
|
equipmentName: null,
|
||||||
|
status: null,
|
||||||
|
run: null,
|
||||||
|
error: null,
|
||||||
|
description: null,
|
||||||
|
remark: null,
|
||||||
|
recordTime: [],
|
||||||
|
version: null,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentStatusRealtimePage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentId: undefined,
|
||||||
|
equipmentName: undefined,
|
||||||
|
status: undefined,
|
||||||
|
run: undefined,
|
||||||
|
error: undefined,
|
||||||
|
description: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
recordTime: undefined,
|
||||||
|
version: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加后端用 设备状态实时";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentStatusRealtime(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改后端用 设备状态实时";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentStatusRealtime(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentStatusRealtime(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除后端用 设备状态实时编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentStatusRealtime(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有后端用 设备状态实时数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentStatusRealtimeExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '后端用 设备状态实时.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
229
src/views/base/equipmentTypeFile/index.vue
Normal file
229
src/views/base/equipmentTypeFile/index.vue
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="设备类型ID" prop="equipmentTypeId">
|
||||||
|
<el-input v-model="queryParams.equipmentTypeId" placeholder="请输入设备类型ID" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="原始名称" prop="fileName">
|
||||||
|
<el-input v-model="queryParams.fileName" placeholder="请输入原始名称" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="下载地址" prop="fileUrl">
|
||||||
|
<el-input v-model="queryParams.fileUrl" placeholder="请输入下载地址" clearable @keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||||
|
v-hasPermi="['base:equipment-type-file:create']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['base:equipment-type-file:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="ID" align="center" prop="id" />
|
||||||
|
<el-table-column label="设备类型ID" align="center" prop="equipmentTypeId" />
|
||||||
|
<el-table-column label="原始名称" align="center" prop="fileName" />
|
||||||
|
<el-table-column label="下载地址" align="center" prop="fileUrl" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-type-file:update']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['base:equipment-type-file:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="设备类型ID" prop="equipmentTypeId">
|
||||||
|
<el-input v-model="form.equipmentTypeId" placeholder="请输入设备类型ID" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="原始名称" prop="fileName">
|
||||||
|
<el-input v-model="form.fileName" placeholder="请输入原始名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="下载地址" prop="fileUrl">
|
||||||
|
<el-input v-model="form.fileUrl" placeholder="请输入下载地址" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEquipmentTypeFile, updateEquipmentTypeFile, deleteEquipmentTypeFile, getEquipmentTypeFile, getEquipmentTypeFilePage, exportEquipmentTypeFileExcel } from "@/api/base/equipmentTypeFile";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EquipmentTypeFile",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 设备类型文件关联列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
equipmentTypeId: null,
|
||||||
|
fileName: null,
|
||||||
|
fileUrl: null,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
equipmentTypeId: [{ required: true, message: "设备类型ID不能为空", trigger: "blur" }],
|
||||||
|
fileName: [{ required: true, message: "原始名称不能为空", trigger: "blur" }],
|
||||||
|
fileUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentTypeFilePage(this.queryParams).then(response => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
equipmentTypeId: undefined,
|
||||||
|
fileName: undefined,
|
||||||
|
fileUrl: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加设备类型文件关联";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentTypeFile(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改设备类型文件关联";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentTypeFile(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentTypeFile(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal.confirm('是否确认删除设备类型文件关联编号为"' + id + '"的数据项?').then(function() {
|
||||||
|
return deleteEquipmentTypeFile(id);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = {...this.queryParams};
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal.confirm('是否确认导出所有设备类型文件关联数据项?').then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentTypeFileExcel(params);
|
||||||
|
}).then(response => {
|
||||||
|
this.$download.excel(response, '设备类型文件关联.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
BIN
src/views/core/base/equipment/assets/eq1.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/views/core/base/equipment/assets/eq10.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
src/views/core/base/equipment/assets/eq2.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
src/views/core/base/equipment/assets/eq3.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
src/views/core/base/equipment/assets/eq4.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/views/core/base/equipment/assets/eq5.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
src/views/core/base/equipment/assets/eq6.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/views/core/base/equipment/assets/eq7.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
src/views/core/base/equipment/assets/eq8.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/views/core/base/equipment/assets/eq9.jpg
Normal file
BIN
src/views/core/base/equipment/assets/eq9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
32
src/views/core/base/equipment/components/EquipmentAssets.vue
Normal file
32
src/views/core/base/equipment/components/EquipmentAssets.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!--
|
||||||
|
filename: EquipmentAssets.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-22 11:11:18
|
||||||
|
description: 设备资产
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="equipment-assets"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "EquipmentAssets",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.equipment-assets {
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding: 12px;
|
||||||
|
min-height: 128px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
444
src/views/core/base/equipment/components/EquipmentDrawer.vue
Normal file
444
src/views/core/base/equipment/components/EquipmentDrawer.vue
Normal file
@ -0,0 +1,444 @@
|
|||||||
|
<!--
|
||||||
|
filename: EquipmentDrawer.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-22 14:38:56
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-drawer
|
||||||
|
:visible="visible"
|
||||||
|
:show-close="false"
|
||||||
|
:wrapper-closable="false"
|
||||||
|
class="drawer"
|
||||||
|
custom-class="mes-drawer"
|
||||||
|
size="60%"
|
||||||
|
@closed="$emit('destroy')">
|
||||||
|
<SmallTitle slot="title">
|
||||||
|
{{
|
||||||
|
mode.includes('detail')
|
||||||
|
? '详情'
|
||||||
|
: mode.includes('edit')
|
||||||
|
? '编辑'
|
||||||
|
: '新增'
|
||||||
|
}}
|
||||||
|
</SmallTitle>
|
||||||
|
|
||||||
|
<div class="drawer-body flex">
|
||||||
|
<div class="drawer-body__content">
|
||||||
|
<section v-for="(section, index) in sections" :key="section.key">
|
||||||
|
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
|
||||||
|
|
||||||
|
<div class="form-part" v-if="section.key == 'base'">
|
||||||
|
<el-skeleton v-if="!showForm" animated />
|
||||||
|
<DialogForm
|
||||||
|
key="drawer-dialog-form"
|
||||||
|
v-if="showForm"
|
||||||
|
ref="form"
|
||||||
|
:dataForm="form"
|
||||||
|
:rows="formRows" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="section.key == 'attrs'" style="margin-top: 12px">
|
||||||
|
<base-table
|
||||||
|
v-loading="attrListLoading"
|
||||||
|
:table-props="section.props"
|
||||||
|
:page="section.pageNo || 1"
|
||||||
|
:limit="section.pageSize || 10"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="section.tableBtn"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drawer-body__footer">
|
||||||
|
<el-button style="margin-right: 10px" @click="handleCancel">
|
||||||
|
返回
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<span v-else>
|
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
|
<!-- sections的第二项必须是 属性列表 -->
|
||||||
|
<el-button
|
||||||
|
v-if="sections[1].allowAdd"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAddAttr">
|
||||||
|
添加属性
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 属性对话框 -->
|
||||||
|
<base-dialog
|
||||||
|
v-if="sections[1].allowAdd"
|
||||||
|
:dialogTitle="attrTitle"
|
||||||
|
:dialogVisible="attrFormVisible"
|
||||||
|
width="35%"
|
||||||
|
:append-to-body="true"
|
||||||
|
custom-class="baseDialog"
|
||||||
|
@close="closeAttrForm"
|
||||||
|
@cancel="closeAttrForm"
|
||||||
|
@confirm="submitAttrForm">
|
||||||
|
<DialogForm
|
||||||
|
v-if="attrFormVisible"
|
||||||
|
ref="attrForm"
|
||||||
|
:dataForm="attrForm"
|
||||||
|
:rows="attrRows" />
|
||||||
|
</base-dialog>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DialogForm from '@/components/DialogForm';
|
||||||
|
|
||||||
|
const SmallTitle = {
|
||||||
|
name: 'SmallTitle',
|
||||||
|
props: ['size'],
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
render: function (h) {
|
||||||
|
return h(
|
||||||
|
'span',
|
||||||
|
{
|
||||||
|
class: 'small-title',
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
lineHeight:
|
||||||
|
this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px',
|
||||||
|
fontWeight: 500,
|
||||||
|
fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
this.$slots.default
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SmallTitle, DialogForm },
|
||||||
|
props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
showForm: false,
|
||||||
|
total: 0,
|
||||||
|
form: {},
|
||||||
|
list: [],
|
||||||
|
attrTitle: '',
|
||||||
|
attrForm: {
|
||||||
|
id: null,
|
||||||
|
equipmentId: null,
|
||||||
|
name: '',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
attrFormVisible: false,
|
||||||
|
attrRows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '属性名称',
|
||||||
|
prop: 'name',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '属性值',
|
||||||
|
prop: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
attrQuery: null, // 属性列表的请求
|
||||||
|
infoQuery: null, // 基本信息的请求
|
||||||
|
attrFormSubmitting: false,
|
||||||
|
attrListLoading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formRows() {
|
||||||
|
return this.sections[0].rows.map((row) => {
|
||||||
|
return row.map((col) => {
|
||||||
|
if (col.key == 'eq-pics') {
|
||||||
|
// 重置图片的位置
|
||||||
|
return {
|
||||||
|
...col,
|
||||||
|
style: {
|
||||||
|
left: 0,
|
||||||
|
right: 'unset'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...col,
|
||||||
|
bind: {
|
||||||
|
// 详情 模式下，禁用各种输入
|
||||||
|
disabled: this.mode == 'detail',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tableBtn() {
|
||||||
|
return this.mode == 'detail' ? [] : this.sections[1].tableBtn;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
for (const section of this.sections) {
|
||||||
|
// 请求具体信息
|
||||||
|
if ('url' in section) {
|
||||||
|
const query = {
|
||||||
|
url: section.url,
|
||||||
|
method: section.method || 'get',
|
||||||
|
params: section.queryParams || null,
|
||||||
|
data: section.data || null,
|
||||||
|
};
|
||||||
|
this.$axios(query).then(({ data }) => {
|
||||||
|
if (section.key == 'base') {
|
||||||
|
this.form = data;
|
||||||
|
this.showForm = true;
|
||||||
|
this.infoQuery = query;
|
||||||
|
console.log('setting form: ', this.form, data);
|
||||||
|
} else if (section.key == 'attrs') {
|
||||||
|
this.attrQuery = query;
|
||||||
|
this.list = data.list;
|
||||||
|
this.total = data.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleTableBtnClick({ type, data }) {
|
||||||
|
switch (type) {
|
||||||
|
case 'edit':
|
||||||
|
this.handleEditAttr(data.id);
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
this.handleDeleteAttr(data.id);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun(val) {
|
||||||
|
console.log('handleEmitFun', val);
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getAttrList() {
|
||||||
|
this.attrListLoading = true;
|
||||||
|
const res = await this.$axios(this.attrQuery);
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.list = res.data.list;
|
||||||
|
this.total = res.data.total;
|
||||||
|
}
|
||||||
|
this.attrListLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存表单
|
||||||
|
handleSave() {
|
||||||
|
this.$refs['form'][0].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const isEdit = this.mode == 'edit';
|
||||||
|
await this.$axios({
|
||||||
|
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
|
||||||
|
method: isEdit ? 'put' : 'post',
|
||||||
|
data: this.form,
|
||||||
|
});
|
||||||
|
this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`);
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit('refreshDataList');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCancel() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 开启编辑
|
||||||
|
toggleEdit() {
|
||||||
|
this.mode = 'edit';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增属性
|
||||||
|
handleAddAttr() {
|
||||||
|
if (!this.dataId) return this.$message.error('请先创建设备信息');
|
||||||
|
this.attrForm = {
|
||||||
|
id: null,
|
||||||
|
equipmentId: this.dataId,
|
||||||
|
name: '',
|
||||||
|
value: '',
|
||||||
|
};
|
||||||
|
this.attrTitle = '添加设备属性';
|
||||||
|
this.attrFormVisible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 编辑属性
|
||||||
|
async handleEditAttr(attrId) {
|
||||||
|
const res = await this.$axios({
|
||||||
|
url: this.sections[1].urlDetail,
|
||||||
|
method: 'get',
|
||||||
|
params: { id: attrId },
|
||||||
|
});
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.attrForm = res.data;
|
||||||
|
this.attrTitle = '编辑设备属性';
|
||||||
|
this.attrFormVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除属性
|
||||||
|
handleDeleteAttr(attrId) {
|
||||||
|
this.$confirm('确定删除该属性?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
const res = await this.$axios({
|
||||||
|
url: this.sections[1].urlDelete,
|
||||||
|
method: 'delete',
|
||||||
|
params: { id: attrId },
|
||||||
|
});
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getAttrList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交属性表
|
||||||
|
async submitAttrForm() {
|
||||||
|
this.$refs['attrForm'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('this.attrform', this.attrForm);
|
||||||
|
const isEdit = this.attrForm.id != null;
|
||||||
|
this.attrFormSubmitting = true;
|
||||||
|
const res = await this.$axios({
|
||||||
|
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
|
||||||
|
method: isEdit ? 'put' : 'post',
|
||||||
|
data: this.attrForm,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.closeAttrForm();
|
||||||
|
this.$message({
|
||||||
|
message: `${isEdit ? '更新' : '创建'}成功`,
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getAttrList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.attrFormSubmitting = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
closeAttrForm() {
|
||||||
|
this.attrFormVisible = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClick(raw) {
|
||||||
|
if (raw.type === 'delete') {
|
||||||
|
this.$confirm(
|
||||||
|
`确定对${
|
||||||
|
raw.data.name
|
||||||
|
? '[名称=' + raw.data.name + ']'
|
||||||
|
: '[序号=' + raw.data._pageIndex + ']'
|
||||||
|
}进行删除操作?`,
|
||||||
|
'提示',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
deleteProductAttr(raw.data.id).then(({ data }) => {
|
||||||
|
this.$message({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
} else {
|
||||||
|
this.addNew(raw.data.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.drawer >>> .el-drawer {
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer >>> .el-drawer__header {
|
||||||
|
margin: 0;
|
||||||
|
padding: 32px 32px 24px;
|
||||||
|
border-bottom: 1px solid #dcdfe6;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 8px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-body__content {
|
||||||
|
flex: 1;
|
||||||
|
/* background: #eee; */
|
||||||
|
padding: 20px 30px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-body__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
111
src/views/core/base/equipment/components/EquipmentPics.vue
Normal file
111
src/views/core/base/equipment/components/EquipmentPics.vue
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<!--
|
||||||
|
filename: EquipmentPics.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-18 16:29:39
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="equipment-pics">
|
||||||
|
<div v-for="(url, idx) in images" :key="url">
|
||||||
|
<img :src="url" :alt="url" />
|
||||||
|
<figure class="big-img" :style="inlineStyle">
|
||||||
|
<img :src="url" :alt="url" />
|
||||||
|
<figcaption>{{ desc[idx] }}</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentPics',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
inlineStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
desc: [
|
||||||
|
'车间设备 - 1',
|
||||||
|
'车间设备 - 2',
|
||||||
|
'车间设备 - 3',
|
||||||
|
'车间设备 - 4',
|
||||||
|
'车间设备 - 5',
|
||||||
|
'车间设备 - 6',
|
||||||
|
'车间设备 - 7',
|
||||||
|
'车间设备 - 8',
|
||||||
|
'车间设备 - 9',
|
||||||
|
'车间设备 - 10',
|
||||||
|
'车间设备 - 11',
|
||||||
|
'车间设备 - 12',
|
||||||
|
],
|
||||||
|
images: Array(10)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.equipment-pics {
|
||||||
|
// background: #cfcfcf;
|
||||||
|
padding: 12px;
|
||||||
|
// margin: 8px;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div {
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div:not(:last-child) {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div > img {
|
||||||
|
height: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div > figure {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
// inset: 0;
|
||||||
|
// margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
// width: 640px;
|
||||||
|
// height: 480px;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div:hover > figure {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div > figure > img {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-pics > div > figure > figcaption {
|
||||||
|
height: 24px;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
539
src/views/core/base/equipment/index.vue
Normal file
539
src/views/core/base/equipment/index.vue
Normal file
@ -0,0 +1,539 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm
|
||||||
|
v-if="open"
|
||||||
|
key="index-dialog-form"
|
||||||
|
ref="form"
|
||||||
|
:dataForm="form"
|
||||||
|
:rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
|
||||||
|
<!-- 设备 详情 - 编辑 -->
|
||||||
|
<EquipmentDrawer
|
||||||
|
v-if="editVisible"
|
||||||
|
ref="drawer"
|
||||||
|
:mode="editMode"
|
||||||
|
:data-id="form.id"
|
||||||
|
:sections="[
|
||||||
|
{
|
||||||
|
name: '基本信息',
|
||||||
|
key: 'base',
|
||||||
|
rows: rows,
|
||||||
|
url: '/base/equipment/get',
|
||||||
|
urlUpdate: '/base/equipment/update',
|
||||||
|
urlCreate: '/base/equipment/create',
|
||||||
|
queryParams: { id: form.id },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '属性列表',
|
||||||
|
key: 'attrs',
|
||||||
|
props: drawerListProps,
|
||||||
|
url: '/base/equipment-attr/page',
|
||||||
|
urlCreate: '/base/equipment-attr/create',
|
||||||
|
urlUpdate: '/base/equipment-attr/update',
|
||||||
|
urlDelete: '/base/equipment-attr/delete',
|
||||||
|
urlDetail: '/base/equipment-attr/get',
|
||||||
|
queryParams: {
|
||||||
|
equipmentId: form.id,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-attr:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-attr:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
allowAdd: true,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
@refreshDataList="getList"
|
||||||
|
@cancel="editVisible = false"
|
||||||
|
@destroy="editVisible = false" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import { getAccessToken } from '@/utils/auth';
|
||||||
|
import EquipmentPics from './components/EquipmentPics';
|
||||||
|
import EquipmentAssets from './components/EquipmentAssets';
|
||||||
|
import EquipmentDrawer from './components/EquipmentDrawer';
|
||||||
|
|
||||||
|
import {
|
||||||
|
createEquipment,
|
||||||
|
updateEquipment,
|
||||||
|
deleteEquipment,
|
||||||
|
getEquipment,
|
||||||
|
getEquipmentPage,
|
||||||
|
exportEquipmentExcel,
|
||||||
|
} from '@/api/base/equipment';
|
||||||
|
import Editor from '@/components/Editor';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Equipment',
|
||||||
|
components: {
|
||||||
|
Editor,
|
||||||
|
EquipmentDrawer,
|
||||||
|
},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name', 'code'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'name', label: '设备名称', align: 'center' },
|
||||||
|
{ prop: 'code', label: '检测编码', align: 'center' },
|
||||||
|
{ prop: 'equipmentType', label: '设备类型', align: 'center' },
|
||||||
|
{ prop: 'enName', label: '英文名称', align: 'center' },
|
||||||
|
{ prop: 'abbr', label: '缩写', align: 'center' },
|
||||||
|
{
|
||||||
|
action: 'show-detail',
|
||||||
|
label: '详情',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: {
|
||||||
|
props: ['injectData'],
|
||||||
|
render: function (h) {
|
||||||
|
const _this = this;
|
||||||
|
return h(
|
||||||
|
'el-button',
|
||||||
|
{
|
||||||
|
props: { type: 'text', size: 'mini' },
|
||||||
|
on: {
|
||||||
|
click: function () {
|
||||||
|
console.log('inejctdata', _this.injectData);
|
||||||
|
_this.$emit('emitData', {
|
||||||
|
action: _this.injectData.action,
|
||||||
|
value: _this.injectData.id,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'查看详情'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '名称',
|
||||||
|
placeholder: '请输入设备名称',
|
||||||
|
param: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '编码',
|
||||||
|
placeholder: '请输入设备编码',
|
||||||
|
param: 'code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
||||||
|
btnName: '导出',
|
||||||
|
name: 'export',
|
||||||
|
color: 'warning',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备名称',
|
||||||
|
prop: 'name',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: this.editMode == 'detail', // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备编码',
|
||||||
|
prop: 'code',
|
||||||
|
url: '/base/equipment/getCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '英文名称',
|
||||||
|
prop: 'enName',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '缩写',
|
||||||
|
prop: 'abbr',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '设备类型',
|
||||||
|
prop: 'equipmentTypeId',
|
||||||
|
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// select: true,
|
||||||
|
// label: '设备分组',
|
||||||
|
// prop: 'groupId',
|
||||||
|
// url: '/base/equipment-group/page?pageNo=1&pageSize=100',
|
||||||
|
// },
|
||||||
|
{ input: true, label: '备注', prop: 'remark' },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
datetime: true,
|
||||||
|
label: '生产日期',
|
||||||
|
prop: 'productionTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
datetime: true,
|
||||||
|
label: '进厂日期',
|
||||||
|
prop: 'enterTime',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
prop: 'tvalue',
|
||||||
|
label: '设备TT值',
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入正确的数字值',
|
||||||
|
trigger: 'blur',
|
||||||
|
transform: (val) => Number(val),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '产品加工时间',
|
||||||
|
prop: 'processingTime',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入正确的数字值',
|
||||||
|
trigger: 'blur',
|
||||||
|
transform: (val) => Number(val),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '制造商',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
prop: 'manufacturer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备规格',
|
||||||
|
prop: 'spec',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
textarea: true,
|
||||||
|
label: '功能描述',
|
||||||
|
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
prop: 'description',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
upload: true,
|
||||||
|
label: '上传资料',
|
||||||
|
prop: 'uploadFiles',
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||||
|
bind: {
|
||||||
|
headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||||
|
'show-file-list': false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
diy: true,
|
||||||
|
key: 'eq-assets',
|
||||||
|
label: '设备资料',
|
||||||
|
prop: 'fileNames',
|
||||||
|
subcomponent: EquipmentAssets,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
diy: true,
|
||||||
|
key: 'eq-pics',
|
||||||
|
label: '设备图片',
|
||||||
|
prop: 'fileUrls',
|
||||||
|
subcomponent: EquipmentPics,
|
||||||
|
pictures: async () => {
|
||||||
|
// some async request
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
editVisible: false,
|
||||||
|
editMode: 'edit', // 'edit', 'detail'
|
||||||
|
// drawer 里的设备属性列表配置项
|
||||||
|
drawerListProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'name', label: '属性名称', align: 'center' },
|
||||||
|
{ prop: 'value', label: '属性值', align: 'center' },
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
code: undefined,
|
||||||
|
name: undefined,
|
||||||
|
enName: undefined,
|
||||||
|
abbr: undefined,
|
||||||
|
enterTime: undefined,
|
||||||
|
productionTime: undefined,
|
||||||
|
equipmentTypeId: undefined,
|
||||||
|
groupId: undefined,
|
||||||
|
tvalue: undefined,
|
||||||
|
processingTime: undefined,
|
||||||
|
manufacturer: undefined,
|
||||||
|
spec: undefined,
|
||||||
|
description: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipment(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipment(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipment(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipment(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
// 查看详情
|
||||||
|
viewDetail(id) {
|
||||||
|
this.reset();
|
||||||
|
this.editMode = 'detail';
|
||||||
|
this.form.id = id;
|
||||||
|
this.editVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['drawer'].init();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// overwrite basicPageMixin 里的 处理表格按钮 方法
|
||||||
|
handleTableBtnClick({ data, type }) {
|
||||||
|
console.log('[handleTableBtnClick]', data, type);
|
||||||
|
switch (type) {
|
||||||
|
case 'edit':
|
||||||
|
this.reset();
|
||||||
|
this.editMode = 'edit';
|
||||||
|
this.form.id = data.id;
|
||||||
|
this.editVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['drawer'].init();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
this.handleDelete(data);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
299
src/views/core/base/equipmentType/index.vue
Normal file
299
src/views/core/base/equipmentType/index.vue
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
|
import {
|
||||||
|
createEquipmentType,
|
||||||
|
updateEquipmentType,
|
||||||
|
deleteEquipmentType,
|
||||||
|
getEquipmentType,
|
||||||
|
getEquipmentTypePage,
|
||||||
|
exportEquipmentTypeExcel,
|
||||||
|
} from '@/api/base/equipmentType';
|
||||||
|
|
||||||
|
import { getAccessToken } from '@/utils/auth';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentType',
|
||||||
|
components: {},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-type:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-type:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '添加时间',
|
||||||
|
fixed: true,
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'name', label: '设备类型名称', align: 'center' },
|
||||||
|
{ prop: 'code', label: '检测类型编码', align: 'center' },
|
||||||
|
{ prop: 'remark', label: '备注', align: 'center' },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备类型',
|
||||||
|
placeholder: '请输入设备类型名称',
|
||||||
|
param: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: this.$auth.hasPermi('base:equipment-type:create')
|
||||||
|
? 'button'
|
||||||
|
: '',
|
||||||
|
btnName: '新增',
|
||||||
|
name: 'add',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:quality-inspection-type:export')
|
||||||
|
// ? 'button'
|
||||||
|
// : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
rows: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备类型名称',
|
||||||
|
prop: 'name',
|
||||||
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
// bind: {
|
||||||
|
// disabled: true, // some condition, like detail mode...
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: true,
|
||||||
|
label: '设备类型编码',
|
||||||
|
prop: 'code',
|
||||||
|
url: '/base/equipment-type/getCode',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
select: true,
|
||||||
|
label: '父类',
|
||||||
|
prop: 'parentId',
|
||||||
|
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
upload: true,
|
||||||
|
label: '上传资料',
|
||||||
|
prop: 'uploadFiles',
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||||
|
bind: {
|
||||||
|
headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||||
|
'show-file-list': false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[{ input: true, label: '备注', prop: 'remark' }],
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
name: '',
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// form: {
|
||||||
|
// handler: function (val, oldVal) {
|
||||||
|
// console.log('[watch:form]', val, oldVal);
|
||||||
|
// },
|
||||||
|
// deep: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentTypePage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
code: undefined,
|
||||||
|
name: undefined,
|
||||||
|
parentId: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
fileNames: [],
|
||||||
|
fileUrls: [],
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备类型';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentType(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备类型';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentType(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentType(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentType(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备类型数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentTypeExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备类型.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
filename: pieChart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-06 15:02:49
|
||||||
|
description: 饼图
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'pieChart',
|
||||||
|
components: {},
|
||||||
|
props: ['value'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
config: {
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '0%',
|
||||||
|
left: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
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() {
|
||||||
|
if (!this.chart) {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart.setOption(this.config);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.chart) this.chart.dispose();
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.pie-chart {
|
||||||
|
padding: 12px;
|
||||||
|
min-height: 320px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pie-chart::before {
|
||||||
|
content: attr(data-eqname);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
419
src/views/equipment/analysis/efficiency/index.vue
Normal file
419
src/views/equipment/analysis/efficiency/index.vue
Normal file
@ -0,0 +1,419 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 09:34:52
|
||||||
|
description: 设备效率分析
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
class="base-table__margin"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<!-- :page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize" -->
|
||||||
|
<!-- <method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<!-- <pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" /> -->
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'"
|
||||||
|
:dialogVisible="open"
|
||||||
|
:width="visualizationOpen ? '80%' : '700px'"
|
||||||
|
@closed="closed"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<div class="visualization" v-if="visualizationOpen">
|
||||||
|
<pie-chart v-for="item in list" :key="item.id" :value="item" />
|
||||||
|
</div>
|
||||||
|
<div v-if="trendOpen">
|
||||||
|
<h1>查看趋势</h1>
|
||||||
|
</div>
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import PieChart from './components/pieChart.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EfficiencyAnalysis',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
components: { PieChart },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open: false,
|
||||||
|
visualizationOpen: false,
|
||||||
|
trendOpen: false,
|
||||||
|
// 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: 'factoryName', label: '工厂', align: 'center' },
|
||||||
|
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||||
|
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||||
|
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||||
|
{
|
||||||
|
label: '有效时间',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'workTime',
|
||||||
|
label: '工作时长',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'workRate',
|
||||||
|
label: '百分比',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关机时间',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'stopTime',
|
||||||
|
label: '停机时长',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{ width: 128, prop: 'stopRate', label: '百分比', align: 'center' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '中断损失',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'downTime',
|
||||||
|
label: '故障时长',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
{ width: 128, prop: 'downRate', label: '百分比', align: 'center' },
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'timeEfficiency',
|
||||||
|
label: '时间开动率',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '速度损失',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'realProcSpeed',
|
||||||
|
label: '实际加工速度',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'designProcSpeed',
|
||||||
|
label: '理论加工速度',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'peEfficiency',
|
||||||
|
label: '速度开动率',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'oee',
|
||||||
|
label: 'OEE',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'teep',
|
||||||
|
label: 'TEEP',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// _action: 'view-trend',
|
||||||
|
// label: '趋势',
|
||||||
|
// align: 'center',
|
||||||
|
// subcomponent: {
|
||||||
|
// props: ['injectData'],
|
||||||
|
// render: function (h) {
|
||||||
|
// const _this = this;
|
||||||
|
// return h(
|
||||||
|
// 'el-button',
|
||||||
|
// {
|
||||||
|
// props: { type: 'text' },
|
||||||
|
// on: {
|
||||||
|
// click: function () {
|
||||||
|
// console.log('inejctdata', _this.injectData);
|
||||||
|
// _this.$emit('emitData', {
|
||||||
|
// action: _this.injectData._action,
|
||||||
|
// // value: _this.injectData.id,
|
||||||
|
// value: _this.injectData,
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// '查看趋势'
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
placeholder: '请选择工厂',
|
||||||
|
param: 'factoryId',
|
||||||
|
selectOptions: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
param: 'lineId',
|
||||||
|
selectOptions: [],
|
||||||
|
},
|
||||||
|
// 选项切换
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '时间类型',
|
||||||
|
param: 'dateFilterType',
|
||||||
|
defaultSelect: 0,
|
||||||
|
selectOptions: [
|
||||||
|
{ id: 0, name: '按时间段' },
|
||||||
|
{ id: 1, name: '按日期' },
|
||||||
|
],
|
||||||
|
index: 2,
|
||||||
|
extraOptions: [
|
||||||
|
{
|
||||||
|
parent: 'dateFilterType',
|
||||||
|
// 时间段选择
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
defaultTime: ['00:00:00', '00:00:00'],
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parent: 'dateFilterType',
|
||||||
|
// 日期选择
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '日期',
|
||||||
|
dateType: 'date',
|
||||||
|
placeholder: '选择日期',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd',
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '设备可视化',
|
||||||
|
name: 'visualization',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: 'OEE',
|
||||||
|
// name: 'add',
|
||||||
|
// plain: true,
|
||||||
|
// color: 'success',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: 'TEEP',
|
||||||
|
// name: 'add',
|
||||||
|
// plain: true,
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
lineId: null,
|
||||||
|
factoryId: null,
|
||||||
|
recordTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getFactory();
|
||||||
|
this.getLine();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 准备工厂数据 */
|
||||||
|
async getFactory() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/factory/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备产线数据 */
|
||||||
|
async getLine() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 覆盖 handleEmitFun 的默认实现 */
|
||||||
|
handleEmitFun({ action, value }) {
|
||||||
|
switch (action) {
|
||||||
|
case 'view-trend':
|
||||||
|
const { id } = value;
|
||||||
|
this.open = true;
|
||||||
|
this.trendOpen = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
async getList() {
|
||||||
|
this.loading = true;
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/efficiency',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
console.log('data', data);
|
||||||
|
this.list = data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
|
console.log('handleSearchBarBtnClick', btnName, payload);
|
||||||
|
if (btnName == 'visualization') {
|
||||||
|
// 可视化
|
||||||
|
this.visualizationOpen = true;
|
||||||
|
this.open = true;
|
||||||
|
}
|
||||||
|
if (btnName == 'search') {
|
||||||
|
this.queryParams.factoryId = payload.factoryId || null;
|
||||||
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
|
if (payload.recordTime != null) {
|
||||||
|
if (typeof payload.recordTime == 'string') {
|
||||||
|
if (payload.recordTime.trim() !== '') {
|
||||||
|
this.queryParams.recordTime = [
|
||||||
|
`${payload.recordTime} 00:00:00`,
|
||||||
|
`${payload.recordTime} 23:59:59`,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.queryParams.recordTime = payload.recordTime;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.queryParams.recordTime = null;
|
||||||
|
}
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
closed() {
|
||||||
|
this.visualizationOpen = false;
|
||||||
|
this.trendOpen = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
submitForm() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.visualization {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/views/equipment/analysis/exception/index.vue
Normal file
194
src/views/equipment/analysis/exception/index.vue
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 09:34:52
|
||||||
|
description: 设备异常分析
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<!-- <method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ExceptionAnalysis',
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['name', 'code'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-group:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-group:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||||
|
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||||
|
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||||
|
{
|
||||||
|
width: 188,
|
||||||
|
prop: 'mtbf',
|
||||||
|
label: '平均故障间隔时间[MTBF](h)',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 180,
|
||||||
|
prop: 'mttr',
|
||||||
|
label: '平均维修时间[MTTR](h)',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{ prop: 'workTime', label: '工作时长(h)', align: 'center' },
|
||||||
|
{ prop: 'downTime', label: '故障时长(h)', align: 'center' },
|
||||||
|
{ prop: 'downCount', label: '故障次数', align: 'center' },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '请选择月份',
|
||||||
|
placeholder: '请选择月份',
|
||||||
|
param: 'month',
|
||||||
|
selectOptions: Array(12)
|
||||||
|
.fill(0)
|
||||||
|
.map((v, i) => ({
|
||||||
|
id: i + 1,
|
||||||
|
name: `${i + 1}月`,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__index: 'line',
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
lineId: null,
|
||||||
|
factoryId: null,
|
||||||
|
recordTime: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.fillLineOptions();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fillLineOptions() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
const cfg = this.searchBarFormConfig.find(
|
||||||
|
(item) => item.__index == 'line'
|
||||||
|
);
|
||||||
|
this.$set(
|
||||||
|
cfg,
|
||||||
|
'selectOptions',
|
||||||
|
data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/efficiency',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
lineId: this.queryParams.lineId || null,
|
||||||
|
recordTime: this.queryParams.recordTime || null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'search':
|
||||||
|
if (btn.month) {
|
||||||
|
this.queryParams.recordTime = [
|
||||||
|
moment()
|
||||||
|
.month(btn.month - 1)
|
||||||
|
.format('YYYY-MM')+'-01 00:00:00',
|
||||||
|
moment()
|
||||||
|
.month(btn.month)
|
||||||
|
.format('YYYY-MM')+'-01 00:00:00',
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
this.queryParams.recordTime = null;
|
||||||
|
}
|
||||||
|
this.queryParams.lineId = btn.lineId || null;
|
||||||
|
this.handleQuery();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
// this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
filename: lineChart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 13:45:00
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="line-chart"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LineChart',
|
||||||
|
components: {},
|
||||||
|
props: ['config'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
console.log('thsi el', this.$el);
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.config);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.line-chart {
|
||||||
|
padding: 0 12px;
|
||||||
|
background: #e1e1e1;
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
343
src/views/equipment/analysis/quality/index.vue
Normal file
343
src/views/equipment/analysis/quality/index.vue
Normal file
@ -0,0 +1,343 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 09:34:52
|
||||||
|
description: 设备质量分析
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun"></base-table>
|
||||||
|
|
||||||
|
<!-- 图形分析 dialog -->
|
||||||
|
<!-- <base-dialog
|
||||||
|
dialogTitle="图形视角"
|
||||||
|
:dialogVisible="dialogVisible"
|
||||||
|
width="60%"
|
||||||
|
@close="dialogClose"
|
||||||
|
@cancel="dialogClose"
|
||||||
|
@confirm="dialogClose">
|
||||||
|
<LineChart v-if="dialogVisible" :config="lineChartConfig" />
|
||||||
|
</base-dialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LineChart from './components/lineChart.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'QualityAnalysis',
|
||||||
|
components: { LineChart },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
urls: {
|
||||||
|
page: '/analysis/equipment-analysis/quality',
|
||||||
|
},
|
||||||
|
mode: 'table', // defaults to 'table'
|
||||||
|
searchBarFormConfig: [
|
||||||
|
// 产品
|
||||||
|
{
|
||||||
|
__index: 'product',
|
||||||
|
type: 'select',
|
||||||
|
label: '产品',
|
||||||
|
placeholder: '请选择产品',
|
||||||
|
param: 'productId',
|
||||||
|
},
|
||||||
|
// 产线
|
||||||
|
{
|
||||||
|
__index: 'line',
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
// 时间段
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: '列表数据',
|
||||||
|
// name: 'tableVersion',
|
||||||
|
// color: 'text btn-table',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'separate',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: '图形分析',
|
||||||
|
// name: 'graphVersion',
|
||||||
|
// color: 'text btn-graph',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// 动态的 props
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'sectionName',
|
||||||
|
label: '工段',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'products',
|
||||||
|
label: '产品名称',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'inQuantity',
|
||||||
|
label: '进片数量',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'outQuantity',
|
||||||
|
label: '出片数量',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'nokQuantity',
|
||||||
|
label: '破损/不合格数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'passRate',
|
||||||
|
label: '合格率',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
lineChartConfig: {
|
||||||
|
grid: {
|
||||||
|
top: 88,
|
||||||
|
left: 56,
|
||||||
|
right: 56,
|
||||||
|
bottom: 56,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
padding: 5,
|
||||||
|
icon: 'roundRect',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '合格率',
|
||||||
|
nameLocation: 'end',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
align: 'right'
|
||||||
|
},
|
||||||
|
nameGap: 26
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '产线1',
|
||||||
|
data: [150, 230, 224, 218, 135],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线2',
|
||||||
|
data: [111, 224, 42, 11, 24],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线3',
|
||||||
|
data: [218, 112, 331, 44, 99],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线4',
|
||||||
|
data: [3, 221, 42, 553, 311],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
lineId: null,
|
||||||
|
productId: null,
|
||||||
|
recordTime: [],
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.fillLineOptions();
|
||||||
|
this.fillProductOptions();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fillLineOptions() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
const cfg = this.searchBarFormConfig.find(
|
||||||
|
(item) => item.__index == 'line'
|
||||||
|
);
|
||||||
|
this.$set(
|
||||||
|
cfg,
|
||||||
|
'selectOptions',
|
||||||
|
data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async fillProductOptions() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/product/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
const cfg = this.searchBarFormConfig.find(
|
||||||
|
(item) => item.__index == 'product'
|
||||||
|
);
|
||||||
|
this.$set(
|
||||||
|
cfg,
|
||||||
|
'selectOptions',
|
||||||
|
data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/quality',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
lineId: this.queryParams.lineId || null,
|
||||||
|
productId: this.queryParams.productId || null,
|
||||||
|
recordTime: this.queryParams.recordTime || null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.list = data.map((item) => ({
|
||||||
|
...item,
|
||||||
|
products: item.products.join(','),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
console.log('handleSearchBarBtnClick', btn);
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.queryParams.lineId = btn.lineId;
|
||||||
|
this.queryParams.productId = btn.productId;
|
||||||
|
this.queryParams.recordTime = btn.recordTime;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'tableVersion':
|
||||||
|
this.dialogClose();
|
||||||
|
break;
|
||||||
|
case 'graphVersion':
|
||||||
|
this.dialogShow();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun({ action, payload }) {},
|
||||||
|
|
||||||
|
dialogShow() {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
dialogClose() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.searchBar) {
|
||||||
|
.el-button.btn-table {
|
||||||
|
color: rgb(0, 130, 130);
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(0, 130, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button.btn-graph {
|
||||||
|
color: rgb(130, 0, 130);
|
||||||
|
border: 1px solid rgb(130, 0, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(130, 0, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
filename: lineChart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 13:45:00
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="line-chart"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LineChart',
|
||||||
|
components: {},
|
||||||
|
props: ['config'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
console.log('thsi el', this.$el);
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.config);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.line-chart {
|
||||||
|
padding: 0 12px;
|
||||||
|
// background: #e1e1e1;
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
330
src/views/equipment/timing-diagram/output/index.vue
Normal file
330
src/views/equipment/timing-diagram/output/index.vue
Normal file
@ -0,0 +1,330 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 09:34:52
|
||||||
|
description: 设备产量时序图
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<h1>设备产量时序图</h1>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<div class="main-area">
|
||||||
|
<div class="graphs" v-if="graphList.length">
|
||||||
|
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
|
||||||
|
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||||
|
<LineChart
|
||||||
|
:key="eq.key + '__linechart'"
|
||||||
|
:config="getRealConfig(index)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 v-else>请添加设备</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="添加设备"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="500px"
|
||||||
|
@close="open = false"
|
||||||
|
@cancel="open = false"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<el-select
|
||||||
|
v-if="open"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="queryParams.equipmentId"
|
||||||
|
placeholder="请选择一个设备">
|
||||||
|
<el-option
|
||||||
|
v-for="eq in eqList"
|
||||||
|
:key="eq.id"
|
||||||
|
:value="eq.id"
|
||||||
|
:label="eq.name"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LineChart from './components/lineChart.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SGProduction',
|
||||||
|
components: { LineChart },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工段',
|
||||||
|
placeholder: '请选择工段',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'sectionId',
|
||||||
|
},
|
||||||
|
// 时间段
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '设备对比',
|
||||||
|
name: 'compare',
|
||||||
|
color: 'warning',
|
||||||
|
plain: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
queryParams: {
|
||||||
|
lineId: null,
|
||||||
|
sectionId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
recordTime: [],
|
||||||
|
},
|
||||||
|
open: false,
|
||||||
|
eqList: [],
|
||||||
|
graphList: [],
|
||||||
|
templateConfig: {
|
||||||
|
grid: {
|
||||||
|
top: 88,
|
||||||
|
left: 56,
|
||||||
|
right: 56,
|
||||||
|
bottom: 56,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
padding: 5,
|
||||||
|
icon: 'roundRect',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: Array(24)
|
||||||
|
.fill(1)
|
||||||
|
.map((item, index) => `${index}:00`),
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '产量',
|
||||||
|
nameLocation: 'end',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
|
nameGap: 26,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '产线1',
|
||||||
|
data: Array(24)
|
||||||
|
.fill(1)
|
||||||
|
.map(() => Math.random() * 100),
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initProductline();
|
||||||
|
this.initWorksection();
|
||||||
|
this.initEquipment();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
|
switch (btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
|
this.queryParams.sectionId = payload.sectionId || null;
|
||||||
|
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||||
|
this.queryParams.recordTime = payload.recordTime || null;
|
||||||
|
this.getList();
|
||||||
|
break;
|
||||||
|
case 'compare':
|
||||||
|
this.open = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 重置查询条件 */
|
||||||
|
initQuery() {
|
||||||
|
this.queryParams.lineId = null;
|
||||||
|
this.queryParams.sectionId = null;
|
||||||
|
this.queryParams.equipmentId = null;
|
||||||
|
this.queryParams.recordTime = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 对象到数组的转换 */
|
||||||
|
objectToArray(obj) {
|
||||||
|
return Object.keys(obj).map((key) => {
|
||||||
|
obj[key].sort((a, b) => a.startTime - b.startTime);
|
||||||
|
obj[key].key = key;
|
||||||
|
return obj[key];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/quantity',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.graphList = this.objectToArray(data);
|
||||||
|
// const eq1 = [
|
||||||
|
// { totalQuantity: 20, startTime: 1693964578000 },
|
||||||
|
// { totalQuantity: 43, startTime: 1693964678000 },
|
||||||
|
// { totalQuantity: 12, startTime: 1693964778000 },
|
||||||
|
// { totalQuantity: 11, startTime: 1693964878000 },
|
||||||
|
// { totalQuantity: 98, startTime: 1693965478000 },
|
||||||
|
// { totalQuantity: 87, startTime: 1693965578000 },
|
||||||
|
// ];
|
||||||
|
// eq1.key = 'SS1';
|
||||||
|
// const eq2 = [
|
||||||
|
// { totalQuantity: 23, startTime: 1693961578000 },
|
||||||
|
// { totalQuantity: 42, startTime: 1693964578000 },
|
||||||
|
// { totalQuantity: 51, startTime: 1693965578000 },
|
||||||
|
// { totalQuantity: 18, startTime: 1693966578000 },
|
||||||
|
// { totalQuantity: 77, startTime: 1693966778000 },
|
||||||
|
// { totalQuantity: 38, startTime: 1693967578000 },
|
||||||
|
// { totalQuantity: 57, startTime: 1693969578000 },
|
||||||
|
// ];
|
||||||
|
// eq2.key = 'SS2';
|
||||||
|
// this.graphList = [eq1, eq2];
|
||||||
|
console.log('graph list', this.graphList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 获得设备产量 */
|
||||||
|
getEquipmentQuantity(equipmentArr) {
|
||||||
|
return equipmentArr.map((item) => item.totalQuantity);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 获得设备产量的时间 */
|
||||||
|
getTimeinfo(equipmentArr) {
|
||||||
|
return equipmentArr.map((item) =>
|
||||||
|
new Date(item.startTime).toLocaleTimeString()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
getRealConfig(index) {
|
||||||
|
// if (!this.graphList || this.graphList.length == 0) return;
|
||||||
|
const config = JSON.parse(JSON.stringify(this.templateConfig));
|
||||||
|
// config.legend.data = this.graphList[index].key;
|
||||||
|
config.series[0].name = this.graphList[index]?.key;
|
||||||
|
// console.log("this.graphList?.[index]", this.graphList?.[index]);
|
||||||
|
config.series[0].data = this.getEquipmentQuantity(
|
||||||
|
this.graphList?.[index] || []
|
||||||
|
);
|
||||||
|
config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备设备数据 */
|
||||||
|
async initEquipment() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/equipment/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.eqList = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备产线数据 */
|
||||||
|
async initProductline() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备工段数据 */
|
||||||
|
async initWorksection() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/workshop-section/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitForm() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/quantity',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
const newEqlist = this.objectToArray(data);
|
||||||
|
if (!newEqlist || newEqlist.length == 0) {
|
||||||
|
this.$message.error('该设备没有产量数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.graphList.push(newEqlist[0]);
|
||||||
|
}
|
||||||
|
this.open = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
449
src/views/equipment/timing-diagram/status/index.vue
Normal file
449
src/views/equipment/timing-diagram/status/index.vue
Normal file
@ -0,0 +1,449 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 09:34:52
|
||||||
|
description: 设备状态时序图
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<h1>设备状态时序图</h1>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<div class="main-area">
|
||||||
|
<div class="legend-row">
|
||||||
|
<div class="legend">
|
||||||
|
<div class="icon running"></div>
|
||||||
|
<div>运行中</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="legend">
|
||||||
|
<div class="icon waiting"></div>
|
||||||
|
<div>待机</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="icon fault"></div>
|
||||||
|
<div>故障</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="legend">
|
||||||
|
<div class="icon lack"></div>
|
||||||
|
<div>缺料</div>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<div class="icon full"></div>
|
||||||
|
<div>满料</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="icon stop"></div>
|
||||||
|
<div>计划停机</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="graphs" v-if="graphList.length">
|
||||||
|
<!-- <div class="graph">
|
||||||
|
<h2 class="graph-title">设备1</h2>
|
||||||
|
<div class="graph-item running tick" data-time="00:00"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item lack tick" data-time="03:00"></div>
|
||||||
|
<div class="graph-item full tick" data-time="04:00"></div>
|
||||||
|
<div class="graph-item waiting tick" data-time="05:00"></div>
|
||||||
|
<div class="graph-item running tick" data-time="06:00"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item fault tick" data-time="08:00"></div>
|
||||||
|
<div class="graph-item waiting tick" data-time="09:00"></div>
|
||||||
|
<div class="graph-item running tick" data-time="10:00"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item lack tick" data-time="13:00"></div>
|
||||||
|
<div class="graph-item full tick" data-time="14:00"></div>
|
||||||
|
<div class="graph-item running tick" data-time="15:00"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item fault tick" data-time="18:00"></div>
|
||||||
|
<div class="graph-item running tick" data-time="19:00"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item running"></div>
|
||||||
|
<div class="graph-item stop tick" data-time="23:00"></div>
|
||||||
|
</div> -->
|
||||||
|
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||||
|
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||||
|
<div
|
||||||
|
v-for="blc in eq"
|
||||||
|
:key="blc.startTime"
|
||||||
|
class="graph-item-fixed tick"
|
||||||
|
:class="{
|
||||||
|
running: blc.status == 0,
|
||||||
|
fault: blc.status == 2,
|
||||||
|
stop: blc.status == 1,
|
||||||
|
}"
|
||||||
|
:style="{ width: blc.duration * 2 + 'px' }"
|
||||||
|
:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="graph">
|
||||||
|
<h2 class="graph-title">设备3</h2>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
<div class="graph-item"></div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<h2 v-else>请添加设备</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="添加设备"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="500px"
|
||||||
|
@close="open = false"
|
||||||
|
@cancel="open = false"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<el-select
|
||||||
|
v-if="open"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="queryParams.equipmentId"
|
||||||
|
placeholder="请选择一个设备">
|
||||||
|
<el-option
|
||||||
|
v-for="eq in eqList"
|
||||||
|
:key="eq.id"
|
||||||
|
:value="eq.id"
|
||||||
|
:label="eq.name"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SGStatus',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工段',
|
||||||
|
placeholder: '请选择工段',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'sectionId',
|
||||||
|
},
|
||||||
|
// 时间段
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '设备对比',
|
||||||
|
name: 'compare',
|
||||||
|
color: 'warning',
|
||||||
|
plain: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
queryParams: {
|
||||||
|
lineId: null,
|
||||||
|
sectionId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
recordTime: [],
|
||||||
|
},
|
||||||
|
graphList: [],
|
||||||
|
open: false,
|
||||||
|
eqList: [],
|
||||||
|
// demo: [
|
||||||
|
// [
|
||||||
|
// {
|
||||||
|
// equipmentName: '下片机',
|
||||||
|
// duration: 30,
|
||||||
|
// relativeDuration: 0.6,
|
||||||
|
// status: 0,
|
||||||
|
// startPos: 0,
|
||||||
|
// startTime: 1691568181000,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// equipmentName: '下片机',
|
||||||
|
// duration: 20,
|
||||||
|
// relativeDuration: 0.4,
|
||||||
|
// status: 2,
|
||||||
|
// startPos: 30,
|
||||||
|
// startTime: 1691569981000
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// ],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.initProductline();
|
||||||
|
this.initWorksection();
|
||||||
|
this.initEquipment();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 重置查询条件 */
|
||||||
|
initQuery() {
|
||||||
|
this.queryParams.lineId = null;
|
||||||
|
this.queryParams.equipmentId = null;
|
||||||
|
this.queryParams.sectionId = null;
|
||||||
|
this.queryParams.recordTime = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 对象到数组的转换 */
|
||||||
|
objectToArray(obj) {
|
||||||
|
return Object.keys(obj).map((key) => {
|
||||||
|
obj[key].sort((a, b) => a.startTime - b.startTime);
|
||||||
|
obj[key].key = key;
|
||||||
|
return obj[key];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/status',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.graphList = this.objectToArray(data);
|
||||||
|
console.log('graph list', this.graphList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备设备数据 */
|
||||||
|
async initEquipment() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/equipment/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.eqList = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备产线数据 */
|
||||||
|
async initProductline() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 准备工段数据 */
|
||||||
|
async initWorksection() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/workshop-section/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
|
switch (btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
|
this.queryParams.sectionId = payload.sectionId || null;
|
||||||
|
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||||
|
this.queryParams.recordTime = payload.recordTime || null;
|
||||||
|
this.getList();
|
||||||
|
break;
|
||||||
|
case 'compare':
|
||||||
|
this.open = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitForm() {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/status',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
const newEqlist = this.objectToArray(data);
|
||||||
|
if (!newEqlist || newEqlist.length == 0) {
|
||||||
|
this.$message.error('该设备没有状态数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.graphList.push(newEqlist[0]);
|
||||||
|
}
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.graph {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 12px 12px 28px 12px;
|
||||||
|
margin: 64px 0;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-title {
|
||||||
|
position: absolute;
|
||||||
|
top: -64px;
|
||||||
|
left: -1px;
|
||||||
|
padding: 8px 18px;
|
||||||
|
background: #ccc;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-item,
|
||||||
|
.graph-item-fixed {
|
||||||
|
height: 88px;
|
||||||
|
// width: 24px;
|
||||||
|
flex: 1;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-item-fixed {
|
||||||
|
flex: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-item::before,
|
||||||
|
.graph-item-fixed::before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -16px;
|
||||||
|
left: 0;
|
||||||
|
content: attr(data-time);
|
||||||
|
// font-size - js
|
||||||
|
// rotate - js
|
||||||
|
// color - js, default:
|
||||||
|
color: #777;
|
||||||
|
transform-origin: left top;
|
||||||
|
transform: rotate(12deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-item-fixed::after,
|
||||||
|
.graph-item::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -3px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-item.tick::after,
|
||||||
|
.graph-item-fixed.tick::after {
|
||||||
|
width: 1px;
|
||||||
|
height: 6px;
|
||||||
|
border-left: 1px solid #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.running {
|
||||||
|
background-color: #84f04e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waiting {
|
||||||
|
background-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fault {
|
||||||
|
background-color: #ea5b5b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full {
|
||||||
|
background-color: #e6a23c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lack {
|
||||||
|
background-color: #a69c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stop {
|
||||||
|
background-color: #000c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-row {
|
||||||
|
margin: 12px 0;
|
||||||
|
display: flex;
|
||||||
|
> .legend:not(:last-child) {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
285
src/views/monitoring/equipmentAlarmLog/index.vue
Normal file
285
src/views/monitoring/equipmentAlarmLog/index.vue
Normal file
@ -0,0 +1,285 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<!-- <base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="500px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentAlarmLog,
|
||||||
|
updateEquipmentAlarmLog,
|
||||||
|
deleteEquipmentAlarmLog,
|
||||||
|
getEquipmentAlarmLog,
|
||||||
|
getEquipmentAlarmLogPage,
|
||||||
|
exportEquipmentAlarmLogExcel,
|
||||||
|
} from '@/api/monitoring/equipmentAlarmLog';
|
||||||
|
import Editor from '@/components/Editor';
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import { getAccessToken } from '@/utils/auth';
|
||||||
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentAlarmLog',
|
||||||
|
components: {
|
||||||
|
Editor,
|
||||||
|
},
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['checkTime'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-alarm-log:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-alarm-log:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{ width: 128, prop: 'productionLine', label: '产线', align: 'center' },
|
||||||
|
{ width: 128, prop: 'workshopSection', label: '工段', align: 'center' },
|
||||||
|
{ width: 128, prop: 'equipment', label: '设备名称', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: 'alarmGrade',
|
||||||
|
label: '报警级别',
|
||||||
|
align: 'center',
|
||||||
|
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '报警时间',
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{ prop: 'alarmContent', label: '报警内容', align: 'center' },
|
||||||
|
// {
|
||||||
|
// _action: 'equipment-group-show-alert',
|
||||||
|
// label: '报警',
|
||||||
|
// align: 'center',
|
||||||
|
// subcomponent: {
|
||||||
|
// props: ['injectData'],
|
||||||
|
// render: function (h) {
|
||||||
|
// const _this = this;
|
||||||
|
// return h(
|
||||||
|
// 'el-button',
|
||||||
|
// {
|
||||||
|
// props: { type: 'text', size: 'mini' },
|
||||||
|
// on: {
|
||||||
|
// click: function () {
|
||||||
|
// console.log('inejctdata', _this.injectData);
|
||||||
|
// _this.$emit('emitData', {
|
||||||
|
// action: _this.injectData._action,
|
||||||
|
// // value: _this.injectData.id,
|
||||||
|
// value: _this.injectData,
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// '查看报警'
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'createTime',
|
||||||
|
// width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
// 仅查询一种情况
|
||||||
|
this.queryParams.createTime = btn.createTime;
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentAlarmLogPage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
alarmId: undefined,
|
||||||
|
alarmContent: undefined,
|
||||||
|
alarmValue: undefined,
|
||||||
|
alarmEquipmentId: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备报警日志';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentAlarmLog(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备报警日志';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentAlarmLog(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentAlarmLog(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备报警日志编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentAlarmLog(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备报警日志数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentAlarmLogExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备报警日志.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
326
src/views/monitoring/equipmentAlarmRealtime/index.vue
Normal file
326
src/views/monitoring/equipmentAlarmRealtime/index.vue
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryForm"
|
||||||
|
size="small"
|
||||||
|
:inline="true"
|
||||||
|
v-show="showSearch"
|
||||||
|
label-width="68px">
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.createTime"
|
||||||
|
style="width: 240px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="['00:00:00', '23:59:59']" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['monitoring:equipment-alarm-realtime:create']">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
:loading="exportLoading"
|
||||||
|
v-hasPermi="['monitoring:equipment-alarm-realtime:export']">
|
||||||
|
导出
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
@queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="id" align="center" prop="id" />
|
||||||
|
<el-table-column
|
||||||
|
label="报警信息ID，关联base_equipment_group_alarm表"
|
||||||
|
align="center"
|
||||||
|
prop="alarmId" />
|
||||||
|
<el-table-column
|
||||||
|
label="字符型报警编码"
|
||||||
|
align="center"
|
||||||
|
prop="alarmContent" />
|
||||||
|
<el-table-column label="报警详细描述" align="center" prop="description" />
|
||||||
|
<el-table-column
|
||||||
|
label="报警设备id 关联equipment表"
|
||||||
|
align="center"
|
||||||
|
prop="alarmEquipmentId" />
|
||||||
|
<el-table-column label="实时报警值" align="center" prop="alarmValue" />
|
||||||
|
<el-table-column
|
||||||
|
label="状态，0 正常 1 报警中"
|
||||||
|
align="center"
|
||||||
|
prop="alarmStatus" />
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
width="180">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
align="center"
|
||||||
|
class-name="small-padding fixed-width">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['monitoring:equipment-alarm-realtime:update']">
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['monitoring:equipment-alarm-realtime:delete']">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<el-dialog
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="open"
|
||||||
|
width="500px"
|
||||||
|
v-dialogDrag
|
||||||
|
append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item
|
||||||
|
label="报警信息ID，关联base_equipment_group_alarm表"
|
||||||
|
prop="alarmId">
|
||||||
|
<el-input
|
||||||
|
v-model="form.alarmId"
|
||||||
|
placeholder="请输入报警信息ID，关联base_equipment_group_alarm表" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="字符型报警编码">
|
||||||
|
<editor v-model="form.alarmContent" :min-height="192" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="报警详细描述">
|
||||||
|
<editor v-model="form.description" :min-height="192" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="报警设备id 关联equipment表"
|
||||||
|
prop="alarmEquipmentId">
|
||||||
|
<el-input
|
||||||
|
v-model="form.alarmEquipmentId"
|
||||||
|
placeholder="请输入报警设备id 关联equipment表" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="实时报警值" prop="alarmValue">
|
||||||
|
<el-input v-model="form.alarmValue" placeholder="请输入实时报警值" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态，0 正常 1 报警中" prop="alarmStatus">
|
||||||
|
<el-radio-group v-model="form.alarmStatus">
|
||||||
|
<el-radio label="1">请选择字典生成</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
createEquipmentAlarmRealtime,
|
||||||
|
updateEquipmentAlarmRealtime,
|
||||||
|
deleteEquipmentAlarmRealtime,
|
||||||
|
getEquipmentAlarmRealtime,
|
||||||
|
getEquipmentAlarmRealtimePage,
|
||||||
|
exportEquipmentAlarmRealtimeExcel,
|
||||||
|
} from '@/api/monitoring/equipmentAlarmRealtime';
|
||||||
|
import Editor from '@/components/Editor';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentAlarmRealtime',
|
||||||
|
components: {
|
||||||
|
Editor,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 导出遮罩层
|
||||||
|
exportLoading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 设备报警实时信息列表
|
||||||
|
list: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: '',
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 执行查询
|
||||||
|
getEquipmentAlarmRealtimePage(this.queryParams).then((response) => {
|
||||||
|
this.list = response.data.list;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
/** 表单重置 */
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: undefined,
|
||||||
|
alarmId: undefined,
|
||||||
|
alarmContent: undefined,
|
||||||
|
description: undefined,
|
||||||
|
alarmEquipmentId: undefined,
|
||||||
|
alarmValue: undefined,
|
||||||
|
alarmStatus: undefined,
|
||||||
|
};
|
||||||
|
this.resetForm('form');
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNo = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm');
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = '添加设备报警实时信息';
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id;
|
||||||
|
getEquipmentAlarmRealtime(id).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改设备报警实时信息';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateEquipmentAlarmRealtime(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
createEquipmentAlarmRealtime(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功');
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const id = row.id;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除设备报警实时信息编号为"' + id + '"的数据项?')
|
||||||
|
.then(function () {
|
||||||
|
return deleteEquipmentAlarmRealtime(id);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess('删除成功');
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
let params = { ...this.queryParams };
|
||||||
|
params.pageNo = undefined;
|
||||||
|
params.pageSize = undefined;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认导出所有设备报警实时信息数据项?')
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
return exportEquipmentAlarmRealtimeExcel(params);
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
this.$download.excel(response, '设备报警实时信息.xls');
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
307
src/views/monitoring/equipmentFullParams/index.vue
Normal file
307
src/views/monitoring/equipmentFullParams/index.vue
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-31 09:14:19
|
||||||
|
description: 设备全参数查询
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container full-param-page">
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- <base-table
|
||||||
|
:table-props="[
|
||||||
|
{ type: 'index', label: '序号' },
|
||||||
|
{ prop: 'name', label: '设备名称', align: 'center' },
|
||||||
|
{ prop: 'code', label: '设备代码', align: 'center' },
|
||||||
|
{ prop: 'time', label: '时间', align: 'center' },
|
||||||
|
]"
|
||||||
|
:table-data="[
|
||||||
|
{ index: 1, name: '1', code: 'c1', time: '2021-08-31 09:14:19' },
|
||||||
|
{ index: 2, name: '2', code: 'c2', time: '2021-08-31 09:14:19' },
|
||||||
|
{ index: 3, name: '3', code: 'c3', time: '2021-08-31 09:14:19' },
|
||||||
|
{ index: 4, name: '4', code: 'c4', time: '2021-08-31 09:14:19' },
|
||||||
|
{ index: 5, name: '5', code: 'c5', time: '2021-08-31 09:14:19' },
|
||||||
|
]"
|
||||||
|
:span-method="
|
||||||
|
({ rowIndex, columnIndex }) => {
|
||||||
|
if (rowIndex == 1 && columnIndex == 0) {
|
||||||
|
return [1, 3];
|
||||||
|
}
|
||||||
|
return [1, 1];
|
||||||
|
}
|
||||||
|
"
|
||||||
|
@emitFun="(val) => handleEmitFun(table, val)"></base-table> -->
|
||||||
|
|
||||||
|
<div class="tables">
|
||||||
|
<div class="custom-table" v-for="table in tableList" :key="table.key">
|
||||||
|
<!-- {{ JSON.stringify(spanMethod) }} -->
|
||||||
|
<base-table
|
||||||
|
:key="table.key + '__basetable'"
|
||||||
|
:table-props="table.tableProps"
|
||||||
|
:table-data="table.dataManager?.dataList ?? []"
|
||||||
|
:span-method="spanMethod"
|
||||||
|
@emitFun="(val) => handleEmitFun(table, val)"></base-table>
|
||||||
|
<pagination
|
||||||
|
:key="table.key + '__pagination'"
|
||||||
|
v-show="table.total > 0"
|
||||||
|
:total="table.total"
|
||||||
|
:page.sync="table.pageNo"
|
||||||
|
:limit.sync="table.pageSize"
|
||||||
|
:page-size="table.pageSize"
|
||||||
|
:page-sizes="[1, 3, 5, 10, 20]"
|
||||||
|
@pagination="
|
||||||
|
({ page, limit, current }) =>
|
||||||
|
getListFor(table, { page, limit, current })
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
<!-- v-show="table.dataManager?.total > 0"
|
||||||
|
:total="table.dataManager?.total || 0" -->
|
||||||
|
<!-- @size-change="($event) => handleSizeChange(table, $event)" -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LocalDataManager from './utils/local-data-manager';
|
||||||
|
import response from './response';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentFullParams',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
const now = new Date();
|
||||||
|
const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||||
|
const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
|
||||||
|
const aWeekAgo = today - 3600 * 1000 * 24 * 7;
|
||||||
|
return {
|
||||||
|
tableList: [],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备名称',
|
||||||
|
placeholder: '请输入设备名称',
|
||||||
|
param: 'name',
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label: '设备编码',
|
||||||
|
placeholder: '请输入设备编码',
|
||||||
|
param: 'code',
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350,
|
||||||
|
// defaultSelect: [new Date(aWeekAgo), new Date(today)],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
queryParams: {
|
||||||
|
id: null,
|
||||||
|
time: [new Date(aWeekAgo), new Date(today)],
|
||||||
|
},
|
||||||
|
tableList: [
|
||||||
|
{
|
||||||
|
key: 'base-table__key__1',
|
||||||
|
tableProps: [],
|
||||||
|
list: [],
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 3,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
id() {
|
||||||
|
return this.$route.params.equipmentId;
|
||||||
|
},
|
||||||
|
code() {
|
||||||
|
return this.$route.params.equipmentCode;
|
||||||
|
},
|
||||||
|
name() {
|
||||||
|
return this.$route.params.equipmentName;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.id) this.$set(this.queryParams, 'id', this.id);
|
||||||
|
if (this.code)
|
||||||
|
this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
|
||||||
|
if (this.name)
|
||||||
|
this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
|
||||||
|
|
||||||
|
this.handleResponse();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
buildProps(table) {
|
||||||
|
console.log('building props', table);
|
||||||
|
// 通过 otherList 来构建 props
|
||||||
|
const { otherList } = table;
|
||||||
|
const props = [
|
||||||
|
{
|
||||||
|
// type: 'index',
|
||||||
|
width: 48,
|
||||||
|
prop: 'index',
|
||||||
|
label: '序号',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 160,
|
||||||
|
prop: 'time',
|
||||||
|
label: '时间',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 200,
|
||||||
|
prop: 'plcCode',
|
||||||
|
label: 'PLC编码',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const firstLineData = {
|
||||||
|
index: '参考值： [最小]-[最大][/标准]',
|
||||||
|
time: null, // 此处必须是空白
|
||||||
|
plcCode: null, // 此处必须是空白
|
||||||
|
};
|
||||||
|
otherList.forEach((item) => {
|
||||||
|
props.push({
|
||||||
|
label: item.name,
|
||||||
|
align: 'center',
|
||||||
|
prop: item.name,
|
||||||
|
width: 128,
|
||||||
|
});
|
||||||
|
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
||||||
|
item.maxValue ?? ''
|
||||||
|
}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
|
||||||
|
});
|
||||||
|
return { props, firstLineData };
|
||||||
|
},
|
||||||
|
|
||||||
|
handleResponse() {
|
||||||
|
const { code, data } = response;
|
||||||
|
if (code == 0) {
|
||||||
|
console.log('response', code, data);
|
||||||
|
|
||||||
|
// 处理一个表格
|
||||||
|
data.forEach((table, index) => {
|
||||||
|
console.log('handle index:', index, table);
|
||||||
|
const { props: tableProps, firstLineData } = this.buildProps(table);
|
||||||
|
this.$set(this.tableList, index, {
|
||||||
|
key: 'base-table__key__' + index,
|
||||||
|
tableProps,
|
||||||
|
list: [firstLineData],
|
||||||
|
dataManager: null,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理某一表格的各个行
|
||||||
|
const { data } = table;
|
||||||
|
data.forEach((row, idx) => {
|
||||||
|
const listItem = {
|
||||||
|
index: idx + 1,
|
||||||
|
time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
plcCode: row.plcCode,
|
||||||
|
};
|
||||||
|
row.data.forEach((column) => {
|
||||||
|
listItem[column.dynamicName] = column.dynamicValue;
|
||||||
|
});
|
||||||
|
this.tableList[index].list.push(listItem);
|
||||||
|
this.tableList[index].total++;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理分页
|
||||||
|
const { pageNo, pageSize, list } = this.tableList[index];
|
||||||
|
this.tableList[index].dataManager = new LocalDataManager(
|
||||||
|
list,
|
||||||
|
pageNo,
|
||||||
|
pageSize
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
if (rowIndex == 0 && columnIndex == 0) {
|
||||||
|
return [1, 3];
|
||||||
|
} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
|
||||||
|
return [0, 0];
|
||||||
|
}
|
||||||
|
return [1, 1];
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 查询 */
|
||||||
|
async handleQuery() {
|
||||||
|
const { data } = this.$axios({
|
||||||
|
url: '/monitoring/equipment-monitor/runLog',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
console.log('data', data);
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||||
|
if (timeVal && timeVal.length > 0) {
|
||||||
|
this.queryParams.time = timeVal;
|
||||||
|
} else {
|
||||||
|
this.queryParams.time = [];
|
||||||
|
}
|
||||||
|
await this.handleQuery();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun(table, val) {
|
||||||
|
console.log('table val', table, val);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 为某个 table 获取 list 数据 */
|
||||||
|
getListFor(table, { page, limit, current }) {
|
||||||
|
console.log('get list for', table, { page, limit, current });
|
||||||
|
table.dataManager.pageNo = page ?? current;
|
||||||
|
table.dataManager.pageSize = limit;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.full-param-page {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables >>> .baseTable {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
247
src/views/monitoring/equipmentFullParams/response.js
Normal file
247
src/views/monitoring/equipmentFullParams/response.js
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
export default {
|
||||||
|
"code": 0,
|
||||||
|
"data": [
|
||||||
|
// 一个表格
|
||||||
|
{
|
||||||
|
"data": [
|
||||||
|
// 一行参数
|
||||||
|
{
|
||||||
|
"time": "1694056192800",
|
||||||
|
"plcCode": "PLC_CODE_1",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-4', "parentId": 0, "dynamicName": "P1V4", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-5', "parentId": 0, "dynamicName": "P1V5", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-6', "parentId": 0, "dynamicName": "P1V6", "dynamicValue": 15 },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"otherList": [
|
||||||
|
// 一个参数的属性
|
||||||
|
{
|
||||||
|
"id": "attr-1",
|
||||||
|
"plcParamName": "P1V1",
|
||||||
|
"name": "P1V1", // 和 dynamicName 对应
|
||||||
|
"minValue": 1,
|
||||||
|
"maxValue": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-2",
|
||||||
|
"plcParamName": "P1V2",
|
||||||
|
"name": "P1V2",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 90,
|
||||||
|
"defaultValue": 24
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-3",
|
||||||
|
"plcParamName": "P1V3",
|
||||||
|
"name": "P1V3",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 98
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-4",
|
||||||
|
"plcParamName": "P1V4",
|
||||||
|
"name": "P1V4",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-5",
|
||||||
|
"plcParamName": "P1V5",
|
||||||
|
"name": "P1V5",
|
||||||
|
"minValue": null,
|
||||||
|
"maxValue": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-6",
|
||||||
|
"plcParamName": "P1V6",
|
||||||
|
"name": "P1V6",
|
||||||
|
"minValue": null,
|
||||||
|
"maxValue": null,
|
||||||
|
"defaultValue": false
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"nameData": [],
|
||||||
|
"otherMap": []
|
||||||
|
},
|
||||||
|
// 一个表格
|
||||||
|
{
|
||||||
|
"data": [
|
||||||
|
// 一行参数
|
||||||
|
{
|
||||||
|
"time": "1694056100800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694056102800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"otherList": [
|
||||||
|
// 一个参数的属性
|
||||||
|
{
|
||||||
|
"id": "attr-1",
|
||||||
|
"plcParamName": "P1V1",
|
||||||
|
"name": "P1V1", // 和 dynamicName 对应
|
||||||
|
"minValue": 1,
|
||||||
|
"maxValue": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-2",
|
||||||
|
"plcParamName": "P1V2",
|
||||||
|
"name": "P1V2",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-3",
|
||||||
|
"plcParamName": "P1V3",
|
||||||
|
"name": "P1V3",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 98
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"nameData": [],
|
||||||
|
"otherMap": []
|
||||||
|
},
|
||||||
|
// 一个表格
|
||||||
|
{
|
||||||
|
"data": [
|
||||||
|
// 一行参数
|
||||||
|
{
|
||||||
|
"time": "1694056100800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694056102800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694056109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694066109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694067109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694068109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694069109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": "1694071109800",
|
||||||
|
"plcCode": "PLC_CODE_2",
|
||||||
|
"data": [
|
||||||
|
// 一个参数值
|
||||||
|
{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
|
||||||
|
{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"otherList": [
|
||||||
|
// 一个参数的属性
|
||||||
|
{
|
||||||
|
"id": "attr-1",
|
||||||
|
"plcParamName": "P1V1",
|
||||||
|
"name": "P1V1", // 和 dynamicName 对应
|
||||||
|
"minValue": 1,
|
||||||
|
"maxValue": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-2",
|
||||||
|
"plcParamName": "P1V2",
|
||||||
|
"name": "P1V2",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "attr-3",
|
||||||
|
"plcParamName": "P1V3",
|
||||||
|
"name": "P1V3",
|
||||||
|
"minValue": 10,
|
||||||
|
"maxValue": 98
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"nameData": [],
|
||||||
|
"otherMap": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
export default class LocalDataManager {
|
||||||
|
constructor(dataList, pageNo, pageSize) {
|
||||||
|
this._dataListStore = dataList;
|
||||||
|
this._pageNo = pageNo;
|
||||||
|
this._pageSize = pageSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
set pageNo(pageNo) {
|
||||||
|
console.log('set pageNo', pageNo);
|
||||||
|
this._pageNo = pageNo;
|
||||||
|
}
|
||||||
|
|
||||||
|
set pageSize(pageSize) {
|
||||||
|
console.log('set pageSize', pageSize);
|
||||||
|
this._pageSize = pageSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
get dataList() {
|
||||||
|
const firstLine = this._dataListStore[0];
|
||||||
|
const realDataList = this._dataListStore.slice(1);
|
||||||
|
return [
|
||||||
|
firstLine,
|
||||||
|
...realDataList.slice((this._pageNo - 1) * this._pageSize, this._pageNo * this._pageSize)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get total() {
|
||||||
|
return this._dataListStore.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteData(id) {
|
||||||
|
const idx = this._dataListStore.findIndex(item => item.id == id);
|
||||||
|
this._dataListStore.splice(idx, 1);
|
||||||
|
// send http request
|
||||||
|
}
|
||||||
|
}
|
||||||
126
src/views/monitoring/equipmentProcessAmount/graph.vue
Normal file
126
src/views/monitoring/equipmentProcessAmount/graph.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<!--
|
||||||
|
filename: graph.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-31 14:00:02
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<div class="chart" ref="chart"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LineChartInEquipmentProcessAmount',
|
||||||
|
components: {},
|
||||||
|
props: ['equipmentList'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
option: {
|
||||||
|
grid: {
|
||||||
|
top: 64,
|
||||||
|
left: 56,
|
||||||
|
right: 24,
|
||||||
|
bottom: 56,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
text: '各设备加工数量',
|
||||||
|
textStyle: {
|
||||||
|
color: '#232323',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
left: 'center',
|
||||||
|
top: 24,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
data: [],
|
||||||
|
name: '设备名',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
data: [],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 50,
|
||||||
|
formatter: '{c}',
|
||||||
|
},
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log('this.eq list', this.equipmentList);
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart.setOption(this.updateConfig(this.option));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.chart.dispose();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateConfig(config) {
|
||||||
|
let nameData = [];
|
||||||
|
let valueData = [];
|
||||||
|
this.equipmentList.map((eq) => {
|
||||||
|
nameData.push(eq.equipmentName);
|
||||||
|
valueData.push(eq.totalQuantity);
|
||||||
|
});
|
||||||
|
config.yAxis.data = nameData;
|
||||||
|
config.series[0].data = valueData;
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.chart-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
// background: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
341
src/views/monitoring/equipmentProcessAmount/index.vue
Normal file
341
src/views/monitoring/equipmentProcessAmount/index.vue
Normal file
@ -0,0 +1,341 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-30 14:02:49
|
||||||
|
description: 设备加工数量
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="flex: 1; display: flex; background: #f2f4f9">
|
||||||
|
<div
|
||||||
|
class="app-container"
|
||||||
|
style="margin-right: 12px; border-radius: 8px; background: #fff">
|
||||||
|
<!-- side bar -->
|
||||||
|
<div
|
||||||
|
class="side-bar__left"
|
||||||
|
style="width: 240px; padding: 12px; height: 100%">
|
||||||
|
<el-tree
|
||||||
|
:data="sidebarContent"
|
||||||
|
:props="treeProps"
|
||||||
|
@node-click="handleSidebarItemClick" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="app-container equipment-process-amount"
|
||||||
|
style="flex: 1; border-radius: 8px; background: #fff">
|
||||||
|
<!-- main area -->
|
||||||
|
<div class="main-content" style="display: flex; flex-direction: column">
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<transition appear name="vvv" mode="out-in">
|
||||||
|
<base-table
|
||||||
|
v-if="mode == 'table'"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="1"
|
||||||
|
:limit="999"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<!-- <method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<div class="graph" style="height: 56vh;" v-else>
|
||||||
|
<!-- graph -->
|
||||||
|
<Graph v-if="list.length" :equipment-list="list" />
|
||||||
|
<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Graph from './graph.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentProcessAmount',
|
||||||
|
components: { Graph },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sidebarContent: [
|
||||||
|
// {
|
||||||
|
// id: 'fc1',
|
||||||
|
// name: '工厂',
|
||||||
|
// lines: [
|
||||||
|
// {
|
||||||
|
// name: '产线1',
|
||||||
|
// id: 'pl1',
|
||||||
|
// sections: [
|
||||||
|
// {
|
||||||
|
// name: '工段1',
|
||||||
|
// id: 'pl1ws1',
|
||||||
|
// equipments: [
|
||||||
|
// {
|
||||||
|
// name: '设备1',
|
||||||
|
// id: 'pl1ws1--eq1',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备2',
|
||||||
|
// id: 'pl1ws1--eq2',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备3',
|
||||||
|
// id: 'pl1ws1--eq3',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '工段2',
|
||||||
|
// id: 'pl1ws2',
|
||||||
|
// equipments: [
|
||||||
|
// {
|
||||||
|
// name: '设备1',
|
||||||
|
// id: 'pl2ws1--eq1',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备2',
|
||||||
|
// id: 'pl2ws1--eq2',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备3',
|
||||||
|
// id: 'pl2ws1--eq3',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '工段3',
|
||||||
|
// id: 'pl1ws3',
|
||||||
|
// equipments: [
|
||||||
|
// {
|
||||||
|
// name: '设备1',
|
||||||
|
// id: 'pl3ws1--eq1',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备2',
|
||||||
|
// id: 'pl3ws1--eq2',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '设备3',
|
||||||
|
// id: 'pl3ws1--eq3',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '产线2',
|
||||||
|
// id: 'pl2',
|
||||||
|
// sections: [
|
||||||
|
// {
|
||||||
|
// name: '工段1',
|
||||||
|
// id: 'pl2ws1',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '工段2',
|
||||||
|
// id: 'pl2ws2',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '工段3',
|
||||||
|
// id: 'pl2ws3',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '表格',
|
||||||
|
name: 'table',
|
||||||
|
plain: true,
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '图表',
|
||||||
|
name: 'graph',
|
||||||
|
plain: true,
|
||||||
|
color: 'warning',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
tableProps: [
|
||||||
|
{ prop: 'lineName', label: '产线', align: 'center' },
|
||||||
|
{ prop: 'sectionName', label: '工段', align: 'center' },
|
||||||
|
{ prop: 'externalCode', label: '设备编码', align: 'center' },
|
||||||
|
{ prop: 'equipmentName', label: '设备名称', align: 'center' },
|
||||||
|
{ prop: 'totalQuantity', label: '加工数量', align: 'center' },
|
||||||
|
],
|
||||||
|
mode: 'table', // table | graph
|
||||||
|
queryParams: {
|
||||||
|
// pageNo: 1,
|
||||||
|
// pageSize: 999,
|
||||||
|
recordTime: [],
|
||||||
|
equipmentId: null,
|
||||||
|
lineId: null,
|
||||||
|
sectionId: null,
|
||||||
|
productId: null,
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
treeProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getTree();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** build side bar tree */
|
||||||
|
buildTree(data) {
|
||||||
|
data.forEach((factory) => {
|
||||||
|
this.$set(factory, 'label', factory.name);
|
||||||
|
this.$set(factory, 'type', '工厂');
|
||||||
|
delete factory.name;
|
||||||
|
factory.children = factory.lines;
|
||||||
|
delete factory.lines;
|
||||||
|
factory.children?.forEach((line) => {
|
||||||
|
this.$set(line, 'label', line.name);
|
||||||
|
this.$set(line, 'type', '产线');
|
||||||
|
delete line.name;
|
||||||
|
line.children = line.sections;
|
||||||
|
delete line.sections;
|
||||||
|
line.children?.forEach((ws) => {
|
||||||
|
this.$set(ws, 'label', ws.name);
|
||||||
|
this.$set(ws, 'type', '工段');
|
||||||
|
delete ws.name;
|
||||||
|
ws.children = ws.equipments;
|
||||||
|
delete ws.equipments;
|
||||||
|
ws.children?.forEach((eq) => {
|
||||||
|
this.$set(eq, 'label', eq.name);
|
||||||
|
this.$set(eq, 'type', '设备');
|
||||||
|
delete eq.name;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTree() {
|
||||||
|
const { data } = await this.$axios('/base/factory/getTree');
|
||||||
|
this.sidebarContent = data;
|
||||||
|
this.buildTree(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSidebarItemClick({ label, id, type }) {
|
||||||
|
console.log('lable clicked!', label, id, type);
|
||||||
|
switch (type) {
|
||||||
|
case '设备':
|
||||||
|
this.queryParams.equipmentId = id;
|
||||||
|
break;
|
||||||
|
case '工段':
|
||||||
|
this.queryParams.equipmentId = null;
|
||||||
|
this.queryParams.sectionId = id;
|
||||||
|
break;
|
||||||
|
case '产线':
|
||||||
|
this.queryParams.equipmentId = null;
|
||||||
|
this.queryParams.sectionId = null;
|
||||||
|
this.queryParams.lineId = id;
|
||||||
|
break;
|
||||||
|
case '工厂':
|
||||||
|
this.queryParams.equipmentId = null;
|
||||||
|
this.queryParams.sectionId = null;
|
||||||
|
this.queryParams.lineId = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun() {},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'table':
|
||||||
|
this.mode = 'table';
|
||||||
|
break;
|
||||||
|
case 'graph':
|
||||||
|
this.mode = 'graph';
|
||||||
|
break;
|
||||||
|
case 'search':
|
||||||
|
if (btn.timeVal != null && btn.timeVal.length > 0)
|
||||||
|
this.queryParams.recordTime = btn.timeVal;
|
||||||
|
else this.queryParams.recordTime = null;
|
||||||
|
this.handleQuery();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleQuery() {
|
||||||
|
console.log('queryParams', this.queryParams);
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/monitoring/equipment-monitor/quantity-det-list',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
this.list = data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.side-bar__left >>> .is-current {
|
||||||
|
color: #111;
|
||||||
|
background: #f2f4f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vvv-enter,
|
||||||
|
.vvv-leave-to {
|
||||||
|
/* transform: translateY(24px) scaleY(0); */
|
||||||
|
transform: translateY(24px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vvv-enter-active,
|
||||||
|
.vvv-leave-active {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vvv-enter-to,
|
||||||
|
.vvv-leave {
|
||||||
|
/* transform: translateY(0) scaleY(1); */
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
181
src/views/monitoring/equipmentRecentHours/index.vue
Normal file
181
src/views/monitoring/equipmentRecentHours/index.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 14:44:58
|
||||||
|
description: 设备24小时生产记录
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
|
||||||
|
ref="search-bar" />
|
||||||
|
<el-skeleton v-if="initing" :rows="6" animated />
|
||||||
|
<base-table
|
||||||
|
v-else
|
||||||
|
:span-method="mergeColumnHandler"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun"></base-table>
|
||||||
|
<!-- :page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize" -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'QualityRecentHours',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
initing: false,
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
tableProps: [],
|
||||||
|
spanInfo: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
||||||
|
buildProps(item) {
|
||||||
|
const {
|
||||||
|
data: [{ hourData }],
|
||||||
|
} = item;
|
||||||
|
|
||||||
|
const props = [
|
||||||
|
{ prop: 'productLine', label: '产线', align: 'center' },
|
||||||
|
{ prop: 'specification', label: '规格', align: 'center' },
|
||||||
|
{ prop: 'equipmentName', label: '设备', align: 'center' },
|
||||||
|
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const key of Object.keys(hourData).sort()) {
|
||||||
|
const subprop = {
|
||||||
|
label: key,
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: key + '__in', label: '进数据', align: 'center' },
|
||||||
|
{ prop: key + '__out', label: '出数据', align: 'center' },
|
||||||
|
{ prop: key + '__nok', label: '报废数据', align: 'center' },
|
||||||
|
{
|
||||||
|
prop: key + '__ratio',
|
||||||
|
label: '报废率',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? val + ' %' : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
props.push(subprop);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tableProps = props;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||||
|
convertList(list) {
|
||||||
|
this.list.splice(0);
|
||||||
|
let rowIndex = 0;
|
||||||
|
for (const line of list) {
|
||||||
|
const { productLine, specification, data } = line;
|
||||||
|
|
||||||
|
// 设置span的行数
|
||||||
|
this.spanInfo[rowIndex] = data.length;
|
||||||
|
for (const equipment of data) {
|
||||||
|
const { equipmentName, totalQuantity } = equipment;
|
||||||
|
let row = {
|
||||||
|
productLine,
|
||||||
|
specification: specification.join('、'),
|
||||||
|
equipmentName,
|
||||||
|
totalQuantity,
|
||||||
|
};
|
||||||
|
rowIndex += 1;
|
||||||
|
for (const [key, hourData] of Object.entries(equipment.hourData)) {
|
||||||
|
const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
|
||||||
|
hourData;
|
||||||
|
row[key + '__in'] = inQuantity;
|
||||||
|
row[key + '__out'] = outQuantity;
|
||||||
|
row[key + '__nok'] = nokQuantity;
|
||||||
|
row[key + '__ratio'] = scrapRatio;
|
||||||
|
}
|
||||||
|
this.list.push(row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
buildData(data) {
|
||||||
|
this.convertList(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 合并table列的规则 */
|
||||||
|
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||||
|
if (columnIndex == 0 || columnIndex == 1) {
|
||||||
|
if (this.spanInfo[rowIndex]) {
|
||||||
|
return [
|
||||||
|
this.spanInfo[rowIndex], // row span
|
||||||
|
1, // col span
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
return [0, 0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/monitoring/equipment-monitor/recent-24-hours',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
|
||||||
|
// const data = this.res.data;
|
||||||
|
// console.log('recent-24', data);
|
||||||
|
|
||||||
|
this.initing = true;
|
||||||
|
this.buildProps(data[0]);
|
||||||
|
this.buildData(data);
|
||||||
|
this.queryParams.pageSize = this.list.length;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.initing = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun(payload) {
|
||||||
|
console.log('payload', payload);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 10px;
|
||||||
|
background: #f6f8faf6;
|
||||||
|
border: 1px solid #e1e4e8;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
position: fixed;
|
||||||
|
// top: 15vh;
|
||||||
|
top: 10vh;
|
||||||
|
left: 0;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 100000;
|
||||||
|
box-shadow: 0 0 32px 12px #0001;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
283
src/views/monitoring/equipmentStatusAndParams/index.vue
Normal file
283
src/views/monitoring/equipmentStatusAndParams/index.vue
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick"
|
||||||
|
@select-changed="handleSearchBarItemChange" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" />
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNo"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<!-- <base-dialog
|
||||||
|
:dialogTitle="title"
|
||||||
|
:dialogVisible="open"
|
||||||
|
width="500px"
|
||||||
|
@close="cancel"
|
||||||
|
@cancel="cancel"
|
||||||
|
@confirm="submitForm">
|
||||||
|
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||||
|
</base-dialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentStatusAndParams',
|
||||||
|
|
||||||
|
mixins: [basicPageMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchBarKeys: ['equipmentId', 'productionLineId'],
|
||||||
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi('base:equipment-alarm-log:update')
|
||||||
|
? {
|
||||||
|
type: 'edit',
|
||||||
|
btnName: '修改',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
this.$auth.hasPermi('base:equipment-alarm-log:delete')
|
||||||
|
? {
|
||||||
|
type: 'delete',
|
||||||
|
btnName: '删除',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
].filter((v) => v),
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'equipmentCode',
|
||||||
|
label: '设备编码',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{ width: 128, prop: 'inQuantity', label: '投入数', align: 'center' },
|
||||||
|
{ width: 128, prop: 'outQuantity', label: '产出数', align: 'center' },
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'run',
|
||||||
|
label: '是否运行',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'status',
|
||||||
|
label: '状态',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) =>
|
||||||
|
val != null ? ['正常', '计划停机', '故障'][val] : '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'error',
|
||||||
|
label: '是否故障',
|
||||||
|
align: 'center',
|
||||||
|
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'quantityRecordTime',
|
||||||
|
label: '生产量记录时间',
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'statusRecordTime',
|
||||||
|
label: '状态量记录时间',
|
||||||
|
width: 180,
|
||||||
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_action: 'params-monitor',
|
||||||
|
label: '参数监控',
|
||||||
|
align: 'center',
|
||||||
|
subcomponent: {
|
||||||
|
props: ['injectData'],
|
||||||
|
render: function (h) {
|
||||||
|
const _this = this;
|
||||||
|
return h(
|
||||||
|
'el-button',
|
||||||
|
{
|
||||||
|
props: { type: 'text', size: 'mini' },
|
||||||
|
on: {
|
||||||
|
click: function () {
|
||||||
|
console.log('inejctdata', _this.injectData);
|
||||||
|
_this.$emit('emitData', {
|
||||||
|
action: _this.injectData._action,
|
||||||
|
// value: _this.injectData.id,
|
||||||
|
value: _this.injectData,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'查看监控'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
searchBarFormConfig: [
|
||||||
|
// {
|
||||||
|
// type: 'datePicker',
|
||||||
|
// label: '时间段',
|
||||||
|
// dateType: 'daterange', // datetimerange
|
||||||
|
// // format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// format: 'yyyy-MM-dd',
|
||||||
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
// rangeSeparator: '-',
|
||||||
|
// startPlaceholder: '开始日期',
|
||||||
|
// endPlaceholder: '结束日期',
|
||||||
|
// defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
// param: 'createTime',
|
||||||
|
// // width: 350,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
onchange: true,
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'productionLineId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '设备',
|
||||||
|
placeholder: '请选择设备',
|
||||||
|
param: 'equipmentId',
|
||||||
|
selectOptions: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
productionLineId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getLineList();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 获取产线 */
|
||||||
|
async getLineList() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
this.searchBarFormConfig[0].selectOptions = data.map((line) => ({
|
||||||
|
name: line.name,
|
||||||
|
id: line.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 根据产线获取设备 */
|
||||||
|
async getEquipmentList(id) {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/equipment/listByLine',
|
||||||
|
method: 'get',
|
||||||
|
query: { id },
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 监听 search bar 的产线下拉框改变 */
|
||||||
|
async handleSearchBarItemChange({ param, value: id }) {
|
||||||
|
if (param == 'productionLineId') {
|
||||||
|
if (id == '') {
|
||||||
|
// 清除设备选框里的选项
|
||||||
|
this.searchBarFormConfig[1].selectOptions = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const list = await this.getEquipmentList(id);
|
||||||
|
this.searchBarFormConfig[1].selectOptions = list.map((eq) => ({
|
||||||
|
name: eq.name,
|
||||||
|
id: eq.id,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
const { equipmentId, productionLineId } = btn;
|
||||||
|
if (equipmentId) this.queryParams.equipmentId = equipmentId;
|
||||||
|
else this.queryParams.equipmentId = null;
|
||||||
|
if (productionLineId)
|
||||||
|
this.queryParams.productionLineId = productionLineId;
|
||||||
|
else this.queryParams.productionLineId = null;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
async getList() {
|
||||||
|
this.loading = true;
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/monitoring/equipment-monitor/realtime-page',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams,
|
||||||
|
});
|
||||||
|
this.list = data.list;
|
||||||
|
this.total = data.total;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun({ action, value }) {
|
||||||
|
if (action == 'params-monitor') {
|
||||||
|
const { equipmentId, equipmentName, equipmentCode } = value;
|
||||||
|
this.$router.push({
|
||||||
|
name: 'equipmentFullParams',
|
||||||
|
params: {
|
||||||
|
equipmentId,
|
||||||
|
equipmentCode,
|
||||||
|
equipmentName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emit-fun="handleEmitFun">
|
@emitFun="handleEmitFun">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@ -52,7 +52,7 @@ import {
|
|||||||
getQualityInspectionBoxBtnPage,
|
getQualityInspectionBoxBtnPage,
|
||||||
exportQualityInspectionBoxBtnExcel,
|
exportQualityInspectionBoxBtnExcel,
|
||||||
} from '@/api/base/qualityInspectionBoxBtn';
|
} from '@/api/base/qualityInspectionBoxBtn';
|
||||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emit-fun="handleEmitFun">
|
@emitFun="handleEmitFun">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@ -89,7 +89,7 @@ import {
|
|||||||
|
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'QualityInspectionDet',
|
name: 'QualityInspectionDet',
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emit-fun="handleEmitFun">
|
@emitFun="handleEmitFun">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@ -77,7 +77,7 @@ import {
|
|||||||
getQualityInspectionTypePage,
|
getQualityInspectionTypePage,
|
||||||
exportQualityInspectionTypeExcel,
|
exportQualityInspectionTypeExcel,
|
||||||
} from '@/api/base/qualityInspectionType';
|
} from '@/api/base/qualityInspectionType';
|
||||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'QualityInspectionType',
|
name: 'QualityInspectionType',
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
@emit-fun="handleEmitFun">
|
@emitFun="handleEmitFun">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
@ -55,7 +55,7 @@ import {
|
|||||||
import Editor from '@/components/Editor';
|
import Editor from '@/components/Editor';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
export default {
|
export default {
|
||||||
name: 'QualityInspectionRecord',
|
name: 'QualityInspectionRecord',
|
||||||
components: {
|
components: {
|
||||||
|
|||||||
131
src/views/quality/monitoring/qualityRecentHours/index.vue
Normal file
131
src/views/quality/monitoring/qualityRecentHours/index.vue
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 14:44:58
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
|
||||||
|
ref="search-bar" />
|
||||||
|
<!-- <pre><code v-html="jsondemo"></code></pre> -->
|
||||||
|
|
||||||
|
<el-skeleton v-if="initing" :rows="6" animated />
|
||||||
|
<base-table
|
||||||
|
v-else
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun"></base-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import response from './response.json';
|
||||||
|
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
|
||||||
|
// import hljs from 'highlight.js/lib/highlight';
|
||||||
|
// import json from 'highlight.js/lib/languages/json';
|
||||||
|
// import 'highlight.js/styles/github-gist.css';
|
||||||
|
|
||||||
|
// hljs.registerLanguage('json', json);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'QualityRecentHours',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
initing: false,
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// jsondemo: '',
|
||||||
|
list: [
|
||||||
|
// {
|
||||||
|
// inspectionContent: '检测内容1',
|
||||||
|
// '2023-03-18T00:00:00-产线1': '产线1-asdf',
|
||||||
|
// '2023-03-18T01:00:00-产线2': '产线2-kldf',
|
||||||
|
// '2023-03-18T02:00:00-产线1': '产线1-vasdkj',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'inspectionContent',
|
||||||
|
label: '检测内容',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
// const response = await this.$axios({
|
||||||
|
// url: '/monitoring/record-in-one-day/get',
|
||||||
|
// method: 'get',
|
||||||
|
// });
|
||||||
|
console.log(response);
|
||||||
|
// const {
|
||||||
|
// // data: { nameData },
|
||||||
|
// code,
|
||||||
|
// } = response;
|
||||||
|
// this.jsondemo = hljs.highlight(
|
||||||
|
// 'json',
|
||||||
|
// JSON.stringify(response, null, 2),
|
||||||
|
// true
|
||||||
|
// ).value;
|
||||||
|
const {
|
||||||
|
data: { data: dyanmicData, nameData },
|
||||||
|
} = response;
|
||||||
|
|
||||||
|
this.initing = true;
|
||||||
|
const dynamicProps = handleNameData(nameData);
|
||||||
|
this.tableProps.push(...dynamicProps);
|
||||||
|
const dataList = handleDynamicData(dyanmicData);
|
||||||
|
this.list = dataList;
|
||||||
|
this.queryParams.pageSize = dataList.length;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.initing = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun(payload) {
|
||||||
|
console.log('payload', payload);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 10px;
|
||||||
|
background: #f6f8faf6;
|
||||||
|
border: 1px solid #e1e4e8;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
position: fixed;
|
||||||
|
// top: 15vh;
|
||||||
|
top: 10vh;
|
||||||
|
left: 0;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 100000;
|
||||||
|
box-shadow: 0 0 32px 12px #0001;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
src/views/quality/monitoring/qualityRecentHours/props.json
Normal file
80
src/views/quality/monitoring/qualityRecentHours/props.json
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
{
|
||||||
|
"tableProps": [
|
||||||
|
{
|
||||||
|
"prop": "inspectionContent",
|
||||||
|
"label": "检测内容",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00",
|
||||||
|
"label": "2023-03-18T00:00:00",
|
||||||
|
"align": "center",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00-产线1",
|
||||||
|
"label": "产线1",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00-产线2",
|
||||||
|
"label": "产线2",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00-产线3",
|
||||||
|
"label": "产线3",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00-产线4",
|
||||||
|
"label": "产线4",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T00:00:00-产线5",
|
||||||
|
"label": "产线5",
|
||||||
|
"align": "center"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T01:00:00",
|
||||||
|
"label": "2023-03-18T01:00:00",
|
||||||
|
"align": "center",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T01:00:00-产线1",
|
||||||
|
"label": "产线1",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T01:00:00-产线2",
|
||||||
|
"label": "产线2",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T01:00:00-产线3",
|
||||||
|
"label": "产线3",
|
||||||
|
"align": "center"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T02:00:00",
|
||||||
|
"label": "2023-03-18T02:00:00",
|
||||||
|
"align": "center",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T02:00:00-产线1",
|
||||||
|
"label": "产线1",
|
||||||
|
"align": "center"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prop": "2023-03-18T02:00:00-产线2",
|
||||||
|
"label": "产线2",
|
||||||
|
"align": "center"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
176
src/views/quality/monitoring/qualityRecentHours/response.json
Normal file
176
src/views/quality/monitoring/qualityRecentHours/response.json
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
{
|
||||||
|
"code": 0,
|
||||||
|
"data": {
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "测试222023-08-09T02:00",
|
||||||
|
"parentId": "测试22",
|
||||||
|
"dynamicName": "2023-08-09T02:00",
|
||||||
|
"dynamicValue": 1691517600000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T02:00",
|
||||||
|
"dynamicName": "产线1",
|
||||||
|
"dynamicValue": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "测试222023-08-09T08:00",
|
||||||
|
"parentId": "测试22",
|
||||||
|
"dynamicName": "2023-08-09T08:00",
|
||||||
|
"dynamicValue": 1691539200000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T08:00",
|
||||||
|
"dynamicName": "产线1",
|
||||||
|
"dynamicValue": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "测试222023-08-09T11:00",
|
||||||
|
"parentId": "测试22",
|
||||||
|
"dynamicName": "2023-08-09T11:00",
|
||||||
|
"dynamicValue": 1691550000000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T11:00",
|
||||||
|
"dynamicName": "产线1",
|
||||||
|
"dynamicValue": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"inspectionDetContent": "测试22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "测试112023-08-09T02:00",
|
||||||
|
"parentId": "测试11",
|
||||||
|
"dynamicName": "2023-08-09T02:00",
|
||||||
|
"dynamicValue": 1691517600000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821954",
|
||||||
|
"parentId": "测试112023-08-09T02:00",
|
||||||
|
"dynamicName": "产线22",
|
||||||
|
"dynamicValue": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "测试112023-08-09T08:00",
|
||||||
|
"parentId": "测试11",
|
||||||
|
"dynamicName": "2023-08-09T08:00",
|
||||||
|
"dynamicValue": 1691539200000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试112023-08-09T08:00",
|
||||||
|
"dynamicName": "产线1",
|
||||||
|
"dynamicValue": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "测试112023-08-09T09:00",
|
||||||
|
"parentId": "测试11",
|
||||||
|
"dynamicName": "2023-08-09T09:00",
|
||||||
|
"dynamicValue": 1691542800000,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "1672847052717821954",
|
||||||
|
"parentId": "测试112023-08-09T09:00",
|
||||||
|
"dynamicName": "产线22",
|
||||||
|
"dynamicValue": 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"inspectionDetContent": "测试11"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"nameData": [
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T02:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试222023-08-09T02:00",
|
||||||
|
"parentId": "测试22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线1",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T02:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T08:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试222023-08-09T08:00",
|
||||||
|
"parentId": "测试22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线1",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T08:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T11:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试222023-08-09T11:00",
|
||||||
|
"parentId": "测试22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线1",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试222023-08-09T11:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T02:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试112023-08-09T02:00",
|
||||||
|
"parentId": "测试11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线22",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821954",
|
||||||
|
"parentId": "测试112023-08-09T02:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T08:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试112023-08-09T08:00",
|
||||||
|
"parentId": "测试11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线1",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821953",
|
||||||
|
"parentId": "测试112023-08-09T08:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2023-08-09T09:00",
|
||||||
|
"tree": 1,
|
||||||
|
"id": "测试112023-08-09T09:00",
|
||||||
|
"parentId": "测试11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "产线22",
|
||||||
|
"tree": 2,
|
||||||
|
"id": "1672847052717821954",
|
||||||
|
"parentId": "测试112023-08-09T09:00"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"msg": ""
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<!--
|
||||||
|
filename: detailGraph.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 16:36:21
|
||||||
|
description: 图表
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="title">
|
||||||
|
<span>
|
||||||
|
{{ title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DetailGraph',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: 'detail graph (echarts)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.cell {
|
||||||
|
// background: #cfcfcf;
|
||||||
|
border: 1px solid #cfcfcf;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title > span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px 4px 6px;
|
||||||
|
background: rgba(20, 145, 210, 0.155);
|
||||||
|
border-left: 4px solid rgba(20, 145, 210);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
// background-color: aquamarine;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
<!--
|
||||||
|
filename: line.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-07 16:14:11
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div ref="line-chart" class="line-chart"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LineDataChart',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
xProps: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
// inspectionContents: [
|
||||||
|
// '检测内容1',
|
||||||
|
// '检测内容2',
|
||||||
|
// '检测内容3',
|
||||||
|
// '检测内容4',
|
||||||
|
// '检测内容5',
|
||||||
|
// '检测内容6',
|
||||||
|
// '检测内容7',
|
||||||
|
// '检测内容8',
|
||||||
|
// '检测总数',
|
||||||
|
// '比例%',
|
||||||
|
// ],
|
||||||
|
// xProps: [
|
||||||
|
// '产线1',
|
||||||
|
// '产线2',
|
||||||
|
// '产线3',
|
||||||
|
// '产线4',
|
||||||
|
// '产线5',
|
||||||
|
// '产线6',
|
||||||
|
// '产线7',
|
||||||
|
// '产线8',
|
||||||
|
// '产线9',
|
||||||
|
// ],
|
||||||
|
// series: [
|
||||||
|
// {
|
||||||
|
// name: 'a',
|
||||||
|
// type: 'line',
|
||||||
|
// data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'lkj',
|
||||||
|
// type: 'line',
|
||||||
|
// data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '测试11',
|
||||||
|
// type: 'line',
|
||||||
|
// data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '测试22',
|
||||||
|
// type: 'line',
|
||||||
|
// data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
config() {
|
||||||
|
return {
|
||||||
|
// title: {
|
||||||
|
// text: '折线图',
|
||||||
|
// },
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '3%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: this.legend,
|
||||||
|
top: '5%',
|
||||||
|
icon: 'circle',
|
||||||
|
},
|
||||||
|
// toolbox: {
|
||||||
|
// feature: {
|
||||||
|
// saveAsImage: {},
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: this.xProps,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: this.series,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
config(val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setOption();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setOption() {
|
||||||
|
this.chart.setOption(this.config);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.line-chart {
|
||||||
|
// background: #f3f3f3;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,185 @@
|
|||||||
|
<!--
|
||||||
|
filename: total.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-07 15:04:31
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="total-graph" id="total-graph">
|
||||||
|
<div id="updata" class="updata"></div>
|
||||||
|
<div id="downdata" class="downdata"></div>
|
||||||
|
<div id="checktotal" class="checktotal"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TotalGraph',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
summaryList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
config: {},
|
||||||
|
updata: [],
|
||||||
|
downdata: [],
|
||||||
|
checktotal: [],
|
||||||
|
upChart: null,
|
||||||
|
downChart: null,
|
||||||
|
totalChart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.handleSummaryList();
|
||||||
|
this.initUpdata();
|
||||||
|
this.initDowndata();
|
||||||
|
this.initChecktotal();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSummaryList() {
|
||||||
|
this.summaryList.map((item) => {
|
||||||
|
this.updata.push({ name: item.lineName, value: item.sumUp });
|
||||||
|
this.downdata.push({ name: item.lineName, value: item.sumDown });
|
||||||
|
this.checktotal.push({ name: item.lineName, value: item.sumCheck });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
initUpdata() {
|
||||||
|
if (!this.upChart)
|
||||||
|
this.upChart = echarts.init(document.getElementById('updata'));
|
||||||
|
this.upChart.setOption(
|
||||||
|
this.handleOption({
|
||||||
|
title: '上片总数',
|
||||||
|
name: '上片数据',
|
||||||
|
data: this.updata
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
initDowndata() {
|
||||||
|
if (!this.downChart)
|
||||||
|
this.downChart = echarts.init(document.getElementById('downdata'));
|
||||||
|
this.downChart.setOption(
|
||||||
|
this.handleOption({
|
||||||
|
title: '下片总数',
|
||||||
|
name: '下片数据',
|
||||||
|
data: this.downdata
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
initChecktotal() {
|
||||||
|
if (!this.totalChart)
|
||||||
|
this.totalChart = echarts.init(document.getElementById('checktotal'));
|
||||||
|
this.totalChart.setOption(
|
||||||
|
this.handleOption({
|
||||||
|
title: '检测总数',
|
||||||
|
name: '检测数据',
|
||||||
|
data: this.checktotal
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleOption({ title, name, data }) {
|
||||||
|
const defaultOption = {
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: '42%',
|
||||||
|
top: 'center',
|
||||||
|
textAlign: 'right',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: 'center',
|
||||||
|
right: '10%',
|
||||||
|
orient: 'vertical',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
icon: 'circle',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: name,
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['35%', '50%'],
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
// emphasis: {
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// fontSize: 40,
|
||||||
|
// fontWeight: 'bold',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data ?? [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
{ value: 300, name: 'Video Ads' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
return defaultOption;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
#total-graph {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 100%;
|
||||||
|
// height: 400px;
|
||||||
|
// background: #ccc;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 240px);
|
||||||
|
// row-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updata {
|
||||||
|
// width: 320px;
|
||||||
|
// justify-self: center;
|
||||||
|
// background: rgba($color: #f00, $alpha: 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.downdata {
|
||||||
|
// width: 240px;
|
||||||
|
// justify-self: center;
|
||||||
|
// background: rgba($color: #0f0, $alpha: 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checktotal {
|
||||||
|
width: 320px;
|
||||||
|
justify-self: center;
|
||||||
|
// background: rgba($color: #00f, $alpha: 0.3);
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
<!--
|
||||||
|
filename: summaryDialog.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 16:25:49
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
height="35vh"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"></base-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SummaryTable',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'lineName',
|
||||||
|
label: '产线',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sumUp',
|
||||||
|
label: '上片总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sumDown',
|
||||||
|
label: '下片总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sumCheck',
|
||||||
|
label: '检测总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'scrapRatio',
|
||||||
|
label: '比例(%)',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
107
src/views/quality/monitoring/qualityStatistics/graphPage.vue
Normal file
107
src/views/quality/monitoring/qualityStatistics/graphPage.vue
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<!--
|
||||||
|
filename: graphPage.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-07 13:46:59
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="graph-page">
|
||||||
|
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||||
|
<TotalGraph :summary-list="summaryList" />
|
||||||
|
</DetailGraph>
|
||||||
|
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||||
|
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
|
||||||
|
</DetailGraph>
|
||||||
|
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
||||||
|
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DetailGraph from './components/detailGraph.vue';
|
||||||
|
import TotalGraph from './components/graphs/total.vue';
|
||||||
|
import LineGraph from './components/graphs/line.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'GraphPage',
|
||||||
|
components: { DetailGraph, TotalGraph, LineGraph },
|
||||||
|
props: {
|
||||||
|
summaryList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
lineData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
legend: [],
|
||||||
|
series: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.buildLegend();
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.series = this.lineData.list.map(this.buildSeries);
|
||||||
|
console.log('this.series', this.series);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
buildSeries(item) {
|
||||||
|
console.log('this.list', this.lineData.list, this.lineData.xProps);
|
||||||
|
const seriesItem = {
|
||||||
|
name: item.inspectionContent,
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
this.lineData.xProps.forEach((prop) => {
|
||||||
|
if (prop in item) {
|
||||||
|
seriesItem.data.push(item[prop]);
|
||||||
|
} else {
|
||||||
|
seriesItem.data.push(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return seriesItem;
|
||||||
|
},
|
||||||
|
buildLegend() {
|
||||||
|
this.legend = this.lineData.list
|
||||||
|
.map((item) => item.inspectionContent)
|
||||||
|
.sort();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.graph-page {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
// grid-template-columns: ;
|
||||||
|
// grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
grid-auto-rows: minmax(300px, max-content);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dg1 {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dg2 {
|
||||||
|
grid-column: 3 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dg3 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dg4 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
427
src/views/quality/monitoring/qualityStatistics/index.vue
Normal file
427
src/views/quality/monitoring/qualityStatistics/index.vue
Normal file
@ -0,0 +1,427 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 14:44:58
|
||||||
|
description: 检测统计数据
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="数据总览"
|
||||||
|
:dialogVisible="summaryOpen"
|
||||||
|
width="50%"
|
||||||
|
@close="handleSummaryClose"
|
||||||
|
@cancel="handleSummaryClose"
|
||||||
|
@confirm="handleSummaryClose">
|
||||||
|
<summaryTable :list="summaryList" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GraphPage from './graphPage.vue';
|
||||||
|
import summaryTable from './components/summaryTable.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'QualityStatistics',
|
||||||
|
components: { GraphPage, summaryTable },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
mode: 'table', // defaults to 'table'
|
||||||
|
searchBarFormConfig: [
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'timerange',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '数据总览',
|
||||||
|
name: 'summary',
|
||||||
|
color: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '表格版',
|
||||||
|
name: 'tableVersion',
|
||||||
|
color: 'text btn-table',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '图形版',
|
||||||
|
name: 'graphVersion',
|
||||||
|
color: 'text btn-graph',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 动态的 props
|
||||||
|
dynamicProps: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
param: null,
|
||||||
|
},
|
||||||
|
summaryList: [],
|
||||||
|
summaryOpen: false,
|
||||||
|
list: [
|
||||||
|
/** mock data */
|
||||||
|
// {
|
||||||
|
// content: 'asdfasdf',
|
||||||
|
// line1: '',
|
||||||
|
// line2: '',
|
||||||
|
// line3: '',
|
||||||
|
// line4: '',
|
||||||
|
// line5: '',
|
||||||
|
// line6: '',
|
||||||
|
// line7: '',
|
||||||
|
// line8: '',
|
||||||
|
// line9: '',
|
||||||
|
// line10: '',
|
||||||
|
// typeTotal: 100,
|
||||||
|
// ratio: '93%',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// content: 'fdasfs',
|
||||||
|
// line1: '',
|
||||||
|
// line2: '',
|
||||||
|
// line3: '',
|
||||||
|
// line4: '',
|
||||||
|
// line5: '',
|
||||||
|
// line6: '',
|
||||||
|
// line7: '',
|
||||||
|
// line8: '',
|
||||||
|
// line9: '',
|
||||||
|
// line10: '',
|
||||||
|
// typeTotal: 100,
|
||||||
|
// ratio: '93%',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// content: 'asdfdfffffff',
|
||||||
|
// line1: '',
|
||||||
|
// line2: '',
|
||||||
|
// line3: '',
|
||||||
|
// line4: '',
|
||||||
|
// line5: '',
|
||||||
|
// line6: '',
|
||||||
|
// line7: '',
|
||||||
|
// line8: '',
|
||||||
|
// line9: '',
|
||||||
|
// line10: '',
|
||||||
|
// typeTotal: 100,
|
||||||
|
// ratio: '93%',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
tableProps() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'inspectionContent',
|
||||||
|
label: '检测内容',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
...this.dynamicProps,
|
||||||
|
{
|
||||||
|
// width: 128,
|
||||||
|
prop: 'sumInput',
|
||||||
|
label: '检测类型总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 128,
|
||||||
|
prop: 'ratio',
|
||||||
|
label: '比例',
|
||||||
|
align: 'center',
|
||||||
|
// subcomponent: {
|
||||||
|
// name: 'TextOnly',
|
||||||
|
// props: {
|
||||||
|
// injectData: {
|
||||||
|
// type: Object,
|
||||||
|
// default: () => ({}),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// data() {
|
||||||
|
// return {
|
||||||
|
// text: '比例',
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// methods: {
|
||||||
|
// handleEmit(payload) {
|
||||||
|
// console.log('handleEmit', payload);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// render(h) {
|
||||||
|
// return h('el-button', { props: { type: 'text' } }, this.text);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.getSummaryList();
|
||||||
|
this.getDetailedList();
|
||||||
|
},
|
||||||
|
/** 获取 检测总数 列表 */
|
||||||
|
async getSummaryList() {
|
||||||
|
const response = await this.$axios({
|
||||||
|
url: '/monitoring/statistical-data/getUpPart',
|
||||||
|
method: 'get',
|
||||||
|
params: this.queryParams.param
|
||||||
|
? {
|
||||||
|
param: {
|
||||||
|
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00',
|
||||||
|
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
|
||||||
|
startTime: this.queryParams.param.startTime,
|
||||||
|
endTime: this.queryParams.param.endTime,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
});
|
||||||
|
this.summaryList = response.data;
|
||||||
|
console.log('summaryList', this.summaryList);
|
||||||
|
},
|
||||||
|
/** 获取 检测内容和产线关联 列表 */
|
||||||
|
async getDetailedList() {
|
||||||
|
const {
|
||||||
|
data: { data, otherList, otherMap, nameData },
|
||||||
|
} = await this.$axios({
|
||||||
|
url: '/monitoring/statistical-data/getDownPart',
|
||||||
|
params: this.queryParams.param
|
||||||
|
? {
|
||||||
|
param: {
|
||||||
|
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
|
||||||
|
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
|
||||||
|
startTime: this.queryParams.param.startTime,
|
||||||
|
endTime: this.queryParams.param.endTime,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
});
|
||||||
|
// this.list = response.data;
|
||||||
|
console.log('data', data);
|
||||||
|
console.log('otherList', otherList);
|
||||||
|
console.log('otherMap', otherMap);
|
||||||
|
console.log('nameData', nameData);
|
||||||
|
|
||||||
|
this.dynamicProps = this.filterNameData(nameData);
|
||||||
|
this.list = this.filterData(data);
|
||||||
|
},
|
||||||
|
filterNameData(nameData) {
|
||||||
|
const ndSet = new Set();
|
||||||
|
nameData.forEach((nd) => {
|
||||||
|
ndSet.add(nd.name);
|
||||||
|
});
|
||||||
|
return Array.from(ndSet.values())
|
||||||
|
.sort()
|
||||||
|
.map((name) => ({
|
||||||
|
prop: name,
|
||||||
|
label: name,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
filterData(data) {
|
||||||
|
return data.map((item) => {
|
||||||
|
const { data: innerData } = item;
|
||||||
|
const keyValuePairs = {};
|
||||||
|
innerData.map((d) => {
|
||||||
|
keyValuePairs[d.dynamicName] = d.dynamicValue;
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
inspectionContent: item.inspectionContent,
|
||||||
|
...keyValuePairs,
|
||||||
|
sumInput: item.sumInput,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 总览关闭 */
|
||||||
|
handleSummaryClose() {
|
||||||
|
this.summaryOpen = false;
|
||||||
|
},
|
||||||
|
/** 搜索按钮 */
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
console.log('bnt, ', btn);
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'search':
|
||||||
|
if (btn.timerange && typeof btn.timerange === 'object') {
|
||||||
|
this.queryParams.param = {};
|
||||||
|
this.$set(this.queryParams.param, 'startTime', btn.timerange[0]);
|
||||||
|
this.$set(this.queryParams.param, 'endTime', btn.timerange[1]);
|
||||||
|
}
|
||||||
|
this.handleQuery();
|
||||||
|
break;
|
||||||
|
case 'summary':
|
||||||
|
this.summaryOpen = true;
|
||||||
|
break;
|
||||||
|
case 'tableVersion':
|
||||||
|
this.mode = 'table';
|
||||||
|
break;
|
||||||
|
case 'graphVersion':
|
||||||
|
this.mode = 'graph';
|
||||||
|
break;
|
||||||
|
case 'reset':
|
||||||
|
this.$refs['search-bar'].resetForm();
|
||||||
|
// this.resetQuery();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.getSummaryList();
|
||||||
|
this.getDetailedList();
|
||||||
|
},
|
||||||
|
/** 处理表格事件 */
|
||||||
|
handleEmitFun() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.searchBar) {
|
||||||
|
.el-button.btn-table {
|
||||||
|
color: rgb(0, 130, 130);
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(0, 130, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button.btn-graph {
|
||||||
|
color: rgb(130, 0, 130);
|
||||||
|
border: 1px solid rgb(130, 0, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(130, 0, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-enter-active,
|
||||||
|
.fade-down-leave-active {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-enter,
|
||||||
|
.fade-down-leave-to {
|
||||||
|
transform: translateY(20%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-enter-to,
|
||||||
|
.fade-down-leave {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line1',
|
||||||
|
// label: '产线1',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line2',
|
||||||
|
// label: '产线2',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line3',
|
||||||
|
// label: '产线3',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line4',
|
||||||
|
// label: '产线4',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line5',
|
||||||
|
// label: '产线5',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line6',
|
||||||
|
// label: '产线6',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line7',
|
||||||
|
// label: '产线7',
|
||||||
|
// align: 'center',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// width: 128,
|
||||||
|
// prop: 'line8',
|
||||||
|
// label: '产线8',
|
||||||
|
// align: 'center',
|
||||||
|
// }, -->
|
||||||
14
yarn.lock
14
yarn.lock
@ -3059,6 +3059,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
|
|||||||
dependencies:
|
dependencies:
|
||||||
delayed-stream "~1.0.0"
|
delayed-stream "~1.0.0"
|
||||||
|
|
||||||
|
commander@*:
|
||||||
|
version "11.0.0"
|
||||||
|
resolved "https://registry.npmmirror.com/commander/-/commander-11.0.0.tgz#43e19c25dbedc8256203538e8d7e9346877a6f67"
|
||||||
|
integrity sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==
|
||||||
|
|
||||||
commander@2.17.x:
|
commander@2.17.x:
|
||||||
version "2.17.1"
|
version "2.17.1"
|
||||||
resolved "https://registry.npmmirror.com/commander/-/commander-2.17.1.tgz"
|
resolved "https://registry.npmmirror.com/commander/-/commander-2.17.1.tgz"
|
||||||
@ -5293,7 +5298,7 @@ hex-color-regex@^1.1.0:
|
|||||||
|
|
||||||
highlight.js@9.18.5:
|
highlight.js@9.18.5:
|
||||||
version "9.18.5"
|
version "9.18.5"
|
||||||
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz"
|
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
|
||||||
integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
|
integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
|
||||||
|
|
||||||
highlight.js@^10.7.1:
|
highlight.js@^10.7.1:
|
||||||
@ -6826,6 +6831,13 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
|
|||||||
resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz"
|
resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz"
|
||||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||||
|
|
||||||
|
mockjs@^1.1.0:
|
||||||
|
version "1.1.0"
|
||||||
|
resolved "https://registry.npmmirror.com/mockjs/-/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06"
|
||||||
|
integrity sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==
|
||||||
|
dependencies:
|
||||||
|
commander "*"
|
||||||
|
|
||||||
moddle-xml@^9.0.6:
|
moddle-xml@^9.0.6:
|
||||||
version "9.0.6"
|
version "9.0.6"
|
||||||
resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz"
|
resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user