看板

package.json

@@ -16,6 +16,7 @@
     "@form-create/designer": "^3.1.3",
     "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
+    "@kjgl77/datav-vue3": "^1.7.1",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.4.1",
     "@wangeditor/editor": "^5.1.23",

src/api/board/index.ts

@@ -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`})
+}
+
+
+

src/main.ts

@@ -52,6 +52,7 @@ import 'vue-video-player/src/custom-theme.css'
 // import vue3videoPlay from 'vue3-video-play' // 引入组件
 // import 'vue3-video-play/dist/style.css' // 引入css
 
+import DataVVue3 from '@kjgl77/datav-vue3'
 
 
 // 创建实例
@@ -75,6 +76,7 @@ const setupAll = async () => {
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
+  app.use(DataVVue3)
   // app.use(vue3videoPlay)
   app.mount('#app')
   app.config.warnHandler = () => null;

src/permission.ts

@@ -19,7 +19,8 @@ const whiteList = [
   '/auth-redirect',
   '/bind',
   '/register',
-  '/oauthLogin/gitee'
+  '/oauthLogin/gitee',
+  '/board'
 ]
 
 // 路由加载前

src/router/modules/remaining.ts

@@ -185,6 +185,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/board',
+    component: () => import('@/views/board/index.vue'),
+    name: 'Board',
+    meta: {
+      hidden: true,
+      title: '看板',
+      noTagsView: true
+    }
+  },
   {
     path: '/sso',
     component: () => import('@/views/Login/Login.vue'),

src/views/board/Index.vue

@@ -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>