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

test #47

Merged
gtz217 merged 273 commits from test into master 2023-10-17 08:53:54 +08:00
Conversation 0 Commits 273 Files Changed 256 +12802 -212
89 changed files with 12802 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 14e06d9456 - Show all commits

4
.env.dev
View File

@ -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

1
package.json
View File

@ -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",

51
public/index.html
View File

@ -1,16 +1,19 @@
<!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]-->
<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,
@ -46,7 +49,7 @@
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
@ -56,7 +59,7 @@
}
#loader:before {
content: "";
content: '';
position: absolute;
top: 5px;
left: 5px;
@ -64,7 +67,7 @@
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
@ -73,7 +76,7 @@
}
#loader:after {
content: "";
content: '';
position: absolute;
top: 15px;
left: 15px;
@ -81,7 +84,7 @@
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
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;
@ -89,7 +92,6 @@
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
@ -118,13 +120,12 @@
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
@ -139,21 +140,20 @@
right: 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.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-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);
}
.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);
-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);
}
.loaded #loader {
@ -181,7 +181,7 @@
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
@ -196,7 +196,7 @@
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
color: #fff;
opacity: 0.5;
}
</style>
@ -212,5 +212,4 @@
</div>
</div>
</body>
</html>

53
src/api/base/equipment.js
View File

@ -1,4 +1,57 @@
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({

54
src/api/base/equipmentAttr.js Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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'
})
}

92
src/views/quality/components/dialogForm.vue → src/components/DialogForm/index.vue
View File

@ -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
View 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
View 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>

2
src/layout/components/AppMain.vue
View File

@ -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 {

13
src/views/quality/mixin/basicPageMixin.js → src/mixins/lb/basicPageMixin.js
View File

@ -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;

3
src/utils/dict.js
View File

@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/views/core/base/equipment/assets/eq10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/views/core/base/equipment/assets/eq2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/views/core/base/equipment/assets/eq3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/views/core/base/equipment/assets/eq4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
src/views/core/base/equipment/assets/eq5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
src/views/core/base/equipment/assets/eq6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/views/core/base/equipment/assets/eq7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/views/core/base/equipment/assets/eq8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/views/core/base/equipment/assets/eq9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

32
src/views/core/base/equipment/components/EquipmentAssets.vue Normal file
View 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
View 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
View 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
View 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
View 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>

98
src/views/equipment/analysis/efficiency/components/pieChart.vue Normal file
View File

@ -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
View 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
View 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>

49
src/views/equipment/analysis/quality/components/lineChart.vue Normal file
View File

@ -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
View 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>

49
src/views/equipment/timing-diagram/output/components/lineChart.vue Normal file
View File

@ -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
View 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
View 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
View 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
View 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
View 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
View 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": []
}
]
}

36
src/views/monitoring/equipmentFullParams/utils/local-data-manager.js Normal file
View File

@ -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
View 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
View 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
View 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
View 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>

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

@ -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 {

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

@ -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',

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

@ -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',

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

@ -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
View 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
View 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
View 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": ""
}

55
src/views/quality/monitoring/qualityStatistics/components/detailGraph.vue Normal file
View File

@ -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>

150
src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue Normal file
View File

@ -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>

185
src/views/quality/monitoring/qualityStatistics/components/graphs/total.vue Normal file
View File

@ -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>

68
src/views/quality/monitoring/qualityStatistics/components/summaryTable.vue Normal file
View File

@ -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
View 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
View 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
View File

@ -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"