mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 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 +15106 -568
120 changed files with 15106 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f1bbdf82e5 - Show all commits

6
.env.dev
View File

@@ -1,7 +1,7 @@
###
# @Author: Do not edit
# @Date: 2023-08-29 09:40:39
# @LastEditTime: 2023-08-29 09:59:47
# @LastEditTime: 2023-09-11 15:55:29
# @LastEditors: DY
# @Description:
###
@@ -12,7 +12,9 @@ ENV = 'development'
VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境
VUE_APP_BASE_API = 'http://192.168.0.33:48080'
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'
# 路由懒加载

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

385
public/index.html
View File

@@ -1,216 +1,215 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]>
<script>
window.location.href = 'html/ie.html';
</script>
<![endif]-->
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= webpackConfig.name %>
</title>
<!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.no-js #loader-wrapper {
display: none;
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.no-js h1 {
color: #222222;
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #fff;
opacity: 0.5;
}
</style>
</head>
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
</body>
</html>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
</body>
</html>

37
src/api/analysis/energyAnalysis.js Normal file
View File

@@ -0,0 +1,37 @@
import request from '@/utils/request'
// 获取走势分析数据
export function getEnergyTrend(data) {
return request({
url: '/analysis/energy-analysis/getTrend',
method: 'post',
data: data
})
}
// 获取对比分析数据
export function getCompare(data) {
return request({
url: '/analysis/energy-analysis/getCompare',
method: 'post',
data: data
})
}
// 获取同比分析数据(1:季度,2:月;3:日)
export function getYoy(data) {
return request({
url: '/analysis/energy-analysis/getYoy',
method: 'post',
data: data
})
}
// 获取环比分析数据(1:月,2:周,3:日)
export function getQoq(data) {
return request({
url: '/analysis/energy-analysis/getChain',
method: 'post',
data: data
})
}

61
src/api/base/equipment.js Normal file
View File

@@ -0,0 +1,61 @@
import request from '@/utils/request'
// 创建设备
export function createEquipment(data) {
return request({
url: '/base/equipment/create',
method: 'post',
data: data
})
}
// 更新设备
export function updateEquipment(data) {
return request({
url: '/base/equipment/update',
method: 'put',
data: data
})
}
// 删除设备
export function deleteEquipment(id) {
return request({
url: '/base/equipment/delete?id=' + id,
method: 'delete'
})
}
// 获得设备
export function getEquipment(id) {
return request({
url: '/base/equipment/get?id=' + id,
method: 'get'
})
}
// 获得设备分页
export function getEquipmentPage(query) {
return request({
url: '/base/equipment/page',
method: 'get',
params: query
})
}
// 导出设备 Excel
export function exportEquipmentExcel(query) {
return request({
url: '/base/equipment/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 获得所有设备列表
export function getEquipmentAll() {
return request({
url: '/base/equipment/listAll',
method: 'get'
})
}

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

8
src/api/base/productionLine.js Normal file
View File

@@ -0,0 +1,8 @@
import request from '@/utils/request'
// 获得所有工厂产线列表
export function getLineAll() {
return request({
url: '/base/production-line/listAll',
method: 'get'
})
}

8
src/api/base/workshopSection.js Normal file
View File

@@ -0,0 +1,8 @@
import request from '@/utils/request'
// 获得所有产线工段列表
export function getWorkShopAll() {
return request({
url: '/base/workshop-section/listAll',
method: 'get'
})
}

6
src/api/monitoring/energyReport.js
View File

@@ -23,7 +23,8 @@ export function energyReportPageExport(data) {
return request({
url: '/monitoring/energy-report/export',
method: 'post',
data: data
data: data,
responseType: 'blob'
})
}
@@ -32,6 +33,7 @@ export function energyReportPageExportAuto(data) {
return request({
url: '/monitoring/energy-report/exportAuto',
method: 'post',
data: data
data: data,
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;

64
src/utils/chartMixins/resize.js Normal file
View File

@@ -0,0 +1,64 @@
import { debounce } from '@/utils/debounce'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm =
document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm &&
this.$_sidebarElm.addEventListener(
'transitionend',
this.$_sidebarResizeHandler
)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm &&
this.$_sidebarElm.removeEventListener(
'transitionend',
this.$_sidebarResizeHandler
)
}
}
}

40
src/utils/debounce.js Normal file
View File

@@ -0,0 +1,40 @@
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}

6
src/utils/dict.js
View File

@@ -89,9 +89,13 @@ 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'
STATISTIC_TYPE: 'statistic_type',
TIME_DIM: 'time_dim'
}
/**

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;
});
}

87
src/views/group/base/groupTeamScheduling/index copy.vue → src/views/base/equipmentAttr/index.vue
View File

@@ -3,8 +3,8 @@
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="上班日期" prop="startDay">
<el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
<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>
@@ -16,11 +16,11 @@
<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:group-team-scheduling:create']">新增</el-button>
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:group-team-scheduling:export']">导出</el-button>
v-hasPermi="['base:equipment-attr:export']">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -28,19 +28,9 @@
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="班组ID" align="center" prop="teamId" />
<el-table-column label="班次id" align="center" prop="classesId" />
<el-table-column label="上班日期" align="center" prop="startDay" />
<el-table-column label="上班时间" align="center" prop="startTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.startTime) }}</span>
</template>
</el-table-column>
<el-table-column label="下班时间" align="center" prop="endTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.endTime) }}</span>
</template>
</el-table-column>
<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>
@@ -49,9 +39,9 @@
<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:group-team-scheduling:update']">修改</el-button>
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:group-team-scheduling:delete']">删除</el-button>
v-hasPermi="['base:equipment-attr:delete']">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -62,20 +52,14 @@
<!-- 对话框(添加 / 修改) -->
<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="teamId">
<el-input v-model="form.teamId" placeholder="请输入班组ID" />
<el-form-item label="设备id" prop="equipmentId">
<el-input v-model="form.equipmentId" placeholder="请输入设备id" />
</el-form-item>
<el-form-item label="班次id" prop="classesId">
<el-input v-model="form.classesId" placeholder="请输入班次id" />
<el-form-item label="属性名称" prop="name">
<el-input v-model="form.name" placeholder="请输入属性名称" />
</el-form-item>
<el-form-item label="上班日期" prop="startDay">
<el-input v-model="form.startDay" placeholder="请输入上班日期" />
</el-form-item>
<el-form-item label="上班时间" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
</el-form-item>
<el-form-item label="下班时间" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
<el-form-item label="属性值" prop="value">
<el-input v-model="form.value" placeholder="请输入属性值" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -87,10 +71,10 @@
</template>
<script>
import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
import { createEquipmentAttr, updateEquipmentAttr, deleteEquipmentAttr, getEquipmentAttr, getEquipmentAttrPage, exportEquipmentAttrExcel } from "@/api/base/equipmentAttr";
export default {
name: "GroupTeamScheduling",
name: "EquipmentAttr",
components: {
},
data() {
@@ -103,7 +87,7 @@ export default {
showSearch: true,
// 总条数
total: 0,
// 排班信息列表
// 设备属性列表
list: [],
// 弹出层标题
title: "",
@@ -113,14 +97,13 @@ export default {
queryParams: {
pageNo: 1,
pageSize: 10,
startDay: [],
equipmentId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
equipmentId: [{ required: true, message: "设备id不能为空", trigger: "blur" }],
}
};
},
@@ -132,7 +115,7 @@ export default {
getList() {
this.loading = true;
// 执行查询
getGroupTeamSchedulingPage(this.queryParams).then(response => {
getEquipmentAttrPage(this.queryParams).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
@@ -147,11 +130,9 @@ export default {
reset() {
this.form = {
id: undefined,
teamId: undefined,
classesId: undefined,
startDay: undefined,
startTime: undefined,
endTime: undefined,
equipmentId: undefined,
name: undefined,
value: undefined,
};
this.resetForm("form");
},
@@ -169,16 +150,16 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加排班信息";
this.title = "添加设备属性";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id;
getGroupTeamScheduling(id).then(response => {
getEquipmentAttr(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改排班信息";
this.title = "修改设备属性";
});
},
/** 提交按钮 */
@@ -189,7 +170,7 @@ export default {
}
// 修改的提交
if (this.form.id != null) {
updateGroupTeamScheduling(this.form).then(response => {
updateEquipmentAttr(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
@@ -197,7 +178,7 @@ export default {
return;
}
// 添加的提交
createGroupTeamScheduling(this.form).then(response => {
createEquipmentAttr(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@@ -207,8 +188,8 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id;
this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
return deleteGroupTeamScheduling(id);
this.$modal.confirm('是否确认删除设备属性编号为"' + id + '"的数据项?').then(function() {
return deleteEquipmentAttr(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
@@ -220,11 +201,11 @@ export default {
let params = {...this.queryParams};
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
this.$modal.confirm('是否确认导出所有设备属性数据项?').then(() => {
this.exportLoading = true;
return exportGroupTeamSchedulingExcel(params);
return exportEquipmentAttrExcel(params);
}).then(response => {
this.$download.excel(response, '排班信息.xls');
this.$download.excel(response, '设备属性.xls');
this.exportLoading = false;
}).catch(() => {});
}

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/energy/analysis/contrastAnalysis/components/barChart.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div
id="analysischartBar"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "BarChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(214) - 70
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartBar')
this.chart = echarts.init(this.chartDom)
let tempArr = []
let xData = []
let yData = []
let legendData = []
if (this.chartData.length === 0) {
return false
} else {
tempArr = this.chartData[0].trendRespVOList
}
for (let k = 0; k < tempArr.length; k++) {
xData.push(tempArr[k].time)
}
for (let i = 0; i < this.chartData.length; i++) {
let obj = {
name: this.chartData[i].objName + this.chartData[i].objCode,
type: 'bar',
data: []
}
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
let temp = this.chartData[i].trendRespVOList
for (let j = 0; j < temp.length; j++) {
let num = temp[j].useNum ? temp[j].useNum : 0
obj.data.push(num)
}
yData.push(obj)
}
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData
},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: yData
};
option && this.chart.setOption(option);
}
}
}
</script>

100
src/views/energy/analysis/contrastAnalysis/components/lineChart.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div
id="analysischartLine"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "LineChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(214) - 70
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartLine')
this.chart = echarts.init(this.chartDom)
let tempArr = []
let xData = []
let yData = []
let legendData = []
if (this.chartData.length === 0) {
return false
} else {
tempArr = this.chartData[0].trendRespVOList
}
for (let k = 0; k < tempArr.length; k++) {
xData.push(tempArr[k].time)
}
for (let i = 0; i < this.chartData.length; i++) {
let obj = {
name: this.chartData[i].objName + this.chartData[i].objCode,
type: 'line',
stack: 'Total',
data: []
}
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
let temp = this.chartData[i].trendRespVOList
for (let j = 0; j < temp.length; j++) {
let num = temp[j].useNum ? temp[j].useNum : 0
obj.data.push(num)
}
yData.push(obj)
}
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData
},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: yData
};
option && this.chart.setOption(option);
}
}
}
</script>

403
src/views/energy/analysis/contrastAnalysis/components/searchArea.vue Normal file
View File

@@ -0,0 +1,403 @@
<template>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="能源类型">
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
<el-option
v-for="item in energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间维度">
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
<el-option
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间范围">
<div v-show="queryParams.timeDim === '1'">
<el-date-picker
v-model="timeValue"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
:picker-options="pickerOptions"
popper-class="noneMinute"
@change="timeSelect"
:clearable="false"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '2'">
<el-date-picker
v-model="dateValue"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
:picker-options="pickerOptions"
:clearable="false"
@change="timeSelect"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '3'">
<el-date-picker
v-model="weekValue1"
type="week"
format="yyyy 第 WW 周"
style='width:150px;'
:picker-options="pickerOptionsWeek"
@change="startWeek"
:clearable="false"
placeholder="选择周">
</el-date-picker>-
<el-date-picker
v-model="weekValue2"
type="week"
format="yyyy 第 WW 周"
:picker-options="pickerOptionsWeek"
style='width:150px;'
@change="endWeek"
:clearable="false"
placeholder="选择周">
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '4'">
<el-date-picker
v-model="monthValue"
type="monthrange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
:clearable="false"
:picker-options="pickerOptions"
@change="timeSelect"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '5'">
<el-date-picker
style='width:100px;'
v-model="yearValue1"
type="year"
:picker-options="pickerOptions"
value-format="timestamp"
placeholder="选择年"
@change="startYear"
:clearable="false"
>
</el-date-picker>-
<el-date-picker
style='width:100px;'
v-model="yearValue2"
type="year"
:picker-options="pickerOptions"
value-format="timestamp"
placeholder="选择年"
@change="endYear"
:clearable="false"
>
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="对象维度">
<el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
<el-option
v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="对象选择">
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
<el-option
v-for="item in objectList"
:key="item.id"
:label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { getEnergyTypeListAll } from "@/api/base/energyType"
import { getLineAll } from "@/api/base/productionLine"
import { getWorkShopAll } from "@/api/base/workshopSection"
import { getEquipmentAll } from "@/api/base/equipment"
import moment from 'moment'
export default {
name: 'searchArea',
data() {
return {
// 查询参数
queryParams: {
energyTypeId: null,
objIds: [],
objType: '',
timeDim: null,
startTime: null,
endTime: null
},
timeValue: [],// 最大7天只能整点
dateValue: [],// 最大30天
weekValue1: null,//最多24周
weekValue2: null,
monthValue: [],//最多24月
yearValue1: null,//最多10年
yearValue2: null,
energyTypeList: [],
objectList: [],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now()
}
},
pickerOptionsWeek: {
disabledDate(time) {
let day = Date.now()
let limitTime = moment(day).day(-1)
return time.getTime() > new Date(limitTime).getTime()
}
}
}
},
mounted() {
this.getTypeList()
this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
},
methods: {
getTypeList() {
getEnergyTypeListAll().then((res) => {
this.energyTypeList = res.data || []
})
},
// 范围选择器
timeSelect() {
switch (this.queryParams.timeDim) {
case '1':
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
this.$modal.msgError('最大时间范围为7天，请重新选择')
this.timeValue = []
}
break
case '2':
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
this.dateValue = []
}
break
case '4':
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
this.monthValue = []
}
break
default:
}
},
// 年选择器
startYear() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
this.yearValue1 = null
return false
}
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
this.$modal.msgError('最大时间范围为10年，请重新选择')
this.yearValue1 = null
return false
}
}
},
endYear() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
this.yearValue2 = null
return false
}
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
this.$modal.msgError('最大时间范围为10年，请重新选择')
this.yearValue2 = null
return false
}
}
},
// 周选择器
startWeek() {
if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime()
let b = new Date(this.weekValue2).getTime()
if (a > b) {
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
this.weekValue1 = null
return false
}
if (b - a > 167*24*3600000) {
this.$modal.msgError('最大时间范围为24周，请重新选择')
this.weekValue1 = null
return false
}
}
},
endWeek() {
if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime()
let b = new Date(this.weekValue2).getTime()
if (a > b) {
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
this.weekValue2 = null
return false
}
if (b - a > 167*24*3600000) {
this.$modal.msgError('最大时间范围为24周，请重新选择')
this.weekValue2 = null
return false
}
}
},
// 对象维度
selectObjs(val) {
console.log(val)
switch (val) {
case '1':
getLineAll().then(res => {
this.objectList = res.data || []
this.queryParams.objIds = []
})
break;
case '2':
getWorkShopAll().then(res => {
this.objectList = res.data || []
this.queryParams.objIds = []
})
break;
default:
getEquipmentAll().then(res => {
this.objectList = res.data || []
this.queryParams.objIds = []
})
}
},
// 查询
search() {
if (!this.queryParams.energyTypeId) {
this.$modal.msgError('请选择能源类型')
return false
}
if (!this.queryParams.timeDim) {
this.$modal.msgError('请选择时间维度')
return false
}
switch (this.queryParams.timeDim) {
case '1':
if (this.timeValue.length > 0) {
this.queryParams.startTime = this.timeValue[0]
this.queryParams.endTime = this.timeValue[1] // 不用转
} else {
this.$modal.msgError('时间范围不能为空')
return false
}
break
case '2':
if (this.dateValue.length > 0) {
this.queryParams.startTime = this.dateValue[0]
this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
} else {
this.$modal.msgError('日范围不能为空')
return false
}
break
case '3':
if (this.weekValue1 && this.weekValue2) {
let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
this.queryParams.startTime = new Date(a).getTime()
this.queryParams.endTime = new Date(b).getTime()
} else {
this.$modal.msgError('周范围不能为空')
return false
}
break
case '4':// 转为本月最后一天的最后一秒
if (this.monthValue.length > 0) {
this.queryParams.startTime = this.monthValue[0]
this.queryParams.endTime = this.transformTime(this.monthValue[1])
} else {
this.$modal.msgError('月范围不能为空')
return false
}
break
default://本年最后一天
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 < this.yearValue1) {
this.$modal.msgError('结束时间不能早于开始时间')
return false
} else {
this.queryParams.startTime = this.yearValue1
this.queryParams.endTime = this.transformYear(this.yearValue2)
}
} else {
this.$modal.msgError('年范围不能为空')
return false
}
}
if (!this.queryParams.objType) {
this.$modal.msgError('请选择对象维度')
return false
}
if (this.queryParams.objIds.length === 0) {
this.$modal.msgError('请选择对象')
return false
}
this.queryParams.startTime = this.queryParams.startTime + ''
this.queryParams.endTime = this.queryParams.endTime + ''
console.log(this.queryParams)
this.$emit('submit', this.queryParams)
},
transformTime(timeStamp) {// 本月最后一天
let year = moment(timeStamp).format('YYYY')
let month = moment(timeStamp).format('MM')
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
let value = new Date(newData).getTime()
return value
},
transformYear(timeStamp) {// 本年最后一天
let year = moment(timeStamp).format('YYYY')
let newData = year+'-12-31 23:59:59'
let value = new Date(newData).getTime()
return value
}
}
}
</script>
<style>
/* 时间整点 */
.noneMinute .el-time-spinner__wrapper {
width: 100%;
}
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
</style>

