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>
这段代码是一个基于Vue.js的前端组件,用于构建一个包含导航、时间范围选择和可视化内容的页面。以下是对每个部分的详细介绍:
模板部分
-
导航菜单: 有两个水平导航菜单,分别用于页面导航和时间范围选择。
- 页面导航菜单使用
Menu
组件,响应路由变化,并通过MenuItem
组件定义了页面选项。 - 时间范围选择菜单同样使用
Menu
组件,包含MenuItem
和一个带有设置图标的子菜单(Submenu
)。
- 页面导航菜单使用
-
模态框与日期选择器: 使用
Modal
组件创建一个模态框,内部包含两个DatePicker
组件,用于选择开始和结束日期。 -
内容区域: 使用
router-view
来动态渲染页面内容,根据flag
属性的值决定是否显示。flag
属性在handleSelect
方法中被设置。
脚本部分
-
数据属性: 使用
data
函数初始化组件的数据,包括活动菜单项(activeName
)、模态框状态(modal
)、是否显示内容区域(flag
)等。 -
生命周期钩子: 在
mounted
生命周期钩子中注册了窗口大小调整事件监听器,并调用handleSelect
方法,设置默认显示的时间范围。 -
方法:
pickStartDate
和pickEndDate
分别用于处理开始和结束日期的选择,通过设置optionEnd
属性限制结束日期的选择范围。getMonthBetween
用于计算两个日期之间的所有月份,结果存储在selectRangeDate
数组中。getDays
方法用于获取最近一段时间内的日期,返回一个日期数组。handleSelect
方法根据传入的name
参数执行不同的操作,包括更新时间范围、显示模态框等。
样式部分
-
模态框样式: 在设计模态框样式时,通过Less语法进行定义,精心定制了模态框的外观,以确保用户在进行时间范围选择时能够获得最佳体验。以下是样式的关键要素:
-
头部设计: 通过定义模态框头部样式,包括背景、文字颜色和边框,使其在整体设计中显得清晰而引人注目。这种设计可以帮助用户快速识别模态框的用途和重要信息。
-
内容区域样式: 模态框的内容区域样式涉及背景颜色、边框、字体颜色等,以确保用户在进行日期选择时,界面整洁、明了,不会引起混淆。对输入框和日期选择器的样式调整进一步增强了用户体验,使其更符合整体设计风格。
-
底部按钮样式: 底部按钮的样式设计关乎整体操作流程的友好性。通过Less的样式定义,可以调整按钮的颜色、形状以及悬停效果,提供直观而易于理解的交互元素。
-
-
头部样式: 页面头部的设计在整体布局中占据了重要地位。以下是头部样式的关键特点:
-
高度和排列方式: 通过设定头部的高度和排列方式,确保了页面的整体均衡性和美观性。这种设计有助于提升用户对页面整体结构的认知,并为后续的导航和操作提供一个明确的起点。
-
背景色和颜色搭配: 头部的背景色和文字颜色的搭配经过精心考虑,以确保良好的可读性和视觉吸引力。这种设计不仅使页面更具吸引力,还为用户提供了清晰的导航和标识。
-
子元素样式: 头部可能包含各种子元素,例如标题、图标或其他辅助性元素。通过精心设计这些元素的样式,可以突显它们的重要性,提升用户对页面主题和功能的理解。
-
-
导航菜单样式: 导航菜单是用户与页面交互的主要入口之一,因此其设计关键性极高。以下是导航菜单样式的关键特点:
-
背景色和边框设计: 设定导航菜单的背景色和激活状态的底部边框,以提高导航的可辨识性。这种视觉差异使用户能够迅速确定当前选定的菜单项,提高了用户导航的效率。
-
鼠标悬停效果: 设计鼠标悬停时的效果,如背景色变化或边框加粗,以提供直观的反馈,增强用户对导航菜单项可点击性的感知。
-
-
页面样式: 页面整体样式设计关系到用户对内容的整体感知。以下是页面样式的关键特点:
-
区域高度设计: 设定页面区域的高度,以确保内容区域能够占据剩余空间,使得页面布局更加均衡。这种设计确保了内容的清晰展示,为用户提供了良好的浏览体验。
-
整体配色搭配: 页面的整体颜色搭配与导航菜单、头部和其他组件的样式保持一致,形成统一的设计语言,增强了用户对页面的整体一致性的感知。
-
总体而言,通过对这些样式的精心设计,这个组件能够为用户提供一个视觉上吸引人、操作上直观友好的界面,进一步优化了用户体验。
3.源码地址
下方联系作者
更多推荐
所有评论(0)