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

ゝ一世哀愁。 2024-02-05 14:40 65阅读 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私信我（大概率可能时间忙顾不上回复）

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

[image-20231212095029639]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f2aef41fd0364ad39010d0d98119fedb.png
[image-20231212095215984]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/01d5cd67441547b3b36e2858094a8cba.png
[image-20231212095253117]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/cfa6154809744a29ae1b637b1dfabb2c.png
[image-20231212152248884]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e6ccddd51eab485ba300c172a3b6ffcf.png