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 |
# 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