<template>
    <div class="mainbox">
        <div class="set1 colflex leftbox">
            <div class="box2">
                <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }">
                    <div class="pad12 swh" style="padding-top: 24px;">
                        <Devicestatus :datas="devicestatus"></Devicestatus>
                    </div>
                </aYinTechBorderA1>
            </div>
            <div class="box3">
                <aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }">
                    <div class="pad12 swh" style="padding-top: 24px;">
                        <Produce :datas="produce" :lineoptions="produceoptions"></Produce>
                    </div>
                </aYinTechBorderA1>
            </div>
            <div class="box3">
                <aYinTechBorderA1 :config="{ ...leftConfig, title: '质量合格率趋势', titleWidth: 120 }">
                    <div class="pad12 swh" style="padding-top: 24px;">
                        <Line :datas="quality" :lineoptions="qualityoptions"></Line>
                    </div>
                </aYinTechBorderA1>
            </div>
        </div>
        <div class="set2 colflex" style="gap: 12px;">
            <div class="middlebox">
                <aYinTechBorderB4 :config="systemconfig">
                    <div class="swh colflex" style="padding: 15px;">
                        <div class="systitle" v-if="!Object.keys(activeitem)?.length">
                            <aim-outlined style="color: #0f828d;margin-right: 18px;font-size: 24px;" />
                            致力于打造满足数字化要求的智慧工厂
                        </div>
                        <div class="syscontent rowflex" v-if="!Object.keys(activeitem)?.length">
                            <div v-for="(it, i) in menus" :key="it.id" @click="handleClick(it)"
                                :class="['sysitem', 'colflex', activeitem.id == it.id ? 'tabactive' : '', i != 1 && i != 4 && i != 7 ? 'no-left-right-border' : '', i == 3 || i == 4 || i == 5 ? 'no-top-bottom-border' : '']">
                                <div class="rowflex systop">
                                    <div class="appName">
                                        {{ it.appName }}
                                    </div>
                                    <div v-if="it.abbreviation" class="abbreviation">
                                        {{ it.abbreviation }}
                                    </div>
                                    <right-outlined style="color:#6DD400;font-size:18px" />
                                </div>
                                <div class="twoText describe">
                                    {{ it.describe }}
                                </div>
                            </div>
                        </div>
                        <div class="colflex" v-if="Object.keys(activeitem)?.length" style="overflow: hidden;">
                            <div class="itemtitle rowflex">
                                <div class="centerflex" @click="activeitem = {}">
                                    <left-outlined style="color:#6DD400;font-size:18px;margin-right: 12px;" />
                                    <div class="systile">{{ activeitem.appName }}</div>
                                </div>
                                <div class="sysdescribe oneText">{{ activeitem.describe }}</div>
                            </div>
                            <div class="scrollbar" style="flex:1;overflow-y: auto;">
                                <Systems v-if="activeitem?.menuList?.length" :datas="activeitem.menuList"></Systems>
                            </div>
                        </div>
                    </div>
                </aYinTechBorderB4>
            </div>
            <div class="box3 rowflex" style="gap: 12px;">
                <div style="flex:1;height: 100%;">
                    <aYinTechBorderB4 :config="config">
                        <panelTitleA1 :config="{ ...titleconfig }">设备开动率</panelTitleA1>
                        <div class="pad12 swh" style="padding-top: 24px;">
                            <Line :datas="runRate" :lineoptions="ratelineoptions"></Line>
                        </div>
                    </aYinTechBorderB4>
                </div>
                <div style="flex:1;height: 100%;">
                    <aYinTechBorderB3 :config="config">
                        <panelTitleA1 :config="{ ...titleconfig }">能耗使用趋势</panelTitleA1>
                        <div class="pad12 swh" style="padding-top: 34px;">
                            <Energy :datas="energy"></Energy>
                        </div>
                    </aYinTechBorderB3>
                </div>
            </div>
        </div>
        <div class="set1 colflex leftbox">
            <div class="box2">
                <aYinTechBorderB4 :config="tableconfig">
                    <panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办
                        <DigitalTransform :value="taskData?.length" dislocation :interval="500"></DigitalTransform>
                    </panelTitleA1>
                    <div class="pad12 swh" style="padding-top: 40px;">
                        <Scrolltable :dataSource="taskData" :columns="taskColumns" :colors="taskColors"></Scrolltable>
                    </div>
                </aYinTechBorderB4>
            </div>
            <div class="box3">
                <aYinTechBorderB4 :config="systemconfig">
                    <Tabsmessage></Tabsmessage>
                </aYinTechBorderB4>
            </div>
            <div class="box3">
                <aYinTechBorderA1 :config="{ ...rightConfig, title: '仓库使用趋势', titleWidth: 120 }">
                    <div class="pad12 swh" style="padding-top: 24px;">
                        <Line :datas="store" :lineoptions="storeoptions"></Line>
                    </div>
                </aYinTechBorderA1>
            </div>
        </div>
    </div>
