Skip to content

S
ssr-pc
Commit 430eafde by tangjiale
Options

更新代码

parent 25abb8d4
Showing with 479 additions and 62 deletions
config/pro.config.json
{
"env": "pro",
"pigsy":"https://appapi.cnhnb.com"
"pigsy":"https://tiyuadmin.youchengzhang.cn"
}
nuxt.config.js
......@@ -92,6 +92,7 @@ module.exports = {
css: [
// '@/assets/css/icon-font.css'
'~/plugins/index.less',
],
plugins: [
'@/plugins/axios.js',
......
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';
// import flvjs from 'flv.js'
export default {
name: "center-video",
props:{
list:{
type:Array,
default:[]
},
stateNum:{
type:Object,
default:() => {
return {}
}
},
type:{
type:[String,Number],
default:2
}
},
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(){
const Swiper = require('Swiper')
const flvjs = require('flv.js')
//轮播参数
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-c-ctn.vue
......@@ -50,11 +50,11 @@
<style scoped lang="less">
.com-line{
height: 100%;
margin-top: 14px;
margin-top: 8px;
position: relative;
.item:last-child{border-bottom: none !important}
.item{
padding: 14px 12px 12px 11px;
padding: 10px 12px 12px 11px;
margin: 0px 10px 0px 15px;
width: calc(100% - 58px);
justify-content: space-between;
......
pages/components/right-c-ctn.vue
......@@ -67,11 +67,11 @@
}
.com-line{
height: 100%;
margin-top: 14px;
margin-top: 8px;
position: relative;
.item:last-child{border-bottom: none !important}
.item{
padding: 14px 12px 12px 11px;
padding: 10px 12px 12px 11px;
margin: 0px 10px 0px 15px;
width: calc(100% - 58px);
justify-content: space-between;
......
pages/components/scroll-swiper.vue
......@@ -47,6 +47,7 @@
methods:{
initSwiper(){
//轮播参数
const Swiper = require('Swiper')
let _this = this;
this.comSwiper = new Swiper(this.$refs['left-scroll'], {
direction: "vertical",
......
pages/screen.vue
<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">-->
<!--&lt;!&ndash;视频轮播播放&ndash;&gt;-->
<!--<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 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="dataObj.banner && dataObj.banner.length" :list="dataObj.banner" :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'
......@@ -65,23 +66,25 @@
},
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)
console.log('数据由服务端渲染')
return returnData({
dataObj
})
},
async mounted(){
// this.dataObj = await monitorService.initData(this.type)
// this.localBanner = this.dataObj.banner || []
this.localBanner = this.dataObj.banner || []
let that = this
this.dataInterval = setInterval(()=>{
that.updateNewData()
// let that = this
// this.dataInterval = setInterval(()=>{
//
// that.updateNewData()
//
// },3600000)
},3600000)
},
beforeDestroy(){
if(this.dataInterval){
......@@ -91,7 +94,7 @@
methods:{
async updateNewData(){
this.dataObj = {}
this.dataObj = await monitorService.initData(this.type)
this.dataObj = await screen.handleScreenData(app)
}
}
}
......
plugins/axios.js
......@@ -40,7 +40,7 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {
})
// 向nuxt注入一个内置的方法
inject('axiosApi', (url, params, option) => {
inject('axiosApi', (url, params, option = {}) => {
/**
* 获取动态配置域名 base
......
plugins/index.less 0 → 100644
@fontColor: #C1D9FF;
body{
font-family: PingFangSC-Medium, PingFang SC !important;
}
body::-webkit-scrollbar{
display: none !important;
}
.el-cascader-panel{
height: 200px;
}
.flex-c{
display: flex;
align-items: center;
}
.flex-s{
display: flex;
justify-content: space-between;
}
.max-h{
max-height: 200px !important;
overflow-y: auto;
}
.drop-input{
margin: 0px 10px !important;
width: calc(100% - 20px) !important;
}
.cannel-btn{
height: 48px;
width: 118px;
text-align: center;
line-height: 48px;
border-radius: 6px;
border: 1px solid #D7D7D7;
cursor: pointer;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #859DC3;
}
.config-btn{
height: 50px;
width: 118px;
text-align: center;
line-height: 48px;
border-radius: 6px;
background: #1890FF;
cursor: pointer;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.search-btn{
margin-left: 32px;
background: rgba(24, 144, 255, 0.1);
border-radius: 8px;
height: 42px;
line-height: 42px;
border: 1px solid #1890FF;
padding: 0px 30px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1890FF;
cursor: pointer;
}
.uploader-drop {
background: none !important;
}
.uploader-btn {
color: @fontColor !important;
border: 1px solid @fontColor !important;
}
::-webkit-scrollbar {
// display: none !important;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
}
.app-content .device-page .el-dialog{
background: #fff;
.el-input__inner{
text-align: left !important;
background-color: #fff;
border: 1PX solid #DCDFE6;
color: #606266;
}
::placeholder {
color: rgba(32, 46, 53, 0.67);
}
}
.el-scrollbar__wrap{
margin-bottom: 0px !important;
}
.el-pagination__total{
color: #626266 !important;
font-size: 16px !important;
}
services/screenService.js
import Vue from 'vue'
const that = Vue.prototype
let axiosApi = null
//根据外部传入的ctx对象，赋值给本地serve文件
const handleScreenData = async (app) => {
axiosApi = app.$axiosApi
let banner = await queryVideoBanner()
let year = queryYearList()
let schoolTop = getSchoolSpeedTopList()
let studentTop = getStudentSpeedTopList()
let statistics = getSportSchoolSum()
let statisticsObj = queryStatistics()
let banner = queryVideoBanner(app)
//小学周统计
let xxWeekRank = querySchoolJoin(1,1)
let xxMonthRank = querySchoolJoin(2,1)
//中学统计
let zxWeekRank = querySchoolJoin(1,2)
let zxMonthRank = querySchoolJoin(2,2)
// let asd = await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
let arr = await Promise.all([banner,year,schoolTop,studentTop,statistics,xxWeekRank,xxMonthRank,zxWeekRank,zxMonthRank,statisticsObj])
// console.log('处理service里面处理逻辑',asd)
let arr = await Promise.all([banner])
console.log('app是什么',banner)
let xxOption = handleXxOption(arr[5] || [],arr[6] || [])
let zxOption = handleZxOption(arr[7] || [],arr[8] || [])
return {
banner:arr[0] || [],
year:arr[1] || [],
schoolTop:chunkArr((arr[2] || []),5),
studentTop:chunkArr((arr[3] || []),5),
statistics:arr[4] || {},
xxOption:xxOption,
zxOption:zxOption,
statisticsObj:arr[9]
}
}
//中间banner图
const queryVideoBanner= async (app) =>{
await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
// return await app.$axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
const queryVideoBanner= async () =>{
return await axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
}
//年级分布
const queryYearList = async ()=>{
return await axiosApi('/sport/new/screen/getGradeJoinList',{regionCode:430103000000},{}).then(res =>{
//配置颜色
const color = ['#3597FF','#4EC9E1','#1BD861','#1BD861','#F19466','#3597FF','#4EC9E1','#1BD861','#F19466','#3597FF']
let option = []
res && res.length && res.forEach((e,index) => {
option.push({
joinRate:e.joinRate,
grade:e.grade,
style:{
height:((e.joinRate || 0) / 100) * 155 + 'px',
backgroundColor:color[index]
}
})
})
res = option
return res
})
}
//学校TOP10排行
const getSchoolSpeedTopList = async ()=>{
return await axiosApi('/sport/new/screen/getSchoolSpeedTopList',{regionCode:430103000000},{})
}
//学生TOP20排行
const getStudentSpeedTopList= async ()=> {
return await axiosApi('/sport/new/screen/getStudentSpeedTopList',{regionCode:430103000000},{})
}
//学生运动参与总览
const getSportSchoolSum = async () => {
return await axiosApi('/sport/new/screen/getSportSchoolSum',{regionCode:430103000000},{})
}
//云赛PK 设备数据
const queryStatistics = async ()=>{
return await axiosApi('/sport/new/screen/statistics',{regionCode:430103000000},{}).then(res =>{
let _list = [...(res.detailList || []),...(res.roomList || [])]
res._list = _list
return res
})
}
//学校平均参与率
const querySchoolJoin =async (dateType,studyStep)=>{
return await axiosApi("/sport/new/screen/getSchoolAvgJoinRate", {
regionCode:430103000000,dateType,studyStep
})
}
const handleZxOption = (arr1,arr2) =>{
let list = [
{
title:'学校运动参与率周排行榜（中学）',
rankList:arr1.length ? chunkArr(arr1,5) : [],
},
{
title:'学校运动参与率月排行榜（中学）',
rankList:arr2.length ? chunkArr(arr2,5) : [],
}
]
return list
}
const handleXxOption = (arr1,arr2) =>{
let lastArr1 = arr1.length > 5 ? arr1.slice(6,arr1.length) : []
let lastArr2 = arr2.length > 5 ? arr2.slice(6,arr2.length) : []
let list = [
{
title:'学校运动参与率周排行榜（小学）',
topFive:arr1.length ? arr1.slice(0,5) : [],
rankList:lastArr1.length ? chunkArr(lastArr1,5) : [],
},
{
title:'学校运动参与率月排行榜（小学）',
topFive:arr2.length ? arr2.slice(0,5) : [],
rankList:lastArr2.length ? chunkArr(lastArr2,5) : [],
}
]
return list
}
//数组拆分
const chunkArr = (array,size)=> {
const length = array.length
if (!length || !size || size < 1) {
return []
}
let index = 0
let resIndex = 0
let result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = array.slice(index, (index += size))
}
return result
}
export default {
......
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