yangxueqian/wcs_client_s7_baoying
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7号厂房立库web基础能用版本

Browse Source
This commit is contained in:
杨学谦 2024-06-20 09:50:44 +08:00
commit 1c6ac663bd
123 changed files with 22112 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

19
README.md Normal file
View File

@ -0,0 +1,19 @@
# wcs_web
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
jsconfig.json Normal file
View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

1
nvmrc Normal file
View File

@ -0,0 +1 @@
21.6.2

12040
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

38
package.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "wcs_web",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"core-js": "^3.8.3",
"element-plus": "2.5.6",
"moment": "^2.30.1",
"print-js": "^1.6.0",
"qrcode": "^1.5.3",
"vue": "^3.2.13",
"vue-cli": "^2.9.6",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"axios": "^1.6.7",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-element-plus": "^0.0.13"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

BIN
public/ico/bklogo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
public/image/BKLogoSmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

25
public/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="ico/bklogo.ico">
<title>WCS控制系统网页端</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</html>

47
src/App.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<MainPage/>
</template>
<script>
import MainPage from "@/view/layout/MainPage.vue";
const debounce = (fn, delay) => {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
};
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
};
export default {
name: 'App',
components: {
MainPage
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin: 0 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

10
src/axios/api.accept.js Normal file
View File

@ -0,0 +1,10 @@
import axios from '@/axios/base/base.axios';
export default {
// 分页控件查询
getApiAcceptInfoWithPage(request) {
return axios.post('/api/wcs/apiAccept/getApiAcceptWithPage', request)
}
}

14
src/axios/api.request.js Normal file
View File

@ -0,0 +1,14 @@
import axios from '@/axios/base/base.axios';
export default {
// 请求后台服务获取所有的请求列表
getApiRequestInfo() {
return axios.get('/api/wcs/apiRequest/getApiRequest')
},
// 分页控件查询
getApiRequestInfoWithPage(request) {
return axios.post('/api/wcs/apiRequest/getApiRequestWithPage', request)
}
}

33
src/axios/base/base.axios.js Normal file
View File

@ -0,0 +1,33 @@
import axios from "axios";
if(process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://localhost:890';
}else {
axios.defaults.baseURL = 'http://192.168.7.243:890';
}
//axios.defaults.headers.post['Content-Type'] = 'application/json';
//axios.defaults.responseType = 'application/json'
axios.defaults.timeout = 5000
// axios.interceptors.request.use(function (config) {
// // 在发送请求之前做些什么
// return config;
// }, function (error) {
// // 对请求错误做些什么
// return Promise.reject(error);
// });
// 添加响应拦截器
// axios.interceptors.response.use(function (response) {
// // 2xx 范围内的状态码都会触发该函数。
// // 对响应数据做点什么
// return response;
// }, function (error) {
// // 超出 2xx 范围的状态码都会触发该函数。
// // 对响应错误做点什么
// console.log('请求发生错误，错误信息：' + error)
// return Promise.reject(error);
// });
//
export default axios;

14
src/axios/config.js Normal file
View File

@ -0,0 +1,14 @@
import axios from '@/axios/base/base.axios';
const config = {
// 分页获取系统配置信息
getConfigWithPage(pageEntity) {
return axios.post('api/wcs/config/getConfigWithPage', pageEntity)
},
}
export default config

16
src/axios/db.js Normal file
View File

@ -0,0 +1,16 @@
import axios from '@/axios/base/base.axios';
export default {
// 查询Db数据，顺便返回PLC名称
getDbWithName(req) {
return axios.post('/api/wcs/db/getDBWithPlcName', req)
},
// 添加或者变更DB信息
addOrUpdate(req) {
return axios.post('/api/wcs/db/addOrUpdate', req)
},
// 删除一个DB信息
deleteData(dbName) {
return axios.delete('/api/wcs/db/deleteDB', { params: { dbName: dbName }})
}
}

16
src/axios/el.tag.js Normal file
View File

@ -0,0 +1,16 @@
import axios from '@/axios/base/base.axios';
export default {
// 分页查询电子标签任务
getElTagTaskWithPage(request) {
return axios.post('/api/wcs/elTag/queryTaskWithPage', request);
},
// 更新电子标签任务 ---- 暂时只支持更新状态，需要改后端
updateElTagTask(request) {
return axios.post('/api/wcs/elTag/editTaskInfo', request);
},
// 添加一条电子标签任务
insertElTagTask(request) {
return axios.post('/api/wcs/elTag/addTask', request);
},
}

18
src/axios/location.js Normal file
View File

@ -0,0 +1,18 @@
import axios from '@/axios/base/base.axios';
export default {
// 请求Wcs服务获取所有的点位列表
getLocation() {
return axios.get('/api/wcs/location/getLocation')
},
// 请求Wcs服务获取所有的点位列表 ---- 分页请求
getLocationWithPage(pageEntity) {
return axios.post('/api/wcs/location/getLocationWithPage', pageEntity)
},
// 请求Wcs服务更新点位状态
updateLocationStatus(locationDto) {
return axios.post('/api/wcs/location/updateLocation', locationDto)
}
}

17
src/axios/menu.js Normal file
View File

@ -0,0 +1,17 @@
import axios from '@/axios/base/base.axios';
export default {
// 分页控件查询
getMenuDataWithPage(request) {
return axios.post('/api/wcs/menu/getMenuWithPage', request)
},
// 更新信息
updateMenu(request) {
return axios.post('/api/wcs/menu/updateMenu', request)
},
addMenu(request) {
return axios.post('/api/wcs/menu/addMenu', request)
}
}

20
src/axios/plc.js Normal file
View File

@ -0,0 +1,20 @@
import axios from '@/axios/base/base.axios';
export default {
// 获取所有PLC数据
getPlc() {
return axios.get('/api/wcs/plc/getPlc')
},
// 编辑PLC数据
editPlc(plcDataItem) {
return axios.post('/api/wcs/plc/editePlc', plcDataItem)
},
// 删除一条数据
deletePlc(plcId) {
return axios.delete('/api/wcs/plc/deletePlc', {
params: {
plcId: plcId
}
})
},
}

16
src/axios/stacker.js Normal file
View File

@ -0,0 +1,16 @@
import axios from '@/axios/base/base.axios';
export default {
// 获取所有堆垛机状态
getStackerStatus() {
return axios.get('/api/wcs/stacker/getStackerStatus')
},
// 获取所有堆垛机数据
getStackerData() {
return axios.get('/api/wcs/stacker/getStacker')
},
// 编辑/更新堆垛机信息
editStackerData(stackerDataItem) {
return axios.post('/api/wcs/stacker/editStacker', stackerDataItem)
},
}

34
src/axios/system.js Normal file
View File

@ -0,0 +1,34 @@
import axios from '@/axios/base/base.axios';
export default {
// 请求服务器获取所有信息列表 ---- 分页请求
getSysMsgWithPage(pageEntity) {
return axios.post('/api/wcs/runningInfo/getSysMsgWithPage', pageEntity)
},
// 验证文件是否存在
checkDownloadFile(req) {
return axios.post('/api/wcs/runningInfo/checkDownLoadLog', req)
},
getLogFileName(req) {
return axios.get('/api/wcs/runningInfo/getLogFileName', {
params: {
logType: req
}
})
},
// 下载文件
downloadFile(req) {
return axios({
// 用axios发送post请求
method: "post",
url: '/api/wcs/runningInfo/downLoadLog', // 请求地址 ，也可以传递参数
headers: {
},
data: req,
responseType: "blob", // 表明返回服务器返回的数据类型
timeout: 30000
})
}
}

20
src/axios/user.group.js Normal file
View File

@ -0,0 +1,20 @@
import axios from '@/axios/base/base.axios';
export default {
// 查询所有的用户组信息
getUserGroup() {
return axios.get('api/wcs/userGroup/getUserGroup')
},
// 添加用户组
addUserGroup(userGroup) {
return axios.post('api/wcs/userGroup/addUserGroup', userGroup)
},
// 删除用户组
deleteUserGroup(groupId) {
return axios.delete('api/wcs/userGroup/deleteUserGroup', {
params: {
groupId: groupId
}
})
}
}

17
src/axios/user.js Normal file
View File

@ -0,0 +1,17 @@
import axios from '@/axios/base/base.axios';
export default {
// 调用登录接口
login(loginUser) {
return axios.post('api/wcs/user/login', loginUser)
},
/**
* 分页查询所有的用户信息
* @param searchParams
* @returns {Promise<axios.AxiosResponse<any>>}
*/
getUserWithPage(searchParams) {
return axios.post('api/wcs/user/getUserWithPage', searchParams)
}
}

16
src/axios/user.rule.js Normal file
View File

@ -0,0 +1,16 @@
import axios from '@/axios/base/base.axios';
export default {
// 查询所有的用户组对应的菜单权限信息
getUserGroupMenu(groupId) {
return axios.get('api/wcs/userRule/getUserRule', {
params: {
groupId: groupId
}
})
},
// 更新用户组权限
updateUserGroupMenu(request) {
return axios.post('api/wcs/userRule/updateUserRule', request)
},
}

28
src/axios/wcs.task.js Normal file
View File

@ -0,0 +1,28 @@
import axios from '@/axios/base/base.axios';
export default {
// 请求Wcs服务获取所有的Wcs任务列表
getWcsTask() {
return axios.get('/api/wcs/wcsTask/getWcsTask')
},
// 请求后台获取对应WMS的WCS子任务用于展示
getWcsTaskWithTaskId(taskId) {
return axios.get('/api/Wcs/wcsTask/getWcsTaskWithTaskId',
{
params: {
taskId: taskId
}
})
},
// 请求服务器获取所有 Wms 任务列表 ---- 分页请求
getWcsTaskWithPage(pageEntity) {
return axios.post('/api/wcs/wcsTask/getWcsTaskWithPage', pageEntity)
},
// 请求修改 wcs 任务的状态
updateWcsStatus(updateData) {
return axios.post('/api/wcs/wcsTask/updateStatus', updateData)
}
}

23
src/axios/wms.task.js Normal file
View File

@ -0,0 +1,23 @@
import axios from '@/axios/base/base.axios';
export default {
// 请求后台服务获取所有的Wms任务列表
getWmsTask() {
return axios.get('/api/wcs/wmsTask/getWmsTask')
},
// 请求后台服务器添加任务
addWmsTask(wmsTask) {
return axios.post("api/wcs/wmsTask/setStackerTask",wmsTask)
},
// 请求后台变更Wms任务状态
changeTaskStatus(changeEntity) {
return axios.post("api/wcs/wmsTask/updateWmsTaskStatus",changeEntity)
},
// 请求服务器获取所有 Wms 任务列表 ---- 分页请求
getWmsTaskWithPage(pageEntity) {
return axios.post('/api/wcs/wmsTask/getWmsTaskWithPage', pageEntity)
}
}

24
src/enum/base/on.off.enum.js Normal file
View File

@ -0,0 +1,24 @@
// 开启和关闭枚举
export const onOrOffEnum = {
on: {
value: 0,
label: '关闭',
type: 'warning'
},
off: {
value: 1,
label: '开启',
type: 'success'
}
}
export function formatterOnOrOffEnum(value) {
switch (parseInt(value)){
case onOrOffEnum.on.value:
return {label: onOrOffEnum.on.label, type: onOrOffEnum.on.type};
case onOrOffEnum.off.value:
return {label: onOrOffEnum.off.label, type: onOrOffEnum.off.type};
default:
return {label: `未知类型：${value}`, type: 'danger'};
}
}

47
src/enum/elTag/eltag.task.enum.js Normal file
View File

@ -0,0 +1,47 @@
// 电子标签任务状态
export const elTagTaskStatusEnum = {
creat: {
value: 0,
label: '待点亮',
color: 'info'
},
queue: {
value: 1,
label: '正在点亮',
color: 'success'
},
running: {
value: 2,
label: '已确认',
color: 'warning'
},
off: {
value: 3,
label: '已熄灭',
color: 'primary'
},
error: {
value: 9,
label: '异常',
color: 'danger'
}
}
export function formatterElTagTaskStatusEnum(value) {
switch (parseInt(value)){
case elTagTaskStatusEnum.creat.value:
return {label: elTagTaskStatusEnum.creat.label, color: elTagTaskStatusEnum.creat.color};
case elTagTaskStatusEnum.queue.value:
return {label: elTagTaskStatusEnum.queue.label, color: elTagTaskStatusEnum.queue.color};
case elTagTaskStatusEnum.running.value:
return {label: elTagTaskStatusEnum.running.label, color: elTagTaskStatusEnum.running.color};
case elTagTaskStatusEnum.off.value:
return {label: elTagTaskStatusEnum.off.label, color: elTagTaskStatusEnum.off.color};
case elTagTaskStatusEnum.error.value:
return {label: elTagTaskStatusEnum.error.label, color: elTagTaskStatusEnum.error.color};
default:
return {label: `未知类型：${value}`, color: 'danger'};
}
}

24
src/enum/elTag/eltag.task.type.enum.js Normal file
View File

@ -0,0 +1,24 @@
// 电子标签任务类型
export const elTagTaskTypeEnum = {
pick: {
value: 1,
label: '拣选任务',
color: 'primary'
},
stock: {
value: 2,
label: '存储任务',
color: 'warning'
}
}
export function formatterElTagTaskTypeEnum(value) {
switch (parseInt(value)){
case elTagTaskTypeEnum.pick.value:
return {label: elTagTaskTypeEnum.pick.label, color: elTagTaskTypeEnum.pick.color};
case elTagTaskTypeEnum.stock.value:
return {label: elTagTaskTypeEnum.stock.label, color: elTagTaskTypeEnum.stock.color};
default:
return {label: `未知类型：${value}`, color: 'danger'};
}
}

46
src/enum/location/locationStatusEnum.js Normal file
View File

@ -0,0 +1,46 @@
// 库位状态
export const locationStatusEnum = {
creat: {
value: 0,
label: '空闲',
type: 'success'
},
queue: {
value: 1,
label: '锁定',
type: 'warning'
},
running: {
value: 2,
label: '占用',
type: 'primary'
},
finish: {
value: 9,
label: '禁用',
type: 'danger'
},
error: {
value: 999,
label: '特殊点位',
type: 'info'
}
}
export function formatterLocationStatusEnum(value) {
switch (parseInt(value)){
case locationStatusEnum.creat.value:
return {label: locationStatusEnum.creat.label, type: locationStatusEnum.creat.type};
case locationStatusEnum.queue.value:
return {label: locationStatusEnum.queue.label, type: locationStatusEnum.queue.type};
case locationStatusEnum.running.value:
return {label: locationStatusEnum.running.label, type: locationStatusEnum.running.type};
case locationStatusEnum.finish.value:
return {label: locationStatusEnum.finish.label, type: locationStatusEnum.finish.type};
case locationStatusEnum.error.value:
return {label: locationStatusEnum.error.label, type: locationStatusEnum.error.type};
default:
return {label: `未知类型：${value}`, type: 'danger'};
}
}

46
src/enum/location/locationTypeEnum.js Normal file
View File

@ -0,0 +1,46 @@
// 库位类型
export const locationTypeEnum = {
creat: {
value: 0,
label: '库位',
type: 'info'
},
queue: {
value: 1,
label: '入库站台',
type: 'success'
},
running: {
value: 2,
label: '出库站台',
type: 'warning'
},
finish: {
value: 12,
label: '出入库站台',
type: 'danger'
},
error: {
value: 9,
label: '移库暂存点',
type: 'primary'
}
}
export function formatterLocationTypeEnum(value) {
switch (parseInt(value)){
case locationTypeEnum.creat.value:
return {label: locationTypeEnum.creat.label, type: locationTypeEnum.creat.type};
case locationTypeEnum.queue.value:
return {label: locationTypeEnum.queue.label, type: locationTypeEnum.queue.type};
case locationTypeEnum.running.value:
return {label: locationTypeEnum.running.label, type: locationTypeEnum.running.type};
case locationTypeEnum.finish.value:
return {label: locationTypeEnum.finish.label, type: locationTypeEnum.finish.type};
case locationTypeEnum.error.value:
return {label: locationTypeEnum.error.label, type: locationTypeEnum.error.type};
default:
return {label: `未知类型：${value}`, type: 'danger'};
}
}

52
src/enum/stacker/stackerControlModelEnum.js Normal file
View File

@ -0,0 +1,52 @@
// 堆垛机控制方式
export const stackerControlModel = {
offline: {
value: 0,
label: '离线',
type: 'warning'
},
selfLearning: {
value: 1,
label: '自学习',
type: 'primary'
},
debug: {
value: 2,
label: '调试',
type: 'primary'
},
manual: {
value: 3,
label: '手动',
type: 'primary'
},
standAlone: {
value: 4,
label: '单机',
type: 'primary'
},
online: {
value: 5,
label: '联机',
type: 'success'
}
}
export function formatterStackerControlModel(value) {
switch (parseInt(value)){
case stackerControlModel.offline.value:
return {label: stackerControlModel.offline.label, type: stackerControlModel.offline.type};
case stackerControlModel.selfLearning.value:
return {label: stackerControlModel.selfLearning.label, type: stackerControlModel.selfLearning.type};
case stackerControlModel.debug.value:
return {label: stackerControlModel.debug.label, type: stackerControlModel.debug.type};
case stackerControlModel.manual.value:
return {label: stackerControlModel.manual.label, type: stackerControlModel.manual.type};
case stackerControlModel.standAlone.value:
return {label: stackerControlModel.standAlone.label, type: stackerControlModel.standAlone.type};
case stackerControlModel.online.value:
return {label: stackerControlModel.online.label, type: stackerControlModel.online.type};
default:
return {label: `未知类型：${value}`, type: 'danger'};
}
}

101
src/enum/stacker/stackerStatusEnum.js Normal file
View File

@ -0,0 +1,101 @@
// 堆垛机状态 ---- 设备
export const stackerControlModel = {
offline: {
value: 0,
label: '离线',
type: 'warning'
},
free: {
value: 1,
label: '空闲',
type: 'success'
},
acceptTask: {
value: 2,
label: '任务接收',
type: 'Info'
},
getMove: {
value: 3,
label: '取货移动',
type: 'Info'
},
getting: {
value: 4,
label: '取货中',
type: 'Info'
},
getComplete: {
value: 5,
label: '取货完成',
type: 'Info'
},
setMove: {
value: 6,
label: '卸货移动',
type: 'Info'
},
setting: {
value: 7,
label: '卸货中',
type: 'Info'
},
setComplete: {
value: 8,
label: '卸货完成',
type: 'Info'
},
taskComplete: {
value: 9,
label: '任务完成',
type: 'Info'
},
deleteTask: {
value: 10,
label: '删除任务',
type: 'Info'
},
checking: {
value: 11,
label: '盘点中',
type: 'Info'
},
applyTask: {
value: 12,
label: '二次预约申请',
type: 'primary'
}
}
export function formatterStackerStatus(value) {
switch (parseInt(value)){
case stackerControlModel.offline.value:
return {label: stackerControlModel.offline.label, type: stackerControlModel.offline.type};
case stackerControlModel.free.value:
return {label: stackerControlModel.free.label, type: stackerControlModel.free.type};
case stackerControlModel.acceptTask.value:
return {label: stackerControlModel.acceptTask.label, type: stackerControlModel.acceptTask.type};
case stackerControlModel.getMove.value:
return {label: stackerControlModel.getMove.label, type: stackerControlModel.getMove.type};
case stackerControlModel.getting.value:
return {label: stackerControlModel.getting.label, type: stackerControlModel.getting.type};
case stackerControlModel.getComplete.value:
return {label: stackerControlModel.getComplete.label, type: stackerControlModel.getComplete.type};
case stackerControlModel.setMove.value:
return {label: stackerControlModel.setMove.label, type: stackerControlModel.setMove.type};
case stackerControlModel.setting.value:
return {label: stackerControlModel.setting.label, type: stackerControlModel.setting.type};
case stackerControlModel.setComplete.value:
return {label: stackerControlModel.setComplete.label, type: stackerControlModel.setComplete.type};
case stackerControlModel.taskComplete.value:
return {label: stackerControlModel.taskComplete.label, type: stackerControlModel.taskComplete.type};
case stackerControlModel.deleteTask.value:
return {label: stackerControlModel.deleteTask.label, type: stackerControlModel.deleteTask.type};
case stackerControlModel.checking.value:
return {label: stackerControlModel.checking.label, type: stackerControlModel.checking.type};
case stackerControlModel.applyTask.value:
return {label: stackerControlModel.applyTask.label, type: stackerControlModel.applyTask.type};
default:
return {label: `未知类型：${value}`, type: 'danger'};
}
}

47
src/enum/taskEnum/wms.taskStatus.enum.js Normal file
View File

@ -0,0 +1,47 @@
import baseColor from "@/plugins/color/base.color";
// wms任务状态
export const wmsTaskStatusEnum = {
creat: {
value: 0,
label: '新创建',
color: 'info'
},
queue: {
value: 1,
label: '排队中',
color: 'warning'
},
running: {
value: 2,
label: '执行中',
color: 'primary'
},
finish: {
value: 3,
label: '执行完成',
color: 'success'
},
error: {
value: 9,
label: '执行异常',
color: 'danger'
}
}
export function formatterWmsTaskStatusEnum(value) {
switch (parseInt(value)){
case wmsTaskStatusEnum.creat.value:
return {label: wmsTaskStatusEnum.creat.label, color: wmsTaskStatusEnum.creat.color};
case wmsTaskStatusEnum.queue.value:
return {label: wmsTaskStatusEnum.queue.label, color: wmsTaskStatusEnum.queue.color};
case wmsTaskStatusEnum.running.value:
return {label: wmsTaskStatusEnum.running.label, color: wmsTaskStatusEnum.running.color};
case wmsTaskStatusEnum.finish.value:
return {label: wmsTaskStatusEnum.finish.label, color: wmsTaskStatusEnum.finish.color};
case wmsTaskStatusEnum.error.value:
return {label: wmsTaskStatusEnum.error.label, color: wmsTaskStatusEnum.error.color};
default:
return {label: `未知类型：${value}`, color: baseColor.Red};
}
}

47
src/enum/taskEnum/wms.taskType.enum.js Normal file
View File

@ -0,0 +1,47 @@
import baseColor from "@/plugins/color/base.color";
// wms任务类型
export const wmsTaskTypeEnum = {
inTask:{
value:1,
label:'入库任务',
color: 'success'
},
outTask:{
value:2,
label:'出库任务',
color: 'warning'
},
pickTask:{
value:4,
label:'拣货任务',
color: 'info'
},
checkTask:{
value:10,
label:'盘点任务',
color: 'danger'
},
moveTask:{
value:9,
label:'移库任务',
color: 'primary'
}
}
export function formatterWmsTaskType(value) {
switch (parseInt(value)){
case wmsTaskTypeEnum.inTask.value:
return {label: wmsTaskTypeEnum.inTask.label, color: wmsTaskTypeEnum.inTask.color}
case wmsTaskTypeEnum.outTask.value:
return {label: wmsTaskTypeEnum.outTask.label, color: wmsTaskTypeEnum.outTask.color}
case wmsTaskTypeEnum.pickTask.value:
return {label: wmsTaskTypeEnum.pickTask.label, color: wmsTaskTypeEnum.pickTask.color}
case wmsTaskTypeEnum.checkTask.value:
return {label: wmsTaskTypeEnum.checkTask.label, color: wmsTaskTypeEnum.checkTask.color}
case wmsTaskTypeEnum.moveTask.value:
return {label: wmsTaskTypeEnum.moveTask.label, color: wmsTaskTypeEnum.moveTask.color}
default:
return {label: `未知类型：${value}`, color: baseColor.Danger}
}
}

14
src/main.js Normal file
View File

@ -0,0 +1,14 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import installElementPlus from './plugins/element'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
installElementPlus(app)
app.use(store).use(router).mount('#app')

47
src/plugins/color/base.color.js Normal file
View File

@ -0,0 +1,47 @@
// 常用颜色
export default {
Primary: '#409EFF',
Success: '#67C23A',
Warning: '#E6A23C',
Danger: '#F56C6C',
Green: '#00B050',
Red: '#FF0000',
Blue: '#0088FF',
Yellow: '#FFFF00',
Purple: '#7030A0',
Gray: '#808080',
Black: '#000000',
White: '#FFFFFF',
Orange: '#FFC000',
Pink: '#FF00FF',
Brown: '#A52A2A',
Cyan: '#00FFFF',
Lime: '#CDDC39',
Magenta: '#FF00FF',
Navy: '#000080',
Olive: '#808000',
Teal: '#008080',
Maroon: '#800000',
Silver: '#C0C0C0',
Gold: '#FFD700',
Lavender: '#E6E6FA',
Turquoise: '#40E0D0',
Violet: '#EE82EE',
Aquamarine: '#7FFFD4',
Beige: '#F5F5DC',
Coral: '#FF7F50',
Crimson: '#DC143C',
Fuchsia: '#FF00FF',
Indigo: '#4B0082',
Khaki: '#F0E68C',
Lilac: '#C8A2C8',
Mint: '#3EFF89',
Plum:'#DDA0DD',
Rose: '#FFC0CB',
Sienna: '#A0522D',
Tan: '#D2B48C',
Wheat: '#F5DEB3',
Aqua: '#00FFFF',
Bisque: '#FFE4C4',
}

17
src/plugins/dataCheck/json.extend.js Normal file
View File

@ -0,0 +1,17 @@
const check ={
isJson(value) {
try {
JSON.parse(value)
return true
}catch{}
return false
},
toJsonParse(value) {
try {
return JSON.stringify(JSON.parse(value), null, 4)
}catch{}
return value
}
}
export default check

7
src/plugins/element.js Normal file
View File

@ -0,0 +1,7 @@
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/es/locale/lang/zh-cn'
export default (app) => {
app.use(ElementPlus, { locale })
}

23
src/plugins/formatter/formatter.bool.js Normal file
View File

@ -0,0 +1,23 @@
const format = {
// 格式化True False
formatTrueFalse(bool) {
switch (bool) {
case true:
return {msg: '是', type: 'success', color: ''};
default:
return {msg: `否`, type: 'danger', color: ''};
}
},
formatTrueFalseNum(num) {
switch (num) {
case '1':
return {msg: '是', type: 'success', color: ''};
case 1:
return {msg: '是', type: 'success', color: ''};
default:
return {msg: `否`, type: 'danger', color: ''};
}
}
}
export default format

21
src/plugins/formatter/formatter.location.js Normal file
View File

@ -0,0 +1,21 @@
const format = {
// 格式化库位状态
formatLocationStatus(locationStatus) {
switch (locationStatus) {
case 0:
return {msg: '空闲', type: 'success', color: ''};
case 1:
return {msg: '锁定', type: 'warning', color: ''};
case 2:
return {msg: '占用', type: 'primary', color: ''};
case 9:
return {msg: '禁用', type: 'danger', color: ''};
case 999:
return {msg: '特殊点位', type: 'danger', color: ''};
default:
return {msg: `未知类型：${locationStatus}`, type: 'danger', color: ''};
}
}
}
export default format

23
src/plugins/formatter/formatter.msglv.js Normal file
View File

@ -0,0 +1,23 @@
const format = {
// 格式化消息等级
formatMsgLv(msglv) {
switch (msglv) {
case 0:
return {msg: '信息', type: 'info', color: ''};
case 1:
return {msg: '提示', type: 'primary', color: ''};
case 2:
return {msg: '成功', type: 'success', color: ''};
case 3:
return {msg: '警告', type: 'warning', color: ''};
case 4:
return {msg: '错误', type: 'danger', color: ''};
case 5:
return {msg: '异常', type: 'danger', color: ''};
default:
return {msg: `未知类型：${msglv}`, type: 'danger', color: ''};
}
}
}
export default format

19
src/plugins/formatter/formatter.task.type.js Normal file
View File

@ -0,0 +1,19 @@
const format = {
// 格式化任务类型
formatTaskType(taskType) {
switch (taskType) {
case 1:
return {msg: '入库', type: 'success', color: ''};
case 2:
return {msg: '出库', type: 'primary', color: ''};
case 4:
return {msg: '拣选', type: 'info', color: ''};
case 9:
return {msg: '移库', type: 'warning', color: ''};
default:
return {msg: `未知类型：${taskType}`, type: 'danger', color: ''};
}
}
}
export default format

27
src/plugins/formatter/formatter.time.js Normal file
View File

@ -0,0 +1,27 @@
import moment from "moment";
const format = {
formatTime(timeString) {
if (timeString === null || timeString === '') {
return ''
}
try {
return moment(timeString).format('yyyy-MM-DD HH:mm:ss')
}catch {
return timeString
}
},
formatCellValueTime(row, column, cellValue) {
if (cellValue === null || cellValue === '') {
return ''
}
try {
return moment(cellValue).format('yyyy-MM-DD HH:mm:ss')
}catch {
return cellValue
}
}
}
export default format

15
src/plugins/formatter/formatter.user.status.js Normal file
View File

@ -0,0 +1,15 @@
const format = {
// 格式化用户状态
formatUserStatus(userStatus) {
switch (userStatus) {
case 1:
return {msg: '正常', type: 'success', color: ''};
case 0:
return {msg: '禁用', type: 'warning', color: ''};
default:
return {msg: userStatus.toString(), type: 'danger', color: ''};
}
}
}
export default format

23
src/plugins/formatter/formatter.wcstask.status.js Normal file
View File

@ -0,0 +1,23 @@
const format = {
// 格式化Wcs任务状态
formatTaskStatus(taskStatus) {
switch (taskStatus) {
case 1:
return {msg: '离开起点', type: 'success', color: ''};
case 2:
return {msg: '执行中', type: 'success', color: ''};
case 3:
return {msg: '到达终点', type: 'primary', color: ''};
case 4:
return {msg: '执行完成', type: 'primary', color: ''};
case 9:
return {msg: '执行异常', type: 'warning', color: ''};
case 0:
return {msg: '待执行', type: 'info', color: ''};
default:
return {msg: `未知状态：${taskStatus}`, type: 'danger', color: ''};
}
}
}
export default format

21
src/plugins/formatter/formatter.wmstask.status.js Normal file
View File

@ -0,0 +1,21 @@
const format = {
// 格式化Wms任务状态
formatTaskStatus(taskStatus) {
switch (taskStatus) {
case 1:
return {msg: '排队中', type: 'info', color: ''};
case 2:
return {msg: '执行中', type: 'success', color: ''};
case 3:
return {msg: '执行完成', type: 'primary', color: ''};
case 9:
return {msg: '执行异常', type: 'warning', color: ''};
case 0:
return {msg: '待解析', type: 'primary', color: ''};
default:
return {msg: `未知状态：${taskStatus}`, type: 'danger', color: ''};
}
}
}
export default format

86
src/router/index.js Normal file
View File

@ -0,0 +1,86 @@
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', name: 'login', component: () => import('../view/page/LoginPage.vue') },
{
path: '/wcs',
name: 'wcs',
component: () => import('../view/page/ContentPage.vue'),
children: [
{ path: 'nullPage', name: 'nullPage', component:() => import('../view/page/NullPage.vue') },
// 系统状态
{ path: 'runningInfo', name: 'runningInfo', component:() => import('../view/tab/systemStatus/RunningInfo.vue') }, // 运行信息
{ path: 'stackerStatus', name: 'stackerStatus', component:() => import('../view/tab/systemStatus/StackerStatus.vue') }, // 堆垛机状态
{ path: 'conveyStatus', name: 'conveyStatus', component:() => import('../view/tab/systemStatus/ConveyStatus.vue') }, // 输送机状态
{ path: 'containerStatus', name: 'containerStatus', component:() => import('../view/tab/systemStatus/ContainerStatus.vue') }, // 智能货柜状态
{ path: 'shuttleStatus', name: 'shuttleStatus', component:() => import('../view/tab/systemStatus/ShuttleStatus.vue') }, // 穿梭车状态
// 任务管理
{ path: 'wmsTask', name: 'wmsTask', component:() => import('../view/tab/taskManage/WmsTask.vue') }, // Wms任务管理
{ path: 'wcsTask', name: 'wcsTask', component:() => import('../view/tab/taskManage/WcsTask.vue') }, // Wcs任务管理
{ path: 'elTagTask', name: 'elTagTask', component:() => import('../view/tab/taskManage/ElTagTask.vue') }, // 电子标签任务管理
// 设备管理
{ path: 'location', name: 'location', component:() => import('@/view/tab/equipmentManage/LocationData.vue') }, // 点位/库位管理
{ path: 'stackerData', name: 'stackerData', component:() => import('@/view/tab/equipmentManage/StackerData.vue') }, // 堆垛机管理
// 数据查询
{ path: 'apiAccept', name: 'apiAccept', component:() => import('../view/tab/dataQuery/ApiAccept.vue') }, // 接口接收记录
{ path: 'apiRequest', name: 'apiRequest', component:() => import('../view/tab/dataQuery/ApiRequest.vue') }, // 接口请求记录
{ path: 'errMsg', name: 'errMsg', component:() => import('../view/tab/dataQuery/ErrMsg.vue') }, // 设备异常信息
{ path: 'errMsgBase', name: 'errMsgBase', component:() => import('../view/tab/dataQuery/ErrMsgBase.vue') }, // 设备异常信息基础资料
// 系统管理
{ path: 'settingsData', name: 'settingsData', component:() => import('../view/tab/systemManage/SettingData.vue') }, // 系统设置
// 工具箱
{ path: 'printQRCode', name: 'printQRCode', component:() => import('../view/tab/tools/PrintQRCode.vue') }, // 二维码打印
// 账户管理
{ path: 'userMenuRule', name: 'userMenuRule', component:() => import('../view/tab/accountManage/UserMenuRule.vue') }, // 权限管理
{ path: 'userData', name: 'userData', component:() => import('../view/tab/accountManage/UserData.vue') }, // 用户管理
// 开发者选项
{ path: 'plcData', name: 'plcData', component:() => import('@/view/tab/development/PLCData.vue') }, // PLC管理
{ path: 'dbData', name: 'dbData', component:() => import('@/view/tab/development/DbData.vue') }, // PLC通讯管理（DB块）
{ path: 'configData', name: 'configData', component:() => import('@/view/tab/development/ConfigData.vue') }, // 系统配置
{ path: 'socketData', name: 'socketData', component:() => import('../view/tab/development/SocketData.vue') }, // Socket通讯管理
{ path: 'menuData', name: 'menuData', component:() => import('@/view/tab/development/MenuData.vue') }, // 菜单管理
]
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 导航守卫
router.beforeEach((to, from, next) => {
// 登陆页和错误页允许访问
if(to.name === 'login' || to.name === 'limit') {
next()
return
}
// 校验用户是否登陆
const userName = window.sessionStorage.getItem("userName")
if(userName === undefined || userName === null || userName === '') {
next({name: 'login'})
return
}
// 校验是否访问不受限制的页面
if(to.name === 'wcs' || to.name === 'nullPage') {
next()
return
}
// 校验用户是否有菜单
const menuList = JSON.parse(window.sessionStorage.getItem("menuList"))
if(menuList === undefined || menuList === null || menuList.length === 0) {
next({name: 'login'})
return
}
// 校验用户访问的是不是其有权限访问的菜单
if(menuList.find(m => m.router === to.name) === undefined) {
console.log(to.name)
console.table(menuList)
next({name: 'login'})
return
}
next()
})
export default router

27
src/store/index.js Normal file
View File

@ -0,0 +1,27 @@
import { createStore } from 'vuex'
import user from "@/store/modules/user";
import menu from "@/store/modules/menu";
import VuexPersistence from "vuex-persist";
import tab from "@/store/modules/tab";
const vuexLocal = new VuexPersistence({
storage: window.sessionStorage,
modules: ['user', 'menu', 'tab']
})
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
user,
menu,
tab
},
plugins: [vuexLocal.plugin]
})

