Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit c70297a4 by yangqingjie
Options

update

parents e206b832 08b96681
Showing with 389 additions and 207 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/CountRoll.vue 0 → 100644
<template>
<div class="chartNum">
<div :class="isMin ? 'box-item-min' : 'box-item'">
<li v-for="(item,index) in orderNum"
:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
        <span v-if="!isNaN(item)">
         <i ref="numberItem">0123456789</i>
       </span>
       <span class="comma" v-else>{{item}}</span>
</li>
</div>
</div>
</template>
<script>
export default {
name: 'CountRoll',
props: {
count: Number,
isMin: {
type: Boolean,
default: false
}
},
data () {
return {
orderNum: []
}
},
mounted () {
this.toOrderNum(this.count)
this.increaseNumber()
},
deactivated () {
clearInterval(this.timer)
},
methods: {
// TODO: 定时器
increaseNumber () {
this.timer = setInterval(() => {
this.setNumberTransform()
}, 300)
},
// TODO：设置文字滚动
setNumberTransform () {
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
const numberArr = this.orderNum.filter(item => !isNaN(item))
// 结合CSS 对数字字符进行滚动
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
}
clearInterval(this.timer)
},
// TODO: 处理数字
toOrderNum (num) {
num = this.utils.formatNumber(num, num.length)
this.orderNum = num // 将其便变成数据，渲染至滚动数组
}
}
}
</script>
<style scoped lang='less'>
.chartNum {
.box-item {
position: relative;
font-size: 36px;
line-height: 48px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 20px;
height: 48px;
border: 1px solid #2B79BC;
margin-right: 5px;
line-height: 10px;
font-size: 36px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 30px;
height: 48px;
display: flex;
list-style: none;
margin-right: 5px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 6px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
.box-item-min {
position: relative;
font-size: 28px;
line-height: 36px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 24px;
height: 36px;
border: 1px solid #2B79BC;
margin-right: 8px;
line-height: 10px;
font-size: 28px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 24px;
height: 36px;
display: flex;
list-style: none;
margin-right: 8px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 2px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
}
</style>
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/PopupFrame.vue 0 → 100644
<template>
<div class="PopupFrame" v-if="visible">
<div class="iframe">
<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: ''
},
components: {
},
methods: {
// 关闭弹出框
closeBullet () {
this.$emit('beforeClose', 1)
}
}
}
</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;
padding: 0 30px;
background: red;
// background: url('../../static/images/bulletFrame-bg.png') no-repeat -36px -23px;
.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/bulletFrame-close.png')
// no-repeat left top;
position: absolute;
top: 13px;
right: 13px;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
src/pages/index/active.vue deleted 100644 → 0
<template>
<!-- 活动开展 -->
<div class="activity">
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor" @click="getMore">查看更多</div>
</div>
<div class="activity-two">
<div class="left">
<div class="act-left">
<count-roll :count="4166" class="act-style"/> <span>次</span>
</div>
<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: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
]
}
},
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)
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
}
]
}
}
},
// 查看更多的点击事件
getMore () {
console.log(123)
}
}
}
</script>
<style lang="less" scoped>
/* 活动开展 */
.activity{
width: 100%;
height: 140px;
.activity-one{
height: 20px;
display: flex;
justify-content: space-between;
.act{
width: 72px;
height: 20px;
margin-top: -5px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
.mor{
width: 94px;
height: 20px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background:url('../../../static/images/index/more.png') no-repeat right;
}
}
.activity-two{
margin-top: 12px;
display: flex;
justify-content: space-between;
.left{
margin-top:10px;
width: 150px;
.act-left{
display: flex;
.act-style{
width: 150px;
}
span{
width: 16px;
height: 17px;
margin-top: 22px;
margin-left: 12px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 35px;
}
}
.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 0 0 20px;
background:url('../../../static/images/index/3.png');
}
.right{
width: 270px;
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