meswork/46-Pingzhi126-DLQ-MES_Manage_OP_View
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 初始化平芝126KV断路器线 OP 前端

Browse Source
This commit is contained in:
yexingqiang
2026-06-08 17:19:35 +08:00
commit 758b722e98
126 changed files with 25376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

562
src/views/Andon/index.vue Normal file
View File

@@ -0,0 +1,562 @@
<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>