Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit d6e89e1d by yuanfeng
Options

Merge remote-tracking branch 'origin/20210819' into yuanfeng

parents 9f3e1381 2a4eda66
Showing with 397 additions and 84 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 @@
"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ widgets/",
"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"
},
"author": "",
......
src/components/PopupFrame.vue 0 → 100644
<template>
<div class="PopupFrame" v-if="visible">
<div class="iframe" :style="`width:${layout.width};height:${layout.height}`">
<!-- <div class="title">
<span>
{{ title }}
</span>
</div> -->
<div class="close" @click="closeBullet"></div>
<div class="content">
<!-- 内容部分 -->
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PopupFrame',
data () {
return {
}
},
props: {
visible: {
type: Boolean,
default: false
},
title: '',
layout: {
type: Object,
default () {
return {
width: '1440px',
height: '815px'
}
}
}
},
components: {
},
methods: {
// 关闭弹出框
closeBullet () {
this.$emit('beforeClose', false)
}
}
}
</script>
<style lang="less">
.PopupFrame {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 101;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
.iframe {
width: 1280px;
height: 721px;
position: relative;
background-color: rgba(0, 0, 0, 0.8);
.title {
width: 1090px;
height: 38px;
text-align: center;
margin: 0 auto;
span {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
line-height: 22px;
background: linear-gradient(0deg, #a3dcff 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
top: 7px;
}
}
.content {
margin-top: 15px;
}
.close {
width: 24px;
height: 24px;
background: url('../../static/images/index/bulletFrame-close.png')
no-repeat left top;
position: absolute;
top: 36px;
right: 19px;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
src/pages/index/Right.vue
<template>
<div class="managePlatform-right">
<title-line :con="'师资/课程/活动'"></title-line>
<!-- 师资力量 -->
<div class="faculty">
<div class="teachernum">
<div class="teacherTitle">师资力量</div>
<div class="minTitle">师资力量</div>
<pie-chart :option="eduConfig.option" />
</div>
<div class="staff">
<bar-chart :option="staffConfig.option" />
</div>
</div>
<!-- 教学课程 -->
<div class="course">
<div class="coursetitle">
<div class="left">教学课程</div>
<div class="minTitle">教学课程</div>
<div class="seemore">查看更多</div>
</div>
<p class="percent">
<span>课程数</span>
<span>学习总时长</span>
<span>出勤率</span>
<span>课程数<count-to :endVal="120" /></span>
<span>学习总时长<count-to :endVal="1248" /></span>
<span>出勤率<count-to :endVal="88" suffix="%"/></span>
</p>
<div class="line">
<bar-chart :option="lineConfig.option" />
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
</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
:visible.sync="showVisible"
@beforeClose="beforeCloses"
>
<div class="img">
<img src="../../../static/images/index/supply-demand2.jpg" alt="">
</div>
</popup-frame>
<div class="right-bottom">
<div class="seemore" @click="topicDialog">查看更多</div>
<title-line :con="'交流会/专题'"></title-line>
<div class="topic">
<div class="left">
......@@ -120,12 +136,13 @@ export default {
},
data () {
return {
showVisible: false,
// 师资力量
eduConfig: {},
edu: [
{ value: 168, name: '教师数' }
],
staffConfig: {},
// 师资数据
staff: [
{
name: '****教授',
......@@ -141,6 +158,7 @@ export default {
value: 12
}
],
// 教学课程
lineConfig: {},
line: [
{
......@@ -151,10 +169,38 @@ export default {
value: 68
}
],
genderPercent: {
male: '32%',
female: '68%'
// 学习内容
learnConfig: {},
learn: [
{
name: '**学习',
value: 65
},
{
name: '**学习',
value: 25
},
{
name: '**学习',
value: 85
},
{
name: '**学习',
value: 70
},
{
name: '**学习',
value: 100
},
{
name: '**学习',
value: 40
},
{
name: '**学习',
value: 45
}
],
swiperOption: {
mousewheel: true,
centeredSlides: true,
......@@ -188,11 +234,134 @@ export default {
this.getstaff()
this.getEdu()
this.getline()
this.getlearn()
},
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 () {
this.lineConfig = {
layout: {
width: '100%',
height: '31px'
},
option: {
base: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
}
},
seriesData: [
{
name: 'A',
......@@ -200,30 +369,38 @@ export default {
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
color: 'rgba(0, 190, 255, .3)',
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [2, 0, 0, 2]
barBorderRadius: [5, 0, 0, 5]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
}
},
data: [32]
data: [this.line[0]]
},
{
name: 'B',
......@@ -231,29 +408,38 @@ export default {
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
color: 'rgba(0, 222, 125, .3)',
shadowOffsetY: 0,
shadowOffsetX: 0
shadowOffsetX: 0,
barBorderRadius: [0, 5, 5, 0]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
}
},
data: [68]
data: [this.line[1]]
}
]
}
......@@ -273,12 +459,6 @@ export default {
name: '师资力量',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
......@@ -338,6 +518,7 @@ export default {
}
}
},
// 师资力量
getstaff () {
this.staffConfig = {
option: {
......@@ -353,6 +534,14 @@ export default {
}
}
}
},
// 交流会/专题弹框
topicDialog () {
this.showVisible = true
},
// 关闭交流会/专题弹框弹框前的回调
beforeCloses (flag) {
this.showVisible = flag
}
}
}
......@@ -361,6 +550,12 @@ export default {
<style lang="less">
.managePlatform-right {
height: 500px;
.minTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.faculty {
margin-top: 7px;
height: 156px;
......@@ -368,12 +563,6 @@ export default {
.teachernum {
width: 134px;
height: 100%;
.teacherTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
}
.staff {
margin-top: 47px;
......@@ -386,12 +575,6 @@ export default {
.coursetitle {
display: flex;
justify-content: space-between;
.left {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.seemore {
width: 94px;
cursor: pointer;
......@@ -399,7 +582,7 @@ export default {
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png')
background: url('./../../../static/images/index/more.png')
no-repeat right;
}
}
......@@ -412,31 +595,21 @@ export default {
font-family: Microsoft YaHei;
font-weight: 400;
color: #6dcdff;
span{
font-size: 26px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fff;
}
}
}
.line {
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;
}
margin-top: 12px;
}
}
.learnContent{
height: 178px;
}
// 活动开展
.activ{
......@@ -444,6 +617,20 @@ export default {
height: 150px;
}
.right-bottom {
position: relative;
.seemore {
position: absolute;
top: 0;
right: 0;
width: 94px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/more.png')
no-repeat right;
}
.topic {
margin-top: 19px;
width: 482px;
......@@ -486,16 +673,10 @@ export default {
margin-top: 5px;
display: flex;
justify-content: space-between;
// .swiper-pagination-bullet {
// width: 6px;
// height: 6px;
// background: rgba(62, 157, 247, 0.4);
// }
// .swiper-pagination-bullet-active {
// background: #3e9df7;
// }
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: rgba(62, 157, 247, 0.4);
}
.swiper-pagination-bullet-active {
......@@ -520,7 +701,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 3px;
top: 5px;
top: 6px;
}
span:nth-child(2) {
left: 20px;
......@@ -532,7 +713,7 @@ export default {
}
span:nth-child(4) {
left: 16px;
top: 108px;
top: 105px;
}
}
.text {
......@@ -550,7 +731,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 0;
top: 7px;
top: 9px;
}
.item:nth-child(2) {
left: 10px;
......@@ -558,7 +739,7 @@ export default {
}
.item:nth-child(3) {
left: 0;
top: 80px;
top: 78px;
}
.item:nth-child(4) {
left: 10px;
......
src/pages/index/active.vue
......@@ -142,7 +142,7 @@ export default {
width: 28px;
height: 24px;
// margin-top: 5px!important;
background:url('../../../static/images/index/查看更多.png') no-repeat;
background:url('../../../static/images/index/more.png') no-repeat;
}
}
......
src/public/plugins/index.js
......@@ -6,6 +6,7 @@ import ContentContainer from 'components/ContentContainer'
import Header from 'components/Header'
// 插件
import CountTo from 'components/CountTo.vue'
import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {}
......@@ -22,6 +23,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-head', Header)
// 数组滚动
Vue.component('count-to', CountTo)
// 弹框组件
Vue.component('popup-frame', PopupFrame)
}
export default UsePlugin
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