Skip to content

S
ssr-pc
Commit 319db36b by tangjiale
Options

更新代码

parent e0cafef0
Showing with 1400 additions and 3 deletions
app.html
......@@ -12,7 +12,7 @@
})();
</script>
</head>
<body {{ BODY_ATTRS }}>
<body {{ BODY_ATTRS }} style="margin: 0px !important;">
{{ APP }}
</body>
</html>
layouts/default.vue 0 → 100644
<template>
<div class="eye-main">
<transition v-if="isKeepAlive" name="fade-transform" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<transition v-else name="fade-transform" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
computed: {
isKeepAlive () {
return this.$route.meta.keepAlive || this.$route.meta.keepAlive === undefined
}
}
}
</script>
package.json
......@@ -7,7 +7,7 @@
"dev-ssr": "cross-env ENV_CONFIG=dev ssr=true nuxt -o --port=7001",
"dev-ssr-prod": "cross-env IS_LOCAL=1 ENV_CONFIG=pro ssr=true nuxt -o --port=7001",
"start": "cross-env ENV_CONFIG=dev nuxt start --port=7001",
"build": "cross-env ENV_CONFIG=dev ssr=true nuxt build -o --port=7001 && npm start",
"build": "cross-env ENV_CONFIG=dev ssr=true nuxt build -o --port=7001",
"build-prod": "cross-env ENV_CONFIG=pro ssr=true nuxt build -o --port=7001"
},
"dependencies": {
......@@ -25,6 +25,8 @@
"postcss-loader": "3.0.0",
"postcss-px2rem": "0.3.0",
"vant": "2.12.6",
"vue-loader": "15.7.1"
"vue-loader": "15.7.1",
"flv.js": "^1.6.2",
"swiper": "^3.0.4"
}
}
pages/components/center-a.vue 0 → 100644
<template>
<comBox marginTop="32px" height="240px"
:lastTitle="`${tabActive == 0 ? '周' : '月'}排行统计时间：${xxOption[tabActive].topFive[0].startDate}${xxOption[tabActive].topFive[0].endDate}`"
:title="xxOption[tabActive].title"
bgName="long-bg">
<div class="c-btm-bg">
<div class="flex-c" style="height: 100%">
<div class="left-ctn">
<div :class="rank.avgJoinRate < 30 ? 'red-c' : ''" class="rank flex-c front" v-for="(rank,topIdx) in xxOption[tabActive].topFive" v-if="xxOption[tabActive].topFive && xxOption[tabActive].topFive.length">
<div class="flex-c">
<div v-if="topIdx >= 3" class="idx flex-c">{{topIdx + 1}}</div>
<img class="idx" v-else :src="require(`../../assets/images/screen/rank-${topIdx}.png`)" alt="">
<div class="school-name">{{rank.schName}}</div>
</div>
<div class="rank-num">{{rank.avgJoinRate.toFixed(2)}}%</div>
</div>
</div>
<div class="right-ctn">
<scroller @changeStart="changeStart"
v-if="list && list.length"
:list="list" showMaxNum="1"
:swiperStyle="{height:'210px'}">
<template v-slot:item="item">
<div class="rank flex-c" :class="data.avgJoinRate < 30 ? 'red-c' : ''" v-for="(data,idx) in item.item" :key="idx">
<div class="flex-c">
<div class="idx flex-c">{{item.index * 5 + idx + 6}}</div>
<div class="school-name">{{data.schName}}</div>
</div>
<div class="rank-num">{{(data.avgJoinRate || 0).toFixed(2)}}%</div>
</div>
</template>
</scroller>
</div>
</div>
</div>
</comBox>
</template>
<script>
import comBox from '../components/monitor-head'
import scroller from '../components/scroll-swiper'
export default {
name: "center-a",
components:{
scroller,comBox
},
props:{
xxOption:{
type:Array,
default:()=>{
return []
}
}
},
data(){
return{
tabActive:0,
list:[]
}
},
mounted(){
this.list = this.xxOption[0].rankList
},
methods:{
changeStart(arr,index,lastIdx){
//如何上一次是从最后一次切换过来的,切换类型
if((lastIdx + 1) == arr.length){
this.list = []
//切换到第一个slide，速度为1秒
setTimeout(() =>{
this.tabActive = this.tabActive == 1 ? 0 : 1
this.list = this.xxOption[this.tabActive].rankList
this.$forceUpdate()
},100)
}
}
}
}
</script>
<style scoped lang="less">
.red-c{
.idx,.school-name,.rank-num{
color:#FF9191 !important;
}
}
.c-btm-bg{
position: relative;
padding: 0px 0px 0px 14px;
height: calc(100% - 10px);
margin-top: 10px;
.swiper-container{
height: 100%;
width: 100%;
.swiper-slide{
width: 100%;
}
}
.left-ctn,.right-ctn{
height: 100%;
width: calc(100% / 2);
.front{
background: linear-gradient(154deg, rgba(115, 190, 255, 0.3) 0%, rgba(115, 190, 255, 0.12) 100%);
opacity: 1;
border-bottom: none !important;
}
.rank{
margin-top: 4px;
height: 40px;
width: calc(100% - 40px);
padding: 0px 22px 0px 18px;
justify-content: space-between;
border-bottom: 1px solid #253290;
.idx{
height: 32px;
width: 26px;
flex: none;
margin-right: 7px;
justify-content: center;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.school-name{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
}
.rank-num{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
</style>
pages/components/center-video.vue 0 → 100644
<template>
<div>
<div class="flex-s">
<img class="decorate" src="@/assets/images/screen/video-t-l.png" alt=""><img class="decorate" src="@/assets/images/screen/video-t-r.png" alt="">
</div>
<div class="swiper-container swiper-no-swiping" ref="video-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in banners">
<template v-if="type == 2">
<video :id="'video' + index" muted
preload="auto"
x5-video-player-type="h5-page"
:controls="true"
style="object-fit:cover"
></video>
</template>
<template v-else>
<img :src="item" alt="">
</template>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="flex-s">
<img class="decorate btm-d" src="@/assets/images/screen/video-b-l.png" alt=""><img class="decorate btm-d" src="@/assets/images/screen/video-b-r.png" alt="">
</div>
<!--<div class="time">数据统计时间：{{stateNum.updateTime}}</div>-->
</div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
export default {
name: "center-video",
props:{
list:{
type:Array,
default:[]
},
stateNum:{
type:Object,
default:() => {
return {}
}
},
type:String
},
data(){
return{
active:0,
videos:'',
videoSwiper:'',
// list:[
// '','','','','',''
// ]
banners:[]
}
},
created(){
this.banners = this.type == 2 ? this.list : ['https://cdn.xiaobentiyu.cn/yueluscreen/1.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/2.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/3.jpg']
},
mounted(){
if (typeof window !== 'undefined') {
require('flv.js')
}
const Swiper = require('Swiper')
//轮播参数
let _this = this;
this.videoSwiper = new Swiper(this.$refs['video-swiper'], {
direction: "horizontal",
initialSlide: _this.active,
observer: true,
observeParents: true,
speed: 1500,
autoplay:_this.type == 2 ? false : 3000,
spaceBetween: 0,
pagination : '.swiper-pagination',
});
if(this.type != 2) return
let that = this
this.banners.forEach((item, index) => {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById("video" + index);
player = flvjs.createPlayer({
type: "mp4", //=> 媒体类型 flv 或 mp4
isLive: false, //=> 是否为直播流
hasAudio: true, //=> 是否开启声音
url: item, //=> 视频流地址
});
player.attachMediaElement(videoElement); //=> 绑DOM
player.load();
videoElement.addEventListener('ended', function(event) {
if ((that.active + 1) != that.banners.length) {
that.active += 1;
} else {
that.active = 0
}
//切换swiper
that.videoSwiper.slideTo(that.active, 1000, false);
//播放视频
that.changeVideoSrc()
})
} else {
console.log("flvjs不支持");
}
});
this.changeVideoSrc()
},
methods:{
changeVideoSrc(){
let that = this
var dom = document;
var videoDom = dom.getElementById(`video${that.active}`);
if(that.active != 0){
videoDom.muted = false
}
videoDom.play();
}
}
}
</script>
<style scoped lang="less">
/deep/ .swiper-pagination{
bottom: 35px !important;
}
/deep/ .swiper-pagination-bullet{
height: 10px !important;
width: 10px !important;
background: #FFFFFF;
opacity: 0.34;
}
/deep/ .swiper-pagination-bullet-active{
opacity: 1 !important;
}
video{
width: 100%;
height: 100%;
}
.flex-s{
display: flex;
justify-content: space-between;
.btm-d{
margin-top: 10px !important;}
.decorate{
height: 14px;
width: 220px;
margin-top: 33px;
}
.swiper-container{
margin-top: 10px;
height: 540px;
width: 906px;
.swiper-slide{
width: 100%;
img{
width: 100%;
height: 100%;
}
}
}
.time{
text-align: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #BFCAFF;
opacity: 0.49;
}
}
</style>
pages/components/left-a-ctn.vue 0 → 100644
<template>
<div class="com-bg">
<div class="flex-c">
<div class="card">
云赛PK赛事
<div class="num">{{statisticsObj.conductFrequency || 0}}<span>场</span></div>
</div>
<div class="card">
设备投放
<div class="num">{{statisticsObj.count || 0}}<span>套</span></div>
<div class="line"></div>
</div>
<div class="card">
共享器材借取
<div class="num">{{statisticsObj.borrowNum || 0}}<span>次</span></div>
</div>
<div class="card">
设备投放
<div class="num">{{statisticsObj.deviceNum || 0}}<span>台</span></div>
</div>
</div>
<div class="scroll-bg flex-c">
<div class="left-sssy-title"></div>
<div class="right" v-if="statisticsObj._list && statisticsObj._list.length">
<scroller ref="a-scroll" :list="statisticsObj._list" showMaxNum="4" :swiperStyle="{height:'24px !important'}">
<template v-slot:item="item">
<div class="item flex-c" v-if="item.item && item.item.gender">
<div class="t1">{{item.item.schName}}</div>
<div class="t3">{{item.item.stuName}}</div>
<div class="t3">{{item.item.gender == 1 ? '男' : '女'}}</div>
<div class="t3">{{item.item.borrowType}}</div>
<div class="t2">{{item.item.typeName}}</div>
</div>
<div class="item flex-c" v-else>
<div class="t1">{{item.item.schoolName}}</div>
<div class="t2">{{item.item.matchName}}</div>
</div>
</template>
</scroller>
</div>
</div>
</div>
</template>
<script>
import scroller from '../components/scroll-swiper'
export default {
name: "left-a-ctn",
components:{
scroller
},
props:{
statisticsObj:{
type:Object,
default:()=>{
return {}
}
}
},
data(){
return{
}
},
mounted(){
},
}
</script>
<style scoped lang="less">
.com-bg{
margin: 50px 21px 0px 21px;
width: calc(100% - 42px);
.line{
position: absolute;
top: 16px;
right: 5px;
height: 30px;
width: 1px;
background: #5A73BB;
}
.card{
position: relative;
flex: 1;
text-align: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
.num{
margin-top: 16px;
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
span{font-size: 14px !important}
}
}
.scroll-bg{
margin-top: 30px;
height: 120px;
width: 100%;
background: linear-gradient(153deg, rgba(115, 190, 255, 0.3) 0%, rgba(115, 190, 255, 0.12) 100%);
opacity: 1;
.left-sssy-title{
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: auto;
height: 120px;
width: 32px;
background-image: url('../../assets/images/screen/sssy-title.png');
}
.right{
position: relative;
width: calc(100% - 56px);
height: 120px;
margin:0px 12px 0px 12px;
.item{
width: 100%;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 10px;
.t1,.t3{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 14px;
color: #91C8FF;
}
.t2{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 14px;
color: #FFFFFF;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 12px;
}
.t3{
margin-left: 12px;}
}
}
}
}
</style>
pages/components/left-b-ctn.vue 0 → 100644
<template>
<div class="com">
<scroller ref="b-scroll" :list="list" showMaxNum="1" :swiperStyle="{height:'225px'}">
<template v-slot:item="item">
<div class="line-item flex-c" v-for="(data,idx) in item.item" :key="idx">
<div class="col-1">{{item.index * 5 + idx + 1}}</div>
<div class="col-2">
<img v-if="data.imgSrc" class="logo" :src="data.imgSrc" alt="">
<img v-else class="logo" src="@/assets/images/screen/default-head.png" alt="">
</div>
<div class="col-3">{{data.stuName || ''}}</div>
<div class="col-4">{{data.gender == 2 ? '女' : '男'}}</div>
<div class="col-5">{{data.schName}}</div>
<div class="col-6">{{data.grade}}</div>
<div class="col-7">最佳 {{data.sportMaxMin}} 个/分</div>
</div>
</template>
</scroller>
</div>
</template>
<script>
import scroller from '../components/scroll-swiper'
export default {
name: "left-b-ctn",
components:{
scroller
},
props:{
list:{
type:Array,
default:[]
}
},
data(){
return{
// ,'99','1010','1111','1212'
}
},
mounted(){
this.$nextTick(() =>{
this.$refs['b-scroll'].initSwiper()
})
},
methods:{
handleYearStg(val){
const year = ['','一年级','二年级','三年级','四年级','五年级','六年级','七年级','初一','初二','初三','高一','高二','高三']
return year[val]
}
}
}
</script>
<style scoped lang="less">
.com{
height: calc(100% - 14px);
margin: 14px 10px 0px 15px;
width: calc(100% - 25px);
.line-item:last-child{border-bottom: none !important}
.line-item{
padding: 8px 0px 8px 12px;
border-bottom: 1px solid #253290;
.col-3,.col-4,.col-5,.col-6{
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 17px;
color: #91C8FF;
}
.col-1{
flex: 1;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.col-2{
flex: 2;
.logo{
border-radius: 50%;
object-position: center;
object-fit: cover;
margin: 0px auto;
height: 28px;
width: 28px;
flex: none;
display: block;
}
}
.col-3{
flex: 2;
}
.col-4{
flex: 1;
}
.col-5{
flex: 4;
}
.col-6{
flex: 2;
}
.col-7{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
flex: 4;
}
}
}
</style>
pages/components/left-c-ctn.vue 0 → 100644
<template>
<div class="com-line">
<scroller ref="c-scroll" :list="list" showMaxNum="1" :swiperStyle="{height:'220px'}">
<template v-slot:item="item">
<div class="item flex-c" v-for="(data,idx) in item.item" :key="idx">
<div class="flex-c">
<div class="t1">{{item.index * 5 + idx + 1}}</div>
<div class="t2">{{data.schName}}</div>
</div>
<div class="right-t">平均 {{data.avgNum}} 个/分</div>
</div>
</template>
</scroller>
</div>
</template>
<script>
import scroller from '../components/scroll-swiper'
export default {
name: "left-c-ctn",
components:{
scroller
},
props:{
list:{
type:Array,
default:() => {
return []
}
}
},
data(){
return{
}
},
mounted(){
this.initSwipert()
},
methods:{
initSwipert(){
this.$nextTick(() =>{
this.$refs['c-scroll'].initSwiper()
})
}
}
}
</script>
<style scoped lang="less">
.com-line{
height: 100%;
margin-top: 14px;
position: relative;
.item:last-child{border-bottom: none !important}
.item{
padding: 14px 12px 12px 11px;
margin: 0px 10px 0px 15px;
width: calc(100% - 58px);
justify-content: space-between;
border-bottom: 1px solid #253290;
.t1{
width: 25px;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.t2{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
}
.right-t{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>
pages/components/monitor-head.vue 0 → 100644
<template>
<div class="com-box" :style="{marginTop:marginTop}">
<div class="com-head">
<img class="head-l" src="@/assets/images/screen/head-l.png" alt="">
<div class="com-head-title">{{title}}</div>
<div class="end-title">{{lastTitle}}</div>
<img class="head-r" src="@/assets/images/screen/head-r.png" alt="">
</div>
<div class="com-ctn" :style="{height: height,backgroundImage: 'url('+require(`@/assets/images/screen/${bgName}.png`)+')'}">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "monitor-head",
props:{
title:String,
height:{
type:String,
default:'284px'
},
marginTop:{
type: String,
default: '0px'
},
bgName:{
type:String,
default:'head-bg'
},
lastTitle:String
}
}
</script>
<style scoped lang="less">
.com-box{
position: relative;
overflow: hidden;
.com-head{
display: flex;
align-items: center;
font-size: 20px;
font-family: PingFang SC;
font-weight: bold;
line-height: 0px;
color: #FFFFFF;
opacity: 1;
.head-l{
height: 20px;
width: 14px;
margin-right: 6px;
}
.com-head-title{
flex: none;
}
.head-r{
width: 170px;
height: 15px;
margin-left: 15px;
}
.end-title{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #BFCAFF;
opacity: 0.49;
display: contents;
}
}
.com-ctn{
margin-top: 10px;
height: 284px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: auto;
}
}
</style>
pages/components/right-a-ctn.vue 0 → 100644
<template>
<div class="com-bg">
<div class="flex-c">
<div class="card">
参与学生
<div class="num-t">{{stateNum.joinNum || 0}}<span>人</span></div>
<div class="line"></div>
</div>
<div class="card">
参与运动记录
<div class="num-t">{{stateNum.joinCount > 10000 ? (Number(stateNum.joinCount / 10000)).toFixed(2) : stateNum.joinCount}}<span>{{stateNum.joinCount > 10000?'万':''}}人次</span></div>
<div class="line more-r"></div>
</div>
<div class="card">
学校数
<div class="num-t">{{stateNum.joinSchNum || 0}}<span>所</span></div>
</div>
</div>
<div class="scroll-bg">
<div class="sport">
<div class="flex-c top-t">
<img src="../../assets/images/screen/ts-icon.png" alt="">跳绳
</div>
<div class="num-t btm-n">{{stateNum.skipJoinNum || 0}}<span>人</span></div>
</div>
<div class="sport">
<div class="flex-c top-t">
<img src="../../assets/images/screen/ywqz-icon.png" alt="">仰卧起坐
</div>
<div class="num-t btm-n">{{stateNum.ywqzJoinNum || 0}}<span>人</span></div>
</div>
<div class="sport">
<div class="flex-c top-t">
<img src="../../assets/images/screen/tjz-icon.png" alt="">踢毽子
</div>
<div class="num-t btm-n">{{stateNum.tjzJoinNum || 0}}<span>人</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "right-a-ctn",
props:{
stateNum:{
type:Object,
default:() => {
return {}
}
}
}
}
</script>
<style scoped lang="less">
.com-bg{
margin: 50px 21px 0px 21px;
width: calc(100% - 42px);
.more-r{
right: -20px !important;
}
.num-t{
margin-top: 16px;
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
span{font-size: 14px !important}
}
.line{
position: absolute;
top: 16px;
right: 8px;
height: 30px;
width: 1px;
background: #5A73BB;
}
.card{
position: relative;
flex: 1;
text-align: center;
height: 78px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
}
.scroll-bg{
display: flex;
margin-top: 10px;
height: 120px;
width: 100%;
background: linear-gradient(153deg, rgba(115, 190, 255, 0.3) 0%, rgba(115, 190, 255, 0.12) 100%);
opacity: 1;
.sport{
margin-top: 27px;
flex: 1;
.top-t{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
justify-content: center;
}
img{
height: 22px;
width: 22px;
margin-right: 8px;
}
}
.btm-n{
width: 100%;
margin-top: 15px;
text-align: center;
}
}
}
</style>
pages/components/right-b-ctn.vue 0 → 100644
<template>
<div class="com">
<div v-for="(data, index) in list" class="bmi-data-item" :key="index">
<div class="bmi-rate">
{{ data.joinRate ? data.joinRate + "%" : "--" }}
</div>
<div class="bmi-chart">
<div class="bmi-chart-use" :style="data.style"></div>
</div>
<div class="bmi-grade">
{{ data.grade }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "right-b-ctn",
props:{
list:{
type:Array,
default:() => {
return []
}
}
},
data(){
return{
}
}
}
</script>
<style scoped lang="less">
.com{
display: flex;
margin:20px 19px 0px 23px;
.bmi-data-item {
position: relative;
flex: 1;
text-align: center;
.bmi-rate {
font-size: 12px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.bmi-chart {
position: relative;
width: 18px;
height: 155px;
margin: 4px auto;
border-radius: 9px;
background-color: RGBA(32, 56, 141, 1);
.bmi-chart-use {
position: absolute;
left: 0;
bottom: 0;
width: 18px;
// height: 125px;
border-radius: 9px;
background-color: #5997ff;
-webkit-animation: bmi-chart-use 2s ease-in-out;
background-color: #5997ff;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#f674a4),
to(#e06995)
);
background-image: -webkit-linear-gradient(top, #5997ff, #5997ff);
background-image: -moz-linear-gradient(top, #5997ff, #5997ff);
background-image: -ms-linear-gradient(top, #5997ff, #5997ff);
background-image: -o-linear-gradient(top, #5997ff, #5997ff);
background-image: linear-gradient(top, #5997ff, #5997ff);
@-webkit-keyframes bmi-chart-use {
0% {
height: 0;
}
0% {
height: 0;
}
}
}
}
.bmi-grade {
position: absolute;
bottom: -22px;
left: 9px;
font-family: "Microsoft YaHei";
font-size: 12px;
color: #91c8ff;
transform: rotate(-60deg);
-ms-transform: rotate(-60deg); /* IE 9 */
-moz-transform: rotate(-60deg); /* Firefox */
-webkit-transform: rotate(-60deg); /* Safari 和 Chrome */
-o-transform: rotate(-60deg); /* Opera */
}
}
}
</style>
pages/components/right-c-ctn.vue 0 → 100644
<template>
<comBox marginTop="30px" height="244px" :title="zxOption[active].title">
<div class="com-line">
<scroller ref="c-scroll" :list="list" showMaxNum="1" v-if="upDateView"
@changeStart="changeStart" :swiperStyle="{height:'220px'}">
<template v-slot:item="item">
<div class="item flex-c" :class="data.avgJoinRate < 30 ? 'red-c' : ''" v-for="(data,idx) in item.item" :key="idx">
<div class="flex-c">
<div class="t1">{{item.index * 5 + idx + 1}}</div>
<div class="t2">{{data.schName}}</div>
</div>
<div class="right-t">{{data.avgJoinRate.toFixed(2)}}%</div>
</div>
</template>
</scroller>
</div>
</comBox>
</template>
<script>
import scroller from '../components/scroll-swiper'
import comBox from '../components/monitor-head'
export default {
name: "right-c-ctn",
components:{
scroller,comBox
},
props:{
zxOption:{
type:Array,
default:() => {
return []
}
},
},
data(){
return{
active:0,
list:[],
upDateView:true
}
},
mounted(){
this.list = this.zxOption[this.active].rankList
},
methods:{
changeStart(arr,index,lastIdx){
//如何上一次是从最后一次切换过来的,切换类型
if((lastIdx + 1) == arr.length){
this.$forceUpdate()
//切换到第一个slide，速度为1秒
this.active = Number(this.active == 1 ? 0 : 1)
this.list = this.zxOption[this.active].rankList
}
}
}
}
</script>
<style scoped lang="less">
.red-c{
.t1,.t2,.right-t{
color:#FF9191 !important;
}
}
.com-line{
height: 100%;
margin-top: 14px;
position: relative;
.item:last-child{border-bottom: none !important}
.item{
padding: 14px 12px 12px 11px;
margin: 0px 10px 0px 15px;
width: calc(100% - 58px);
justify-content: space-between;
border-bottom: 1px solid #253290;
.t1{
width: 25px;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.t2{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #91C8FF;
}
.right-t{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>
pages/components/scroll-swiper.vue 0 → 100644
<template>
<div class="swiper-container swiper-no-swiping" ref="left-scroll">
<div class="swiper-wrapper">
<div class="swiper-slide" :style="swiperStyle" v-for="(item,index) in list" :key="index">
<slot name="item" :item="item" :index="index"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "scroll-swiper",
props:{
list:{
type:Array,
default:() => {
return []
}
},
swiperStyle:{
type:Object,
default:() =>{
return {
height:''
}
}
},
showMaxNum:{
type:[String,Number],
default:2
},
autoplay:{
type:Boolean,
default:true
}
},
data(){
return{
active:0,
comSwiper:''
}
},
mounted(){
this.initSwiper()
},
methods:{
initSwiper(){
//轮播参数
let _this = this;
this.comSwiper = new Swiper(this.$refs['left-scroll'], {
direction: "vertical",
loop:_this.list.length >= _this.showMaxNum ? true : false,
initialSlide: _this.active,
slidesPerView :_this.showMaxNum, //一屏展示多少个
observer: true,
observeParents: true,
// loopedSlides:3,
slidesPerGroup :1, //一次滚动多少个
speed: 200,
//数据长度大于或等于展示数放开轮播
autoplay: 4000,
//swiper切换前的索引
onSlideChangeStart: function(swiper){
_this.$emit('changeStart',_this.list,swiper.realIndex,_this.active)
_this.active = swiper.realIndex
}
});
}
}
}
</script>
<style scoped lang="less">
.swiper-container{
height: 100%;
width: 100%;
.swiper-slide{
width: 100%;
}
}
</style>
pages/screen.vue 0 → 100644
<template>
<div class="index-page">
<div class="index-page-head">{{type == 2 ? '天心区智慧体育监测平台' : '岳麓区智慧体育服务平台'}}</div>
<div class="flex-s">
<div class="left">
<comBox height="284px" title="智能设备使用监测（本学期）">
<left-a :statisticsObj="dataObj.statisticsObj"></left-a>
</comBox>
<comBox marginTop="34px" height="244px" title="智能跳绳个人榜 TOP 20 （本学期）">
<left-b v-if="dataObj.studentTop && dataObj.studentTop.length" :list="dataObj.studentTop"></left-b>
</comBox>
<comBox height="244px" marginTop="30px" title="智能跳绳学校榜 TOP 10 （本学期）">
<left-c v-if="dataObj.schoolTop && dataObj.schoolTop.length" :list="dataObj.schoolTop"></left-c>
</comBox>
</div>
<div class="center">
<!--视频轮播播放-->
<centerVideo :type="type" v-if="localBanner && localBanner.length" :list="localBanner" :stateNum="dataObj.statistics"></centerVideo>
<center-a v-if="dataObj.xxOption && dataObj.xxOption.length" :xxOption="dataObj.xxOption"></center-a>
</div>
<div class="right">
<comBox height="284px" title="学生运动参与总览（本学期）">
<right-a :stateNum="dataObj.statistics"></right-a>
</comBox>
<comBox marginTop="34px" height="244px" title="各级学生运动参与分布（本学期）">
<right-b v-if="dataObj.year && dataObj.year.length" :list="dataObj.year"></right-b>
</comBox>
<right-c v-if="dataObj.zxOption && dataObj.zxOption.length" :zxOption="dataObj.zxOption" ref="right-c"></right-c>
</div>
</div>
</div>
</template>
<script>
import comBox from './components/monitor-head'
import centerVideo from './components/center-video'
import leftA from './components/left-a-ctn'
import leftB from './components/left-b-ctn'
import leftC from './components/left-c-ctn'
import centerA from './components/center-a'
import rightA from './components/right-a-ctn'
import rightB from './components/right-b-ctn'
import rightC from './components/right-c-ctn'
import screen from '../services/screenService'
export default {
name: "screen",
components:{
comBox,centerVideo,
leftA,leftB,leftC,rightA,rightB,centerA,rightC
},
data(){
return{
type:2,
dataObj:{},
localBanner:[]
}
},
async asyncData ({app,query,params,redirect,returnData}) {
let ip = await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
console.log('服务端渲染接口sport/new/screen/getMidUrl：',ip)
let dataObj = await screen.handleScreenData(app)
},
async mounted(){
// this.dataObj = await monitorService.initData(this.type)
// this.localBanner = this.dataObj.banner || []
// let that = this
// this.dataInterval = setInterval(()=>{
//
// that.updateNewData()
//
// },3600000)
},
beforeDestroy(){
if(this.dataInterval){
clearInterval(this.dataInterval)
}
},
methods:{
async updateNewData(){
this.dataObj = {}
this.dataObj = await monitorService.initData(this.type)
}
}
}
</script>
<style lang="less">
&::-webkit-scrollbar {
width: 0px;
}
&::-webkit-scrollbar-thumb {
}
&::-webkit-scrollbar-track {
}
div{
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
</style>
<style lang="less" scoped>
.index-page{
height: 1080px;
width: 1920px;
background-image: url('../assets/images/screen/monitor-bg.png');
-webkit-background-size: 100%;
background-size: 100%;
&::-webkit-scrollbar {
width: 0px;
}
&::-webkit-scrollbar-thumb {
}
&::-webkit-scrollbar-track {
}
&-head{
height: 128px;
width: 100%;
-webkit-background-size: 100%;
background-size: 100%;
background-image: url('../assets/images/screen/bg-head.png');
font-size: 48px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 10px;
opacity: 1;
line-height: 110px;
text-align: center;
}
.flex-s{
display: flex;
justify-content: space-between;
.left{
margin-left: 30px;
height: 600px;
width: 452px;
}
.center{
width: 906px;
}
.right{
height: 600px;
width: 452px;
margin-right: 30px;
}
}
}
</style>
services/screenService.js 0 → 100644
const handleScreenData = async (app) => {
let banner = queryVideoBanner(app)
// let asd = await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
// console.log('处理service里面处理逻辑',asd)
let arr = await Promise.all([banner])
console.log('app是什么',banner)
return {
banner:arr[0] || [],
}
}
//中间banner图
const queryVideoBanner= async (app) =>{
await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
// return await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
}
export default {
handleScreenData
}
ssr/screen.js 0 → 100644
import container from '../pages/screen';
container.head = function() {
return {
title: `岳麓区数据大屏`,
meta: [
{
hid: 'description',
name: 'description',
content: '测试测试多url指向同一页面'
},
{
name: 'keywords',
content: '测试测试多url指向同一页面'
}
],
link: [],
};
};
export default container;
start.js
var cmd=require('node-cmd'); cmd.run('npm start');
//npm install node-cmd --save;
//pm2 start --name 'ssr-pc' ./start.js
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