563 lines
21 KiB
Vue
563 lines
21 KiB
Vue
<template>
|
||
<div style="width: 100%; height: 100%; padding: 10px;background-color: #d7dee6;">
|
||
<el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
|
||
<el-col style="width: 8%; height: 90%;">
|
||
<div class="div1">
|
||
<div style="margin-left: 25px; margin-top: 10%">
|
||
<span style="color: white; font-size: 42px">物料安灯</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 65%; height: 90%">
|
||
<div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
|
||
<div v-for="(item) in cities1" :key="item.编号">
|
||
<div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select1(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
<div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select1(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 25%">
|
||
<div>
|
||
<img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick1()">
|
||
<img src="../../assets/image/reset.png" style="margin-left: 100px;width: 118px;height: 100px;" @click="imgClick2()">
|
||
</div>
|
||
<span style="font-size: 50px; margin-left: 50px">呼叫</span>
|
||
<span style="font-size: 50px; margin-left: 100px">复位</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
|
||
<el-col style="width: 8%; height: 90%;">
|
||
<div class="div1">
|
||
<div style="margin-left: 25px; margin-top: 10%">
|
||
<span style="color: white; font-size: 42px">质量安灯</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 65%; height: 90%">
|
||
<div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
|
||
<div v-for="(item) in cities" :key="item.编号">
|
||
<div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select2(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
<div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select2(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 25%">
|
||
<div>
|
||
<img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick3()">
|
||
<img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick4()">
|
||
<span>{{ count }}</span>
|
||
</div>
|
||
<span style="font-size: 50px; margin-left: 50px">呼叫</span>
|
||
<span style="font-size: 50px; margin-left: 100px">复位</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
|
||
<el-col style="width: 8%; height: 90%;">
|
||
<div class="div1">
|
||
<div style="margin-left: 25px; margin-top: 10%">
|
||
<span style="color: white; font-size: 42px">故障安灯</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 65%; height: 90%">
|
||
<div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
|
||
<div v-for="(item) in citie" :key="item.编号">
|
||
<div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select3(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
<div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select3(item)">
|
||
{{ item.编号描述2 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col style="width: 25%;">
|
||
<div>
|
||
<img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick5()">
|
||
<img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick6()">
|
||
</div>
|
||
<span style="font-size: 50px; margin-left: 50px">呼叫</span>
|
||
<span style="font-size: 50px; margin-left: 100px">复位</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible1" width="700px">
|
||
<div style="text-align: center">
|
||
<el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
|
||
<el-form-item>
|
||
<el-button v-for="(item) in andonType1" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup1, item.安东明细描述)">
|
||
{{ item.安东明细描述 }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible2" width="700px">
|
||
<div style="text-align: center">
|
||
<el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
|
||
<el-form-item>
|
||
<el-button v-for="(item) in andonType2" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup2, item.安东明细描述)">
|
||
{{ item.安东明细描述 }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible3" width="700px">
|
||
<div style="text-align: center">
|
||
<el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
|
||
<el-form-item>
|
||
<el-button v-for="(item) in andonType3" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup3, item.安东明细描述)">
|
||
{{ item.安东明细描述 }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
andonType1: [],
|
||
andonType2: [],
|
||
andonType3: [],
|
||
checkboxGroup1: [],
|
||
checkboxGroup2: [],
|
||
checkboxGroup3: [],
|
||
citie: [],
|
||
cities: [],
|
||
cities1: [],
|
||
dialogFormVisible1: false,
|
||
dialogFormVisible2: false,
|
||
dialogFormVisible3: false,
|
||
title: '',
|
||
index: '',
|
||
count: '',
|
||
publication: {
|
||
topic: '',
|
||
qos: 0,
|
||
payload: ''
|
||
},
|
||
statediv1: false
|
||
}
|
||
},
|
||
created() {
|
||
this.getAndonarr1()
|
||
this.getAndonarr2()
|
||
this.getAndonarr3()
|
||
this.AndonType()
|
||
},
|
||
methods: {
|
||
select3(indexa) {
|
||
if (indexa.states === '0') {
|
||
if (!this.checkboxGroup3.find(item => item.编号 === indexa.编号)) {
|
||
this.checkboxGroup3.push({
|
||
编号: indexa.编号,
|
||
编号描述: indexa.编号描述,
|
||
编号描述2: indexa.编号描述2,
|
||
颜色代码: indexa.颜色代码,
|
||
states: indexa.states
|
||
})
|
||
indexa.states = '1'
|
||
}
|
||
indexa.color = document.getElementById(indexa.编号).style.backgroundColor
|
||
document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
|
||
} else if (indexa.states === '1') {
|
||
indexa.states = '0'
|
||
document.getElementById(indexa.编号).style.backgroundColor = indexa.color
|
||
var count = this.checkboxGroup3.findIndex(item => item.编号 === indexa.编号)
|
||
this.checkboxGroup3.splice(count, 1)
|
||
}
|
||
},
|
||
getAndonarr3() {
|
||
this.citie = []
|
||
const param = []
|
||
param[0] = ['安东类型代码', '3']
|
||
param[1] = ['工位号', this.$store.state.station.stationName]
|
||
const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.citie.push({
|
||
编号: response.data[i].编号,
|
||
编号描述: response.data[i].编号描述,
|
||
编号描述2: response.data[i].编号描述2,
|
||
颜色代码: response.data[i].颜色代码,
|
||
color: '',
|
||
states: '0'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
AndonType() {
|
||
const param = []
|
||
param[0] = ['安东类型代码', '1']
|
||
const Data = this.CreateData('11', 'ANDON_类型_明细表_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.andonType1.push({
|
||
安东明细代码: response.data[i].安东明细代码,
|
||
安东类型代码: response.data[i].安东类型代码,
|
||
安东明细简称: response.data[i].安东明细简称,
|
||
安东明细描述: response.data[i].安东明细描述
|
||
})
|
||
}
|
||
})
|
||
const param1 = []
|
||
param1[0] = ['安东类型代码', '2']
|
||
const Data1 = this.CreateData('11', 'ANDON_类型_明细表_查询', param1)
|
||
this.ExecDatabase(Data1).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.andonType2.push({
|
||
安东明细代码: response.data[i].安东明细代码,
|
||
安东明细简称: response.data[i].安东明细简称,
|
||
安东类型代码: response.data[i].安东类型代码,
|
||
安东明细描述: response.data[i].安东明细描述
|
||
})
|
||
}
|
||
})
|
||
const param2 = []
|
||
param2[0] = ['安东类型代码', '3']
|
||
const Data2 = this.CreateData('11', 'ANDON_类型_明细表_查询', param2)
|
||
this.ExecDatabase(Data2).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.andonType3.push({
|
||
安东明细代码: response.data[i].安东明细代码,
|
||
安东明细简称: response.data[i].安东明细简称,
|
||
安东类型代码: response.data[i].安东类型代码,
|
||
安东明细描述: response.data[i].安东明细描述
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getAndonarr2() {
|
||
this.cities = []
|
||
const param = []
|
||
param[0] = ['安东类型代码', '2']
|
||
param[1] = ['工位号', this.$store.state.station.stationName]
|
||
const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.cities.push({
|
||
编号: response.data[i].编号,
|
||
编号描述: response.data[i].编号描述,
|
||
编号描述2: response.data[i].编号描述2,
|
||
颜色代码: response.data[i].颜色代码,
|
||
color: '',
|
||
states: '0'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getAndonarr1() {
|
||
this.cities1 = []
|
||
const param = []
|
||
param[0] = ['安东类型代码', '1']
|
||
param[1] = ['工位号', this.$store.state.station.stationName]
|
||
const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.cities1.push({
|
||
编号: response.data[i].编号,
|
||
编号描述: response.data[i].编号描述,
|
||
编号描述2: response.data[i].编号描述2,
|
||
颜色代码: response.data[i].颜色代码,
|
||
color: '',
|
||
states: '0'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
select2(indexa) {
|
||
if (indexa.states === '0') {
|
||
if (!this.checkboxGroup2.find(item => item.编号 === indexa.编号)) {
|
||
this.checkboxGroup2.push({
|
||
编号: indexa.编号,
|
||
编号描述: indexa.编号描述,
|
||
编号描述2: indexa.编号描述2,
|
||
颜色代码: indexa.颜色代码,
|
||
states: indexa.states
|
||
})
|
||
indexa.states = '1'
|
||
}
|
||
indexa.color = document.getElementById(indexa.编号).style.backgroundColor
|
||
document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
|
||
} else if (indexa.states === '1') {
|
||
indexa.states = '0'
|
||
document.getElementById(indexa.编号).style.backgroundColor = indexa.color
|
||
var count = this.checkboxGroup2.findIndex(item => item.编号 === indexa.编号)
|
||
this.checkboxGroup2.splice(count, 1)
|
||
}
|
||
},
|
||
select1(indexa) {
|
||
if (indexa.states === '0') {
|
||
if (!this.checkboxGroup1.find(item => item.编号 === indexa.编号)) {
|
||
this.checkboxGroup1.push({
|
||
编号: indexa.编号,
|
||
编号描述: indexa.编号描述,
|
||
编号描述2: indexa.编号描述2,
|
||
颜色代码: indexa.颜色代码,
|
||
states: indexa.states
|
||
})
|
||
indexa.states = '1'
|
||
}
|
||
indexa.color = document.getElementById(indexa.编号).style.backgroundColor
|
||
document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
|
||
} else if (indexa.states === '1') {
|
||
indexa.states = '0'
|
||
document.getElementById(indexa.编号).style.backgroundColor = indexa.color
|
||
var count = this.checkboxGroup1.findIndex(item => item.编号 === indexa.编号)
|
||
this.checkboxGroup1.splice(count, 1)
|
||
}
|
||
},
|
||
imgClick1() {
|
||
if (this.checkboxGroup1.length < 1) {
|
||
this.$alert('没有选择物料', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '1'
|
||
this.dialogFormVisible1 = true
|
||
}
|
||
},
|
||
imgClick2() {
|
||
if (this.checkboxGroup1.length < 1) {
|
||
this.$alert('没有选择物料', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '2'
|
||
this.dialogFormVisible1 = true
|
||
}
|
||
},
|
||
imgClick3() {
|
||
if (this.checkboxGroup2.length < 1) {
|
||
this.$alert('没有选择质量故障', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '1'
|
||
this.dialogFormVisible2 = true
|
||
}
|
||
},
|
||
imgClick4() {
|
||
if (this.checkboxGroup2.length < 1) {
|
||
this.$alert('没有选择质量故障', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '2'
|
||
this.dialogFormVisible2 = true
|
||
}
|
||
},
|
||
imgClick5() {
|
||
if (this.checkboxGroup3.length < 1) {
|
||
this.$alert('没有选择设备故障原因', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '1'
|
||
this.dialogFormVisible3 = true
|
||
}
|
||
},
|
||
imgClick6() {
|
||
if (this.checkboxGroup3.length < 1) {
|
||
this.$alert('没有选择设备故障原因', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.title = 'ando系统呼叫界面'
|
||
this.index = '2'
|
||
this.dialogFormVisible3 = true
|
||
}
|
||
},
|
||
change3(state1, state2, check, state) {
|
||
if (this.index === '1') {
|
||
for (let i = 0; i < check.length; i++) {
|
||
console.log('xxxxxxxxxx', check[i].编号描述2, state)
|
||
if (check[i].编号描述2.match(state)) {
|
||
this.$message.error('报警问题存在')
|
||
} else {
|
||
const param = []
|
||
param[0] = ['工位号', this.$store.state.station.stationName]
|
||
param[1] = ['安东类型代码', state1]
|
||
param[2] = ['安东明细代码', state2]
|
||
param[3] = ['编号', check[i].编号]
|
||
param[4] = ['呼叫内容', '0']
|
||
param[5] = ['呼叫数量', 0]
|
||
param[6] = ['卡片条码', '0']
|
||
param[7] = ['不合格代码', '0']
|
||
const Data = this.CreateData('12', 'ANDON_呼叫状态_呼叫', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.publication.topic = window.g.mqttPublishTopic
|
||
this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '1'
|
||
const result = window.g.mqttClient.doPublish(this.publication)
|
||
if (result === true) {
|
||
this.$notify.success({
|
||
title: '提示',
|
||
message: 'Andon呼叫成功！',
|
||
position: 'bottom-right',
|
||
duration: 2000,
|
||
offset: 170
|
||
})
|
||
} else {
|
||
this.$notify.error({
|
||
title: '提示',
|
||
message: 'Andon呼叫失败！',
|
||
position: 'bottom-right',
|
||
duration: 2000,
|
||
offset: 170
|
||
})
|
||
}
|
||
this.$message({
|
||
message: '成功',
|
||
type: 'success'
|
||
})
|
||
} else {
|
||
this.$message.error('失败')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < check.length; i++) {
|
||
if (check[i].编号描述2.match(state)) {
|
||
const param = []
|
||
param[0] = ['工位号', this.$store.state.station.stationName]
|
||
param[1] = ['编号', check[i].编号]
|
||
param[2] = ['安东类型代码', state1]
|
||
param[3] = ['安东明细代码', state2]
|
||
param[4] = ['解除内容', '复位信息']
|
||
const Data = this.CreateData('12', 'ANDON_呼叫状态_解除', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.publication.topic = window.g.mqttPublishTopic
|
||
this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '0'
|
||
const result = window.g.mqttClient.doPublish(this.publication)
|
||
if (result === true) {
|
||
this.$notify.success({
|
||
title: '提示',
|
||
message: 'Andon复位成功！',
|
||
position: 'bottom-right',
|
||
duration: 2000,
|
||
offset: 170
|
||
})
|
||
} else {
|
||
this.$notify.error({
|
||
title: '提示',
|
||
message: 'Andon复位失败！',
|
||
position: 'bottom-right',
|
||
duration: 2000,
|
||
offset: 170
|
||
})
|
||
}
|
||
this.$message({
|
||
message: '成功',
|
||
type: 'success'
|
||
})
|
||
} else {
|
||
this.$message.error('失败')
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.error('复位问题不存在')
|
||
}
|
||
}
|
||
}
|
||
setTimeout(() => {
|
||
this.getAndonarr1()
|
||
this.getAndonarr2()
|
||
this.getAndonarr3()
|
||
}, (500))
|
||
this.checkboxGroup1 = []
|
||
this.dialogFormVisible1 = false
|
||
this.checkboxGroup2 = []
|
||
this.dialogFormVisible2 = false
|
||
this.checkboxGroup3 = []
|
||
this.dialogFormVisible3 = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep.div1 {
|
||
width: 100px;
|
||
height: 100%;
|
||
background-color: #0086b3;
|
||
border-radius: 20px;
|
||
border: 1px solid black;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
::v-deep.div2 {
|
||
width: 160px;
|
||
height: 85px;
|
||
background-color: red;
|
||
border-radius: 20px;
|
||
border: 1px solid black;
|
||
size: auto;
|
||
word-wrap: break-word;
|
||
word-break: normal;
|
||
font-size: large;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
float: left;
|
||
}
|
||
::v-deep.div3 {
|
||
width: 160px;
|
||
height: 85px;
|
||
background-color: white;
|
||
border-radius: 20px;
|
||
border: 1px solid black;
|
||
size: auto;
|
||
word-wrap: break-word;
|
||
word-break: normal;
|
||
font-size: large;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
float: left;
|
||
}
|
||
::v-deep.el-checkbox-button__inner {
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
background: #FFF;
|
||
border: 0px solid #DCDFE6;
|
||
border-left: 0;
|
||
-webkit-appearance: none;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
outline: 0;
|
||
height: 100%;
|
||
width: 99%;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
margin: 0;
|
||
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
</style>
|