<template>
    <div class="mainbox">
        <div class="set1 colflex leftbox">
            <div class="box3">
                <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }"></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="pad12 swh rowflex" style="gap:12px">
                        <div class="coltab scrollbar">
                            <div class="colflex">
                                <div :class="['tabitem', activeitem.id == it.id ? 'tabactive' : '']" v-for="it in menus"
                                    :key="it.id" @click="handleClick(it)">{{ it.appName }}
                                </div>
                            </div>
                        </div>
                        <div class="tabcontent scrollbar">
                            <Systems v-if="activeitem?.menuList?.length" :datas="activeitem.menuList"></Systems>
                        </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="box3">
                <aYinTechBorderB3 :config="tableconfig">
                    <panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办</panelTitleA1>
                    <div class="pad12 swh" style="padding-top: 40px;">
                    <Scrolltable :dataSource="taskData"  :columns="taskColumns" :colors="taskColors" ></Scrolltable>
                    </div>
                </aYinTechBorderB3>
            </div>
            <div class="box3">
                <aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3>
            </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";
const state = reactive({
    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
    },
    menus: [],
    activeitem: {},
    runRate: {},
    energy: {},
    quality: {},
    store: {},
    produce: {},
    taskData: []

});
const { leftConfig, rightConfig, systemconfig, config, tableconfig, titleconfig, menus, activeitem, runRate, energy, quality, store, produce, taskData } = toRefs(state);
let timer = null;
const 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)"
    };
onMounted(() => {
    // timer = setInterval(() => {
    getData();
    // }, 1000)

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

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

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

};

//设备开动率

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 ?? [];
        }
    })
}


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: 200px;
    }

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

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

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

    .coltab {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        width: 162px;

        .tabitem {
            display: flex;
            align-items: center;
            padding: 0 12px;
            width: 100%;
            height: 40px;
            cursor: pointer;

            &.tabactive {
                background: transparent;
                border: none;
                color: #fff;
                background-color: rgb(1, 91, 133);
            }
        }
    }

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