</template>

<script setup>
import { postFetch } from "@/api/doFetch";
import Systems from "./Systems.vue";
import Line from "./Line.vue";
import Energy from "./Energy.vue";
import Produce from "./Produce.vue";
import Scrolltable from "./Scrolltable.vue";
import Devicestatus from "./Devicestatus.vue";
import Tabsmessage from "./Tabsmessage.vue";
const leftConfig = {
    backgroundColor: $c.bll9,
    decorationColor: [$c.bll3, $c.cyl5],
    borderColor: $c.bll7,
    titleWidth: 100,
    titleColor: $c.cyl5,
    decorationAlt: true,
    rotate: 'y'
},
    rightConfig = {
        backgroundColor: $c.bll9,
        decorationColor: [$c.bll3, $c.cyl5],
        borderColor: $c.bll7,
        titleWidth: 100,
        titleColor: $c.cyl5
    },
    systemconfig = {
        backgroundColor: $c.bll9,
        borderColor: $c.bll7,
        glowColor: $c.fade($c.cyl5, .3),
        decorationColor: [$c.bll3, $c.cyl5],
        decoration: false
    },
    config = {
        directionAlt: true,
        rotate: "z",
        opacity: 0.8,
        backgroundColor: $c.bll9,
        decorationColor: [$c.bll3, $c.cyl5],
        borderColor: $c.bll7,
        titleColor: $c.cyl5
    },
    tableconfig = {
        backgroundColor: $c.bll9,
        borderColor: $c.bll7,
        decoration: false
    },
    titleconfig = {
        color: $c.cyl5,
        decorationColor: $c.cyl5
    };
