kanban-vue/src/views/smt/bottom1.vue

<template>
    <div id="bottom1">
        <div class = "up">
            <div class="bg-color-black">
                <div class="d-flex pt-2 pl-2">
          <span>
            <icon name="chart-area" class="text-icon"></icon>
          </span>
                    <div class="d-flex">
                        <span class="fs-xl text mx-2">7日质量趋势分析</span>
                        <div class="decoration2">
                            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
                        </div>
                    </div>
                </div>
                <div>
                    <Bottom1Chart />
                </div>
            </div>
        </div>

        <div class="down">
            <div class="bg-color-black">
                <div class="d-flex pt-2 pl-2">
                   <span>
                    <icon name="chart-line" class="text-icon"></icon>
                  </span>
                    <div class="d-flex">
                        <span class="fs-xl text mx-2">线体当日累计产量统计</span>
                    </div>
                </div>
                <div class="d-flex jc-center body-box">
                    <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import Bottom1Chart from "@/components/smtechart/bottom/bottom1Chart";
    export default {
        components: {
            Bottom1Chart
        },
        data() {
            return {
                config: {
                    //线别，产出，不良，良率PLANQTY 计划数  GETRATE  达成率
                    header: ['线别', '产出', '不良','良率%','计划数','达成率%'],
                    data: [],
                    // rowNum: 5, //表格行数
                    headerHeight: 35,
                    headerBGC: '#0f1325', //表头
                    oddRowBGC: '#0f1325', //奇数行
                    evenRowBGC: '#171c33', //偶数行
                    columnWidth: [200,170,170,200,170,100],
                    align: ['center']
                },
                timing:null,
            }
        },
        mounted() {
            this.refreshdata()
        },
        beforeDestroy () {
            clearInterval(this.timing)
        },
        methods: {
            refreshdata() {
                this.getdata(); //获取-数据
                this.timing = setInterval(() => {
                    this.getdata(); //获取--数据
                }, 10000);
            },

            async getdata() {
                var caller = 'KB!SMT!BUTTOM1!DPLANTOUTPUT';
                if (sessionStorage.getItem('li_code') == '所有'){
                    caller = 'KB!SMT!BUTTOM1!DPLANTOUTPUT!ALL';
                }
                await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100", {
                        params: {
                            condition: "1=1",
                        }
                    })
                    .then((result)=>{
                            let dataList = JSON.parse(result.data.data);
                            let resultList = new Array();
                            for (let index = 0; index < dataList.length; index++) {
                                const element = dataList[index];
                                let item = new Array();
                                item.push(element.linecode);
                                item.push("<span  class='colorGrass'>"+element.value+"</span>");
                                item.push("<span  class='colorGrass'>"+element.ngqty+"</span>");
                                if(element.okrate<98) {  //98%
                                    item.push("<span  class='colorRed'>" + element.okrate + "</span>");
                                }else {
                                    item.push("<span  class='colorGrass'>" + element.okrate + "</span>");
                                }
                                item.push("<span  class='colorGrass'>"+element.planqty+"</span>");
                                item.push("<span  class='colorGrass'>"+element.getrate+"</span>");
                                resultList.push(item);
                            }
                            const scrollBoard = this.$refs['scroll-board'];
                            //刷新数据
                            scrollBoard.updateRows(resultList);
                        },(result)=>{
                            console.error(result)
                        }
                    );
            }
        }
    };
</script>

<style lang="scss" class>
    $box-height: 475px;
    $box-width: 100%;
    #bottom1 {
        padding: 8px 10px;
        height: $box-height;
        width: $box-width;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        .up {
            .bg-color-black {
                border-radius: 10px;
                height: 225px;
            }

            .text {
                color: #c3cbde;
                //font-size: 15px;
            }

            //下滑线动态
            .decoration2 {
                position: absolute;
                right: 0.125rem;
            }

            .chart-box {
                margin-top: 16px;
                width: 90px;
                height: 90px;
                .active-ring-name {
                    padding-top: 10px;
                }
            }
        }

        .down{
            height: 225px;
            padding-top: 5px;
            .bg-color-black {
                border-radius: 10px;
                height: 225px;
                padding-top: 5px;
                .dv-scr-board {
                    height: 205px;
                    .header{
                        font-size: 18px;
                    }
                    .rows .row-item{
                        font-size: 17px;
                    }
                }

            }
        }
    }
</style>