lb #19
4
.env.dev
4
.env.dev
@@ -5,8 +5,10 @@ ENV = 'development'
|
||||
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.1.188:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
"js-beautify": "1.13.0",
|
||||
"jsencrypt": "3.3.1",
|
||||
"min-dash": "3.5.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"moment": "^2.29.4",
|
||||
"nprogress": "0.2.0",
|
||||
"qrcode.vue": "^1.7.0",
|
||||
|
||||
@@ -1,216 +1,215 @@
|
||||
<!DOCTYPE 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>
|
||||
<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;
|
||||
}
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
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 {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
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:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #fff;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
#loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
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;
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171c6;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#loader-wrapper .loader-section.section-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171C6;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-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-left {
|
||||
left: 0;
|
||||
}
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-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 {
|
||||
right: 0;
|
||||
}
|
||||
.loaded #loader {
|
||||
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 {
|
||||
-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.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-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.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9999999999999;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#loader-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
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>
|
||||
<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'
|
||||
|
||||
// 创建设备
|
||||
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() {
|
||||
return request({
|
||||
url: '/base/equipment/listAll',
|
||||
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
|
||||
author: liubin
|
||||
date: 2023-08-02 10:32:36
|
||||
date: 2023-08-15 10:32:36
|
||||
description: 弹窗的表单组件
|
||||
-->
|
||||
|
||||
@@ -44,7 +44,36 @@
|
||||
v-model="form[col.prop]"
|
||||
type="datetime"
|
||||
:placeholder="`请选择${col.label}`"
|
||||
value-format="timestamp"
|
||||
v-bind="col.bind"></el-date-picker>
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:file-list="uploadedFileList"
|
||||
:action="col.url"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="col.bind?.disabled || false">
|
||||
点击上传
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="form[col.prop]"
|
||||
active-color="#0b58ff"
|
||||
inactive-color="#e1e1e1"
|
||||
v-bind="col.bind"></el-switch>
|
||||
<component
|
||||
v-if="col.subcomponent"
|
||||
:key="col.key"
|
||||
:is="col.subcomponent"
|
||||
:inlineStyle="col.style"></component>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -90,6 +119,8 @@ export default {
|
||||
return {
|
||||
formLoading: true,
|
||||
optionListOf: {},
|
||||
uploadedFileList: [],
|
||||
dataLoaded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -101,6 +132,8 @@ export default {
|
||||
},
|
||||
form: {
|
||||
get() {
|
||||
// if (this.dataLoaded) return this.dataForm;
|
||||
// else return {}
|
||||
return this.dataForm;
|
||||
},
|
||||
set(val) {
|
||||
@@ -138,7 +171,7 @@ export default {
|
||||
return response.data;
|
||||
},
|
||||
async handleOptions(trigger = 'monuted') {
|
||||
// console.log("[dialogForm:handleOptions]")
|
||||
console.log('[dialogForm:handleOptions]');
|
||||
const promiseList = [];
|
||||
this.rows.forEach((cols) => {
|
||||
cols.forEach((opt) => {
|
||||
@@ -150,6 +183,36 @@ export default {
|
||||
if (opt.options) {
|
||||
this.$set(this.optionListOf, opt.prop, opt.options);
|
||||
} else if (opt.url) {
|
||||
// 如果有 depends，则暂时先不获取，注册一个watcher
|
||||
if (opt.depends) {
|
||||
console.log('[handleOptions] setting watch');
|
||||
this.$watch(
|
||||
() => this.form[opt.depends],
|
||||
(id) => {
|
||||
console.log('<', opt.depends, '>', 'changed', id);
|
||||
if (id == null) return;
|
||||
// 清空原有选项
|
||||
this.form[opt.prop] = null;
|
||||
// 获取新的选项
|
||||
this.$axios({
|
||||
url: `${opt.url}?id=${id}`,
|
||||
}).then((res) => {
|
||||
this.$set(
|
||||
this.optionListOf,
|
||||
opt.prop,
|
||||
res.data.map((item) => ({
|
||||
label: item[opt.labelKey ?? 'name'],
|
||||
value: item[opt.valueKey ?? 'id'],
|
||||
}))
|
||||
);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
return;
|
||||
}
|
||||
// 如果是下拉框，或者新增模式下的输入框，才去请求
|
||||
if (opt.select || (opt.input && !this.form?.id)) {
|
||||
promiseList.push(async () => {
|
||||
@@ -172,6 +235,7 @@ export default {
|
||||
}))
|
||||
);
|
||||
} else if (opt.input) {
|
||||
console.log('setting code: ', response.data);
|
||||
// 处理输入框数据
|
||||
this.form[opt.prop] = response.data;
|
||||
}
|
||||
@@ -181,6 +245,8 @@ export default {
|
||||
});
|
||||
});
|
||||
|
||||
console.log('[dialogForm:handleOptions] done!');
|
||||
|
||||
// 如果是 watch 触发的，不需要执行进一步的请求
|
||||
if (trigger == 'watch') {
|
||||
this.formLoading = false;
|
||||
@@ -189,6 +255,7 @@ export default {
|
||||
try {
|
||||
await Promise.all(promiseList.map((fn) => fn()));
|
||||
this.formLoading = false;
|
||||
this.dataLoaded = true;
|
||||
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
|
||||
} catch (error) {
|
||||
console.log('[dialogForm:handleOptions:error]', error);
|
||||
@@ -196,6 +263,27 @@ export default {
|
||||
}
|
||||
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>
|
||||
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 {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 120px - 8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import DialogForm from '../components/dialogForm.vue';
|
||||
import DialogForm from '@/components/DialogForm/index.vue';
|
||||
|
||||
export default {
|
||||
components: { DialogForm },
|
||||
@@ -31,7 +31,6 @@ export default {
|
||||
// dialogFormConfig: [], // 占位
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 过滤后端传回的详情数据
|
||||
filterData(data, keys) {
|
||||
@@ -45,8 +44,6 @@ export default {
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
// 处理搜索条件
|
||||
handleSearchBarBtnClick() {},
|
||||
// 处理表格按钮
|
||||
handleTableBtnClick({ data, type }) {
|
||||
switch (type) {
|
||||
@@ -87,9 +84,13 @@ export default {
|
||||
},
|
||||
handleEmitFun(val) {
|
||||
console.log('emit unf', val);
|
||||
switch (val.action) {
|
||||
// 查看详情
|
||||
case 'show-detail':
|
||||
this.viewDetail(val.value); // 交由每个组件自己实现
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getList() {},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
@@ -89,6 +89,9 @@ export const DICT_TYPE = {
|
||||
|
||||
// ============== ENERGY - 能源模块 =============
|
||||
ENERGY_UNIT: 'energy_unit',
|
||||
|
||||
// ============== ENERGY - 能源模块 =============
|
||||
EQU_ALARM_LEVEL: 'equ_alarm_level',
|
||||
MONITOR_INDEX_TYPE: 'monitor_index_type',
|
||||
OBJECT_TYPE: 'object_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"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emit-fun="handleEmitFun">
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
@@ -52,7 +52,7 @@ import {
|
||||
getQualityInspectionBoxBtnPage,
|
||||
exportQualityInspectionBoxBtnExcel,
|
||||
} from '@/api/base/qualityInspectionBoxBtn';
|
||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emit-fun="handleEmitFun">
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
@@ -89,7 +89,7 @@ import {
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
|
||||
export default {
|
||||
name: 'QualityInspectionDet',
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emit-fun="handleEmitFun">
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
@@ -77,7 +77,7 @@ import {
|
||||
getQualityInspectionTypePage,
|
||||
exportQualityInspectionTypeExcel,
|
||||
} from '@/api/base/qualityInspectionType';
|
||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
|
||||
export default {
|
||||
name: 'QualityInspectionType',
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emit-fun="handleEmitFun">
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
@@ -55,7 +55,7 @@ import {
|
||||
import Editor from '@/components/Editor';
|
||||
import moment from 'moment';
|
||||
|
||||
import basicPageMixin from '../../mixin/basicPageMixin';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
export default {
|
||||
name: 'QualityInspectionRecord',
|
||||
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:
|
||||
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:
|
||||
version "2.17.1"
|
||||
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:
|
||||
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==
|
||||
|
||||
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"
|
||||
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:
|
||||
version "9.0.6"
|
||||
resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz"
|
||||
|
||||
Reference in New Issue
Block a user