Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 352cb7c8 by yuanfeng
Options

update

parent c3f58445
Showing with 866 additions and 16 deletions
.gitignore 0 → 100644
node_modules
dist
\ No newline at end of file
index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础Vue框架</title> <title>张謇教育</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/App.vue
...@@ -38,6 +38,7 @@ export default { ...@@ -38,6 +38,7 @@ export default {
body { body {
background-color: #011428; background-color: #011428;
background: url('../static/images/index/bg.png') no-repeat left top;
} }
#app { #app {
......
src/components/Header/index.vue
<template> <template>
<header id="header">{{ title }}</header> <!-- 使用双飞翼布局, 兼容低版本浏览器 -->
<div class="header-main">
<div class="header-content">
<span class="title-name">{{ title || '' }}</span>
</div>
<div class="right">
<div class="right-content">
<span class="current-date">{{ currDate }}</span>
<span class="current-time">{{ currTime }}</span>
</div>
</div>
</div>
</template> </template>
<script> <script>
let timer = null
export default { export default {
name: 'Header',
props: {
title: {
type: String,
default: '徐汇区教师队伍整体发展情况分析'
}
},
data () { data () {
return {} return {
currDate: '', // 当前日期, 如: 2021年03月21日
currTime: '' // 当前时间, 如: 14:12:45
}
},
mounted () {
this.getCurrTime()
},
beforeDestroy () {
clearTimeout(timer)
timer = null
}, },
props: ['title'], methods: {
/**
* @method getCurrTime 获取当前时间
*/
getCurrTime () {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const fullDate = year + '/' + month + '/' + day
const fullTime = this.utils.zeroPadding(hour) + ':' + this.utils.zeroPadding(minute) + ':' + this.utils.zeroPadding(second)
created () { this.currDate = fullDate
window.vm = this this.currTime = fullTime
timer = setTimeout(this.getCurrTime, 1000)
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@headerHeight: 67px;
</style>> .header-main {
position: relative;
width: 100%;
height: @headerHeight;
.header-content {
width: 1169px;
margin-right: auto;
margin-left: auto;
line-height: @headerHeight;
text-align: center;
letter-spacing: 3px;
text-indent: 20px;
background: url('./images/header-bg.png') no-repeat center top;
}
.title-name {
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
background: linear-gradient(0deg, #FFFFFF 0%, #609FF2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.right {
position: absolute;
top: 50%;
right: 32px;
transform: translateY(-50%);
font-size: 22px;
font-family: CenturyGothic;
font-weight: 400;
color: #FFFFFF;
line-height: 71px;
}
}
</style>
src/components/TitleLine/index.vue 0 → 100644
<template>
<div class="title">
<b>{{$attrs.con || ''}}</b>
<div class="underLine">
<p>
<span></span>
</p>
<i :style="{width: $attrs.width || '100%'}"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Title',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.title {
b {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding-left: 23px;
}
.underLine {
display: flex;
justify-content: flex-start;
p {
position: relative;
width: 14px;
height: 14px;
background: rgba(54, 150, 223, .4);
border-radius: 50%;
span {
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
background: #3696DF;
border-radius: 50%;
}
}
i {
height: 2px;
background: linear-gradient(90deg,rgba(54, 150, 223, .4), transparent);
position: relative;
top: 6px;
}
}
}
</style>
\ No newline at end of file
src/components/echarts/BarChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '90px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '7px',
itemStyle: {
borderRadius: [4, 4, 4, 4],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: true,
position: 'right',
color: '#ffffff',
fontSize: 16,
fontFamily: 'CenturyGothic',
fontWeight: 400
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
title: {
show: false
},
grid: {
left: -10,
right: 35,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
fontFamily: 'CenturyGothic'
},
data: []
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/PieChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'PieChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '130px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
name: '学历情况',
type: 'pie',
center: ['38%', '50%'],
radius: ['58%', '78%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#001626',
borderWidth: 5
},
label: {
formatter: item => {
return item.percent.toFixed(0) + '%'
},
fontSize: 16,
fontFamily: 'CenturyGothic',
color: '#ffffff'
},
labelLine: {
show: false,
length: 0,
length2: 0
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultColors = [
'#ffffff',
'#00ECFF',
'#00C0FF',
'#00E371'
]
const defaultOption = {
color: defaultColors,
legend: {
orient: 'vertical',
icon: 'circle',
itemWidth: 9,
itemHeight: 9,
right: 0,
top: 'center',
textStyle: {
color: '#ffffff',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
}
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Center.vue 0 → 100644
<template>
<div class="managePlatform-center"></div>
</template>
<script>
export default {
name: 'Center',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.managePlatform-center {
height: 500px;
}
</style>
\ No newline at end of file
src/pages/index/Left.vue 0 → 100644
<template>
<div class="managePlatform-left">
<title-line :con="'学员画像'"></title-line>
<!-- 男女比例图 -->
<div class="gender">
<div class="male">
<img src="../../../static/images/index/male.png" alt="">
</div>
<div class="details">
<p class="percent">
<span>{{genderPercent.male}}</span>
<span>{{genderPercent.female}}</span>
</p>
<div class="line">
<span class="male" :style={width:genderPercent.male}></span>
<span class="female" :style={width:genderPercent.female}></span>
</div>
<p class="num">
<span>{{gender.male | dealWithNumber}}</span>
<span>{{gender.female | dealWithNumber}}</span>
</p>
</div>
<div class="female">
<img src="../../../static/images/index/female.png" alt="">
</div>
</div>
<!-- 年龄结构/学历情况 -->
<div class="ageAndEdu">
<div class="age">
<div class="partTitle">年龄结构</div>
<div class="average">
<span>平均年龄</span>
<i>{{ageAverage}}</i>
</div>
<bar-chart :option="ageConfig.option"/>
</div>
<span class="line"></span>
<div class="edu">
<div class="partTitle">学历情况</div>
<pie-chart :option="eduConfig.option"/>
</div>
</div>
<!-- 党派分布/民族分布 -->
<div class="distribution">
<div class="title">
<p :class="distShowKey === 'party' ? 'curr' : ''">党派分布</p>
<p :class="distShowKey === 'ethnic' ? 'curr' : ''">民族分布</p>
</div>
<ul>
<li v-for="(item, index) in distribution[distShowKey]" :key="index">
<p>{{item.name}}</p>
<count-to :endVal="item.value"/>
</li>
</ul>
</div>
</div>
</template>
<script>
import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import utils from 'utils'
export default {
name: 'Left',
components: {
TitleLine,
BarChart,
PieChart
},
filters: {
dealWithNumber (num) {
return utils.dealWithNumber(num)
}
},
data () {
return {
// 男女学员数量
gender: {
male: 92768,
female: 41768
},
genderPercent: {},
// 年龄数据
age: [
{
name: '60’s',
value: 32
}, {
name: '70’s',
value: 106
}, {
name: '80’s',
value: 184
}, {
name: '90’s',
value: 131
}
],
// 平均年龄
ageAverage: 45.7,
// 年龄结构配置
ageConfig: {},
// 学历数据
edu: [
{value: 735, name: '大专'},
{value: 580, name: '本科'},
{value: 484, name: '硕士'},
{value: 300, name: '博士以上'}
],
// 学历情况配置
eduConfig: {},
// 分布
distribution: {
// 党派
party: [
{
name: '民革',
value: 4293
}, {
name: '民盟',
value: 4293
}, {
name: '民健',
value: 4293
}, {
name: '民进',
value: 4293
}, {
name: '无党派',
value: 4293
}
],
// 民族
ethnic: [
{
name: '汉族',
value: 3924
}, {
name: '藏族',
value: 3924
}, {
name: '维吾尔族',
value: 3924
}, {
name: '白族',
value: 3924
}, {
name: '苗族',
value: 3924
}
]
},
// 分布当前展示数据标识
distShowKey: 'party'
}
},
mounted () {
this.init()
this.getAge()
this.getEdu()
},
methods: {
init () {
this.dealGender()
},
// 求性别百分比
dealGender () {
const arr = Object.values(this.gender)
const total = arr.reduce((pre, next) => pre + next)
this.genderPercent = {
male: (this.gender.male * 100 / total).toFixed(1) + '%',
female: (this.gender.female * 100 / total).toFixed(1) + '%'
}
},
// 年龄结构
getAge () {
this.ageConfig = {
option: {
seriesData: [
{
data: this.age.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.age.map(item => item.name).reverse()
}]
}
}
}
},
// 学历情况
getEdu () {
this.eduConfig = {
option: {
seriesData: [
{
data: this.edu
}
]
}
}
}
}
}
</script>
<style lang="less" scoped>
.managePlatform-left {
padding-top: 14px;
.partTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
}
.gender {
display: flex;
margin-top: 8px;
.details {
padding: 0 7px;
flex: 1;
font-family: CenturyGothic;
font-weight: 400;
color: #FFFFFF;
line-height: 17px;
p {
display: flex;
justify-content: space-between;
}
.percent {
font-size: 20px;
}
.line {
display: flex;
margin-top: 5px;
margin-bottom: 4px;
span {
width: 0%;
height: 8px;
transition: width linear 300ms;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #00BEFF;
}
&.female {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #00DE7D;
}
}
}
.num {
font-size: 24px;
}
}
}
.ageAndEdu {
display: flex;
justify-content: space-between;
margin-top: 25px;
div {
width: 47%;
}
.line {
width: 1px;
height: 153px;
background: linear-gradient(0deg, transparent, #3A95BF, transparent)
}
.age {
.average {
width: 100%;
display: flex;
font-weight: 400;
line-height: 30px;
margin-top: 10px;
span {
font-size: 14px;
font-family: Microsoft YaHei;
color: #6DCDFF;
}
i {
font-size: 24px;
font-family: CenturyGothic;
color: #ffffff;
padding-left: 10px;
}
}
}
}
.distribution {
.title {
display: flex;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(109, 205, 255, .8);
line-height: 28px;
border-bottom: 1px solid rgba(91, 191, 255, .3);
p {
padding: 0 10px;
cursor: pointer;
&.curr {
font-size: 18px;
color: #FFFFFF;
border-bottom: 2px solid #5BBFFF;
}
}
}
}
}
</style>
\ No newline at end of file
src/pages/index/Right.vue 0 → 100644
<template>
<div class="managePlatform-right"></div>
</template>
<script>
export default {
name: 'Right',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.managePlatform-right {
height: 500px;
}
</style>
\ No newline at end of file
src/pages/index.vue → src/pages/index/index.vue
<template> <template>
<div class="index-page"> <div class="index-page">
<layout :layoutConf="layoutSize"> <layout :layoutConf="layoutSize">
<Header title="头部标题" slot="header" /> <page-head title="张謇教育基地管理平台" slot="header" />
<!-- left --> <!-- left -->
<div class="index-left" slot="left"></div> <left slot="left" />
<!-- center --> <!-- center -->
<div class="index-center" slot="center"></div> <center slot="center" />
<!-- right --> <!-- right -->
<div class="index-right" slot="right"></div> <right slot="right" />
</layout> </layout>
</div> </div>
</template> </template>
<script> <script>
import Left from './Left.vue'
import Center from './Center.vue'
import Right from './Right.vue'
export default { export default {
data () { data () {
return { return {
// 布局设置 // 布局设置
layoutSize: { layoutSize: {
leftWidth: '530px', leftWidth: '510px',
rightWidth: '530px', rightWidth: '510px',
center: { center: {
width: '100%' width: '100%'
} }
} }
} }
},
components: {
Left,
Center,
Right
} }
} }
</script> </script>
......
src/public/plugins/index.js
...@@ -2,6 +2,8 @@ import mixins from '../mixins' ...@@ -2,6 +2,8 @@ import mixins from '../mixins'
// Vue插件(Vue plugin) // Vue插件(Vue plugin)
import ContentContainer from 'components/ContentContainer' import ContentContainer from 'components/ContentContainer'
// 页面头
import Header from 'components/Header'
const UsePlugin = {} const UsePlugin = {}
...@@ -15,6 +17,7 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -15,6 +17,7 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.mixin(mixins) Vue.mixin(mixins)
// 内容容器 // 内容容器
Vue.component('content-container', ContentContainer) Vue.component('content-container', ContentContainer)
Vue.component('page-head', Header)
} }
export default UsePlugin export default UsePlugin
src/router/routes.js
// 导入页面名称 // 管理平台
import Index from '@/pages/index.vue' import Index from '@/pages/index/index.vue'
export default [ export default [
{ {
......
static/styles/layoutMain.less
// 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效 // 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效
#layoutMain {} #layoutMain {
.left {
padding-right: 0px;
}
.right {
padding-left: 0px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment