|
|
|
@ -1,11 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="contain"> |
|
|
|
<div class="contain" v-loading="loading"> |
|
|
|
<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="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="24" :xs="24"> |
|
|
|
@ -82,21 +82,24 @@ |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
<div class="right"> |
|
|
|
<div class="samll-title">合格数据</div> |
|
|
|
<div class="mt-10px qualified-list"> |
|
|
|
<div class="mt-10px qualified-list" style="height:calc(50% - 44px);"> |
|
|
|
<dv-scroll-board |
|
|
|
ref="scrollBoard" |
|
|
|
:config="standardData" |
|
|
|
style="width: 100%; height: 33vh" |
|
|
|
/></div> |
|
|
|
style="width: 100%; height:100%" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="samll-title mt-10px">不合格数据</div> |
|
|
|
<div class="mt-10px no-qualified-list"> |
|
|
|
<div class="mt-10px no-qualified-list" style="height:calc(50% - 44px);"> |
|
|
|
<dv-scroll-board |
|
|
|
ref="noStandardDataScrollBoard" |
|
|
|
:config="noStandardData" |
|
|
|
style="width: 100%; height: 33vh" |
|
|
|
style="width: 100%; height:100%" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -108,6 +111,7 @@ 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 |
|
|
|
|
|
|
|
@ -119,40 +123,50 @@ const tableData = ref({ |
|
|
|
performance: {}, |
|
|
|
sum: {} |
|
|
|
}) |
|
|
|
const loading = ref(true) |
|
|
|
|
|
|
|
// 合格数据的字段 |
|
|
|
const standardDataTotal = ref(0) |
|
|
|
const standardDataTime = ref() |
|
|
|
const standardData = ref({ |
|
|
|
columnWidth: [170, 170, 170, 170, 170, 170, 170], |
|
|
|
columnWidth: [230, 230, 140, 170, 170, 170, 110], |
|
|
|
header: ['零件号', '零件名称', '检测类型', '检测项', '检测日期', '标准', '实测值'], |
|
|
|
indexHeader: '序号', |
|
|
|
index: true, |
|
|
|
index: false, |
|
|
|
data: [], |
|
|
|
align: 'center', |
|
|
|
align: ['center','center','center','center','center','center','center'], |
|
|
|
headerBGC: '#e3e8eb', |
|
|
|
oddRowBGC: '#f7f7f7', |
|
|
|
evenRowBGC: '#eeeff1', |
|
|
|
waitTime: 3000, |
|
|
|
headerHeight: 40, |
|
|
|
rowNum: 9 |
|
|
|
rowNum: 10 |
|
|
|
}) |
|
|
|
|
|
|
|
const standardDataParams = ref({ |
|
|
|
pageSize: 20, |
|
|
|
pageNo: 1 |
|
|
|
}) |
|
|
|
// 不合格数据字段 |
|
|
|
const noStandardDataTotal = ref(0) |
|
|
|
const noStandardDataTime = ref() |
|
|
|
const noStandardData = ref({ |
|
|
|
columnWidth: [170, 170, 170, 170, 170, 170, 170], |
|
|
|
columnWidth: [230, 230, 140, 170, 170, 170, 110], |
|
|
|
header: ['零件号', '零件名称', '检测类型', '检测项', '检测日期', '标准', '实测值'], |
|
|
|
indexHeader: '序号', |
|
|
|
index: true, |
|
|
|
index: false, |
|
|
|
data: [], |
|
|
|
align: 'center', |
|
|
|
align: ['center','center','center','center','center','center','center'], |
|
|
|
headerBGC: '#e3e8eb', |
|
|
|
oddRowBGC: '#f7f7f7', |
|
|
|
evenRowBGC: '#eeeff1', |
|
|
|
waitTime: 3000, |
|
|
|
headerHeight: 40, |
|
|
|
rowNum: 9 |
|
|
|
rowNum: 10 |
|
|
|
}) |
|
|
|
const noStandardDataParams = ref({ |
|
|
|
pageSize: 20, |
|
|
|
pageNo: 1 |
|
|
|
}) |
|
|
|
const pieData = ref() |
|
|
|
// 看板获取数量列表以及饼状图 |
|
|
|
@ -189,14 +203,6 @@ const getpieData = async () => { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const standardDataParams = ref({ |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1 |
|
|
|
}) |
|
|
|
const noStandardDataParams = ref({ |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1 |
|
|
|
}) |
|
|
|
// 获取折线图 |
|
|
|
const lineDataTotal = ref(0) |
|
|
|
const lineTime = ref() |
|
|
|
@ -210,11 +216,9 @@ const getLinePage = async () => { |
|
|
|
if (res?.length > 0) { |
|
|
|
lineData.value = res[0] |
|
|
|
} |
|
|
|
console.log(lineData.value) |
|
|
|
|
|
|
|
let index = 1 |
|
|
|
lineTime.value = setInterval(() => { |
|
|
|
if (index == res.length - 1) { |
|
|
|
if (index == res.length) { |
|
|
|
index = 1 |
|
|
|
} |
|
|
|
lineData.value = res[index] |
|
|
|
@ -245,7 +249,7 @@ const getLineData = async () => { |
|
|
|
right: 20 |
|
|
|
}) |
|
|
|
set(lineOptionsData, 'xAxis', { |
|
|
|
data:lineData.value.xDatasList, |
|
|
|
data: lineData.value.xDatasList, |
|
|
|
boundaryGap: false, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
@ -265,17 +269,16 @@ const getLineData = async () => { |
|
|
|
]) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 获取合格的数据 |
|
|
|
let first = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2 |
|
|
|
const scrollBoard = ref(null) |
|
|
|
function getStandardData() { |
|
|
|
const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null) |
|
|
|
let standardData2 = [] |
|
|
|
const getStandardData = () => { |
|
|
|
boardAPI |
|
|
|
.getStandardData(standardDataParams.value) |
|
|
|
.then((res) => { |
|
|
|
standardDataTotal.value = res.total |
|
|
|
let data2 = [] |
|
|
|
res.list.forEach(item, (index) => { |
|
|
|
res.list.forEach((item) => { |
|
|
|
let data1 = [] |
|
|
|
data1.push(item.itemCode) |
|
|
|
data1.push(item.itemName) |
|
|
|
@ -284,30 +287,33 @@ function getStandardData() { |
|
|
|
data1.push(item.times) |
|
|
|
data1.push(item.valueRange) |
|
|
|
data1.push(item.detectValue) |
|
|
|
data2.push(data1) |
|
|
|
standardData2.push(data1) |
|
|
|
}) |
|
|
|
// 初始进入的时候 |
|
|
|
standardData.value.index = true |
|
|
|
// standardData.value.index = true |
|
|
|
if (first == 1) { |
|
|
|
standardData.value.data = data2 |
|
|
|
standardData.value.data = standardData2 |
|
|
|
first = 2 |
|
|
|
} else { |
|
|
|
if (scrollBoard.value) { |
|
|
|
scrollBoard.value.updateRows(data2) |
|
|
|
scrollBoard.value.updateRows(standardData2) |
|
|
|
} |
|
|
|
} |
|
|
|
loading.value = false |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
loading.value = false |
|
|
|
}) |
|
|
|
.catch(() => {}) |
|
|
|
} |
|
|
|
// 获取不合格的数据 |
|
|
|
let first1 = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2 |
|
|
|
const noStandardDataScrollBoard = ref(null) |
|
|
|
function getNoStandardData() { |
|
|
|
const noStandardDataScrollBoard = ref<InstanceType<typeof ScrollBoard>>(null) |
|
|
|
let noStandardData2 = [] |
|
|
|
const getNoStandardData = () => { |
|
|
|
boardAPI |
|
|
|
.getNoStandardData(noStandardDataParams.value) |
|
|
|
.then((res) => { |
|
|
|
noStandardDataTotal.value = res.total |
|
|
|
let data2 = [] |
|
|
|
res.list.forEach((item) => { |
|
|
|
let data1 = [] |
|
|
|
data1.push(item.itemCode) |
|
|
|
@ -317,46 +323,68 @@ function getNoStandardData() { |
|
|
|
data1.push(item.times) |
|
|
|
data1.push(item.valueRange) |
|
|
|
data1.push(item.detectValue) |
|
|
|
data2.push(data1) |
|
|
|
noStandardData2.push(data1) |
|
|
|
}) |
|
|
|
// 初始进入的时候 |
|
|
|
noStandardData.value.index = true |
|
|
|
// noStandardData.value.index = true |
|
|
|
console.log(first1) |
|
|
|
if (first1 == 1) { |
|
|
|
noStandardData.value.data = data2 |
|
|
|
noStandardData.value.data = noStandardData2 |
|
|
|
first1 = 2 |
|
|
|
} else { |
|
|
|
if (noStandardDataScrollBoard.value) { |
|
|
|
noStandardDataScrollBoard.value.updateRows(data2) |
|
|
|
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 date = ref() |
|
|
|
onMounted(async () => { |
|
|
|
date.value = getPreviousDate(7) + ' - ' + getPreviousDate(1) |
|
|
|
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) |
|
|
|
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++ |
|
|
|
console.log('noStandardDataParams',noStandardDataParams.value) |
|
|
|
getNoStandardData() |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
}, 15000) |
|
|
|
}) |
|
|
|
onUnmounted(() => { |
|
|
|
if (standardDataTime.value) { |
|
|
|
clearInterval(standardDataTime.value) |
|
|
|
} |
|
|
|
if (noStandardDataTime.value) { |
|
|
|
clearInterval(noStandardDataTime.value) |
|
|
|
} |
|
|
|
if (lineTime.value) { |
|
|
|
clearInterval(lineTime.value) |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -396,22 +424,6 @@ onMounted(async () => { |
|
|
|
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; |
|
|
|
@ -493,6 +505,9 @@ onMounted(async () => { |
|
|
|
flex-direction: column; |
|
|
|
height: 77vh; |
|
|
|
} |
|
|
|
.right { |
|
|
|
height: 77vh; |
|
|
|
} |
|
|
|
.table { |
|
|
|
ul { |
|
|
|
display: flex; |
|
|
|
|
