大屏

Mr.Shi

2023-08-22 d5d7e33e403a4ffe49f5dd1d073fcdf21bc0bb88

大屏

 screen_standard/src/stores/counter.js

@@ -5,7 +5,7 @@

  state: () => {
    // 678
    return { companyId: '8', departId: '132' };
    return { companyId: '', departId: '' };
  },

  actions: {

 screen_standard/src/utils/api.js

@@ -8,4 +8,24 @@
// 成品计划-实时仓库余量统计
export function getStockList (companyId, departId) {
    return axiosInstance.get(`statistics/getStockList/${companyId}/${departId}`)
}

// 成品计划进度查询
export function getWorkPlansList (companyId, departId) {
    return axiosInstance.get(`statistics/getWorkPlansList/${companyId}/${departId}`)
}

// 工序计划进度查询
export function getProcedureProcessList (companyId, departId) {
    return axiosInstance.get(`statistics/getProcedureProcessList/${companyId}/${departId}`)
}

// 报工日志分页查询
export function getRecordLogPage (companyId, departId, data) {
    return axiosInstance.post(`statistics/getRecordLogPage/${companyId}/${departId}`, data)
}

// 巡检记录分页查询
export function getDeviceCheckPage (companyId, departId, data) {
    return axiosInstance.post(`statistics/getDeviceCheckPage/${companyId}/${departId}`, data)
}

 screen_standard/src/views/index.vue

@@ -36,11 +36,11 @@
                    </div>
                    <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
                        <div ref="scrollContainer" class="scroll_container">
                            <div v-for="(item, index) in 10" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">电吉他 / 木工</div>
                                <div class="scroll_item_row">成品库</div>
                                <div class="scroll_item_row">C323</div>
                                <div class="scroll_item_row">3000把</div>
                            <div v-for="(item, index) in data.marginStatistics" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.materialName }} / {{ item.procedureName }}</div>
                                <div class="scroll_item_row">{{ item.warehouseName }}</div>
                                <div class="scroll_item_row">{{ item.location }}</div>
                                <div class="scroll_item_row">{{ item.num }}{{ item.unitName }}</div>
                            </div>
                        </div>
                    </div>
@@ -66,7 +66,7 @@
                    </div>
                    <div @mouseenter="handleMouseEnter1" @mouseleave="handleMouseLeave1" class="main_container">
                        <div ref="scrollContainer1" class="scroll_container">
                            <div v-for="(item, index) in 10" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                            <div v-for="(item, index) in data.plannedProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">323444112</div>
                                <div class="scroll_item_row">电吉他</div>
                                <div class="scroll_item_row">CP003</div>
@@ -101,14 +101,14 @@
                    </div>
                    <div @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2" class="main_container">
                        <div ref="scrollContainer2" class="scroll_container">
                            <div v-for="(item, index) in 15" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">木工</div>
                                <div class="scroll_item_row">3</div>
                                <div class="scroll_item_row">1000</div>
                                <div class="scroll_item_row">959</div>
                                <div class="scroll_item_row">30</div>
                                <div class="scroll_item_row">11</div>
                                <div class="scroll_item_row">3.12%</div>
                            <div v-for="(item, index) in data.processProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.procedureName }}</div>
                                <div class="scroll_item_row">{{ item.planCount }}</div>
                                <div class="scroll_item_row">{{ item.num }}</div>
                                <div class="scroll_item_row">{{ item.qualifiedNum }}</div>
                                <div class="scroll_item_row">{{ item.unqualifiedNum }}</div>
                                <div class="scroll_item_row">{{ item.undoneNum }}</div>
                                <div class="scroll_item_row">{{ item.unqualifiedRate }}%</div>
                            </div>
                        </div>
                    </div>
@@ -131,14 +131,14 @@
                    </div>
                    <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
                        <div ref="scrollContainer3" class="scroll_container">
                            <div v-for="(item, index) in 6" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">韩伟</div>
                                <div class="scroll_item_row">电吉他</div>
                                <div class="scroll_item_row">CP003</div>
                                <div class="scroll_item_row">2023/08/12 10:12:22</div>
                                <div class="scroll_item_row">459</div>
                                <div class="scroll_item_row">2</div>
                                <div class="scroll_item_row">2.12%</div>
                            <div v-for="(item, index) in data.log" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.userName }}</div>
                                <div class="scroll_item_row">{{ item.materialName }}</div>
                                <div class="scroll_item_row">{{ item.materialCode }}</div>
                                <div class="scroll_item_row">{{ item.createTime }}</div>
                                <div class="scroll_item_row">{{ item.qualifiedNum ? item.qualifiedNum : '-' }}</div>
                                <div class="scroll_item_row">{{ item.unqualifiedNum }}</div>
                                <div class="scroll_item_row">{{ item.unqualifiedRate ? item.unqualifiedRate : '0' }}%</div>
                            </div>
                        </div>
                    </div>
@@ -152,8 +152,12 @@
                    <span>近7天不良品分布</span>
                </div>
                <div class="content_right_top_nr">
                    <div class="content_right_top_nr_top"></div>
                    <div class="content_right_top_nr_bottom"></div>
                    <div class="content_right_top_nr_bottom_yuan">
                        <span>67</span>
                        <span>不良项分布</span>
                    </div>
                    <div class="content_right_top_nr_top" id="lineChrat"></div>
                    <div class="content_right_top_nr_bottom" id="pieChart"></div>
                </div>
            </div>
            <!-- 设备巡检记录 -->
@@ -170,11 +174,11 @@
                    </div>
                    <div @mouseenter="handleMouseEnter4" @mouseleave="handleMouseLeave4" class="main_container">
                        <div ref="scrollContainer4" class="scroll_container">
                            <div v-for="(item, index) in 10" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">2023-10-12 02:00:23</div>
                                <div class="scroll_item_row">木工设备</div>
                                <div class="scroll_item_row">合格</div>
                                <div class="scroll_item_row">何子春</div>
                            <div v-for="(item, index) in data.patrolInspection" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.checkdate }}</div>
                                <div class="scroll_item_row">{{ item.deviceName }}</div>
                                <div class="scroll_item_row">{{ item.status == 0 ? '合格' : '不合格' }}</div>
                                <div class="scroll_item_row">{{ item.userName }}</div>
                            </div>
                        </div>
                    </div>
@@ -185,12 +189,34 @@
</template>

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

    let data = reactive({
        production: []
        production: [],
        marginStatistics: [],
        plannedProgress: [],
        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 }
        ]
    })

    let timer = ref(null)
