Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 5dccd570 by xiaxiansheng
Options

Merge branch '20210819' into 'master' 

20210819

See merge request vue-project/liangXing/frontEnd!55
parents 7785455d 94c3b638
Showing with 2563 additions and 66 deletions
.gitignore 0 → 100644
node_modules
dist
\ No newline at end of file
.gitmodules
[submodule "runner"]
path = runner
branch = master
url = http://123.207.147.179:8888/vue-project/Frame/runner.git
index.html
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础Vue框架</title>
<title>张謇企业家学院管理平台</title>
</head>
<body>
<div id="app"></div>
......
package-lock.json
......@@ -5582,12 +5582,11 @@
}
},
"echarts": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
"integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"tslib": "2.0.3",
"zrender": "5.1.1"
"zrender": "4.3.2"
}
},
"ee-first": {
......@@ -11066,6 +11065,86 @@
}
}
},
"sass-resources-loader": {
"version": "2.2.4",
"resolved": "https://registry.nlark.com/sass-resources-loader/download/sass-resources-loader-2.2.4.tgz",
"integrity": "sha1-Gob7pJnnSojLfOlfDJhEnzSNNg4=",
"dev": true,
"requires": {
"async": "^3.2.0",
"chalk": "^4.1.0",
"glob": "^7.1.6",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"async": {
"version": "3.2.1",
"resolved": "https://registry.nlark.com/async/download/async-3.2.1.tgz",
"integrity": "sha1-0ydOxm0QekdHakxJE2qs2wBmX8g=",
"dev": true
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646655305&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626715907927&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703342506&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
......@@ -12359,7 +12438,8 @@
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
"dev": true
},
"tty-browserify": {
"version": "0.0.0",
......@@ -13752,12 +13832,9 @@
}
},
"zrender": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
"integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
"requires": {
"tslib": "2.0.3"
}
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
package.json
......@@ -11,7 +11,7 @@
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ widgets/",
"precommit": "npm run lint-fix",
"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 && npm install"
},
"author": "",
"license": "ISC",
......@@ -53,6 +53,7 @@
"postcss-loader": "^3.0.0",
"rimraf": "^2.6.2",
"sass-loader": "^10.2.0",
"sass-resources-loader": "^2.2.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"vue-awesome-swiper": "^3.1.3",
......@@ -67,7 +68,7 @@
},
"dependencies": {
"axios": "^0.17.1",
"echarts": "^5.1.2",
"echarts": "^4.9.0",
"qs": "^6.10.1",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
......
runner @ fe3cb93f
Subproject commit f4746173cf454453e2895964ec3ed3d6a13d0e42
Subproject commit fe3cb93fbe4caf5aa09741b53b8e363fcde43fb2
src/components/Header/index.vue
<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>
<script>
let timer = null
export default {
name: 'Header',
props: {
title: {
type: String,
default: ''
}
},
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 () {
window.vm = this
this.currDate = fullDate
this.currTime = fullTime
timer = setTimeout(this.getCurrTime, 1000)
}
}
}
</script>
<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/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;
}
}
.close {
width: 24px;
height: 24px;
background: url('../../static/images/index/bulletFrame-close.png') no-repeat left top;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 102;
}
}
}
</style>
\ No newline at end of file
src/components/Swiper/index.vue 0 → 100644
<template>
<swiper :options="swiperOption">
<slot>
<!-- 滚动内容 -->
<!-- 下面的按需求引入 -->
</slot>
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</template>
<script>
import { swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
swiperOption: {
// 滚动方向
// direction: 'vertical',
// 展示swiper-slide的个数
slidesPerView: 1,
// 展示swiper-slide是否居中
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true
// 显示分页
// pagination: {
// el: '.swiper-pagination',
// clickable: true // 允许分页点击跳转
// },
// 设置点击箭头
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// }
}
}
},
components: {
swiper
},
created () {
this.initPage()
},
methods: {
initPage () {
// 合并参数
Object.assign(this.swiperOption, this.options)
}
}
}
</script>
<style lang="less" scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
.swiper-slide {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
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: 0,
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/BarPillarChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarPillarChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '136px'
}
}
},
// 图表配置
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: [3, 3, 0, 0],
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: false
},
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 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
title: {
show: false
},
grid: {
left: 0,
right: 0,
bottom: 10,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
color: '#469CCC'
},
data: []
},
yAxis: [
{
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisLabel: {
color: '#469CCC',
fontSize: 14,
fontFamily: 'CenturyGothic',
formatter: '{value}%'
}
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/BarStacked.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarStacked',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '31px'
}
}
},
// 图表配置
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: '25px',
stack: 'Tik Tok',
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: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.data.name + '}{b|' + params.data.value + params.data.unit + '}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
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: 0,
right: 0,
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/ChinaMap/index.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
import './registerMap'
export default {
name: 'ChinaMap',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '740px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '', id = 'china-map' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option,
id
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
color: '#31E4FF',
symbolSize: 5 // 图标大小
},
lineStyle: {
show: true,
normal: {
width: 0.5, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
color: '#fff',
curveness: 0.3 // 尾迹线条曲直度
}
},
data: []
}
// ================= 以下无需改动 ==================
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
// ================== 如果有多个series且`type`与当前不同在下方直接push ===================
// result.push({
// type: 'Gauge'
// ...
// })
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
// ================== 除series外的其他所有option ==================
tooltip: {
trigger: 'item',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var name = params.name
return name
}
},
visualMap: { // 图例值控制
show: false,
color: ['#31EEFF']
},
geo: {
map: 'china',
zoom: 1.2,
label: {
show: true,
fontSize: 16,
color: '#E6EFF9'
},
roam: false, // 是否允许缩放
emphasis: {
label: {
show: true,
fontSize: 16,
color: '#E6EFF9'
}
},
itemStyle: {
normal: {
areaColor: '#00192E',
borderWidth: 1, // 设置外层边框
borderColor: '#126490'
},
emphasis: {
areaColor: '#00192E',
shadowColor: '#11638E',
shadowBlur: 20,
label: {
color: '#fff',
fontSize: 20
}
}
}
}
}
// ================== 以下无需改动 ==================
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/ChinaMap/mapConfig.js 0 → 100644
export default {
// TODO: 各省经纬度
getChinaGeoCoordMap () {
return {
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
'吉林': [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
'辽宁': [123.1238, 42.1216],
'河北': [114.4995, 38.1006],
'天津': [117.4219, 39.4189],
'山西': [112.3352, 37.9413],
'陕西': [109.1162, 34.2004],
'甘肃': [103.5901, 36.3043],
'宁夏': [106.3586, 38.1775],
'青海': [101.4038, 36.8207],
'新疆': [87.9236, 43.5883],
'西藏': [91.11, 29.97],
'四川': [103.9526, 30.7617],
'重庆': [108.384366, 30.439702],
'山东': [117.1582, 36.8701],
'河南': [113.4668, 34.6234],
'江苏': [118.8062, 31.9208],
'南通': [120.864608, 32.016212],
'安徽': [117.29, 32.0581],
'湖北': [114.3896, 30.6628],
'浙江': [119.5313, 29.8773],
'福建': [119.4543, 25.9222],
'江西': [116.0046, 28.6633],
'湖南': [113.0823, 28.2568],
'贵州': [106.6992, 26.7682],
'云南': [102.9199, 25.4663],
'广东': [113.12244, 23.009505],
'广西': [108.479, 23.1152],
'海南': [110.3893, 19.8516],
'上海': [121.4648, 31.2891]
}
},
// 地图数据
getChinaDatas () {
return [
[{
name: '黑龙江',
value: 0
}],
[{
name: '内蒙古',
value: 0
}],
[{
name: '吉林',
value: 0
}],
[{
name: '辽宁',
value: 0
}],
[{
name: '河北',
value: 0
}],
[{
name: '天津',
value: 0
}],
[{
name: '山西',
value: 0
}],
[{
name: '陕西',
value: 0
}],
[{
name: '甘肃',
value: 0
}],
[{
name: '宁夏',
value: 0
}],
[{
name: '青海',
value: 0
}],
[{
name: '新疆',
value: 0
}],
[{
name: '西藏',
value: 0
}],
[{
name: '四川',
value: 0
}],
[{
name: '重庆',
value: 0
}],
[{
name: '山东',
value: 0
}],
[{
name: '河南',
value: 0
}],
[{
name: '江苏',
value: 0
}],
[{
name: '南通',
value: 0
}],
[{
name: '安徽',
value: 0
}],
[{
name: '湖北',
value: 0
}],
[{
name: '浙江',
value: 0
}],
[{
name: '福建',
value: 0
}],
[{
name: '江西',
value: 0
}],
[{
name: '湖南',
value: 0
}],
[{
name: '贵州',
value: 0
}],
[{
name: '广西',
value: 0
}],
[{
name: '海南',
value: 0
}],
[{
name: '上海',
value: 1
}]
]
}
}
src/components/echarts/GuagePart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'GuagePart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '95px'
}
}
},
// 图表配置
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 = [{
// ================== series ==================
seriesName: 'main',
type: 'gauge',
radius: '100%',
clockwise: false,
startAngle: 0,
endAngle: -270,
progress: {
show: true,
width: 7,
itemStyle: {
color: '#3EB8F7'
}
},
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [[1, '#13293C']]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
anchor: {
show: false
},
title: {
show: true,
fontSize: 18,
fontFamily: 'CenturyGothic',
color: '#ffffff',
fontWeight: '400',
offsetCenter: [0, '30%']
},
detail: {
valueAnimation: true,
formatter: function (value) {
return value
},
fontSize: 30,
fontWeight: '400',
color: '#ffffff',
fontFamily: 'MicrosoftYaHei',
offsetCenter: [0, '-20%']
},
data: []
}]
// ================= 以下无需改动 ==================
// 该模板适用于series内部的多个图表配置差异较大的情况，传入的series对象会与组件中seriesName相同的对象进行合并，如无相同seriesName则添加到末尾
const result = defSeriesOpts
const { seriesData = [] } = this.option
if (seriesData.length) {
const filterData = seriesData.filter(v => this.utils.isObject(v)) || []
for (let i = 0, len = filterData.length; i < len; i++) {
const item = filterData[i] || {}
const matchIndex = defSeriesOpts.findIndex(g => g.seriesName === item.seriesName)
if (matchIndex > -1) {
const newTempSeriesObj = this.deepMerge({}, result[matchIndex], item)
result[matchIndex] = newTempSeriesObj
} else {
// 新增的series必须配置`type`属性
item.type && result.push(item)
}
}
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
// ================== 除series外的其他所有option ==================
}
// ================== 以下无需改动 ==================
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base || {})
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/LineBar.vue 0 → 100644
<template>
<div class="bar-chart">
<chart-el :chartOpt="barChartConf" />
</div>
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'lineBar',
mixins: [mixinChart],
data () {
return {
barChartConf: {}
}
},
props: {
// 图表布局配置, width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '100%'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.barChartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = [
{
name: 'back',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: '#233549'
}
},
barGap: '-100%',
data: []
},
{
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new this.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 result = [{}, {}]
result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0])
result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[1])
return result
},
/**
* @method getChartOption 图表配置
*/
getChartOption (customOption = {}) {
const defaultOption = {
title: {
show: false
},
grid: {
left: 0,
right: 5,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category', // y 轴左侧的数据
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', // y 轴右侧的数据
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: []
}
]
}
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/LineChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'LineChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '160px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '160px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'line',
symbol: 'circle',
symbolSize: 4,
lineStyle: {
width: 2,
shadowOffsetX: 5,
shadowOffsetY: 3,
shadowBlur: 20
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
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 = ['#00BEFF', '#00DE7D']
const defaultOption = {
color: defaultColors,
title: {
show: false
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
top: '-2%',
right: '0%',
itemGap: 40,
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'MicrosoftYaHei'
},
data: []
},
tooltip: {
trigger: 'item',
position: 'top',
padding: [3, 5],
borderColor: '#3EB9FF',
backgroundColor: '#1771B8',
textStyle: {
height: 12,
fontSize: 14,
color: '#fff'
},
formatter (item) {
return item.value
}
},
grid: {
left: 0,
right: 30,
bottom: 0,
top: 20,
containLabel: true
},
xAxis: {
type: 'category',
// 两边留白
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#3EB9FF',
opacity: 0.3
}
},
data: []
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#9CBCF9',
opacity: 0.5
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
}
}
}
// 添加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%', '52%'],
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/index.js
......@@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
import './public/apis'
import createStore from './store' // Vuex
import createRouter from './router/router'
import UsePlugin from 'runner/common/plugins'
......
src/pages/index.vue deleted 100644 → 0
<template>
<div class="index-page">
<layout :layoutConf="layoutSize">
<Header title="头部标题" slot="header" />
<!-- left -->
<div class="index-left" slot="left"></div>
<!-- center -->
<div class="index-center" slot="center"></div>
<!-- right -->
<div class="index-right" slot="right"></div>
</layout>
</div>
</template>
<script>
export default {
data () {
return {
// 布局设置
layoutSize: {
leftWidth: '530px',
rightWidth: '530px',
center: {
width: '100%'
}
}
}
}
}
</script>
<style lang="less" scoped>
</style>
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 0 → 100644
<template>
<div class="index-page">
<layout :layoutConf="layoutSize">
<page-head title="张謇企业家学院管理平台" slot="header" />
<template v-if="fetchSuccess">
<!-- left -->
<left :leftData="leftData" slot="left" />
<!-- center -->
<center :centerData="centerData" slot="center" />
<!-- right -->
<right :rightData="rightData" slot="right" />
</template>
</layout>
</div>
</template>
<script>
import Left from './Left.vue'
import Center from './Center.vue'
import Right from './Right.vue'
export default {
data () {
return {
// 布局设置
layoutSize: {
leftWidth: '510px',
rightWidth: '510px',
center: {
width: '100%'
}
},
// 接口获取是否成功标识
fetchSuccess: false,
// 左侧数据
leftData: {},
// 中间数据
centerData: {},
// 右侧数据
rightData: {}
}
},
components: {
Left,
Center,
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 = {
survey: data.p11 || {} // 中间概况数据
}
// 右侧数据
this.rightData = {
staff: data.p12 || {}, // 师资力量
coursedata: data.p13 || {}, // 教学课程
line: data.p14 || {}, // 教学线上线下比例
learn: data.p15 || {}, // 学习内容
active: data.p16 || {} // 活动开展
}
} catch (err) {
console.log('managePlatform >', err)
}
}
}
}
</script>
<style lang="less" scoped>
.index-page {
width: 1920px;
margin: 0 auto;
}
</style>
src/pages/login.vue 0 → 100644
<template>
<div class="login">
<page-head title="张謇企业家学院管理平台" slot="header" />
<div class="login-main">
<!-- 左 -->
<div class="login-main-left">
<div class="login-main-left1"></div>
<div class="login-main-left2"></div>
<div class="login-main-left3">
<div class="login-main-title">学院介绍</div>
<div class="login-main-content">
<vue-seamless-scroll
:data="schoolClass"
:class-option="classOption"
class="login-main-neirong"
>
<ul>
<li v-for="(item, index) in schoolClass" :key="index">
<span>{{item.name}}</span><span>{{item.value}}</span>
</li>
<li>1</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
<!-- 中 -->
<div class="login-main-center">
<div class="login-main-curr">
<div
class="login-main-point"
@click="changeUrl"
></div>
</div>
<div class="login-main-active"></div>
<div class="login-main-xueyuan"></div>
</div>
<!-- 右 -->
<div class="login-main-right">
<div class="login-main-right1"></div>
<div class="login-main-right2"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
flag: true,
schoolClass: [
{name: '名 称：', value: '张謇企业家学院'},
{name: '所在地：', value: '江苏·南通'},
{name: '揭牌时间：', value: '2021.01.06'},
{name: '简介：', value: '学院的组建，既是为了加强企业家队伍培养，提升企业家能力素质，激发企业家社会责任意识与担当，着力培育一批具有“爱国情怀、开放胸襟、创新精神、诚信品格、社会责任”的“张謇式”新一代企业家群体；也有利于助推我市打造一流营商环境，厚植民营经济发展沃土，推动实体经济高质量发展，为南通勇当全省“两争一前列”排头兵提供力 '}
],
// 学院介绍轮播图
classOption: {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
methods: {
changeUrl () {
this.$router.push({path: '/index'})
}
}
}
</script>
<style lang="less" scoped>
.login{
width: 100%;
height: 100%;
background:url('../../static/images/login/32copy.png') no-repeat center;
background-size:contain;
.login-main{
width: 1920px;
height: 100%;
margin:0 auto;
display: flex;
.login-main-left ,.login-main-right{
margin-left: 20px;
margin-right: 20px;
width: 380px;
height: 100%;
}
// 左
.login-main-left1{
margin-top: 20px;
height: 445px;
background:url('../../static/images/login/peixun.png') no-repeat;
background-size: 360px 425px;
}
.login-main-left2{
margin-top: -10px;
height: 245px;
background:url('../../static/images/login/56.png') no-repeat;
background-size: 340px 240px;
}
.login-main-left3{
margin-top: 30px;
width: 100%;
height: 285px;
.login-main-title{
height: 17px;
font-size: 20px;
font-family: Alibaba PuHuiTi 2.0;
font-weight: normal;
color: rgba(255, 255, 255, .8);
line-height: 24px;
text-align: center;
background: url('../../static/images/login/9.png') 8px 14px no-repeat;
}
.login-main-content{
width: 340px;
height: 215px;
margin-top: 20px;
margin-left: 5px;
background:url('../../static/images/login/312.png') no-repeat;
background-size: 336px 213px;
display: flex;
.login-main-neirong{
width: 300px;
height: 160px;
margin: auto;
overflow: hidden;
ul{
li {
width: 100%;
font-size: 16px;
font-family: Alibaba PuHuiTi 2.0;
font-weight: normal;
line-height: 28px;
white-space :pre-line;
span:nth-child(1){
color: #D6EEFF;
}
span:nth-child(2){
color: #5CB8F9;
}
}
}
}
}
}
// 中
.login-main-center{
width: 1290px;
height: 100%;
margin-left: 20px;
margin-right: 20px;
position: relative;
.login-main-curr {
width: 100%;
height: 651px;
// position: absolute;
margin-top: 170px;
margin-left: 80px;
background:url('../../static/images/login/60.png') no-repeat center;
animation: flashAni 4s infinite normal;
.login-main-point{
width: 600px;
height: 600px;
border-radius: 50%;
margin-top: 20px;
margin-left: 70px;
cursor: pointer;
}
}
@keyframes flashAni {
0% {
transform: translate(0px, 0px)
}
50%{
transform: translate(0px, -20px)
}
100% {
transform: translate(0px, 0px)
}
}
// 放大放小图
.login-main-active{
width: 300px;
height: 200px;
position: absolute;
top:630px;
right: 50px;
background:url('../../static/images/login/7.png') no-repeat center;
animation: acc 5s infinite normal;
}
@keyframes acc {
0% {
transform:scale(1);
}
50%{
transform:scale(1.1);
}
100% {
transform:scale(1);
}
}
.login-main-xueyuan{
width: 910px;
height: 160px;
position: absolute;
top:754px;
right: 120px;
background:url('../../static/images/login/zhangjiancopy.png') no-repeat center;
background-size: contain;
}
}
// 右
.login-main-right1{
margin-top: 20px;
height: 300px;
background:url('../../static/images/login/shimingyuanjing.png') no-repeat;
background-size: 100% 100%;
}
.login-main-right2{
margin-top: 40px;
margin-bottom: 230px;
height: 430px;
background:url('../../static/images/login/2021.png') no-repeat;
background-size: 100% 100%;
}
}
}
</style>
\ No newline at end of file
src/public/apis/index.js
......@@ -4,12 +4,12 @@
;(function () {
// 接口请求域名
window.domain = {
stg: '', // 测试环境域名
prd: '' // 生产环境域名
stg: 'http://192.168.0.121:13269', // 测试环境域名
prd: '' // 生产环境域名 http://192.168.0.121:9000/
}
// 接口请求路径
window.apis = {
managePlatform: '/api/page1info'
}
})()
src/public/apis/proxy.js
......@@ -4,7 +4,7 @@
module.exports = {
host: '127.0.0.1',
port: '8082', // 自定义端口号
port: '8087', // 自定义端口号
proxyTable: { // Vue开发环境跨域配置
'/apis': {
target: 'http://test-a.com',
......
src/public/plugins/index.js
......@@ -2,6 +2,10 @@ import mixins from '../mixins'
// Vue插件(Vue plugin)
import ContentContainer from 'components/ContentContainer'
// 页面头
import Header from 'components/Header'
// 插件
import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {}
......@@ -15,6 +19,9 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.mixin(mixins)
// 内容容器
Vue.component('content-container', ContentContainer)
Vue.component('page-head', Header)
// 弹框组件
Vue.component('popup-frame', PopupFrame)
}
export default UsePlugin
src/router/routes.js
// 导入页面名称
import Index from '@/pages/index.vue'
// 管理平台
import Index from '@/pages/index/index.vue'
import Login from '@/pages/login'
export default [
{
path: '/',
redirect: '/index'
redirect: '/login'
},
{
path: '/index',
component: Index
},
{
path: '/login',
component: Login
}
]
static/styles/layoutMain.less
// 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效
#layoutMain {}
.main-container {
background: url('../images/index/bg.png') no-repeat left top;
background-size: cover;
}
#layoutMain {
height: 1080px;
.layout-main__left {
padding-left: 20px;
padding-right: 10px;
background: url('../images/index/leftBg.png') no-repeat right top;
}
.layout-main__right {
padding-left: 10px;
padding-right: 20px;
background: url('../images/index/rightBg.png') no-repeat left top;
}
}
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