55
src/views/energy/analysis/contrastAnalysis/index.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-area @submit="getList"/>
<el-tabs v-model="activeName" @tab-click="switchChart">
<el-tab-pane label="柱状图" name="bar">
<bar-chart ref="analysisBarChart" :chartData="chartData" />
</el-tab-pane>
<el-tab-pane label="折线图" name="line">
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getCompare } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import BarChart from "./components/barChart"
import LineChart from "./components/lineChart"
// import moment from 'moment'
export default {
name: 'ContrastAnalysis',
components: { SearchArea, BarChart, LineChart },
data() {
return {
activeName: 'bar',
chartData: []
}
},
mounted() {},
methods: {
getList(params) {
getCompare({ ...params }).then((res) => {
console.log(res)
if (res.code === 0) {
this.chartData = res.data || []
} else {
this.chartData = []
}
})
},
switchChart() {
if (this.activeName === 'bar') {
this.$nextTick((res) => {
this.$refs.analysisBarChart.getChart()
})
} else {
this.$nextTick((res) => {
this.$refs.analysisLineChart.getChart()
})
}
}
}
}
</script>

109
src/views/energy/analysis/qoqAnalysis/components/lineChart.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div
id="analysischartLine"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "LineChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(350)
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(350)
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartLine')
this.chart = echarts.init(this.chartDom)
if (this.chartData.length === 0) {
return false
}
let arr = this.chartData[0].type // [水，电，煤]
let keys = Object.keys(this.chartData[0])
let yData = [
{
name: '本期',
type: 'bar',
data: []
},
{
name: '上期',
type: 'bar',
data: []
}
]
for (let j = 0; j < arr.length; j++) {
for (let k = 0; k < keys.length; k++) {
if (keys[k].indexOf(arr[j]+'_上期') > -1) {
yData[1].data.push(this.chartData[0][keys[k]])
}
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
yData[0].data.push(this.chartData[0][keys[k]])
}
}
}
var option = {
// title: {
// text: 'World Population'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
xAxis: {
type: 'category',
data: arr
},
series: yData
}
option && this.chart.setOption(option);
}
}
}
</script>

