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

2024-06-20 09:50:44 +08:00 · 2024-06-20 09:50:44 +08:00 · 1c6ac663bd
commit 1c6ac663bd
123 changed files with 22112 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/README.md
+++ b/README.md
@ -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/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/1
+++ b/1
@ -0,0 +1 @@
+21.6.2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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"
+  ]
+}
--- a/public/ico/bklogo.ico
+++ b/public/ico/bklogo.ico
--- a/public/image/BKLogoSmall.png
+++ b/public/image/BKLogoSmall.png
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/App.vue
+++ b/src/App.vue
@ -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>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/axios/api.accept.js
+++ b/src/axios/api.accept.js
@ -0,0 +1,10 @@
+import axios from '@/axios/base/base.axios';
+
+
+export default {
+    // 分页控件查询
+    getApiAcceptInfoWithPage(request) {
+        return axios.post('/api/wcs/apiAccept/getApiAcceptWithPage', request)
+    }
+}
+
--- a/src/axios/api.request.js
+++ b/src/axios/api.request.js
@ -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)
+    }
+}
+
--- a/src/axios/base/base.axios.js
+++ b/src/axios/base/base.axios.js
@ -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;
--- a/src/axios/config.js
+++ b/src/axios/config.js
@ -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
--- a/src/axios/db.js
+++ b/src/axios/db.js
@ -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 }})
+    }
+}
--- a/src/axios/el.tag.js
+++ b/src/axios/el.tag.js
@ -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);
+    },
+}
--- a/src/axios/location.js
+++ b/src/axios/location.js
@ -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)
+    }
+}
--- a/src/axios/menu.js
+++ b/src/axios/menu.js
@ -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)
+    }
+}
+
--- a/src/axios/plc.js
+++ b/src/axios/plc.js
@ -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
+            }
+        })
+    },
+}
--- a/src/axios/stacker.js
+++ b/src/axios/stacker.js
@ -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)
+    },
+}
--- a/src/axios/system.js
+++ b/src/axios/system.js
@ -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
+        })
+    }
+
+}
--- a/src/axios/user.group.js
+++ b/src/axios/user.group.js
@ -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
+            }
+        })
+    }
+}
--- a/src/axios/user.js
+++ b/src/axios/user.js
@ -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)
+    }
+}
--- a/src/axios/user.rule.js
+++ b/src/axios/user.rule.js
@ -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)
+    },
+}
--- a/src/axios/wcs.task.js
+++ b/src/axios/wcs.task.js
@ -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)
+    }
+}
--- a/src/axios/wms.task.js
+++ b/src/axios/wms.task.js
@ -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)
+    }
+
+
+}
--- a/src/enum/base/on.off.enum.js
+++ b/src/enum/base/on.off.enum.js
@ -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'};
+    }
+}
--- a/src/enum/elTag/eltag.task.enum.js
+++ b/src/enum/elTag/eltag.task.enum.js
@ -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'};
+    }
+}
--- a/src/enum/elTag/eltag.task.type.enum.js
+++ b/src/enum/elTag/eltag.task.type.enum.js
@ -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'};
+    }
+}
--- a/src/enum/location/locationStatusEnum.js
+++ b/src/enum/location/locationStatusEnum.js
@ -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'};
+    }
+}
--- a/src/enum/location/locationTypeEnum.js
+++ b/src/enum/location/locationTypeEnum.js
@ -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'};
+    }
+}
--- a/src/enum/stacker/stackerControlModelEnum.js
+++ b/src/enum/stacker/stackerControlModelEnum.js
@ -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'};
+    }
+}
--- a/src/enum/stacker/stackerStatusEnum.js
+++ b/src/enum/stacker/stackerStatusEnum.js
@ -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'};
+    }
+}
--- a/src/enum/taskEnum/wms.taskStatus.enum.js
+++ b/src/enum/taskEnum/wms.taskStatus.enum.js
@ -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};
+    }
+}
--- a/src/enum/taskEnum/wms.taskType.enum.js
+++ b/src/enum/taskEnum/wms.taskType.enum.js
@ -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}
+    }
+}
--- a/src/main.js
+++ b/src/main.js
@ -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')
--- a/src/plugins/color/base.color.js
+++ b/src/plugins/color/base.color.js
@ -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',
+}
--- a/src/plugins/dataCheck/json.extend.js
+++ b/src/plugins/dataCheck/json.extend.js
@ -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
--- a/src/plugins/element.js
+++ b/src/plugins/element.js
@ -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 })
+}
--- a/src/plugins/formatter/formatter.bool.js
+++ b/src/plugins/formatter/formatter.bool.js
@ -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
--- a/src/plugins/formatter/formatter.location.js
+++ b/src/plugins/formatter/formatter.location.js
@ -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
--- a/src/plugins/formatter/formatter.msglv.js
+++ b/src/plugins/formatter/formatter.msglv.js
@ -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
--- a/src/plugins/formatter/formatter.task.type.js
+++ b/src/plugins/formatter/formatter.task.type.js
@ -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
--- a/src/plugins/formatter/formatter.time.js
+++ b/src/plugins/formatter/formatter.time.js
@ -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
--- a/src/plugins/formatter/formatter.user.status.js
+++ b/src/plugins/formatter/formatter.user.status.js
@ -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
--- a/src/plugins/formatter/formatter.wcstask.status.js
+++ b/src/plugins/formatter/formatter.wcstask.status.js
@ -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
--- a/src/plugins/formatter/formatter.wmstask.status.js
+++ b/src/plugins/formatter/formatter.wmstask.status.js
@ -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
--- a/src/router/index.js
+++ b/src/router/index.js
@ -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
--- a/src/store/index.js
+++ b/src/store/index.js
@ -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]
+})
--- a/src/store/modules/menu.js
+++ b/src/store/modules/menu.js
@ -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;
--- a/src/store/modules/tab.js
+++ b/src/store/modules/tab.js
@ -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;
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -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;
--- a/src/view/component/apiAccept/ApiAcceptDetail.vue
+++ b/src/view/component/apiAccept/ApiAcceptDetail.vue
@ -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>
--- a/src/view/component/apiAccept/ApiAcceptList.vue
+++ b/src/view/component/apiAccept/ApiAcceptList.vue
@ -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>
--- a/src/view/component/apiAccept/SearchForm.vue
+++ b/src/view/component/apiAccept/SearchForm.vue
@ -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>
--- a/src/view/component/apiRequest/ApiRequestDetail.vue
+++ b/src/view/component/apiRequest/ApiRequestDetail.vue
@ -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>
--- a/src/view/component/apiRequest/ApiRequestList.vue
+++ b/src/view/component/apiRequest/ApiRequestList.vue
@ -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>
--- a/src/view/component/apiRequest/SearchForm.vue
+++ b/src/view/component/apiRequest/SearchForm.vue
@ -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>
--- a/src/view/component/configData/EditConfig.vue
+++ b/src/view/component/configData/EditConfig.vue
@ -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>
--- a/src/view/component/dbData/AddDBData.vue
+++ b/src/view/component/dbData/AddDBData.vue
@ -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>
--- a/src/view/component/dbData/DbList.vue
+++ b/src/view/component/dbData/DbList.vue
@ -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>
--- a/src/view/component/dbData/SearchForm.vue
+++ b/src/view/component/dbData/SearchForm.vue
@ -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>
--- a/src/view/component/elTagTask/AddElTagTask.vue
+++ b/src/view/component/elTagTask/AddElTagTask.vue
@ -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>
--- a/src/view/component/elTagTask/EditElTagTask.vue
+++ b/src/view/component/elTagTask/EditElTagTask.vue
@ -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>
--- a/src/view/component/elTagTask/ElTagTaskList.vue
+++ b/src/view/component/elTagTask/ElTagTaskList.vue
@ -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>
--- a/src/view/component/elTagTask/SearchForm.vue
+++ b/src/view/component/elTagTask/SearchForm.vue
@ -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>
--- a/src/view/component/locationData/CheckDetail.vue
+++ b/src/view/component/locationData/CheckDetail.vue
@ -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>
--- a/src/view/component/locationData/LocationList.vue
+++ b/src/view/component/locationData/LocationList.vue
@ -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>
--- a/src/view/component/locationData/SearchForm.vue
+++ b/src/view/component/locationData/SearchForm.vue
@ -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>
--- a/src/view/component/menuData/AddMenu.vue
+++ b/src/view/component/menuData/AddMenu.vue
@ -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>
--- a/src/view/component/menuData/MenuDetail.vue
+++ b/src/view/component/menuData/MenuDetail.vue
@ -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>
--- a/src/view/component/menuData/MenuList.vue
+++ b/src/view/component/menuData/MenuList.vue
@ -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>
--- a/src/view/component/menuData/SearchForm.vue
+++ b/src/view/component/menuData/SearchForm.vue
@ -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>
--- a/src/view/component/plcData/AddPLCData.vue
+++ b/src/view/component/plcData/AddPLCData.vue
@ -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>
--- a/src/view/component/runningInfo/DownloadLog.vue
+++ b/src/view/component/runningInfo/DownloadLog.vue
@ -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>
--- a/src/view/component/stackerData/EditStacker.vue
+++ b/src/view/component/stackerData/EditStacker.vue
@ -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>
--- a/src/view/component/userData/AddUser.vue
+++ b/src/view/component/userData/AddUser.vue
@ -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>
--- a/src/view/component/userData/SearchForm.vue
+++ b/src/view/component/userData/SearchForm.vue
@ -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>
--- a/src/view/component/userData/UserList.vue
+++ b/src/view/component/userData/UserList.vue
@ -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>
--- a/src/view/component/userMenuRule/AddUserGroup.vue
+++ b/src/view/component/userMenuRule/AddUserGroup.vue
@ -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>
--- a/src/view/component/userMenuRule/UserGroupList.vue
+++ b/src/view/component/userMenuRule/UserGroupList.vue
@ -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>
--- a/src/view/component/userMenuRule/UserMenu.vue
+++ b/src/view/component/userMenuRule/UserMenu.vue
@ -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>
--- a/src/view/component/wcsTask/ChangeWcsTask.vue
+++ b/src/view/component/wcsTask/ChangeWcsTask.vue
@ -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>
--- a/src/view/component/wcsTask/SearchForm.vue
+++ b/src/view/component/wcsTask/SearchForm.vue
@ -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>
--- a/src/view/component/wcsTask/WcsTaskList.vue
+++ b/src/view/component/wcsTask/WcsTaskList.vue
@ -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>
--- a/src/view/component/wmsTask/AddWmsTask.vue
+++ b/src/view/component/wmsTask/AddWmsTask.vue
@ -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>
--- a/src/view/component/wmsTask/ChangeWmsTask.vue
+++ b/src/view/component/wmsTask/ChangeWmsTask.vue
@ -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>
--- a/src/view/component/wmsTask/SearchForm.vue
+++ b/src/view/component/wmsTask/SearchForm.vue
@ -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>
--- a/src/view/component/wmsTask/WcsTaskDetail.vue
+++ b/src/view/component/wmsTask/WcsTaskDetail.vue
@ -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>
--- a/src/view/component/wmsTask/WmsTaskList.vue
+++ b/src/view/component/wmsTask/WmsTaskList.vue
@ -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>
--- a/src/view/layout/MainAside.vue
+++ b/src/view/layout/MainAside.vue
@ -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>
--- a/src/view/layout/MainContent.vue
+++ b/src/view/layout/MainContent.vue
@ -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>
--- a/src/view/layout/MainHeader.vue
+++ b/src/view/layout/MainHeader.vue
@ -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>
--- a/src/view/layout/MainPage.vue
+++ b/src/view/layout/MainPage.vue
@ -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>
--- a/src/view/page/ContentPage.vue
+++ b/src/view/page/ContentPage.vue
@ -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>
--- a/src/view/page/LoginPage.vue
+++ b/src/view/page/LoginPage.vue
@ -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>
--- a/src/view/page/NullPage.vue
+++ b/src/view/page/NullPage.vue
@ -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>
--- a/src/view/tab/accountManage/UserData.vue
+++ b/src/view/tab/accountManage/UserData.vue
@ -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>
--- a/Show More
+++ b/Show More