453530270@qq.com
3 years ago
33 changed files with 26887 additions and 1 deletions
@ -0,0 +1,23 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -1,3 +1,26 @@ |
|||
# btgymm |
|||
|
|||
宝体大屏手机版 |
|||
宝安体育文化馆监控大屏手机端 |
|||
|
|||
## Project setup |
|||
``` |
|||
yarn install |
|||
``` |
|||
|
|||
### Compiles and hot-reloads for development |
|||
``` |
|||
yarn serve |
|||
``` |
|||
|
|||
### Compiles and minifies for production |
|||
``` |
|||
yarn build |
|||
``` |
|||
|
|||
### Lints and fixes files |
|||
``` |
|||
yarn lint |
|||
``` |
|||
|
|||
### Customize configuration |
|||
See [Configuration Reference](https://cli.vuejs.org/config/). |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
] |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "es5", |
|||
"module": "esnext", |
|||
"baseUrl": "./", |
|||
"moduleResolution": "node", |
|||
"paths": { |
|||
"@/*": [ |
|||
"src/*" |
|||
] |
|||
}, |
|||
"lib": [ |
|||
"esnext", |
|||
"dom", |
|||
"dom.iterable", |
|||
"scripthost" |
|||
] |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,48 @@ |
|||
{ |
|||
"name": "btgymm", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"dependencies": { |
|||
"core-js": "^3.8.3", |
|||
"echarts": "^5.4.2", |
|||
"less-loader": "^11.1.3", |
|||
"vue": "^3.2.13", |
|||
"vue-router": "^4.0.3", |
|||
"vuex": "^4.0.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/core": "^7.12.16", |
|||
"@babel/eslint-parser": "^7.12.16", |
|||
"@vue/cli-plugin-babel": "~5.0.0", |
|||
"@vue/cli-plugin-eslint": "~5.0.0", |
|||
"@vue/cli-plugin-router": "~5.0.0", |
|||
"@vue/cli-plugin-vuex": "~5.0.0", |
|||
"@vue/cli-service": "~5.0.0", |
|||
"eslint": "^7.32.0", |
|||
"eslint-plugin-vue": "^8.0.3" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/vue3-essential", |
|||
"eslint:recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "@babel/eslint-parser" |
|||
} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead", |
|||
"not ie 11" |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,36 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-cn"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,viewport-fit=cover，initial-scale=1.0"> |
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|||
<title><%= htmlWebpackPlugin.options.title %></title> |
|||
<style> |
|||
html{margin: 0;padding: 0;} |
|||
body{ |
|||
background-color: #080A25; |
|||
background-image: linear-gradient(#080A25,#101010,90deg); |
|||
color: #fff; |
|||
min-height: 100%; |
|||
overflow-y: auto; |
|||
} |
|||
a {color: #fff;text-decoration: none;} |
|||
#app{ |
|||
min-width: 320px; |
|||
max-width: 760px; |
|||
position: relative; |
|||
height: 100%; |
|||
margin: 0 auto 4rem; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<noscript> |
|||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|||
</noscript> |
|||
<div id="app"></div> |
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<router-view/> |
|||
<nav class="navbar"> |
|||
<router-link to="/">总览</router-link> |
|||
<router-link to="/tyc">体育馆</router-link> |
|||
<router-link to="/gym">体育馆2</router-link> |
|||
</nav> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.navbar{ |
|||
position: fixed; |
|||
height: 2.2rem; |
|||
width: 100%; |
|||
display: block; |
|||
margin-top: 4rem; |
|||
|
|||
left: 0; |
|||
bottom: 0; |
|||
padding: 6rpx 0 0 0.6rem; |
|||
z-index: 90; |
|||
} |
|||
|
|||
.navbar a{ |
|||
display: block; |
|||
float: left; |
|||
width: 33.33%; |
|||
text-align: center; |
|||
line-height: 36px; |
|||
/* margin-left: 12px; |
|||
padding-left: 12px; */ |
|||
background-color: #080A25; |
|||
} |
|||
|
|||
.navbar a.router-link-exact-active{ |
|||
background-color: #026AFF; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
.navbar a.router-link-active .navbar a.router-link-exact-active{ |
|||
background-color: #026AFF; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 401 KiB |
|
After Width: | Height: | Size: 591 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 244 B |
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
For a guide and recipes on how to configure / customize this project,<br> |
|||
check out the |
|||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|||
</p> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,6 @@ |
|||
import { createApp } from 'vue' |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import store from './store' |
|||
|
|||
createApp(App).use(store).use(router).mount('#app') |
|||
@ -0,0 +1,31 @@ |
|||
import { createRouter, createWebHashHistory } from 'vue-router' |
|||
import HomeView from '../views/HomeView.vue' |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
name: 'home', |
|||
component: HomeView |
|||
}, |
|||
{ |
|||
path: '/tyc', |
|||
name: 'tyc', |
|||
// route level code-splitting
|
|||
// this generates a separate chunk (about.[hash].js) for this route
|
|||
// which is lazy-loaded when the route is visited.
|
|||
component: () => import(/* webpackChunkName: "about" */ '../views/TycView.vue') |
|||
}, |
|||
{ |
|||
path: '/gym', |
|||
name: 'gymvm', |
|||
component: () => import(/* webpackChunkName: "gymv" */ '../views/GymView.vue') |
|||
}, |
|||
] |
|||
|
|||
const router = createRouter({ |
|||
history: createWebHashHistory(), |
|||
routes |
|||
// linkExactActiveClass:"active"
|
|||
}) |
|||
|
|||
export default router |
|||
@ -0,0 +1,14 @@ |
|||
import { createStore } from 'vuex' |
|||
|
|||
export default createStore({ |
|||
state: { |
|||
}, |
|||
getters: { |
|||
}, |
|||
mutations: { |
|||
}, |
|||
actions: { |
|||
}, |
|||
modules: { |
|||
} |
|||
}) |
|||
@ -0,0 +1,10 @@ |
|||
<template> |
|||
<div class=""> |
|||
第三個頁面 |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default{ |
|||
name:"gym" |
|||
} |
|||
</script> |
|||
@ -0,0 +1,489 @@ |
|||
<template> |
|||
<div class="home"> |
|||
<div class="topnav">总览</div> |
|||
<!-- 图片 --> |
|||
<div class="gymbox"> |
|||
<div class="gympic"> |
|||
<img src="../assets/gymbg.png" /> |
|||
</div> |
|||
<div class="gymnum"> |
|||
<span>年度进馆总人数</span> |
|||
<p>23,556</p> |
|||
</div> |
|||
</div> |
|||
<!-- 今日进馆 --> |
|||
<div class="numbox"> |
|||
<span class="numicon"><img src="../assets/icon01.png" /></span> |
|||
<div class="numdiv"> |
|||
<p class="ndtitle">23566</p> |
|||
<p class="nddesc">今日进馆总人数</p> |
|||
</div> |
|||
</div> |
|||
<!-- 本周进馆 --> |
|||
<div class="numbox"> |
|||
<span class="numicon"><img src="../assets/icon02.png" /></span> |
|||
<div class="numdiv"> |
|||
<p class="ndtitle">23566</p> |
|||
<p class="nddesc">本周进馆总人数</p> |
|||
</div> |
|||
</div> |
|||
<!-- 本月进馆 --> |
|||
<div class="numbox"> |
|||
<span class="numicon"><img src="../assets/icon03.png" /></span> |
|||
<div class="numdiv"> |
|||
<p class="ndtitle">23566</p> |
|||
<p class="nddesc">本月进馆总人数</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 客流趋势 --> |
|||
<div class="klqs"> |
|||
<div class="klqs_bg">客流趋势</div> |
|||
<div class="klbtn"> |
|||
<span>年</span> |
|||
<span>月</span> |
|||
<span>日</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="echartzone" id="showorders" style='min-width:100%;overflow-x: auto; height:16rem'></div> |
|||
|
|||
<!-- 场馆饱和度 --> |
|||
<div class="cgbox"> |
|||
<!-- 場館圖表 --> |
|||
<div id="cgchart"></div> |
|||
</div> |
|||
|
|||
<!-- 今日场馆人数 --> |
|||
<div class="today_rs"> |
|||
<div class="tdrs_title">今日各馆趋势</div> |
|||
<div id="tdrs" style="width:100%;height: 26rem;"></div> |
|||
</div> |
|||
|
|||
<!-- 個場館實時進館人數 --> |
|||
<div class="pcgrs"> |
|||
<div class="pcgrs_title">各场馆实时进馆人数</div> |
|||
<!-- 場館實時 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
<!-- #2 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
<!-- 3 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
<!-- 4 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
<!-- 5 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
<!-- 6 --> |
|||
<div class="pcg_item"> |
|||
<span class="pcpos">体育场</span> |
|||
<p class="pcval">23,456</p> |
|||
<span class="pcrate">40%</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'HomeView', |
|||
data() { |
|||
return { |
|||
// |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.showorders() |
|||
this.cgrs_line() |
|||
}, |
|||
// 方法 |
|||
methods: { |
|||
showorders() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var chartDom = document.getElementById('showorders'); |
|||
var myChart = echarts.init(chartDom); |
|||
// 指定图表的配置项和数据 |
|||
var option; |
|||
|
|||
option = { |
|||
grid: { //整张图的大小，距离left，right，bottom的距离 |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70, 110, 130], |
|||
type: 'bar', |
|||
showBackground: true, |
|||
color: "#2626ff", |
|||
backgroundStyle: { |
|||
color: 'rgba(180, 180, 180, 0.2)' |
|||
}, |
|||
|
|||
} |
|||
] |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
}, |
|||
|
|||
// 场馆入场人数 |
|||
cgrs_line() { |
|||
|
|||
var chartDom = document.getElementById('tdrs'); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: 'Email', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
areaStyle: {}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [120, 132, 101, 134, 90, 230, 210] |
|||
}, |
|||
{ |
|||
name: 'Union Ads', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
areaStyle: {}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [220, 182, 191, 234, 290, 330, 310] |
|||
}, |
|||
{ |
|||
name: 'Video Ads', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
areaStyle: {}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [150, 232, 201, 154, 190, 330, 410] |
|||
}, |
|||
{ |
|||
name: 'Direct', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
areaStyle: {}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [320, 332, 301, 334, 390, 330, 320] |
|||
}, |
|||
{ |
|||
name: 'Search Engine', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
label: { |
|||
show: true, |
|||
position: 'top' |
|||
}, |
|||
areaStyle: {}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
|
|||
}, |
|||
|
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.home { |
|||
position: relative; |
|||
} |
|||
|
|||
.topnav { |
|||
height: 46px; |
|||
line-height: 46px; |
|||
text-align: center; |
|||
padding: 12rpx; |
|||
width: 100%; |
|||
position: fixed; |
|||
z-index: 90; |
|||
color: #fff; |
|||
left: 0; |
|||
top: 0; |
|||
background-color: #080A25; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.gymbox { |
|||
margin-top: 3.2rem; |
|||
width: 100%; |
|||
background-image: url("../assets/gymbox_bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
background-position: 0 0; |
|||
padding-top: 2.26rem; |
|||
height: 20rem; |
|||
} |
|||
|
|||
.gymbox .gympic { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
padding-top: 0rem; |
|||
height: 12.68rem; |
|||
width: 100%; |
|||
} |
|||
|
|||
.gymbox .gympic img { |
|||
width: 90%; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: 1rem; |
|||
display: block; |
|||
padding-top: 0.2rem; |
|||
height: 16rem; |
|||
} |
|||
|
|||
.gymbox .gymnum { |
|||
width: 60%; |
|||
margin: 0.6rem auto; |
|||
text-align: center; |
|||
height: 3rem; |
|||
padding-top: 1.4rem; |
|||
} |
|||
|
|||
.gymbox .gymnum span { |
|||
font-size: 0.86rem; |
|||
display: block; |
|||
line-height: 1.2rem; |
|||
} |
|||
|
|||
.gymbox .gymnum p { |
|||
line-height: 1.2; |
|||
height: 26px; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
display: block; |
|||
} |
|||
|
|||
/* 數據box */ |
|||
.numbox { |
|||
width: 100%; |
|||
height: 4rem; |
|||
line-height: 1.2; |
|||
margin-top: 2.6rem; |
|||
} |
|||
|
|||
.numbox .numicon { |
|||
display: block; |
|||
width: 20%; |
|||
height: 3.2rem; |
|||
float: left; |
|||
} |
|||
|
|||
.numbox .numdiv { |
|||
width: 72%; |
|||
background-image: url("../assets/num_bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-position: 0 center; |
|||
background-size: 100%; |
|||
float: left; |
|||
margin-left: 0.68rem; |
|||
height: 4rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
.numbox .numdiv p { |
|||
display: block; |
|||
float: left; |
|||
width: 100%; |
|||
line-height: 0; |
|||
} |
|||
|
|||
.numbox .numdiv .ndtitle { |
|||
padding-top: 0.4rem; |
|||
font-size: 1.08rem; |
|||
} |
|||
|
|||
.numbox .numdiv .nddesc { |
|||
color: #ccc; |
|||
font-size: 0.4rem; |
|||
padding-bottom: 0.2rem; |
|||
} |
|||
|
|||
/** 客流趋势 */ |
|||
.klqs { |
|||
margin-top: 3rem; |
|||
background-image: url("../assets/klqs_bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
height: 3.8rem; |
|||
background-position: -1.04rem 0.2rem; |
|||
} |
|||
|
|||
.klqs .klqs_bg { |
|||
float: left; |
|||
/* width: 80%; */ |
|||
margin-left: 4rem; |
|||
/* padding-left: 6.4rem; */ |
|||
font-size: 1.6rem; |
|||
} |
|||
|
|||
.klqs .klbtn { |
|||
float: left; |
|||
margin-left: 1.06rem; |
|||
} |
|||
|
|||
.klqs .klbtn span { |
|||
display: block; |
|||
float: left; |
|||
width: 2.6rem; |
|||
height: 2.6rem; |
|||
margin-left: 0.4rem; |
|||
line-height: 2.6rem; |
|||
text-align: center; |
|||
border: 1px solid #006bff; |
|||
} |
|||
|
|||
/** 場館飽和度 */ |
|||
.cgbox { |
|||
background-image: url("../assets/cgbox_bg.png"); |
|||
width: 100%; |
|||
height: 8.6rem; |
|||
background-position: 0 0; |
|||
background-size: 100%; |
|||
margin-top: 2.4rem; |
|||
padding: 0.4rem; |
|||
} |
|||
|
|||
/* 今日人數 */ |
|||
.today_rs { |
|||
margin-top: 2.6rem; |
|||
width: 100%; |
|||
} |
|||
|
|||
.today_rs .tdrs_title { |
|||
background-image: url("../assets/klqs_bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
height: 3.8rem; |
|||
background-position: -1.04rem 0.2rem; |
|||
float: left; |
|||
padding-left: 4rem; |
|||
font-size: 1.6rem; |
|||
} |
|||
|
|||
/** 各場館實時 */ |
|||
.pcgrs{ |
|||
clear: both; |
|||
margin-top: 2.6rem; |
|||
width: 100%; |
|||
} |
|||
.pcgrs .pcgrs_title{ |
|||
background-image: url("../assets/klqs_bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
height: 3.8rem; |
|||
background-position: -1.04rem 0.2rem; |
|||
float: left; |
|||
padding-left: 4rem; |
|||
font-size: 1.6rem; |
|||
} |
|||
.pcgrs .pcg_item{ |
|||
margin-top: 0.4rem; |
|||
background-image: url("../assets/pcg_bg.png"); |
|||
background-repeat: no-repeat; |
|||
height: 12rem; |
|||
width: 48%; |
|||
float: left; |
|||
margin-left: 2%; |
|||
} |
|||
.pcgrs .pcg_item .pcpos{ |
|||
text-align: right; |
|||
font-size: 0.68rem; |
|||
display: block; |
|||
float: right; |
|||
margin-top: 1.6rem; |
|||
padding-right: 0.6rem; |
|||
} |
|||
.pcgrs .pcg_item .pcval{ |
|||
font-size: 1.086rem; |
|||
margin-top: 6rem; |
|||
width: 68%; |
|||
display: block; |
|||
float: left; |
|||
text-align: center; |
|||
} |
|||
.pcgrs .pcg_item .pcrate{ |
|||
width: 32%; |
|||
display: block; |
|||
float: left; |
|||
font-size: 0.86rem; |
|||
margin-top: 4rem; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<div class="tyc"> |
|||
<div class="topnav">体育馆</div> |
|||
<!-- 图形 --> |
|||
<div class="tyclogo"> |
|||
<div class="tyname">体育场</div> |
|||
</div> |
|||
<!-- 进馆人数统计 --> |
|||
<div class="gcins"> |
|||
<div class="gcins_title">进馆人数统计</div> |
|||
<div id="gcins_charts" style="height:16rem"></div> |
|||
</div> |
|||
<!-- 人数状态 --> |
|||
<div class="incbox"></div> |
|||
|
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.tyc { |
|||
position: relative; |
|||
} |
|||
|
|||
.topnav { |
|||
height: 46px; |
|||
line-height: 46px; |
|||
text-align: center; |
|||
padding: 12rpx; |
|||
width: 100%; |
|||
position: fixed; |
|||
z-index: 90; |
|||
color: #fff; |
|||
left: 0; |
|||
top: 0; |
|||
background-color: #080A25; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.tyclogo { |
|||
margin-top: 1.6rem; |
|||
background-image: url("../assets/tyc_00.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
background-position: center center; |
|||
height: 12rem; |
|||
} |
|||
|
|||
.tyclogo .tyname { |
|||
line-height: 12rem; |
|||
text-align: right; |
|||
padding-right: 16%; |
|||
font-size: 2.02rem; |
|||
padding-top: 1.6rem; |
|||
} |
|||
/* 进馆人数统计 */ |
|||
.gcins { |
|||
margin-top: 1.6rem; |
|||
} |
|||
|
|||
.gcins .gcins_title { |
|||
background-image: url("../assets/tyc_tbg.png"); |
|||
background-position: 0 0; |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
height: 1.8rem; |
|||
line-height: 1.8rem; |
|||
padding-left: 2.02rem; |
|||
} |
|||
|
|||
/* 进馆人数 */ |
|||
.incbox{ |
|||
margin-top: 1.2rem; |
|||
background: url("../assets/tyc_bhd.png") no-repeat 0 center; |
|||
background-size: 100%; |
|||
height: 8rem; |
|||
} |
|||
</style> |
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: 'TycView', |
|||
data() { |
|||
return { |
|||
// |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.cgsf_line() |
|||
}, |
|||
methods: { |
|||
// 山峰图 |
|||
cgsf_line() { |
|||
var chartDom = document.getElementById('gcins_charts'); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "none", |
|||
}, |
|||
formatter: function (params) {//hover到某一柱子时显示单位，例如：“1号商店进货：60个” |
|||
return params[0].name + ": " + params[0].value + "个"; |
|||
}, |
|||
}, |
|||
grid: { |
|||
width: "85%", |
|||
height: "65%", |
|||
top: "17%", |
|||
left: "12%", |
|||
}, |
|||
xAxis: { |
|||
data: ["1号商店进货", "2号商店进货", "3号商店进货", "4号商店进货"], |
|||
axisTick: { show: false }, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#483D8B", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#483D8B", |
|||
interval: 0,//隔几个显示一次，0表示全部显示 |
|||
fontSize: "12",//x轴字体大小 |
|||
itemSize: "", |
|||
formatter: function (params) { |
|||
var newParamsName = ""; // 最终拼接成的字符串 |
|||
var paramsNameNumber = params.length; // 实际标签的个数 |
|||
var provideNumber = 4; // 每行能显示的字的个数 |
|||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整 |
|||
/** |
|||
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 |
|||
*/ |
|||
// 条件等同于rowNumber>1 |
|||
if (paramsNameNumber > provideNumber) { |
|||
/** 循环每一行,p表示行 */ |
|||
for (var p = 0; p < rowNumber; p++) { |
|||
var tempStr = ""; // 表示每一次截取的字符串 |
|||
var start = p * provideNumber; // 开始截取的位置 |
|||
var end = start + provideNumber; // 结束截取的位置 |
|||
// 此处特殊处理最后一行的索引值 |
|||
if (p == rowNumber - 1) { |
|||
// 最后一次不换行 |
|||
tempStr = params.substring(start, paramsNameNumber); |
|||
} else { |
|||
// 每一次拼接字符串并换行 |
|||
tempStr = params.substring(start, end) + "\n"; |
|||
} |
|||
newParamsName += tempStr; // 最终拼成的字符串 |
|||
} |
|||
} else { |
|||
// 将旧标签的值赋给新标签 |
|||
newParamsName = params; |
|||
} |
|||
//将最终的字符串返回 |
|||
return newParamsName; |
|||
}, |
|||
}, |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
name: "单位：个", |
|||
type: "value", |
|||
//设置Y轴坐标最大、最小值 |
|||
min: 0, |
|||
max: 100, |
|||
interval: 20, |
|||
axisLabel: { |
|||
color: "#483D8B", |
|||
}, |
|||
axisTick: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#483D8B", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba( 72,61,139,0.7)", |
|||
type: "dashed", |
|||
}, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "hill", |
|||
type: "pictorialBar", |
|||
barCategoryGap: "5%", |
|||
symbol: |
|||
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z", |
|||
//要改成山峰图就改成< symbol: 'path://path://M10 600 Q 95 0 180 600' > |
|||
//要改成三角图就改成< symbol: 'triangle' > |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: {//设置渐变颜色 |
|||
type: "linear", |
|||
//x 和 y 表示起始的坐标，x2 和 y2 表示终点坐标, 所以也就是向下渐变 |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "red", // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.3, |
|||
color: "rgba(123,104,238, .8)", // 30% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(123,104,238, .1)", // 100% 处的颜色 |
|||
}, |
|||
], |
|||
global: false, // 缺省为 false |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
}, |
|||
}, |
|||
data: [60, 95, 70, 52], |
|||
z: 10, |
|||
}, |
|||
{ |
|||
name: "glyph", |
|||
type: "pictorialBar", |
|||
barGap: "-100%",//设置图的大小，越大底部重叠的越多 |
|||
symbolPosition: "end", |
|||
symbolSize: 0, |
|||
symbolOffset: [0, "100%"], |
|||
data: [], |
|||
}, |
|||
], |
|||
|
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
@ -0,0 +1,5 @@ |
|||
const { defineConfig } = require('@vue/cli-service') |
|||
module.exports = defineConfig({ |
|||
transpileDependencies: true, |
|||
lintOnSave: false |
|||
}) |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue