Vue大数据可视化平台（源码在文末）

数据库 2023-12-16 17:34:19 阅读次数: 0

Vue大数据可视化平台（源码在文末）

1.项目展示

页面1

image-20231212095029639

页面2

image-20231212095215984

页面3

image-20231212095253117

image-20231212152248884

2.部分代码讲解

<template>
    <div style="height:100%;">
        <div class="header">
            <div class="selectRange">
                <Menu mode="horizontal" @on-select="(name) =>$router.push(name)" :active-name="$route.name">
                    <MenuItem name="page1">
                        page1
                    </MenuItem>
                    <MenuItem name="page2">
                        page2
                    </MenuItem>
                    <MenuItem name="page3">
                        page3
                    </MenuItem>
                </Menu>
            </div>
            <div class="header-title">
                大数据可视化平台
            </div>
            <div class="selectRange">
                <Menu mode="horizontal" @on-select="handleSelect" :active-name="activeName">
                    <MenuItem name="day">
                        昨日
                    </MenuItem>
                    <MenuItem name="week">
                        近一周
                    </MenuItem>
                    <MenuItem name="month">
                        近一月
                    </MenuItem>
                    <Submenu name="4">
                        <template slot="title">
                            <Icon type="ios-settings-outline" size="24" color="#60C2D4"/>
                        </template>
                        <MenuItem name="filter">筛选</MenuItem>
                    </Submenu>

                </Menu>
            </div>
        </div>
        <Modal
            v-model="modal"
            title="选择时间"
            :mask-closable="false"
            @on-ok="getMonthBetween(startTime,endTime)"
        >
            <DatePicker @on-change="pickStartDate" :options="optionStart" type="date" placeholder="选择开始日期"
                        style="width: 200px"></DatePicker>
            <span style="padding:0 20px;color:#75deef">至</span>
            <DatePicker @on-change="pickEndDate" :options="optionEnd" type="date" placeholder="选择结束日期"
                        style="width: 200px"></DatePicker>
        </Modal>
        <div class="page">
            <router-view v-if="flag" :selectRangeDate='selectRangeDate'></router-view>
        </div>

    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            activeName: 'month',// 默认显示近一月
            modal: false,
            flag: false,
            selectRangeDate: [],
            startTime: '',
            endTime: '',
            optionStart: {
                disabledDate(date) { // 禁止选择今天之后的日期
                    return date && date.valueOf() > Date.now() - 86400000;
                }
            },
            optionEnd: {},
            resizeFn: null
        }
    },
    mounted() {
        window.addEventListener('resize', this.resizeFn);
        this.handleSelect(this.activeName); // 默认显示近一个月
    },
    methods: {
        pickStartDate(date) { // 选择开始时间的回调
            this.startTime = date;
            this.optionEnd = {
                disabledDate(d) { // 禁止选择开始时间之前的日期
                    return d && d.valueOf() < new Date(date).valueOf() - 86400000;
                }
            }
        },
        pickEndDate(date) { // 选择结束时间的回调
            this.endTime = date;
        },
        getMonthBetween(start, end) {  // 获取开始时间和结束时间之内的所有月份
            this.selectRangeDate = [];
            let s = start.split("-");  // 字符串装换数组
            let e = end.split("-");
            let date = new Date();
            let min = date.setFullYear(s[0], s[1] - 1); // 设置最小时间
            let max = date.setFullYear(e[0], e[1] - 1); // 设置最大时间
            let curr = min;
            while (curr <= max) {  // 循环添加月份
                var month = curr.getMonth();
                var arr = [curr.getFullYear(), month + 1];
                this.selectRangeDate.push(arr);
                curr.setMonth(month + 1);
            }
        },
        getDays(day) {// 获取天数
            let arr = [];
            for (let i = -day; i < 0; i++) { // 循环添加天数
                let today = new Date();// 获取今天
                let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * i;
                today.setTime(targetday_milliseconds); //设置i天前的时间
                let tYear = today.getFullYear();
                let tMonth = today.getMonth();
                let tDate = today.getDate();
                let date = [tYear, tMonth + 1, tDate];
                arr.push(date);
            }
            return arr
        },
        handleSelect(name) {
            switch (name) {
                case 'day':

                    break;
                case 'week':

                    this.selectRangeDate = this.getDays(7);// 获取近一周的天数
                    this.flag = true;

                    break;
                case 'month':
                    this.selectRangeDate = this.getDays(30);// 获取近一个月的天数
                    this.flag = true;
                    break;
                case 'filter':
                    this.modal = true;
                    break;
                default:
                    break;
            }

        }
    },
}
</script>

