大屏

Mr.Shi

2023-08-22 df48216098748d6d66856237d1833f8d8eb068bc

大屏

 screen_standard/src/assets/main.css

@@ -1,8 +1,14 @@
@import './base.css';

html, body {
  padding: 0;
  margin: 0;
}

#app {
  margin: 0 auto;
  height: 100vh;
  padding: 0;
  margin: 0;
  height: 100%;
  font-weight: normal;
}


 screen_standard/src/components/AppLayout.vue

@@ -167,10 +167,10 @@
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  // width: 100%;
  // height: 100%;
  padding: 30px;
  overflow-y: scroll;
  // overflow-y: scroll;
  box-sizing: border-box;
  .header {
    background-image: url('@/assets/img/bg_maintitle@2x.png');

 screen_standard/src/stores/counter.js

@@ -4,10 +4,6 @@
export const useCounterStore = defineStore('enterprise', {

  state: () => {
    // 678
<<<<<<< HEAD
    return { companyId: '', departId: '' };
=======
    return {
      companyId: '8',
      departId: '132',
@@ -17,7 +13,6 @@
      prouserNum: 0, // 今日生产人数
      unqualifiedRate: 0 // 今日不良品率
    };
>>>>>>> 8eebd3b823c2e477f949b7f06b6e972ec09327df
  },

  actions: {

 screen_standard/src/utils/api.js

@@ -29,3 +29,13 @@
export function getDeviceCheckPage (companyId, departId, data) {
    return axiosInstance.post(`statistics/getDeviceCheckPage/${companyId}/${departId}`, data)
}

// 近7天不良品分布-不良品数量统计
export function getUnqualified7DayData (companyId, departId, procedureId) {
    return axiosInstance.get(`statistics/getUnqualified7DayData/${companyId}/${departId}?procedureId=${procedureId}`)
}

// 近7天不良品分布-不良品数量-按不良项统计
export function getUnqualifiedCateData (companyId, departId, procedureId) {
    return axiosInstance.get(`statistics/getUnqualifiedCateData/${companyId}/${departId}?procedureId=${procedureId}`)
}

 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)