181
src/views/energy/analysis/qoqAnalysis/components/searchArea.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="对象选择">
<el-cascader
v-model="objArr"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
clearable></el-cascader>
</el-form-item>
<el-form-item label="时间维度">
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
<el-option
v-for="item in timeType"
:key="item.id"
:label="item.name"
:value="item.id"
:clearable="false">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间">
<div v-show="queryParams.type === 1">
<el-date-picker
v-model="monthValue"
type="month"
:picker-options="pickerOptions"
@change="selectTime"
:clearable="false"
placeholder="选择月">
</el-date-picker>
</div>
<div v-show="queryParams.type === 2">
<el-date-picker
v-model="weekValue"
type="week"
format="yyyy 第 WW 周"
:picker-options="pickerOptionsWeek"
@change="selectTime"
:clearable="false"
placeholder="选择周">
</el-date-picker>
</div>
<div v-show="queryParams.type === 3">
<el-date-picker
v-model="dateValue"
type="date"
:picker-options="pickerOptions"
@change="selectTime"
:clearable="false"
placeholder="选择日">
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<span class="separateStyle"></span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportData" plain>导出</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { getTree } from '@/api/base/factory'
import moment from 'moment'
export default {
name: 'searchArea',
data() {
return {
// 查询参数
queryParams: {
type: 1,
searchTime: null,
objId: null
},
timeType: [
{id: 1, name: '月'},
{id: 2, name: '周'},
{id: 3, name: '日'}
],
monthValue: '',
weekValue: '',
dateValue: '',
objArr: [],
objList: [],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now()
}
},
pickerOptionsWeek: {
disabledDate(time) {
let day = Date.now()
let limitTime = moment(day).day(-1)
return time.getTime() > new Date(limitTime).getTime()
}
}
}
},
mounted() {
this.getObjTree()
},
methods: {
getObjTree() {
getTree().then(res => {
this.objList = res.data || []
})
},
selectTime() {
switch (this.queryParams.type) {
case 1:
this.queryParams.searchTime = this.monthValue
break;
case 2:
this.queryParams.searchTime = this.weekValue
break;
default:
this.queryParams.searchTime = this.dateValue
}
},
// 查询
search() {
if (!this.objArr.length === 0) {
this.$modal.msgError('请选择对象')
return false
} else {
this.queryParams.objId = this.objArr[this.objArr.length-1]
}
if (!this.queryParams.type) {
this.$modal.msgError('请选择时间维度')
return false
}
if (!this.queryParams.searchTime) {
this.$modal.msgError('请选择时间')
return false
}
switch (this.queryParams.type) {
case 1:
this.queryParams.searchTime = this.transformTime(this.monthValue)
break;
case 2:
let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
this.queryParams.searchTime = new Date(value).getTime()
break;
default:
let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
this.queryParams.searchTime = new Date(value2).getTime()
}
this.$emit('submit', this.queryParams)
},
exportData() {
this.$emit('exportD')
},
transformTime(timeStamp) {// 本月最后一天
let year = moment(timeStamp).format('YYYY')
let month = moment(timeStamp).format('MM')
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
let value = new Date(newData).getTime()
return value
}
}
}
</script>
<style>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
</style>
<style scoped>
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
</style>

109
src/views/energy/analysis/qoqAnalysis/index.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/>
<!-- 表格 -->
<base-table
:table-props="tableProps"
:table-data="list"
class="qoq-out-table"
/>
<div style='width: 100%;height: 300px;padding-top: 30px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
</div>
</template>
<script>
import { getQoq } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import LineChart from "./components/lineChart"
import FileSaver from "file-saver"
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
name: 'QoqAnalysis',
components: { SearchArea, LineChart },
data() {
return {
chartData: [],
tableProps: [],
list: []
}
},
methods: {
getList(params) {
getQoq({ ...params }).then((res) => {
if (res.code === 0 && res.data) {
this.getTableList(res.data)
} else {
this.chartData = []
this.list = []
}
})
},
getTableList(arr) {
let data = arr.data
let nameData = arr.nameData
let tempX = []
data[0].data.map((item) => {
let obj = {}
obj.prop = item.dynamicName
obj.label = item.dynamicName
obj.id = item.id
obj.children = []
tempX.push(obj)
})
for (let i = 0; i < nameData.length; i++) {
for (let j = 0; j < tempX.length; j++) {
if (tempX[j].id === nameData[i].parentId) {
let obj = {}
obj.prop = tempX[j].prop + '_' + nameData[i].name
obj.label = nameData[i].name
tempX[j].children.push(obj)
}
}
}
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
// 数据
this.list = []
for (let k = 0; k < data.length; k++) {
let obj = {}
obj.time = data[k].time
let arr1 = data[k].data
obj.type = []
for (let q = 0; q < arr1.length; q++) {
let name = arr1[q].dynamicName
obj.type.push(name)
let arr2 = arr1[q].children
for (let p = 0; p < arr2.length; p++) {
let prop = name + '_' + arr2[p].dynamicName
obj[prop] = arr2[p].dynamicValue
}
}
this.list.push(obj)
}
this.chartData = this.list
},
exportData() {
if (this.list.length > 0) {
var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
})
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"环比分析.xlsx"
)
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout
} else {
this.$modal.msgWarning("暂无数据导出")
}
}
}
}
</script>

77
src/views/energy/analysis/trendAnalysis/components/barChart.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div
id="analysischartBar"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "BarChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(214) - 70
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartBar')
this.chart = echarts.init(this.chartDom)
let xData = []
let yData = []
for (let i = 0; i < this.chartData.length; i++) {
xData.push(this.chartData[i].time)
yData.push(this.chartData[i].useNum)
}
var option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data: yData,
type: 'bar'
}
]
};
option && this.chart.setOption(option);
}
}
}
</script>

78
src/views/energy/analysis/trendAnalysis/components/lineChart.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div
id="analysischartLine"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "LineChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(214) - 70
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartLine')
this.chart = echarts.init(this.chartDom)
let xData = []
let yData = []
for (let i = 0; i < this.chartData.length; i++) {
xData.push(this.chartData[i].time)
yData.push(this.chartData[i].useNum)
}
var option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data: yData,
type: 'line'
}
]
};
option && this.chart.setOption(option);
}
}
}
</script>

364
src/views/energy/analysis/trendAnalysis/components/searchArea.vue Normal file
View File