const state = reactive({
    menus: [],
    activeitem: {},
    runRate: {},
    energy: {},
    quality: {},
    store: {},
    produce: {},
    taskData: [],
    devicestatus: []

}),
    ratelineoptions = {
        showLegend: false,
        unit: "%",
        colors: ['#23B3F7'],
        areaStyle: [
            {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#23B3F7' // 0% 处的颜色
                    }, {
                        offset: .9, color: '#23B3F700' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        ]
    },
    qualityoptions = {
        showLegend: true,
        unit: "%",
        colors: ['#ffb6b9', '#e0f9b5', '#3d84a8'],
        legendoptions: {
            right: 20
        },
        showSymbol: true
    },
    storeoptions = {
        showLegend: true,
        colors: ['#5a92af', '#f3f798', '#fc5c9c', '#f2910a'],
        legendoptions: {
            left: 20
        },
        showSymbol: true
    },
    produceoptions = {
        showLegend: true,
        legendoptions: {
            right: 20
        }
    },
    taskColumns = [
        {
            title: '任务类型',
            dataIndex: 'taskTypeName',
            key: 'taskTypeName'
        },
        {
            title: '任务单号',
            dataIndex: 'taskNo',
            key: 'taskNo',
            search: false
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatusName',
            key: 'taskStatusName',
            search: false,
            width: 72
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 150
        },
    ],
    taskColors = {
        borderc: "rgba(165, 214, 63, 0.2)",
        thumbcolor: "rgba(72, 208, 127, 1)"
    };
const { menus, activeitem, runRate, energy, quality, store, produce, taskData, devicestatus } = toRefs(state);
let timer = null;
onMounted(() => {
    // timer = setInterval(() => {
    getData();
    // }, 1000)

});
onUnmounted(() => {
    clearInterval(timer);
})

function getData() {
    queryAppAndMenus();
    deviceRunRate();
    energyTrend();
    qualityRate();
    storeUsed();
    produceData();
    toDoTaskOrder();
    status();
}

//应用
function queryAppAndMenus() {
    postFetch({ url: "/index/queryAppAndMenus", params: {} }).then(res => {
        if (res.code == "0000") {
            menus.value = res?.data?.dataList ?? [];
        }
    })

};

//设备开动率

function deviceRunRate() {
    postFetch({ url: "/index/deviceRunRate", params: {} }).then(res => {
        if (res.code == "0000") {
            let legend = ['设备开动率'],
                xAxis = res?.data?.dataList?.map(it => it.name),
                data = res?.data?.dataList?.map(it => it.value);
            runRate.value = {
                legend,
                xAxis,
                data: [data]
            }
        }
    })
}
//用水用电
function energyTrend() {
    postFetch({ url: "/index/energyTrend", params: {} }).then(res => {
        if (res.code == "0000") {
            let legend = ['电', '水'],
                xAxis = res?.data?.dataList?.map(it => it.name),
                data = [
                    res?.data?.dataList?.map(it => it.electricity) ?? [],
                    res?.data?.dataList?.map(it => it.water) ?? [],
                ]
            energy.value = {
                legend,
                xAxis,
                data
            }
        }
    })
}

//质量合格率
function qualityRate() {
    postFetch({ url: "/index/qualityRate", params: {} }).then(res => {
        if (res.code == "0000") {
            let legend = ['首检', '过程检', '终检'],
                xAxis = res?.data?.dataList?.map(it => it.name),
                data = [
                    res?.data?.dataList?.map(it => it.first) ?? [],
                    res?.data?.dataList?.map(it => it.process) ?? [],
                    res?.data?.dataList?.map(it => it.last) ?? [],
                ]
            quality.value = {
                legend,
                xAxis,
                data
            }
        }
    })
}
//仓库使用趋势
function storeUsed() {
    postFetch({ url: "/index/storeUsed", params: {} }).then(res => {
        if (res.code == "0000") {
            let legend = ['收货', '入库', '出库', '库存'],
                xAxis = res?.data?.dataList?.map(it => it.name),
                data = [
                    res?.data?.dataList?.map(it => it.receive) ?? [],
                    res?.data?.dataList?.map(it => it.inStore) ?? [],
                    res?.data?.dataList?.map(it => it.outStore) ?? [],
                    res?.data?.dataList?.map(it => it.stock) ?? [],
                ]
            store.value = {
                legend,
                xAxis,
                data
            }
        }
    })
}

//生产数据
function produceData() {
    postFetch({ url: "/index/produceData", params: {} }).then(res => {
        if (res.code == "0000") {
            let legend = ['排程数', '实际完成数', '完成率'],
                xAxis = res?.data?.dataList?.map(it => it.name),
                data = [
                    res?.data?.dataList?.map(it => it.value) ?? [],
                    res?.data?.dataList?.map(it => it.finish) ?? [],
                    res?.data?.dataList?.map(it => it.rate) ?? []
                ]
            produce.value = {
                legend,
                xAxis,
                data
            }
        }
    })
}

//任务待办

function toDoTaskOrder() {
    postFetch({ url: "/index/toDoTaskOrder", params: {} }).then(res => {
        if (res.code == "0000") {
            taskData.value = res?.data?.dataList ?? [];
        }
    })
}

//设备状态
function status() {
    postFetch({ url: "/index/statusStatistics", params: {} }).then(res => {
        if (res.code == "0000") {
            let data = res?.data?.data ?? {};
            devicestatus.value = {
                data: [
                    {
                        name: "设备总数",
                        value: data.total
                    },
                    {
                        name: "运行",
                        value: data.run
                    },
                    {
                        name: "待机",
                        value: data.standby
                    },
                    {
                        name: "关机",
                        value: data.off
                    }
                ],
                legendData: ["设备总数", "运行", "待机", "关机"]
            }
        }
    })

}
const handleClick = (it) => {
    activeitem.value = it;
};



</script>

<style lang="less" scoped>
.mainbox {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    gap: 18px;

    .content-wrap {
        .por;
        text-align: center;
        width: 50%;

        .decoFrameA2 {
            position: relative;
            width: 60px;
            height: 60px;
            margin: 0 auto;

            .slot-wrap {
                .i {
                    font-size: 28px
                }
            }
        }

        .block-title {
            .ff("cn1");
            .fc(@cbl3);
            font-size: 16px;
            line-height: 1;

            .unit {
                display: block;
                font-size: 12px;
            }
        }

        .numbers {
            display: inline-block;
            text-align: center;
            line-height: 1;
            font-size: 28px;
            margin-top: 10px;
            .ff("en0");
            position: relative;
            vertical-align: text-top;
            .fc(@cbl3);
        }
    }

    .leftbox {
        gap: 15px;
    }

    .box1 {
        width: 100%;
        height: 100px;
    }

    .box2 {
        width: 100%;
        height: 280px;
    }

    .box3 {
        width: 100%;
        height: 300px;
    }

    .middlebox {
        width: 100%;
        height: 598px;
    }

    .pad12 {
        padding: 12px;
        overflow: hidden;
    }

    .systitle {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: rgba(25, 229, 230, 0.47);
        font-weight: 400;
        padding-bottom: 20px;
    }

    .syscontent {
        flex: 1;
        width: 100%;
        flex-wrap: wrap;

        .sysitem {
            width: 33.33%;
            height: 33.33%;
            background-color: #05192e;
            padding: 19px;
            justify-content: center;
            cursor: pointer;
            border: 1px solid rgba(151, 151, 151, 0.36);

            &.no-left-right-border {
                border-left: none;
                border-right: none;
            }

            &.no-top-bottom-border {
                border-top: none;
                border-bottom: none;
            }

            &:hover {
                background-color: #0a4c5c;

                .appName {
                    color: #19E5E6;
                    font-weight: 600;
                }

                .abbreviation {
                    color: #6099EA;
                    font-weight: 600;
                }

                .describe {
                    color: #C6D5E1;
                    ;
                }
            }

            .appName {
                font-family: PingFangSC-Regular;
                font-size: 22px;
                color: rgba(25, 229, 230, 0.80);
                font-weight: 400;
                margin-right: 12px;
            }

            .abbreviation {
                font-family: PingFangSC-Regular;
                font-size: 22px;
                color: rgba(96, 153, 234, 0.80);
                font-weight: 400;
                margin-right: 12px;
            }

            .systop {
                align-items: center;
                margin-bottom: 15px;
            }

            .describe {
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: rgba(198, 213, 225, 0.55);
                font-weight: 400;
            }
        }
    }

    .itemtitle {
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 12px;
        .systile {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #19E5E6;
            font-weight: 400;
        }

        .sysdescribe {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: rgba(198, 213, 225, 0.59);
            font-weight: 400;
            flex:1;
            text-align: right;
            margin-left: 30px;
        }
    }



    .tabcontent {
        width: 100%;
        height: 100%;
        border: 1px solid #3d668e !important;
        padding: 12px !important;
        border-radius: 8px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
</style>