@@ -229,42 +255,245 @@
        return enterprise.departId
    })

    start()
    start1()
    // start2()
    start3()
    start4()
    // 注：示例中的 listData 写的是静态数据，可以直接调用 start()
    // 如果是接口获取 listData 列表时，需要在 nextTick 中调用 start()
    // 否则，进入页面不会滚动。必须鼠标移入移出才会滚动
    // 用 nextTick 的原因是需要等 dom 元素加载完毕后再执行方法
    
    // let chartData = reactive({
    //     data: []
    // })
    // function getSensorData() {
    //     GetSensorData().then(res=> {
    //         chartData.data = res.data.data
    //         nextTick(()=>{
    //             start()
    //         })
    //     })
    // }
    
    onMounted(()=> {
        // getSensorData()
        getTop(companyId.value, departId.value)
            .then(res => {
                console.log(res)
                if (res.length > 0) {
                    res.forEach((item, index) => {
                        if (index > 1) {
                            item.doneNum1 = res[0].doneNum / item.doneNum
                        }
    watch(() => departId.value, (val) => {
        if (val) {
            // 当日员工产量TOP10
            getTop(companyId.value, departId.value)
                .then(res => {
                    if (res.length > 0) {
                        res.forEach((item, index) => {
                            if (index > 1) {
                                item.doneNum1 = res[0].doneNum / item.doneNum
                            }
                        })
                        data.production = res
                    }
                })
            // 仓库实时余量统计
            getStockList(companyId.value, departId.value)
                .then(res => {
                    data.marginStatistics = res
                    nextTick(() => {
                        start()
                    })
                    data.production = res
                }
                })
            // 成品计划进度
            getWorkPlansList(companyId.value, departId.value)
                .then(res => {
                    data.plannedProgress = res
                    nextTick(() => {
                        start1()
                    })
                })
            // 报工日志
            getRecordLogPage(companyId.value, departId.value, {
                capacity: 9999,
                model: {},
                page: 1
            }).then(res => {
                data.log = res.records
                nextTick(() => {
                    start3()
                })
            })
            // 设备巡检记录
            getDeviceCheckPage(companyId.value, departId.value, {
                capacity: 9999,
                model: {},
                page: 1
            }).then(res => {
                data.patrolInspection = res.records
                nextTick(() => {
                    start4()
                })
            })
        }
    })

    start1()

    /**
     * 七日折线图
     */
    function setDayChart() {
        let dayChartDom = document.getElementById('lineChrat');
        let myChart = echarts.init(dayChartDom);
        let dateList = []
        let numList = []

        data.dayDistribution.forEach(item => {
            dateList.push(item.date)
            numList.push(item.num)
        })
        let option;
        option = {
            title: {
                text: '近七日不良品总数：67',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    lineStyle: {
                        width: 0.5,
                        color: ['#fff']
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                data: dateList
            },

            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        width: 0.5,
                        color: ['#fff']
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    data: numList,
                    type: 'line',
                    lineStyle: {
                        color: '#03D2B5',
                        width: 1
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(3, 210, 181, .9)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(3, 210, 181, 0)',
                            }
                        ])
                    }
                }
            ],

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                name: '1adssad',
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 4,
                textStyle: {
                    color: '#fff'
                }
            }
        }

        option && myChart.setOption(option);
    }

    /**
     * 不良类型分布
     */
    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',

            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'
                },
                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)'
            }
            }
        }
        ]
    }
    option && myChart.setOption(option);
    }

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

    onBeforeUnmount(()=>{
@@ -286,10 +515,25 @@
        clearTimeout(timer2.value)
        cate.value.forEach((item, i) => {
            if (i === index) {
                // 成品计划进度
                if (i == 0) {
                    start1()
                    getWorkPlansList(companyId.value, departId.value)
                        .then(res => {
                            console.log(res)
                            data.plannedProgress = res
                            nextTick(() => {
                                start1()
                            })
                        })
                } else {
                    start2()
                    getProcedureProcessList(companyId.value, departId.value)
                        .then(res => {
                            console.log(res)
                            data.processProgress = res
                            nextTick(() => {
                                start2()
                            })
                        })
                }
                item.active = true
            } else {
@@ -985,15 +1229,44 @@
                    width: 100%;
                    height: calc(100% - 38px);
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    position: relative;
                    .content_right_top_nr_bottom_yuan {
                        position: absolute;
                        top: 299px;
                        left: 168px;
                        z-index: 999;
                        width: 114px;
                        height: 114px;
                        border-radius: 50%;
                        border: 2px dashed #01D9FE;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        span {
                            &:first-child {
                                font-size: 26px;
                                font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                                font-weight: 500;
                                color: #FFFFFF;
                            }
                            &:last-child {
                                font-size: 13px;
                                font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                font-weight: 400;
                                color: rgba(255,255,255,0.8);
                            }
                        }
                    }
                    .content_right_top_nr_top {
                        width: 100%;
                        height: 50%;
                        background-color: #00B0FF;
                        padding: 10px 0 0 10px;
                        box-sizing: border-box;
                    }
                    .content_right_top_nr_bottom {
                        width: 100%;
                        height: 50%;
                        background-color: #5900ff;
                    }
                }
            }