<template>
    <div :class="`bigScreen ${screenStatus ? 'full' : ''}`">
        <div style="margin: 20px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-0') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.deviceCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show01.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-1') }}
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOnlineCount }}
                            </div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-2') }}
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOfflineCount }}
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-21') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.productCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show02.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-22') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.productOfflineCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-23') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.productOnlineCount }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-6') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.alertCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart1" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-7') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertProcessedCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-8') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertNotProcessedCount }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-24') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.thingsModelCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart2" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-25') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.thingsModelFunction }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-26') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.thingsModelProperty }}</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-card class="line-chart" shadow="never">
            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getList">
                    <el-radio-button label="1">{{ $t('index.index.20250324-14') }}</el-radio-button>
                    <el-radio-button label="2">{{ $t('index.index.20250324-15') }}</el-radio-button>
                    <el-radio-button label="3">{{ $t('index.index.20250324-16') }}</el-radio-button>
                </el-radio-group>
            </div>
            <p style="margin-top: -2px; font-size: 18px; color: #000; box-sizing: border-box">
                {{ $t('index.alert.20250324-3') }}</p>
            <div class="line-chart chart-outer" ref="lineChart" style="width: 100%; height: 270px"></div>
        </el-card>
        <el-card class="bar-chart" shadow="never">
            <div ref="statsChart" class="chart-outer" style="width: 100%; height: 250px"></div>
        </el-card>
        <div style="width: 100%; text-align: center; font-size: 14px; color: #666; line-height: 32px; margin-top: 50px">
            <span>
                Copyright © 2024
                <a href="https://iot.yanfankeji.com/" target="_blank">Yanfan</a>
                |
                <a href="https://iot.yanfankeji.com/" target="_blank">{{ $t('index.index.20250324-28') }}</a>
                | Apache License
            </span>
            <br />
            <span>
                {{ $t('index.index.20250324-29') }}
                <a href="http://doc.yanfankeji.com/" target="_blank">https://doc.yanfankeji.com/</a>
            </span>
        </div>
    </div>
</template>

<script>
import { getOperationsituation } from '@/views/maintain/api/maintain/device';
import { getdeviceBoardList } from '@/api/iot/device';
import { getNettyMqttStats } from '@/api/iot/netty';
import * as echarts from 'echarts';
import { listAlertLogEchartsiot } from "@/api/iot/alertLog";
export default {
    name: 'index',
    data() {
        return {
            screenStatus: false,
            lineType: '1',
            barType: '1',
            lineResouce: {},
            barResouce: {},
            line_chart: null,
            bar_chart: null,
            card_chart1: null,
            card_chart2: null,
            deviceStatistic: {},
            colorList: ['#0147EB', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            stats: {},
            xAxislist: [],
            datalist: []
        };
    },
    created() {
        this.getdeviceBoardList();
        this.getMqttStats();
    },
    methods: {
        drawCardChart1() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart1 = echarts.init(this.$refs['card-chart1']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart1.setOption(option);
        },
        drawCardChart2() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart2 = echarts.init(this.$refs['card-chart2']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(0, 201, 159, 0.4)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart2.setOption(option);
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            let xAxis = [];
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '50',
                    bottom: '20',
                    top: '20%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxislist,
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitNumber: 2,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                series: [
                    {
                        name: this.$t('index.index.20250324-27'),
                        type: 'line',
                        smooth: true,
                        data: this.datalist ? this.datalist : [],
                    }
                ],
            };
            this.line_chart.setOption(option);
        },
        /** 查询设备统计信息 */
        getdeviceBoardList() {
            getdeviceBoardList().then((response) => {
                this.deviceStatistic = response.data[0];
                console.log(this.deviceStatistic)
                console.log(response)
            });
        },
        /** 查询mqtt状态数据*/
        getMqttStats() {
            getNettyMqttStats().then((response) => {
                this.stats = response.data;
                this.drawStats();
            });
        },
        /** 绘制mqtt状态统计 */
        drawStats() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.statsChart);
            var option;

            option = {
                title: {
                    text: this.$t('netty.mqtt.564432-12'),
                    textStyle: {
                        fontSize: 18,
                        color: '#000',
                        fontWeight: 800,
                    },
                },
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitNumber: 2,
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    data: [this.$t('netty.mqtt.564432-13'), this.$t('netty.mqtt.564432-14'), this.$t('netty.mqtt.564432-15'), this.$t('netty.mqtt.564432-16'), this.$t('netty.mqtt.564432-17')],
                },
                series: [
                    {
                        name: this.$t('netty.mqtt.564432-18'),
                        type: 'bar',
                        data: [this.stats['connection_count'], this.stats['session_count'], this.stats['subscription_count'], this.stats['retain_count'], this.stats['retain_count']],
                        itemStyle: {
                            color: '#67C23A',
                        },
                        smooth: true,
                    },
                    {
                        name: this.$t('netty.mqtt.564432-19'),
                        type: 'bar',
                        data: [this.stats['connection_total'], this.stats['session_total'], this.stats['subscription_total'], this.stats['retain_total'], this.stats['retain_total']],
                        itemStyle: {
                            color: '#409EFF',
                        },
                        smooth: true,
                    },
                ],
            };

            option && myChart.setOption(option);
        },
        getList(type) {
            let types = type != null ? type : this.lineType;
            let StartDate;
            let endDate;
            if (types === '1') {
                // 获取今天的日期，格式为 yyyy-mm-dd
                StartDate = new Date().toISOString().split('T')[0];
                endDate = StartDate; // 如果需要，可以设置相同的结束日期
            } else if (types === '2') {
                // 获取这{{ $t('index.index.20250324-9') }}月的第一天，格式为 yyyy-mm
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth() + 1; // getMonth() 返回的月份从0开始，所以需要+1
                StartDate = `${year}-${month < 10 ? '0' + month : month}`;
                StartDate = StartDate + '-01'
                endDate = `${year}-${month < 10 ? '0' + month : month}-${new Date(year, month, 0).getDate()}`; // 获取这{{ $t('index.index.20250324-9') }}月的最后一天
            } else if (types === "3") {
                // 获取今天的年份，格式为 yyyy
                const now = new Date();
                StartDate = now.getFullYear().toString();
                endDate = StartDate; // 如果需要，可以设置相同的结束日期
            }
            const data = {
                StartDate: StartDate,
                endDate: endDate,
                dateType: type != null ? type : this.lineType,
            }
            listAlertLogEchartsiot(data).then(rp => {
                this.xAxislist = [];
                rp.hours.forEach(element => {
                    if (element.indexOf("时") > -1) {
                        this.xAxislist.push(element.replace("时", this.$t('index.index.20250324-20')));
                    } else if (element.indexOf("日") > -1) {
                        this.xAxislist.push(element.replace("日", this.$t('index.index.20250324-14')));
                    } else if (element.indexOf("月") > -1) {
                        this.xAxislist.push(element.replace("月", this.$t('index.index.20250324-15')));
                    } else {
                        this.xAxislist.push(element);
                    }
                });
                this.datalist = rp.counts
                this.drawLine();
            })
        },
    },
    mounted() {
        this.getList();
        this.drawCardChart1();
        this.drawCardChart2();
    },
};
</script>

<style lang="scss">
@import '../bigScreen/index.scss';

.el-card {
    border: 0px;

    .chart-outer {
        &>div:nth-child(1) {
            width: 100% !important;

            &>canvas {
                width: 100% !important;
            }
        }
    }
}
</style>
