wangyifang
/
dangxingjiaoyujidi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页

Browse Source
master
lion 3 years ago
parent e8ec611fba
commit 003f9745ad
10 changed files with 522 additions and 80 deletions
Show Stats Download Patch File Download Diff File

4
src/components/LxHeader/index.vue
Unescape View File

@ -40,9 +40,9 @@ export default {
// padding-top: 10px;
font-weight: bold;
font-size: 15px;
color: #c69845;
// color: #fff;
white-space: nowrap;
border-bottom: 2px solid #c69845;
border-bottom: 2px solid #ef9525;
> span {
position: relative;
top: 2px;

4
src/layout/components/Navbar.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<div class="navbar">
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
<breadcrumb class="breadcrumb-container" />
<!-- <breadcrumb class="breadcrumb-container" /> -->
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">

30
src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -1,13 +1,16 @@
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<!-- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" src="../../../assets/logo-mini.png?v=1" class="sidebar-logo">
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" src="../../../assets/logo-mini.png" class="sidebar-logo">
</router-link> -->
<router-link key="expand" class="sidebar-logo-link" to="/">
<!-- <img v-if="logo" src="../../../assets/logo-mini.png" class="sidebar-logo">
<img src="../../../assets/logo.png?v=1"
class="sidebar-name-logo" />
class="sidebar-name-logo" /> -->
中共苏州独立支部旧址预约管理系统
</router-link>
</transition>
</div>
@ -31,7 +34,14 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
#app .sidebar-container{
overflow:visible!important;
& a{
color:#515a6e;
font-weight: bold;
}
}
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
@ -47,12 +57,14 @@
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
width: 150%;
height: 50px;
font-size:16px;
color:#333;
line-height: 50px;
background: #FFFFFF;
text-align: center;
overflow: hidden;
// overflow: hidden;
& .sidebar-logo-link {
height: 100%;

4
src/store/modules/app.js
Unescape View File

@ -15,11 +15,11 @@ const mutations = {
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
// Cookies.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
// Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},

4
src/styles/sidebar.scss
Unescape View File

@ -18,7 +18,7 @@
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
overflow: visible;
// reset element-ui css
.horizontal-collapse-transition {
@ -87,7 +87,7 @@
//border-right: 5px solid $subMenuActiveText !important;
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
// color: $subMenuActiveText !important;
}

12
src/styles/variables.scss
Unescape View File

@ -1,16 +1,16 @@
// sidebar
$menuText:#606266;
$menuActiveText:#c69845;
$subMenuActiveText:#c69845; //https://github.com/ElemeFE/element/issues/12951
$menuActiveText:#fff;
$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#ffffff;//#304156
$menuHover:#ea3223;
$menuActiveBg:#ea3223;
$menuHover:#ef9525;
$menuActiveBg:#ef9525;
$subMenuBg:#ffffff;//#1f2d3d
$subMenuHover:#ea3223;
$submenuActiveBg:#ea3223;
$subMenuHover:#ef9525;
$submenuActiveBg:#ef9525;
$sideBarWidth: 210px;
$primaryColor: #c69845;

143
src/views/dashboard/components/LineChart.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
// {
// startValue: 0,
// endValue: 6, // 显示条数
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// // handleSize: 0, //滑动条的 左右2个滑动条的大小
// height: 8, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 26, //右边的距离
// handleColor: '#EFEFEF', //h滑动图标的颜色
// handleStyle: {
// borderColor: '#409EFF',
// borderWidth: '1',
// shadowBlur: 2,
// background: '#EFEFEF',
// shadowColor: '#EFEFEF'
// },
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#409EFF'
// },
// {
// offset: 1,
// color: '#409EFF'
// }
// ]),
// backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// filterMode: 'filter'
// }
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
legendArr:[],
legend: {
orient: 'horizontal',
bottom: '3%',
data:chartdata.legendArr
},
tooltip: {
trigger: 'axis'
},
backgroundColor:"#fff",
grid: {
top: '3%',
left: '2%',
right: '2%',
bottom: '12%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
}],
yAxis: [{
type: 'value',
minInterval: 1,
}],
series: chartdata.series
})
}
}
}
</script>

94
src/views/dashboard/components/PanelGroup.vue
Unescape View File

@ -1,56 +1,77 @@
<template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:3%;background: #FDC830; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<!-- <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
</div> -->
<div class="card-panel-description">
<div class="card-panel-text">
欢迎回来
预约参观
</div>
<div class="card-panel-text" style="color: #001528;">
管理员
<div class="card-panel-text" style="color: #fff;">
总 234 人次
</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleRoute('box')">
<div class="card-panel-icon-wrapper icon-message">
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:10.5%;background: #FFE000; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #799F0C, #FFE000); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #799F0C, #FFE000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
<!-- <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="toolbox" class-name="card-panel-icon" />
</div>
</div> -->
<div class="card-panel-description">
<div class="card-panel-text">
团队数量
<div class="card-panel-text" >
实际入场参观
</div>
<div class="card-panel-text" style="color: #fff;">
总 194 人次
</div>
<count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" />
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:3%;background: #F2994A; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<div class="card-panel" @click="handleRoute('tool')">
<div class="card-panel-icon-wrapper icon-money">
<!-- <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="tool" class-name="card-panel-icon" />
</div>
</div> -->
<div class="card-panel-description">
<div class="card-panel-text">
预约数量
预约活动
</div>
<div class="card-panel-text" style="color: #fff;">
总 305 人次
</div>
<count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" />
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FFB75E; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<div class="card-panel" @click="handleRoute('user')">
<div class="card-panel-icon-wrapper icon-shopping">
<!-- <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="user-group" class-name="card-panel-icon" />
</div>
</div> -->
<div class="card-panel-description">
<div class="card-panel-text">
游客数量
实际参与活动
</div>
<div class="card-panel-text" style="color: #fff;">
总 267 人次
</div>
<count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" />
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
@ -77,11 +98,14 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.panel-group {
margin-top: 18px;
.card-panel-col {
margin-left:0px!important;
margin-right:0px!important;
.card-panel-col {
// margin:0 2%;
margin-bottom: 32px;
}
@ -91,10 +115,11 @@
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
color: #666;
text-align: center;
// background: #fff;
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
// border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
@ -148,16 +173,17 @@
}
.card-panel-description {
float: right;
// float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
font-size: 25px;
margin-bottom: 12px;
font-family: "微软雅黑";
}
.card-panel-num {

163
src/views/dashboard/components/PieChart.vue
Unescape View File

@ -0,0 +1,163 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
// {
// startValue: 0,
// endValue: 6, // 显示条数
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// // handleSize: 0, //滑动条的 左右2个滑动条的大小
// height: 8, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 26, //右边的距离
// handleColor: '#EFEFEF', //h滑动图标的颜色
// handleStyle: {
// borderColor: '#409EFF',
// borderWidth: '1',
// shadowBlur: 2,
// background: '#EFEFEF',
// shadowColor: '#EFEFEF'
// },
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#409EFF'
// },
// {
// offset: 1,
// color: '#409EFF'
// }
// ]),
// backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// filterMode: 'filter'
// }
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
legend: {
orient: 'horizontal',
bottom: '4%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
grid: {
top: 0,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
radiusArr:[],
series: [{
name: '数据',
type: 'pie',
stack: 'vistors',
barWidth: '60%',
radius: chartdata.radiusArr,
center: ['50%', '45%'],
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

144
src/views/dashboard/index.vue
Unescape View File

@ -3,33 +3,56 @@
<panel-group @handleRoute="handleRoute" :countsData="countsData" />
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/warning">数据统计</router-link>
<div>
<router-link to="/toolbox/warning">参观男女统计</router-link>
<!-- <div>
<el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
{{item.name}}
</el-tag>
</div>
</div> -->
</div>
<bar-chart :chartData="stat.warning" />
<pie-chart :chartData="stat.warning" />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/exception">登录统计</router-link>
<div>
<router-link to="/toolbox/exception">参观年龄段统计</router-link>
<!-- <div>
<el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
{{item.name}}
</el-tag>
</div>
</div> -->
</div>
<bar-chart :chartData="stat.exception" />
<pie-chart :chartData="stat.exception" />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/exception">参观时长统计</router-link>
<!-- <div>
<el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
{{item.name}}
</el-tag>
</div> -->
</div>
<pie-chart :chartData="stat.times" />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/exception">团体与个人统计</router-link>
</div>
<line-chart :chartData="lineArr" />
</div>
</el-col>
</el-row>
@ -38,7 +61,9 @@
<script>
import PanelGroup from './components/PanelGroup'
import BarChart from './components/BarChart'
// import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
import {
getChartsData,
getCounts
@ -47,7 +72,8 @@
name: 'DashboardAdmin',
components: {
PanelGroup,
BarChart
PieChart,
LineChart
},
data() {
return {
@ -58,8 +84,19 @@
},
stat: {
warning: {
xArr: ["一","二","三","四","五"],
yArr: [200,300,400,500,330],
// xArr: ["一","二","三","四","五"],
// yArr: [200,300,400,500,330],
yArr: [{
value: 1048,
name: '男性'
},
{
value: 735,
name: '女性'
},
],
radiusArr: "60%",
dateRange: [{
checked: true,
type: "week",
@ -71,8 +108,24 @@
}]
},
exception: {
xArr: ["一","二","三","四","五"],
yArr: [200,300,400,500,330],
yArr: [{
value: 1048,
name: '12岁以下'
},
{
value: 735,
name: '12-17岁'
},
{
value: 580,
name: '18-24岁'
},
{
value: 484,
name: '25岁以上'
}
],
radiusArr: ['40%', '70%'],
dateRange: [{
checked: true,
type: "week",
@ -82,17 +135,62 @@
type: "month",
name: "本月"
}]
},
},
times: {
radiusArr: "60%",
yArr: [{
value: 240,
name: '最长时长'
},
{
value: 20,
name: '最短时长'
},
{
value: 130,
name: '平均值'
}
],
}
},
lineArr: {
xArr: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
legendArr:["团队预约人数","团队预约实际入场人数","个人预约人数","个人预约实际入场人数"],
series: [{
name: '团队预约人数',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '团队预约实际入场人数',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '个人预约人数',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 210]
},
{
name: '个人预约实际入场人数',
type: 'line',
stack: 'Total',
data: [50, 132, 101, 104, 180, 230, 110]
}
]
}
}
},
created: function() {
}
},
created: function() {
},
methods: {
},
methods: {
}
}
}
</script>
<style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save