1

pages/screen.vue

+<template>
+    <div class="index-page">
+        <div class="index-page-head">{{`${pageTitle[type]}智慧体育监测平台`}}</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'
+  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:'',
+
+        pageTitle:['','','天心区','岳麓区','芙蓉区','雨花区','开福区','浏阳市'],
+
+        dataObj:{},
+        localBanner:[]
+      }
+    },
+    async asyncData ({app,query,params,redirect,returnData}) {
+      let {type = 2} = params
+      let dataObj = await screen.handleScreenData(app,type)
+      return returnData({
+        dataObj,
+        type:type
+      })
+    },
+    async mounted(){
+      
+       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 screen.handleScreenData(app,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

+
+import Vue from 'vue'
+let axiosApi = null
+
+let regionCode = ''
+
+//根据外部传入的ctx对象，赋值给本地serve文件
+const handleScreenData = async (app,type = 2) => {
+
+  let areaCode = {
+    2:'430103000000', //天心区
+    3:'430104000000', //岳麓区
+    4:'430102000000', //芙蓉区
+    5:'430111000000', //雨花区
+    6:'430105000000',  //开福区
+    7:'430181000000', //浏阳市
+    // 8:'430106000000',  //高新区
+  }
+  regionCode = areaCode[type] || '430104000000'
+
+  axiosApi = app.$axiosApi
+
+  let banner = await queryVideoBanner()
+  let year = queryYearList()
+  let schoolTop = getSchoolSpeedTopList()
+  let studentTop = getStudentSpeedTopList()
+  let statistics = getSportSchoolSum()
+  let statisticsObj = queryStatistics()
+
+  //小学周统计
+  let xxWeekRank = querySchoolJoin(1,1)
+  let xxMonthRank = querySchoolJoin(2,1)
+  //中学统计
+  let zxWeekRank = querySchoolJoin(1,2)
+  let zxMonthRank = querySchoolJoin(2,2)
+
+  let arr = await Promise.all([banner,year,schoolTop,studentTop,statistics,xxWeekRank,xxMonthRank,zxWeekRank,zxMonthRank,statisticsObj])
+
+  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 () =>{
+  return await axiosApi('/sport/new/screen/getMidUrl',{regionCode:regionCode},{})
+}
+
+//年级分布
+const queryYearList = async ()=>{
+  return await axiosApi('/sport/new/screen/getGradeJoinList',{regionCode:regionCode},{}).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:regionCode},{})
+}
+
+//学生TOP20排行
+const getStudentSpeedTopList= async ()=> {
+  return await axiosApi('/sport/new/screen/getStudentSpeedTopList',{regionCode:regionCode},{})
+}
+
+//学生运动参与总览
+const getSportSchoolSum = async () => {
+  return await axiosApi('/sport/new/screen/getSportSchoolSum',{regionCode:regionCode},{})
+}
+//云赛PK 设备数据
+const queryStatistics = async ()=>{
+  return await axiosApi('/sport/new/screen/statistics',{regionCode:regionCode},{}).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:regionCode,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 {
+  handleScreenData
+}