xioayue
/
btgymm
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

体育馆移动端完善4

master
‘daijinzheng@xingtongworld.com’ 3 years ago
parent
81c21cdc02
commit
84fea401d7
10 changed files with 235 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/wh_right1.png
  2. BIN
      public/img/wh_right2.png
  3. BIN
      public/img/wh_right3.png
  4. 48
      src/App.vue
  5. BIN
      src/assets/img/wh_right1.png
  6. BIN
      src/assets/img/wh_right2.png
  7. BIN
      src/assets/img/wh_right3.png
  8. 58
      src/views/HomeView.vue
  9. 17
      src/views/TycView.vue
  10. 215
      src/views/WhView.vue

BIN
public/img/wh_right1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/img/wh_right2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/img/wh_right3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

48
src/App.vue
View File

@ -2,9 +2,9 @@
<router-view />
<nav class="navbar">
<!-- &nbsp;&nbsp; -->
<router-link class="narRouter" to="/ty" active-class='ative'>体育</router-link>
<router-link class="narRouter" to="/" active-class='ative'>总览</router-link>
<router-link class="narRouter" to="/wh" active-class='ative'>文化</router-link>
<router-link class="narRouter" to="/ty">体育</router-link>
<router-link class="narRouter" to="/">总览</router-link>
<router-link class="narRouter" to="/wh">文化</router-link>
</nav>
</template>
@ -21,28 +21,52 @@
z-index: 90;
}
/* .navbar a.router-link-exact-active {
.navbar a.router-link-exact-active {
background-color: #2132fa;
/* background-color: #2132fa;
padding-bottom: 10px;
background-image: linear-gradient(#2132fa, #1d37fb); */
width: 100px;
/* text-align: center; */
line-height: 44px;
/* background-color: #2132fa; */
background-image: linear-gradient(#2132fa, #1d37fb);
} */
background-repeat: no-repeat;
background-size: 50% 70%;
background-position: 50% 50%;
box-sizing: border-box;
padding: 0 0.9rem;
}
.navbar a {
display: block;
float: left;
width: 33.33%;
width: 33.33% !important;
text-align: center;
line-height: 44px;
background-color: #0c2151;
}
.ative {
width: 100px !important;
/* .navbar .narRouter {
display: block;
float: left;
width: 33.33% !important;
text-align: center;
line-height: 44px;
/* background-color: #2132fa; */
background-color: #0c2151;
} */
/* .navbar .ative {
width: 100px;
line-height: 44px;
background-image: linear-gradient(#2132fa, #1d37fb);
/* background-size: 50% 50%; */
}
background-repeat: no-repeat;
background-size: 50% 70%;
background-position: 50% 50%;
box-sizing: border-box;
padding: 0 0.9rem;
} */
</style>

BIN
src/assets/img/wh_right1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/img/wh_right2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/img/wh_right3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

58
src/views/HomeView.vue
View File

