大屏

Mr.Shi

2023-08-22 df48216098748d6d66856237d1833f8d8eb068bc

 screen_standard/src/views/index.vue

@@ -152,7 +152,7 @@
                    <span>近7天不良品分布</span>
                </div>
                <div class="content_right_top_nr">
                    <div class="content_right_top_nr_bottom_yuan">
                    <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0">
                        <span>67</span>
                        <span>不良项分布</span>
                    </div>
@@ -190,7 +190,7 @@

<script setup>
    import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick, computed, watch } from 'vue'
    import { getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage } from '@/utils/api.js'
    import { getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
    import { useCounterStore } from '@/stores/counter.js'
    import * as echarts from 'echarts'

@@ -201,22 +201,8 @@
        processProgress: [],
        log: [],
        patrolInspection: [],
        dayDistribution: [
            { date: '8/1', num: '20' },
            { date: '8/2', num: '10' },
            { date: '8/3', num: '20' },
            { date: '8/4', num: '40' },
            { date: '8/5', num: '30' },
            { date: '8/6', num: '10' },
            { date: '8/7', num: '20' },
        ],
        typeDistribution: [
            { name: '外观不良', num: 15 },
            { name: '有毛刺', num: 12 },
            { name: '尺寸不良', num: 22 },
            { name: '有划痕', num: 5 },
            { name: '其他', num: 2 }
        ]
        dayDistribution: [],
        typeDistribution: []
    })

    let timer = ref(null)
@@ -306,6 +292,32 @@
                nextTick(() => {
                    start4()
                })
            })
            // 近七天不良数
            getUnqualified7DayData(companyId.value, departId.value, '')
                .then(res => {
                    if (res && res.length > 0) {
                        data.dayDistribution = res.map(item => {
                            return {
                                date: item.createTime,
                                num: item.unqualifiedNum
                            }
                        })
                        setDayChart()
                    }
                })
            // 近七天不良项
            getUnqualifiedCateData(companyId.value, departId.value, '')
                .then(res => {
                    if (res && res.length > 0) {
                        data.typeDistribution = res.map(item => {
                            return {
                                name: item.categoryName,
                                num: item.unqualifiedNum
                            }
                        })
                        setTypeChart()
                    }
            })
        }
    })
@@ -490,11 +502,6 @@
    }
    option && myChart.setOption(option);
    }

    onMounted(() => {
        setDayChart()
        setTypeChart()
    })

    onBeforeUnmount(()=>{
        clearTimeout(timer.value)