init
This commit is contained in:
376
wcs/qd/src/views/bigscreen/ndxy.vue
Normal file
376
wcs/qd/src/views/bigscreen/ndxy.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
||||
<el-row :gutter="5" type="flex" justify="center" align="middle">
|
||||
<el-col :span="12">
|
||||
<div v-for="(item,i) in deviceList" v-if="item.hasGood != '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153); rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px" @click="request(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-for="(item,i) in deviceList" v-if="item.hasGood === '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige; rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 10px;">
|
||||
<span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
style="border: 1px solid chartreuse;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;margin-top: 20px;min-height: 480px"
|
||||
>
|
||||
<el-row :gutter="20" type="flex" align="bottom" justify="space-between">
|
||||
<el-col :span="6" style="max-width: 250px">
|
||||
<div v-for="(item,i) in deviceList3" v-if="item.hasGood != '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153); rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px" @click="request3(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-for="(item,i) in deviceList3" v-if="item.hasGood === '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige; rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px" >{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div v-for="(item,i) in deviceList2" v-if="item.hasGood != '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: rgb(0, 238, 153); rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 3px;">
|
||||
<span style="font-size: 10px" @click="request2(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-for="(item,i) in deviceList2" v-if="item.hasGood === '0'" class="grid-content bg-purple" style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: beige; rgb(240, 242, 245);border-radius: 10%;">
|
||||
<el-button size="mini" round style="margin-left: 3px;">
|
||||
<span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible" width="500px">
|
||||
<el-form :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="requestDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible2" width="500px">
|
||||
<el-form :model="form2" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form2.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form2.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form2.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form2.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="requestDialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest2">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible3" width="500px">
|
||||
<el-form :model="form3" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form3.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form3.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form3.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form3.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="requestDialogVisible3 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest3">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import deviceCrud, { addMaterial } from '@/api/acs/device/device'
|
||||
import { get } from '@/api/system/dictDetail'
|
||||
import crud from '@/mixins/crud'
|
||||
import CRUD from '@crud/crud'
|
||||
|
||||
export default {
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
requestDialogVisible: false,
|
||||
requestDialogVisible2: false,
|
||||
requestDialogVisible3: false,
|
||||
responseDialogVisible: false,
|
||||
region: '',
|
||||
imgUrl: '站点',
|
||||
regions: [],
|
||||
currentRow: null,
|
||||
start_device_code: '',
|
||||
start_device_name: '',
|
||||
tableData1: [],
|
||||
form: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
form2: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
form3: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
deviceList: [
|
||||
{
|
||||
device_code: null,
|
||||
hasGood: null
|
||||
}
|
||||
],
|
||||
deviceList2: [
|
||||
{
|
||||
device_code: null,
|
||||
hasGood: null
|
||||
}
|
||||
],
|
||||
deviceList3: [
|
||||
{
|
||||
device_code: null,
|
||||
hasGood: null
|
||||
}
|
||||
],
|
||||
material_types: [],
|
||||
deviceListOne: [],
|
||||
deviceListTwo: [],
|
||||
deviceListThree: [],
|
||||
currentDate: new Date(),
|
||||
getTime: '',
|
||||
getDate: ''
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.webSocket()
|
||||
|
||||
// 获取物料类型字典
|
||||
get('material_type').then(data => {
|
||||
this.material_types = data.content
|
||||
})
|
||||
// 获取区域类型
|
||||
get('region_type').then(data => {
|
||||
this.regions = data.content
|
||||
console.log(this.regions)
|
||||
})
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// deviceCrud.selectDeviceList().then(data => {
|
||||
// this.deviceList = data
|
||||
// console.log(this.deviceList)
|
||||
// })
|
||||
// })
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListOne().then(data => {
|
||||
this.deviceListOne = data
|
||||
})
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListTwo().then(data => {
|
||||
this.deviceListTwo = data
|
||||
})
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListThree().then(data => {
|
||||
this.deviceListThree = data
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
request(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListOne().then(data => {
|
||||
this.deviceListOne = data
|
||||
const clickObj = this.deviceListOne[index]
|
||||
this.requestDialogVisible = true
|
||||
this.form.remark = clickObj.remark
|
||||
this.form.material_type = clickObj.material_type
|
||||
this.form.quantity = clickObj.quantity
|
||||
this.form.device_id = clickObj.device_id
|
||||
this.form.device_code = clickObj.device_code
|
||||
this.form.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
request2(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListTwo().then(data => {
|
||||
this.deviceListTwo = data
|
||||
const clickObj = this.deviceListTwo[index]
|
||||
this.requestDialogVisible2 = true
|
||||
this.form2.remark = clickObj.remark
|
||||
this.form2.material_type = clickObj.material_type
|
||||
this.form2.quantity = clickObj.quantity
|
||||
this.form2.device_id = clickObj.device_id
|
||||
this.form2.device_code = clickObj.device_code
|
||||
this.form2.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
request3(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListThree().then(data => {
|
||||
this.deviceListThree = data
|
||||
const clickObj = this.deviceListThree[index]
|
||||
this.requestDialogVisible3 = true
|
||||
this.form3.remark = clickObj.remark
|
||||
this.form3.material_type = clickObj.material_type
|
||||
this.form3.quantity = clickObj.quantity
|
||||
this.form3.device_id = clickObj.device_id
|
||||
this.form3.device_code = clickObj.device_code
|
||||
this.form3.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
saveRequest() {
|
||||
deviceCrud.addMaterial(this.form).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
this.requestDialogVisible = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
saveRequest2() {
|
||||
deviceCrud.addMaterial(this.form2).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
this.requestDialogVisible2 = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible2 = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
saveRequest3() {
|
||||
deviceCrud.addMaterial(this.form3).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
this.requestDialogVisible3 = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible3 = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
webSocket() {
|
||||
const that = this
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
|
||||
type: 'warning',
|
||||
duration: 0
|
||||
})
|
||||
} else {
|
||||
const id = 'ndxy_data'
|
||||
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
|
||||
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
|
||||
// const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
|
||||
const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
|
||||
|
||||
this.socket = new WebSocket(wsUri)
|
||||
// 监听socket打开
|
||||
this.socket.onopen = function() {
|
||||
console.log('浏览器WebSocket已打开')
|
||||
that.socket.send('测试客户端发送消息')
|
||||
}
|
||||
// 监听socket消息接收
|
||||
this.socket.onmessage = function(msg) {
|
||||
console.log(msg)
|
||||
const data = JSON.parse(msg.data)
|
||||
that.deviceList = data.msg.device
|
||||
that.deviceList2 = data.msg.device2
|
||||
that.deviceList3 = data.msg.device3
|
||||
}
|
||||
// 监听socket错误
|
||||
this.socket.onerror = function() {
|
||||
that.$notify({
|
||||
title: '错误',
|
||||
message: '服务器错误，无法接收实时报警信息',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
// 监听socket关闭
|
||||
this.socket.onclose = function() {
|
||||
console.log('WebSocket已关闭')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
655
wcs/qd/src/views/bigscreen/ndxy_two.vue
Normal file
655
wcs/qd/src/views/bigscreen/ndxy_two.vue
Normal file
@@ -0,0 +1,655 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
||||
<el-row :gutter="5" type="flex" justify="end" align="middle" style="min-height: 40px">
|
||||
<el-col :span="10">
|
||||
<el-button type="primary" @click="click">常规任务保存</el-button>
|
||||
<el-button type="primary" @click="saveTasks">特殊任务保存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
style="border: 1px solid chartreuse;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;margin-top: 20px;"
|
||||
>
|
||||
<form id="myForm" name="testForm">
|
||||
<el-row :gutter="5" type="flex" justify="center" align="middle">
|
||||
<el-col :span="12">
|
||||
<div v-for="(item,i) in deviceList">
|
||||
<div
|
||||
v-if="item.hasGood != 0"
|
||||
style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
|
||||
>
|
||||
<!-- <div style="font-size: 15px; margin-left: 30px">{{ item.device_code }}</div>-->
|
||||
<el-button size="mini" round style="margin-left: 8px; margin-block-end: 10px">
|
||||
<span style="font-size: 10px" @click="request(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
<div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
|
||||
<div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="item.hasGood === 0"
|
||||
style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige;border-radius: 10%;"
|
||||
>
|
||||
<el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" type="flex" align="bottom" justify="space-between">
|
||||
<el-col :span="6" style="max-width: 250px">
|
||||
<div v-for="(item,i) in deviceList3">
|
||||
<div
|
||||
v-if="item.hasGood != 0"
|
||||
style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
|
||||
>
|
||||
<el-button size="mini" round style="margin-left: 8px;margin-block-end: 10px">
|
||||
<span style="font-size: 10px" @click="request3(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
<div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
|
||||
<div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="item.hasGood === 0"
|
||||
style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige;border-radius: 10%;"
|
||||
>
|
||||
<el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="18">
|
||||
<div v-for="(item,i) in deviceList2">
|
||||
<div
|
||||
v-if="item.hasGood != 0"
|
||||
style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
|
||||
>
|
||||
<el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
|
||||
<el-button size="mini" round style="margin-left: 8px;margin-block-end: 10px">
|
||||
<span style="font-size: 10px" @click="request2(i)">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
<div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
|
||||
<div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="item.hasGood === 0"
|
||||
style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: beige;border-radius: 10%;"
|
||||
>
|
||||
<!-- <div style="font-size: 15px; margin-left: 30px">{{ item.device_code }}</div>-->
|
||||
<el-button size="mini" round style="margin-left: 8px;">
|
||||
<span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</form>
|
||||
</el-row>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible" width="500px">
|
||||
<el-form :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="cleanPoint">清 除</el-button>
|
||||
<el-button @click="requestDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible2" width="500px">
|
||||
<el-form :model="form2" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form2.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form2.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form2.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="remark">
|
||||
<el-input v-model="form2.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="cleanPoint2">清 除</el-button>
|
||||
<el-button @click="requestDialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest2">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="添加物料信息" :visible.sync="requestDialogVisible3" width="500px">
|
||||
<el-form :model="form3" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form3.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form3.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form3.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form3.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="cleanPoint3">清 除</el-button>
|
||||
<el-button @click="requestDialogVisible3 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest3">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import deviceCrud from '@/api/acs/device/device'
|
||||
import { get } from '@/api/system/dictDetail'
|
||||
import crudTask, { ordinaryTaskCreate } from '@/api/acs/task/task'
|
||||
import CRUD, { crud } from '@crud/crud'
|
||||
|
||||
export default {
|
||||
mixins: [crud()],
|
||||
data() {
|
||||
return {
|
||||
requestDialogVisible: false,
|
||||
requestDialogVisible2: false,
|
||||
requestDialogVisible3: false,
|
||||
responseDialogVisible: false,
|
||||
region: '',
|
||||
imgUrl: '站点',
|
||||
regions: [],
|
||||
currentRow: null,
|
||||
start_device_code: '',
|
||||
start_device_name: '',
|
||||
tableData1: [],
|
||||
form: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
form2: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
form3: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
testdata: {
|
||||
check: null,
|
||||
device_code: null
|
||||
},
|
||||
material_types: [],
|
||||
deviceList: [
|
||||
],
|
||||
deviceList2: [],
|
||||
deviceList3: [],
|
||||
deviceListOne: [],
|
||||
deviceListTwo: [],
|
||||
deviceListThree: [],
|
||||
currentDate: new Date(),
|
||||
getTime: '',
|
||||
getDate: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.webSocket()
|
||||
|
||||
// 获取物料类型字典
|
||||
get('material_type').then(data => {
|
||||
this.material_types = data.content
|
||||
})
|
||||
// 获取区域类型
|
||||
get('region_type').then(data => {
|
||||
this.regions = data.content
|
||||
console.log(this.regions)
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListOne().then(data => {
|
||||
this.deviceListOne = data
|
||||
})
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListTwo().then(data => {
|
||||
this.deviceListTwo = data
|
||||
})
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListThree().then(data => {
|
||||
this.deviceListThree = data
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
request(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListOne().then(data => {
|
||||
this.deviceListOne = data
|
||||
const clickObj = this.deviceListOne[index]
|
||||
this.requestDialogVisible = true
|
||||
this.form.remark = clickObj.remark
|
||||
this.form.material_type = clickObj.material_type
|
||||
this.form.quantity = clickObj.quantity
|
||||
this.form.device_id = clickObj.device_id
|
||||
this.form.device_code = clickObj.device_code
|
||||
this.form.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
request2(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListTwo().then(data => {
|
||||
this.deviceListTwo = data
|
||||
const clickObj = this.deviceListTwo[index]
|
||||
this.requestDialogVisible2 = true
|
||||
this.form2.remark = clickObj.remark
|
||||
this.form2.material_type = clickObj.material_type
|
||||
this.form2.quantity = clickObj.quantity
|
||||
this.form2.device_id = clickObj.device_id
|
||||
this.form2.device_code = clickObj.device_code
|
||||
this.form2.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
request3(index) {
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListThree().then(data => {
|
||||
this.deviceListThree = data
|
||||
const clickObj = this.deviceListThree[index]
|
||||
this.requestDialogVisible3 = true
|
||||
this.form3.remark = clickObj.remark
|
||||
this.form3.material_type = clickObj.material_type
|
||||
this.form3.quantity = clickObj.quantity
|
||||
this.form3.device_id = clickObj.device_id
|
||||
this.form3.device_code = clickObj.device_code
|
||||
this.form3.device_name = clickObj.device_name
|
||||
})
|
||||
})
|
||||
},
|
||||
cleanPoint() {
|
||||
deviceCrud.cleanMaterial(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible = false
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
this.requestDialogVisible = false
|
||||
})
|
||||
},
|
||||
cleanPoint2() {
|
||||
deviceCrud.cleanMaterial(this.form2).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible2 = false
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
this.requestDialogVisible = false
|
||||
})
|
||||
},
|
||||
cleanPoint3() {
|
||||
deviceCrud.cleanMaterial(this.form3).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible3 = false
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
this.requestDialogVisible = false
|
||||
})
|
||||
},
|
||||
saveRequest() {
|
||||
deviceCrud.addMaterial(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
saveRequest2() {
|
||||
deviceCrud.addMaterial(this.form2).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible2 = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible2 = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
saveRequest3() {
|
||||
deviceCrud.addMaterial(this.form3).then(res => {
|
||||
this.$notify({
|
||||
title: '操作成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
this.requestDialogVisible3 = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible3 = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
click() {
|
||||
var obj1 = this.deviceList2
|
||||
var arr1 = []
|
||||
let one = 0
|
||||
let two = 0
|
||||
let three = 0
|
||||
for (let i = 0; i < obj1.length; i++) {
|
||||
if (obj1[i].checked) {
|
||||
one = one + 1
|
||||
arr1.push(obj1[i])
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.deviceList.length; i++) {
|
||||
if (this.deviceList[i].checked) {
|
||||
two = two + 1
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.deviceList3.length; i++) {
|
||||
if (this.deviceList3[i].checked) {
|
||||
three = three + 1
|
||||
}
|
||||
}
|
||||
if ((one + two + three) > 1) {
|
||||
this.$notify.error({
|
||||
title: '只能选择一个起点!'
|
||||
})
|
||||
return
|
||||
}
|
||||
const data = {
|
||||
'data': arr1
|
||||
}
|
||||
crudTask.ordinaryTaskCreate(data).then(res => {
|
||||
this.$notify({
|
||||
title: '保存成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
arr[i].checked = false
|
||||
}
|
||||
})
|
||||
},
|
||||
saveTasks() {
|
||||
var obj1 = this.deviceList
|
||||
var obj2 = this.deviceList2
|
||||
var obj3 = this.deviceList3
|
||||
var arr1 = []
|
||||
var arr2 = []
|
||||
var arr3 = []
|
||||
let one = 0
|
||||
let two = 0
|
||||
let three = 0
|
||||
for (let i = 0; i < obj1.length; i++) {
|
||||
if (obj1[i].checked) {
|
||||
one = one + 1
|
||||
arr1.push(obj1[i])
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < obj2.length; i++) {
|
||||
if (obj2[i].checked) {
|
||||
two = two + 1
|
||||
arr2.push(obj2[i])
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < obj3.length; i++) {
|
||||
if (obj3[i].checked) {
|
||||
three = three + 1
|
||||
arr3.push(obj3[i])
|
||||
}
|
||||
}
|
||||
if (two === three || two === one) {
|
||||
if (two === 0) {
|
||||
this.$notify({
|
||||
title: '请选择起点设备',
|
||||
type: 'warning',
|
||||
duration: 3000
|
||||
})
|
||||
} else {
|
||||
const data = {
|
||||
'data1': arr1,
|
||||
'data2': arr2,
|
||||
'data3': arr3
|
||||
}
|
||||
crudTask.specialTaskCreate(data).then(res => {
|
||||
this.$notify({
|
||||
title: '保存成功',
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
arr1[i].checked = false
|
||||
}
|
||||
for (let i = 0; i < arr2.length; i++) {
|
||||
arr2[i].checked = false
|
||||
}
|
||||
for (let i = 0; i < arr3.length; i++) {
|
||||
arr3[i].checked = false
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// this.notify('两个区域数据量不一致,操作失败!', 'success')
|
||||
this.$notify.error({
|
||||
title: '区域数据量不一致,操作失败!'
|
||||
})
|
||||
this.responseDialogVisible = false
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
webSocket() {
|
||||
const that = this
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
|
||||
type: 'warning',
|
||||
duration: 0
|
||||
})
|
||||
} else {
|
||||
const id = 'ndxy_data'
|
||||
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
|
||||
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
|
||||
// const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
|
||||
const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
|
||||
|
||||
this.socket = new WebSocket(wsUri)
|
||||
// 监听socket打开
|
||||
this.socket.onopen = function() {
|
||||
that.socket.send('测试客户端发送消息')
|
||||
}
|
||||
// 监听socket消息接收
|
||||
this.socket.onmessage = function(msg) {
|
||||
const data = JSON.parse(msg.data)
|
||||
for (let i = 0; i < data.msg.device.length; i++) {
|
||||
const item = data.msg.device[i]
|
||||
const obj = {
|
||||
device_code: item.device_code,
|
||||
hasGood: item.hasGood,
|
||||
material_type: item.material_type,
|
||||
quantity: item.quantity,
|
||||
remark: item.remark
|
||||
}
|
||||
if (that.deviceList.length != data.msg.device.length) {
|
||||
that.deviceList.push(obj)
|
||||
} else {
|
||||
for (let j = 0; j < that.deviceList.length; j++) {
|
||||
if (that.deviceList[j].device_code == item.device_code) {
|
||||
if (that.deviceList[j].hasGood != item.hasGood) {
|
||||
that.deviceList[j].device_code = item.device_code
|
||||
that.deviceList[j].hasGood = item.hasGood
|
||||
}
|
||||
if (that.deviceList[j].material_type != item.material_type) {
|
||||
that.deviceList[j].material_type = item.material_type
|
||||
}
|
||||
if (that.deviceList[j].quantity != item.quantity) {
|
||||
that.deviceList[j].quantity = item.quantity
|
||||
}
|
||||
if (that.deviceList[j].remark != item.remark) {
|
||||
that.deviceList[j].remark = item.remark
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < data.msg.device2.length; i++) {
|
||||
const item = data.msg.device2[i]
|
||||
const obj = {
|
||||
device_code: item.device_code,
|
||||
hasGood: item.hasGood,
|
||||
material_type: item.material_type,
|
||||
quantity: item.quantity,
|
||||
remark: item.remark
|
||||
}
|
||||
|
||||
if (that.deviceList2.length != data.msg.device2.length) {
|
||||
that.deviceList2.push(obj)
|
||||
} else {
|
||||
for (let j = 0; j < that.deviceList2.length; j++) {
|
||||
if (that.deviceList2[j].device_code == item.device_code) {
|
||||
if (that.deviceList2[j].hasGood != item.hasGood) {
|
||||
that.deviceList2[j].device_code = item.device_code
|
||||
that.deviceList2[j].hasGood = item.hasGood
|
||||
}
|
||||
if (that.deviceList2[j].material_type != item.material_type) {
|
||||
that.deviceList2[j].material_type = item.material_type
|
||||
}
|
||||
if (that.deviceList2[j].quantity != item.quantity) {
|
||||
that.deviceList2[j].quantity = item.quantity
|
||||
}
|
||||
if (that.deviceList2[j].remark != item.remark) {
|
||||
that.deviceList2[j].remark = item.remark
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < data.msg.device3.length; i++) {
|
||||
const item = data.msg.device3[i]
|
||||
const obj = {
|
||||
device_code: item.device_code,
|
||||
hasGood: item.hasGood,
|
||||
material_type: item.material_type,
|
||||
quantity: item.quantity,
|
||||
remark: item.remark
|
||||
}
|
||||
if (that.deviceList3.length != data.msg.device3.length) {
|
||||
that.deviceList3.push(obj)
|
||||
} else {
|
||||
for (let j = 0; j < that.deviceList3.length; j++) {
|
||||
if (that.deviceList3[j].device_code == item.device_code) {
|
||||
if (that.deviceList3[j].hasGood != item.hasGood) {
|
||||
that.deviceList3[j].device_code = item.device_code
|
||||
that.deviceList3[j].hasGood = item.hasGood
|
||||
}
|
||||
if (that.deviceList3[j].material_type != item.material_type) {
|
||||
that.deviceList3[j].material_type = item.material_type
|
||||
}
|
||||
if (that.deviceList3[j].quantity != item.quantity) {
|
||||
that.deviceList3[j].quantity = item.quantity
|
||||
}
|
||||
if (that.deviceList3[j].remark != item.remark) {
|
||||
that.deviceList3[j].remark = item.remark
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 监听socket错误
|
||||
this.socket.onerror = function() {
|
||||
that.$notify({
|
||||
title: '错误',
|
||||
message: '服务器错误，无法接收实时报警信息',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
// 监听socket关闭
|
||||
this.socket.onclose = function() {
|
||||
console.log('WebSocket已关闭')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
256
wcs/qd/src/views/bigscreen/request.vue
Normal file
256
wcs/qd/src/views/bigscreen/request.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">车间叫料看板</h2></div>
|
||||
<div class="grid-content bg-purple">
|
||||
<el-select v-model="region" placeholder="请选择" style="margin-left: 20px;" @change="changeRegion">
|
||||
<el-option
|
||||
v-for="item in regions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-light">
|
||||
<h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
|
||||
</div>
|
||||
<div class="grid-content bg-purple-light">
|
||||
<p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
style="border: 1px solid chartreuse;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;margin-top: 20px;"
|
||||
>
|
||||
<el-col>
|
||||
<el-card v-for="(item,i) in deviceList" class="box-card" style="float: left;margin-right: 10px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ '设备：' + item.device_name }}</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-button v-if="item.apply_task" type="primary" plain @click="request(i)">呼叫</el-button>
|
||||
<el-button v-if="item.manual_create_task" type="success" plain @click="response(i)">响应</el-button>
|
||||
<el-button v-if="item.auto_create_task" type="success" plain @click="fixedPoint(i)">定点</el-button>
|
||||
<el-button v-if="item.auto_clean_task" type="success" plain @click="cleanPoint(i)">清除</el-button>
|
||||
</el-row>
|
||||
<img
|
||||
:src=" require(
|
||||
'../../assets/acs/' +imgUrl+'.png')"
|
||||
width="180px"
|
||||
height="180px"
|
||||
style="outline: 1px solid #f0f0f0;margin-top: 10px;margin-left: 10px;"
|
||||
>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="呼叫操作" :visible.sync="requestDialogVisible" width="500px">
|
||||
<el-form :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="设备名字" prop="description">
|
||||
<el-input v-model="form.device_name" :disabled="true" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="material_type">
|
||||
<el-select v-model="form.material_type" style="width: 370px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in material_types"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="requestDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveRequest">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="响应操作" :visible.sync="responseDialogVisible" width="800px">
|
||||
<h3>起点设备: {{ start_device_name }} </h3>
|
||||
<el-table ref="singleTable" :data="tableData1" highlight-current-row @current-change="handleCurrentChange">
|
||||
<el-table-column property="status" label="状态" :formatter="formatterStatus" width="150" />
|
||||
<el-table-column property="region" label="区域" width="200" />
|
||||
<el-table-column property="material" label="物料名称" />
|
||||
<el-table-column property="device_code" label="终点" />
|
||||
<el-table-column property="qty" label="数量" />
|
||||
<el-table-column property="remark" label="备注" />
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="responseDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveResponse">确 定</el-button>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import deviceCrud from '@/api/acs/device/device'
|
||||
import { get } from '@/api/system/dictDetail'
|
||||
import crud from '@/mixins/crud'
|
||||
|
||||
export default {
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
requestDialogVisible: false,
|
||||
responseDialogVisible: false,
|
||||
region: '',
|
||||
imgUrl: '站点',
|
||||
regions: [],
|
||||
currentRow: null,
|
||||
start_device_code: '',
|
||||
start_device_name: '',
|
||||
tableData1: [],
|
||||
form: {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
material_type: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
material_types: [],
|
||||
deviceList: [],
|
||||
currentDate: new Date(),
|
||||
getTime: '',
|
||||
getDate: ''
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 定时器
|
||||
const timer = setInterval(() => {
|
||||
this.settime()// 你所加载数据的方法
|
||||
}, 1000)
|
||||
// 销毁定时器
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取物料类型字典
|
||||
get('material_type').then(data => {
|
||||
this.material_types = data.content
|
||||
})
|
||||
// 获取区域类型
|
||||
get('region_type').then(data => {
|
||||
this.regions = data.content
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
deviceCrud.selectDeviceListByRegion(this.region).then(data => {
|
||||
this.deviceList = data
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
request(index) {
|
||||
const clickObj = this.deviceList[index]
|
||||
this.requestDialogVisible = true
|
||||
this.form.remark = ''
|
||||
this.form.material_type = ''
|
||||
this.form.device_id = clickObj.device_id
|
||||
this.form.device_code = clickObj.device_code
|
||||
this.form.device_name = clickObj.device_name
|
||||
},
|
||||
formatterStatus(row, column, cellValue) {
|
||||
if (!cellValue) {
|
||||
return '未操作'
|
||||
}
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentRow = val
|
||||
this.currentRow.start_device_code = this.start_device_code
|
||||
},
|
||||
response(index) {
|
||||
deviceCrud.selectDeviceDevicerInfo('2').then(data => {
|
||||
this.tableData1 = data
|
||||
})
|
||||
const clickObj = this.deviceList[index]
|
||||
this.responseDialogVisible = true
|
||||
this.start_device_code = clickObj.device_code
|
||||
this.start_device_name = clickObj.device_name
|
||||
},
|
||||
fixedPoint(index) {
|
||||
const data = { 'start_device_code': this.deviceList[index].device_code }
|
||||
deviceCrud.autoCreateTask(data).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
cleanPoint(index) {
|
||||
const data = { 'start_device_code': this.deviceList[index].device_code }
|
||||
deviceCrud.cleanTask(data).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
changeRegion(val) {
|
||||
this.region = val
|
||||
deviceCrud.selectDeviceListByRegion(this.region).then(data => {
|
||||
this.deviceList = data
|
||||
})
|
||||
},
|
||||
|
||||
saveRequest() {
|
||||
deviceCrud.callAgv(this.form).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
this.requestDialogVisible = false
|
||||
}).catch(err => {
|
||||
this.requestDialogVisible = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
saveResponse() {
|
||||
const row = this.currentRow
|
||||
if (!row) {
|
||||
this.notify('至少选择一条数据,操作失败!', 'success')
|
||||
this.responseDialogVisible = false
|
||||
return
|
||||
}
|
||||
deviceCrud.responseAgv(row).then(res => {
|
||||
this.notify('操作成功', 'success')
|
||||
this.responseDialogVisible = false
|
||||
}).catch(err => {
|
||||
this.responseDialogVisible = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
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 rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
257
wcs/qd/src/views/bigscreen/task.vue
Normal file
257
wcs/qd/src/views/bigscreen/task.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
||||
<el-row style="height: 100px;">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">车间任务看板</h2></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-light">
|
||||
<h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
|
||||
</div>
|
||||
<div class="grid-content bg-purple-light">
|
||||
<p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;">
|
||||
<el-input value="各区域叫料未操作" style="width: 200px;"/>
|
||||
<div class="" style="height: 200px;border: 1px solid #938d8d;">
|
||||
<!-- 表头 -->
|
||||
<div class="warp-title">
|
||||
<ul class="item">
|
||||
<li>
|
||||
<span class="title" style="width: 150px">状态</span>
|
||||
<span class="title" style="width: 150px">区域</span>
|
||||
<span class="title" style="width: 150px">站点</span>
|
||||
<span class="title" style="width: 150px">物料名称</span>
|
||||
<span class="title" style="width: 150px">数量</span>
|
||||
<span class="title" style="width: 150px">备注</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 表格滚动区 -->
|
||||
<div>
|
||||
<vue-seamless-scroll
|
||||
:style="{height: this.scrollHeight + 'px' }"
|
||||
:data="tableData1"
|
||||
:class-option="defaultOption"
|
||||
class="warp-content"
|
||||
>
|
||||
<ul class="item" style="list-style:none;">
|
||||
<li
|
||||
v-for="(item, index) in tableData1"
|
||||
:style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
|
||||
>
|
||||
<span class="data" style="width: 150px" v-text="formatterStatus(item.status)"/>
|
||||
<span class="date" style="width: 150px" v-text="item.region"/>
|
||||
<span class="date" style="width: 150px" v-text="item.device_code"/>
|
||||
<span class="date" style="width: 150px" v-text="item.material"/>
|
||||
<span class="date" style="width: 150px" v-text="item.qty"/>
|
||||
<span class="date" style="width: 150px" v-text="item.remark"/>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-top: 80px;">
|
||||
<el-input value="各区域叫料执行中" style="width: 200px;"/>
|
||||
<div class="" style="height: 250px;border: 1px solid #938d8d;">
|
||||
<!-- 表头 -->
|
||||
<div class="warp-title">
|
||||
<ul class="item">
|
||||
<li>
|
||||
<span class="title" style="width: 150px;font-weight:bold;">状态</span>
|
||||
<span class="title" style="width: 150px">起点</span>
|
||||
<span class="title" style="width: 150px">终点</span>
|
||||
<span class="title" style="width: 150px">物料名称</span>
|
||||
<span class="title" style="width: 150px">数量</span>
|
||||
<span class="title" style="width: 150px">备注</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 表格滚动区 -->
|
||||
<div>
|
||||
<vue-seamless-scroll
|
||||
:style="{height: this.scrollHeight + 'px' }"
|
||||
:data="tableData2"
|
||||
:class-option="defaultOption"
|
||||
class="warp-content"
|
||||
>
|
||||
<ul class="item" style="list-style:none;">
|
||||
<li
|
||||
v-for="(item, index) in tableData2"
|
||||
:style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
|
||||
>
|
||||
<span class="data" style="width: 150px" v-text="formatterInstructStatus(item.title)"/>
|
||||
<span class="data" style="width: 150px" v-text="item.start_point_code"/>
|
||||
<span class="data" style="width: 150px" v-text="item.next_point_code"/>
|
||||
<span class="data" style="width: 150px" v-text="item.material"/>
|
||||
<span class="data" style="width: 150px" v-text="item.quantity"/>
|
||||
<span class="data" style="width: 150px" v-text="item.remark"/>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//https://blog.csdn.net/weixin_43992867/article/details/110622449
|
||||
//https://blog.csdn.net/qq_42540989/article/details/102579726
|
||||
//https://blog.csdn.net/weixin_42201180/article/details/107557277
|
||||
import deviceCrud from '@/api/acs/device/device'
|
||||
import instructionCrud from '@/api/acs/instruction/instruction'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData1: [],
|
||||
tableData2: [],
|
||||
getTime: '',
|
||||
getDate: '',
|
||||
scrollHeight: 250,
|
||||
listData: [{
|
||||
'title': '第一行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第二行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第三行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第四行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第五行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第六行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第七行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '第八行',
|
||||
'date': '2017-12-16'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 监听属性 类似于data概念
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 监控data中的数据变化
|
||||
watch: {},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() {
|
||||
// 定时器
|
||||
const timer = setInterval(() => {
|
||||
this.settime()// 你所加载数据的方法
|
||||
deviceCrud.selectDeviceDevicerInfo('2').then(data => {
|
||||
this.tableData1 = data
|
||||
})
|
||||
instructionCrud.queryUnFinish().then(data => {
|
||||
this.tableData2 = data
|
||||
})
|
||||
}, 1000)
|
||||
// 销毁定时器
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// 方法集合
|
||||
methods: {
|
||||
formatterStatus(status) {
|
||||
if (!status) {
|
||||
return '未操作'
|
||||
}
|
||||
},
|
||||
formatterInstructStatus(status) {
|
||||
if (!status) {
|
||||
return '执行中'
|
||||
}
|
||||
},
|
||||
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 lang="scss" scoped>
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warp-title {
|
||||
overflow: hidden;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp-content {
|
||||
overflow: hidden;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user