28
src/store/modules/menu.js Normal file
View File

@ -0,0 +1,28 @@
const menu = {
state() {
return {
// 详细的菜单，接口返回的
menuData: [],
// 子菜单，拿出来单独放这里，后面用起来方便
menuList: []
}
},
mutations: {
setMenuData(state, menu) {
state.menuData = menu
},
setMenuList(state, menuList) {
state.menuList = menuList
},
resetMenuData(state) {
state.menuData = []
state.menuList = []
}
},
getters: {
},
actions: {},
};
export default menu;

34
src/store/modules/tab.js Normal file
View File

@ -0,0 +1,34 @@
const tab = {
state() {
return {
// 选中的tab
selectedTab: '',
// tab 的列表
tabs: []
}
},
mutations: {
setSelectedTab(state, tabValue) {
state.selectedTab = tabValue
},
setTabs(state, tabs) {
state.tabs = tabs
},
addTab(state, tab) {
state.tabs.push(tab)
},
resetTabs(state) {
state.tabs = [{
title: '主页',
name: '0-0'
}]
state.selectedTab = '0-0'
}
},
getters: {
},
actions: {},
};
export default tab;

21
src/store/modules/user.js Normal file
View File

@ -0,0 +1,21 @@
const user = {
state() {
return {
userId: '',
userName: ''
}
},
mutations: {
setUserInfo(state, { userId, userName }) {
state.userId = userId
state.userName = userName
}
},
getters: {
},
actions: {},
};
export default user;

