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" />
                    <bodyCenter ref="bodyCenter" class="AGV-center" />
                    <bodyRight ref="bodyRight" class="AGV-conten" />
                </div>
                <div class="AGVbittle">
                    <footerLeft ref="footerLeft" class="AGV-running" />
                    <footerCenter ref="footerCenter" class="AGV-center" />
                    <footerRight ref="footerRight" class="AGV-conten" />
                </div>
            </div>
        </div>
    </div>
</template>

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

import bodyLeft from '@/components2/bodyLeft'
import bodyCenter from '@/components2/bodyCenter'
import bodyRight from '@/components2/bodyRight'

import footerLeft from '@/components2/footerLeft'
import footerCenter from '@/components2/footerCenter'
import footerRight from '@/components2/footerRight'

export default {
    data() {
        return {
            baseUrlOff: 'http://192.168.2.235:108/api/Upstream/Mes/V1/GetCutInfoGroupDay',
            // baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
            baseUrlOnLine: window.appConfig.baseUrlintOne,
            baseUrlOnLine2: window.appConfig.baseUrlintTwo,
            baseUrlOnLine3: window.appConfig.baseUrlintThree,
            baseUrlOnLine4: window.appConfig.baseUrlintFour,
            sysData: {},
            sysInitTimeNum: 20,
            sysTimeNum: 20,
        }
    },
    components: {
        Header,
        headCenter,
        bodyLeft,
        bodyRight,
        footerLeft,
        footerRight,
        bodyCenter,
        footerCenter
    },

    methods: {
        getWCSDataLine1() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine + "?lineCode=line2" : this.baseUrlOff + "?lineCode=line2",
                logTitle: 'Line2信息',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff,
                // isHanderAjaxSuccessActionLoad: true,
                type: 'post'
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    const nowData = res.data.Result

                    const firstItemArray = nowData.CutInforByDayCounts.slice(0, 1); // 注意：slice 返回的是数组
                    const restItemsArray = nowData.CutInforByDayCounts.slice(1);
                    const info = {
                        CutQuantity: nowData.CutQuantity,
                        PipeQuantity: nowData.PipeQuantity
                    }

                    this.$refs.bodyLeft.setInfo(info)
                    this.$refs.bodyLeft.getwarehouseHealthbar(firstItemArray)
                    this.$refs.bodyLeft.getwarehouseHealthbar2(restItemsArray)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)

        },
        getWCSDataLine2() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine + "?lineCode=line1" : this.baseUrlOff,
                logTitle: 'Line1信息',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff,
                // isHanderAjaxSuccessActionLoad: true,
                type: 'post'
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    const nowData = res.data.Result

                    const firstItemArray = nowData.CutInforByDayCounts.slice(0, 1); // 注意：slice 返回的是数组
                    const restItemsArray = nowData.CutInforByDayCounts.slice(1);
                    const info = {
                        CutQuantity: nowData.CutQuantity,
                        PipeQuantity: nowData.PipeQuantity
                    }

                    this.$refs.footerLeft.setInfo(info)
                    this.$refs.footerLeft.getwarehouseHealthbar(firstItemArray)
                    this.$refs.footerLeft.getwarehouseHealthbar2(restItemsArray)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)
        },
        getAlarmData() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine2 : this.baseUrlOff,
                logTitle: '报警信息',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    const nowData = res.data.Result

                    const tableData = []
                    nowData.forEach(item => {
                        tableData.push([
                            item.EquipmentName,
                            item.AlarmInfo,
                            item.AlarmTime
                        ])
                    })

                    this.$refs.footerRight.sed(tableData)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)
        },
        getDeviceStatus() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine3 : this.baseUrlOff,
                logTitle: '设备状态',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    const nowData = res.data.Result

                    this.$refs.headCenter.sed(nowData)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)
        },
        getEquipmentStateInfo() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine4 : this.baseUrlOff,
                logTitle: '设备状态',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                header: window.baseOnLineOrOff
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

                setTimeout(() => {
                    const nowData = res.data.Result
                    // const nowData = [{ EquipmentCode: "HHDLCC20260304-A001", EquipmentName: "切坡一体机", Online: "1", isError: "0", EquipmentType: "3" },
                    // { EquipmentCode: "HHDLCC20260304-A001", EquipmentName: "带锯床", Online: "1", isError: "0", EquipmentType: "2" }
                    // ]
                    // 设备类型映射（常量）
                    const EQUIPMENT_TYPE_MAP = {
                        '1': '电焊机',
                        '2': '带锯床',
                        '3': '切坡一体机',
                        '4': '弯管机'
                    };

                    // 所有设备类型 key 列表（用于按固定顺序输出）
                    const ALL_TYPES = ['1', '2', '3', '4'];

                    // ====== 1. 总体统计 ======
                    const totalOnline = nowData.filter(item => item.Online === "1").length;
                    const totalError = nowData.filter(item => item.isError === "1").length;

                    // ====== 2. 每种设备的总台数（按固定顺序：电焊机、带锯床、切坡一体机、弯管机）======
                    const typeCountMap = {};
                    ALL_TYPES.forEach(type => {
                        typeCountMap[type] = 0; // 初始化
                    });

                    nowData.forEach(item => {
                        if (item.EquipmentType in typeCountMap) {
                            typeCountMap[item.EquipmentType]++;
                        }
                    });

                    // 转为数组（顺序与 ALL_TYPES 一致）
                    const totalCountPerType = ALL_TYPES.map(type => typeCountMap[type]);
                    // 例如：[2, 0, 5, 3] 表示 电焊机2台、带锯床0台、切坡一体机5台、弯管机3台

                    // ====== 3. 原有的 name / running / error（仅包含出现过的类型）======
                    const typeSet = new Set();
                    nowData.forEach(item => {
                        if (item.EquipmentType in EQUIPMENT_TYPE_MAP) {
                            typeSet.add(item.EquipmentType);
                        }
                    });

                    const uniqueTypes = Array.from(typeSet).sort((a, b) => Number(a) - Number(b));

                    const name = [];
                    const running = [];
                    const error = [];

                    uniqueTypes.forEach(type => {
                        name.push(EQUIPMENT_TYPE_MAP[type]);
                        running.push(nowData.filter(i => i.EquipmentType === type && i.Online === "1").length);
                        error.push(nowData.filter(i => i.EquipmentType === type && i.isError === "1").length);
                    });

                    // ====== 输出结果 ======
                    console.log('=== 总体统计 ===');
                    console.log('总在线数:', totalOnline);
                    console.log('总故障数:', totalError);

                    console.log('\n=== 各类型设备总台数（按顺序：电焊机、带锯床、切坡一体机、弯管机）===');
                    console.log('totalCountPerType:', totalCountPerType); // [2, 0, 5, 3]

                    console.log('\n=== 动态类型统计（仅出现过的）===');
                    console.log('name:', name);
                    console.log('running:', running);
                    console.log('error:', error);

                    const data = {
                        name: name,
                        running: running,
                        error: error
                    }
                    this.$refs.bodyRight.getwarehouseHealthbar(data)

                    const onlineInfo = {
                        online: totalOnline,
                        error: totalError
                    }
                    this.$refs.headCenter.setOnlineInfo(onlineInfo)

                    this.$refs.headCenter.setDeviceInfo(totalCountPerType)
                }, 300)
            }
            ''.ajax(this, opt, callBackFn)
        },
        ajaxSuccessDataBefore(res, title) {
            console.log(res)
            if (res.data.Code !== 200) {
                this.sysData = []
                ''.Log(title + '无数据', 'getData')
                return false
            }
            return true
        },
        intInterval: function () {
            ''.intInterval(this, this.sysInitTimeNum, () => {
                this.getWCSDataLine1()
                this.getWCSDataLine2()
                this.getAlarmData()
                this.getDeviceStatus()
                this.getEquipmentStateInfo()
            })
        },
        setData() {
            const data1 = [{
                CurryDate: '2026-03-10',
                Quantity: 9
            }]
            this.$refs.footerLeft.getwarehouseHealthbar(data1)

            // const data2 = {
            //     CurryDate: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
            //     Quantity: [650, 750, 850, 900, 800, 700, 800, 800],
            // }

            const data2 = [
                {
                    CurryDate: "2026-03-06",
                    Quantity: 7
                },
                {
                    CurryDate: "2026-03-05",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-03-04",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-03-03",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-03-02",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-03-01",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-02-28",
                    Quantity: 0
                },
                {
                    CurryDate: "2026-02-27",
                    Quantity: 0
                }
            ]
            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 = []
            this.$refs.bodyLeft.getwarehouseHealthbar(data5)

            const data3 = []
            this.$refs.bodyLeft.getwarehouseHealthbar2(data3)

            const data7 = {
                x: ['焊机', '带锯床', '切坡一体机', '弯管机'],
                running: [38, 1, 1, 0],
                error: [0, 0, 0, 2]
            }
            this.$refs.bodyRight.getwarehouseHealthbar(data7)
        }
    },
    mounted() {
        debugger
        this.setData()
        // this.getWCSDataLine1()
        // this.getWCSDataLine2()
        // this.getAlarmData()
        // this.getDeviceStatus()
        // this.getEquipmentStateInfo();
        // 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: 33%;
        height: 101.3%;
        border: 2px solid #3879c9;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0 10px 7px;
    }

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

    .AGV-center {
        width: 33%;
        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: 32%;
        height: 100%;
        border: 2px solid #3879c9;
        // justify-content: space-between;
        // align-items: center;
        margin: 0px 0 10px 7px;
    }

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

    .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>