<add>[important]添加PLC管理界面
This commit is contained in:
parent
f5c749972c
commit
4df5ecccb5
20
src/axios/plc.js
Normal file
20
src/axios/plc.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 获取所有PLC数据
|
||||
getPlc() {
|
||||
return axios.get('/api/wcs/plc/getPlc')
|
||||
},
|
||||
// 编辑PLC数据
|
||||
editPlc(plcDataItem) {
|
||||
return axios.post('/api/wcs/plc/editePlc', plcDataItem)
|
||||
},
|
||||
// 删除一条数据
|
||||
deletePlc(plcId) {
|
||||
return axios.delete('/api/wcs/plc/deletePlc', {
|
||||
params: {
|
||||
plcId: plcId
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
150
src/view/component/PLCData/AddPLCData.vue
Normal file
150
src/view/component/PLCData/AddPLCData.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="添加PLC数据"
|
||||
:model-value="modelValue"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="plcDataItem"
|
||||
>
|
||||
<el-form-item label="PLC 编号（唯一）：">
|
||||
<el-input v-model="plcDataItem.plcId" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="PLC 名称：">
|
||||
<el-input v-model="plcDataItem.plcName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="PLC IP地址：">
|
||||
<el-input v-model="plcDataItem.plcIp" placeholder="请使用 ipv4 格式地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="PLC 状态：">
|
||||
<el-input v-model="plcDataItem.plcStatus" placeholder="0：不启用； 1：启用"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="PLC 系列：">
|
||||
<el-input v-model="plcDataItem.plcKind" placeholder="1200 | 1500"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机架：">
|
||||
<el-input v-model="plcDataItem.rack"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="插槽：">
|
||||
<el-input v-model="plcDataItem.slot"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息：">
|
||||
<el-input v-model="plcDataItem.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import plcApi from "@/axios/plc";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'plcDataItem'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 添加或者更新PLC序号
|
||||
addOrUpdate() {
|
||||
if(this.plcDataItem.plcId === ''){
|
||||
ElMessage({
|
||||
message: '请输入 plc 编号',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
`您确定要执行添加/编辑 plcId 为 ${this.plcDataItem.plcId} 的PLC信息?`,
|
||||
'数据变更警告',
|
||||
{
|
||||
confirmButtonText: '变更',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '请稍后...',
|
||||
})
|
||||
this.plcData = []
|
||||
plcApi.editPlc(this.plcDataItem).then(res=>{
|
||||
const responseData = res.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '添加/编辑成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,27 +1,183 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<el-row>
|
||||
<el-button type="primary" style="margin-left: 0.5rem" @click="loadData">加载PLC数据</el-button>
|
||||
<el-button type="success" style="margin-left: 0.5rem" @click="addPlcData">添加PLC数据</el-button>
|
||||
</el-row>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>PLC信息表格</h5>
|
||||
<el-table :data="plcData" border stripe style="width: 100%;" max-height="calc(100vh - 350px)">
|
||||
<el-table-column fixed prop="plcId" label="PLC 编号" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column fixed prop="plcName" label="PLC 名称" align="center" show-overflow-tooltip/>
|
||||
<el-table-column fixed prop="plcIp" label="PLC IP地址" width="250px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="plcStatus" label="PLC 状态" align="center" width="180px">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterOnOrOffEnum(scope.row.plcStatus).type>
|
||||
{{formatterOnOrOffEnum(scope.row.plcStatus).label}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="plcKind" label="PLC 系列" align="center" width="150px"/>
|
||||
<el-table-column prop="rack" label="插槽" align="center" width="150px" show-overflow-tooltip/>
|
||||
<el-table-column prop="slot" label="机架" width="150px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="150">
|
||||
<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>
|
||||
<!-- 添加PLC的窗口-->
|
||||
<AddPLCData v-model="showAddForm" v-model:plc-data-item="plcDataItem"></AddPLCData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import plcApi from "@/axios/plc";
|
||||
import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
|
||||
import {Delete, Edit} from "@element-plus/icons-vue";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import AddPLCData from "@/view/component/PLCData/AddPLCData.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
components: {AddPLCData, Delete, Edit},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
return {
|
||||
plcData:[],
|
||||
plcDataItem:{},
|
||||
showAddForm: false,
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
methods: {
|
||||
formatterOnOrOffEnum,
|
||||
// 加载PLC数据
|
||||
loadData() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.plcData = []
|
||||
plcApi.getPlc().then(res=>{
|
||||
const responseData = res.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.plcData = Object.freeze(responseData["returnData"])
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
// 编辑 PLC
|
||||
editData(row) {
|
||||
this.plcDataItem = {
|
||||
plcId: row.plcId,
|
||||
plcName: row.plcName,
|
||||
plcIp: row.plcIp,
|
||||
plcStatus: row.plcStatus,
|
||||
plcKind: row.plcKind,
|
||||
rack: row.rack,
|
||||
slot: row.slot,
|
||||
remark: row.remark
|
||||
}
|
||||
this.showAddForm = true;
|
||||
},
|
||||
// 删除 PLC 数据
|
||||
deleteData(row) {
|
||||
if(row.plcId === undefined || row.plcId === ''){
|
||||
ElMessage({
|
||||
message: 'plc 编号不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
`您确定要删除 plcId 为 ${this.plcDataItem.plcId} 的PLC信息? 删除后不可恢复！`,
|
||||
'数据删除警告',
|
||||
{
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error',
|
||||
})
|
||||
.then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '请稍后...',
|
||||
})
|
||||
this.plcData = []
|
||||
plcApi.deletePlc(row.plcId).then(res=>{
|
||||
const responseData = res.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()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
},
|
||||
// 添加 PLC 数据
|
||||
addPlcData() {
|
||||
this.plcDataItem = {
|
||||
plcId: '',
|
||||
plcName: '',
|
||||
plcIp: '',
|
||||
plcStatus: '',
|
||||
plcKind: '',
|
||||
rack: '0',
|
||||
slot: '1',
|
||||
remark: ''
|
||||
}
|
||||
this.showAddForm = true;
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user