Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

v1

Browse Source
This commit is contained in:
qianhao.xu
2023-12-04 11:21:06 +08:00
parent 4697aef3ee
commit 1491676c6f
3 changed files with 719 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/views/qualityManagement/FQC/firstFQC-v2.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<div>
<div class="animate__animated animate__shakeX title">车镜油漆缺陷采集系统</div>
<el-row>
<el-col :span="1">
<div style="height: 225px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
<div style="height: 250px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
</el-col>
<el-col :span="23">
<div>
<div class="grid">
<div class="a">
<div class="title_sub">{{ checkItemTable.paint[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.paint" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context" @click="Accumulator(item, index)">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="b">
<div class="title_sub">{{ checkItemTable.device[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.device" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="c">
<div class="title_sub">{{ checkItemTable.blank[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.blank" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="d">
<div class="title_sub">{{ checkItemTable.program[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.program" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="e">
<div class="title_sub">{{ checkItemTable.team[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.team" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="f">
<div class="f_item">
<div class="f_name">产品名称：</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">左右:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">颜色:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">班组:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">投入数:</div>
<div></div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
export default {
name: 'firstFQC',
data() {
return {
paint: [{ inspectionModule: '' }],
device: [{ inspectionModule: '' }],
blank: [{ inspectionModule: '' }], // 毛坯
program: [{ inspectionModule: '' }], // 程序
team: [{ inspectionModule: '' }], //班组
ProductSituationForm: {
name: '',
},
signal: null,
data: null,
}
},
created() {
this.getCheckItemList()
},
mounted() {},
methods: {
//todo 获取检测项
getCheckItemList() {
GetcheckItemTable()
.then((result) => {
if (result.code == 200) {
this.checkItemTable = result.data
}
})
.catch((err) => {})
},
//todo 累加器
Accumulator(item, index) {
switch (item.inspectionModule) {
case '油漆':
this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter++
console.log(
'this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter',
this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter,
)
break
}
},
//todo 初始话 signalR
/*initSignalR() {
this.signal = new signalR.HubConnectionBuilder()
//服务器地址
// .withUrl('http://192.168.0.110:8100/myHub', {})
.withUrl('http://localhost:8888/myHub', {})
.withAutomaticReconnect()
.configureLogging(signalR.LogLevel.Information)
.build()
// 接受集线器的方法
this.signal.on('receive_my', (res) => {
this.data = res
})
this.signal
.start()
.then(() => {
console.log('myhub连接成功')
//vue 发送请求
this.signal.invoke('SendPublicMessage', '1111').catch((err) => console.log('err', err))
})
.catch(() => {
console.log('myhub连接失败')
})
// this.signalr.SR.invoke('SendMessage', 'All', 'root', '123456').catch((err) => console.log('err', err))
},*/
},
}
</script>
<style lang="scss" scoped>
.title {
font-family: Arial, sans-serif;
font-size: 30px;
color: #303133;
line-height: 1.5;
text-align: center;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0.5em;
.a {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.b {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.c {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.d {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.e {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.f {
}
}
.grid > * {
height: 250px;
background-color: #ebeef5;
color: white;
border-radius: 0.5em;
}
.grid_sub > * {
height: 60px;
background-color: #11a983;
color: white;
border-radius: 0.2em;
transition: all 0.2s ease-in-out;
&:hover {
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #c6e2ff, inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px #c6e2ff;
}
}
.title_Line {
color: #409eff;
font-family: Arial, sans-serif;
font-size: 1.5rem;
text-align: center;
margin-top: 40px;
}
.f_item {
margin-top: 10px;
margin-left: 20px;
}
.f_name {
color: #dd7118;
font-family: Arial, sans-serif;
font-size: 1.2rem;
}
.context {
margin: 0.5em 1em;
}
</style>

353
src/views/qualityManagement/FQC/firstFQC-v3.vue Normal file
View File

@@ -0,0 +1,353 @@
<template>
<div>
<div class="animate__animated animate__shakeX title">车镜油漆缺陷采集系统</div>
<el-row>
<el-col :span="1">
<div style="height: 225px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
<div style="height: 250px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
</el-col>
<el-col :span="23">
<div>
<div class="grid">
<div class="a">
<div class="title_sub">{{ paint[0].inspectionModule }}</div>
<div class="grid_sub">
<div @click="AccumulatorEvent(0)">
<el-badge :value="Counter[0]" type="primary"><div class="context" >缩孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">针孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">失光</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">色差</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">点子</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">其他</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">缩孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">针孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">失光</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">色差</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">点子</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">其他</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">缩孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">针孔</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">失光</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">色差</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">点子</div></el-badge>
</div>
<div>
<el-badge :value="2" type="primary"><div class="context">其他</div></el-badge>
</div>
</div>
</div>
<div class="b">
<div class="title_sub">{{ device[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of device" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="c">
<div class="title_sub">{{ blank[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of blank" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="d">
<div class="title_sub">{{ program[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of program" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="e">
<div class="title_sub">{{ team[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of team" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="f">
<div class="f_item">
<div class="f_name">产品名称：</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">左右:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">颜色:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">班组:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">投入数:</div>
<div></div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
export default {
name: 'firstFQC',
data() {
return {
paint: [{ inspectionModule: '' }],
device: [{ inspectionModule: '' }],
blank: [{ inspectionModule: '' }], // 毛坯
program: [{ inspectionModule: '' }], // 程序
team: [{ inspectionModule: '' }], //班组
ProductSituationForm: {
name: '',
},
signal: null,
data: null,
Counter: [0],
}
},
created() {
this.getCheckItemList()
},
mounted() {},
methods: {
//todo 获取检测项
getCheckItemList() {
GetcheckItemTable()
.then((result) => {
if (result.code == 200) {
this.paint = result.data.paint
this.device = result.data.device
this.blank = result.data.blank
this.program = result.data.program
this.team = result.data.team
}
})
.catch((err) => {})
},
//todo 累加器
AccumulatorEvent(index) {
this.$set(this.Counter, index, this.Counter[index]+1)
},
//todo 初始话 signalR
/*initSignalR() {
this.signal = new signalR.HubConnectionBuilder()
//服务器地址
// .withUrl('http://192.168.0.110:8100/myHub', {})
.withUrl('http://localhost:8888/myHub', {})
.withAutomaticReconnect()
.configureLogging(signalR.LogLevel.Information)
.build()
// 接受集线器的方法
this.signal.on('receive_my', (res) => {
this.data = res
})
this.signal
.start()
.then(() => {
console.log('myhub连接成功')
//vue 发送请求
this.signal.invoke('SendPublicMessage', '1111').catch((err) => console.log('err', err))
})
.catch(() => {
console.log('myhub连接失败')
})
// this.signalr.SR.invoke('SendMessage', 'All', 'root', '123456').catch((err) => console.log('err', err))
},*/
},
}
</script>
<style lang="scss" scoped>
.title {
font-family: Arial, sans-serif;
font-size: 30px;
color: #303133;
line-height: 1.5;
text-align: center;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0.5em;
.a {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.b {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.c {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.d {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.e {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.f {
}
}
.grid > * {
height: 250px;
background-color: #ebeef5;
color: white;
border-radius: 0.5em;
}
.grid_sub > * {
height: 60px;
background-color: #11a983;
color: white;
border-radius: 0.2em;
transition: all 0.2s ease-in-out;
&:hover {
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #c6e2ff, inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px #c6e2ff;
}
}
.title_Line {
color: #409eff;
font-family: Arial, sans-serif;
font-size: 1.5rem;
text-align: center;
margin-top: 40px;
}
.f_item {
margin-top: 10px;
margin-left: 20px;
}
.f_name {
color: #dd7118;
font-family: Arial, sans-serif;
font-size: 1.2rem;
}
.context {
margin: 0.5em 1em;
}
</style>

68
src/views/qualityManagement/FQC/firstFQC.vue
View File

@@ -20,31 +20,51 @@
<div class="a">
<div class="title_sub">{{ checkItemTable.paint[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.paint" :key="index">{{ item.inspectionName }}</div>
<div class="a_11" v-for="(item, index) of checkItemTable.paint" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context" @click="Accumulator(item, index)">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="b">
<div class="title_sub">{{ checkItemTable.device[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.device" :key="index">{{ item.inspectionName }}</div>
<div class="a_11" v-for="(item, index) of checkItemTable.device" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="c">
<div class="title_sub">{{ checkItemTable.blank[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.blank" :key="index">{{ item.inspectionName }}</div>
<div class="a_11" v-for="(item, index) of checkItemTable.blank" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="d">
<div class="title_sub">{{ checkItemTable.program[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.program" :key="index">{{ item.inspectionName }}</div>
<div class="a_11" v-for="(item, index) of checkItemTable.program" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="e">
<div class="title_sub">{{ checkItemTable.team[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.team" :key="index">{{ item.inspectionName }}</div>
<div class="a_11" v-for="(item, index) of checkItemTable.team" :key="index">
<el-badge :value="item.Counter" type="primary"
><div class="context">{{ item.inspectionName }}</div></el-badge
>
</div>
</div>
</div>
<div class="f">
@@ -73,7 +93,6 @@
</div>
</div>
</div>
<div>"------------------"+{{ data }}</div>
</el-col>
</el-row>
</div>
@@ -81,7 +100,6 @@
<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
import * as signalR from '@microsoft/signalr'
export default {
name: 'firstFQC',
data() {
@@ -103,9 +121,7 @@ export default {
created() {
this.getCheckItemList()
},
mounted() {
},
mounted() {},
methods: {
//todo 获取检测项
getCheckItemList() {
@@ -113,10 +129,37 @@ export default {
.then((result) => {
if (result.code == 200) {
this.checkItemTable = result.data
this.checkItemTable.paint.forEach((item, index) => {
item.Counter = 0
})
this.checkItemTable.device.forEach((item, index) => {
item.Counter = 0
})
this.checkItemTable.blank.forEach((item, index) => {
item.Counter = 0
})
this.checkItemTable.program.forEach((item, index) => {
item.Counter = 0
})
this.checkItemTable.team.forEach((item, index) => {
item.Counter = 0
})
}
})
.catch((err) => {})
},
//todo 累加器
Accumulator(item, index) {
switch (item.inspectionModule) {
case '油漆':
this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter++
console.log(
'this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter',
this.checkItemTable.paint.filter((it) => it.id == item.id)[0].Counter,
)
break
}
},
//todo 初始话 signalR
/*initSignalR() {
@@ -249,7 +292,7 @@ export default {
.grid_sub > * {
height: 60px;
background-color: #53a8ff;
background-color: #11a983;
color: white;
border-radius: 0.2em;
transition: all 0.2s ease-in-out;
@@ -275,4 +318,7 @@ export default {
font-family: Arial, sans-serif;
font-size: 1.2rem;
}
.context {
margin: 0.5em 1em;
}
</style>