@@ -0,0 +1,364 @@
<template>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="能源类型">
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
<el-option
v-for="item in energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="对象选择">
<el-cascader
v-model="objArr"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
clearable></el-cascader>
</el-form-item>
<el-form-item label="时间维度">
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
<el-option
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间范围">
<div v-show="queryParams.timeDim === '1'">
<el-date-picker
v-model="timeValue"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
:picker-options="pickerOptions"
popper-class="noneMinute"
@change="timeSelect"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '2'">
<el-date-picker
v-model="dateValue"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
:picker-options="pickerOptions"
@change="timeSelect"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '3'">
<el-date-picker
v-model="weekValue1"
type="week"
format="yyyy 第 WW 周"
style='width:150px;'
:picker-options="pickerOptionsWeek"
@change="startWeek"
placeholder="选择周">
</el-date-picker>-
<el-date-picker
v-model="weekValue2"
type="week"
format="yyyy 第 WW 周"
:picker-options="pickerOptionsWeek"
style='width:150px;'
@change="endWeek"
placeholder="选择周">
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '4'">
<el-date-picker
v-model="monthValue"
type="monthrange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
:picker-options="pickerOptions"
@change="timeSelect"
>
</el-date-picker>
</div>
<div v-show="queryParams.timeDim === '5'">
<el-date-picker
style='width:100px;'
v-model="yearValue1"
type="year"
:picker-options="pickerOptions"
value-format="timestamp"
placeholder="选择年"
@change="startYear"
>
</el-date-picker>-
<el-date-picker
style='width:100px;'
v-model="yearValue2"
type="year"
:picker-options="pickerOptions"
value-format="timestamp"
placeholder="选择年"
@change="endYear"
>
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { getEnergyTypeListAll } from "@/api/base/energyType"
import { getTree } from '@/api/base/factory'
import moment from 'moment'
export default {
name: 'searchArea',
data() {
return {
// 查询参数
queryParams: {
energyTypeId: null,
objId: null,
timeDim: null,
startTime: null,
endTime: null
},
objArr: [],
timeValue: [],// 最大7天只能整点
dateValue: [],// 最大30天
weekValue1: null,//最多24周
weekValue2: null,
monthValue: [],//最多24月
yearValue1: null,//最多10年
yearValue2: null,
energyTypeList: [],
objList: [],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now()
}
},
pickerOptionsWeek: {
disabledDate(time) {
let day = Date.now()
let limitTime = moment(day).day(-1)
return time.getTime() > new Date(limitTime).getTime()
}
}
}
},
mounted() {
this.getTypeList()
this.getObjTree()
this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
},
methods: {
getTypeList() {
getEnergyTypeListAll().then((res) => {
this.energyTypeList = res.data || []
})
},
getObjTree() {
getTree().then(res => {
this.objList = res.data || []
})
},
// 范围选择器
timeSelect() {
switch (this.queryParams.timeDim) {
case '1':
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
this.$modal.msgError('最大时间范围为7天，请重新选择')
this.timeValue = []
}
break
case '2':
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
this.dateValue = []
}
break
case '4':
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
this.monthValue = []
}
break
default:
}
},
// 年选择器
startYear() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
this.yearValue1 = null
return false
}
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
this.$modal.msgError('最大时间范围为10年，请重新选择')
this.yearValue1 = null
return false
}
}
},
endYear() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
this.yearValue2 = null
return false
}
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
this.$modal.msgError('最大时间范围为10年，请重新选择')
this.yearValue2 = null
return false
}
}
},
// 周选择器
startWeek() {
if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime()
let b = new Date(this.weekValue2).getTime()
if (a > b) {
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
this.weekValue1 = null
return false
}
if (b - a > 167*24*3600000) {
this.$modal.msgError('最大时间范围为24周，请重新选择')
this.weekValue1 = null
return false
}
}
},
endWeek() {
if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime()
let b = new Date(this.weekValue2).getTime()
if (a > b) {
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
this.weekValue2 = null
return false
}
if (b - a > 167*24*3600000) {
this.$modal.msgError('最大时间范围为24周，请重新选择')
this.weekValue2 = null
return false
}
}
},
// 查询
search() {
if (!this.queryParams.energyTypeId) {
this.$modal.msgError('请选择能源类型')
return false
}
if (!this.objArr.length === 0) {
this.$modal.msgError('请选择对象')
return false
} else {
this.queryParams.objId = this.objArr[this.objArr.length-1]
}
if (!this.queryParams.timeDim) {
this.$modal.msgError('请选择时间维度')
return false
}
switch (this.queryParams.timeDim) {
case '1':
if (this.timeValue.length > 0) {
this.queryParams.startTime = this.timeValue[0]
this.queryParams.endTime = this.timeValue[1] // 不用转
} else {
this.$modal.msgError('时间范围不能为空')
return false
}
break
case '2':
if (this.dateValue.length > 0) {
this.queryParams.startTime = this.dateValue[0]
this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
} else {
this.$modal.msgError('日范围不能为空')
return false
}
break
case '3':
if (this.weekValue1 && this.weekValue2) {
let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
this.queryParams.startTime = new Date(a).getTime()
this.queryParams.endTime = new Date(b).getTime()
} else {
this.$modal.msgError('周范围不能为空')
return false
}
break
case '4':// 转为本月最后一天的最后一秒
if (this.monthValue.length > 0) {
this.queryParams.startTime = this.monthValue[0]
this.queryParams.endTime = this.transformTime(this.monthValue[1])
} else {
this.$modal.msgError('月范围不能为空')
return false
}
break
default://本年最后一天
if (this.yearValue1 && this.yearValue2) {
if (this.yearValue2 < this.yearValue1) {
this.$modal.msgError('结束时间不能早于开始时间')
return false
} else {
this.queryParams.startTime = this.yearValue1
this.queryParams.endTime = this.transformYear(this.yearValue2)
}
} else {
this.$modal.msgError('年范围不能为空')
return false
}
}
this.queryParams.startTime = this.queryParams.startTime + ''
this.queryParams.endTime = this.queryParams.endTime + ''
this.$emit('submit', this.queryParams)
},
transformTime(timeStamp) {// 本月最后一天
let year = moment(timeStamp).format('YYYY')
let month = moment(timeStamp).format('MM')
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
let value = new Date(newData).getTime()
return value
},
transformYear(timeStamp) {// 本年最后一天
let year = moment(timeStamp).format('YYYY')
let newData = year+'-12-31 23:59:59'
let value = new Date(newData).getTime()
return value
}
}
}
</script>
<style>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
/* 时间整点 */
.noneMinute .el-time-spinner__wrapper {
width: 100%;
}
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
</style>

64
src/views/energy/analysis/trendAnalysis/index.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-area @submit="getList"/>
<el-tabs v-model="activeName" @tab-click="switchChart">
<el-tab-pane label="柱状图" name="bar">
<bar-chart ref="analysisBarChart" :chartData="chartData" />
</el-tab-pane>
<el-tab-pane label="折线图" name="line">
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import BarChart from "./components/barChart"
import LineChart from "./components/lineChart"
// import moment from 'moment'
export default {
name: 'TrendAnalysis',
components: { SearchArea, BarChart, LineChart },
data() {
return {
activeName: 'bar',
chartData: []
}
},
mounted() {},
methods: {
getList(params) {
getEnergyTrend({ ...params }).then((res) => {
if (res.code === 0) {
this.chartData = res.data
} else {
this.chartData = []
}
})
// getEnergyTrend({
// energyTypeId: "1681183397517406210",
// objId: "1679031282510532610",
// timeDim: "2",
// startTime: "1690732800000",
// endTime: "1690992000000"
// }).then((res) => {
// console.log(res)
// this.chartData = res.data
// })
},
switchChart() {
if (this.activeName === 'bar') {
this.$nextTick((res) => {
this.$refs.analysisBarChart.getChart()
})
} else {
this.$nextTick((res) => {
this.$refs.analysisLineChart.getChart()
})
}
}
}
}
</script>

