5G-Loading-Bay-Web/src/views/dashboard/DataOverview.vue

<template>
    <div class="data-overview-wrap">
        <!-- 检测总量汇总 -->
        <div class="grid-container">
            <div class="grid-item">
                <div class="module-header">
                    <ContentHeader bgLayout="918">
                        <template #title>
                            <div class="w-[200px] bg_title bg_title_0">
                            </div>
                        </template>
                        <template #extra>
                            <div></div>
                        </template>
                    </ContentHeader>
                </div>
                <div class="chart-container" id="totalChart"></div>
            </div>
            <!-- 设备信息 -->
            <div class="grid-item">
                <div class="module-header">
                    <ContentHeader bgLayout="918">
                        <template #title>
                            <div class="w-[200px] bg_title bg_title_1">
                            </div>
                        </template>
                        <template #extra>
                            <div></div>
                        </template>
                    </ContentHeader>
                </div>
                <div class="device-info">
                    <div class="total-device">
                        <div class="device-icon"></div>
                        <div class="device-count">
                            <div>设备总数</div>
                            <div class="count-number">37</div>
                        </div>
                    </div>
                    <div class="device-list">
                        <div class="device-card">
                            <div>车体检测设备: 12</div>
                            <div class="status-bar">
                                <el-progress type="line" :percentage="(8 / 12) * 100" status="success"></el-progress>
                                <el-progress type="line" :percentage="(2 / 12) * 100" status="warning"></el-progress>
                                <el-progress type="line" :percentage="(2 / 12) * 100" status="danger"></el-progress>
                            </div>
                        </div>
                        <div class="device-card">
                            <div>撑杆检测设备: 10</div>
                            <div class="status-bar">
                                <el-progress type="line" :percentage="(9 / 10) * 100" status="success"></el-progress>
                                <el-progress type="line" :percentage="(1 / 10) * 100" status="warning"></el-progress>
                                <el-progress type="line" :percentage="(0 / 10) * 100" status="danger"></el-progress>
                            </div>
                        </div>
                        <div class="device-card">
                            <div>钩机检测设备: 15</div>
                            <div class="status-bar">
                                <el-progress type="line" :percentage="(8 / 15) * 100" status="success"></el-progress>
                                <el-progress type="line" :percentage="(2 / 15) * 100" status="warning"></el-progress>
                                <el-progress type="line" :percentage="(2 / 15) * 100" status="danger"></el-progress>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中部检测模块 -->
        <div class="grid-container">
            <ul class="flex grid-item">
                <li>
                    <div class="module-header">
                        <ContentHeader bgLayout="450">
                            <template #title>
                                <div class="w-[200px] bg_title bg_title_2">
                                </div>
                            </template>
                            <template #extra>
                                <div>

                                </div>
                            </template>
                        </ContentHeader>
                    </div>
                    <div class="chart-container" id="bodyChart"></div>
                </li>
                <li>
                    <div class="module-header">
                        <ContentHeader bgLayout="450">
                            <template #title>
                                <div class="w-[200px] bg_title bg_title_3">
                                </div>
                            </template>
                            <template #extra>
                            </template>
                        </ContentHeader>
                    </div>
                    <div class="chart-container" id="poleChart"></div>

                </li>

            </ul>

            <div class="grid-item">
                <div class="module-header">
                    <ContentHeader bgLayout="918">
                        <template #title>
                            <div class="w-[200px] bg_title bg_title_4">
                            </div>
                        </template>
                        <template #extra>
                            <div></div>
                        </template>
                    </ContentHeader>
                </div>
                <div class="monitor-images">
                    <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
                    <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
                </div>
            </div>
        </div>


    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import ContentHeader from '@/components/ContentHeader.vue';

onMounted(() => {
    // 初始化检测总量汇总图表
    const totalChart = echarts.init(document.getElementById('totalChart') as HTMLDivElement);
    totalChart.setOption({
        xAxis: {
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {},
        series: [
            {
                name: '车体检测',
                type: 'bar',
                data: [200, 200, 150, 150, 120, 220]
            },
            {
                name: '撑杆检测',
                type: 'bar',
                data: [80, 150, 80, 100, 180, 80]
            }
        ]
    });

    // 初始化车体检测图表
    const bodyChart = echarts.init(document.getElementById('bodyChart') as HTMLDivElement);
    bodyChart.setOption({
        series: [
            {
                name: '车体检测',
                type: 'pie',
                radius: '70%',
                data: [
                    { value: 26, name: '搭扣未搭' },
                    { value: 35, name: '下侧门缺失' },
                    { value: 15, name: '小门搭扣丢失' },
                    { value: 15, name: '门折页脱落' },
                    { value: 10, name: '小门外翘' },
                    { value: 5, name: '小窗裂纹' }
                ]
            }
        ]
    });

    // 初始化撑杆检测图表
    const poleChart = echarts.init(document.getElementById('poleChart') as HTMLDivElement);
    poleChart.setOption({
        series: [
            {
                name: '撑杆检测',
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: 65, name: '撑杆断裂' },
                    { value: 35, name: '撑杆弯曲' }
                ]
            }
        ]
    });
});
</script>

<style scoped lang="scss">
@import url('./DataOverview.scss');
</style>