大屏

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

@@ -28,4 +28,14 @@
// 巡检记录分页查询
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)
@@ -307,6 +293,32 @@
                    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()
                    }
                })
        }
    })

@@ -409,92 +421,87 @@
     * 不良类型分布
     */
    function setTypeChart() {
    let dayChartDom = document.getElementById('pieChart');
    let myChart = echarts.init(dayChartDom);
    let legendData = []
    let seriesData = []
    data.typeDistribution.forEach(item => {
        legendData.push(item.name)
        seriesData.push({name:item.name, value:item.num})
    })
    let option = {
        // title: {
        //   text: '同名数量统计',
        //   subtext: '纯属虚构',
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/>{b} : {c} ({d}%)'
        // },
        legend: {
        show: false,
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: legendData
        },
        series: [
        {
            // name: '姓名',
            type: 'pie',
        let dayChartDom = document.getElementById('pieChart');
        let myChart = echarts.init(dayChartDom);
        let legendData = []
        let seriesData = []
        data.typeDistribution.forEach(item => {
            legendData.push(item.name)
            seriesData.push({name:item.name, value:item.num})
        })
        let option = {
            // title: {
            //   text: '同名数量统计',
            //   subtext: '纯属虚构',
            //   left: 'center'
            // },
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{a} <br/>{b} : {c} ({d}%)'
            // },
            legend: {
            show: false,
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: legendData
            },
            series: [
            {
                // name: '姓名',
                type: 'pie',

            radius: ['60%', '70%'],
            // avoidLabelOverlap: false,
            itemStyle: {
            borderRadius: 4,
            borderColor: 'rgba(52, 88, 159, 0.4)',
            borderWidth: 4
            },
            center: ['50%', '50%'],
            labelLine: {
            show: false
            },
            label: {
            formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}',
            rich: {
                title: {
                color: '#fff'
                radius: ['60%', '70%'],
                // avoidLabelOverlap: false,
                itemStyle: {
                borderRadius: 4,
                borderColor: 'rgba(52, 88, 159, 0.4)',
                borderWidth: 4
                },
                per: {
                color: '#01D9FE'
                center: ['50%', '50%'],
                labelLine: {
                show: false
                },
                dot: {
                backgroundColor: 'inherit',
                width: 8,
                height: 8,
                borderRadius: 4
                label: {
                formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}',
                rich: {
                    title: {
                    color: '#fff'
                    },
                    per: {
                    color: '#01D9FE'
                    },
                    dot: {
                    backgroundColor: 'inherit',
                    width: 8,
                    height: 8,
                    borderRadius: 4
                    }
                }
                },
                // labelLayout: {
                //   hideOverlap: true
                // },
                endLabel: {
                show: true,
                distance: 5,
                color: "red"
                },
                data: seriesData,
                emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 1)'
                }
                }
            }
            },
            // labelLayout: {
            //   hideOverlap: true
            // },
            endLabel: {
            show: true,
            distance: 5,
            color: "red"
            },
            data: seriesData,
            emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
            }
            }
            ]
        }
        ]
        option && myChart.setOption(option);
    }
    option && myChart.setOption(option);
    }

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

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