maintenance_system/src/views/securitySurveillance/components/spgl.vue

<template>
    <el-card style="border-radius: 15px;">
        <div class="title-box">
            视频管理
        </div>
        <el-row class="cunchu">
            <el-col>
                <div class="subtitle">存储状态</div>
            </el-col>
            <el-col style="position: relative;">
                <div ref="chartRef" style="height: 220px;width: 100%;"></div>
                <div class="text">别担心，还有很多存储空间</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="lxcc">
                <div class="top">
                    <div class="subtitle">录像存储设置</div>
                    <div class="edit">编辑</div>
                </div>
                <div class="content">
                    <div class="item">
                        <div class="title">
                            存储模式
                        </div>
                        <div class="text">
                            循环覆盖
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            保留天数
                        </div>
                        <div class="text">
                            30天
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            录像质量
                        </div>
                        <div class="text">
                            高清（1080P）
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            备份记录
                        </div>
                        <div class="text">
                            开启
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            备份时间
                        </div>
                        <div class="text">
                            每日02:00
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-row>
                    <el-col>
                        <div class="subtitle">历史视频查询</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-select placeholder="全部摄像头">
                        </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" style="width: 100%;"
                            start-placeholder="开始" end-placeholder="结束" :size="size" />
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary">搜索</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col>
                <el-row>
                    <el-table :data="data" height="200px" max-height="200px">
                        <el-table-column label="摄像头" prop="name" width="100">
                        </el-table-column>
                        <el-table-column label="日期" prop="date" width="120">
                        </el-table-column>
                        <el-table-column label="时长" prop="duration">
                        </el-table-column>
                        <el-table-column label="大小" prop="size">
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="100">
                            <template #default="scope">
                                <div class="svg-icon">
                                    <img src="/assets/svg/play.svg" alt="">
                                    <img src="/assets/svg/download.svg" alt="">
                                    <img src="/assets/svg/delete.svg" alt=""></img>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination" v-if="activeTab !== 'record'">
                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                            @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                    </div>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>
<style scoped lang="scss">
.title-box {
    font-family: "Alibaba-PuHuiTi-Bold";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(0, 30, 59, 1);
    text-align: left;
    vertical-align: top;
}

.subtitle {
    font-size: 16px;
    color: #001E3B;
    position: relative;
    margin: 10px 0;

    :v-deep::before {
        position: absolute;
        width: 5px;
        height: 5px;
        content: '';
        border-radius: 50%;
        background-color: rgba(24, 109, 245, 1);
        top: 50%;
        left: -8px;
        transform: translateY(-50%);
    }
}

.cunchu {
    .text {
        position: absolute;
        bottom: 60px;
        width: 100%;
        color: rgba(113, 128, 150, 1);
        font-size: 14px;
        text-align: center;
    }
}

.lxcc {
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .edit {
            color: rgba(0, 30, 59, 1);
            font-size: 14px;
            cursor: pointer;
        }
    }

    .content {
        background-color: #F2F8FC;
        border-radius: 10px;

        .item {
            display: flex;
            border-bottom: 1px solid #E3EDFF;
            padding: 10px 0;
            text-align: center;
        }

        .title {
            width: 50%;
        }

        .text {
            width: 50%;
        }
    }
}

.svg-icon {
    display: flex;
    justify-content: space-around;

    img {
        width: 15px;
        height: 15px;
        display: block;
        cursor: pointer;
    }
}
</style>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let myChart = null;
const pageSize = ref(20);
const totalRecords = ref(100);
const initChart = () => {
    myChart = echarts.init(chartRef.value);
    var option = {
        // 调整图表整体位置，向上移动以减少底部空白
        // 添加首尾单位标识
        graphic: [
            // 起始单位 (0TB)
            {
                type: 'text',
                left: '24%',
                top: '50%',  // 上移文本位置
                style: {
                    text: '0TB',
                    fontSize: 14,
                    color: '#666'
                }
            },
            // 结束单位 (10TB)
            {
                type: 'text',
                right: '24%',
                top: '50%',  // 上移文本位置
                style: {
                    text: '10TB',
                    fontSize: 14,
                    color: '#666'
                }
            },
            // 中间显示当前值和百分比（换行显示）
            {
                type: 'text',
                left: 'center',
                top: '40%',  // 调整到48%位置
                style: {
                    text: '6.68TB\n48%',
                    fontSize: 18,
                    fontWeight: 'bold',
                    textAlign: 'center',
                    lineHeight: 20  // 增加行高以确保换行效果
                }
            }
        ],
        series: [
            {
                type: 'gauge',
                radius: '85%',  // 适当减小半径
                center: ['50%', '50%'],  // 上移图表中心位置
                startAngle: 170, // 开始角度（左侧）
                endAngle: 10, // 结束角度（右侧）
                max: 10, // 最大值设置为10TB
                axisLine: {
                    lineStyle: {
                        width: 40, // 保持条的粗细
                        color: [
                            [0.67, '#4863FF'], // 当前值6.7TB对应67%
                            [1, '#E5E7EB'] // 未用部分颜色
                        ]
                    }
                },
                // 隐藏所有刻度相关元素
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                // 隐藏指针
                pointer: {
                    show: false
                },
                // 隐藏默认详情
                detail: {
                    show: false
                },
                // 当前值（6.7TB）
                data: [{ value: 6.7 }]
            }
        ]
    };
    myChart.setOption(option);
};

// 监听窗口大小变化，重新绘制图表
const handleResize = () => {
    if (myChart) {
        myChart.resize();
    }
};
const data = computed(() => {
    return Array.from({ length: 10 }, (_, i) => ({
        name: `摄像头${i + 1}`,
        date: '25.03.12-10:00',
        duration: '4小时',
        size: '2.4GB'
    }));
});
onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
</script>