看板

src/views/board/Index.vue

@@ -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="right">
-            <div class="mt-10px qualified-list">
+              <div class="samll-title">合格数据</div>
-              <dv-scroll-board
+              <div class="mt-10px qualified-list" style="height:calc(50% - 44px);">
-                ref="scrollBoard"
+                <dv-scroll-board
-                :config="standardData"
+                  ref="scrollBoard"
-                style="width: 100%; height: 33vh"
+                  :config="standardData"
-            /></div>
+                  style="width: 100%; height:100%"
-            <div class="samll-title mt-10px">不合格数据</div>
+                />
-            <div class="mt-10px no-qualified-list">
+              </div>
-              <dv-scroll-board
+              <div class="samll-title mt-10px">不合格数据</div>
-                ref="noStandardDataScrollBoard"
+              <div class="mt-10px no-qualified-list" style="height:calc(50% - 44px);">
-                :config="noStandardData"
+                <dv-scroll-board
-                style="width: 100%; height: 33vh"
+                  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)
+const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)
-function getStandardData() {
+let standardData2 = []
+const getStandardData = () => {
   boardAPI
     .getStandardData(standardDataParams.value)
     .then((res) => {
       standardDataTotal.value = res.total
-      let data2 = []
+      res.list.forEach((item) => {
-      res.list.forEach(item, (index) => {
         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)
+const noStandardDataScrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)
-function getNoStandardData() {
+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
+    if (standardDataParams.value.pageNo * 10 > standardDataTotal.value) {
-    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 {
+      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;