add:新增任务看板功能和LED驱动

This commit is contained in:
2023-11-24 10:23:45 +08:00
parent d9a58f6aa9
commit 5a63c40d70
17 changed files with 1085 additions and 4 deletions

View File

@@ -0,0 +1,17 @@
import request from '@/utils/request'
export function selectLedList() {
return request({
url: 'api/screen',
method: 'get'
})
}
export function getLedMessage(device) {
return request({
url: 'api/screen/getLedMessage/' + device,
method: 'get'
})
}
export default { selectLedList, getLedMessage }

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 KiB

View File

@@ -50,6 +50,12 @@ export const constantRouterMap = [
}
]
},
{
path: '/bigScreen/screen',
component: (resolve) => require(['@/views/screen/bigScreen'], resolve),
hidden: true,
meta: { title: '任务看板' }
},
{
path: '/user',
component: Layout,

View File

@@ -91,6 +91,7 @@ import belt_conveyor from '@/views/acs/device/driver/belt_conveyor'
import agv_ndc_one from '@/views/acs/device/driver/agv/agv_ndc_one'
import agv_ndc_two from '@/views/acs/device/driver/agv/agv_ndc_two'
import xg_agv from '@/views/acs/device/driver/agv/xg_agv'
import led_screen from './driver/led_screen'
// import standard_station from '@/views/acs/device/driver/standard_station'
export default {
@@ -109,11 +110,12 @@ export default {
// empty_vehicle_stacking_position,
agv_ndc_two,
agv_ndc_one,
xg_agv,
led_screen,
standard_stacker,
siemens_conveyor_labeling,
siemens_conveyor,
belt_conveyor,
xg_agv
// standard_station
},
dicts: ['device_type'],

View File

@@ -0,0 +1,353 @@
<template>
<!--LED点阵屏-->
<div>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span">设备协议</span>
</div>
<el-row>
<el-col :span="12">
OpcServer:
<el-select
v-model="opc_id"
placeholder="无"
clearable
filterable
@change="changeOpc"
>
<el-option
v-for="item in dataOpcservers"
:key="item.opc_id"
:label="item.opc_name"
:value="item.opc_id"
/>
</el-select>
</el-col>
<el-col :span="12">
PLC:
<el-select
v-model="plc_id"
placeholder="无"
clearable
@change="changePlc"
>
<el-option
v-for="item in dataOpcPlcs"
:key="item.plc_id"
:label="item.plc_name"
:value="item.plc_id"
/>
</el-select>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span">输送系统</span>
</div>
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
<el-row>
<el-col :span="8">
<el-form-item label="电气调度号" label-width="150px">
<el-input v-model="form.OPCServer" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span">指令相关</span>
</div>
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
<el-row>
<el-col :span="8">
<el-form-item label="关联设备" prop="device_code">
<el-select
v-model="form.link_device_code"
filterable
multiple
clearable
placeholder="请选择"
>
<el-option
v-for="item in deviceList"
:key="item.device_code"
:label="item.device_name"
:value="item.device_code"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span class="role-span" />
<el-button
:loading="false"
icon="el-icon-check"
size="mini"
style="float: right; padding: 6px 9px"
type="primary"
@click="doSubmit"
>保存
</el-button>
</div>
</el-card>
</div>
</template>
<script>
import {
queryDriverConfig,
updateConfig,
testRead,
testwrite
} from '@/api/acs/device/driverConfig'
import { selectOpcList } from '@/api/acs/device/opc'
import { selectPlcList } from '@/api/acs/device/opcPlc'
import { selectListByOpcID } from '@/api/acs/device/opcPlc'
import crud from '@/mixins/crud'
import deviceCrud from '@/api/acs/device/device'
export default {
name: 'LedScreen',
mixins: [crud],
props: {
parentForm: {
type: Object,
require: true
}
},
data() {
return {
device_code: '',
device_id: '',
plc_id: '',
plc_code: '',
opc_id: '',
opc_code: '',
load_device_code: '',
configLoading: false,
dataOpcservers: [],
dataOpcPlcs: [],
deviceList: [],
data1: [],
data2: [],
form: {
inspect_in_stocck: true,
ignore_pickup_check: true,
ignore_release_check: true,
apply_task: true,
link_three_lamp: '',
manual_create_task: true,
is_pickup: true,
is_release: true,
link_device_code: [],
get_device_code: [],
put_device_code: []
},
rules: {}
}
},
created() {
this.$nextTick(() => {
// 从父表单获取设备编码
this.device_id = this.$props.parentForm.device_id
this.device_code = this.$props.parentForm.device_code
queryDriverConfig(this.device_id, this.$props.parentForm.driver_code).then(data => {
// 给表单赋值,并且属性不能为空
if (data.form) {
const arr = Object.keys(data.form)
// 不为空
if (arr.length > 0) {
this.form = data.form
}
}
// 给表单赋值,并且属性不能为空
if (data.parentForm) {
const arr = Object.keys(data.parentForm)
// 不为空
if (arr.length > 0) {
this.opc_code = data.parentForm.opc_code
this.plc_code = data.parentForm.plc_code
}
}
this.data1 = data.rs
this.data2 = data.ws
this.sliceItem()
})
selectPlcList().then(data => {
this.dataOpcPlcs = data
this.plc_id = this.$props.parentForm.opc_plc_id
})
selectOpcList().then(data => {
this.dataOpcservers = data
this.opc_id = this.$props.parentForm.opc_server_id
})
deviceCrud.selectDeviceList().then(data => {
this.deviceList = data
})
})
},
methods: {
finishReadEdit(data) {
// 编辑的是code列,并且值包含mode
if (data.code.indexOf('mode') !== -1) {
debugger
const dbValue = data.db
// .之前的字符串
const beforeStr = dbValue.match(/(\S*)\./)[1]
// .之后的字符串
const afterStr = dbValue.match(/\.(\S*)/)[1]
// 取最后数字
const endNumber = afterStr.substring(1)
// 最后为非数字
if (isNaN(parseInt(endNumber))) {
return
}
// for (const val in this.data1) {
// if (this.data1[val].code.indexOf('move') !== -1) {
// this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 1)
// }
// if (this.data1[val].code.indexOf('error') !== -1) {
// this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 5)
// }
// if (this.data1[val].code.indexOf('task') !== -1) {
// this.data1[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 7)
// }
// }
}
},
finishWriteEdit(data) {
// 编辑的是code列,并且值包含mode
if (data.code.indexOf('to_command') !== -1) {
const dbValue = data.db
// .之前的字符串
const beforeStr = dbValue.match(/(\S*)\./)[1]
// .之后的字符串
const afterStr = dbValue.match(/\.(\S*)/)[1]
// 取最后数字
const endNumber = afterStr.substring(1)
// 最后为非数字
if (isNaN(parseInt(endNumber))) {
return
}
// for (const val in this.data2) {
// if (this.data2[val].code.indexOf('to_target') !== -1) {
// this.data2[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
// }
// if (this.data2[val].code.indexOf('to_task') !== -1) {
// this.data2[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 6)
// }
// }
}
},
changeOpc(val) {
this.dataOpcservers.forEach(item => {
if (item.opc_id === val) {
this.opc_code = item.opc_code
}
})
selectListByOpcID(val).then(data => {
this.dataOpcPlcs = data
this.plc_id = ''
this.plc_code = ''
if (this.dataOpcPlcs && this.dataOpcPlcs.length > 0) {
this.plc_id = this.dataOpcPlcs[0].plc_id
this.plc_code = this.dataOpcPlcs[0].plc_code
}
this.sliceItem()
})
},
changePlc(val) {
this.dataOpcPlcs.forEach(item => {
if (item.plc_id === val) {
this.plc_code = item.plc_code
this.sliceItem()
return
}
})
},
test_read1() {
testRead(this.data1, this.opc_id).then(data => {
this.data1 = data
this.notify('操作成功!', 'success')
}).catch(err => {
console.log(err.response.data.message)
})
},
test_read2() {
testRead(this.data2, this.opc_id).then(data => {
this.data2 = data
console.log(this.data2)
this.notify('操作成功!', 'success')
}).catch(err => {
console.log(err.response.data.message)
})
},
test_write1() {
testwrite(this.data2, this.opc_id).then(data => {
this.notify('操作成功!', 'success')
}).catch(err => {
console.log(err.response.data.message)
})
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.configLoading = true
// 根据驱动类型判断是否为路由设备
const parentForm = this.parentForm
parentForm.is_route = true
parentForm.plc_id = this.plc_id
parentForm.opc_id = this.opc_id
updateConfig(parentForm, this.form, this.data1, this.data2).then(res => {
this.notify('保存成功', 'success')
this.configLoading = false
}).catch(err => {
this.configLoading = false
console.log(err.response.data.message)
})
}
})
},
sliceItem() { // 拼接DB的Item值
this.data1.forEach(item => {
const str = item.code
// 是否包含.
if (str.search('.') !== -1) {
// 截取最后一位
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
} else {
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
}
})
this.data2.forEach(item => {
const str = item.code
// 是否包含.
if (str.search('.') !== -1) {
// 截取最后一位
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
} else {
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
}
})
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,231 @@
<template>
<div class="login" :style="'background-image:url('+ Background +');'">
<div style="font-size: 42px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 20px;">兰州海亮设备管理任务看板</div>
<el-row>
<el-col :span="12">
<di><h2 style="font-size: 50px; color: #f4f4f5;margin-left: 30px;padding-top: 10px;">任务看板</h2></di>
<el-form
:inline="true"
label-position="right"
label-suffix=":"
>
<el-form-item class="item" label="当前设备">
<el-select id="sltFont" v-model="device" placeholder="请选择"
@change="changeDevice">
<el-option style="font-size: 22px;"
v-for="item in ledList"
:key="item.device_code"
:label="item.device_name"
:value="item.device_code"
/>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<h2 style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 140px;">{{ getTime }}</h2>
</div>
<div class="grid-content bg-purple-light">
<p style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
</div>
</el-col>
</el-row>
<el-form v-if="device!=''" ref="form" style="border: 2px solid #f4f4f5;margin-top: 10px;padding-top: 50px;"
:inline="true"
:model="form" :rules="rules" size="medium" label-width="85px" label-suffix=":">
<el-row type="flex" justify="center" style="height: 100px;">
<el-col :span="12">
<el-form-item class="item" label="任务号" label-width="400px">
<el-input class="cpp" v-model="form.task_code"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="item" label="指令号" label-width="400px">
<el-input class="cpp" v-model="form.inst_code"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" style="height: 100px;">
<el-col :span="12">
<el-form-item class="item" label="起点" label-width="400px">
<el-input class="cpp" v-model="form.start_device_code"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="item" label="终点" label-width="400px">
<el-input class="cpp" v-model="form.next_device_code"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" style="height: 100px;">
<el-col :span="12" >
<el-form-item class="item" label="物料类型" label-width="400px">
<el-input class="cpp" v-model="form.material_type"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="item" label="物料数量" label-width="400px">
<el-input class="cpp" v-model="form.quantity"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" style="height: 100px;">
<el-col :span="12">
<el-form-item class="item" label="载具号" label-width="400px">
<el-input class="cpp" v-model="form.vehicle_code"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="item" label="条码" label-width="400px">
<el-input class="cpp" v-model="form.instruction_status"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" style="height: 100px;">
<el-col :span="12">
<el-form-item class="item" label="入库日期" label-width="400px">
<el-input class="cpp" v-model="form.entry_time"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="item" label="IP" label-width="400px">
<el-input class="cpp" v-model="form.ip"/>
<span style="color: #f4f4f5;margin-left: 10px;"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="device!=''" style="font-size: 30px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 50px;">
<i class="el-icon-lock"></i>
http://127.0.0.1:8014/bigScreen/screen</div>
</div>
</template>
<script>
import crud from '@/mixins/crud'
import deviceCrud from '@/api/monitor/screen'
import Background from '@/assets/images/bigScreen.png'
import BackgroundTwo from '@/assets/images/bigScreenTwo.png'
export default {
mixins: [crud],
data() {
return {
Background: Background,
BackgroundTwo: BackgroundTwo,
device_code: '',
device_id: '',
device: '',
vehicle_code: '',
bar_code: '',
entry_time: '',
ip: '',
form: {
task_code: '',
inst_code: '',
start_device_code: '',
next_device_code: '',
material_type: '',
quantity: 0,
vehicle_code: '',
instruction_status: '',
entry_time: '',
ip: ''
},
ledList: [],
getTime: '',
getDate: '',
src: '../images/bigScreen.png'
}
},
mounted() {
this.init()
// 定时器
const timer = setInterval(() => {
this.settime()// 你所加载数据的方法
}, 1000)
// 销毁定时器
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
},
beforeDestroy() {
// js提供的clearInterval方法用来清除定时器
console.log('定时器销毁')
clearInterval(this.timer)
},
created() {
this.$nextTick(() => {
deviceCrud.selectLedList().then(data => {
this.ledList = data
})
})
},
methods: {
changeDevice(val) {
this.device = val
deviceCrud.getLedMessage(this.device).then(data => {
this.form = data
})
// todo: 定时器
this.timer = setInterval(() => { // 定时刷新设备的状态信息
console.log('定时器启动')
this.initStatus()
}, 10000)
},
settime() {
const _this = this
const yy = new Date().getFullYear()
const mm = new Date().getMonth() + 1
const dd = new Date().getDate()
const hh = new Date().getHours()
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
_this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
_this.getTime = hh + ':' + mf + ':' + ss
}
}
}
</script>
<style scoped>
.login {
height: 100%;
background-size: cover;
}
</style>
<style>
.item .el-form-item__label{
color: white;
font-size: 34px;
}
.cpp {
height: 300%;
width: 350px;
font-size: 30px;;
text-align: center;
}
.ppd{
height: 300%;
width: 350px;
margin-left: 10px;
font-size: 30px;;
text-align: center;
}
#sltFont {
font-size: 30px;
}
</style>