You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
16 KiB
582 lines
16 KiB
<template>
|
|
<div class="contain" v-loading="loading">
|
|
<div class="title">
|
|
<div>SPC质量品质数据看板</div>
|
|
</div>
|
|
<div class="height"></div>
|
|
<div class="bod">
|
|
<div class="time">{{date}}</div>
|
|
<div class="pl-2vw pr-2vw">
|
|
<el-row :gutter="14" justify="space-between">
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
|
<div class="left">
|
|
<div class="table">
|
|
<ul class="table-header">
|
|
<li class="first"></li>
|
|
<li class="other">数量</li>
|
|
<li class="other">合格数</li>
|
|
<li class="other">不良数</li>
|
|
<li class="other">不良率</li>
|
|
</ul>
|
|
<ul class="table-body">
|
|
<li class="first">外观</li>
|
|
<li class="other blue">{{ tableData.facade.wg_zs }}</li>
|
|
<li class="other green">{{ tableData.facade.wg_ok }}</li>
|
|
<li class="other yellow">{{ tableData.facade.wg_no }}</li>
|
|
<li class="other red">{{ tableData.facade.wg_buhegelv }}</li>
|
|
</ul>
|
|
<ul class="table-body">
|
|
<li class="first">性能</li>
|
|
<li class="other blue">{{ tableData.performance.xn_zs }}</li>
|
|
<li class="other green">{{ tableData.performance.xn_ok }}</li>
|
|
<li class="other yellow">{{ tableData.performance.xn_no }}</li>
|
|
<li class="other red">{{ tableData.performance.xn_buhegelv }}</li>
|
|
</ul>
|
|
<ul class="table-body">
|
|
<li class="first">尺寸</li>
|
|
<li class="other blue">{{ tableData.size.cc_zs }}</li>
|
|
<li class="other green">{{ tableData.size.cc_ok }}</li>
|
|
<li class="other yellow">{{ tableData.size.cc_no }}</li>
|
|
<li class="other red">{{ tableData.size.cc_buhegelv }}</li>
|
|
</ul>
|
|
<ul class="table-body">
|
|
<li class="first">数量合计</li>
|
|
<li class="other blue">{{ tableData.sum.sum_zs }}</li>
|
|
<li class="other green">{{ tableData.sum.sum_ok }}</li>
|
|
<li class="other yellow">{{ tableData.sum.sum_no }}</li>
|
|
<li class="other red">{{ tableData.sum.sum_buhegelv }}</li>
|
|
</ul>
|
|
</div>
|
|
<Echart :options="pieOptionsData" :height="'22vh'" />
|
|
<div class="line-header">
|
|
<div class="zhongjianwenzi"
|
|
>零件号:<span>{{ lineData?.item_code }}</span></div
|
|
>
|
|
<div class="zhongjianwenzi"
|
|
>检测类型:<span>{{ lineData?.itemTypeName }}</span></div
|
|
>
|
|
<div class="zhongjianwenzi" v-if="lineData?.itemTypeName == '色差'"
|
|
>点位:<span>{{ lineData?.line_number }}</span></div
|
|
>
|
|
<div class="zhongjianwenzi"
|
|
>检测项:<span>{{ lineData?.contents }}</span></div
|
|
>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="line-data">
|
|
<Echart :options="lineOptionsData" style="height: 20vh" />
|
|
</div>
|
|
<div class="bottom-r ml-6px mt-20px">
|
|
<div class="bottom-r-item">
|
|
<div>CPK</div>
|
|
<div>{{ lineData?.CPK }}</div>
|
|
<div>CPK</div>
|
|
</div>
|
|
<div class="bottom-r-item mt-6px">
|
|
<div>PPK</div>
|
|
<div>{{ lineData?.PPK }}</div>
|
|
<div>PPK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
|
<div class="right">
|
|
<div class="samll-title">合格数据</div>
|
|
<div class="mt-10px qualified-list" style="height:calc(50% - 44px);">
|
|
<dv-scroll-board
|
|
ref="scrollBoard"
|
|
:config="standardData"
|
|
style="width: 100%; height:100%"
|
|
/>
|
|
</div>
|
|
<div class="samll-title mt-10px">不合格数据</div>
|
|
<div class="mt-10px no-qualified-list" style="height:calc(50% - 44px);">
|
|
<dv-scroll-board
|
|
ref="noStandardDataScrollBoard"
|
|
:config="noStandardData"
|
|
style="width: 100%; height:100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { set } from 'lodash-es'
|
|
import { EChartsOption } from 'echarts'
|
|
import * as boardAPI from '@/api/board/index'
|
|
import { pieOptions, lineOptions } from '@/views/Home/echarts-data'
|
|
import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
|
|
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
|
|
|
|
defineOptions({ name: 'Board' })
|
|
const { t } = useI18n()
|
|
const tableData = ref({
|
|
facade: {},
|
|
size: {},
|
|
performance: {},
|
|
sum: {}
|
|
})
|
|
const loading = ref(true)
|
|
|
|
// 合格数据的字段
|
|
const standardDataTotal = ref(0)
|
|
const standardDataTime = ref()
|
|
const standardData = ref({
|
|
columnWidth: [300, 100, 200, 150, 170, 170],
|
|
header: ['零件号', '类型', '检测项', '检测日期', '标准', '实测值'],
|
|
indexHeader: '序号',
|
|
index: false,
|
|
data: [],
|
|
align: ['center','center','center','center','center','center'],
|
|
headerBGC: '#e3e8eb',
|
|
oddRowBGC: '#f7f7f7',
|
|
evenRowBGC: '#eeeff1',
|
|
waitTime: 3000,
|
|
headerHeight: 40,
|
|
rowNum: 5
|
|
})
|
|
|
|
const standardDataParams = ref({
|
|
pageSize: 20,
|
|
pageNo: 1
|
|
})
|
|
// 不合格数据字段
|
|
const noStandardDataTotal = ref(0)
|
|
const noStandardDataTime = ref()
|
|
const noStandardData = ref({
|
|
columnWidth: [300, 100, 200, 150, 170, 170],
|
|
header: ['零件号', '类型', '检测项', '检测日期', '标准', '实测值'],
|
|
indexHeader: '序号',
|
|
index: false,
|
|
data: [],
|
|
align: ['center','center','center','center','center','center'],
|
|
headerBGC: '#e3e8eb',
|
|
oddRowBGC: '#f7f7f7',
|
|
evenRowBGC: '#eeeff1',
|
|
waitTime: 3000,
|
|
headerHeight: 40,
|
|
rowNum: 5
|
|
})
|
|
const noStandardDataParams = ref({
|
|
pageSize: 20,
|
|
pageNo: 1
|
|
})
|
|
const pieData = ref()
|
|
// 看板获取数量列表以及饼状图
|
|
const getNumberStatistics = async () => {
|
|
await boardAPI.getNumberStatistics().then((res) => {
|
|
tableData.value.facade = res.list[0]
|
|
tableData.value.size = res.list[1]
|
|
tableData.value.performance = res.list[2]
|
|
tableData.value.sum = res.list[3]
|
|
pieData.value = res.echarts
|
|
})
|
|
}
|
|
// 饼状图
|
|
const getpieData = async () => {
|
|
const data = pieData.value
|
|
set(pieOptionsData, 'grid', { left: 20, right: 20, bottom: 20, top: 80, containLabel: true })
|
|
set(pieOptionsData, 'legend', {
|
|
data: data.map((v) => t(v.name)),
|
|
top: 'center',
|
|
right: 20,
|
|
orient: 'vertical'
|
|
})
|
|
set(pieOptionsData, 'series', {
|
|
name: '',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
label: {
|
|
show: true,
|
|
formatter(param) {
|
|
// correct the percentage
|
|
return param.name + ' (' + param.percent+ '%)';
|
|
}
|
|
},
|
|
center: ['30%', '50%'],
|
|
data: data.map((v) => {
|
|
return {
|
|
name: t(v.name),
|
|
value: v.value
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
// 获取折线图
|
|
const lineDataTotal = ref(0)
|
|
const lineTime = ref()
|
|
const lineData = ref()
|
|
const getLinePage = async () => {
|
|
await boardAPI.getLinePage().then((res) => {
|
|
if (lineTime.value) {
|
|
clearInterval(lineTime.value)
|
|
}
|
|
lineDataTotal.value = res.length
|
|
if (res?.length > 0) {
|
|
lineData.value = res[0]
|
|
}
|
|
let index = 1
|
|
lineTime.value = setInterval(() => {
|
|
if (index == res.length) {
|
|
index = 1
|
|
}
|
|
lineData.value = res[index]
|
|
getLineData()
|
|
index++
|
|
}, 3000)
|
|
})
|
|
}
|
|
// 折线图
|
|
const getLineData = async () => {
|
|
set(lineOptionsData, 'title', {
|
|
text: '',
|
|
left: 0,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
})
|
|
set(lineOptionsData, 'grid', {
|
|
left: 0,
|
|
right: 20,
|
|
bottom: 0,
|
|
top: 20,
|
|
containLabel: true
|
|
})
|
|
set(lineOptionsData, 'legend', {
|
|
data: [],
|
|
top: 0,
|
|
right: 20
|
|
})
|
|
set(lineOptionsData, 'xAxis', {
|
|
data: lineData.value.xDatasList,
|
|
boundaryGap: false,
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
})
|
|
set(lineOptionsData, 'series', [
|
|
{
|
|
name: '色差',
|
|
data: lineData.value.yDatasList,
|
|
type: 'line',
|
|
areaStyle: {},
|
|
animationDuration: 1000,
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
// 获取合格的数据
|
|
let first = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2
|
|
const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)
|
|
let standardData2 = []
|
|
const getStandardData = () => {
|
|
boardAPI
|
|
.getStandardData(standardDataParams.value)
|
|
.then((res) => {
|
|
standardDataTotal.value = res.total
|
|
res.list.forEach((item) => {
|
|
let data1 = []
|
|
data1.push(item.itemCode)
|
|
// data1.push(item.itemName)
|
|
data1.push(item.itemTypeName)
|
|
data1.push(item.contents)
|
|
data1.push(item.times)
|
|
data1.push(item.valueRange)
|
|
data1.push(item.detectValue)
|
|
standardData2.push(data1)
|
|
})
|
|
// 初始进入的时候
|
|
// standardData.value.index = true
|
|
if (first == 1) {
|
|
standardData.value.data = standardData2
|
|
first = 2
|
|
} else {
|
|
if (scrollBoard.value) {
|
|
scrollBoard.value.updateRows(standardData2)
|
|
}
|
|
}
|
|
loading.value = false
|
|
})
|
|
.catch(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
// 获取不合格的数据
|
|
let first1 = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2
|
|
const noStandardDataScrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)
|
|
let noStandardData2 = []
|
|
const getNoStandardData = () => {
|
|
boardAPI
|
|
.getNoStandardData(noStandardDataParams.value)
|
|
.then((res) => {
|
|
noStandardDataTotal.value = res.total
|
|
res.list.forEach((item) => {
|
|
let data1 = []
|
|
data1.push(item.itemCode)
|
|
// data1.push(item.itemName)
|
|
data1.push(item.itemTypeName)
|
|
data1.push(item.contents)
|
|
data1.push(item.times)
|
|
data1.push(item.valueRange)
|
|
data1.push(item.detectValue)
|
|
noStandardData2.push(data1)
|
|
})
|
|
// 初始进入的时候
|
|
// noStandardData.value.index = true
|
|
console.log(first1)
|
|
if (first1 == 1) {
|
|
noStandardData.value.data = noStandardData2
|
|
first1 = 2
|
|
} else {
|
|
if (noStandardDataScrollBoard.value) {
|
|
noStandardDataScrollBoard.value.updateRows(noStandardData2)
|
|
}
|
|
}
|
|
console.log(noStandardData.value)
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
// 首先定义一个getPreviousDate函数，方便调用
|
|
function getPreviousDate(numOfDays) {
|
|
var date = new Date()
|
|
date.setDate(date.getDate() - numOfDays)
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth() + 1
|
|
var day = date.getDate()
|
|
return year + '年' + month + '月' + day+ '日'
|
|
}
|
|
const handleResize= () =>{
|
|
window.location.reload()
|
|
}
|
|
const date = ref()
|
|
onMounted(async () => {
|
|
date.value = getPreviousDate(7) + ' - ' + getPreviousDate(1)
|
|
await getNumberStatistics()
|
|
getpieData()
|
|
await getLinePage()
|
|
getLineData()
|
|
getStandardData()
|
|
getNoStandardData()
|
|
standardDataTime.value = await setInterval(() => {
|
|
if (standardDataParams.value.pageNo * 10 > standardDataTotal.value) {
|
|
clearInterval(standardDataTime.value)
|
|
} else {
|
|
standardDataParams.value.pageNo++
|
|
getStandardData()
|
|
}
|
|
}, 15000)
|
|
noStandardDataTime.value = await setInterval(() => {
|
|
if (noStandardDataParams.value.pageNo * 10 > noStandardDataTotal.value) {
|
|
clearInterval(noStandardDataTime.value)
|
|
} else {
|
|
noStandardDataParams.value.pageNo++
|
|
getNoStandardData()
|
|
}
|
|
}, 15000)
|
|
window.addEventListener('resize', handleResize);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (standardDataTime.value) {
|
|
clearInterval(standardDataTime.value)
|
|
}
|
|
if (noStandardDataTime.value) {
|
|
clearInterval(noStandardDataTime.value)
|
|
}
|
|
if (lineTime.value) {
|
|
clearInterval(lineTime.value)
|
|
}
|
|
window.removeEventListener('resize', handleResize);
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.contain {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../assets/imgs/bgimg.png) no-repeat 0 0;
|
|
background-size: 100% 100%;
|
|
}
|
|
.title {
|
|
margin: 0px auto;
|
|
width: 50%;
|
|
text-align: center;
|
|
background: url(../../assets/imgs/title.png) no-repeat 0 0;
|
|
background-size: 100% 100%;
|
|
height: 11vh;
|
|
line-height: 7vh;
|
|
font-size: 2vw;
|
|
color: #596a7c;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -25%;
|
|
}
|
|
.bod {
|
|
width: 99vw;
|
|
height: 91vh;
|
|
background: url(../../assets/imgs/side.png) no-repeat 0 0;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.height {
|
|
height: 8vh;
|
|
}
|
|
.time {
|
|
text-align: center;
|
|
color: #3b556e;
|
|
font-size: 1.8vw;
|
|
padding-top: 2.2vh;
|
|
padding-bottom: 1.4vh;
|
|
}
|
|
.line-header {
|
|
background: #e3e8eb !important;
|
|
display: flex;
|
|
height: 5vh;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0px 10px;
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 0px;
|
|
}
|
|
.line-data {
|
|
width: 70%;
|
|
}
|
|
.bottom-r {
|
|
flex: 1;
|
|
height: calc(100% - 38px);
|
|
}
|
|
.bottom-r-item {
|
|
background: #e7ecef;
|
|
height: 50%;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
& > div {
|
|
&:nth-child(1) {
|
|
font-size: 1vw;
|
|
color: #3c73ac;
|
|
padding-left: 10px;
|
|
}
|
|
&:nth-child(2) {
|
|
font-size: 1vw;
|
|
font-weight: bold;
|
|
padding-left: 10px;
|
|
padding-top: 2px;
|
|
}
|
|
&:nth-child(3) {
|
|
position: absolute;
|
|
font-size: 3vw;
|
|
font-weight: bold;
|
|
color: #dce5ec;
|
|
right: 0px;
|
|
bottom: -1vw;
|
|
}
|
|
}
|
|
}
|
|
.samll-title {
|
|
font-size: 18px;
|
|
position: relative;
|
|
padding-left: 1vw;
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 6px;
|
|
height: 20px;
|
|
background: #5bacfe;
|
|
left: 0px;
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
}
|
|
}
|
|
::v-deep(.header-item) {
|
|
color: #6d7079 !important;
|
|
}
|
|
.qualified-list ::v-deep(.row-item) {
|
|
color: #12ad8b !important;
|
|
font-size: 1vw!important;
|
|
}
|
|
.no-qualified-list ::v-deep(.row-item) {
|
|
color: #c2020f !important;
|
|
font-size: 1vw!important;
|
|
}
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 77vh;
|
|
}
|
|
.right {
|
|
height: 77vh;
|
|
}
|
|
.table {
|
|
ul {
|
|
display: flex;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
&.table-header {
|
|
border-bottom: 1px solid #8f9fae !important;
|
|
border-top: 1px solid #8f9fae !important;
|
|
background: #e3e8eb !important;
|
|
color: #495f76;
|
|
}
|
|
&.table-body {
|
|
border-bottom: 1px solid #8f9fae !important;
|
|
color: #495f76;
|
|
}
|
|
li {
|
|
font-size: 1vw;
|
|
list-style: none;
|
|
// flex:1;
|
|
padding: 9px 15px;
|
|
text-align: center;
|
|
&.first {
|
|
text-align: right;
|
|
width: 80px;
|
|
}
|
|
&.other {
|
|
flex: 1;
|
|
}
|
|
&.blue {
|
|
color: #3e5567;
|
|
}
|
|
&.green {
|
|
color: #12ae89;
|
|
}
|
|
&.yellow {
|
|
color: #dd962c;
|
|
}
|
|
&.red {
|
|
color: #c2020f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep(.zhongjianwenzi) {
|
|
font-size: 1vw;
|
|
}
|
|
::v-deep(.dv-scroll-board .header .header-item){
|
|
font-size: 1vw;
|
|
height: 31px!important;
|
|
line-height: 31px!important;
|
|
}
|
|
::v-deep.dv-scroll-board .header{
|
|
height: 31px!important;
|
|
line-height: 31px!important;
|
|
|
|
}
|
|
</style>
|
|
|