首页 > 其他分享 >如何构建一个现代化的AI数据洞察平台“ “Vue.js 和 ECharts 结合：打造数据可视化大屏“ “AI模型监控与数据分析系统的设计与实现“ “从零开始：使用 Vue.js 构建AI数据洞

如何构建一个现代化的AI数据洞察平台“ “Vue.js 和 ECharts 结合：打造数据可视化大屏“ “AI模型监控与数据分析系统的设计与实现“ “从零开始：使用 Vue.js 构建AI数据洞

时间：2025-01-03 17:34:37浏览次数：9  
标签：Vue rgba AI js color background 10px border 255

效果图：

在这里插入图片描述
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AI数据洞察平台</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #030B14;
            color: #B4C9E4;
            font-family: 'Space Mono', monospace;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(28, 99, 242, 0.15) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(242, 28, 196, 0.15) 0%, transparent 20%);
        }

        .layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            min-height: 100vh;
        }

        .sidebar {
            background: rgba(20, 29, 47, 0.8);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .main-content {
            padding: 30px;
            overflow-y: auto;
        }

        .header {
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(20, 29, 47, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo-text {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(45deg, #1C63F2, #F21CC4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-item {
            padding: 15px;
            margin: 10px 0;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(28, 99, 242, 0.1);
            color: #1C63F2;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: rgba(20, 29, 47, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #1C63F2, #F21CC4);
            opacity: 0.5;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .stat-item {
            background: rgba(28, 99, 242, 0.1);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #1C63F2;
            margin: 5px 0;
        }

        .stat-label {
            font-size: 14px;
            color: #B4C9E4;
        }

        .chart {
            height: 300px;
        }

        .model-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .model-card {
            background: rgba(28, 99, 242, 0.1);
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .model-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(28, 99, 242, 0.2);
        }

        .model-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .model-status {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
        }

        .status-active {
            background: rgba(46, 213, 115, 0.2);
            color: #2ed573;
        }

        .status-training {
            background: rgba(255, 171, 0, 0.2);
            color: #ffab00;
        }

        .model-metrics {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .metric-item {
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            text-align: center;
        }

        .metric-value {
            font-size: 18px;
            font-weight: bold;
            color: #1C63F2;
        }

        .metric-label {
            font-size: 12px;
            color: #B4C9E4;
        }

        .logs-container {
            height: 300px;
            overflow-y: auto;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .log-entry {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .log-timestamp {
            color: #1C63F2;
            margin-right: 10px;
        }

        .log-level {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            margin-right: 10px;
            font-size: 12px;
        }

        .level-info {
            background: rgba(28, 99, 242, 0.2);
            color: #1C63F2;
        }

        .level-warning {
            background: rgba(255, 171, 0, 0.2);
            color: #ffab00;
        }

        .level-error {
            background: rgba(242, 28, 28, 0.2);
            color: #f21c1c;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-value {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, #1C63F2, #F21CC4);
            transition: width 0.3s ease;
        }

        .search-bar {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: #fff;
            outline: none;
            width: 300px;
            transition: all 0.3s;
        }

        .search-bar:focus {
            border-color: #1C63F2;
            box-shadow: 0 0 10px rgba(28, 99, 242, 0.2);
        }

        .filter-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .filter-button {
            padding: 8px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 8px;
            color: #B4C9E4;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-button.active {
            background: #1C63F2;
            color: #fff;
        }

        .insights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .insight-card {
            background: rgba(28, 99, 242, 0.1);
            border-radius: 10px;
            padding: 20px;
        }

        .insight-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .insight-icon {
            width: 40px;
            height: 40px;
            background: rgba(28, 99, 242, 0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .insight-value {
            font-size: 24px;
            font-weight: bold;
            color: #1C63F2;
            margin: 10px 0;
        }

        .insight-trend {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }

        .trend-up {
            color: #2ed573;
        }

        .trend-down {
            color: #f21c1c;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <img src="https://via.placeholder.com/40x40?text=AI" alt="Logo">
                    <span class="logo-text">AI洞察</span>
                </div>
                <nav>
                    <div v-for="(item, index) in menuItems"
                         :key="index"
                         :class="['nav-item', { active: currentMenu === item.name }]"
                         @click="currentMenu = item.name">
                        <img :src="item.icon" 
                             style="width: 24px; height: 24px;"
                             :alt="item.name">
                        {{ item.name }}
                    </div>
                </nav>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content">
                <!-- 顶部搜索栏 -->
                <header class="header">
                    <input type="text" 
                           class="search-bar"
                           placeholder="搜索模型、数据集或分析...">
                    <div style="display: flex; gap: 20px; align-items: center;">
                        <img src="https://via.placeholder.com/32x32?text=N" 
                             alt="Notifications"
                             style="cursor: pointer;">
                        <img src="https://via.placeholder.com/32x32?text=U" 
                             alt="User"
                             style="border-radius: 8px;">
                    </div>
                </header>

                <!-- 数据概览 -->
                <div class="grid">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">模型性能</div>
                        </div>
                        <div class="stat-grid">
                            <div class="stat-item">
                                <div class="stat-value">{{ modelStats.accuracy }}%</div>
                                <div class="stat-label">准确率</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">{{ modelStats.requests }}k</div>
                                <div class="stat-label">调用次数</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">{{ modelStats.latency }}ms</div>
                                <div class="stat-label">平均延迟</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">{{ modelStats.success }}%</div>
                                <div class="stat-label">成功率</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">调用趋势</div>
                        </div>
                        <div ref="requestsChart" class="chart"></div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">资源使用</div>
                        </div>
                        <div ref="resourceChart" class="chart"></div>
                    </div>
                </div>

                <!-- 模型列表 -->
                <div class="card">
					                    <div class="card-header">
                        <div class="card-title">模型列表</div>
                        <div class="filter-buttons">
                            <button v-for="(filter, index) in filters"
                                    :key="index"
                                    :class="['filter-button', { active: currentFilter === filter }]"
                                    @click="currentFilter = filter">
                                {{ filter }}
                            </button>
                        </div>
                    </div>
                    <div class="model-grid">
                        <div v-for="(model, index) in filteredModels"
                             :key="index"
                             class="model-card">
                            <div class="model-header">
                                <div class="model-name">{{ model.name }}</div>
                                <div :class="['model-status', `status-${model.status}`]">
                                    {{ model.statusText }}
                                </div>
                            </div>
                            <div class="model-metrics">
                                <div class="metric-item">
                                    <div class="metric-value">{{ model.accuracy }}%</div>
                                    <div class="metric-label">准确率</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-value">{{ model.latency }}ms</div>
                                    <div class="metric-label">延迟</div>
                                </div>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-value"
                                     :style="{ width: model.progress + '%' }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时日志 -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">实时日志</div>
                    </div>
                    <div class="logs-container">
                        <div v-for="(log, index) in logs"
                             :key="index"
                             class="log-entry">
                            <span class="log-timestamp">{{ log.timestamp }}</span>
                            <span :class="['log-level', `level-${log.level}`]">
                                {{ log.level }}
                            </span>
                            <span class="log-message">{{ log.message }}</span>
                        </div>
                    </div>
                </div>

                <!-- 数据洞察 -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">数据洞察</div>
                    </div>
                    <div class="insights-grid">
                        <div v-for="(insight, index) in insights"
                             :key="index"
                             class="insight-card">
                            <div class="insight-header">
                                <div class="insight-icon">
                                    <img :src="insight.icon" 
                                         style="width: 24px; height: 24px;"
                                         :alt="insight.title">
                                </div>
                                <div class="insight-title">{{ insight.title }}</div>
                            </div>
                            <div class="insight-value">{{ insight.value }}</div>
                            <div class="insight-trend">
                                <span v-if="insight.trend === 'up'" class="trend-up">▲</span>
                                <span v-else class="trend-down">▼</span>
                                <span>{{ insight.trendValue }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentMenu: '概览',
                menuItems: [
                    { name: '概览', icon: 'https://via.placeholder.com/24x24?text=D' },
                    { name: '模型', icon: 'https://via.placeholder.com/24x24?text=M' },
                    { name: '数据', icon: 'https://via.placeholder.com/24x24?text=D' },
                    { name: '日志', icon: 'https://via.placeholder.com/24x24?text=L' }
                ],
                modelStats: {
                    accuracy: 95.6,
                    requests: 12.3,
                    latency: 120,
                    success: 98.5
                },
                filters: ['全部', '训练中', '已部署'],
                currentFilter: '全部',
                models: [
                    {
                        name: '模型A',
                        status: 'active',
                        statusText: '已部署',
                        accuracy: 96.5,
                        latency: 110,
                        progress: 100
                    },
                    {
                        name: '模型B',
                        status: 'training',
                        statusText: '训练中',
                        accuracy: 92.3,
                        latency: 150,
                        progress: 75
                    },
                    {
                        name: '模型C',
                        status: 'active',
                        statusText: '已部署',
                        accuracy: 94.1,
                        latency: 130,
                        progress: 100
                    }
                ],
                logs: [
                    {
                        timestamp: '12:00:01',
                        level: 'info',
                        message: '模型A调用成功'
                    },
                    {
                        timestamp: '12:00:05',
                        level: 'warning',
                        message: '模型B延迟较高'
                    },
                    {
                        timestamp: '12:00:10',
                        level: 'error',
                        message: '模型C调用失败'
                    }
                ],
                insights: [
                    {
                        title: '用户增长',
                        icon: 'https://via.placeholder.com/24x24?text=U',
                        value: '12.3k',
                        trend: 'up',
                        trendValue: '+5.6%'
                    },
                    {
                        title: '数据量',
                        icon: 'https://via.placeholder.com/24x24?text=D',
                        value: '1.2TB',
                        trend: 'up',
                        trendValue: '+3.4%'
                    },
                    {
                        title: '错误率',
                        icon: 'https://via.placeholder.com/24x24?text=E',
                        value: '1.5%',
                        trend: 'down',
                        trendValue: '-0.8%'
                    }
                ]
            },
            computed: {
                filteredModels() {
                    if (this.currentFilter === '全部') {
                        return this.models;
                    }
                    return this.models.filter(model => model.statusText === this.currentFilter);
                }
            },
            methods: {
                initCharts() {
                    const requestsChart = echarts.init(this.$refs.requestsChart);
                    const resourceChart = echarts.init(this.$refs.resourceChart);

                    // 调用趋势图表配置
                    const requestsOption = {
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
                        },
                        yAxis: {
                            type: 'value',
                            name: '调用次数 (k)'
                        },
                        series: [{
                            data: [10, 12, 11, 15, 18, 20, 22],
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                color: '#1C63F2'
                            }
                        }]
                    };

                    // 资源使用图表配置
                    const resourceOption = {
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [{
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 40, name: 'CPU' },
                                { value: 30, name: '内存' },
                                { value: 20, name: '存储' },
                                { value: 10, name: '网络' }
                            ],
                            itemStyle: {
                                color: function(params) {
                                    const colors = ['#1C63F2', '#F21CC4', '#2ed573', '#ffab00'];
                                    return colors[params.dataIndex % colors.length];
                                }
                            }
                        }]
                    };

                    requestsChart.setOption(requestsOption);
                    resourceChart.setOption(resourceOption);
                }
            },
            mounted() {
                this.initCharts();
            }
        });
    </script>
</body>
</html>

标签：Vue,rgba,AI,js,color,background,10px,border,255
From： https://blog.csdn.net/sky10100100/article/details/144914774

相关文章

  • AI画图变现教程，如何利用stable diffusion变现
    0****1如何找到好的ai画图工具（免费）画图软件：目前市面上的画图工具比较多，但是绝大多数都要收费或者有限制，可以使用stablediffusion整合包ai关键词：很多小伙伴都知道画图软件，但是如何可以画出好看的图呢，简单输入几个字就可以吗？并不是，每个用户注册后使用的ai模型都是需要训练......
  • AI划时代，新手小白如何利用绘画小赚1万
    一、为什么我要选择AI绘画2023年过完年，国内大模型就火了，各种AI能力感觉一下子进入一个新时代了，各种惊掉人下巴的AI能力层出不穷，其实我是从元旦节左右就开始了解到了openAI的gpt大模型。GPT的出现，确实是跨时代的，GPT的定义是一种基于互联网的、可用数据来训练的、文本生成的......
  • 超强AI绘画工具StableDiffusion，SD整合包V4.9 来了 版本win加mac安装包以及搭载PS安装
    众所周知，StableDiffusion是非常强大的AI绘图工具，今天为大家带来的是StableDiffusionSD整合包v4.9版本安装说明。这里带来的安装版本是9月最新整合包sd-webui-aki-v4.9版本。WIN加MAC有需要stablediffusion整合包以及提示词插件，可以扫描下方，免费获取一、整合......
  • SpreadJS 18.0 Patch
    全球最畅销的JavaScript电子表格，包含500多个Excel函数快速提供真正类似Excel的电子表格体验-完全不依赖Excel。创建财务、预算/预测、科学、工程、医疗保健、保险和许多其他类似的JavaScript电子表格业务应用程序。创建自定义JavaScript电子表格、高级网格、......
  • 大小球业内人士都在用的工具：AI人工智能预测分析系统
    一、引言在竞技赛事的预测领域，AI人工智能预测分析系统已经成为业内人士不可或缺的工具。本文将深入探讨这一系统的原理、算法及其在实际应用中的优势。作为专业的博客作者和数学家，我将采用严谨客观的写作风格，为足球球迷和专业编程师呈现一场技术与智慧的碰撞。二、泊松分布......
  • vue3 在渲染md中的数学公式
    常规的md转数学公式插件无法解决此问题问题:在渲染过程中\t被转义导致渲染出错**方案为：将\t转义为\t**依赖的插件及版本"katex":"^0.16.15","markdown-it":"^14.1.0","markdown-it-katex":"^2.0.3","markdown-it-latex&......
  • delphi djson 类与JSON 互转，与 Java、Golang 一致写法
    前因为什么要开发这个JSON库？原因是delphi官方的json既没有处理null（也叫零值）的问题；举例说明吧：开发者往往需要类与JSON之间进行序列化和反序列化；接下来我们举个例子:Person{id:Int64;//IDname:string;//姓名desc:string;//描述}这样一个类在不......
  • JSON结构快捷转XML结构API集成指南
    JSON结构快捷转XML结构API集成指南引言在当今的软件开发世界中，数据交换格式的选择对于系统的互操作性和效率至关重要。JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是两种广泛使用的数据表示格式。JSON因其简洁、易于阅读和解析的特点，在Web应用和移动应......
  • HackMyVM-Again靶机的测试报告
    目录一、测试环境1、系统环境2、使用工具/软件二、测试目的三、操作过程1、信息搜集2、Getshell3、提权四、结论一、测试环境1、系统环境渗透机：kali2021.1(192.168.101.127)靶 机：Linux(192.168.101.204)物理机：win11(192.168.101.241)靶机启动失败：设置中取......
  • MagicQuill: AI平板智能画师-AI智能交互式图像编辑系统
    什么是MagicQuill？MagicQuill是一个高度智能的图像修改编辑系统，有了它，你可以随心所欲地进行绘画和图像编辑。即使你没有任何绘画天赋，也能轻松创作出逼真、惊艳的视觉效果。这款AI绘画交互编辑神器也可以部署在云算力平台上后在iPad等设备上使用。 快速体验MagicQuill使......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99