<style lang="less">
.ivu-modal {
    .ivu-modal-content {
        background: #071332;

        .ivu-modal-header {
            border-bottom: 1px solid #1a3c58;

            .ivu-modal-header-inner {
                color: #75deef;
            }
        }

        .ivu-modal-body {
            text-align: center;

            .ivu-icon {
                color: #75deef
            }

            .ivu-modal-confirm-body {
                padding-left: 0;
                color: #75deef
            }

            .ivu-input {
                background-color: rgba(0, 0, 0, 0);
                border: 1px solid #1a3c58;
                color: #75deef;

                &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                    color: #75deef;
                }

                &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    color: #75deef;
                }

                &::-moz-placeholder { /* Mozilla Firefox 19+ */
                    color: #75deef;
                }

                &::-ms-input-placeholder { /* Internet Explorer 10-11 */
                    color: #75deef;
                }
            }

            .ivu-picker-panel-body {
                background: #071332;

                .ivu-date-picker-header {
                    color: #75deef;
                    border-bottom: 1px solid #1a3c58
                }

                .ivu-date-picker-cells-cell {
                    color: #75deef;

                    &:hover em {
                        background: #1a3c58;
                    }
                }

                .ivu-date-picker-cells-cell-disabled {
                    background: rgba(0, 0, 0, 0);
                    color: #eee
                }

                .ivu-date-picker-cells-focused em {
                    box-shadow: 0 0 0 1px #1a3c58 inset;

                    &::after {
                        background: #1a3c58;
                    }
                }
            }
        }

        .ivu-modal-footer {
            border-top: 1px solid #1a3c58;

            .ivu-btn-primary {
                color: #75deef;
                background: #1a3c58;
            }

            .ivu-btn-text {
                color: #ddd;

                &:hover {
                    color: #75deef;
                    background: #1a3c58;
                }
            }
        }
    }

}

.header {
    height: 80px;
    background: #03044A;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-title {
        color: #75deef;
        font-size: 30px;
        letter-spacing: 10px;
    }

    .selectRange {
        height: 100%;

        .ivu-menu-horizontal {
            background: rgba(255, 255, 255, 0);

            &::after {
                height: 0;
            }

            .ivu-menu-item-active {
                border-bottom: 2px solid #264e5e;

            }

            .ivu-menu-item, .ivu-menu-submenu {
                color: #75deef;

                &:hover {
                    border-bottom: 2px solid #264e5e;
                }
            }

            .ivu-select-dropdown {
                background: #09102E;

                .ivu-menu-item {
                    color: #75deef;

                    &:hover {

                        border-bottom: 2px solid #264e5e;
                        background-color: rgba(255, 255, 255, 0);
                    }
                }
            }

            .ivu-menu-submenu-title {
                i {
                    margin-right: 0;
                }

                .ivu-icon-ios-arrow-down {
                    display: none;
                }
            }
        }
    }
}

.page {
    height: calc(~ '100% - 80px');

}
</style>

这段代码是一个基于Vue.js的前端组件，用于构建一个包含导航、时间范围选择和可视化内容的页面。以下是对每个部分的详细介绍：

模板部分

  1. 导航菜单: 有两个水平导航菜单，分别用于页面导航和时间范围选择。

    • 页面导航菜单使用Menu组件，响应路由变化，并通过MenuItem组件定义了页面选项。
    • 时间范围选择菜单同样使用Menu组件，包含MenuItem和一个带有设置图标的子菜单（Submenu）。

  2. 模态框与日期选择器: 使用Modal组件创建一个模态框，内部包含两个DatePicker组件，用于选择开始和结束日期。

  3. 内容区域: 使用router-view来动态渲染页面内容，根据flag属性的值决定是否显示。flag属性在handleSelect方法中被设置。

