huatao-spc
/
huatao-spc-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

看板

master
zhang_li 12 months ago
parent
04f06f2782
commit
cd70635b65
1 changed files with 96 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 177
      src/views/board/Index.vue

177
src/views/board/Index.vue
View File

@ -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,20 +82,23 @@
</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 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>
@ -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;

Write Preview
Loading…
Cancel
Save