104
src/views/energy/analysis/yoyAnalysis/components/lineChart.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div
id="analysischartLine"
style="width: 100%;height: 100%;"
></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
name: "LineChart",
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(214) - 70
}
},
props: {
chartData: {
type: Array,
required: true,
default: () => {
return []
}
}
},
watch: {
chartData: function () {
this.getChart()
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70
})
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('analysischartLine')
this.chart = echarts.init(this.chartDom)
if (this.chartData.length === 0) {
return false
}
let xData = []
let arr = this.chartData[0].type
let keys = Object.keys(this.chartData[0])
let yData = []
for (let j = 0; j < arr.length; j++) {
for (let k = 0; k < keys.length; k++) {
if (keys[k].indexOf(arr[j]+'_上年同期') > -1 || keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
let obj = {
name: '',
type: 'line',
stack: 'Total',
data: []
}
obj.name = keys[k]
yData.push(obj)
}
}
}
for (let i = 0; i < this.chartData.length; i++) {
xData.push(this.chartData[i].time)
for (let p = 0; p < yData.length; p++) {
yData[p].data.push(this.chartData[i][ yData[p].name])
}
}
var option = {
legend: {
data: keys
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: yData
};
option && this.chart.setOption(option);
}
}
}
</script>

156
src/views/energy/analysis/yoyAnalysis/components/searchArea.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="对象选择">
<el-cascader
v-model="objArr"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
clearable></el-cascader>
</el-form-item>
<el-form-item label="时间维度">
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
<el-option
v-for="item in timeType"
:key="item.id"
:label="item.name"
:value="item.id"
:clearable="false">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间">
<div v-show="queryParams.type === 1 || queryParams.type === 2">
<el-date-picker
v-model="yearValue"
type="year"
:picker-options="pickerOptions"
@change="selectTime"
:clearable="false"
placeholder="选择年">
</el-date-picker>
</div>
<div v-show="queryParams.type === 3">
<el-date-picker
v-model="yearMonth"
type="month"
:picker-options="pickerOptions"
@change="selectTime"
:clearable="false"
placeholder="选择月">
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<span class="separateStyle"></span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportData" plain>导出</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { getTree } from '@/api/base/factory'
import moment from 'moment'
export default {
name: 'searchArea',
data() {
return {
// 查询参数
queryParams: {
type: 1, // 1季度2月3日
searchTime: null,
objId: null
},
timeType: [
{id: 1, name: '季度'},
{id: 2, name: '月'},
{id: 3, name: '日'}
],
yearValue: '',
yearMonth: '',
objArr: [],
objList: [],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now()
}
}
}
},
mounted() {
this.getObjTree()
},
methods: {
getObjTree() {
getTree().then(res => {
this.objList = res.data || []
})
},
selectTime() {
if (this.queryParams.type === 3) {
this.queryParams.searchTime = this.yearMonth
} else {
this.queryParams.searchTime = this.yearValue
}
},
// 查询
search() {
if (!this.objArr.length === 0) {
this.$modal.msgError('请选择对象')
return false
} else {
this.queryParams.objId = this.objArr[this.objArr.length-1]
}
if (!this.queryParams.type) {
this.$modal.msgError('请选择时间维度')
return false
}
if (!this.queryParams.searchTime) {
this.$modal.msgError('请选择时间')
return false
}
if (this.queryParams.type === 3) {
this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
} else {
this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
}
this.$emit('submit', this.queryParams)
},
exportData() {
this.$emit('exportD')
},
transformTime(timeStamp) {// 本月最后一天
let year = moment(timeStamp).format('YYYY')
let month = moment(timeStamp).format('MM')
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
let value = new Date(newData).getTime()
return value
},
transformYear(timeStamp) {// 本年最后一天
let year = moment(timeStamp).format('YYYY')
let newData = year+'-12-31 23:59:59'
let value = new Date(newData).getTime()
return value
}
}
}
</script>
<style>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
</style>
<style scoped>
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
</style>

116
src/views/energy/analysis/yoyAnalysis/index.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/>
<div style='width: 100%;height: 300px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
<!-- 表格 -->
<base-table
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
class="yoy-out-table"
/>
</div>
</template>
<script>
import { getYoy } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import LineChart from "./components/lineChart"
import FileSaver from "file-saver"
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
name: 'YoyAnalysis',
components: { SearchArea, LineChart },
data() {
return {
chartData: [],
tableProps: [],
list: [],
tableH: this.tableHeight(500)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(500)
})
},
methods: {
getList(params) {
getYoy({ ...params }).then((res) => {
if (res.code === 0 && res.data) {
this.getTableList(res.data)
} else {
this.chartData = []
this.list = []
}
})
},
getTableList(arr) {
let data = arr.data
let nameData = arr.nameData
let tempX = []
data[0].data.map((item) => {
let obj = {}
obj.prop = item.dynamicName
obj.label = item.dynamicName
obj.id = item.id
obj.children = []
tempX.push(obj)
})
for (let i = 0; i < nameData.length; i++) {
for (let j = 0; j < tempX.length; j++) {
if (tempX[j].id === nameData[i].parentId) {
let obj = {}
obj.prop = tempX[j].prop + '_' + nameData[i].name
obj.label = nameData[i].name
tempX[j].children.push(obj)
}
}
}
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
// 数据
this.list = []
for (let k = 0; k < data.length; k++) {
let obj = {}
obj.time = data[k].time
let arr1 = data[k].data
obj.type = []
for (let q = 0; q < arr1.length; q++) {
let name = arr1[q].dynamicName
obj.type.push(name)
let arr2 = arr1[q].children
for (let p = 0; p < arr2.length; p++) {
let prop = name + '_' + arr2[p].dynamicName
obj[prop] = arr2[p].dynamicValue
}
}
this.list.push(obj)
}
this.chartData = this.list
},
exportData() {
if (this.list.length > 0) {
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
})
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"同比分析.xlsx"
)
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout
} else {
this.$modal.msgWarning("暂无数据导出")
}
}
}
}
</script>

10
src/views/energy/base/energyPlcConnect/index.vue
View File

