Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit bc5a85cf by wangr
Options

add

parents c33fd98a 08b96681
Showing with 732 additions and 93 deletions
README.md
## 两星(张謇) - 前端大屏 ## 两星(张謇) - 前端大屏
#### 添加依赖runner(git子包仓库)
```js
初始化子包仓库
`npm run init`
后续更新子包仓库 - 初始化已包含, 无需再次执行
`npm run update`
开发环境
`npm run dev`
打包部署
`npm run build`
```
### 页面名称
```
```
\ No newline at end of file
package.json
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"lint": "eslint --ext .js --ext .jsx --ext .vue client/", "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ widgets/", "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ widgets/",
"precommit": "npm run lint-fix", "precommit": "npm run lint-fix",
"init": "git submodule update --init --recursive", "init": "git submodule update --init --recursive && npm run update && npm install",
"update": "git submodule update --recursive --remote --merge --force" "update": "git submodule update --recursive --remote --merge --force"
}, },
"author": "", "author": "",
......
src/components/echarts/LineBar.vue 0 → 100644
<template>
<div class="bar-chart">
<chart-el :chartOpt="barChartConf" />
</div>
</template>
<script>
import * as echarts from 'echarts'
import mixinChart from '@/public/mixins/mixinChart'
export default {
name: 'lineBar',
mixins: [mixinChart],
data () {
return {
barChartConf: {}
}
},
props: {
// 图表布局配置, width, height
layout: {
type: Object,
default () {
return {}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '', id = '', className = 'line-bar-chart-class' } = this.mergeChartConf() || {}
// 基础配置, 不含series
const option = this.getChartOption(this.option.base) || {}
const seriesData = this.getSeriesData(this.option.seriesData || []) || []
// if (!seriesData.length) {
// throw Error('该组件图表数据只能接受length为2的数组')
// }
option.series = seriesData
this.barChartConf = {
className,
id,
width,
height,
option
}
},
/**
* @method mergeChartConf 合并图表配置项
*/
mergeChartConf () {
const defaultChartConf = {
width: '100%',
height: '100%',
// 不同的id（防止id重复，同一个页面，无法展示多个同组件图表）
id: 'line-bar-chart-id' + this.utils.randomStr()
}
return this.deepMerge({}, defaultChartConf, this.layout)
},
/**
* @method getChartOption 图表配置
*/
getChartOption (customOption = {}) {
const defaultOption = {
title: {
show: false
},
grid: {
left: 0,
right: 10,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
inside: false,
formatter: function (val) {
return `{color1|${val}}`
},
rich: {
color1: {
fontSize: 14,
color: '#FFFFFF'
}
}
},
data: []
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
inside: false,
formatter: function (val) {
return `{color|${val}}`
},
rich: {
color: {
fontFamily: 'CenturyGothic',
fontSize: 15,
color: '#FFFFFF'
}
}
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: []
}
]
}
return this.deepMerge({}, defaultOption, customOption)
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
if (this.option.seriesData.length !== 2) return []
const defSeriesData = [
{
name: 'back',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: '#233549'
}
},
barGap: '-100%',
data: [1, 2, 3]
},
{
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(59, 150, 235, 0.1)'
}, {
offset: 1,
color: '#3b96eb'
}], false)
}
},
markPoint: {
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
symbolSize: [10, 10],
data: []
},
data: [],
z: 3
}
]
const seriesData = [{}, {}]
seriesData[0] = this.deepMerge({}, defSeriesData[0], this.option.seriesData[0])
seriesData[1] = this.deepMerge({}, defSeriesData[1], this.option.seriesData[1])
return seriesData
}
}
}
</script>
src/index.js
...@@ -2,6 +2,7 @@ import Vue from 'vue' ...@@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Vuex from 'vuex' import Vuex from 'vuex'
import App from './App.vue' import App from './App.vue'
import './public/apis'
import createStore from './store' // Vuex import createStore from './store' // Vuex
import createRouter from './router/router' import createRouter from './router/router'
import UsePlugin from 'runner/common/plugins' import UsePlugin from 'runner/common/plugins'
......
src/pages/index/Left.vue
...@@ -131,6 +131,15 @@ export default { ...@@ -131,6 +131,15 @@ export default {
} }
}, },
props: {
leftData: {
type: Object,
default () {
return {}
}
}
},
data () { data () {
return { return {
// 男女学员数量 // 男女学员数量
...@@ -405,15 +414,15 @@ export default { ...@@ -405,15 +414,15 @@ export default {
mounted () { mounted () {
this.init() this.init()
this.getAge()
this.getEdu()
this.getIndustry()
this.changeDegree('participate')
}, },
methods: { methods: {
init () { init () {
this.dealGender() this.dealGender()
this.getAge()
this.getEdu()
this.getIndustry()
this.changeDegree('participate')
}, },
// 求性别百分比 // 求性别百分比
dealGender () { dealGender () {
......
src/pages/index/Right.vue
<template> <template>
<div class="managePlatform-right"> <div class="managePlatform-right">
<title-line :con="'师资/课程/活动'"></title-line> <title-line :con="'师资/课程/活动'"></title-line>
<!-- 师资力量 -->
<div class="faculty"> <div class="faculty">
<div class="teachernum"> <div class="teachernum">
<div class="teacherTitle">师资力量</div> <div class="minTitle">师资力量</div>
<pie-chart :option="eduConfig.option" /> <pie-chart :option="eduConfig.option" />
</div> </div>
<div class="staff"> <div class="staff">
<bar-chart :option="staffConfig.option" /> <bar-chart :option="staffConfig.option" />
</div> </div>
</div> </div>
<!-- 教学课程 -->
<div class="course"> <div class="course">
<div class="coursetitle"> <div class="coursetitle">
<div class="left">教学课程</div> <div class="minTitle">教学课程</div>
<div class="seemore">查看更多</div> <div class="seemore">查看更多</div>
</div> </div>
<p class="percent"> <p class="percent">
<span>课程数</span> <span>课程数<count-to :endVal="120" /></span>
<span>学习总时长</span> <span>学习总时长<count-to :endVal="1248" /></span>
<span>出勤率</span> <span>出勤率<count-to :endVal="88" suffix="%"/></span>
</p> </p>
<div class="line"> <div class="line">
<bar-chart :option="lineConfig.option" /> <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
</div> </div>
</div> </div>
<!-- 学习内容 -->
<div class="learnContent">
<div class="minTitle">学习内容</div>
<bar-chart style="margin-top:13px" :layout="learnConfig.layout" :option="learnConfig.option" />
</div>
<!-- 活动开展 -->
<div class='activ'>
<active />
</div>
<popup-frame <popup-frame
:visible.sync="showVisible" :visible.sync="showVisible"
@beforeClose="beforeCloses" @beforeClose="beforeCloses"
...@@ -112,6 +123,7 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper' ...@@ -112,6 +123,7 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue' import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
import active from './active'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
...@@ -119,17 +131,18 @@ export default { ...@@ -119,17 +131,18 @@ export default {
BarChart, BarChart,
PieChart, PieChart,
swiper, swiper,
swiperSlide swiperSlide,
active
}, },
data () { data () {
return { return {
showVisible: false, showVisible: false,
// 师资力量
eduConfig: {}, eduConfig: {},
edu: [ edu: [
{ value: 168, name: '教师数' } { value: 168, name: '教师数' }
], ],
staffConfig: {}, staffConfig: {},
// 师资数据
staff: [ staff: [
{ {
name: '****教授', name: '****教授',
...@@ -145,6 +158,7 @@ export default { ...@@ -145,6 +158,7 @@ export default {
value: 12 value: 12
} }
], ],
// 教学课程
lineConfig: {}, lineConfig: {},
line: [ line: [
{ {
...@@ -155,10 +169,38 @@ export default { ...@@ -155,10 +169,38 @@ export default {
value: 68 value: 68
} }
], ],
genderPercent: { // 学习内容
male: '32%', learnConfig: {},
female: '68%' learn: [
}, {
name: '**学习',
value: 65
},
{
name: '**学习',
value: 25
},
{
name: '**学习',
value: 85
},
{
name: '**学习',
value: 70
},
{
name: '**学习',
value: 100
},
{
name: '**学习',
value: 40
},
{
name: '**学习',
value: 45
}
],
swiperOption: { swiperOption: {
mousewheel: true, mousewheel: true,
centeredSlides: true, centeredSlides: true,
...@@ -192,11 +234,134 @@ export default { ...@@ -192,11 +234,134 @@ export default {
this.getstaff() this.getstaff()
this.getEdu() this.getEdu()
this.getline() this.getline()
this.getlearn()
}, },
methods: { methods: {
// 学习内容
getlearn () {
const xData = this.learn.map(v => v.name)
const Data = this.learn.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: {
base: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#ffffff'
},
backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)'
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData
},
yAxis: [{
type: 'value',
max: 'dataMax',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
},
boundaryGap: ['20%', '20%']
}]
},
seriesData: [
{
type: 'bar',
barWidth: 6,
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
},
{
offset: 0,
color: '#00BEFf'
}
]),
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: Data
}
]
}
}
},
// 教学课程百分比
getline () { getline () {
this.lineConfig = { this.lineConfig = {
layout: {
width: '100%',
height: '31px'
},
option: { option: {
base: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
}
},
seriesData: [ seriesData: [
{ {
name: 'A', name: 'A',
...@@ -204,30 +369,38 @@ export default { ...@@ -204,30 +369,38 @@ export default {
stack: 'Tik Tok', stack: 'Tik Tok',
barWidth: 25, barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 190, 255, .3)',
shadowOffsetY: 0, shadowOffsetY: 0,
shadowOffsetX: 0, shadowOffsetX: 0,
barBorderRadius: [2, 0, 0, 2] barBorderRadius: [5, 0, 0, 5]
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-20, 0], offset: [-40, 2],
formatter: '{c}%', formatter: function (params) {
textStyle: { return '{a|' + params.name + '}{b|' + params.value + '%}'
align: 'center', },
baseline: 'middle', rich: {
fontSize: 14, a: {
fontWeight: '400', color: '#fff',
color: '#fff', align: 'center',
textShadowColor: '#000', fontSize: 14,
textShadowBlur: '0', fontFamily: 'Microsoft YaHei',
textShadowOffsetX: 1, fontWeight: '400'
textShadowOffsetY: 1 },
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
} }
} }
}, },
data: [32] data: [this.line[0]]
}, },
{ {
name: 'B', name: 'B',
...@@ -235,29 +408,38 @@ export default { ...@@ -235,29 +408,38 @@ export default {
stack: 'Tik Tok', stack: 'Tik Tok',
barWidth: 25, barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 222, 125, .3)',
shadowOffsetY: 0, shadowOffsetY: 0,
shadowOffsetX: 0 shadowOffsetX: 0,
barBorderRadius: [0, 5, 5, 0]
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-20, 0], offset: [-40, 2],
formatter: '{c}%', formatter: function (params) {
textStyle: { return '{a|' + params.name + '}{b|' + params.value + '%}'
align: 'center', },
baseline: 'middle', rich: {
fontSize: 14, a: {
fontWeight: '400', color: '#fff',
color: '#fff', align: 'center',
textShadowColor: '#000', fontSize: 14,
textShadowBlur: '0', fontFamily: 'Microsoft YaHei',
textShadowOffsetX: 1, fontWeight: '400'
textShadowOffsetY: 1 },
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
} }
} }
}, },
data: [68] data: [this.line[1]]
} }
] ]
} }
...@@ -277,12 +459,6 @@ export default { ...@@ -277,12 +459,6 @@ export default {
name: '师资力量', name: '师资力量',
itemStyle: { itemStyle: {
normal: { normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0, shadowBlur: 0,
shadowColor: '#3EB8F7' shadowColor: '#3EB8F7'
} }
...@@ -342,6 +518,7 @@ export default { ...@@ -342,6 +518,7 @@ export default {
} }
} }
}, },
// 师资力量
getstaff () { getstaff () {
this.staffConfig = { this.staffConfig = {
option: { option: {
...@@ -373,6 +550,12 @@ export default { ...@@ -373,6 +550,12 @@ export default {
<style lang="less"> <style lang="less">
.managePlatform-right { .managePlatform-right {
height: 500px; height: 500px;
.minTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.faculty { .faculty {
margin-top: 7px; margin-top: 7px;
height: 156px; height: 156px;
...@@ -380,12 +563,6 @@ export default { ...@@ -380,12 +563,6 @@ export default {
.teachernum { .teachernum {
width: 134px; width: 134px;
height: 100%; height: 100%;
.teacherTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
} }
.staff { .staff {
margin-top: 47px; margin-top: 47px;
...@@ -398,12 +575,6 @@ export default { ...@@ -398,12 +575,6 @@ export default {
.coursetitle { .coursetitle {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.seemore { .seemore {
width: 94px; width: 94px;
cursor: pointer; cursor: pointer;
...@@ -424,32 +595,27 @@ export default { ...@@ -424,32 +595,27 @@ export default {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #6dcdff; color: #6dcdff;
span{
font-size: 26px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fff;
}
} }
} }
.line { .line {
height: 31px;
margin-top: 12px; margin-top: 12px;
display: flex;
margin-top: 5px;
margin-bottom: 4px;
span {
width: 0%;
height: 31px;
transition: width linear 300ms;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #00beff;
opacity: 0.5;
}
&.female {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #00de7d;
opacity: 0.5;
}
}
} }
} }
.learnContent{
height: 178px;
}
// 活动开展
.activ{
width: 100%;
height: 150px;
}
.right-bottom { .right-bottom {
position: relative; position: relative;
.seemore { .seemore {
......
src/pages/index/active.vue 0 → 100644
<template>
<!-- 活动开展 -->
<div class="activity">
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor"><span>查看更多</span><span></span></div>
</div>
<div class="activity-two">
<div class="left">
<count-roll :count="4166" />
<p class="act-num">活动开展次数</p>
</div>
<div class="line"></div>
<div class="right">
<line-bar
:layout="activeConfig.layout"
:option="activeConfig.option"
/>
</div>
</div>
</div>
</template>
<script>
import LineBar from '@/components/echarts/LineBar'
export default {
components: {
LineBar
},
data () {
return {
// 活动开展
activeConfig: {},
activeList: [
{name: '*****活动', value: 381},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 192}
]
}
},
mounted () {
this.getActive(this.activeList)
},
methods: {
getActive (data) {
let yData = data.map(v => v.name).reverse()
let y2Data = data.map(v => v.value).reverse()
let max = 4166
let maxData = new Array(data.length).fill(max)
console.log(maxData)
let pointData = data.reverse().map((v, i) => {
return {
xAxis: v.value,
yAxis: i
}
})
this.activeConfig = {
layout: {
width: '100%',
height: '100%'
},
option: {
base: {
xAxis: {
max: max
},
yAxis: [
{
axisLabel: {
color: '#fff',
align: 'left',
padding: [0, 0, 0, -60]
},
data: yData
}, {
data: y2Data.map(v => v)
}
]
},
seriesData: [
{
name: 'back',
barWidth: '5px',
data: maxData
},
{
name: 'show',
barWidth: '5px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)'
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData
},
data: y2Data
}
]
}
}
}
}
}
</script>
<style lang="less" scoped>
/* 活动开展 */
.activity{
width: 100%;
height: 140px;
.activity-one{
display: flex;
justify-content: space-between;
.act{
width: 72px;
height: 19px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
.mor{
width: 100px;
height: 17px;
display: flex;
span:nth-child(1){
width: 65px;
height: 17px;
margin-top: 2px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18D1C6;
line-height: 24px;
}
span:nth-child(2){
display: inline-block;
width: 28px;
height: 24px;
// margin-top: 5px!important;
background:url('../../../static/images/index/more.png') no-repeat;
}
}
}
.activity-two{
margin-top: 12px;
display: flex;
.left{
margin-top:10px;
.act-num{
width: 108px;
height: 18px;
margin-top: 20px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 17px;
}
}
.line{
width: 3px;
height: 76px;
margin: 10px 10px 0 10px;
background:url('../../../static/images/index/3.png');
}
.right{
width: 300px;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/pages/index/index.vue
...@@ -2,12 +2,14 @@ ...@@ -2,12 +2,14 @@
<div class="index-page"> <div class="index-page">
<layout :layoutConf="layoutSize"> <layout :layoutConf="layoutSize">
<page-head title="张謇教育基地管理平台" slot="header" /> <page-head title="张謇教育基地管理平台" slot="header" />
<!-- left --> <template v-if="fetchSuccess">
<left slot="left" /> <!-- left -->
<!-- center --> <left :leftData="leftData" slot="left" />
<center slot="center" /> <!-- center -->
<!-- right --> <center :centerData="centerData" slot="center" />
<right slot="right" /> <!-- right -->
<right :rightData="rightData" slot="right" />
</template>
</layout> </layout>
</div> </div>
</template> </template>
...@@ -27,7 +29,15 @@ export default { ...@@ -27,7 +29,15 @@ export default {
center: { center: {
width: '100%' width: '100%'
} }
} },
// 接口获取是否成功标识
fetchSuccess: false,
// 左侧数据
leftData: {},
// 中间数据
centerData: {},
// 右侧数据
rightData: {}
} }
}, },
...@@ -35,6 +45,40 @@ export default { ...@@ -35,6 +45,40 @@ export default {
Left, Left,
Center, Center,
Right Right
},
mounted () {
this.init()
},
methods: {
async init () {
try {
const data = await this.fetch('managePlatform')
this.fetchSuccess = true
// 左侧数据
this.leftData = {
gender: data.p1 || {}, // 男女比例
age: data.p2 || {}, // 年龄结构
edu: data.p3 || {}, // 学历情况
party: data.p4 || {}, // 党派分布
ethnic: data.p5 || {}, // 民族分布
industry: data.p6 || {}, // 行业分布
participate: data.p7 || {}, // 参与度
active: data.p8 || {}, // 活跃度
studentDemeanor: data.p9 || {}, // 学员风采
starClass: data.p10 || {} // 明星班级
}
// 中间数据
this.centerData = {
}
// 右侧数据
this.rightData = {
}
} catch (err) {
console.log('managePlatform >', err)
}
}
} }
} }
</script> </script>
......
src/public/apis/index.js
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
;(function () { ;(function () {
// 接口请求域名 // 接口请求域名
window.domain = { window.domain = {
stg: '', // 测试环境域名 stg: 'http://192.168.0.121:9000/', // 测试环境域名
prd: '' // 生产环境域名 prd: 'http://192.168.0.121:9000/' // 生产环境域名
} }
// 接口请求路径 // 接口请求路径
window.apis = { window.apis = {
managePlatform: 'api/page1info'
} }
})() })()
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