108
src/view/component/apiAccept/ApiAcceptDetail.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div>
<el-dialog
:model-value="modelValue"
title="接口的接收记录详情"
@close="() => {$emit('update:modelValue', false)}"
>
<el-form label-position="left" label-width="120px">
<el-form-item label="接收编号：">
<el-input class="showInput" v-model="apiData.acceptId"/>
</el-form-item>
<el-form-item label="请求路径：">
<el-input class="showInput" v-model="apiData.path"/>
</el-form-item>
<el-form-item label="请求方法：">
<el-input class="showInput" v-model="apiData.method"/>
</el-form-item>
<el-form-item label="数据类型：">
<el-input class="showInput" v-model="apiData.mediaType"/>
</el-form-item>
<el-form-item label="客户端：">
<el-input class="showInput" v-model="apiData.clientAddress"/>
</el-form-item>
<el-form-item label="请求时间：">
<el-input class="showInput" v-model="apiData.requestTime"/>
</el-form-item>
<el-form-item label="响应时间：">
<el-input class="showInput" v-model="apiData.responseTime"/>
</el-form-item>
<el-form-item label="耗时（ms）：">
<el-input class="showInput" v-model="apiData.useTime"/>
</el-form-item>
<el-form-item label="请求信息：">
<el-input class="showInput" v-model="apiData.requestMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
<el-form-item label="响应信息：">
<el-input class="showInput" v-model="apiData.responseMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
<el-form-item label="异常信息：">
<el-input class="showInput" v-model="apiData.errMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'apiData'],
emits: [],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

