<template>
    <!-- <transition appear enter-active-class="animated fadeIn"> -->
    <q-card style="height:100%;width: 100%;">
        <q-card-section class="q-pa-sm" style="height:100%;width: 100%;">
            <div class="row q-col-gutter-sm" style="height:100%;width: 100%;">
                <div :class="Platform.is.android ? 'col-xl-4' : 'col-xl-4 col-lg-4 col-sm-4'" style="">
                    <!-- <div class="row"> -->
                    <!-- 设备运行状态总览 -->
                    <!-- <div class="col-xl-12 col-lg-12 col-sm-12"> -->
                    <!-- (Number(Screen.height) - 65)) + 'px' -->
                    <div ref="equipmentStateViewRef" :style="{
                        border: '1px solid #d9dadc',
                        borderRadius: '12px',
                        boxShadow: '0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f',
                        width: (Platform.is.android ? '620px' : '100%'),
                        height: (Platform.is.android ? (screenStore.CurrentAppFullscreen == true ? '980' : '930') : (Number(Screen.height) + 100)) + 'px'
                    }">
                    </div>
                    <!-- </div> -->
                    <!-- </div> -->
                </div>
                <div class="col-xl-8 col-lg-8 col-sm-8">
                    <div class="row q-col-gutter-sm">
                        <!-- 月度运行数据 -->
                        <div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
                            <div ref="equipmentRecordStateMonthTotalRef" :style="{
                                border: '1px solid #d9dadc',
                                borderRadius: '12px',
                                boxShadow: '0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f',
                                width: (Platform.is.android ? '625px' : '100%'),
                                height: (Platform.is.android ? '420' : (Number(Screen.height) / 2 + 50)) + 'px'
                            }"></div>
                        </div>
                        <!-- 月度OEE统计 -->
                        <div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
                            <div ref="equipmentRecordOEEMonthTotalRef" :style="{
                                border: '1px solid #d9dadc',
                                borderRadius: '12px',
                                boxShadow: '0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f',
                                width: (Platform.is.android ? '625px' : '100%'),
                                height: (Platform.is.android ? '420' : (Number(Screen.height) / 2 + 50)) + 'px'
                            }"></div>
                        </div>
                        <!-- 月度开炉次数统计 -->
                        <div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
                            <div ref="equipmentRecordFurnaceMonthTotalRef" :style="{
                                border: '1px solid #d9dadc',
                                borderRadius: '12px',
                                boxShadow: '0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f',
                                width: (Platform.is.android ? '600px' : '100%'),
                                height: (Platform.is.android ? '470' : (Number(Screen.height) / 2 + 50)) + 'px'
                            }">
                            </div>
                        </div>

                        <div :class="Platform.is.android ? 'col-6' : 'col-xl-6 col-lg-6 col-sm-6'">
                            <!-- <div ref="deviceRef3" style="width: 100%; height: 400px"></div> -->
                            <!-- q-col-gutter-xs -->
                            <div class="row" :style="{
                                border: '1px solid #d9dadc',
                                borderRadius: '12px',
                                boxShadow: '0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f',
                                margin: '0px',
                                width: (Platform.is.android ? '600px' : '100%'),
                                height: (Platform.is.android ? '470' : (Number(Screen.height) / 2 + 50)) + 'px'
                            }">
                                <!-- <div class="col-xl-12 col-lg-12 col-sm-12">
                                    <div :style="'width: 100%; height:' + (Number(Screen.height) / 2 - 100) + 'px'">
                                        <div class="col-xl-12 col-lg-12 col-sm-12">
                                            <div class="text-weight-bold q-pb-md" style="font-size:18px;color: #464646;">
                                                设备正常运行率
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-lg-12 col-sm-12" align="center">
                                            <q-circular-progress show-value font-size="50px" :value="66" size="270px"
                                                :thickness="0.34" color="blue" track-color="grey-3"
                                                class="q-ml-md q-mr-md q-mb-md q-mt-xs text-weight-bold">
                                                66%
                                            </q-circular-progress>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="col-xl-12 col-lg-12 col-sm-12">
                                    <div class="col-xl-12 col-lg-12 col-sm-12">
                                        <div class="text-weight-bold"
                                            style="margin-top:1px;margin-left:px;font-size:18px;color: #464646;">
                                            当前报警发生设备
                                        </div>
                                    </div>
                                    <div class="col-xl-12 col-lg-12 col-sm-12" align="center">
                                        <!-- 545 height: (Number(Screen.height) / 2 - 90) + 'px' -->
                                        <!-- :table-style="{ height: (Number(Screen.height) - 595) + 'px' }" -->
                                        <!-- <q-table class="my-sticky-header-column-table table_scroll" :rows="list"
                                                    row-key="id" separator="cell" :loading="loading" :columns="columns" flat
                                                    bordered :rows-per-page-options="[100]">
                                                    <template v-slot:body="props">
                                                        <q-tr :props="props" class="tr_hover">
                                                            <q-td style="font-size: 14px;" key="index" :props="props">{{
                                                                props.rowIndex
                                                                + 1
                                                            }}</q-td>
                                                            <q-td style="font-size: 14px;" key="equipmentName"
                                                                :props="props">{{
                                                                    props.row.equipmentName
                                                                }}</q-td>
                                                        </q-tr>
                                                    </template>
                                                </q-table> -->

                                        <table style="width: 100%; ">
                                            <thead>
                                                <tr>
                                                    <th class="text-center headerStyle" style="width:10%;">序号</th>
                                                    <th class="text-center headerStyle" style="width:40%;">设备编码</th>
                                                    <th class="text-center headerStyle" style="width:40%;">设备名称</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <vue3-seamless-scroll :list="list" :step="0.3" :hover="true" :limitScrollNum="18"
                                            class="scroll">
                                            <table style="width: 100%;">
                                                <tbody>
                                                    <tr v-for="(item, index) in list" :key="index" class="item">
                                                        <td class="text-center" style="width:10%;">{{ index + 1 }}</td>
                                                        <td class="text-center" style="width:40%;">{{ item.equipmentCode
                                                        }}</td>
                                                        <td class="text-center" style="width:40%;">{{ item.equipmentName
                                                        }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </vue3-seamless-scroll>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </q-card-section>
    </q-card>
    <!-- </transition> -->
</template>

<script setup lang="ts">
//  按需引入 echarts
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { Screen, Platform } from 'quasar';
import { equipmentRecordApi } from 'src/api/equipmentRecord/equipmentRecordApi';
// import screen1 from 'src/json/screen1.json'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; // 循环滚动
import { useScreenStore } from 'src/stores/useScreenStore'
import lodash from 'lodash'

//公共
const screenStore = useScreenStore();
const list = ref([]);

const equipmentStateViewRef = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const equipmentRecordFurnaceMonthTotalRef = ref() // 月度开炉次数统计
// const deviceRef3 = ref() // 利用率 废弃
const equipmentRecordStateMonthTotalRef = ref() // 月度时长统计
const equipmentRecordOEEMonthTotalRef = ref(); // 月度OEE统计

// 黄 红 绿
const color = ref(['#ffcb05', '#ff2e55', '#58a65b'])
let equipmentStateViewEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
let equipmentRecordStateMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
let equipmentRecordOEEMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来
let equipmentRecordFurnaceMonthTotalEcharts: any = null; // echarts实例在Vue3中不能是一个响应式对象，否则tooltip提示框会显示不出来

let equipmentStateViewTimer: NodeJS.Timer | null = null; // 设备运行状态总览
let equipmentRecordStateMonthTotalTimer: NodeJS.Timer | null = null; // 月度时长统计
let equipmentRecordOEEMonthTotalTimer: NodeJS.Timer | null = null; // 月度OEE统计
let equipmentRecordFurnaceMonthTotalTimer: NodeJS.Timer | null = null; // 月度开炉次数统计
let getEquipmentAlarmListTimer: NodeJS.Timer | null = null; // 当前报警发生设备

onMounted(() => {
    // device3();

    // 设备运行状态总览
    equipmentStateViewEcharts = echarts.init(equipmentStateViewRef.value); // 基于准备好的dom，初始化echarts实例
    EquipmentStateView();
    equipmentStateViewTimer = setInterval(() => {
        EquipmentStateView();
    }, 1000);

    // 月度时长统计
    equipmentRecordStateMonthTotalEcharts = echarts.init(equipmentRecordStateMonthTotalRef.value);// 基于准备好的dom，初始化echarts实例
    EquipmentRecordStateMonthTotal();
    equipmentRecordStateMonthTotalTimer = setInterval(() => {
        EquipmentRecordStateMonthTotal();
    }, 10000);

    // 月度OEE统计
    equipmentRecordOEEMonthTotalEcharts = echarts.init(equipmentRecordOEEMonthTotalRef.value);// 基于准备好的dom，初始化echarts实例
    EquipmentRecordOEEMonthTotal();
    equipmentRecordOEEMonthTotalTimer = setInterval(() => {
        EquipmentRecordOEEMonthTotal();
    }, 10000);

    // 月度开炉次数统计
    equipmentRecordFurnaceMonthTotalEcharts = echarts.init(equipmentRecordFurnaceMonthTotalRef.value); // 基于准备好的dom，初始化echarts实例
    EquipmentRecordFurnaceMonthTotal();
    equipmentRecordFurnaceMonthTotalTimer = setInterval(() => {
        EquipmentRecordFurnaceMonthTotal();
    }, 10000);

    // 当前报警发生设备
    getEquipmentAlarmList();
    getEquipmentAlarmListTimer = setInterval(() => {
        getEquipmentAlarmList();
    }, 1000);
})

onBeforeUnmount(() => {
    // 清理定时器要处理 timer 的类型
    clearInterval(Number(equipmentStateViewTimer))
    clearInterval(Number(equipmentRecordStateMonthTotalTimer))
    clearInterval(Number(equipmentRecordOEEMonthTotalTimer)) // 月度OEE统计
    clearInterval(Number(equipmentRecordFurnaceMonthTotalTimer))
    clearInterval(Number(getEquipmentAlarmListTimer))
})

// const loading = ref(false);
// const columns: any = ref([
//     {
//         name: 'index',
//         label: '序号',
//         field: 'index',
//         align: 'center',
//         headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:16px;',
//     },
//     {
//         name: 'equipmentName',
//         align: 'center',
//         label: '设备名称',
//         field: 'equipmentName',
//         headerClasses: 'text-h4 text-weight-bold',
//         headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:16px;',
//     },
//     // { name: 'calories', align: 'center', label: '设备类型', field: 'calories', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:16px;' },
// ])


// 当前报警发生设备
const getEquipmentAlarmList = () => {
    equipmentRecordApi.getEquipmentAlarmList().then((res: any) => {
        if (res.length > 0)
            list.value = res
    })
}

// 设备运行状态总览
const EquipmentStateView = () => {
    let All: any = [];
    let Balzers: any = [];
    let CemeCon: any = [];
    let Ionbond: any = [];

    // 获取设备总览
    equipmentRecordApi.getEquipmentStateView().then((res: any) => {
        res.forEach((item: any) => {
            if (item.equipmentType == 'All') {
                All.push(item.run, item.stop, item.alarm);
            } else if (item.equipmentType == 'Balzers') {
                Balzers.push(item.run, item.stop, item.alarm);
            }
            else if (item.equipmentType == 'CemeCon') {
                CemeCon.push(item.run, item.stop, item.alarm);
            }
            else if (item.equipmentType == 'Ionbond') {
                Ionbond.push(item.run, item.stop, item.alarm);
            }
        });


        let equipmentStateViewOption = {
            color: ['#02ad42', '#7b6a74', '#f60c0f'], //绿 灰 红色 --- 原颜色：橙 ff9800
            title: [
                {
                    text: '设备运行状态总览',
                    left: 'left'
                },
                {
                    subtext: '全部设备',
                    left: '25%',
                    top: '45%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: '#000',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                {
                    subtext: 'Balzers',
                    left: '75%',
                    top: '45%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: '#000',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                {
                    subtext: 'CemeCon',
                    left: '25%',
                    top: '90%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: '#000',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                {
                    subtext: 'Ionbond',
                    left: '75%',
                    top: '90%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: '#000',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                }
            ],
            legend: {
                right: '2%',
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params: any) {
                    let name = params.name // 名称
                    let percent = params.percent // 百分比
                    let value = params.value[params.encode.value[0]] // 当前值
                    return echarts.format.addCommas(`${name}: ${value} 台 ${percent}%`); // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
                }
            },
            dataset: {
                source: {
                    // product: ['All', 'Balzers', 'CemeCon', 'Ionbond'],
                    product: ['运行', '停机', '报警'],
                    All,
                    Balzers,
                    CemeCon,
                    Ionbond,
                    // All: [11, 21, 31],
                    // Balzers: [41, 51, 61],
                    // CemeCon: [71, 81, 91],
                    // Ionbond: [10, 11, 12]
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: '38%',
                    center: ['25%', '28%'],
                    encode: {
                        itemName: 'product',
                        value: 'All'
                    },
                    label: {
                        normal: {
                            // alignTo: 'labelLine',
                            fontSize: '16px',
                            color: '#fff',
                            show: true,
                            position: 'inside', // 在内部显示，outseide 是在外部显示
                            formatter: '{@[1]} 台'
                            // formatter: '{@[1]} 台 \n {d} %'
                            // formatter: '{@product}\n{@[1]}台\n{d}%'
                        }
                    },
                },
                {
                    type: 'pie',
                    radius: '38%',
                    center: ['75%', '28%'],
                    encode: {
                        itemName: 'product',
                        value: 'Balzers'
                    },
                    label: {
                        normal: {
                            fontSize: '16px',
                            color: '#fff',
                            show: true,
                            position: 'inside', // 在内部显示，outseide 是在外部显示
                            formatter: '{@[2]} 台'
                            // formatter: '{@[2]} 台 \n {d} %'
                        }
                    }
                },
                {
                    type: 'pie',
                    radius: '38%',
                    center: ['25%', '73%'],
                    encode: {
                        itemName: 'product',
                        value: 'CemeCon'
                    },
                    label: {
                        normal: {
                            fontSize: '16px',
                            color: '#fff',
                            show: true,
                            position: 'inside', // 在内部显示，outseide 是在外部显示
                            formatter: '{@[3]} 台'
                            // formatter: '{@[3]} 台 \n {d} %'
                        }
                    }
                },
                {
                    type: 'pie',
                    radius: '38%',
                    center: ['75%', '73%'],
                    encode: {
                        itemName: 'product',
                        value: 'Ionbond'
                    },
                    label: {
                        normal: {
                            fontSize: '16px',
                            color: '#fff',
                            show: true,
                            position: 'inside', // 在内部显示，outseide 是在外部显示
                            formatter: '{@[4]} 台'
                            // formatter: '{@[4]} 台 \n {d} %'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        equipmentStateViewEcharts.setOption(equipmentStateViewOption);
        categoryEcharts(equipmentStateViewEcharts, equipmentStateViewOption);
    });
};

// 月度时长统计
const EquipmentRecordStateMonthTotal = () => {
    let totalRunningTime: any = []; // 运行
    let totalAlarmTime: any = []; // 报警
    let totalStopTime: any = []; // 待机
    let month: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let result: Array<object> = [];

    // 获取设备记录开炉次数月统计
    equipmentRecordApi.getEquipmentRecordStateMonthTotal().then((res: any) => {

        res.forEach((item: any) => {
            result.push({ product: item.totalMonth + '月', ...item })
        })

        // month.forEach((m: any) => {
        //     res.forEach((item: any) => {
        //         // let isMonth = month.filter((m: any) => m === item.totalMonth)
        //         if (item.totalMonth == m) {
        //             totalRunningTime.push(item.totalRunningTime);
        //             totalStopTime.push(item.totalStopTime);
        //             totalAlarmTime.push(item.totalAlarmTime);
        //         }
        //         else {
        //             totalRunningTime.push(0);
        //             totalStopTime.push(0);
        //             totalAlarmTime.push(0);
        //         }
        //     })
        // })

        // 指定图表的配置项和数据
        let equipmentRecordStateMonthTotalOption = {
            title: {
                text: '月度时长统计'
            },
            // 网格
            grid: {
                x: 45,
                // y: 50,
                x2: 5,
                y2: 40,
                // width: {totalWidth} - x - x2,
                // height: {totalHeight} - y - y2,
                // backgroundColor: 'rgba(0,0,0,0)',
                // borderWidth: 1,
                // borderColor: '#ccc'
            },
            color: ['#02ad42', '#7b6a74', '#f60c0f'], //绿 灰 红色 --- 原颜色：橙 ff9800
            tooltip: {
                enable: true,
                show: true,
                trigger: 'axis',
                // axisPointer: {
                //     // type: 'cross',
                //     crossStyle: {
                //         color: '#999'
                //     }
                // },
                // formatter: function (params: any) {
                //     debugger
                //     let name = params.name // 名称
                //     let percent = params.percent // 百分比
                //     let value = params.value[params.encode.value[0]] // 当前值
                //     return echarts.format.addCommas(`${name}: ${value} 台 ${percent}%`); // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
                // }
            },
            toolbox: {
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            legend: {
                top: 1,
                right: '2%',
                data: ['运行时间', '待机时间', '报警时间']
            },
            xAxis: [
                {
                    type: 'category',
                    // data: month,
                    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '时长(小时)',
                    // position: 'left',
                    alignTicks: true,
                    // min: 0,
                    // max: 50,
                    // interval: 5,
                    boundaryGap: ['0%', '10%'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#6e7079'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: true //显示分隔线
                    }
                }
            ],
            dataset: {
                dimensions: ['product', 'totalRunningTime', 'totalAlarmTime', 'totalStopTime'],
                source: result
            },
            series: [
                {
                    name: '运行时间',
                    type: 'bar',
                    // data: totalRunningTime,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#58a65b',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 小时';
                        }
                    }
                },
                {
                    name: '待机时间',
                    type: 'bar',
                    // data: totalStopTime,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#9e9e9e',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 小时';
                        }
                    }
                },
                {
                    name: '报警时间',
                    type: 'bar',
                    // data: totalAlarmTime,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#ff9800',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 小时';
                        }
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        equipmentRecordStateMonthTotalEcharts.setOption(equipmentRecordStateMonthTotalOption);
        categoryEcharts(equipmentRecordStateMonthTotalEcharts, equipmentRecordStateMonthTotalOption);
    });
}

// 月度OEE统计
const EquipmentRecordOEEMonthTotal = () => {
    let oeeData: any = []; // 运行
    let month: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let result: Array<object> = [];

    // 获取设备记录OEE月度统计
    equipmentRecordApi.getEquipmentRecordOEEMonthTotal().then((res: any) => {
        // month.forEach((m: any) => {
        //     res.forEach((item: any) => {
        //         if (item.totalMonth == m) {
        //             oeeData.push(item.oee);
        //         }
        //         else {
        //             oeeData.push(0);
        //         }
        //     })
        // })

        res.forEach((item: any) => {
            result.push({ product: item.totalMonth + '月', ...item })
        })

        // 指定图表的配置项和数据
        let equipmentRecordOEEMonthTotalOption = {
            title: {
                text: 'OEE月度统计'
            },
            // 网格
            grid: {
                x: 45,
                // y: 50,
                x2: 5,
                y2: 40,
                // width: {totalWidth} - x - x2,
                // height: {totalHeight} - y - y2,
                // backgroundColor: 'rgba(0,0,0,0)',
                // borderWidth: 1,
                // borderColor: '#ccc'
            },
            color: ['#176bbf'],
            tooltip: {
                enable: true,
                show: true,
                trigger: 'axis',
                // axisPointer: {
                //     // type: 'cross',
                //     crossStyle: {
                //         color: '#999'
                //     }
                // },
                // formatter: function (params: any) {
                //     debugger
                //     let name = params.name // 名称
                //     let percent = params.percent // 百分比
                //     let value = params.value[params.encode.value[0]] // 当前值
                //     return echarts.format.addCommas(`${name}: ${value} 台 ${percent}%`); // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
                // }
            },
            toolbox: {
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            legend: {
                top: 1,
                right: '2%',
                data: ['OEE数据']
            },
            dataset: {
                dimensions: ['product', 'oee'],
                source: result
            },
            xAxis: [
                {
                    type: 'category',
                    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    // axisPointer: {
                    //     type: 'shadow'
                    // }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: 'OEE data',
                    // position: 'left',
                    alignTicks: true,
                    // min: 0,
                    // max: 50,
                    // interval: 5,
                    boundaryGap: ['0%', '10%'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#6e7079'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: true //显示分隔线
                    }
                }
            ],
            series: [
                {
                    name: 'OEE数据',
                    type: 'line',
                    // data: oeeData,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#176bbf',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    areaStyle: { // 区域填充样式
                        color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#176bbf', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#5398dd' // 100% 处的颜色
                                }
                            ],
                            global: false, // 缺省为 false
                        }
                    },
                    xAxisIndex: 0,
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' %';
                        }
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        equipmentRecordOEEMonthTotalEcharts.setOption(equipmentRecordOEEMonthTotalOption);
        categoryEcharts(equipmentRecordOEEMonthTotalEcharts, equipmentRecordOEEMonthTotalOption);
    });
}

// 月度开炉次数统计
const EquipmentRecordFurnaceMonthTotal = () => {
    let Balzers: any = [];
    let CemeCon: any = [];
    let Ionbond: any = [];
    let month: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let result: Array<object> = [];

    // 获取设备记录开炉次数月统计
    equipmentRecordApi.getEquipmentRecordFurnaceMonthTotal().then((res: any) => {
        // month.forEach((m: any) => {
        //     res.forEach((item: any) => {
        //         if (item.totalMonth == m) {
        //             if (item.equipmentType == 'Balzers') {
        //                 Balzers.push(item.furnaceNum);
        //             }
        //             if (item.equipmentType == 'CemeCon') {
        //                 CemeCon.push(item.furnaceNum);
        //             }
        //             if (item.equipmentType == 'Ionbond') {
        //                 Ionbond.push(item.furnaceNum);
        //             }
        //         } else {
        //             if (item.equipmentType == 'Balzers') {
        //                 Balzers.push(0);
        //             }
        //             if (item.equipmentType == 'CemeCon') {
        //                 CemeCon.push(0);
        //             }
        //             if (item.equipmentType == 'Ionbond') {
        //                 Ionbond.push(0);
        //             }
        //         }
        //     })
        // })

        // let grouped_data = lodash.groupBy(res, 'totalMonth');
        // console.log(grouped_data);

        var obj = {}, newArr = [];
        res.forEach(function (item, suffix) {
            //根据对象的属性是唯一的，将值作为对象的属性名
            if (!obj[item.totalMonth]) {
                var arr = [];
                arr.push(item);
                newArr.push(arr);
                obj[item.totalMonth] = item;
            } else {
                newArr.forEach(function (value, index) {
                    //如果已经存在  就循环新组的值将值插入属性相同的数组里   为了防止重复添加   只要和第一个比较就可以了
                    if (value[0].totalMonth == item.totalMonth) {
                        value.push(item)
                    }
                })
            }
        })

        newArr.forEach((item: any) => {
            let CemeCon = item.filter(c => {
                return c.equipmentType == 'CemeCon'
            })
            let Balzers = item.filter(b => { return b.equipmentType == 'Balzers' })
            let Ionbond = item.filter(i => { return i.equipmentType == 'Ionbond' })
            result.push({
                product: item[0].totalMonth + '月',
                CemeCon: CemeCon[0].furnaceNum,
                Balzers: Balzers[0].furnaceNum,
                Ionbond: Ionbond[0].furnaceNum,
            })
        })

        // 指定图表的配置项和数据
        var option = {
            color: ['#1976d2', '#e91e63', '#9c27b0'],//color.value,
            title: {
                text: '月度开炉次数统计',
                // subtext: '数据来自网络'
            },
            tooltip: {
                // trigger: 'item',
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                // formatter: '{a0} \n{b}：{c} 台'
                // formatter: '{b0}：<br />{a0}：{c0}<br />{a1}：{c1}<br />{a2}：{c2}<br />'
            },
            legend: {
                // left: 0,
                right: '2%',
                top: 1,
                data: ['Balzers', 'CemeCon', 'Ionbond']
            },
            // grid: {
            //     top: '5%',
            //     left: '1%',
            //     right: '1%',
            //     bottom: '2%',
            //     containLabel: true
            // },
            // 网格
            grid: {
                x: 45,
                // y: 50,
                x2: 5,
                y2: 40,
                // width: {totalWidth} - x - x2,
                // height: {totalHeight} - y - y2,
                // backgroundColor: 'rgba(0,0,0,0)',
                // borderWidth: 1,
                // borderColor: '#ccc'
            },
            xAxis: {
                type: 'category',
                // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6e7079'
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                splitLine: {
                    show: false //隐藏分隔线
                }
            },
            yAxis: {
                type: 'value',
                name: '次数',
                // min: 0,
                // max: 50,
                // interval: 5,
                boundaryGap: ['0%', '10%'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6e7079'
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                splitLine: {
                    show: true //显示分隔线
                }
            },
            dataset: {
                dimensions: ['product', 'Balzers', 'CemeCon', 'Ionbond'],
                source: result
            },
            series: [
                {
                    name: 'Balzers',
                    type: 'bar',
                    // data: Balzers,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#000',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 次';
                        }
                    }
                },
                {
                    name: 'CemeCon',
                    type: 'bar',
                    // data: CemeCon,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#000',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 次';
                        }
                    }
                },
                {
                    name: 'Ionbond',
                    type: 'bar',
                    // data: Ionbond,
                    itemStyle: {
                        normal: {
                            label: {
                                color: '#000',
                                position: 'top', //在上方显示
                                show: true // 在折线拐点上显示数据
                            },
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value + ' 次';
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        equipmentRecordFurnaceMonthTotalEcharts.setOption(option);
        categoryEcharts(equipmentRecordFurnaceMonthTotalEcharts, option);
    });
};

// const device3 = () => {
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(deviceRef3.value);
//     // 指定图表的配置项和数据
//     var option = {
//         color: color.value,
//         tooltip: {
//             //提示框浮层属性
//             show: true,
//             transitionDuration: 0.8,
//             formatter: '{c}%', //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
//         },
//         legend: {
//             orient: 'vertical',
//             left: 10,
//             data: ['设备正常使用率']
//         },
//         title: {
//             text: '70%',
//             left: 'center',
//             top: '36%',
//             textStyle: {
//                 color: '#031f2d',
//                 fontSize: '35px',
//                 align: 'center'
//             }
//         },
//         series: [
//             {
//                 name: '设备正常使用率',
//                 hoverAnimation: false,
//                 type: 'pie',
//                 avoidLabelOverlap: false,
//                 // label: {
//                 //     show: true,
//                 //     position: 'center',
//                 //     normal: {
//                 //         show: true,
//                 //         position: 'center',
//                 //         color: '#4c4a4a',
//                 //         fontsize: '50px',
//                 //         formatter: '70%',
//                 //     },
//                 // },
//                 emphasis: {
//                     label: {
//                         show: true,
//                         fontSize: '24',
//                         fontWeight: 'bold'
//                     }
//                 },
//                 labelLine: {
//                     show: false
//                 },
//                 isLabel: false,
//                 legend: { show: false },
//                 center: ['50%', '40%'],
//                 radius: ['40%', '70%'],
//                 color: {
//                     type: 'linear',
//                     x: 0,
//                     y: 0,
//                     x2: 0,
//                     y2: 1,
//                     colorStops: [
//                         {
//                             offset: 0,
//                             color: '#1285ff', // 0% 处的颜色
//                         },
//                         {
//                             offset: 1,
//                             color: '#277ae1', // 100% 处的颜色
//                         },
//                     ],
//                     global: false, // 缺省为 false
//                 },
//                 data: [
//                     {
//                         value: 70, // 原始数据不做展示
//                     },
//                     {
//                         value: 100 - 70, // 处理后的数据
//                         tooltip: {
//                             show: false,
//                         },
//                         itemStyle: {
//                             normal: {
//                                 color: '#e8e8e8',
//                                 // color: 'rgba(255,255,255,0.3)',
//                             },
//                         },
//                     }
//                 ]
//             }
//         ]
//     };
//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function () {
//         myChart.resize();
//     });
// };


// 滚动页面 重新设置图表大小
const categoryEcharts = (ele: any, option: any) => {
    var element = ele;
    // var element = echarts.init(ele);
    element.setOption(option);
    window.addEventListener('resize', function () {
        element.resize();
    })
}

</script>
<style scoped>
/* .tr_hover {
    background: #aaaaaa;
  } */

.tr_hover:hover {
    background: #e8e8e8;
}

.click-hover {
    cursor: pointer;
    color: #1976d2;
}

.click-hover:hover {
    color: #2196f3;
    /* background-color: yellow; */
}


.headerStyle {
    /* background-color: #5186ec; */
    background-color: #fdba35;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.scroll {
    height: 430px;
    width: 100%;
    /* margin: 10px auto; */
    overflow: hidden;
}

.scroll .item {
    width: 100%;
    /* display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0; */
}
</style>