项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_qiun/pages/school/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<template>
   <view class="body window">
      <view class="topLine" :style="{ height: topBar + 'px' }"></view>
      <view class="nav row_align_center" id="nav">
         <li class="li_6" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
         <text class="title">{{ title ? title : '' }}</text>
         <li class="iconfont icon-zuojiantou back hidden li_6"></li>
      </view>
      <view class="data_body">
         <scroll-view class="scroll_list" scroll-y :style="{ height: scrollHeight }">
            <!-- æ•™å­¦ç§‘研情况 -->
            <view class="view_block">
               <view class="title">教学科研情况</view>
               <progress-bar :content="RankData" @updateRanking="updateRanking"></progress-bar>
            </view>
            <!-- å­¦åŽ†åˆ†å¸ƒçŠ¶å†µ -->
            <view class="view_block">
               <view class="title">学历分布状况
                  <text class="font-small" style="color: #ccc;">(教职工)</text>
               </view>
               <view class="charts-box" style="height: 300px;">
                  <qiun-data-charts type="rose" :chartData="ProductRateData" canvasId="school_a"
                     :canvas2d="isCanvas2d" :resshow="delayload" />
               </view>
            </view>
            <!-- å­¦ä¸šæˆç»© -->
            <view class="view_block">
               <view class="title">学业成绩分布图
                  <text class="font-small" style="color: #ccc;">(班级)</text>
               </view>
               <view class="charts-box" style="height: 300px;">
                  <qiun-data-charts type="radar" :chartData="RadarModel" background="none" canvasId="school_b"
                     :animation="false" :canvas2d="isCanvas2d" :resshow="delayload" />
               </view>
            </view>
            <!-- å›¾ä¹¦å€Ÿé˜…情况 -->
            <view class="view_block">
               <view class="title">图书借阅情况</view>
               <view class="charts-box" style="height: 300px;">
                  <qiun-data-charts type="line" canvasId="school_c" :canvas2d="isCanvas2d" :resshow="delayload"
                     :ontouch="true"
                     :opts="{ enableScroll: true, xAxis: { scrollShow: true, itemCount: 4, disableGrid: true }, series: { style: 'curve' } }"
                     :chartData="friendTrand" />
               </view>
            </view>
         </scroll-view>
      </view>
   </view>
</template>

<script>
import ProgressBar from "../../components/progress-bar/progress-bar.vue"
import RankData from '../../static/json/school/1.json';
import ProductRateData from '../../static/json/school/2.json';
import RadarModel from '../../static/json/school/3.json';
import friendTrand from '../../static/json/school/4.json';
import Config from '../../static/js/config'
import Common from '../../static/js/common'

export default {
   components: {
      ProgressBar
   },
   data() {
      return {
         info: "大便超人", //用户数据
         title: "智慧教育报表中心", //标题
         showDataTime: "today", //选中的时间
         tabCur: 0, //标签头下标
         topBar: 17, //导航高
         top: '180', //下拉栏位置
         scrollHeight: "1400rpx", //数据展示体高度
         friendTrand,
         RankData,
         ProductRateData,
         RadarModel,
         isCanvas2d: Config.ISCANVAS2D,
         delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
      };
   },
   computed: {
      locationArray() {
         return [{ value: "GDBJ-ENTRY-1", text: "天猫" }, { value: "GDBJ-ENTRY-201", text: "京东" }];
      }
   },
   methods: {
      async getData() {
         uni.showLoading();
         await setTimeout(() => {
            this.delayload = true;
            uni.hideLoading();
         }, 1000)
      },
      gotoBack() {
         Common.navigateBack("/index/index");
      },
      //获取设备信息
      async getTelephoneInfo() {
         var telephoneInfo = await Common.getTelephoneInfo();
         let hasHeight = 0;
         if (telephoneInfo.top >= 40) {
            this.top = telephoneInfo.statusBarHeight * 2 + 150;
            this.topBar = telephoneInfo.statusBarHeight;
         }
         // è®¾ç½®æ»šåŠ¨é«˜åº¦
         const query = wx.createSelectorQuery();
         query.select('#nav').boundingClientRect();
         query.exec(res => {
            res.map((item, index) => {
               hasHeight += item.height;
            })
            this.scrollHeight = (telephoneInfo.screenHeight - hasHeight - this.topBar) + 'px';
         })
      },
      updateRanking(nVal) {
         this.RankData = nVal;
      },
   },
   onLoad() {
      //#ifndef H5
      uni.showShareMenu();
      //#endif
      this.getData()
      this.getTelephoneInfo();
   }
}
</script>

<style scoped lang="scss">
.body {
   height: 100vh;
   margin: 0;
   padding: 0 20rpx;
   font-family: "montserrat";
   background-image: linear-gradient(125deg, #CB9FFE, #5894F7, #ABCDFA, #74A3F6, #CB9FFE);
   background-size: 400%;
   animation: bganimation 15s infinite;
}

.li_6 {
   list-style-type: none;
}

page,
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}

.window {
   height: 100vh;
   overflow: hidden;

   .topLine {
      width: 100%;
   }

   scroll-view {
      box-sizing: border-box;
   }

   .swiper {
      box-sizing: border-box;
   }

   .nav {
      background-size: 100% 100%;

      .back {
         font-size: 54rpx;
         padding: 20rpx 14rpx 15rpx 14rpx;
         color: #fff;
      }

      .title {
         color: #fff;
         font-size: 30rpx;
         flex: 1;
         text-align: center;
      }

      .hidden {
         visibility: hidden;
      }
   }

   .head {
      padding: 0 16rpx 14rpx 16rpx;
      color: #fff;
      background-color: #40A2ED;
      justify-content: space-between;
      font-size: 26rpx !important;

      .calendar_drag {
         width: 340rpx;
         display: flex;
         justify-content: center;
         align-items: center;

         .calendar_name {
            margin-right: 10rpx;
         }

         .icon-calendar {
            font-size: 26rpx;
            margin-top: 4rpx;
         }
      }
   }

   .data_body {
      overflow: auto;
      text-align: center;
      color: #333333;
      background-repeat: repeat;
      height: 100%;

      .scroll_list {
         height: 100%;

         .view_block {
            background-color: #fff;
            padding: 16rpx 20rpx 10rpx 20rpx;
            border-radius: 20rpx;
            margin-bottom: 40rpx;

            .title {
               text-align: left;
               margin-bottom: 30rpx;
               font-size: 30rpx;
            }

            .trend_title {
               text-align: right;
               font-size: 22rpx;
               color: #ff9900;
               margin-top: 50rpx;
            }
         }
      }
   }
}

@keyframes bganimation {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}
</style>