From 8b4470c10fa3338f75b0b96fe7f8c004c9ea9363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=96=AA=E5=90=8D?= <942005050@qq.com>
Date: Tue, 6 Feb 2024 08:42:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E5=86=99=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/index.vue | 582 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 582 insertions(+)
 create mode 100644 src/views/board/index.vue

diff --git a/src/views/board/index.vue b/src/views/board/index.vue
new file mode 100644
index 0000000..2642447
--- /dev/null
+++ b/src/views/board/index.vue
@@ -0,0 +1,582 @@
+<template>
+  <div class="contain" v-loading="loading">
+    <div class="title">
+      <div>SPC质量品质数据看板</div>
+    </div>
+    <div class="height"></div>
+    <div class="bod">
+      <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="12" :xs="12">
+            <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="zhongjianwenzi"
+                  >零件号:<span>{{ lineData?.item_code }}</span></div
+                >
+                <div class="zhongjianwenzi"
+                  >检测类型:<span>{{ lineData?.itemTypeName }}</span></div
+                >
+                <div class="zhongjianwenzi" v-if="lineData?.itemTypeName == '色差'"
+                  >点位:<span>{{ lineData?.line_number }}</span></div
+                >
+                <div class="zhongjianwenzi"
+                  >检测项:<span>{{ lineData?.contents }}</span></div
+                >
+              </div>
+              <div class="bottom">
+                <div class="line-data">
+                  <Echart :options="lineOptionsData" style="height: 20vh" />
+                </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="12" :xs="12">
+            <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>
+      </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'
+import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
+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 loading = ref(true)
+
+// 合格数据的字段
+const standardDataTotal = ref(0)
+const standardDataTime = ref()
+const standardData = ref({
+  columnWidth: [300, 100, 200, 150, 170, 170],
+  header: ['零件号', '类型', '检测项', '检测日期', '标准', '实测值'],
+  indexHeader: '序号',
+  index: false,
+  data: [],
+  align: ['center','center','center','center','center','center'],
+  headerBGC: '#e3e8eb',
+  oddRowBGC: '#f7f7f7',
+  evenRowBGC: '#eeeff1',
+  waitTime: 3000,
+  headerHeight: 40,
+  rowNum: 5
+})
+
+const standardDataParams = ref({
+  pageSize: 20,
+  pageNo: 1
+})
+// 不合格数据字段
+const noStandardDataTotal = ref(0)
+const noStandardDataTime = ref()
+const noStandardData = ref({
+  columnWidth: [300, 100, 200, 150, 170, 170],
+  header: ['零件号', '类型', '检测项', '检测日期', '标准', '实测值'],
+  indexHeader: '序号',
+  index: false,
+  data: [],
+  align: ['center','center','center','center','center','center'],
+  headerBGC: '#e3e8eb',
+  oddRowBGC: '#f7f7f7',
+  evenRowBGC: '#eeeff1',
+  waitTime: 3000,
+  headerHeight: 40,
+  rowNum: 5
+})
+const noStandardDataParams = ref({
+  pageSize: 20,
+  pageNo: 1
+})
+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: '70%',
+    label: {
+        show: true,
+        formatter(param) {
+          // correct the percentage
+          return param.name + ' (' + param.percent+ '%)';
+        }
+      },
+    center: ['30%', '50%'],
+    data: data.map((v) => {
+      return {
+        name: t(v.name),
+        value: v.value
+      }
+    })
+  })
+}
+
+// 获取折线图
+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]
+    }
+    let index = 1
+    lineTime.value = setInterval(() => {
+      if (index == res.length) {
+        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: 20,
+    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<InstanceType<typeof ScrollBoard>>(null)
+let standardData2 = []
+const getStandardData = () => {
+  boardAPI
+    .getStandardData(standardDataParams.value)
+    .then((res) => {
+      standardDataTotal.value = res.total
+      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)
+        standardData2.push(data1)
+      })
+      // 初始进入的时候
+      // standardData.value.index = true
+      if (first == 1) {
+        standardData.value.data = standardData2
+        first = 2
+      } else {
+        if (scrollBoard.value) {
+          scrollBoard.value.updateRows(standardData2)
+        }
+      }
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+// 获取不合格的数据
+let first1 = 1 //初始加载列表的时候为1，之后定制器加载的时候显示2
+const noStandardDataScrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)
+let noStandardData2 = []
+const getNoStandardData = () => {
+  boardAPI
+    .getNoStandardData(noStandardDataParams.value)
+    .then((res) => {
+      noStandardDataTotal.value = res.total
+      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)
+        noStandardData2.push(data1)
+      })
+      // 初始进入的时候
+      // noStandardData.value.index = true
+      console.log(first1)
+      if (first1 == 1) {
+        noStandardData.value.data = noStandardData2
+        first1 = 2
+      } else {
+        if (noStandardDataScrollBoard.value) {
+          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 handleResize= () =>{
+window.location.reload()
+}
+const date = ref()
+onMounted(async () => {
+  date.value = getPreviousDate(7) + ' - ' + getPreviousDate(1)
+  await getNumberStatistics()
+  getpieData()
+  await getLinePage()
+  getLineData()
+  getStandardData()
+  getNoStandardData()
+  standardDataTime.value = await setInterval(() => {
+    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++
+      getNoStandardData()
+    }
+  }, 15000)
+ window.addEventListener('resize', handleResize);
+})
+
+onUnmounted(() => {
+  if (standardDataTime.value) {
+    clearInterval(standardDataTime.value)
+  }
+  if (noStandardDataTime.value) {
+    clearInterval(noStandardDataTime.value)
+  }
+  if (lineTime.value) {
+    clearInterval(lineTime.value)
+  }
+  window.removeEventListener('resize', handleResize);
+})
+</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: 11vh;
+  line-height: 7vh;
+  font-size: 2vw;
+  color: #596a7c;
+  position: absolute;
+  left: 50%;
+  margin-left: -25%;
+}
+.bod {
+  width: 99vw;
+  height: 91vh;
+  background: url(../../assets/imgs/side.png) no-repeat 0 0;
+  background-size: 100% 100%;
+  margin: 0 auto;
+}
+.height {
+  height: 8vh;
+}
+.time {
+  text-align: center;
+  color: #3b556e;
+  font-size: 1.8vw;
+  padding-top: 2.2vh;
+  padding-bottom: 1.4vh;
+}
+.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-left: 10px;
+    }
+    &:nth-child(2) {
+      font-size: 1vw;
+      font-weight: bold;
+      padding-left: 10px;
+      padding-top: 2px;
+    }
+    &: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;
+  font-size: 1vw!important;
+}
+.no-qualified-list ::v-deep(.row-item) {
+  color: #c2020f !important;
+  font-size: 1vw!important;
+}
+.left {
+  display: flex;
+  flex-direction: column;
+  height: 77vh;
+}
+.right {
+  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 {
+      font-size: 1vw;
+      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;
+      }
+    }
+  }
+}
+::v-deep(.zhongjianwenzi) {
+  font-size: 1vw;
+}
+::v-deep(.dv-scroll-board .header .header-item){
+  font-size: 1vw;
+  height: 31px!important;
+  line-height: 31px!important;
+}
+::v-deep.dv-scroll-board .header{
+  height: 31px!important;
+  line-height: 31px!important;
+
+}
+</style>