@@ -50,7 +50,7 @@ import { getEnergyPlcConnectPage, deleteEnergyPlcConnect } from "@/api/base/ener
// import { publicFormatter } from '@/utils/dict'
import { getTree } from '@/api/base/factory'
import { getEnergyTypeListAll } from '@/api/base/energyType'
import EnergyPlcConnectAdd from './components/energyPlcConnectAdd.vue'
import EnergyPlcConnectAdd from './components/energyPlcConnectAdd'
import EnergyPlcParam from './components/energyPlcParam'
const tableProps = [
{
@@ -61,6 +61,10 @@ const tableProps = [
prop: 'objCode',
label: '对象编码'
},
{
prop: 'remark',
label: '对象备注'
},
{
prop: 'plcTableName',
label: '关联表名'
@@ -76,10 +80,6 @@ const tableProps = [
{
prop: 'varNum',
label: '绑定参数数量'
},
{
prop: 'remark',
label: '备注'
}
]
export default {

1
src/views/energy/base/energyQuantityRealtime/index.vue
View File

@@ -137,6 +137,7 @@ export default {
this.$modal.confirm('是否确认导出').then(() => {
return exportEnergyQuantityRealtimeExcel({...this.queryParams});
}).then(response => {
console.log(response)
this.$download.excel(response, '能源抄表.xls');
}).catch(() => {})
}

51
src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue
View File

@@ -27,12 +27,12 @@
</el-select>
</el-form-item>
<el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
@@ -52,7 +52,7 @@
</el-form>
</template>
<script>
import { getEnergyLimit, updateEnergyLimit, createEnergyLimit } from '@/api/monitoring/energyLimit'
import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
export default {
name: 'energyLimitAdd',
props: {
@@ -73,6 +73,8 @@ export default {
form: {
id: '',
objectId: '',
objectType: '',
energyTypeId: '',
type: '',
plcParamId: '',
limitType: '',
@@ -84,7 +86,8 @@ export default {
objectId: [{ required: true, message: '对象不能为空', trigger: 'change' }],
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }]
}
},
detailList: []
}
},
methods: {
@@ -95,10 +98,12 @@ export default {
getEnergyLimit( id ).then((res) => {
if (res.code === 0) {
this.form = res.data
this.form.plcParamId = res.data.plcParamId || ''
this.form.limitType = this.form.limitType + ''
console.log(this.objList)
this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
console.log(this.objIds)
if (this.form.type === 2) {
this.getDetailList()
}
}
})
} else {
@@ -106,8 +111,25 @@ export default {
this.form.id = ''
}
},
typeChange() {
// 监控详细参数
getDetailList() {
getEnergyParamList({
objId: this.form.objectId,
energyTypeId: this.form.energyTypeId
}).then((res) => {
if (res.code === 0) {
this.detailList = res.data
} else {
this.detailList = []
}
})
},
typeChange(val) {
console.log(this.form)
this.form.plcParamId = ''
if (val === 2) {
this.getDetailList()
}
},
// 递归处理分类回显问题
changeDetSelect(key, treeData) {
@@ -137,9 +159,16 @@ export default {
this.form.objectId = val[val.length-1]
this.form.objectType = val.length-1
},
selectDetail() {
this.$forceUpdate()
},
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.type === 2 && !this.form.plcParamId) {
this.$modal.msgError("监控模式为详细时，详细参数为必填");
return false
}
// this.form.limitType = Number(this.form.limitType)
if (this.isEdit) {
// 编辑
@@ -164,6 +193,8 @@ export default {
},
formClear() {
this.$refs.form.resetFields()
this.objIds = ''
this.detailList = []
this.isEdit = false
}
}

2
src/views/energy/monitoring/energyLimit/index.vue
View File

@@ -231,7 +231,7 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除监控参数为"' + row.plcParamName + '"的数据项?').then(function() {
this.$modal.confirm('是否确认删除监控对象为"' + row.objName + '"的数据项?').then(function() {
return deleteEnergyLimit(row.id);
}).then(() => {
this.queryParams.pageNo = 1;

56
src/views/energy/monitoring/energyReport/index.vue
View File

@@ -25,11 +25,10 @@
</template>
<script>
import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport";
import { parseTime } from '@/utils/ruoyi'
import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport"
import { getEnergyTypeListAll } from "@/api/base/energyType";
// import { getTree } from '@/api/base/factory'
import { publicFormatter } from '@/utils/dict'
import { parseTime } from '@/utils/ruoyi'
const tableProps = [
{
prop: 'statisticType',
@@ -70,7 +69,7 @@ const tableProps = [
}
]
export default {
name: "EnergyReportSearch",
name: "EnergyLimit",
data() {
return {
formConfig: [
@@ -78,7 +77,8 @@ export default {
type: 'select',
label: '能源类型',
selectOptions: [],
param: 'energyTypeId'
param: 'energyTypeId',
filterable: true
},
{
type: 'select',
@@ -93,7 +93,7 @@ export default {
label: '时间',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: "yyyy-MM-ddTHH:mm:ss",
valueFormat: "timestamp",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
@@ -111,7 +111,7 @@ export default {
type: 'separate'
},
{
type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
type: this.$auth.hasPermi('monitoring:energy-report:export') ? 'button' : '',
btnName: '导出',
name: 'add',
color: 'primary',
@@ -129,23 +129,17 @@ export default {
pageNo: 1,
pageSize: 20,
energyTypeId: null,
statisticType: null,
startTime: null,
endTime: null,
statisticType: null
},
energyTypeList: [],
typeList: [
{label: '合并', value: '1'},
{label: '详细', value: '2'}
],
objList: []
endTime: null
}
};
},
created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
this.getList();
this.getList()
this.getTypeList()
},
methods: {
@@ -158,33 +152,25 @@ export default {
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.queryParams.pageNo = 1;
this.queryParams.pageNo = 1
this.queryParams.energyTypeId = val.energyTypeId
this.queryParams.statisticType = val.statisticType
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
this.getList()
break
default:
this.addOrEditTitle = '新增'
this.centervisible = true
this.$nextTick(() => {
this.$refs.energyLimit.init()
})
this.$modal.confirm('是否确认导出').then(() => {
return energyReportPageExportAuto({...this.queryParams});
}).then(response => {
this.$download.excel(response, '能源统计报表.xls');
}).catch(() => {})
}
},
/** 查询列表 */
getList() {
energyReportPageAuto({...this.queryParams}).then(response => {
let arr = response.data.list || [];
// arr&&arr.map(item => {
// this.typeList.map(i => {
// if (item.type === i.value) {
// item.type = i.label
// }
// })
// })
this.list = arr
energyReportPageAuto(this.queryParams).then(response => {
this.list = response.data.list || [];
this.total = response.data.total;
});
}

76
src/views/energy/monitoring/energyReportSearch/index.vue
View File

@@ -26,7 +26,7 @@
<script>
import { energyReportPage, energyReportPageExport } from "@/api/monitoring/energyReport";
// import { publicFormatter } from '@/utils/dict'
import { getEnergyTypeListAll } from "@/api/base/energyType"
const tableProps = [
{
prop: 'statisticName',
@@ -59,18 +59,26 @@ export default {
label: '统计方案',
param: 'statisticName'
},
{
type: 'select',
label: '能源类型',
selectOptions: [],
param: 'energyTypeId',
filterable: true
},
{
type: 'datePicker',
label: '时间',
label: '时间(必填)',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: "yyyy-MM-ddTHH:mm:ss",
valueFormat: "timestamp",
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
defaultSelect: [],
width: 350
width: 350,
clearable: false
},
{
type: 'button',
@@ -82,7 +90,7 @@ export default {
type: 'separate'
},
{
type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
type: this.$auth.hasPermi('monitoring:energy-report-search:export') ? 'button' : '',
btnName: '导出',
name: 'add',
color: 'primary',
@@ -103,65 +111,49 @@ export default {
startTime: null,
endTime: null
},
energyTypeList: [],
typeList: [
{label: '合并', value: '1'},
{label: '详细', value: '2'}
],
objList: []
energyTypeList: []
};
},
created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
this.getList();
this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
this.getList()
this.getTypeList()
},
methods: {
getTypeList() {
getEnergyTypeListAll().then((res) => {
this.formConfig[1].selectOptions = res.data || []
})
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.queryParams.pageNo = 1;
this.queryParams.pageNo = 1
this.queryParams.statisticName = val.statisticName
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
this.queryParams.energyTypeId = val.energyTypeId
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
this.getList()
break
default:
this.addOrEditTitle = '新增'
this.centervisible = true
this.$nextTick(() => {
this.$refs.energyLimit.init()
})
this.$modal.confirm('是否确认导出').then(() => {
return energyReportPageExport({...this.queryParams});
}).then(response => {
this.$download.excel(response, '能源统计查询报表.xls');
}).catch(() => {})
}
},
/** 查询列表 */
getList() {
energyReportPage({...this.queryParams}).then(response => {
let arr = response.data.list || [];
// arr&&arr.map(item => {
// this.typeList.map(i => {
// if (item.type === i.value) {
// item.type = i.label
// }
// })
// })
this.list = arr
this.list = response.data.list || [];
this.total = response.data.total;
});
},
handleClick(val) {
switch (val.type) {
case 'edit':
this.addOrEditTitle = '编辑'
this.$nextTick(() => {
this.$refs.energyLimit.init(val.data.id)
})
this.centervisible = true
break
default:
this.handleDelete(val.data)
}
}
}
};

4
src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue
View File

@@ -53,6 +53,10 @@ const tableProps = [
prop: 'objName',
label: '所属对象'
},
{
prop: 'objRemark',
label: '对象备注'
},
{
prop: 'paramName',
label: '参数名称'

4
src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue
View File

@@ -40,6 +40,10 @@ const tableProps = [
prop: 'objName',
label: '所属对象'
},
{
prop: 'objRemark',
label: '对象备注'
},
{
prop: 'paramName',
label: '参数名称'

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>

8
src/views/group/base/groupTeam/index.vue
View File

@@ -87,14 +87,14 @@ export default {
formConfig: [
{
type: 'input',
label: '班次名称',
placeholder: '班次名称',
label: '班组名称',
placeholder: '班组名称',
param: 'name'
},
{
type: 'input',
label: '班次编码',
placeholder: '班次编码',
label: '班组编码',
placeholder: '班组编码',
param: 'code'
},
{

147
src/views/group/base/groupTeamScheduling/components/groupUpperLower.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div>
<el-drawer title="班组上下片" :visible.sync="visible" size="80%" @close='closeD'>
<div class="box">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
/>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
</el-drawer>
</div>
</template>
<script>
const tableProps = [
{
prop: 'name',
label: '产线名称'
},
{
prop: 'code',
label: '投入数量/片'
},
{
prop: 'code1',
label: '产出数量/片'
},
{
prop: 'num2',
label: '产出面积/㎡'
},
{
prop: 'num3',
label: '损耗数量/片'
},
{
prop: 'num4',
label: '损耗面积/㎡'
},
{
prop: 'num5',
label: '损耗比例/%'
}
]
export default {
name: 'GroupUpperLower',
data() {
return {
visible: false,
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'xb2',
width: 120,
defaultSelect: 2 // 默认值
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'searchTime2'
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary'
},
{
type: 'separate'
},
{
type: this.$auth.hasPermi('base:group-team:create') ? 'button' : '',
btnName: '导出',
name: 'export',
color: 'success',
plain: true
}
],
tableProps,
list: [],
tableH: this.tableHeight(260),
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 20
},
total: 0
}
},
methods: {
init() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
this.visible = true
},
getList() {},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.queryParams.pageNo = 1
this.queryParams.name = val.name
this.queryParams.code = val.code
this.getList()
break
default:
this.addOrEditTitle = '新增'
this.centervisible = true
this.$nextTick(() => {
this.$refs.groupList.init()
})
}
},
closeD() {
// this.$emit('closeDrawer')
}
}
}
</script>
<style lang="scss" scoped>
.box {
padding: 0 32px;
}
</style>

240
src/views/group/base/groupTeamScheduling/index.vue
View File

@@ -1,232 +1,66 @@
<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="startDay">
<el-input v-model="queryParams.startDay" placeholder="请输入上班日期" 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:group-team-scheduling: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:group-team-scheduling: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="teamId" />
<el-table-column label="班次id" align="center" prop="classesId" />
<el-table-column label="上班日期" align="center" prop="startDay" />
<el-table-column label="上班时间" align="center" prop="startTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.startTime) }}</span>
</template>
</el-table-column>
<el-table-column label="下班时间" align="center" prop="endTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.endTime) }}</span>
</template>
</el-table-column>
<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:group-team-scheduling:update']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['base:group-team-scheduling: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="teamId">
<el-input v-model="form.teamId" placeholder="请输入班组ID" />
<div>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="月份选择">
<el-date-picker
v-model="queryParams.startDay"
type="month"
placeholder="选择月">
</el-date-picker>
</el-form-item>
<el-form-item label="班次id" prop="classesId">
<el-input v-model="form.classesId" placeholder="请输入班次id" />
<el-form-item>
<el-button type="primary">自动排班</el-button>
</el-form-item>
<el-form-item label="上班日期" prop="startDay">
<el-input v-model="form.startDay" placeholder="请输入上班日期" />
<el-form-item>
<el-button type="primary">编辑</el-button>
</el-form-item>
<el-form-item label="上班时间" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
<el-form-item>
<el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
</el-form-item>
<el-form-item label="下班时间" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
<el-form-item>
<el-button type="primary" plain>班组能源查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" plain>班组检测查询</el-button>
</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>
<!-- 班组上下片查询 -->
<group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
</div>
</template>
<script>
import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
import GroupUpperLower from "./components/groupUpperLower.vue"
export default {
name: "GroupTeamScheduling",
components: {
},
components: { GroupUpperLower },
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 排班信息列表
list: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
monthList: [
{id: ''}
],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
startDay: [],
pageSize: 10
},
// 表单参数
form: {},
// 表单校验
rules: {
teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
}
upperLowerVisible: false
};
},
created() {
this.getList();
this.getList()
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getGroupTeamSchedulingPage(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,
teamId: undefined,
classesId: undefined,
startDay: undefined,
startTime: undefined,
endTime: 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;
getGroupTeamScheduling(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) {
updateGroupTeamScheduling(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
return;
}
// 添加的提交
createGroupTeamScheduling(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 deleteGroupTeamScheduling(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 exportGroupTeamSchedulingExcel(params);
}).then(response => {
this.$download.excel(response, '排班信息.xls');
this.exportLoading = false;
}).catch(() => {});
getList() {},
toUpperLower() {
this.upperLowerVisible = true
this.$nextTick(() => {
this.$refs.upperLowerParam.init()
})
}
}
};

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>

Some files were not shown because too many files have changed in this diff Show More