icewint/wcs_client_kate_suzhou
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

<add>[important]添加堆垛机管理功能

Browse Source
This commit is contained in:
葛林强 2024-05-27 08:50:44 +08:00
parent 05dc58cbaf
commit c540e530de
6 changed files with 281 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/axios/stacker.js
View File

@ -1,8 +1,16 @@
import axios from '@/axios/base/base.axios';
export default {
// 获取所有堆垛机数据
getStacker() {
// 获取所有堆垛机状态
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)
},
}

2
src/router/index.js
View File

@ -37,7 +37,7 @@ const routes = [
{ 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/equipmentManage/SocketData.vue') }, // Socket通讯管理
{ path: 'socketData', name: 'socketData', component:() => import('../view/tab/development/SocketData.vue') }, // Socket通讯管理
{ path: 'menuData', name: 'menuData', component:() => import('@/view/tab/development/MenuData.vue') }, // 菜单管理
]

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

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

0
src/view/tab/equipmentManage/SocketData.vue → src/view/tab/development/SocketData.vue
View File

112
src/view/tab/equipmentManage/StackerData.vue
View File

@ -1,28 +1,134 @@
<template>
<!-- 堆垛机管理-->
<div>
<el-row>
<el-button type="primary" style="margin-left: 0.5rem" @click="refresh">查询/刷新</el-button>
<el-button type="success" style="margin-left: 0.5rem" @click="add">添加</el-button>
</el-row>
<el-row style="width: calc(100vw - 270px)">
<h5>堆垛机信息</h5>
<el-table :data="stackerInfo" border stripe style="width: 100%;" max-height="calc(100vh - 350px)">
<el-table-column fixed prop="stackerId" label="堆垛机编号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column fixed prop="stackerName" label="堆垛机名称" width="250px" align="center" show-overflow-tooltip/>
<el-table-column prop="stackerStatus" label="堆垛机状态（系统）" align="center" width="180px">
<template #default="scope">
<el-tag class="ml-2" :type=formatterOnOrOffEnum(scope.row.stackerStatus).type>
{{formatterOnOrOffEnum(scope.row.stackerStatus).label}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="forkStatus" label="货叉状态（系统）" align="center" width="150px"/>
<el-table-column prop="actionPlc" label="对应的PLC编号" align="center" width="150px"/>
<el-table-column prop="inStand" label="入库站台" align="center"/>
<el-table-column prop="outStand" label="出库站台" align="center"/>
<el-table-column prop="remark" label="备注" align="center"/>
<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="edit(scope.row)">
<el-icon><Edit/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-row>
<!-- 添加或者编辑堆垛机窗口-->
<EditStacker v-model="showAddOrEdit" v-model:stacker-data-item="stackerDataItem"></EditStacker>
</div>
</template>
<script>
// import 《组件名称》 from '《组件路径》 ';
import stackerApi from "@/axios/stacker";
import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
import {Edit} from "@element-plus/icons-vue";
import {ElLoading, ElMessage} from "element-plus";
import EditStacker from "@/view/component/stackerData/EditStacker.vue";
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
components: {EditStacker, Edit},
props: [],
emits: [],
data() {
// 这里存放数据
return {}
return {
stackerInfo: [],
// 传入到添加/编辑框里面的参数
stackerDataItem: {},
// 是否展示添加或者编辑堆垛机窗口
showAddOrEdit: false
}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
methods: {
formatterOnOrOffEnum,
// 查询/刷新 堆垛机信息
refresh() {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
})
this.stackerInfo = []
stackerApi.getStackerData().then(res=>{
const responseData = res.data
if(responseData.code === 0){
ElMessage({
message: '查询成功',
type: 'success',
})
this.stackerInfo = Object.freeze(responseData["returnData"])
}else{
ElMessage({
message: '服务器返回失败：' + responseData.msg,
type: 'warning',
})
}
loading.close()
}).catch(ex=>{
ElMessage({
message: '请求服务器失败：' + ex,
type: 'error',
})
loading.close()
})
},
// 打开编辑框
edit(row) {
this.stackerDataItem = {
stackerId: row.stackerId,
stackerName: row.stackerName,
stackerStatus: row.stackerStatus.toString(),
forkStatus: row.forkStatus,
actionPlc: row.actionPlc,
inStand: row.inStand,
outStand: row.outStand,
remark: row.remark
}
this.showAddOrEdit = true
},
// 添加
add() {
this.stackerDataItem = {
stackerId: '',
stackerName: '',
stackerStatus: '0',
forkStatus: '0',
actionPlc: '',
inStand: '',
outStand: '',
remark: ''
}
this.showAddOrEdit = true
}
},
// 组合式 API
setup() {
},

31
src/view/tab/systemStatus/StackerStatus.vue
View File

@ -35,17 +35,17 @@
<el-table-column prop="depth" label="深" align="center" width="60px"/>
<el-table-column prop="code" label="料箱码" align="center" width="150px"/>
<el-table-column prop="errCode" label="报警编号" align="center" width="130px" 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="search(scope.row)">
<el-icon><Search/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
<!-- <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="search(scope.row)">-->
<!-- <el-icon><Search/></el-icon>-->
<!-- </el-button>-->
<!-- </el-tooltip>-->
<!-- </el-button-group>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-row>
</div>
@ -57,7 +57,7 @@ import stacker from "@/axios/stacker";
import {ElLoading, ElMessage} from "element-plus";
import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
import {formatterStackerControlModel} from "@/enum/stacker/stackerControlModelEnum";
import {formatterStackerStatus} from "../../../enum/stacker/stackerStatusEnum";
import {formatterStackerStatus} from "@/enum/stacker/stackerStatusEnum";
export default {
// import 引入的组件需要注入到对象中才能使用
@ -87,7 +87,7 @@ export default {
text: '加载中...',
})
this.stackerInfo = []
stacker.getStacker().then(res=>{
stacker.getStackerStatus().then(res=>{
const responseData = res.data
if(responseData.code === 0){
ElMessage({
@ -109,11 +109,6 @@ export default {
})
loading.close()
})
},
// 查询堆垛机状态
search(row){
}
},
// 组合式 API