脚本部分

  1. 数据属性: 使用data函数初始化组件的数据，包括活动菜单项（activeName）、模态框状态（modal）、是否显示内容区域（flag）等。

  2. 生命周期钩子: 在mounted生命周期钩子中注册了窗口大小调整事件监听器，并调用handleSelect方法，设置默认显示的时间范围。

  3. 方法:

    • pickStartDate和pickEndDate分别用于处理开始和结束日期的选择，通过设置optionEnd属性限制结束日期的选择范围。
    • getMonthBetween用于计算两个日期之间的所有月份，结果存储在selectRangeDate数组中。
    • getDays方法用于获取最近一段时间内的日期，返回一个日期数组。
    • handleSelect方法根据传入的name参数执行不同的操作，包括更新时间范围、显示模态框等。

样式部分

  1. 模态框样式: 在设计模态框样式时，通过Less语法进行定义，精心定制了模态框的外观，以确保用户在进行时间范围选择时能够获得最佳体验。以下是样式的关键要素：

    • 头部设计: 通过定义模态框头部样式，包括背景、文字颜色和边框，使其在整体设计中显得清晰而引人注目。这种设计可以帮助用户快速识别模态框的用途和重要信息。

    • 内容区域样式: 模态框的内容区域样式涉及背景颜色、边框、字体颜色等，以确保用户在进行日期选择时，界面整洁、明了，不会引起混淆。对输入框和日期选择器的样式调整进一步增强了用户体验，使其更符合整体设计风格。

    • 底部按钮样式: 底部按钮的样式设计关乎整体操作流程的友好性。通过Less的样式定义，可以调整按钮的颜色、形状以及悬停效果，提供直观而易于理解的交互元素。

  2. 头部样式: 页面头部的设计在整体布局中占据了重要地位。以下是头部样式的关键特点：

    • 高度和排列方式: 通过设定头部的高度和排列方式，确保了页面的整体均衡性和美观性。这种设计有助于提升用户对页面整体结构的认知，并为后续的导航和操作提供一个明确的起点。

    • 背景色和颜色搭配: 头部的背景色和文字颜色的搭配经过精心考虑，以确保良好的可读性和视觉吸引力。这种设计不仅使页面更具吸引力，还为用户提供了清晰的导航和标识。

    • 子元素样式: 头部可能包含各种子元素，例如标题、图标或其他辅助性元素。通过精心设计这些元素的样式，可以突显它们的重要性，提升用户对页面主题和功能的理解。

  3. 导航菜单样式: 导航菜单是用户与页面交互的主要入口之一，因此其设计关键性极高。以下是导航菜单样式的关键特点：

    • 背景色和边框设计: 设定导航菜单的背景色和激活状态的底部边框，以提高导航的可辨识性。这种视觉差异使用户能够迅速确定当前选定的菜单项，提高了用户导航的效率。

    • 鼠标悬停效果: 设计鼠标悬停时的效果，如背景色变化或边框加粗，以提供直观的反馈，增强用户对导航菜单项可点击性的感知。

  4. 页面样式: 页面整体样式设计关系到用户对内容的整体感知。以下是页面样式的关键特点：

    • 区域高度设计: 设定页面区域的高度，以确保内容区域能够占据剩余空间，使得页面布局更加均衡。这种设计确保了内容的清晰展示，为用户提供了良好的浏览体验。

    • 整体配色搭配: 页面的整体颜色搭配与导航菜单、头部和其他组件的样式保持一致，形成统一的设计语言，增强了用户对页面的整体一致性的感知。

总体而言，通过对这些样式的精心设计，这个组件能够为用户提供一个视觉上吸引人、操作上直观友好的界面，进一步优化了用户体验。

3.源码地址

链接：https://pan.baidu.com/s/1zaU3utn1bTAHdUPzvVfV4A?pwd=bsmm
提取码：bsmm

创作不易，项目已加密，有偿（—11.9r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客

猜你喜欢

转载自blog.csdn.net/m0_63324772/article/details/134950890
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022