132
src/view/component/apiAccept/ApiAcceptList.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>服务端接收调用记录表</h5>
<el-table :data="modelValue" border stripe max-height="calc(100vh - 450px)">
<el-table-column fixed prop="acceptId" label="请求编号" width="100px" show-overflow-tooltip />
<el-table-column fixed prop="path" label="请求路径" width="250px" show-overflow-tooltip />
<el-table-column prop="method" label="请求方法" width="90px" align="center" show-overflow-tooltip/>
<el-table-column prop="mediaType" label="数据类型" width="150px" align="center" show-overflow-tooltip/>
<el-table-column prop="clientAddress" label="客户端" width="170px" show-overflow-tooltip/>
<el-table-column prop="requestMsg" label="请求信息" width="280px" show-overflow-tooltip/>
<el-table-column prop="responseMsg" label="响应信息" width="280px" show-overflow-tooltip/>
<el-table-column prop="requestTime" label="请求时间" width="160px" align="center" show-overflow-tooltip :formatter="formatterTime" />
<el-table-column prop="responseTime" label="响应时间" width="160px" align="center" show-overflow-tooltip :formatter="formatterTime" />
<el-table-column prop="useTime" label="耗时（ms）" width="130px" align="center"/>
<el-table-column prop="errMsg" label="异常信息" show-overflow-tooltip min-width="150px"/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<!-- 查看详情 -->
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
small
v-if="searchParams.page.totalRow > 0"
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200]"
layout="prev, pager, next, jumper, sizes"
:total="searchParams.page.totalRow"
@size-change="searchData"
@current-change="searchData"
/>
</el-row>
<!-- 展示详情的弹窗-->
<ApiAcceptDetail v-model="showDetail" v-model:api-data="detailData"></ApiAcceptDetail>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterTime from "@/plugins/formatter/formatter.time";
import ApiAcceptDetail from "@/view/component/apiAccept/ApiAcceptDetail.vue";
import check from "@/plugins/dataCheck/json.extend";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {ApiAcceptDetail},
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
// 是否展示详情
showDetail: false,
// 传入展示详情的数据
detailData: [],
// -----
formatterTime: formatterTime.formatCellValueTime,
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchData() {
this.$emit('pageChange', this.searchParams)
},
checkDetail(row) {
this.detailData = {
acceptId: row.acceptId,
path: row.path,
method: row.method,
mediaType: row.mediaType,
clientAddress: row.clientAddress,
requestTime: formatterTime.formatTime(row.requestTime),
responseTime: formatterTime.formatTime(row.responseTime),
useTime: row.useTime,
requestMsg: check.toJsonParse(row.requestMsg),
responseMsg: check.toJsonParse(row.responseMsg),
errMsg: row.errMsg
}
check.isJson(row.requestMsg)
this.showDetail = true
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

123
src/view/component/apiAccept/SearchForm.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="查询关键字：">
<el-input style="min-width: 300px" placeholder="输入 关键字 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="调用时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/搜索</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage} from "element-plus";
import apiAccept from "@/axios/api.accept";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['searchParams', 'modelValue'],
emits: ['update:searchParams', 'update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 20
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
// 查询数据，主要用于分页，不需要重置分页参数
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
apiAccept.getApiAcceptInfoWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
console.table(Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

105
src/view/component/apiRequest/ApiRequestDetail.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div>
<el-dialog
:model-value="modelValue"
title="WCS调用其他系统记录详情"
@close="() => $emit('update:modelValue', false)"
>
<el-form label-position="left" label-width="120px">
<el-form-item label="请求ID：">
<el-input class="showInput" v-model="apiData.requestId"/>
</el-form-item>
<el-form-item label="请求Url：">
<el-input class="showInput" v-model="apiData.requestUrl"/>
</el-form-item>
<el-form-item label="是否成功：">
<el-input class="showInput" v-model="apiData.isSuccess"/>
</el-form-item>
<el-form-item label="请求方法：">
<el-input class="showInput" v-model="apiData.requestMethod"/>
</el-form-item>
<el-form-item label="请求时间：">
<el-input class="showInput" v-model="apiData.requestTime"/>
</el-form-item>
<el-form-item label="响应时间：">
<el-input class="showInput" v-model="apiData.responseTime"/>
</el-form-item>
<el-form-item label="耗时（ms）：">
<el-input class="showInput" v-model="apiData.useTime"/>
</el-form-item>
<el-form-item label="请求信息：">
<el-input class="showInput" v-model="apiData.requestMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
<el-form-item label="响应信息：">
<el-input class="showInput" v-model="apiData.responseMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
<el-form-item label="异常信息：">
<el-input class="showInput" v-model="apiData.errMsg"
:autosize="{ minRows: 3, maxRows: 20 }"
type="textarea"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'apiData'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

136
src/view/component/apiRequest/ApiRequestList.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>WCS调用其他系统记录表</h5>
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 450px)">
<el-table-column fixed prop="requestId" label="请求ID" width="100px" show-overflow-tooltip/>
<el-table-column fixed prop="requestUrl" label="请求Url" width="250px" show-overflow-tooltip/>
<el-table-column prop="isSuccess" label="是否成功" align="center" width="95px">
<template #default="scope">
<el-tag class="ml-2" :type=formatterBool(scope.row.isSuccess).type>{{formatterBool(scope.row.isSuccess).msg }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="requestMethod" label="请求方法" align="center" width="100px"/>
<el-table-column prop="requestMsg" label="请求信息" width="250px" show-overflow-tooltip/>
<el-table-column prop="responseMsg" label="响应信息" width="250px" show-overflow-tooltip/>
<el-table-column prop="requestTime" label="请求时间" align="center" width="160px" show-overflow-tooltip :formatter="formatterTime"/>
<el-table-column prop="responseTime" label="响应时间" align="center" width="160px" show-overflow-tooltip :formatter="formatterTime"/>
<el-table-column prop="useTime" label="耗时（ms）" align="center" width="130px"/>
<el-table-column prop="errMsg" label="异常信息" show-overflow-tooltip/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<!-- 查看详情 -->
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
small
v-if="searchParams.page.totalRow > 0"
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200]"
layout="prev, pager, next, jumper, sizes"
:total="searchParams.page.totalRow"
@size-change="searchData"
@current-change="searchData"
/>
</el-row>
<!-- 展示详情的弹窗-->
<ApiRequestDetail v-model="showDetail" v-model:api-data="detailData"/>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterBool from "@/plugins/formatter/formatter.bool";
import formatterTime from "@/plugins/formatter/formatter.time";
import check from "@/plugins/dataCheck/json.extend";
import ApiRequestDetail from "@/view/component/apiRequest/ApiRequestDetail.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {ApiRequestDetail},
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
// 是否展示详情
showDetail: false,
// 传入展示详情的数据
detailData: [],
// -----
formatterTime: formatterTime.formatCellValueTime,
formatterBool: formatterBool.formatTrueFalseNum
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchData() {
this.$emit('pageChange', this.searchParams)
},
checkDetail(row) {
this.detailData = {
requestId: row.requestId,
requestUrl: row.requestUrl,
isSuccess: row.isSuccess,
requestMethod: row.requestMethod,
requestTime: formatterTime.formatTime(row.requestTime),
responseTime: formatterTime.formatTime(row.responseTime),
useTime: row.useTime,
requestMsg: check.toJsonParse(row.requestMsg),
responseMsg: check.toJsonParse(row.responseMsg),
errMsg: row.errMsg
}
check.isJson(row.requestMsg)
this.showDetail = true
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

123
src/view/component/apiRequest/SearchForm.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="查询关键字：">
<el-input style="min-width: 300px" placeholder="输入 关键字 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="调用时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/搜索</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage} from "element-plus";
import apiRequestApi from "@/axios/api.request";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['searchParams', 'modelValue'],
emits: ['update:searchParams', 'update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 20
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
// 查询数据，主要用于分页，不需要重置分页参数
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
apiRequestApi.getApiRequestInfoWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

105
src/view/component/configData/EditConfig.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<!-- 编辑配置项-->
<div>
<el-dialog
title="编辑配置项"
:model-value="modelValue"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="left"
label-width="160px"
:model="configData"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="配置键：">
<el-input v-model="configData.configKey" placeholder="若配置键已经存在则视为更新已有配置信息"/>
</el-form-item>
<el-form-item label="配置名称：">
<el-input v-model="configData.configName"/>
</el-form-item>
<el-form-item label="配置值：">
<el-input v-model="configData.configValue"/>
</el-form-item>
<el-form-item label="配置类型：">
<el-input v-model="configData.configType"/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="configData.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="saveConfig">保存</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'configData'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 保存配置项
saveConfig() {
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
.demo-form-inline {
width: 100%;
.el-input {
--el-input-width: 100%;
}
.el-form-item {
width: 100%;
}
}
</style>

151
src/view/component/dbData/AddDBData.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div>
<el-dialog
title="添加DB数据"
:model-value="modelValue"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="left"
label-width="160px"
:model="plcDbItem"
>
<el-form-item label="DB 名称（唯一）：" required>
<el-input v-model="plcDbItem.dbName" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
</el-form-item>
<el-form-item label="对应的PLC编号：">
<el-select v-model="plcDbItem.plcId" placeholder="请选择PLC" style="width: calc(100% - 50px)" clearable>
<el-option
v-for="item in plcList"
:key="item.plcId"
:label="item.plcName"
:value="item.plcId"
>
<span style="float: left">{{ item.plcId }}</span>
<span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
{{ item.plcName }}
</span>
</el-option>
</el-select>
<el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
</el-form-item>
<el-form-item label="DB地址：">
<el-input v-model="plcDbItem.dbAddress"/>
</el-form-item>
<el-form-item label="是否系统级别：">
<el-input v-model="plcDbItem.isSystem" placeholder="0：否； 1：是"/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="plcDbItem.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import dbApi from "@/axios/db"
import {Refresh} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Refresh},
props: ['modelValue', 'plcList', 'plcDbItem'],
emits: ['loadPlcData', 'update:modelValue'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
loadPlcData() {
this.$emit('loadPlcData');
},
addOrUpdate() {
if(this.plcDbItem.dbName === '' || this.plcDbItem.dbName === undefined || this.plcDbItem.dbName === null){
ElMessage({
message: '请输入 DB名称，此项是必填的',
type: 'warning',
})
return
}
ElMessageBox.confirm(
`您确定要执行添加/编辑 dbName 为 ${this.plcDbItem.dbName} 的DB信息?`,
'数据变更警告',
{
confirmButtonText: '变更',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
dbApi.addOrUpdate(this.plcDbItem).then(response=>{
const responseData = response.data
if(responseData.code === 0){
ElMessage({
message: '添加/编辑成功',
type: 'success',
})
this.$emit('update:modelValue', false)
} else {
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
})
.catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
})
.catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

135
src/view/component/dbData/DbList.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<el-row style="width: 100%">
<h5>DB地址列表</h5>
</el-row>
<el-table :data="modelValue" border stripe max-height="calc(100vh - 410px)">
<el-table-column fixed prop="plcId" label="PLC 编号" width="150px" align="center"/>
<el-table-column prop="plcName" label="PLC 名称" width="250px" align="center"/>
<el-table-column prop="dbName" label="DB 名称" width="250px" show-overflow-tooltip align="center"/>
<el-table-column prop="dbAddress" label="DB 地址" width="250px" align="center"/>
<el-table-column prop="isSystem" label="是否系统级别" width="120px" align="center"/>
<el-table-column prop="remark" label="备注信息" min-width="100px"/>
<el-table-column fixed="right" label="操作" align="center" width="120">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="编辑" placement="top" effect="light">
<el-button type="primary" size="small" @click="editData(scope.row)">
<el-icon><Edit/></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top" effect="light">
<el-button type="danger" size="small" @click="deleteData(scope.row)">
<el-icon><Delete/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {Delete, Edit} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import dbApi from "@/axios/db";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Delete, Edit},
props: ['modelValue', 'plcDbItem'],
emits: ['update:modelValue', 'update:plcDbItem', 'addDBForm', 'showAddForm'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 打开编辑框
editData(row) {
this.$emit('update:plcDbItem', {
dbName: row.dbName,
plcId: row.plcId,
dbAddress: row.dbAddress,
isSystem: row.isSystem,
remark: row.remark
})
this.$emit('showAddForm', true)
},
// 删除数据
deleteData(row) {
ElMessageBox.confirm(
`您确定要删除 dbName 为 ${row.dbName} 的DB信息? 该操作不可恢复！`,
'数据删除警告',
{
confirmButtonClass: 'el-button--danger',
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'error',
}).then(() => {
dbApi.deleteData(row.dbName).then(response=>{
const responseData = response.data
if(responseData.code === 0){
ElMessage({
message: '删除成功',
type: 'success',
})
} else {
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
})
.catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

138
src/view/component/dbData/SearchForm.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="所属 PLC：">
<el-select v-model="searchParams.plcId" placeholder="请选择PLC" style="width: 400px" clearable>
<el-option
v-for="item in plcList"
:key="item.plcId"
:label="item.plcName"
:value="item.plcId"
>
<span style="float: left">{{ item.plcId }}</span>
<span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
{{ item.plcName }}
</span>
</el-option>
</el-select>
<el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
</el-form-item>
<el-form-item label="查询关键字：">
<el-input placeholder="输入 DB地址名称 查询..." v-model="searchParams.dbName" clearable></el-input>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
<el-button type="success" @click="addDBForm">添加DB地址</el-button>
</el-row>
</div>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import dbApi from "@/axios/db"
import {Refresh} from "@element-plus/icons-vue";
import {ElLoading, ElMessage} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Refresh},
props: ['plcDbList', 'plcList'],
emits: ['update:plcDbList', 'loadPlcData', 'addDBForm'],
data() {
// 这里存放数据
return {
searchParams: {
dbName: '',
plcId: ''
}
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 加载PLC数据
loadPlcData() {
this.$emit('loadPlcData');
},
// 打开添加DB窗口
addDBForm() {
this.$emit('addDBForm')
},
// 查询按钮
searchBtn() {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:plcDbList', [])
if(this.searchParams.plcId === '' || this.searchParams.plcId === undefined || this.searchParams.plcId === null) {
this.searchParams.plcId = null
}
dbApi.getDbWithName(this.searchParams).then(res=>{
const responseData = res.data
if(responseData.code === 0){
ElMessage({
message: '查询成功',
type: 'success',
})
this.$emit('update:plcDbList', Object.freeze(responseData["returnData"]))
}else{
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
this.loadPlcData()
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

161
src/view/component/elTagTask/AddElTagTask.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div>
<el-dialog :model-value="modelValue" :show-close="false" title="添加电子标签新任务"
@close="() => $emit('update:modelValue', false)">
<div>
<el-form
label-width="100px"
:model="elTagTaskItem"
require-asterisk-position="left"
>
<el-form-item label="任务组：">
<el-input v-model="elTagTaskItem.taskGroup"/>
</el-form-item>
<el-form-item label="任务号：">
<el-input v-model="elTagTaskItem.taskId"/>
</el-form-item>
<el-form-item label="点位：" required>
<el-input v-model="elTagTaskItem.location"/>
</el-form-item>
<el-form-item label="订单号：">
<el-input v-model="elTagTaskItem.orderId"/>
</el-form-item>
<el-form-item label="载具号：" required>
<el-input v-model="elTagTaskItem.vehicleNo"/>
</el-form-item>
<el-form-item label="物料编号：">
<el-input v-model="elTagTaskItem.goodsId"/>
</el-form-item>
<el-form-item label="物料名称：">
<el-input v-model="elTagTaskItem.goodsName"/>
</el-form-item>
<el-form-item label="需求数量：" required>
<el-input-number v-model="elTagTaskItem.needNum" :min="0" :max="999"/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="elTagTaskItem.remark"/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div>
<el-button type="primary" @click="add">添加任务</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import elTagApi from "@/axios/el.tag"
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
elTagTaskItem: {
taskGroup: '',
taskId: '',
location: '',
orderId: '',
vehicleNo: '',
goodsId: '',
goodsName: '',
taskStatus: 0,
needNum: 0,
remark: ''
}
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
add() {
if(this.elTagTaskItem.location === '' || this.elTagTaskItem.vehicleNo === '' || this.elTagTaskItem.needNum === 0) {
ElMessage({
message: '您有必填的项未填或者拣选数量为0',
type: 'warning',
})
return;
}
ElMessageBox.confirm(`确定添加：${this.elTagTaskItem.taskId} 的任务？`,
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).catch(() => {})
.then(()=>{
const loading = ElLoading.service({
lock: true,
text: '请稍后...',
})
elTagApi.insertElTagTask(this.elTagTaskItem).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '添加任务成功',
type: 'success',
})
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

159
src/view/component/elTagTask/EditElTagTask.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div>
<el-dialog :model-value="modelValue" :show-close="false" title="编辑电子标签任务"
@close="() => $emit('update:modelValue', false)">
<div>
<el-form
label-width="100px"
:model="elTagTaskItem"
>
<el-form-item label="任务组：">
<el-input v-model="elTagTaskItem.taskGroup" disabled/>
</el-form-item>
<el-form-item label="任务号：">
<el-input v-model="elTagTaskItem.taskId" disabled/>
</el-form-item>
<el-form-item label="点位：">
<el-input v-model="elTagTaskItem.location" disabled/>
</el-form-item>
<el-form-item label="订单号：">
<el-input v-model="elTagTaskItem.orderId" disabled/>
</el-form-item>
<el-form-item label="载具号：">
<el-input v-model="elTagTaskItem.vehicleNo" disabled/>
</el-form-item>
<el-form-item label="物料编号：">
<el-input v-model="elTagTaskItem.goodsId" disabled/>
</el-form-item>
<el-form-item label="物料名称：">
<el-input v-model="elTagTaskItem.goodsName" disabled/>
</el-form-item>
<el-form-item label="任务状态：">
<el-select v-model="elTagTaskItem.taskStatus">
<el-option v-for="item in elTagTaskStatusEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="需求数量：">
<el-input v-model="elTagTaskItem.needNum" disabled/>
</el-form-item>
<el-form-item label="实际数量：">
<el-input v-model="elTagTaskItem.pickNum" disabled/>
</el-form-item>
<el-form-item label="创建人：">
<el-input v-model="elTagTaskItem.createPerson" disabled/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="elTagTaskItem.remark" disabled/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div>
<el-button type="warning" @click="update">变更信息</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {elTagTaskStatusEnum} from "@/enum/elTag/eltag.task.enum";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import elTagApi from "@/axios/el.tag";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'elTagTaskItem'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {
elTagTaskStatusEnum() {
return elTagTaskStatusEnum
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 保存变更
update() {
ElMessageBox.confirm(`确定变更：${this.elTagTaskItem.taskId} 的任务状态？`,
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).catch(() => {})
.then(()=>{
const loading = ElLoading.service({
lock: true,
text: '请稍后...',
})
elTagApi.updateElTagTask({taskId: this.elTagTaskItem.taskId, taskStatus: this.elTagTaskItem.taskStatus}).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '变更成功',
type: 'success',
})
this.$emit('update:modelValue', false)
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

156
src/view/component/elTagTask/ElTagTaskList.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>电子标签任务列表</h5>
<el-table :data="modelValue" border stripe max-height="calc(100vh - 550px)">
<el-table-column fixed prop="taskId" label="任务号" width="230px" align="center" show-overflow-tooltip/>
<el-table-column fixed prop="taskGroup" label="任务组" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="location" label="点位" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="taskType" label="任务类型" width="140px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterElTagTaskTypeEnum(scope.row.taskType).color>
{{formatterElTagTaskTypeEnum(scope.row.taskType).label }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="orderId" label="订单号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="载具号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料编号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsName" label="物料名称" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="taskStatus" label="任务状态" width="140px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterElTagTaskStatusEnum(scope.row.taskStatus).color>
{{formatterElTagTaskStatusEnum(scope.row.taskStatus).label }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="needNum" label="需求数量" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="pickNum" label="实际数量" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createPerson" label="创建人" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createTime" label="创建时间" :formatter="formatterTime" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="lightTime" label="点亮时间" :formatter="formatterTime" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="confirmTime" label="确认时间" :formatter="formatterTime" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="offTime" label="熄灭时间" :formatter="formatterTime" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="80px"/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="变更状态" placement="top" effect="light">
<el-button type="warning" size="small" @click="changeTaskStatus(scope.row)">
<el-icon><Switch/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
small
v-if="searchParams.page.totalRow > 0"
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="searchData"
@current-change="searchData"
/>
</el-row>
<!-- 编辑状态的弹窗-->
<EditElTagTask v-model="showEditForm" v-model:elTagTaskItem="elTagTaskItem"></EditElTagTask>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {Switch} from "@element-plus/icons-vue";
import formatterTime from "@/plugins/formatter/formatter.time";
import {formatterElTagTaskStatusEnum} from "@/enum/elTag/eltag.task.enum";
import EditElTagTask from "@/view/component/elTagTask/EditElTagTask.vue";
import {formatterElTagTaskTypeEnum} from "@/enum/elTag/eltag.task.type.enum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {EditElTagTask, Switch},
props: ['modelValue', 'searchParams'],
emits: ['update:modelValue','update:searchParams','pageChange'],
data() {
// 这里存放数据
return {
formatterTime: formatterTime.formatCellValueTime,
// 展示编辑状态的弹窗
showEditForm: false,
// 编辑状态的弹窗数据
elTagTaskItem: {}
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
formatterElTagTaskTypeEnum,
formatterElTagTaskStatusEnum,
// 变更任务状态
changeTaskStatus(row) {
this.elTagTaskItem = {
taskGroup: row.taskGroup,
taskId: row.taskId,
location: row.location,
orderId: row.orderId,
vehicleNo: row.vehicleNo,
goodsId: row.goodsId,
goodsName: row.goodsName,
taskStatus: row.taskStatus,
needNum: row.needNum,
pickNum: row.pickNum,
createPerson: row.createPerson,
createTime: row.createTime,
lightTime: row.lightTime,
confirmTime: row.confirmTime,
remark: row.remark
}
this.showEditForm = true
},
searchData() {
this.$emit('pageChange', this.searchParams)
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

149
src/view/component/elTagTask/SearchForm.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left" >
<el-form-item label="查询关键字：">
<el-input placeholder="输入 点位/任务号/箱号/订单号 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="任务类型：">
<el-select v-model="searchParams.elTagTaskType" multiple placeholder="请选择需要查询的任务类型">
<el-option v-for="item in elTagTaskTypeEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="任务状态：">
<el-select v-model="searchParams.elTagTaskStatus" multiple placeholder="请选择需要查询的任务状态">
<el-option v-for="item in elTagTaskStatusEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="任务创建时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
<el-button type="success" @click="showAddForm = true">新增任务</el-button>
</el-row>
<!-- 添加新任务的弹窗-->
<AddElTagTask v-model="showAddForm"></AddElTagTask>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {elTagTaskStatusEnum} from "@/enum/elTag/eltag.task.enum";
import {elTagTaskTypeEnum} from "@/enum/elTag/eltag.task.type.enum";
import {ElLoading, ElMessage} from "element-plus";
import elTagApi from "@/axios/el.tag"
import AddElTagTask from "@/view/component/elTagTask/AddElTagTask.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {AddElTagTask},
props: ['modelValue', 'searchParams'],
emits: ['update:modelValue','update:searchParams'],
data() {
// 这里存放数据
return {
showAddForm: false
}
},
// 计算属性 类似于 data 概念
computed: {
elTagTaskStatusEnum() {
return elTagTaskStatusEnum
},
elTagTaskTypeEnum() {
return elTagTaskTypeEnum
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 查询
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 50
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
elTagApi.getElTagTaskWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData["tag"])
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

189
src/view/component/locationData/CheckDetail.vue Normal file
View File

@ -0,0 +1,189 @@
<template>
<div>
<el-dialog :model-value="modelValue" title="点位详情"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="left"
label-width="100px"
:model="locationDetail"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="WCS点位：">
<el-input v-model="locationDetail.wcsLocation" disabled/>
</el-form-item>
<el-form-item label="WMS点位：">
<el-input v-model="locationDetail.wmsLocation" disabled/>
</el-form-item>
<el-form-item label="当前载具号：">
<el-input v-model="locationDetail.vehicleNo"/>
</el-form-item>
<el-form-item label="巷道号：">
<el-input v-model="locationDetail.tunnelNo" disabled/>
</el-form-item>
<el-form-item label="设备号：">
<el-input v-model="locationDetail.equipmentId" disabled/>
</el-form-item>
<el-form-item label="当前状态：">
<el-select placeholder='请选择库位状态' v-model="locationDetail.locationStatus">
<el-option v-for="item in locationStatusEnum" :key="item.value" :label="item.label" :value="item.value "/>
</el-select>
</el-form-item>
<el-form-item label="排：">
<el-input v-model="locationDetail.queue" disabled/>
</el-form-item>
<el-form-item label="列：">
<el-input v-model="locationDetail.line" disabled/>
</el-form-item>
<el-form-item label="层：">
<el-input v-model="locationDetail.layer" disabled/>
</el-form-item>
<el-form-item label="深：">
<el-input v-model="locationDetail.depth" disabled/>
</el-form-item>
<el-form-item label="点位类型：">
<el-select placeholder='请选择库位状态' v-model="locationDetail.locationType" disabled>
<el-option v-for="item in locationTypeEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="点位释义：">
<el-input v-model="locationDetail.explain" disabled/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="locationDetail.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="changeData">变更信息</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import locationApi from '@/axios/location'
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {locationStatusEnum} from "@/enum/location/locationStatusEnum";
import {locationTypeEnum} from "@/enum/location/locationTypeEnum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'locationDetail'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {
locationTypeEnum() {
return locationTypeEnum
},
locationStatusEnum() {
return locationStatusEnum
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
changeData() {
ElMessageBox.confirm(
'确定变更该点位的数据?',
'警告',
{
confirmButtonText: '确定变更',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
const locationDto = {
wcsLocation: this.locationDetail.wcsLocation,
wmsLocation: this.locationDetail.wmsLocation,
vehicleNo: this.locationDetail.vehicleNo,
tunnelNo: this.locationDetail.tunnelNo,
equipmentId: this.locationDetail.equipmentId,
locationStatus: this.locationDetail.locationStatus,
queue: this.locationDetail.queue,
line: this.locationDetail.line,
layer: this.locationDetail.layer,
depth: this.locationDetail.depth,
locationType: this.locationDetail.locationType,
explain: this.locationDetail.explain,
remark: this.locationDetail.remark
}
locationApi.updateLocationStatus(locationDto).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '更新成功',
type: 'success',
})
} else {
ElMessage({
message: '更新失败',
type: 'warning',
})
}
}).catch((ex) => {
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
loading.close()
}).catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
.demo-form-inline .el-input {
--el-input-width: 320px;
}
.demo-form-inline .el-select {
--el-select-width: 320px;
}
</style>

158
src/view/component/locationData/LocationList.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<el-row style="width: 100%">
<el-col :span="12">
<h5>点位列表</h5>
</el-col>
<el-col :span="4" :offset="8">
<div style="font-size: 0.8rem; color: coral; margin-top: 30px">
信息仅供参考，具体状态请以 WMS 为准
</div>
</el-col>
</el-row>
<el-table :data="modelValue" border stripe max-height="calc(100vh - 500px)">
<el-table-column fixed prop="wcsLocation" label="WCS点位" width="150px" align="center"/>
<el-table-column prop="wmsLocation" label="映射WMS点位" width="150px" align="center"/>
<el-table-column prop="vehicleNo" label="当前载具" width="150px" show-overflow-tooltip align="center"/>
<el-table-column prop="tunnelNo" label="巷道号" width="100px" align="center"/>
<el-table-column prop="equipmentId" label="设备号" width="100px" align="center"/>
<el-table-column label="点位类型" width="100px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterLocationTypeEnum(scope.row.locationType).type>{{formatterLocationTypeEnum(scope.row.locationType).label }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="点位状态" width="100px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterLocationStatusEnum(scope.row.locationStatus).type>{{formatterLocationStatusEnum(scope.row.locationStatus).label }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="queue" label="排" width="80px" align="center"/>
<el-table-column prop="line" label="列" width="80px" align="center"/>
<el-table-column prop="layer" label="层" width="80px" align="center"/>
<el-table-column prop="depth" label="深" width="80px" align="center"/>
<el-table-column prop="vehicleType" label="兼容的载具类型" width="250px" align="center"/>
<el-table-column prop="interveneLocation" label="干涉的点位" width="150px"/>
<el-table-column prop="explain" label="点位释义" width="150px" align="center"/>
<el-table-column prop="remark" label="备注信息" min-width="100px"/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<!-- 编辑库位 -->
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 15px">
<el-pagination
small
v-if="searchParams.page.totalRow > 0"
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200, 300, 500]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="searchData"
@current-change="searchData"
/>
</el-row>
</el-row>
<CheckDetail v-model="showDetail" :location-detail="locationDetail"></CheckDetail>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterLocation from "@/plugins/formatter/formatter.location";
import CheckDetail from "@/view/component/locationData/CheckDetail.vue";
import {formatterLocationTypeEnum} from "@/enum/location/locationTypeEnum";
import {formatterLocationStatusEnum} from "@/enum/location/locationStatusEnum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {CheckDetail},
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
// 展示详情
showDetail: false,
// 发送给展示详情弹窗的信息
locationDetail: {},
// ---
formatterLocationStatus: formatterLocation.formatLocationStatus
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
formatterLocationStatusEnum,
formatterLocationTypeEnum,
searchData() {
this.$emit('pageChange', this.searchParams)
},
checkDetail(row) {
this.locationDetail = {
wcsLocation: row.wcsLocation,
wmsLocation: row.wmsLocation,
vehicleNo: row.vehicleNo,
tunnelNo: row.tunnelNo,
equipmentId: row.equipmentId,
locationStatus: row.locationStatus,
queue: row.queue,
line: row.line,
layer: row.layer,
depth: row.depth,
locationType: row.locationType,
explain: row.explain,
remark: row.remark
}
this.showDetail = true
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

129
src/view/component/locationData/SearchForm.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="查询关键字：">
<el-input placeholder="输入 料箱号/点位号 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="点位类型：">
<el-select v-model="searchParams.locationType" multiple placeholder="请选择需要查询的点位类型">
<el-option v-for="item in locationTypeEnum" :key="item.value" :label="item.label" :value="item.value "/>
</el-select>
</el-form-item>
<el-form-item label="点位状态：">
<el-select v-model="searchParams.locationStatus" multiple placeholder="请选择需要查询的点位状态">
<el-option v-for="item in locationStatusEnum" :key="item.value" :label="item.label" :value="item.value "/>
</el-select>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import locationApi from '@/axios/location'
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {locationStatusEnum} from "@/enum/location/locationStatusEnum";
import {locationTypeEnum} from "@/enum/location/locationTypeEnum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'searchParams'],
emits: ['update:searchParams', 'update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {
locationTypeEnum() {
return locationTypeEnum
},
locationStatusEnum() {
return locationStatusEnum
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 50
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
locationApi.getLocationWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
this.showLocations = [];
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
this.showLocations = [];
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

288
src/view/component/menuData/AddMenu.vue Normal file
View File

@ -0,0 +1,288 @@
<template>
<div>
<el-dialog :model-value="modelValue" title="添加菜单"
@close="() => $emit('update:modelValue', false)">
<el-row>
<el-col :span="10">
<h5>当前存在的菜单信息参考</h5>
<el-scrollbar :max-height="500">
<el-tree :data="menu" @node-click="nodeClick">
</el-tree>
</el-scrollbar>
</el-col>
<el-col :span="14" style="border-left: #2c3e5033 solid 1px; padding-left: 20px;">
<el-form
label-position="left"
label-width="160px"
:model="menuData"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="一级菜单序号：">
<el-input v-model="menuData.mainMenuIndex"/>
</el-form-item>
<el-form-item label="一级菜单名称：">
<el-input v-model="menuData.mainMenuName"/>
</el-form-item>
<el-form-item label="一级菜单图标：">
<el-input v-model="menuData.mainMenuIco"/>
</el-form-item>
<el-form-item label="二级菜单序号：">
<el-input v-model="menuData.minorMenuIndex">
</el-input>
</el-form-item>
<el-form-item label="二级菜单名称：">
<el-input v-model="menuData.minorMenuName"/>
</el-form-item>
<el-form-item label="二级菜单图标：">
<el-input v-model="menuData.minorMenuIco"/>
</el-form-item>
<el-form-item label="二级菜单路由：">
<el-input v-model="menuData.minorMenuRouter"/>
</el-form-item>
<el-form-item label="菜单状态：">
<el-switch
v-model="menuData.menuStatus"
inline-prompt
active-text="启用"
inactive-text="停用"
active-value="1"
inactive-value="0"
/>
</el-form-item>
<el-form-item label="备注：">
<el-input v-model="menuData.remark"/>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<div>
<el-button type="primary" @click="addMenu">添加</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import menuApi from "@/axios/menu";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'menuList'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
menuData: {
mainMenuIndex: '',
mainMenuName: '',
mainMenuIco: '',
minorMenuIndex: '',
minorMenuName: '',
minorMenuIco: '',
minorMenuRouter: '',
menuStatus: '1',
remark: ''
},
// 显示在树形控件里的值
menu: []
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {
modelValue(newValue, oldValue) {
if(newValue === true) {
this.showMenuTree()
}
}
},
// 方法集合
methods: {
// 添加菜单
addMenu() {
ElMessageBox.confirm(
'确定添加该菜单?添加后只能在数据库删除',
'警告',
{
confirmButtonText: '确定添加',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
const menuDto = {
mainMenuIndex: this.menuData.mainMenuIndex,
mainMenuName: this.menuData.mainMenuName,
mainMenuIco: this.menuData.mainMenuIco,
minorMenuIndex: this.menuData.minorMenuIndex,
minorMenuName: this.menuData.minorMenuName,
minorMenuIco: this.menuData.minorMenuIco,
minorMenuRouter: this.menuData.minorMenuRouter,
menuStatus: this.menuData.menuStatus,
remark: this.menuData.remark
}
menuApi.addMenu(menuDto).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '添加菜单信息成功',
type: 'success',
})
this.showMenuTree()
} else {
ElMessage({
message: '更新失败',
type: 'warning',
})
}
}).catch((ex) => {
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
loading.close()
}).catch(() => {
})
},
resetMenuData() {
this.menuData.mainMenuIndex = ''
this.menuData.mainMenuName = ''
this.menuData.mainMenuIco = ''
this.menuData.minorMenuIndex = ''
this.menuData.minorMenuName = ''
this.menuData.minorMenuIco = ''
this.menuData.minorMenuRouter = ''
this.menuData.menuStatus = '1'
this.menuData.remark = ''
},
// 树形控件被点击的时候
nodeClick(node) {
this.resetMenuData()
const menuLabel = node.label
const menuInfo = menuLabel.split('*')
const mainMenu = this.menuList.filter(f=>f.mainMenuIndex === menuInfo[0])
if(mainMenu !== undefined && mainMenu.length > 0) {
this.menuData.mainMenuIndex = mainMenu[0].mainMenuIndex
this.menuData.mainMenuIco = mainMenu[0].mainMenuIco
this.menuData.mainMenuName = mainMenu[0].mainMenuName
return
}
const minorMenu = this.menuList.filter(f=>f.minorMenuIndex === menuInfo[0])
if(minorMenu !== undefined && minorMenu.length > 0) {
this.menuData.mainMenuIndex = minorMenu[0].mainMenuIndex
this.menuData.mainMenuName = minorMenu[0].mainMenuName
this.menuData.mainMenuIco = minorMenu[0].mainMenuIco
this.menuData.minorMenuIndex = minorMenu[0].minorMenuIndex
this.menuData.minorMenuIco = minorMenu[0].minorMenuIco
this.menuData.minorMenuName = minorMenu[0].minorMenuName
}
},
// 启动时加载树形控件的信息
showMenuTree() {
if(this.menuList === undefined || this.menuList.length < 1) {
return
}
let menuTree = []
this.menuList.forEach((value)=> {
const filterResult = menuTree.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
if(filterResult === undefined || filterResult.length < 1) {
menuTree.push({
mainMenuIndex: value.mainMenuIndex,
mainMenuName: value.mainMenuName,
})
}
})
if(menuTree.length > 1) {
menuTree.forEach((value) => {
value.minorMenu = [];
const filterResult = this.menuList.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
if(filterResult !== undefined && filterResult.length > 0) {
filterResult.forEach((minorValue)=>{
value.minorMenu.push({
minorMenuIndex: minorValue.minorMenuIndex,
minorMenuName: minorValue.minorMenuName,
})
})
}
})
}
// 添加到树型控件
if(menuTree.length > 1) {
let treeItems = []
menuTree.forEach((value)=>{
let treeItem = {}
treeItem.label = `${value.mainMenuIndex}*${value.mainMenuName}`
treeItem.children = []
value.minorMenu.forEach((minorValue)=>{
treeItem.children.push({
label: `${minorValue.minorMenuIndex}*${minorValue.minorMenuName}`
})
})
treeItems.push(treeItem)
})
this.menu = treeItems
}
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
.demo-form-inline {
width: 100%;
.el-input {
--el-input-width: 100%;
}
.el-form-item {
width: 100%;
}
}
.demo-form-inline .el-select {
--el-select-width: 100%;
}
</style>

161
src/view/component/menuData/MenuDetail.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div>
<el-dialog :model-value="modelValue" title="菜单详情"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="top"
label-width="180px"
:model="menuDetail"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="一级菜单序号：">
<el-input v-model="menuDetail.mainMenuIndex" disabled/>
</el-form-item>
<el-form-item label="一级菜单名称：">
<el-input v-model="menuDetail.mainMenuName"/>
</el-form-item>
<el-form-item label="一级菜单图标：">
<el-input v-model="menuDetail.mainMenuIco"/>
</el-form-item>
<el-form-item label="二级菜单序号：">
<el-input v-model="menuDetail.minorMenuIndex" disabled/>
</el-form-item>
<el-form-item label="二级菜单名称：">
<el-input v-model="menuDetail.minorMenuName"/>
</el-form-item>
<el-form-item label="二级菜单图标：">
<el-input v-model="menuDetail.minorMenuIco"/>
</el-form-item>
<el-form-item label="二级菜单路由：">
<el-input v-model="menuDetail.minorMenuRouter"/>
</el-form-item>
<el-form-item label="菜单状态：">
<el-input v-model="menuDetail.menuStatus"/>
</el-form-item>
<el-form-item label="备注：">
<el-input v-model="menuDetail.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="updateData">变更信息</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import menuApi from '@/axios/menu'
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'menuDetail'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
updateData() {
ElMessageBox.confirm(
'确定变更该菜单的数据?',
'警告',
{
confirmButtonText: '确定变更',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
const menuDto = {
mainMenuIndex: this.menuDetail.mainMenuIndex,
mainMenuName: this.menuDetail.mainMenuName,
mainMenuIco: this.menuDetail.mainMenuIco,
minorMenuIndex: this.menuDetail.minorMenuIndex,
minorMenuName: this.menuDetail.minorMenuName,
minorMenuIco: this.menuDetail.minorMenuIco,
minorMenuRouter: this.menuDetail.minorMenuRouter,
menuStatus: this.menuDetail.menuStatus,
remark: this.menuDetail.remark
}
menuApi.updateMenu(menuDto).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '更新菜单信息成功',
type: 'success',
})
} else {
ElMessage({
message: '更新失败',
type: 'warning',
})
}
}).catch((ex) => {
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
loading.close()
}).catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
.demo-form-inline .el-input {
--el-input-width: 320px;
}
.demo-form-inline .el-select {
--el-select-width: 320px;
}
</style>

123
src/view/component/menuData/MenuList.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>系统菜单列表</h5>
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 330px)">
<el-table-column fixed prop="mainMenuIndex" label="一级菜单序号" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="mainMenuName" label="一级菜单名称" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="mainMenuIco" label="一级菜单图标" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="minorMenuIndex" label="二级菜单序号" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="minorMenuName" label="二级菜单名称" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="minorMenuIco" label="二级菜单图标" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="minorMenuRouter" label="二级菜单路由" width="160px" align="center" show-overflow-tooltip/>
<el-table-column prop="menuStatus" label="菜单状态" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="remark" label="备注" min-width="200px" show-overflow-tooltip/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px" v-if="searchParams !== undefined">
<el-pagination
v-if="searchParams.page.totalRow > 0"
small
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[1000]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="pageChangeEvent"
@current-change="pageChangeEvent"
/>
</el-row>
<!-- 查看详情，变更信息窗口-->
<MenuDetail v-model="showMenuDetail" :menu-detail="menuDetail"></MenuDetail>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import MenuDetail from "@/view/component/menuData/MenuDetail.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {MenuDetail},
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
showMenuDetail: false,
menuDetail: { },
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
checkDetail(row) {
this.menuDetail = {
mainMenuIndex : row.mainMenuIndex,
mainMenuName : row.mainMenuName,
mainMenuIco : row.mainMenuIco,
minorMenuIndex : row.minorMenuIndex,
minorMenuName : row.minorMenuName,
minorMenuIco : row.minorMenuIco,
minorMenuRouter : row.minorMenuRouter,
menuStatus : row.menuStatus,
remark : row.remark
}
this.showMenuDetail = true
},
pageChangeEvent() {
this.$emit('pageChange', this.searchParams)
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

107
src/view/component/menuData/SearchForm.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
<el-button type="success" @click="addMenu">添加菜单</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage} from "element-plus";
import menuApi from '@/axios/menu'
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'searchParams'],
emits: ['update:searchParams', 'update:modelValue', 'addMenu'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 1000
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
menuApi.getMenuDataWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
addMenu() {
this.$emit('addMenu')
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

150
src/view/component/plcData/AddPLCData.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div>
<el-dialog
title="添加PLC数据"
:model-value="modelValue"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="left"
label-width="160px"
:model="plcDataItem"
>
<el-form-item label="PLC 编号（唯一）：">
<el-input v-model="plcDataItem.plcId" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
</el-form-item>
<el-form-item label="PLC 名称：">
<el-input v-model="plcDataItem.plcName"/>
</el-form-item>
<el-form-item label="PLC IP地址：">
<el-input v-model="plcDataItem.plcIp" placeholder="请使用 ipv4 格式地址"/>
</el-form-item>
<el-form-item label="PLC 状态：">
<el-input v-model="plcDataItem.plcStatus" placeholder="0：不启用； 1：启用"/>
</el-form-item>
<el-form-item label="PLC 系列：">
<el-input v-model="plcDataItem.plcKind" placeholder="1200 | 1500"/>
</el-form-item>
<el-form-item label="机架：">
<el-input v-model="plcDataItem.rack"/>
</el-form-item>
<el-form-item label="插槽：">
<el-input v-model="plcDataItem.slot"/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="plcDataItem.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import plcApi from "@/axios/plc";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'plcDataItem'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 添加或者更新PLC序号
addOrUpdate() {
if(this.plcDataItem.plcId === ''){
ElMessage({
message: '请输入 plc 编号',
type: 'warning',
})
return
}
ElMessageBox.confirm(
`您确定要执行添加/编辑 plcId 为 ${this.plcDataItem.plcId} 的PLC信息?`,
'数据变更警告',
{
confirmButtonText: '变更',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const loading = ElLoading.service({
lock: true,
text: '请稍后...',
})
this.plcData = []
plcApi.editPlc(this.plcDataItem).then(res=>{
const responseData = res.data
if(responseData.code === 0){
ElMessage({
message: '添加/编辑成功',
type: 'success',
})
this.$emit('update:modelValue', false)
}else{
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
})
.catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

185
src/view/component/runningInfo/DownloadLog.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div>
<el-form :model="downLoadLog" :label-width="120" style="width: 30vh">
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
下载路径在您的浏览器里设置哦
</div>
<el-form-item label="日志类型：">
<el-select v-model="downLoadLog.logType" @change="changeLogType">
<el-option label="系统日志" value="系统日志" />
<el-option label="事件日志" value="事件日志" />
<el-option label="接口请求日志" value="接口请求日志" />
<el-option label="接口接收日志" value="接口接收日志" />
<el-option label="异常日志" value="异常日志" />
<el-option label="数据库日志" value="数据库日志" />
</el-select>
</el-form-item>
<el-form-item label="日志时间：">
<el-badge :value="fileName.length">
<el-select v-model="downLoadLog.logFileName" style="width: calc(30vh - 120px)">
<el-option v-for="item in fileName" :label="item" :value="item" />
</el-select>
</el-badge>
</el-form-item>
</el-form>
<span class="dialog-footer">
<el-button @click="preview">预览</el-button>
<el-button type="primary" @click="startDownLoad">下载</el-button>
</span>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import sysApi from "@/axios/system";
import {ElMessage} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
downLoadLog: {
// log类型
logType: '',
// log文件名
logFileName: ''
},
// 文件列表
fileName: []
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 下载文件
startDownLoad() {
if(this.downLoadLog.logFileName === '' || this.downLoadLog.logType === '')
{
ElMessage({
message: '需要先选择类型和时间',
type: 'warning',
})
return
}
sysApi.checkDownloadFile(this.downLoadLog).then((response) => {
const responseData = response.data
if(responseData.success === false) {
ElMessage({
message: '文件不存在',
type: 'warning',
})
return
}
sysApi.downloadFile(this.downLoadLog).then((response) => {
const responseData = response.data
const link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([responseData]));
link.setAttribute('download', this.downLoadLog.logType + this.downLoadLog.logFileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
ElMessage({
message: '您的下载将在 30秒内开始，请稍后',
type: 'success',
})
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '下载出现异常：' + ex,
type: 'error',
})
})
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '下载文件验证出现异常：' + ex,
type: 'error',
})
})
},
changeLogType() {
this.downLoadLog.logFileName = ''
sysApi.getLogFileName(this.downLoadLog.logType).then((response) => {
const responseData = response.data
if(responseData.code !== 0 || responseData["returnData"] === undefined || responseData["returnData"] === null) {
ElMessage({
message: '没有文件',
type: 'warning',
})
this.fileName = []
return
}
this.fileName = responseData["returnData"]
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求出现异常：' + ex,
type: 'error',
})
this.fileName = []
})
},
// 预览
preview() {
if(this.downLoadLog.logFileName === '' || this.downLoadLog.logType === '')
{
ElMessage({
message: '需要先选择类型和时间',
type: 'warning',
})
return
}
this.$emit('update:modelValue', '')
sysApi.checkDownloadFile(this.downLoadLog).then((response) => {
const responseData = response.data
if(responseData.success === false) {
ElMessage({
message: '文件不存在',
type: 'warning',
})
return
}
sysApi.downloadFile(this.downLoadLog).then((response) => {
const responseData = response.data
responseData.text().then(data=>{
this.$emit('update:modelValue', data)
}).catch(err=>{
ElMessage({
message: '预览出现异常：' + err,
type: 'error',
})
})
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '预览出现异常：' + ex,
type: 'error',
})
})
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '预览文件验证出现异常：' + ex,
type: 'error',
})
})
}
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

148
src/view/component/stackerData/EditStacker.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<div>
<el-dialog
title="添加/修改 堆垛机数据"
:model-value="modelValue"
@close="() => $emit('update:modelValue', false)">
<el-form
label-position="left"
label-width="200px"
:model="stackerDataItem"
>
<el-form-item label="堆垛机编号（唯一）：" required>
<el-input v-model="stackerDataItem.stackerId" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
</el-form-item>
<el-form-item label="堆垛机名称：">
<el-input v-model="stackerDataItem.stackerName"/>
</el-form-item>
<el-form-item label="堆垛机状态：">
<el-switch
v-model="stackerDataItem.stackerStatus"
inline-prompt
active-text="启用"
inactive-text="停用"
active-value="1"
inactive-value="0"
/>
</el-form-item>
<el-form-item label="货叉状态：">
<el-input v-model="stackerDataItem.forkStatus"/>
</el-form-item>
<el-form-item label="对应的PLC编号：">
<el-input v-model="stackerDataItem.actionPlc"/>
</el-form-item>
<el-form-item label="入库站台：">
<el-input v-model="stackerDataItem.inStand"/>
</el-form-item>
<el-form-item label="出库站台：">
<el-input v-model="stackerDataItem.outStand"/>
</el-form-item>
<el-form-item label="备注信息：">
<el-input v-model="stackerDataItem.remark"/>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import stackerApi from "@/axios/stacker";
import {ElMessage, ElMessageBox} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'stackerDataItem'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
addOrUpdate() {
if(this.stackerDataItem.stackerId === '' || this.stackerDataItem.stackerId === undefined || this.stackerDataItem.stackerId === null){
ElMessage({
message: '请输入 堆垛机编号，此项是必填的',
type: 'warning',
})
return
}
ElMessageBox.confirm(
`您确定要执行添加/更新 堆垛机编号 为 ${this.stackerDataItem.stackerId} 的堆垛机信息?`,
'数据变更警告',
{
confirmButtonText: '添加/更新',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
stackerApi.editStackerData(this.stackerDataItem).then(response=>{
const responseData = response.data
if(responseData.code === 0){
ElMessage({
message: '添加/更新成功',
type: 'success',
})
this.$emit('update:modelValue', false)
} else {
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
})
.catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

184
src/view/component/userData/AddUser.vue Normal file
View File

@ -0,0 +1,184 @@
<template>
<div>
<el-dialog :model-value="modelValue" :show-close="false" title="创建新用户"
@close="() => $emit('update:modelValue', false)">
<div>
<el-form
label-position="right"
label-width="100px"
:model="user"
require-asterisk-position="right"
style="width: 600px"
>
<el-form-item label="用户ID：">
<el-input v-model="user.userId" style="width: 500px"/>
</el-form-item>
<el-form-item label="用户名称：">
<el-input v-model="user.userName" style="width: 500px"/>
</el-form-item>
<el-form-item label="用户密码：">
<el-input v-model="user.userPassword" type="password" show-password style="width: 500px"/>
</el-form-item>
<el-form-item label="用户状态：">
<el-switch
v-model="user.userStatus"
inline-prompt
active-text="正常"
inactive-text="停用"
active-value="1"
inactive-value="0"
style="width: 500px"
/>
</el-form-item>
<el-form-item label="用户组：">
<el-select v-model="user.userGroup" placeholder="请选择用户组" style="width: 500px">
<el-option
v-for="item in userGroup"
:key="item.groupId"
:label="item.groupId"
:value="item.groupId"
:disabled="item.groupId === 'developer'"
>
<span style="float: left">{{ item.groupId }}</span>
<span
style="
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
"
>{{ item.groupName }}</span
>
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<template #footer>
<div style="margin-top: 50px">
<el-button type="success" @click="loadUserGroup">
<el-icon class="el-icon--left"><Refresh/></el-icon>
刷新用户组
</el-button>
<el-button type="primary" @click="addUser">
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
添加
</el-button>
<el-button @click="resetInput">
<el-icon class="el-icon--left"><RefreshRight/></el-icon>
重置
</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
关闭
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {CircleCloseFilled, CirclePlus, Refresh, RefreshRight} from "@element-plus/icons-vue";
import userGroupApi from '@/axios/user.group'
import {ElLoading, ElMessage} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Refresh, CircleCloseFilled, RefreshRight, CirclePlus},
props: ['modelValue'],
emits: [],
data() {
// 这里存放数据
return {
user: {
userId: '',
userName: '',
userPassword: '',
userStatus: '',
userGroup: '',
},
// 用户组
userGroup: []
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
addUser() {
},
/**
* 重置输入框
*/
resetInput() {
this.user.userId = ''
this.user.userName = ''
this.user.userPassword = ''
this.user.userStatus = '0'
this.user.userGroup = ''
},
loadUserGroup() {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
userGroupApi.getUserGroup().then((response) => {
const responseData = response.data
if(responseData.code === 0) {
this.userGroup = responseData['returnData']
} else {
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((err) => {
ElMessage({
message: '请求服务器失败：' + err,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

145
src/view/component/userData/SearchForm.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="查询关键字：">
<el-input placeholder="输入 用户ID/用户名称 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="用户状态：">
<el-checkbox-group v-model="searchParams.userStatus">
<el-checkbox label="正常" checked />
<el-checkbox label="禁用" checked />
</el-checkbox-group>
</el-form-item>
<el-form-item label="用户创建时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
<el-button type="success" @click="addUser">添加用户</el-button>
</el-row>
<!-- 创建新用户-->
<AddUser v-model="showAddUser" ref="addUser"></AddUser>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage} from "element-plus";
import userApi from '@/axios/user'
import AddUser from "@/view/component/userData/AddUser.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {AddUser},
props: ['modelValue', 'searchParams'],
emits: ['update:searchParams', 'update:modelValue'],
data() {
// 这里存放数据
return {
// 展示添加新用户弹窗
showAddUser: false
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
/**
* 查询用户信息
*/
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 50
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
userApi.getUserWithPage(searchParams).then((response) => {
const responseData = response.data
if(responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((err) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + err,
type: 'error',
})
loading.close()
})
},
/**
* 添加用户
*/
addUser() {
this.$refs.addUser.loadUserGroup()
this.showAddUser = true;
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

123
src/view/component/userData/UserList.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>用户账户列表</h5>
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 550px)">
<el-table-column fixed prop="userId" label="用户ID" min-width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="userName" label="用户名称" min-width="100px" align="center" show-overflow-tooltip/>
<el-table-column label="用户状态" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterUserStatus(scope.row.userStatus).type>{{formatterUserStatus(scope.row.userStatus).msg }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="modifyTime" label="修改时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="userGroup" label="所属用户组" min-width="180px" align="center" show-overflow-tooltip/>
<el-table-column fixed="right" label="操作" align="center" width="100">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkUser(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除用户" placement="top" effect="light">
<el-button type="danger" size="small" @click="deleteUser(scope.row)">
<el-icon><Delete/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
v-if="searchParams.page.totalRow > 0"
small
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="pageChangeEvent"
@current-change="pageChangeEvent"
/>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterTime from "@/plugins/formatter/formatter.time";
import {Delete, Search} from "@element-plus/icons-vue";
import formatterUserStatus from "@/plugins/formatter/formatter.user.status";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Delete, Search},
props: ['modelValue', 'searchParams'],
emits: [],
data() {
// 这里存放数据
return {
// -----
formatterTime: formatterTime.formatCellValueTime,
formatterUserStatus: formatterUserStatus.formatUserStatus
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
pageChangeEvent(){
},
// 查看详情
checkUser(row) {
},
// 删除用户
deleteUser(row) {
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

146
src/view/component/userMenuRule/AddUserGroup.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div>
<el-dialog :model-value="modelValue" title="添加用户组"
@close="() => $emit('update:modelValue', false)">
<el-row>
<el-form
label-position="left"
label-width="160px"
:model="userGroupData"
class="demo-form-inline"
>
<el-form-item label="用户组ID：">
<el-input v-model="userGroupData.groupId"/>
</el-form-item>
<el-form-item label="用户组名称：">
<el-input v-model="userGroupData.groupName"/>
</el-form-item>
<el-form-item label="用户组状态：">
<el-switch
v-model="userGroupData.groupStatus"
inline-prompt
active-text="启用"
inactive-text="停用"
active-value="1"
inactive-value="0"
/>
</el-form-item>
</el-form>
</el-row>
<template #footer>
<div>
<el-button type="primary" @click="addUserGroup">添加</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import userGroupApi from '@/axios/user.group'
import {ElLoading, ElMessage} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
userGroupData: {
groupId: '',
groupName: '',
groupStatus: '1'
}
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
addUserGroup() {
if(this.userGroupData.groupId === '' || this.userGroupData.groupName === ''){
ElMessage({
message: '请填写用户组名称和用户组ID',
type: 'error',
})
return
}
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
userGroupApi.addUserGroup(this.userGroupData).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '添加用户组成功',
type: 'success',
})
this.$emit('update:modelValue', false)
} else {
// 服务报错
ElMessage({
message: '添加用户组失败，服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '添加用户组，请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
.demo-form-inline {
width: 50%;
.el-input {
--el-input-width: 100%;
}
.el-form-item {
width: 100%;
}
}
</style>

181
src/view/component/userMenuRule/UserGroupList.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div>
<el-tabs type="border-card" style="height: calc(100vh - 185px)">
<el-tab-pane label="用户组列表">
<el-row style="margin-bottom: 15px">
<el-button type="primary" @click="queryUserGroup">查询/刷新 用户组</el-button>
<el-button type="success" @click="()=>showAddUserGroup=true">添加用户组</el-button>
</el-row>
<el-row>
<div v-if="editUserGroupId !== undefined && editUserGroupId !== ''"
style="font-size: 0.8rem; color: #ec6408;margin-bottom: 10px">当前编辑的用户组：{{editUserGroupId}}</div>
<el-table :data="userGroupList" border stripe max-height="calc(100vh - 350px)">
<el-table-column fixed prop="groupId" label="用户组ID" align="center"/>
<el-table-column prop="groupName" label="用户组名称" align="center"/>
<el-table-column prop="groupStatus" label="用户组状态" align="center"/>
<el-table-column fixed="right" label="操作" align="center" width="100">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="编辑权限" placement="top" effect="light">
<el-button type="primary" size="small" @click="editUserRule(scope.row)">
<el-icon><Edit/></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除用户组" placement="top" effect="light"
v-if="scope.row.groupId !== 'developer' ">
<el-button type="danger" size="small" @click="deleteUserGroup(scope.row)">
<el-icon><Delete/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
</el-tab-pane>
</el-tabs>
<!-- 添加用户组-->
<AddUserGroup v-model="showAddUserGroup"></AddUserGroup>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {Delete, Edit} from "@element-plus/icons-vue";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import userGroupApi from "@/axios/user.group";
import AddUserGroup from "@/view/component/userMenuRule/AddUserGroup.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {AddUserGroup, Edit, Delete},
props: ['editUserGroupId'],
emits: ['update:editUserGroupId', 'queryBaseMenu', 'queryUserRule'],
data() {
// 这里存放数据
return {
// 用户组列表
userGroupList: [],
// 展示添加用户组窗口
showAddUserGroup: false
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 查询用户组
queryUserGroup() {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
userGroupApi.getUserGroup().then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询用户组成功',
type: 'success',
})
this.userGroupList = Object.freeze(responseData["returnData"])
this.$emit('queryBaseMenu')
} else {
// 服务报错
ElMessage({
message: '查询用户组，服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '查询用户组，请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
// 编辑用户组权限
editUserRule(row) {
this.$emit('queryUserRule', row.groupId)
},
// 删除用户组
deleteUserGroup(row) {
ElMessageBox.confirm(
'确定删除该用户组？',
'警告',
{
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
userGroupApi.deleteUserGroup(row.groupId).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '删除用户组成功',
type: 'success',
})
} else {
// 服务报错
ElMessage({
message: '删除用户组失败，服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '删除用户组，请求服务器失败：' + ex,
type: 'error',
})
})
this.queryUserGroup()
}).catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

168
src/view/component/userMenuRule/UserMenu.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane :label="'用户菜单--' + userGroupId">
<el-row style="margin-bottom: 15px">
<el-button type="primary" @click="()=>$emit('queryMenu')">显示菜单</el-button>
<el-button @click="queryUserMenu">查询/刷新 权限</el-button>
<el-button type="success" @click="saveUserRule">保存权限</el-button>
</el-row>
<el-row>
<el-scrollbar style="height: calc(100vh - 300px)">
<el-tree
:data="menu"
show-checkbox
node-key="index"
default-expand-all
ref="menuTree">
</el-tree>
</el-scrollbar>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import userRuleApi from "@/axios/user.rule";
import menuApi from "@/axios/menu";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['userGroupId', 'menu'],
emits: ['queryMenu'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
queryUserMenu() {
if(this.userGroupId === undefined || this.userGroupId === '') {
ElMessage({
message: '请先在左侧选择用户组',
type: 'error',
})
return
}
userRuleApi.getUserGroupMenu(this.userGroupId).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询用户组菜单成功',
type: 'success',
})
const menuList = Object.freeze(responseData["returnData"])
let checkList = []
menuList.forEach((value)=> {
checkList.push(value.minorMenuIndex)
})
this.$refs.menuTree.setCheckedKeys(checkList, false)
} else {
// 服务报错
ElMessage({
message: '查询用户组菜单，服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '查询用户组菜单，请求服务器失败：' + ex,
type: 'error',
})
})
},
// 保存用户修改后的用户权限
saveUserRule() {
if(this.userGroupId === undefined || this.userGroupId === '') {
ElMessage({
message: '未识别到您选择的用户组，请先选择用户组',
type: 'error',
})
return
}
ElMessageBox.confirm(
'确定变更该用户的权限?',
'警告',
{
confirmButtonText: '确定变更',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const selectMenu = this.$refs.menuTree.getCheckedKeys(true)
const request = {
userGroupId: this.userGroupId,
userRules: selectMenu
}
userRuleApi.updateUserGroupMenu(request).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '保存用户权限成功',
type: 'success',
})
} else {
// 服务报错
ElMessage({
message: '保存用户权限，服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '保存用户权限，请求服务器失败：' + ex,
type: 'error',
})
})
}).catch(() => {
})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

168
src/view/component/wcsTask/ChangeWcsTask.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div>
<el-dialog :model-value="modelValue"
title="变更 WCS 任务信息"
@close="() => $emit('update:modelValue', false)">
<div style="margin-left: 80px">
<el-form
label-position="left"
label-width="120px"
:model="wcsTaskData"
style="max-width: 600px"
>
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
注意：此处点位是设备点位，不一定和 Wms 系统内点位相同
</div>
<el-form-item label="PLC任务号：">
<el-input class="form-input" v-model="wcsTaskData.plcId" disabled/>
</el-form-item>
<el-form-item label="任务号：">
<el-input class="form-input" v-model="wcsTaskData.taskId" disabled/>
</el-form-item>
<el-form-item label="载具号：">
<el-input class="form-input" v-model="wcsTaskData.vehicleNo" disabled/>
</el-form-item>
<el-form-item label="起点：">
<el-input class="form-input" v-model="wcsTaskData.origin" disabled/>
</el-form-item>
<el-form-item label="终点：">
<el-input class="form-input" v-model="wcsTaskData.destination" disabled/>
</el-form-item>
<el-form-item label="优先级：">
<el-input-number class="form-input" v-model="wcsTaskData.priority"/>
</el-form-item>
<el-form-item label="任务状态：">
<el-select class="form-input"
placeholder='请选择目标任务状态'
v-model="wcsTaskData.taskStatus"
>
<el-option label="待执行" value="0"/>
<el-option label="离开起点" value="1"/>
<el-option label="执行中" value="2"/>
<el-option label="到达终点" value="3"/>
<el-option label="执行完成" value="4"/>
<el-option label="执行异常" value="9"/>
</el-select>
</el-form-item>
</el-form>
<div style="margin-top: 50px">
<el-button type="primary" @click="changeTask">
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
变更
</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
关闭
</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {CircleCloseFilled, CirclePlus} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import wcsTaskApi from "@/axios/wcs.task";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {CircleCloseFilled, CirclePlus},
props: ['modelValue', 'wcsTaskData'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
changeTask() {
if(this.wcsTaskData.taskStatus === '') {
ElMessageBox.alert(`请先选择任务状态`, '警告', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
return
}
const changeTaskData = {
plcId: this.wcsTaskData.plcId,
taskStatus: this.wcsTaskData.taskStatus,
priority: this.wcsTaskData.priority
}
ElMessageBox.confirm(`确定变更PLC任务号：${this.wcsTaskData.plcId} 的任务状态吗？`, '变更状态确认', {
confirmButtonText: '确定变更',
cancelButtonText: '取消变更',
type: 'warning'
}).then(() => {
wcsTaskApi.updateWcsStatus(changeTaskData).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '任务状态变更成功， 请稍后刷新查看',
type: 'success',
})
} else {
// 服务报错
ElMessage({
message: '服务器返回操作失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
}).catch(() => {})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style lang="scss" scoped>
$input-width: 300px;
.form-input {
width: $input-width;
}
</style>

141
src/view/component/wcsTask/SearchForm.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item label="查询关键字：">
<el-input placeholder="输入 PLC任务号/料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="任务类型：">
<el-checkbox-group v-model="searchParams.taskType">
<el-checkbox label="入库任务" checked />
<el-checkbox label="出库任务" checked />
<el-checkbox label="拣选任务" checked />
<el-checkbox label="盘点任务" checked />
<el-checkbox label="移库任务" checked />
</el-checkbox-group>
</el-form-item>
<el-form-item label="任务状态：">
<el-checkbox-group v-model="searchParams.taskStatus">
<el-checkbox label="待执行" checked />
<el-checkbox label="离开起点" checked />
<el-checkbox label="执行中" checked />
<el-checkbox label="到达终点" checked />
<el-checkbox label="执行完成" checked />
<el-checkbox label="执行异常" checked />
</el-checkbox-group>
</el-form-item>
<el-form-item label="任务创建时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {ElLoading, ElMessage} from "element-plus";
import wcsTaskApi from "@/axios/wcs.task";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'searchParams'],
emits: ['update:searchParams', 'update:modelValue'],
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 50
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
wcsTaskApi.getWcsTaskWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData.msg)
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

173
src/view/component/wcsTask/WcsTaskList.vue Normal file
View File

@ -0,0 +1,173 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>设备任务列表</h5>
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 550px)">
<el-table-column fixed prop="plcId" label="PLC任务号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="taskId" label="任务号" width="250px" align="center" show-overflow-tooltip/>
<el-table-column label="任务类型" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterTaskType(scope.row.taskType).type>{{formatterTaskType(scope.row.taskType).msg }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="taskSort" label="任务排序" width="90px" align="center"/>
<el-table-column label="任务状态" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterWcsTaskStatus(scope.row.taskStatus).type>{{formatterWcsTaskStatus(scope.row.taskStatus).msg }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="priority" label="优先级" width="90px" align="center" show-overflow-tooltip/>
<el-table-column prop="origin" label="搬运起点" width="150px" align="center" show-overflow-tooltip/>
<el-table-column prop="destination" label="搬运终点" width="150px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="载具号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="plcVehicleNo" label="数字载具号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleSize" label="载具尺寸" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="weight" label="总重量" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createTime" label="任务创建时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="startTime" label="任务开始时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="completeTime" label="任务结束时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="remark" label="备注" min-width="200px" show-overflow-tooltip/>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="scope">
<el-button-group class="ml-4">
<!-- 变更任务状态 -->
<el-tooltip content="变更任务状态" placement="top" effect="light">
<el-button type="warning" size="small" @click="changeTaskStatus(scope.row)">
<el-icon><Switch/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
v-if="searchParams !== undefined && searchParams !== null && searchParams.page.totalRow > 0"
small
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="pageChangeEvent"
@current-change="pageChangeEvent"
/>
</el-row>
<!-- 变更 Wcs 任务信息弹窗-->
<ChangeWcsTask v-model="showChangeTask" :wcs-task-data="wcsTaskData"></ChangeWcsTask>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
import formatterWcsTaskStatus from "@/plugins/formatter/formatter.wcstask.status"
import formatterTime from "@/plugins/formatter/formatter.time";
import {Switch} from "@element-plus/icons-vue";
import wcsTaskApi from '@/axios/wcs.task'
import {ElMessage} from "element-plus";
import ChangeWcsTask from "@/view/component/wcsTask/ChangeWcsTask.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Switch, ChangeWcsTask},
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
// 展示修改Wcs任务信息的弹窗
showChangeTask: false,
// 传入修改信息弹窗的信息
wcsTaskData: {},
// -----
formatterTaskType: formatterTaskType.formatTaskType,
formatterWcsTaskStatus: formatterWcsTaskStatus.formatTaskStatus,
formatterTime: formatterTime.formatCellValueTime,
}
},
// 计算属性 类似于 data 概念
computed: {
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchData(taskId) {
this.taskId = taskId
this.wcsTaskList = []
wcsTaskApi.getWcsTaskWithTaskId(taskId).then((response)=>{
const responseData = response.data
if (responseData.code === 0) {
// 查询成功
this.wcsTaskList = responseData['returnData']
} else {
// 服务报错
ElMessage({
message: '查询WCS任务服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '查询WCS任务请求服务器失败：' + ex,
type: 'error',
})
})
},
changeTaskStatus(row) {
this.wcsTaskData = {}
this.wcsTaskData = {
plcId: row.plcId,
taskId: row.taskId,
vehicleNo: row.vehicleNo,
origin: row.origin,
destination: row.destination,
priority: row.priority,
taskStatus: ''
}
this.showChangeTask = true
},
pageChangeEvent() {
this.$emit('pageChange', this.searchParams)
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

239
src/view/component/wmsTask/AddWmsTask.vue Normal file
View File

@ -0,0 +1,239 @@
<template>
<div>
<el-dialog :model-value="modelValue" :show-close="false" title="新增设备任务"
@close="() => $emit('update:modelValue', false)">
<div>
<el-form
label-width="100px"
:model="wmsTask"
require-asterisk-position="right"
inline
>
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
请输入准确位置，否则可能不能正常运行任务（不建议使用此处操作，请前往WMS操作）
</div>
<el-form-item label="任务类型：" required>
<el-select v-model="wmsTask.taskType"
class="form-input"
placeholder='请选择任务类型'>
<el-option label="入库任务" value="1"/>
<el-option label="出库任务" value="2"/>
<el-option label="移库任务" value="9"/>
<el-option label="拣选盘点任务" value="4"/>
</el-select>
</el-form-item>
<el-form-item label="起点：" :required ="wmsTask.taskType === '2' || wmsTask.taskType === '9' || wmsTask.taskType === '4' ">
<el-autocomplete
v-model="wmsTask.origin"
:fetch-suggestions="locationFilter"
clearable
style="width: 300px"
placeholder="请输入起点"
/>
</el-form-item>
<el-form-item label="中间点：">
<el-autocomplete
v-model="wmsTask.midPoint"
:fetch-suggestions="locationFilter"
clearable
style="width: 300px"
placeholder="请输入中间点"
/>
</el-form-item>
<el-form-item label="终点：" :required ="wmsTask.taskType === '1' || wmsTask.taskType === '9'">
<el-autocomplete
v-model="wmsTask.destination"
:fetch-suggestions="locationFilter"
clearable
style="width: 300px"
placeholder="请输入终点"
:popper-append-to-body="false"
/>
</el-form-item>
<el-form-item label="载具号：" required>
<el-input class="form-input" v-model="wmsTask.vehicleNo"/>
</el-form-item>
<el-form-item label="优先级：" required>
<el-input-number class="form-input" v-model="wmsTask.priority" />
</el-form-item>
<el-form-item label="重量：" required>
<el-input-number class="form-input" v-model="wmsTask.weight" :precision="2"/>
</el-form-item>
<el-form-item label="尺寸：" required>
<el-input-number class="form-input" v-model="wmsTask.vehicleSize" />
</el-form-item>
<el-form-item label="备用：">
<el-input class="form-input" v-model="wmsTask.spare1"/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div style="margin-top: 50px">
<el-button type="primary" @click="addWmsTask">
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
添加
</el-button>
<el-button @click="resetInput">
<el-icon class="el-icon--left"><RefreshRight/></el-icon>
重置
</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
关闭
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {CircleCloseFilled, CirclePlus, RefreshRight} from "@element-plus/icons-vue"
import locationApi from '@/axios/location'
import {ElMessage, ElMessageBox} from "element-plus"
import wmsTaskApi from "@/axios/wms.task"
export default {
// import 引入的组件需要注入到对象中才能使用
components: {CircleCloseFilled, CirclePlus, RefreshRight},
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
// wms任务实体数据
wmsTask: {
// 任务号，添加时不用填
taskId: '',
// 任务类型
taskType: '',
// 任务状态，添加时不用填
taskStatus: '',
// 任务起点
origin: '',
// 中间点
midPoint: '',
// 优先级
priority: 0,
// 任务终点
destination: '',
// 载具号
vehicleNo: '',
// 重量
weight: 0,
// 尺寸
vehicleSize: 0,
// 备用
spare1: ''
},
// 点位信息，用于搜索填写值
locations: []
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 添加Wms任务
addWmsTask() {
if (this.wmsTask.taskType === '' || this.wmsTask.vehicleNo === '') {
ElMessageBox.alert(`您有必填的项未填`, '警告', {
type: 'warning',
confirmButtonText: '确定'
})
return;
}
if((this.wmsTask.taskType === '2' || this.wmsTask.taskType === '9' || this.wmsTask.taskType === '4' )&& this.wmsTask.origin === '')
{
ElMessageBox.alert(`出库/拣选/移库必须要有终点`, '警告', {
type: 'warning',
confirmButtonText: '确定'
})
return;
}
if((this.wmsTask.taskType === '1' || this.wmsTask.taskType === '9' )&& this.wmsTask.destination === '')
{
ElMessageBox.alert(`入库/移库必须要有起点`, '警告', {
type: 'warning',
confirmButtonText: '确定'
})
return;
}
wmsTaskApi.addWmsTask(this.wmsTask).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '添加任务成功',
type: 'success',
})
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.msg}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch((ex) => {
// 通讯报错
ElMessageBox.alert(`添加任务请求服务器失败：：${ex}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
},
// 重置输入框
resetInput() {
this.wmsTask.taskId = ''
this.wmsTask.taskType = ''
this.wmsTask.taskStatus = ''
this.wmsTask.origin = ''
this.wmsTask.midPoint = ''
this.wmsTask.destination = ''
this.wmsTask.priority = 0
this.wmsTask.vehicleNo = ''
this.wmsTask.weight = 0
this.wmsTask.vehicleSize = 0
this.wmsTask.spare1 = ''
},
// 查询起点终点筛选
locationFilter(value, callBack) {
if (value.length > 0) {
const items = this.locations.filter(item => item.value.toLowerCase().includes(value.toLowerCase()))
callBack(items)
} else {
callBack([])
}
},
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
// 请求获取所有的点位信息
locationApi.getLocation().then((response) => {
const responseData = response.data
// 正确请求
const locationData = responseData["returnData"];
const locations = []
locationData.forEach((value) => {
locations.push({value: value['wmsLocation'], link: value['wmsLocation']})
})
this.locations = locations
}).catch((ex) => {
console.log(`请求获取点位信息失败，异常信息：${ex}`)
})
}
}
</script>
<style lang="scss" scoped>
$input-width: 300px;
.form-input {
width: $input-width;
}
</style>

160
src/view/component/wmsTask/ChangeWmsTask.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div>
<el-dialog :model-value="modelValue"
title="变更任务信息"
@close="() => $emit('update:modelValue', false)">
<div style="margin-left: 80px">
<el-form
label-position="left"
label-width="120px"
:model="wmsTaskData"
style="max-width: 600px"
>
<el-form-item label="任务号：">
<el-input class="form-input" v-model="wmsTaskData.taskId" disabled/>
</el-form-item>
<el-form-item label="载具号：">
<el-input class="form-input" v-model="wmsTaskData.vehicleNo" disabled/>
</el-form-item>
<el-form-item label="起点：">
<el-input class="form-input" v-model="wmsTaskData.origin" disabled/>
</el-form-item>
<el-form-item label="中间点：">
<el-input class="form-input" v-model="wmsTaskData.midPoint" disabled/>
</el-form-item>
<el-form-item label="终点：">
<el-input class="form-input" v-model="wmsTaskData.destination" disabled/>
</el-form-item>
<el-form-item label="优先级：">
<el-input-number class="form-input" v-model="wmsTaskData.priority" disabled/>
</el-form-item>
<el-form-item label="任务状态：">
<el-select class="form-input"
placeholder='请选择目标任务状态'
v-model="wmsTaskData.taskStatus">
<el-option label="重置任务" value="0"/>
<el-option label="完成任务" value="3"/>
<el-option label="删除任务" value="999"/>
</el-select>
</el-form-item>
</el-form>
<div style="margin-top: 50px">
<el-button type="primary" @click="changeTaskStatus">
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
变更
</el-button>
<el-button type="danger" @click="$emit('update:modelValue', false)">
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
关闭
</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import {CircleCloseFilled, CirclePlus} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import wmsTaskApi from "@/axios/wms.task";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {CircleCloseFilled, CirclePlus},
props: ['modelValue', 'wmsTaskData'],
emits: ['update:modelValue'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
changeTaskStatus() {
if(this.wmsTaskData.taskStatus === '') {
ElMessageBox.alert(`请先选择任务状态`, '警告', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
return
}
const changeTaskData = {
taskId : this.wmsTaskData.taskId,
destination: this.wmsTaskData.destination,
taskStatus: this.wmsTaskData.taskStatus,
}
ElMessageBox.confirm(`确定变更任务号：${this.wmsTaskData.taskId} 的任务状态吗？`, '变更状态确认', {
confirmButtonText: '确定变更',
cancelButtonText: '取消变更',
type: 'warning'
}).then(() => {
wmsTaskApi.changeTaskStatus(changeTaskData).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '任务状态变更成功， 请稍后刷新查看',
type: 'success',
})
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
})
}).catch(() => {})
}
},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style lang="scss" scoped>
$input-width: 300px;
.form-input {
width: $input-width;
}
</style>

119
src/view/component/wmsTask/SearchForm.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
<el-row>
<el-form :model="searchParams" label-width="120" label-position="left" >
<el-form-item label="查询关键字：">
<el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item label="任务类型：">
<el-select v-model="searchParams.taskType" multiple placeholder="请选择需要查询的任务类型">
<el-option v-for="item in wmsTaskTypeEnum" :key="item.value" :label="item.label" :value="item.value "/>
</el-select>
</el-form-item>
<el-form-item label="任务状态：">
<el-select v-model="searchParams.taskStatus" multiple placeholder="请选择需要查询的任务状态">
<el-option v-for="item in wmsTaskStatusEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="任务创建时间：">
<el-date-picker
v-model="searchParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
/>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
<el-button type="success" @click="$emit('update:showAddWmsTask', true)">新增任务</el-button>
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import wmsTaskApi from '@/axios/wms.task'
import {ElLoading, ElMessage} from "element-plus";
import {wmsTaskTypeEnum} from "@/enum/taskEnum/wms.taskType.enum";
import {wmsTaskStatusEnum} from "@/enum/taskEnum/wms.taskStatus.enum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: ['modelValue', 'showAddWmsTask', 'searchParams'],
emits:['update:searchParams', 'update:modelValue', 'update:showAddWmsTask'],
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
wmsTaskStatusEnum() {
return wmsTaskStatusEnum
},
wmsTaskTypeEnum() {
return wmsTaskTypeEnum
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchBtn() {
this.searchParams.page.pageIndex = 1
this.searchParams.page.pageSize = 50
this.$emit('update:searchParams', this.searchParams)
this.searchData(this.searchParams)
},
searchData(searchParams) {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.$emit('update:modelValue', [])
wmsTaskApi.getWmsTaskWithPage(searchParams).then((response) => {
const responseData = response.data
if (responseData.code === 0) {
ElMessage({
message: '查询成功',
type: 'success',
})
// 正确请求，展示数据
this.searchParams.page.totalRow = parseInt(responseData["tag"])
this.$emit('update:searchParams', this.searchParams)
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
} else {
// 服务报错
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

99
src/view/component/wmsTask/WcsTaskDetail.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div>
<el-dialog
:model-value="modelValue"
title="该任务的子任务列表"
width="90vw"
@close="$emit('update:modelValue', false)"
>
<div>
<el-row style="margin-bottom: 10px">
<div style="font-size: 0.8rem; color: chocolate">当前查询的任务号：{{taskId}}</div>
</el-row>
<el-scrollbar :max-height="500">
<WcsTaskList v-model="wcsTaskList"></WcsTaskList>
</el-scrollbar>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
<el-button type="primary" @click="searchData(taskId)">查询/刷新</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
import formatterWcsTaskStatus from "@/plugins/formatter/formatter.wcstask.status"
import formatterTime from "@/plugins/formatter/formatter.time";
import {Switch} from "@element-plus/icons-vue";
import wcsTaskApi from '@/axios/wcs.task'
import {ElMessage} from "element-plus";
import WcsTaskList from "@/view/component/wcsTask/WcsTaskList.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {Switch, WcsTaskList},
props: ['modelValue'],
data() {
// 这里存放数据
return {
taskId: '',
wcsTaskList: [],
// -----
formatterTaskType: formatterTaskType.formatTaskType,
formatterWcsTaskStatus: formatterWcsTaskStatus.formatTaskStatus,
formatterTime: formatterTime.formatCellValueTime,
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
searchData(taskId) {
console.log(9999)
if(taskId === '') {
ElMessage({
message: '数据异常丢失，请关闭本页面后重试',
type: 'warning',
})
return
}
this.taskId = taskId
this.wcsTaskList = []
wcsTaskApi.getWcsTaskWithTaskId(taskId).then((response)=>{
const responseData = response.data
if (responseData.code === 0) {
// 查询成功
this.wcsTaskList = responseData['returnData']
} else {
// 服务报错
ElMessage({
message: '查询Wcs任务服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
}).catch((ex) => {
// 通讯报错
ElMessage({
message: '查询Wcs任务请求服务器失败：' + ex,
type: 'error',
})
})
}
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

140
src/view/component/wmsTask/WmsTaskList.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div>
<el-row style="width: calc(100vw - 270px)">
<h5>任务列表</h5>
<el-table :data="modelValue" border stripe max-height="calc(100vh - 550px)">
<el-table-column fixed prop="taskId" label="任务号" width="230px" align="center" show-overflow-tooltip/>
<el-table-column prop="taskType" label="任务类型" width="95px" align="center" show-overflow-tooltip>
<template #default="scope">
<el-tag class="ml-2" :type=formatterWmsTaskType(scope.row.taskType).color>
{{formatterWmsTaskType(scope.row.taskType).label}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="taskStatus" label="任务状态" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterWmsTaskStatusEnum(scope.row.taskStatus).color>
{{formatterWmsTaskStatusEnum(scope.row.taskStatus).label }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="priority" label="优先级" width="70px" align="center" show-overflow-tooltip/>
<el-table-column prop="origin" label="搬运起点" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="midPoint" label="中间点" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="destination" label="搬运终点" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="载具号" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleSize" label="载具尺寸" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="weight" label="总重量" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createPerson" label="创建人" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createTime" label="任务创建时间" :formatter="formatterTime" width="180px"
align="center" show-overflow-tooltip/>
<el-table-column prop="startTime" label="任务开始时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="endTime" label="任务结束时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="taskMsg" label="任务信息" show-overflow-tooltip min-width="120px"/>
<el-table-column fixed="right" label="操作" align="center" width="140">
<template #default="scope">
<el-button-group class="ml-4">
<el-tooltip content="查看详情" placement="top" effect="light">
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="变更任务状态" placement="top" effect="light">
<el-button type="warning" size="small" @click="changeTaskStatus(scope.row)">
<el-icon><Switch/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 15px">
<el-pagination
small
v-if="searchParams.page.totalRow > 0"
background
v-model:page-size="searchParams.page.pageSize"
v-model:current-page="searchParams.page.pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
layout="prev, pager, next, jumper, sizes, total"
:total="searchParams.page.totalRow"
@size-change="searchData"
@current-change="searchData"
/>
</el-row>
<!-- Wcs任务列表的弹窗-->
<WcsTaskDetail v-model="showWcsTask" ref="wcsTaskDetail"></WcsTaskDetail>
<!-- 变更 Wms 任务状态的弹窗-->
<ChangeWmsTask v-model="showChangeWmsTask" :wms-task-data="wmsTaskData"></ChangeWmsTask>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
import formatterWmsTaskStatus from "@/plugins/formatter/formatter.wmstask.status";
import formatterTime from "@/plugins/formatter/formatter.time";
import { Switch } from "@element-plus/icons-vue";
import ChangeWmsTask from "@/view/component/wmsTask/ChangeWmsTask.vue";
import WcsTaskDetail from "@/view/component/wmsTask/WcsTaskDetail.vue";
import {formatterWmsTaskType} from "@/enum/taskEnum/wms.taskType.enum"
import {formatterWmsTaskStatusEnum} from "@/enum/taskEnum/wms.taskStatus.enum";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {WcsTaskDetail, Switch, ChangeWmsTask },
props: ['modelValue', 'searchParams'],
emits: ['pageChange'],
data() {
// 这里存放数据
return {
// 展示WCS任务列表的弹窗
showWcsTask: false,
// 展示修改任务信息的弹窗
showChangeWmsTask: false,
// 传给修改任务窗口的值
wmsTaskData: {},
// -----
formatterTaskType: formatterTaskType.formatTaskType,
formatterWmsTaskStatus: formatterWmsTaskStatus.formatTaskStatus,
formatterTime: formatterTime.formatCellValueTime,
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
formatterWmsTaskStatusEnum,
formatterWmsTaskType,
searchData() {
this.$emit('pageChange', this.searchParams)
},
checkDetail(row) {
this.showWcsTask = true
this.$refs.wcsTaskDetail.searchData(row.taskId)
},
changeTaskStatus(row) {
this.wmsTaskData = {
taskId: row.taskId,
vehicleNo: row.vehicleNo,
origin: row.origin,
midPoint: row.midPoint,
destination: row.destination,
priority: row.priority,
taskStatus: ''
}
this.showChangeWmsTask = true
}
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

113
src/view/layout/MainAside.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div>
<h3 class="mb-2" style="text-align: center;">主菜单</h3>
<el-scrollbar height="calc(100vh - 120px)">
<el-menu active-text-color="#666699" background-color=#ffffff class="el-menu-vertical-demo"
text-color="#000000" v-for="{ico, index, mainMenu, minor} in menu" style="border: 0">
<el-sub-menu :index='index'>
<template #title>
<el-icon color="#409EFC">
<component :is='ico'></component>
</el-icon>
<span class="menuTitle">{{ mainMenu }}</span>
</template>
<div v-for="minorItem in (minor)">
<el-menu-item :index='minorItem.index' @click="clickMenu(minorItem)">
✦&nbsp;&nbsp;{{ minorItem['minorMenu'] }}
</el-menu-item>
</div>
</el-sub-menu>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import router from '@/router';
import {ElMessageBox} from "element-plus";
import {h} from "vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
menu: {
get() {
return this.$store.state.menu.menuData
},
set(value) {
this.$store.commit('setMenuData', value)
}
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
clickMenu(minorItem) {
if(minorItem.router === null || minorItem.router === '') {
ElMessageBox.alert(
h('div', null, [
h('div', null, '在做了在做了，不要再催啦'),
h('div', { style: { height: '10px' }}),
h('div', null, '(。•́︿•̀。) ')
]),
'页面维护', {
confirmButtonText: '我知道啦',
callback: (action) => {}
})
return
}
try {
let tabName = minorItem.index
const tab = this.$store.state.tab.tabs.filter(f=>f.name === tabName)
if (tab === undefined || tab.length === 0) {
const data = {
title: minorItem['minorMenu'],
name: tabName
}
this.$store.commit('addTab', data)
this.$store.commit('setSelectedTab', tabName)
} else {
this.$store.commit('setSelectedTab', tab[0].name)
tabName = tab[0].name
}
const tabRouter = this.$store.state.menu.menuList.filter(f => f.index === tabName)
if(tabRouter === undefined || tabRouter.length < 1) {
} else {
router.push({ name: tabRouter[0].router })
}
}catch (err) {
ElMessageBox.alert(
h('div', null, [
h('div', null, `页面无法打开，请重新登陆后再试`),
h('div', null, '(。•́︿•̀。) '),
h('div', null, `若重新登陆后此异常还在请联系我们，并提供以下信息：`),
h('div', null, err.toString())
]),
'页面打开失败', {
confirmButtonText: '确认',
callback: (action) => {}
})
}
}
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

114
src/view/layout/MainContent.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div style="margin-left:10px; font-size: 1.2rem">
<el-tabs
v-model='selectedTabName'
type='card'
@tab-click='clickTab'
@tab-remove='removeTab'
>
<el-tab-pane
:closable = "item.name !== '0-0'"
v-for='item in tabs'
:key='item.name'
:label='item.title'
:name='item.name'
>
<el-row>
<el-col :span="10" style="padding: 10px; font-weight: bolder">{{ item.title }}</el-col>
<el-col :span="2" :offset ="12">
<img src="@/../public/image/BKLogoSmall.png" alt="logo" style="width: 80px; height: 40px">
</el-col>
</el-row>
<el-row>
<el-scrollbar height="calc(100vh - 180px)">
<router-view v-slot="{ Component }">
<keep-alive><component :is="Component"/></keep-alive>
</router-view>
</el-scrollbar>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import router from '@/router';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {
}
},
// 计算属性 类似于 data 概念
computed: {
selectedTabName: {
get() {
return this.$store.state.tab.selectedTab
},
set(value) {
this.$store.commit('setSelectedTab', value)
}
},
tabs: {
get() {
return this.$store.state.tab.tabs
},
set(value) {
this.$store.commit('setTabs', value)
}
},
menuList: {
get() {
return this.$store.state.menu.menuList
},
set(value) {
this.$store.commit('setMenuList', value)
}
}
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 点击tab时触发
clickTab(tabsPaneContext, event) {
const tabName = tabsPaneContext.paneName
const tabRouterInfo = this.menuList.filter(f => f.index === tabName)
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
router.push({ name: 'nullPage' })
} else {
router.push({ name: tabRouterInfo[0].router })
}
},
removeTab(tabName) {
if(tabName === '0-0') {
return // 主页不让关
}
this.tabs = this.tabs.filter(f => f.name !== tabName)
const lastTab = this.tabs[this.tabs.length - 1]
const tabRouterInfo = this.menuList.filter(f => f.index === lastTab.name)
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
router.push({ name: 'nullPage' })
} else {
this.$store.commit('setSelectedTab', lastTab.name)
router.push({ name: tabRouterInfo[0].router })
}
},
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

51
src/view/layout/MainHeader.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div>
<el-page-header :icon="null" class="header">
<template #content>
<span class="text-large font-600 mr-3" style="color: aliceblue"> WCS设备控制系统 </span>
</template>
<template #title>
<div class="flex items-center">菲达宝开</div>
</template>
<template #extra>
<div class="flex items-center rightText" v-if="vuexData.user.userName !== ''" style="font-size: 0.8rem">
用户名：{{ vuexData.user.userName }}
</div>
</template>
</el-page-header>
</div>
</template>
<script>
// 例如：import 《组件名称》 from '《组件路径》 ';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {
vuexData: this.$store.state
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
.header {
background-color: #4b5cc4;
padding: 13px;
color: aliceblue;
}
</style>

37
src/view/layout/MainPage.vue Normal file
View File

@ -0,0 +1,37 @@
主要框架
<template>
<div>
<MainHeader style="width: 100%; height: 50px"/>
<router-view/>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import MainHeader from "@/view/layout/MainHeader.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {MainHeader},
props: {},
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

43
src/view/page/ContentPage.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div style="display: flex">
<div class="aside">
<MainAside/>
</div>
<div style="width: calc(100vw - 260px);">
<MainContent/>
</div>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import MainAside from "@/view/layout/MainAside.vue";
import MainContent from "@/view/layout/MainContent.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {MainContent, MainAside},
props: {},
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
.aside {
border-right: #4b5cc455 solid 1px;
width: 240px;
}
</style>

139
src/view/page/LoginPage.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class='formBorderMid'>
<div class='mainTitle'>WCS 设备控制系统</div>
<el-form
label-position="left"
label-width="70px"
:model="loginUser"
style="max-width: 460px; text-align: center; margin: auto auto"
>
<el-form-item label="您的 ID">
<el-input v-model="loginUser.userId"/>
</el-form-item>
<el-form-item label="您的密码">
<el-input v-model="loginUser.userPassword" show-password/>
</el-form-item>
<el-form-item>
<el-button class="loginBtn" color="#4b5cc4" @click="onSubmit" :loading="loading">登 录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import userApi from '@/axios/user.js';
import {ElMessage, ElMessageBox} from "element-plus";
import router from '@/router';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {
loginUser: {
userId: '',
userPassword: ''
},
loading: false
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
// 登陆按钮
onSubmit() {
if(this.loginUser.userId === '' || this.loginUser.userPassword === '') {
ElMessageBox.alert(`账户名或者密码为空`, '登陆失败', {
confirmButtonText: '确定'
}).catch(()=>{ })
return
}
this.loading = true
userApi.login(this.loginUser).then((response) => {
const data = response.data
if(data.code !== 0) {
// 服务器返回失败
ElMessageBox.alert(`登陆失败，信息：${data.msg}`, '登陆失败', {
confirmButtonText: '确定'
}).catch(()=>{ })
} else {
// 登陆成功
ElMessage({
message: '登陆成功',
type: 'success',
})
const returnData = data['returnData']
window.sessionStorage.setItem("userName", returnData.userName)
let userInfo = { userId: this.loginUser.userId, userName: returnData.userName}
this.$store.commit('setUserInfo', userInfo)
this.loadMenu(returnData.menu) // 加载菜单
router.push({name: 'wcs'})
}
this.loading = false
}).catch((err) => {
ElMessageBox.alert(`请求登陆失败，异常信息：${err}`, '登陆失败', {
type: 'warning',
confirmButtonText: '确定'
}).catch(()=>{ })
this.loading = false
})
},
// 加载菜单
loadMenu(menu) {
if(menu === undefined || menu.length < 1) {
return
}
this.$store.commit('setMenuData', menu)
let menuList = []
menu.forEach((menuItem, index) => {
const minor = menuItem.minor
if(minor === undefined || minor.length < 1) {
return
}
minor.forEach((minorItem, index) => {
menuList.push(minorItem)
})
})
this.$store.commit('setMenuList', menuList)
window.sessionStorage.setItem("menuList", JSON.stringify(menuList))
}
},
created() {
this.$store.commit('resetMenuData')
this.$store.commit('resetTabs')
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
if(process.env.NODE_ENV === 'development'){
this.loginUser.userId = 'developer'
this.loginUser.userPassword = 'developer'
}
}
}
</script>
<style scoped>
.formBorderMid {
border: #6b778c50 1px solid;
border-radius: 15px;
margin: 250px auto auto auto;
padding: 30px;
width: 500px;
}
.mainTitle {
font-size: 25px;
margin: auto auto 45px auto;
text-align: center;
}
.loginBtn {
width: 100%;
margin-top: 1rem;
}
</style>

32
src/view/page/NullPage.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
}
}
</script>
<style scoped>
</style>

87
src/view/tab/accountManage/UserData.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div>
<el-row>
<SearchForm v-model="userList" v-model:search-params="searchParams" style="width: 100%"/>
</el-row>
<el-row>
<UserList v-model="userList" v-model:search-params="searchParams" />
</el-row>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import SearchForm from "@/view/component/userData/SearchForm.vue";
import UserList from "@/view/component/userData/UserList.vue";
import AddUser from "@/view/component/userData/AddUser.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {AddUser, UserList, SearchForm},
props: [],
emits: [],
data() {
// 这里存放数据
return {
// 查找参数，用于传递使用，具体定义在SearchForm组件内
searchParams: {
// 查询关键字
searchStr: '',
// 用户状态
userStatus: [],
// 起止时间
timeRange: [],
// 分页控件信息
page: {
// 每页显示的行数
pageSize: 50,
// 当前页码
pageIndex: 1,
// 总行数
totalRow: 0
},
},
// 任务列表
userList: [],
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 组合式 API
setup() {
},
// 创建之前
beforeCreate() {
},
// 创建完成(可以访问 this 实例)
created() {
},
// 生命周期 - 挂载之前
beforeMount() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeUnmount() {
},
// 销毁完成
unmounted() {
}
}
</script>
<style scoped>
</style>

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