@ -61,12 +61,12 @@
<li>
<span>体育馆</span>
<span>12%</span>
<span><img src="../assets/img/tyc_icon.png" /></span>
<span><img src="../assets/img/tyg_icon.png" /></span>
</li>
<li>
<span>游泳场馆</span>
<span>12%</span>
<span><img src="../assets/img/tyc_icon.png" /></span>
<span><img src="../assets/img/yyg_icon.png" /></span>
</li>
</ul>
</div>
@ -76,17 +76,17 @@
<div class="cglist cgright">
<ul>
<li>
<span><img src="../assets/img/tyc_icon.png" /></span>
<span><img src="../assets/img/tsg_icon.png" /></span>
<span>20%</span>
<span>图书馆</span>
</li>
<li>
<span><img src="../assets/img/tyc_icon.png" /></span>
<span><img src="../assets/img/whg_icon.png" /></span>
<span>12%</span>
<span>文化馆</span>
</li>
<li>
<span><img src="../assets/img/tyc_icon.png" /></span>
<span><img src="../assets/img/bwg_icon.png" /></span>
<span>12%</span>
<span>博物馆</span>
</li>
@ -107,10 +107,12 @@
<div class="pcgrs">
<div class="pcgrs_title">各场馆实时进馆人数</div>
<!-- 場館實時 -->
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
<span class="pcpos">体育场</span>
<p class="pcval">{{ item.allEnter }}</p>
<span class="pcrate" :class="[{pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90},{pcrate3: parseInt(item.proportion) >= 90 }]">{{ item.proportion }}</span>
<span class="pcrate"
:class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
item.proportion }}</span>
</div>
<!-- <div class="pcg_item">
@ -174,6 +176,11 @@ export default {
ssjgNumDatas: []
}
},
// created() {
// this.$nextTick(() => {
// this.cgchart()
// });
// },
mounted() {
this.showorders()
this.cgrs_line()
@ -262,7 +269,7 @@ export default {
color: '#FFFFFF',
fontSize: 10,
interval: 0,
rotate:45,
rotate: 45,
// show: true,
// inside:false
},
@ -425,12 +432,14 @@ export default {
// 圆饼图
cgchart() {
var chartDom = document.getElementById('cgchart');
chartDom.removeAttribute('_echarts_instance_');
var myChart = echarts.init(chartDom);
var option;
option = {
color: [ "#F2A0CE","#0780e2","#FF6504", "#01FE00","#00FFFF","#fdff00"],
color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"],
series: [
{
@ -764,7 +773,7 @@ export default {
width: 100%;
background-image: url("../assets/img/gymbox_bg.png");
background-repeat: no-repeat;
background-size: 100%;
background-size: 100% 100%;
background-position: 0 0;
padding-top: 2.26rem;
height: 20rem;
@ -775,7 +784,7 @@ export default {
margin-left: auto;
margin-right: auto;
padding-top: 0rem;
height: 12.68rem;
/* height: 12.68rem; */
width: 100%;
}
@ -783,19 +792,19 @@ export default {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
/* margin-top: 1rem; */
display: block;
padding-top: 0.2rem;
/* padding-top: 0.2rem; */
height: 16rem;
}
.gymbox .gymnum {
width: 100%;
margin: 0.6rem auto;
/* margin: 0.6rem auto; */
text-align: center;
height: 3rem;
position: absolute;
bottom: 0.66rem;
bottom: 2rem;
/* padding-top: 0.7rem; */
}
@ -821,7 +830,7 @@ export default {
width: 100%;
height: 4rem;
line-height: 1.2;
margin-top: 2.6rem;
margin-top: 0.6rem;
}
.numbox .numicon {
@ -866,7 +875,7 @@ export default {
/** 客流趋势 */
.klqs {
margin-top: 3rem;
margin-top: 2rem;
background-image: url("../assets/img/klqs_bg.png");
background-repeat: no-repeat;
background-size: 100%;
@ -1035,22 +1044,25 @@ export default {
.pcgrs .pcg_item {
margin-top: 0.4rem;
background-image: url("../assets/img/pcg_bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 12rem;
/* height: 12rem; */
width: 48%;
float: left;
margin-left: 2%;
position: relative;
margin-bottom: 1.6rem;
}
.pcgrs .pcg_item .pcpos {
text-align: right;
font-size: 0.68rem;
display: block;
width: 3.5rem;
/* width: 3.5rem; */
text-align: left;
float: right;
margin-top: 1.6rem;
margin-right: 1.1rem;
/* padding-right: 0.9rem; */
}
@ -1074,17 +1086,17 @@ export default {
} */
.pcgrs .pcg_item .pcrate {
width: 30%;
width: 32%;
height: 3.4rem;
line-height: 3.3rem;
line-height: 3.4rem;
display: block;
float: left;
font-size: 0.46rem;
margin-top: 3.78rem;
text-align: center;
position: absolute;
bottom: 3.45rem;
right: 1.33rem;
bottom: 0.4rem;
right: 0.63rem;
background-image: url('../assets/img/安静.png');
background-size: 100% 100%;
background-position: 100% 100%;

17
src/views/TycView.vue
View File

@ -30,7 +30,7 @@
</div>
<!-- 进馆人数统计 -->
<div class="gcins">
<div class="gcins_title">进馆人数统计</div>
<div class="gcins_title">24小时总进馆人流趋势</div>
<div id="gcins_charts" style="height:16rem"></div>
</div>
<!-- 各场馆人次占比 -->
@ -91,12 +91,12 @@
}
.tyclogo .tyname {
height: 3rem;
line-height: 3rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: right;
padding-right: 6.06rem;
font-size: 2.02rem;
padding-top: 4.8rem;
padding-right: 7.3rem;
font-size: 1.7rem;
padding-top: 6.8rem;
}
.tyclogo .tydesc {
@ -105,7 +105,7 @@
font-size: 1.03rem;
text-align: right;
padding-right: 1.06rem;
color: #999;
color: #fff;
}
/* 总计进馆 */
@ -232,7 +232,7 @@
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 0.6rem;
font-size: 0.8rem;
width: 5rem;
height: 2rem;
margin-top: 0.42rem;
@ -544,6 +544,7 @@ export default {
},
axisLabel: {
inside: false,
interval: 0,
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',

215
src/views/WhView.vue
View File

@ -233,9 +233,9 @@
background-image: url("../assets/img/tyc_tbg.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
height: 2.4rem;
line-height: 1.9rem;
background-size: 100% 100%;
height: 2.2rem;
line-height: 2.2rem;
padding-left: 2.02rem;
}
@ -276,9 +276,9 @@
}
.tsgbox .tsgc_charts {
margin-top: 2rem;
/* margin-top: 2rem; */
width: 100%;
height: 16rem;
height: 10rem;
}
</style>
<script>
@ -460,7 +460,7 @@ export default {
]
var series = [];
for (var i = 0; i < 6; i++) {
for (var i = 0; i < 3; i++) {
series.push({
name: name[i],
type: "line",
@ -506,7 +506,7 @@ export default {
// backgroundColor: "#141f56",
legend: {
top: 0,
right:30,
right: 30,
itemGap: 15,
itemWidth: 20,
itemHeight: 20,
@ -572,6 +572,7 @@ export default {
},
axisLabel: {
inside: false,
interval: 0,
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',
@ -627,6 +628,11 @@ export default {
value: 323,
},
];
var libraryIcons = {
'Lend': '/img/wh_right1.png',
'Still': '/img/wh_right2.png',
'Accreditation': '/img/wh_right3.png'
};
var getArrByKey = (data, k) => {
let key = k || "value";
let res = [];
@ -650,68 +656,156 @@ export default {
console.log(getSymbolData(data));
option = {
// legend: {
// orient: 'vertical',
// top: 0,
// right: 0,
// itemGap: 15,
// itemWidth: 20,
// itemHeight: 20,
// textStyle: {
// color: '#fff',
// fontSize: '14'
// },
// data: [
// { icon: 'image://img/tyc_icon.png' },
// { icon: 'image://img/tyg_icon.png' },
// { icon: 'image://img/yyg_icon.png' },
// ]
// },
grid: {
top: '2%',
bottom: -15,
right: 30,
show: false,
left: 30,
containLabel: true
right: -45,
top: 25,//拉伸距离顶部高度
bottom: 0,//拉伸距离底部高度
containLabel: true,
},
xAxis: {
show: false
},
yAxis: [{
triggerEvent: true,
show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
interval: 0,
color: '#fff',
align: 'left',
margin: 80,
fontSize: 12,
formatter: function (value) {
return '{title|' + value + '}'
yAxis: [
{
triggerEvent: true,
show: true,
// inverse: true,
// data: getArrByKey(data, 'name'),
data: [
'Lend', 'Still', 'Accreditation'
// '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png'
],
// max:80,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
// show: false,
type: 'category',
inverse: true, //true正序false倒序
// interval: 0,
// color: '#fff',
// align: 'left',
// margin: 0,
fontSize: 12,
verticalAlign: 'bottom',
// formatter: function (value) {
// return '{title|' + value + '}'
// },
formatter: function (value) {
//return '{' + value + '| }\n{value|' + value + '}';
return '{' + value + '|}'; //只显示图片icon
},
rich: {
// title: {
// width: 165
// },
value: {
lineHeight: 30,
align: 'center'
},
Lend: {
height: 30,
align: 'center',
backgroundColor: {
image: libraryIcons.Accreditation
}
},
Still: {
height: 30,
align: 'center',
backgroundColor: {
image: libraryIcons.Still
}
},
Accreditation: {
height: 30,
align: 'center',
backgroundColor: {
image: libraryIcons.Lend
}
}
}
}
},
}, {
triggerEvent: true,
show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
color: '#fff',
align: 'right',
verticalAlign: 'bottom',
lineHeight: 42,
fontSize: 14,
formatter: function (value, index) {
return data[index].value + ' 册 '
{
triggerEvent: true,
show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
}
}],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
interval: 0,
color: '#fff',
align: 'left',
// margin: 80,
fontSize: 12,
formatter: function (value) {
return '{title|' + value + '}'
},
},
}, {
triggerEvent: true,
show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
color: '#fff',
align: 'right',
verticalAlign: 'bottom',
lineHeight: 42,
fontSize: 14,
formatter: function (value, index) {
return data[index].value + ' 册 '
},
}
}],
series: [{
name: 'XXX',
type: 'pictorialBar',
@ -733,6 +827,7 @@ export default {
yAxisIndex: 0,
data: data,
barWidth: 10,
barGap:20,
// align: left,
itemStyle: {
normal: {

Write Preview
Loading…
Cancel
Save