9 changed files with 577 additions and 1 deletions
@ -0,0 +1,24 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
|
||||
|
// 看板获取数量列表以及饼状图
|
||||
|
export const getNumberStatistics = async () => { |
||||
|
return await request.get({ url: `/detection/records-timing/getNumberStatistics`}) |
||||
|
} |
||||
|
|
||||
|
// 前七天不合格数据
|
||||
|
export const getNoStandardData = async (params) => { |
||||
|
return await request.get({ url: `/detection/records-timing/getNoStandardData`,params}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 前七天合格数
|
||||
|
export const getStandardData = async (params) => { |
||||
|
return await request.get({ url: `/detection/records-timing/getStandardData`,params}) |
||||
|
} |
||||
|
//
|
||||
|
export const getLinePage = async () => { |
||||
|
return await request.get({ url: `detection/records-timing/getRecordsTimingList`}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
After Width: | Height: | Size: 749 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 118 KiB |
@ -0,0 +1,538 @@ |
|||||
|
<template> |
||||
|
<div class="contain"> |
||||
|
<div class="title"> |
||||
|
<div>SPC质量品质数据看板</div> |
||||
|
</div> |
||||
|
<div class="height"></div> |
||||
|
<div class="bod"> |
||||
|
<div class="time">2023年11月11日 - 2023年11月11日</div> |
||||
|
<div class="pl-2vw pr-2vw"> |
||||
|
<el-row :gutter="14" justify="space-between"> |
||||
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
||||
|
<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="" |
||||
|
>零件号:<span>{{ lineData?.item_code }}</span></div |
||||
|
> |
||||
|
<div class="" |
||||
|
>检测类型:<span>{{ lineData?.itemTypeName }}</span></div |
||||
|
> |
||||
|
<div class="" v-if="lineData?.itemTypeName == '色差'" |
||||
|
>点位:<span>{{ lineData?.line_number }}</span></div |
||||
|
> |
||||
|
<div class="" |
||||
|
>检测项:<span>{{ lineData?.contents }}</span></div |
||||
|
> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<div class="line-data"> |
||||
|
<Echart :options="lineOptionsData" style="height: calc(77vh - 22vh - 240px)" /> |
||||
|
</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="24" :xs="24"> |
||||
|
<div class="samll-title">合格数据</div> |
||||
|
<div class="mt-10px qualified-list"> |
||||
|
<dv-scroll-board |
||||
|
ref="scrollBoard" |
||||
|
:config="standardData" |
||||
|
style="width: 100%; height: 33vh" |
||||
|
/></div> |
||||
|
<div class="samll-title mt-10px">不合格数据</div> |
||||
|
<div class="mt-10px no-qualified-list"> |
||||
|
<dv-scroll-board |
||||
|
ref="noStandardDataScrollBoard" |
||||
|
:config="noStandardData" |
||||
|
style="width: 100%; height: 33vh" |
||||
|
/> |
||||
|
</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' |
||||
|
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 standardDataTotal = ref(0) |
||||
|
const standardDataTime = ref() |
||||
|
const standardData = ref({ |
||||
|
columnWidth: [170, 170, 170, 170, 170, 170, 170], |
||||
|
header: ['零件号', '零件名称', '检测类型', '检测项', '检测日期', '标准', '实测值'], |
||||
|
indexHeader: '序号', |
||||
|
index: true, |
||||
|
data: [], |
||||
|
align: 'center', |
||||
|
headerBGC: '#e3e8eb', |
||||
|
oddRowBGC: '#f7f7f7', |
||||
|
evenRowBGC: '#eeeff1', |
||||
|
waitTime: 3000, |
||||
|
headerHeight: 40, |
||||
|
rowNum: 9 |
||||
|
}) |
||||
|
// 不合格数据字段 |
||||
|
const noStandardDataTotal = ref(0) |
||||
|
const noStandardDataTime = ref() |
||||
|
const noStandardData = ref({ |
||||
|
columnWidth: [170, 170, 170, 170, 170, 170, 170], |
||||
|
header: ['零件号', '零件名称', '检测类型', '检测项', '检测日期', '标准', '实测值'], |
||||
|
indexHeader: '序号', |
||||
|
index: true, |
||||
|
data: [], |
||||
|
align: 'center', |
||||
|
headerBGC: '#e3e8eb', |
||||
|
oddRowBGC: '#f7f7f7', |
||||
|
evenRowBGC: '#eeeff1', |
||||
|
waitTime: 3000, |
||||
|
headerHeight: 40, |
||||
|
rowNum: 9 |
||||
|
}) |
||||
|
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: '80%', |
||||
|
center: ['30%', '50%'], |
||||
|
data: data.map((v) => { |
||||
|
return { |
||||
|
name: t(v.name), |
||||
|
value: v.value |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const standardDataParams = ref({ |
||||
|
pageSize: 10, |
||||
|
pageNo: 1 |
||||
|
}) |
||||
|
const noStandardDataParams = ref({ |
||||
|
pageSize: 10, |
||||
|
pageNo: 1 |
||||
|
}) |
||||
|
// 获取折线图 |
||||
|
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] |
||||
|
} |
||||
|
console.log(lineData.value) |
||||
|
|
||||
|
let index = 1 |
||||
|
lineTime.value = setInterval(() => { |
||||
|
if (index == res.length - 1) { |
||||
|
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: 0, |
||||
|
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(null) |
||||
|
function getStandardData() { |
||||
|
boardAPI |
||||
|
.getStandardData(standardDataParams.value) |
||||
|
.then((res) => { |
||||
|
standardDataTotal.value = res.total |
||||
|
let data2 = [] |
||||
|
res.list.forEach(item, (index) => { |
||||
|
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) |
||||
|
data2.push(data1) |
||||
|
}) |
||||
|
// 初始进入的时候 |
||||
|
standardData.value.index = true |
||||
|
if (first == 1) { |
||||
|
standardData.value.data = data2 |
||||
|
first = 2 |
||||
|
} else { |
||||
|
if (scrollBoard.value) { |
||||
|
scrollBoard.value.updateRows(data2) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
} |
||||
|
// 获取不合格的数据 |
||||
|
let first1 = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2 |
||||
|
const noStandardDataScrollBoard = ref(null) |
||||
|
function getNoStandardData() { |
||||
|
boardAPI |
||||
|
.getNoStandardData(noStandardDataParams.value) |
||||
|
.then((res) => { |
||||
|
noStandardDataTotal.value = res.total |
||||
|
let data2 = [] |
||||
|
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) |
||||
|
data2.push(data1) |
||||
|
}) |
||||
|
// 初始进入的时候 |
||||
|
noStandardData.value.index = true |
||||
|
if (first1 == 1) { |
||||
|
noStandardData.value.data = data2 |
||||
|
first1 = 2 |
||||
|
} else { |
||||
|
if (noStandardDataScrollBoard.value) { |
||||
|
noStandardDataScrollBoard.value.updateRows(data2) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
onMounted(async () => { |
||||
|
await getNumberStatistics() |
||||
|
getpieData() |
||||
|
await getLinePage() |
||||
|
getLineData() |
||||
|
getStandardData() |
||||
|
getNoStandardData() |
||||
|
|
||||
|
// const noStandardDataTime = ref() |
||||
|
standardDataTime.value = await setInterval(() => { |
||||
|
// const ys = noStandardDataTotal.value % 10 == 0 ? noStandardDataTotal.value / 10 : noStandardDataTotal.value / 10 + 1 |
||||
|
console.log('pageNo',noStandardDataParams.value.pageNo * 10) |
||||
|
console.log('noStandardDataTotal',noStandardDataTotal.value) |
||||
|
if (noStandardDataParams.value.pageNo * 10 > noStandardDataTotal.value) { |
||||
|
console.log(noStandardData.value) |
||||
|
clearInterval(standardDataTime.value) |
||||
|
} else { |
||||
|
noStandardDataParams.value.pageNo++ |
||||
|
console.log('noStandardDataParams',noStandardDataParams.value) |
||||
|
getNoStandardData() |
||||
|
} |
||||
|
}, 1000) |
||||
|
}) |
||||
|
</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: 12vh; |
||||
|
line-height: 8vh; |
||||
|
font-size: 2vw; |
||||
|
color: #596a7c; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
margin-left: -25%; |
||||
|
} |
||||
|
.bod { |
||||
|
width: 99vw; |
||||
|
height: 90vh; |
||||
|
background: url(../../assets/imgs/side.png) no-repeat 0 0; |
||||
|
background-size: 100% 100%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.height { |
||||
|
height: 9vh; |
||||
|
} |
||||
|
.time { |
||||
|
text-align: center; |
||||
|
color: #3b556e; |
||||
|
line-height: 8vh; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
// ::v-deep(.el-table tr), |
||||
|
// ::v-deep(.el-table th.el-table__cell), |
||||
|
// ::v-deep(.el-table) { |
||||
|
// background: none !important; |
||||
|
// } |
||||
|
// ::v-deep(.el-table th.el-table__cell) { |
||||
|
// border-bottom: 1px solid #8f9fae !important; |
||||
|
// border-top: 1px solid #8f9fae !important; |
||||
|
// background: #e3e8eb !important; |
||||
|
// } |
||||
|
// ::v-deep(.el-table--default .el-table__cell) { |
||||
|
// border-bottom: 1px solid #8f9fae !important; |
||||
|
// } |
||||
|
// ::v-deep(.el-table__inner-wrapper::before) { |
||||
|
// background: #8f9fae; |
||||
|
// } |
||||
|
.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-top: 10px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
font-size: 1.7vw; |
||||
|
font-weight: bold; |
||||
|
padding-left: 10px; |
||||
|
padding-top: 6px; |
||||
|
} |
||||
|
&: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; |
||||
|
} |
||||
|
.no-qualified-list ::v-deep(.row-item) { |
||||
|
color: #c2020f !important; |
||||
|
} |
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
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 { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue