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

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

1.项目展示

页面1

页面2

页面3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318

这段代码是一个基于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.源码地址

下方联系作者