Board / HH-board-2026 · Files

<template>
    <div class="app-body">
        <Header title="大船看板" :sysInitTimeNum="sysTimeNum"></Header>
        <div class="dv-content-body">
            <!-- 顶部头表 -->
            <div class="dv-content-body-bottom-list">
                <div class="AGVtop">
                    <headCenter ref="headCenter" class="AGV-start" />
                </div>
                <div class="AGVbody">
                    <bodyLeft ref="bodyLeft" class="AGV-running" />
                    <bodyRight ref="bodyRight" class="AGV-conten" />
                </div>
                <div class="AGVbittle">
                    <footerLeft ref="footerLeft" class="AGV-running" />
                    <footerRight ref="footerRight" class="AGV-conten" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '@/layout/appHead'
import headCenter from '@/components/headCenter'

import bodyLeft from '@/components/bodyLeft'
import bodyRight from '@/components/bodyRight'

import footerLeft from '@/components/footerLeft'
import footerRight from '@/components/footerRight'

export default {
    data() {
        return {
            baseUrlOff: 'http://172.16.30.219:5221/api/Index/GetWebFWSInfo',
            // baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
            baseUrlOnLine: window.appConfig.baseUrlintTwo,
            sysData: {},
            sysInitTimeNum: 20,
            sysTimeNum: 20,
        }
    },
    components: {
        Header,
        headCenter,
        bodyLeft,
        bodyRight,
        footerLeft,
        footerRight,
    },

    methods: {
        getAGVDataOne() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
                logTitle: 'AGV-路线信息',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff,
                // isHanderAjaxSuccessActionLoad: true,
                // type: 'post',
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    this.$refs.headLeft.sed(res.data.data)
                    this.$refs.headCenter.getData(res.data.data)
                    this.$refs.headRight.sed(res.data.data)
                    this.$refs.footerLeft.sed(res.data.data)
                    this.$refs.footerRight.sed(res.data.data)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)
        },
        ajaxSuccessDataBefore(res, title) {
            if (res.data.data == null || res.data.data.length == 0) {
                this.sysData = []
                ''.Log(title + '无数据', 'getData')
                return false
            }
            return true
        },
        intInterval: function () {
            ''.intInterval(this, this.sysInitTimeNum, () => {
                this.getAGVDataOne()
            })
        },
        setData() {
            const data1 = {
                x: ['01-15'],
                running: [450]
            }
            this.$refs.footerLeft.getwarehouseHealthbar(data1)

            const data2 = {
                x: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
                running: [650, 750, 850, 900, 800, 700, 800, 800],
            }
            this.$refs.footerLeft.getwarehouseHealthbar2(data2)

            const data4 = [
                ['1号焊机', '电流过大', '01-09 15:33/1'],
                ['4号焊机', '电压过冲', '01-09 13:08/1'],
                ['7号焊机', '电压过冲', '01-09 10:54/1'],
                ['带锯床', '未匹配到该管径信息', '01-09 09:22/0']
            ]
            this.$refs.footerRight.sed(data4)

            const data5 = {
                x: ['01-15'],
                running: [850]
            }
            this.$refs.bodyLeft.getwarehouseHealthbar(data5)

            const data3 = {
                x: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
                running: [800, 900, 650, 750, 850, 900, 750, 650],
            }
            this.$refs.bodyLeft.getwarehouseHealthbar2(data3)

            const data7 = {
                x: ['焊机', '带锯床', '切坡一体机'],
                running: [36, 1, 1],
                error: [0, 0, 0]
            }
            this.$refs.bodyRight.getwarehouseHealthbar(data7)
        }
    },
    mounted() {
        debugger
        this.setData()
        // this.getAGVDataOne()
        // this.intInterval()
    },
}
</script>

<style lang="scss" scoped>
.app-body {
    height: 100%;
    width: 100%;
}

.dv-content-body {
    height: 90%;
    width: 100%;
    // background: rebeccapurple;
}

.dv-content-body-bottom-list {
    width: 98.8%;
    height: 98%;
    margin: auto;
    flex-wrap: wrap;

    .AGVtop {
        width: 100%;
        height: 32%;
        display: flex;
    }

    .AGVbody {
        width: 100%;
        height: 32%;
        display: flex;
        margin-top: 0.7%;
    }

    .AGVbittle {
        width: 100%;
        height: 32%;
        display: flex;
        margin-top: 0.7%;
    }

    .AGV-running {
        width: 66%;
        height: 101.3%;
        border: 2px solid #3879c9;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0 10px 7px;
    }

    .AGV-start {
        width: 32%;
        height: 100%;
        // border: 2px solid #3879c9;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0 10px 7px;
    }

    .location {
        width: 33%;
        height: 100%;
        border: 2px solid #3879c9;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin: 0px 0 10px 7px;
    }

    .AGV-conten {
        width: 33%;
        height: 100%;
        border: 2px solid #3879c9;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0 10px 7px;
    }

    .AGV-conten2 {
        width: 33.3%;
        height: 101.3%;
        border: 2px solid #3879c9;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0 10px 7px;
    }

    .box {
        flex: 1;
        /* 左右各占50%宽度 */
        height: 100%;
        display: flex;
        flex-direction: column;
        /* 内部item上下排列 */
        justify-content: space-around;
        /* item均匀分布 */
        align-items: center;
        /* item水平居中 */
    }

    /* 每个小项样式：宽85%、高18%、边框、内部左右排列 */
    .item {
        width: 80%;
        height: 17%;
        border-radius: 5px;
        border: 1px solid #67c8fb;
        display: flex;
        justify-content: space-between;
        /* 名称左、数值右 */
        align-items: center;
        /* 内容垂直居中 */
        padding: 0 5px;
        /* 内容不贴边框 */
        background-color: #062448;
    }

    /* 名称/数值样式区分 */
    .name {
        color: #fff;
        font-size: 14px;
    }

    .value {
        color: #67c8fb;
        font-size: 14px;
        font-weight: bold;
    }
}
</style>