feat: 初始化版本！
This commit is contained in:
tianyongbao
259
src/pages_qiun/pages/school/index.vue
Normal file
259
src/pages_qiun/pages/school/index.vue
Normal file
@@ -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: "600px", //数据展示体高度
|
||||
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>
|
||||
Reference in New Issue
Block a user