feat: 初始化版本！
This commit is contained in:
tianyongbao
585
src/pages_qiun/pages/finance/index.vue
Normal file
585
src/pages_qiun/pages/finance/index.vue
Normal file
@@ -0,0 +1,585 @@
|
||||
<template>
|
||||
<view class="body">
|
||||
<!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
|
||||
<view class="nav row_align_center" id="nav">
|
||||
<li class="li_4" style="color: #fff;z-index: 999;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
|
||||
</view>
|
||||
<view class="top_head">
|
||||
<view class="text_des">
|
||||
<text class="month_num">{{ nowTime.month }}</text>
|
||||
<text class="month_text">月</text>
|
||||
<text class="month_year">{{ nowTime.year }}</text>
|
||||
<text class="point">.</text>
|
||||
<text class="title">财务报告</text>
|
||||
</view>
|
||||
<view class="top_desc">
|
||||
<view class="text-gray">结余</view>
|
||||
<view class="remaining">{{ myWallet.remaining }}</view>
|
||||
<view class="row head_block">
|
||||
<view class="flex_1">
|
||||
<text class="text-gray">支出</text>
|
||||
<text class="text_green">{{ myWallet.expend }}</text>
|
||||
</view>
|
||||
<view class="flex_1">
|
||||
<text class="text-gray">收入</text>
|
||||
<text class="income">{{ myWallet.income }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="row_block">
|
||||
<view class="the_title" style="justify-content: space-between;">
|
||||
<view class="left_title">
|
||||
<view class="title_icon"></view>
|
||||
<text class="margin_stand-samll font-big wide">历史趋势</text>
|
||||
</view>
|
||||
<view class="right_btn">
|
||||
<view v-for="(item, index) in historyBtn" :key="index" :class="item.state ? 'active_btn' : ''"
|
||||
@click="changeHistoryBtn(item.type)">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="charts-box" style="height: 200px;">
|
||||
<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :reshow="delayload"
|
||||
:opts="{ xAxis: { itemCount: 12, disableGrid: true }, yAxis: { disableGrid: true, data: [{ disabled: true }] } }"
|
||||
:chartData="historyData" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row_block">
|
||||
<view class="the_title">
|
||||
<view class="title_icon"></view>
|
||||
<text class="margin_stand-samll font-big wide">钱都去哪了</text>
|
||||
</view>
|
||||
<view v-if="delayload" class="charts-box">
|
||||
<qiun-data-charts type="ring" canvasId="finance_b" :canvas2d="isCanvas2d" :reshow="delayload"
|
||||
:opts="{ padding: [15, 0, 4, 0], legend: { position: 'bottom' }, title: { name: expendCount }, subtitle: { name: '支出', fontSize: '20' } }"
|
||||
:chartData="expendDetail" />
|
||||
</view>
|
||||
<view class="the_title">
|
||||
<text class="margin_stand-samll font-middle wide">支出单笔最贵</text>
|
||||
</view>
|
||||
<view class="extend_rank">
|
||||
<view class="rank_item" v-for="(item, index) in extendRank" :key="index">
|
||||
<image :src="getImage(index)" mode="widthFix"></image>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="desc">{{ item.desc }}</text>
|
||||
<text class="text_green money">{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row_block">
|
||||
<view class="the_title">
|
||||
<view class="title_icon"></view>
|
||||
<text class="margin_stand-samll font-big wide">{{ nowTime.month }}月明细</text>
|
||||
</view>
|
||||
<view class="detail_list">
|
||||
<view v-for="(item, index) in detail_list" :key="index" class="detail_item">
|
||||
<view>
|
||||
<view class="font-middle">{{ item.date }}</view>
|
||||
<view class="font-small">{{ item.time }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<li class="li_2" :class="['iconfont', item.type == 'income' ? 'icon-income' : 'icon-expend']"></li>
|
||||
</view>
|
||||
<view class="right_content">
|
||||
<view class="money">{{ item.type == 'income' ? '+' : '-' }}{{ item.money }}</view>
|
||||
<view class="text-gray font-middle">{{ item.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="end_block">
|
||||
<view class="the_title" style="margin-bottom: 40rpx;">
|
||||
<view class="title_icon"></view>
|
||||
<text class="margin_stand-samll font-big wide">我的支出水平</text>
|
||||
</view>
|
||||
<view class="level_bar">
|
||||
<view v-for="(item, index) in extend_level_bar" :key="index" :style="{ width: item.width }"
|
||||
:class="item.state ? 'text_green font-middle' : ''">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="level_bar">
|
||||
<view v-for="(item, index) in extend_level_bar" :key="index" :style="{ width: item.width }"
|
||||
:class="item.state ? 'active_bar' : 'default_bar'"></view>
|
||||
</view>
|
||||
<view class="level_bar">
|
||||
<view v-for="(item, index) in extend_level_bar" :key="index" :style="{ width: item.width }"
|
||||
:class="item.state ? 'text_green font-middle' : ''">{{ item.range }}</view>
|
||||
</view>
|
||||
<view class="extend_message">
|
||||
<li style="color: #ccc;" :class="['iconfont icon-message']"></li>
|
||||
<view>
|
||||
“ 我的支出水平已超过
|
||||
<text>{{ extend_morethan }}</text>
|
||||
的乡镇居民。 ”
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressBar from "../../components/progress-bar/progress-bar.vue"
|
||||
import dataOne from '../../static/json/finance/1.json';
|
||||
import expendDetail from '../../static/json/finance/2.json';
|
||||
|
||||
import Config from '../../static/js/config'
|
||||
import Common from '../../static/js/common'
|
||||
let _now = new Date();
|
||||
let now_time = {};
|
||||
now_time.year = _now.getFullYear()
|
||||
now_time.month = _now.getMonth() + 1
|
||||
now_time.day = _now.getDay()
|
||||
export default {
|
||||
components: {
|
||||
ProgressBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: '大便超人', //用户数据
|
||||
scrollHeight: "600px", //数据展示体高度
|
||||
isCanvas2d: Config.ISCANVAS2D,
|
||||
historyData: {},
|
||||
dataOne,
|
||||
expendDetail,
|
||||
expendCount: 0,
|
||||
delayload: false,
|
||||
nowTime: {
|
||||
year: now_time.year,
|
||||
month: now_time.month,
|
||||
day: now_time.day
|
||||
},
|
||||
historyBtn: [{
|
||||
name: "支出",
|
||||
state: 1,
|
||||
type: "expend"
|
||||
},
|
||||
{
|
||||
name: "收入",
|
||||
state: 0,
|
||||
type: "income"
|
||||
},
|
||||
{
|
||||
name: "结余",
|
||||
state: 0,
|
||||
type: "remaining"
|
||||
},
|
||||
],
|
||||
myWallet: {
|
||||
remaining: 3000.34,
|
||||
expend: 5240.32,
|
||||
income: 8240.66
|
||||
},
|
||||
extendRank: [{
|
||||
name: "腐败聚会",
|
||||
desc: now_time.month + "月6日12:34-跨界空间轰趴",
|
||||
money: "422.12"
|
||||
},
|
||||
{
|
||||
name: "沐浴按摩",
|
||||
desc: now_time.month + "月12日21:34-乔杉沐浴城",
|
||||
money: "318.00"
|
||||
},
|
||||
{
|
||||
name: "食品酒水",
|
||||
desc: now_time.month + "月1日21:34-school酒馆",
|
||||
money: "289.50"
|
||||
},
|
||||
],
|
||||
extend_level_bar: [
|
||||
{ name: "低消费", range: "<2000元", width: "20%" },
|
||||
{ name: "中间消费", range: "2000-5000元", width: "35%" },
|
||||
{ name: "较高消费", range: "5000-8000元", width: "25%", state: 1 },
|
||||
{ name: "高消费", range: ">8000元", width: "20%" },
|
||||
],
|
||||
extend_morethan: "68%",
|
||||
detail_list: [
|
||||
{ date: now_time.month + "-01", time: "11:01", "type": "extend", money: "10.00", desc: "银行卡转出" },
|
||||
{ date: now_time.month + "-01", time: "13:45", "type": "income", money: "18.00", desc: "银行卡收入" },
|
||||
{ date: now_time.month + "-02", time: "06:21", "type": "extend", money: "123.45", desc: "信用卡转出" },
|
||||
{ date: now_time.month + "-03", time: "07:38", "type": "income", money: "23.00", desc: "银行卡收入" },
|
||||
{ date: now_time.month + "-08", time: "16:28", "type": "extend", money: "23.56", desc: "信用卡转出" },
|
||||
{ date: now_time.month + "-09", time: "15:25", "type": "income", money: "850.12", desc: "银行卡收入" },
|
||||
{ date: now_time.month + "-09", time: "18:52", "type": "income", money: "1.88", desc: "银行卡收入" },
|
||||
{ date: now_time.month + "-11", time: "21:12", "type": "extend", money: "220.21", desc: "银行卡转出" },
|
||||
{ date: now_time.month + "-12", time: "13:08", "type": "income", money: "32.28", desc: "银行卡收入" },
|
||||
{ date: now_time.month + "-12", time: "12:41", "type": "extend", money: "122.12", desc: "信用卡转出" },
|
||||
{ date: now_time.month + "-13", time: "17:21", "type": "income", money: "10.00", desc: "银行卡收入" },
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"historyBtn": {
|
||||
deep: true,
|
||||
handler: function (newVal, oldVal) {
|
||||
this.filterHistoryData();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
uni.showLoading();
|
||||
this.filterHistoryData();
|
||||
for (let i = 0; i < this.expendDetail.series.length; i++) {
|
||||
this.expendDetail.series[i].format = "pieDemo"
|
||||
}
|
||||
let length = this.expendDetail.series[0].data.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
this.expendCount += this.expendDetail.series[0].data[i].value
|
||||
}
|
||||
await setTimeout(() => {
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
}, 1000)
|
||||
},
|
||||
changeHistoryBtn(type) {
|
||||
for (let i = 0; i < this.historyBtn.length; i++) {
|
||||
if (this.historyBtn[i].type == type) {
|
||||
this.historyBtn[i].state = 1
|
||||
} else {
|
||||
this.historyBtn[i].state = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
filterHistoryData() {
|
||||
let type = this.historyBtn.filter(x => x.state == 1)[0].type;
|
||||
switch (type) {
|
||||
case "expend":
|
||||
this.historyData = this.dataOne.expend;
|
||||
break;
|
||||
case "income":
|
||||
this.historyData = this.dataOne.income;
|
||||
break;
|
||||
case "remaining":
|
||||
this.historyData = this.dataOne.remaining;
|
||||
break;
|
||||
}
|
||||
},
|
||||
gotoBack() {
|
||||
Common.navigateBack("/index/index");
|
||||
},
|
||||
getImage(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return "https://s1.ax1x.com/2023/03/31/ppRYrfP.png";
|
||||
break;
|
||||
case 1:
|
||||
return "https://s1.ax1x.com/2023/03/31/ppRYySf.png";
|
||||
break;
|
||||
case 2:
|
||||
return "https://s1.ax1x.com/2023/03/31/ppRY6l8.png";
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
//#ifndef H5
|
||||
uni.showShareMenu();
|
||||
//#endif
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.body {
|
||||
height: 100%;
|
||||
background-color: #560594;
|
||||
margin: 0;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.li_4 {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 50rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.text_green {
|
||||
color: #4ECDB6;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.detail_list {
|
||||
height: 700rpx;
|
||||
overflow: auto;
|
||||
color: #9E9E9E;
|
||||
|
||||
.detail_item {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.li_2 {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right_content {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-income {
|
||||
color: #4AABF9;
|
||||
}
|
||||
|
||||
.icon-expend {
|
||||
color: #E45521;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extend_message {
|
||||
margin-top: 20rpx;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
|
||||
text {
|
||||
color: #ff9900;
|
||||
}
|
||||
}
|
||||
|
||||
.level_bar {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
color: #ccc;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
line-height: 40rpx;
|
||||
|
||||
view {
|
||||
border-right: 2rpx solid #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
right: -40rpx;
|
||||
}
|
||||
|
||||
.range {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: -40rpx;
|
||||
}
|
||||
|
||||
.default_bar {
|
||||
background-color: #A0DFCD;
|
||||
}
|
||||
|
||||
.active_bar {
|
||||
background-color: #02AE7A;
|
||||
}
|
||||
}
|
||||
|
||||
.right_btn {
|
||||
float: right;
|
||||
display: flex;
|
||||
color: #ccc;
|
||||
font-size: 22rpx;
|
||||
|
||||
view {
|
||||
line-height: 50rpx;
|
||||
height: 50rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.active_btn {
|
||||
padding: 0rpx 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.end_block {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.row_block {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0px;
|
||||
width: 92%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
border-top: 1px dashed #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.the_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title_icon {
|
||||
background-color: #7E7E7E;
|
||||
height: 40rpx;
|
||||
width: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.extend_rank {
|
||||
width: 100%;
|
||||
background-color: #F5F5F5;
|
||||
box-sizing: border-box;
|
||||
padding: 10rpx;
|
||||
|
||||
.rank_item {
|
||||
width: 100%;
|
||||
margin: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 10rpx;
|
||||
color: #7D7D7D;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 50%;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.money {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top_head {
|
||||
height: 435rpx;
|
||||
width: 100%;
|
||||
padding: 110rpx 10rpx 0rpx 10rpx;
|
||||
background: url("https://img1.qunarzz.com/travel/d3/1704/db/34de73c353d44db5.jpg_r_640x426x70_53f464ca.jpg") no-repeat center 0px;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top_desc {
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.text-gray {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.remaining {
|
||||
font-size: 46rpx;
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.head_block {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.income {
|
||||
color: #E34B5E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text_des {
|
||||
height: 100rpx;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
margin-left: 60rpx;
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.month_num {
|
||||
font-size: 90rpx;
|
||||
}
|
||||
|
||||
.month_text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.month_year {
|
||||
font-size: 22rpx;
|
||||
position: absolute;
|
||||
left: 60rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
.point {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
348
src/pages_qiun/pages/main/index.vue
Normal file
348
src/pages_qiun/pages/main/index.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<view class="window">
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="topLine" :style="{ height: topBar + 'px' }"></view>
|
||||
<!-- #endif -->
|
||||
<view class="nav row_align_center" id="nav">
|
||||
<li class="li_5" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
|
||||
<text class="title li_5">{{ title ? title : '' }}</text>
|
||||
<li class="iconfont icon-zuojiantou back hidden"></li>
|
||||
</view>
|
||||
<view class="row_align_center head" id="head">
|
||||
<!-- 日期下拉列表 -->
|
||||
<drop-down ref="caleDrop" @tap="changDrop(1)" @changeItem="changeTime" :list="timeArray" :contentTop="top"
|
||||
selectWidth="260rpx" contentLeft="0"></drop-down>
|
||||
<!-- 日历选择日期 -->
|
||||
<view v-if="showCalendar"
|
||||
:class="['dropdown-item__selected', listWidth != '150rpx' ? 'dropdown-item__right' : 'dropdown-item__left']"
|
||||
@click="openCalendar" class="calendar_drag">
|
||||
<view class="selected__name">{{ nowDate }}</view>
|
||||
<li class="iconfont icon-calendar" style="margin-left: 10rpx;"></li>
|
||||
</view>
|
||||
<!-- 公司区域下拉列表 -->
|
||||
<drop-down ref="companyDrop" @tap="changDrop(2)" @changeItem="changeLocation" :list="locationArray"
|
||||
:contentTop="top" contentRight="10" :selectWidth="showCalendar ? '200rpx' : '300rpx'" listWidth="75%">
|
||||
</drop-down>
|
||||
</view>
|
||||
<uni-calendar ref="calendar" :insert="false" :start-date="startDate" :end-date="endDate" :clearDate="false"
|
||||
@confirm="confirm">
|
||||
</uni-calendar>
|
||||
<!--滑动列表头-->
|
||||
<wuc-tab id="wuctab" :tab-list="tabList" :tabCur.sync="tabCur" tab-class="text-center text-white bg-blue"
|
||||
select-class="text-white"></wuc-tab>
|
||||
<!--主体内容-->
|
||||
<view class="data_body" :style="{ height: scrollHeight }">
|
||||
<view v-if="tabCur == 0">
|
||||
<wechat :scrollHeight="scrollHeight" />
|
||||
</view>
|
||||
<view v-else-if="tabCur == 1">
|
||||
<user-operate :scrollHeight="scrollHeight" />
|
||||
</view>
|
||||
<view v-else-if="tabCur == 2">
|
||||
<user-healthy :scrollHeight="scrollHeight" />
|
||||
</view>
|
||||
<view v-else-if="tabCur == 3">
|
||||
<user-server :scrollHeight="scrollHeight"></user-server>
|
||||
</view>
|
||||
</view>
|
||||
<!--水印-->
|
||||
<view class="water-mark-mask row_wrap" :style="{ height: scrollHeight }">
|
||||
<text class="container" v-for="(count, index) in 10" :key="index">{{ info.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Wechat from "../../components/data-center/wechat.vue"
|
||||
import UserOperate from "../../components/data-center/user-operate.vue"
|
||||
import UserHealthy from "../../components/data-center/user-healthy.vue"
|
||||
import UserServer from "../../components/data-center/user-server.vue"
|
||||
import WucTab from '../../components/wuc-tab/wuc-tab.vue'
|
||||
import DropDown from '../../components/drop-down/drop-down.vue'
|
||||
import UniCalendar from '../../components/uni-calendar/uni-calendar.vue'
|
||||
|
||||
import Config from '../../static/js/config'
|
||||
import Common from "../../static/js/common"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WucTab,
|
||||
DropDown,
|
||||
UniCalendar,
|
||||
Wechat,
|
||||
UserOperate,
|
||||
UserHealthy,
|
||||
UserServer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: Config.TABLIST, //标签头
|
||||
timeArray: Config.TIMEARRAY, //时间数组
|
||||
info: '大便超人', //用户数据
|
||||
title: "数据报表中心", //标题
|
||||
showDataTime: "today", //选中的时间
|
||||
tabCur: 0, //标签头下标
|
||||
topBar: 17, //导航高
|
||||
top: '180', //下拉栏位置
|
||||
scrollHeight: "100%", //数据展示体高度
|
||||
nowDate: Common.getNowDate(), //现在日期
|
||||
endDate: Common.getNowDate(), //日历可选日期范围的结束时间
|
||||
startDate: Common.getPreMonth(Common.getNowDate()), //日历可选日期范围的开始时间,
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
locationArray() {
|
||||
return [{
|
||||
value: "GDBJ-ENTRY-1",
|
||||
text: "天猫"
|
||||
}, {
|
||||
value: "GDBJ-ENTRY-201",
|
||||
text: "京东"
|
||||
}];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gotoBack() {
|
||||
Common.navigateBack("/index/index");
|
||||
},
|
||||
changDrop(index) {
|
||||
if (index == 1 && this.$refs.companyDrop.showList) {
|
||||
this.$refs.companyDrop.closePopup()
|
||||
} else if (index == 2 && this.$refs.caleDrop.showList) {
|
||||
this.$refs.caleDrop.closePopup()
|
||||
}
|
||||
},
|
||||
// 打开日历
|
||||
openCalendar() {
|
||||
this.$refs.calendar.open();
|
||||
},
|
||||
// 日历选择日期
|
||||
confirm(e) {
|
||||
if (this.nowDate != e.fulldate || !this.showCalendar) {
|
||||
this.showCalendar = true;
|
||||
this.$refs.caleDrop.selectAuto();
|
||||
this.nowDate = e.fulldate;
|
||||
this.showDataTime = e.fulldate.replace(/-/g, "");
|
||||
Common.tipMsg("当前时间:" + this.showDataTime)
|
||||
}
|
||||
},
|
||||
//下拉选择时间
|
||||
changeTime(e) {
|
||||
if (e.value == "auto") {
|
||||
this.openCalendar();
|
||||
} else if (this.showDataTime != e.value) {
|
||||
this.showDataTime = e.value;
|
||||
this.showCalendar = false;
|
||||
Common.tipMsg("当前时间:" + this.showDataTime)
|
||||
}
|
||||
},
|
||||
changeLocation(e) {
|
||||
Common.tipMsg("当前选中平台:" + e.text)
|
||||
},
|
||||
//获取设备信息
|
||||
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.select('#head').boundingClientRect();
|
||||
query.select('#wuctab').boundingClientRect();
|
||||
query.exec(res => {
|
||||
res.map((item, index) => {
|
||||
hasHeight += item.height;
|
||||
})
|
||||
this.scrollHeight = (telephoneInfo.screenHeight - hasHeight - this.topBar) + 'px';
|
||||
})
|
||||
},
|
||||
getH5Info() {
|
||||
uni.getSystemInfo({
|
||||
success: e => {
|
||||
let hasHeight = 0;
|
||||
let element = wx.createSelectorQuery().in(this);
|
||||
element.select('#nav').boundingClientRect();
|
||||
element.select('#head').boundingClientRect();
|
||||
element.select('#wuctab').boundingClientRect();
|
||||
element.exec(res => {
|
||||
res.map((item, index) => {
|
||||
hasHeight += item.height;
|
||||
})
|
||||
this.scrollHeight = (e.screenHeight - hasHeight) + 'px';
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
//#ifndef H5
|
||||
uni.showShareMenu();
|
||||
this.getTelephoneInfo();
|
||||
//#endif
|
||||
//#ifdef H5
|
||||
this.getH5Info();
|
||||
//#endif
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.li_5 {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.window {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
.topLine {
|
||||
background-color: #40A2ED;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-image: url(http://photo.gdbjyy.cn/image/BCAI/top_bg.jpg);
|
||||
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;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.operate {
|
||||
view {
|
||||
padding: 5rpx 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #40A2ED;
|
||||
}
|
||||
|
||||
.bg-yellow {
|
||||
background-color: #FFC300;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.update {
|
||||
color: #C4100A;
|
||||
margin-left: auto;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cry {
|
||||
font-size: 96rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.water-mark-mask {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
justify-content: space-between;
|
||||
pointer-events: none; //无视鼠标事件，相当于鼠标事件透传下去一样
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
text {
|
||||
width: 50%;
|
||||
color: #909399;
|
||||
opacity: 0.25;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
.histogram {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
canvas {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
762
src/pages_qiun/pages/sport/index.vue
Normal file
762
src/pages_qiun/pages/sport/index.vue
Normal file
@@ -0,0 +1,762 @@
|
||||
<template>
|
||||
<view class="body">
|
||||
<view class="nav row_align_center" id="nav">
|
||||
<li class="li_7" style="z-index: 999;font-size: 50rpx;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()">
|
||||
</li>
|
||||
</view>
|
||||
<view class="head">
|
||||
<view class="title">运动报告</view>
|
||||
<view class="customer_img">
|
||||
<!-- <open-data type="userAvatarUrl" class="img"></open-data> -->
|
||||
<image class="img" src="https://s1.ax1x.com/2022/11/16/zZUoK1.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="score_view">
|
||||
<view class="title">本次评分</view>
|
||||
<view class="detail">
|
||||
<view class="socre">98</view>
|
||||
<li class="li_7" :class="['iconfont icon-up text-green']" @click="gotoBack()"></li>
|
||||
<view class="up_socre">0.4</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="census_view">
|
||||
<view class="left">
|
||||
<view class="text_gray small_text">消耗(千卡)</view>
|
||||
<view class="middle_text text_wide_900">165</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="text_gray small_text">心率主要集中在</view>
|
||||
<view style="font-size: 30rpx;">燃烧脂肪</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="census_view">
|
||||
<view class="left">
|
||||
<view class="text_gray small_text">时长(分钟)</view>
|
||||
<view class="middle_text text_wide_900">75</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="text_gray small_text">累计打卡(天)</view>
|
||||
<view class="middle_text text_wide_900">24</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="text_gray small_text">平均心率(次/分钟)</view>
|
||||
<view class="middle_text text_wide_900">98</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="consume_view">
|
||||
<view class="wrap"><span class="consume_tip">身体消耗</span></view>
|
||||
<li class="li_7" :class="['iconfont icon-niunai consume_icon']"></li>
|
||||
<view class="desc">
|
||||
<view class="small_text">约消耗</view>
|
||||
<view class="text_wide_900"><text class="left">1000</text><text class="right">毫升牛奶</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="heart_rate_view">
|
||||
<view class="left">
|
||||
<li class="li_7" :class="['iconfont icon-zhexiantu']"></li>
|
||||
<text class="title">心率变化曲线</text>
|
||||
</view>
|
||||
<view class="right text_gray">心率变化</view>
|
||||
</view>
|
||||
<view v-if="heartRateData.series" class="heart_rate_chart">
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="tline" canvasId="sport_a" :canvas2d="isCanvas2d" :resshow="delayload"
|
||||
:opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ min: 0, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
|
||||
:chartData="heartRateData" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="title_view">
|
||||
<view class="left">
|
||||
<li class="li_7" :class="['iconfont icon-xinlv']"></li>
|
||||
<text class="title">心率区间</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="heart_rate_range">
|
||||
<view class="top">
|
||||
<view class="item" v-for="(item, index) in heatRateRange" :key="index">
|
||||
<view class="name text_gray">{{ item.name }}</view>
|
||||
<view class="data">{{ item.type }}{{ item.data }}<text class="unit text_gray">分钟</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="heartRateRangeData" class="charts-box">
|
||||
<qiun-data-charts type="ring" canvasId="sport_b" :canvas2d="isCanvas2d" :resshow="delayload"
|
||||
:opts="{ legend: { position: 'bottom' }, extra: { ring: { border: false, centerColor: '#312C34' } }, title: { name: '' }, subtitle: { name: '' } }"
|
||||
:chartData="heartRateRangeData" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="title_view">
|
||||
<view class="left">
|
||||
<li class="li_7" :class="['iconfont icon-pie']"></li>
|
||||
<text class="title">运动分析</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sport_analysis_view">
|
||||
<view class="top">
|
||||
<li class="iconfont icon-feiji li_7"></li>
|
||||
<text class="title font-s-34">跑步机</text>
|
||||
</view>
|
||||
<view class="middle">
|
||||
<view class="left">
|
||||
<li class="iconfont icon-clock li_7"></li>
|
||||
<view>3.24P.M</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<li class="iconfont icon-huo li_7"></li>
|
||||
<view>热量消耗(千卡)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="left">
|
||||
<li class="iconfont icon-kongxinyuan li_7"></li>
|
||||
<view>燃烧脂肪</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="text_wide_600 font-s-40">637</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box_view speed_rank_view">
|
||||
<view class="top">
|
||||
<view class="item" v-for="(item, index) in speedRank" :key="index">
|
||||
<view class="name text_gray">{{ item.name }}</view>
|
||||
<view class="data">{{ item.data }}<text class="unit text_gray">{{ item.unit }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="speedRankData" class="charts-box">
|
||||
<qiun-data-charts type="bar" canvasId="sport_c" :canvas2d="isCanvas2d" :resshow="delayload"
|
||||
:chartData="speedRankData" background="none"
|
||||
:opts="{ xAxis: { disabled: true, disableGrid: true }, extra: { bar: { barBorderCircle: true, width: 20 } }, legend: { show: false } }" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="box_view">
|
||||
<view v-if="speedAndRateData.series" class="charts-box">
|
||||
<qiun-data-charts type="tline" canvasId="sport_d" :canvas2d="isCanvas2d" :resshow="delayload"
|
||||
:opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ position: 'left', min: 0, max: 25 }, { position: 'right', min: 50, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
|
||||
:chartData="speedAndRateData" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import heartRateData from "../../static/json/sport/1.json"
|
||||
import heartRateRangeData from "../../static/json/sport/2.json"
|
||||
import speedRankData from "../../static/json/sport/3.json"
|
||||
import speedAndRateData from "../../static/json/sport/4.json"
|
||||
import Config from '../../static/js/config'
|
||||
import Common from '../../static/js/common'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: '大便超人', //用户数据
|
||||
isCanvas2d: Config.ISCANVAS2D,
|
||||
heartRateData: {},
|
||||
speedRankData: {},
|
||||
speedAndRateData: {},
|
||||
delayload: null,
|
||||
heartRateRangeData: {},
|
||||
heatRateRange: [{
|
||||
name: "激活放松",
|
||||
data: "5",
|
||||
type: "≤"
|
||||
},
|
||||
{
|
||||
name: "动态热身",
|
||||
data: "13",
|
||||
type: ""
|
||||
},
|
||||
{
|
||||
name: "脂肪燃烧",
|
||||
data: "24",
|
||||
type: ""
|
||||
},
|
||||
{
|
||||
name: "糖分消耗",
|
||||
data: "8",
|
||||
type: "≤"
|
||||
},
|
||||
{
|
||||
name: "心肺训练",
|
||||
data: "7",
|
||||
type: ""
|
||||
},
|
||||
{
|
||||
name: "极限锻炼",
|
||||
data: "16",
|
||||
type: ""
|
||||
},
|
||||
],
|
||||
speedRank: [{
|
||||
name: "距离",
|
||||
data: "5",
|
||||
unit: "公里"
|
||||
},
|
||||
{
|
||||
name: "时长",
|
||||
data: "12",
|
||||
unit: "分钟"
|
||||
},
|
||||
{
|
||||
name: "平均配速",
|
||||
data: "6\'05\"",
|
||||
unit: ""
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
uni.showLoading();
|
||||
/*将钟点时间随机转成某一天的具体时间戳*/
|
||||
if (typeof heartRateData.series[0].data[0][0] == 'string') {
|
||||
for (let i = 0; i < heartRateData.series.length; i++) {
|
||||
heartRateData.series[i].data.map(x => {
|
||||
x[0] = "2018/08/08 " + x[0];
|
||||
x[0] = this.tranTimestamp(x[0]);
|
||||
return x[0];
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
if (typeof speedAndRateData.series[0].data[0][0] == 'string') {
|
||||
for (let i = 0; i < speedAndRateData.series.length; i++) {
|
||||
speedAndRateData.series[i].data.map(x => {
|
||||
x[0] = "2018/08/08 " + x[0];
|
||||
x[0] = this.tranTimestamp(x[0]);
|
||||
return x[0];
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.heartRateData = heartRateData;
|
||||
this.heartRateRangeData = heartRateRangeData;
|
||||
this.speedRankData = speedRankData;
|
||||
this.speedAndRateData = speedAndRateData;
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
},
|
||||
tranTimestamp(date) {
|
||||
return new Date(date).getTime()
|
||||
},
|
||||
gotoBack() {
|
||||
Common.navigateBack("/index/index");
|
||||
},
|
||||
|
||||
},
|
||||
onReady() {
|
||||
//#ifndef H5
|
||||
uni.showShareMenu();
|
||||
//#endif
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.body {
|
||||
height: 100%;
|
||||
background-color: #1C191F;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
padding: 80rpx 20rpx 0 20rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 50rpx;
|
||||
|
||||
.box_view {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
background-color: #312C34;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.speed_rank_view {
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 33%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 20rpx;
|
||||
text-align: left;
|
||||
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.data {
|
||||
font-size: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 24rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sport_analysis_view {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
background-color: #312C34;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-feiji {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 50%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 50%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 50%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.icon-kongxinyuan {
|
||||
color: #6FCEF7;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 50%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heart_rate_range {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #312C34;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 33%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.data {
|
||||
font-size: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 24rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heart_rate_chart {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #312C34;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title_view {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
height: 150rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heart_rate_view {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 150rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-zhexiantu {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 22rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #342E39;
|
||||
}
|
||||
}
|
||||
|
||||
.consume_view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
position: relative;
|
||||
margin-top: 100rpx;
|
||||
background-color: #312C34;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.consume_img {
|
||||
width: 240rpx;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: -80rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.consume_icon {
|
||||
font-size: 220rpx;
|
||||
position: absolute;
|
||||
top: -80rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
position: absolute;
|
||||
right: 80rpx;
|
||||
top: 20rpx;
|
||||
|
||||
view {
|
||||
padding: 10rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #10A764;
|
||||
}
|
||||
|
||||
.text_gray {
|
||||
color: #8E8B8B;
|
||||
}
|
||||
|
||||
.small_text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.font-s-34 {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.font-s-36 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.font-s-38 {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.font-s-40 {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.middle_text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.text_wide_900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.text_wide_600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.census_view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
|
||||
view {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
|
||||
view {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
|
||||
view {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.score_view {
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
color: #8E8B8B;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.detail {
|
||||
height: 120rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.icon-up {
|
||||
margin-left: 40rpx;
|
||||
height: 54rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.socre {
|
||||
font-size: 80rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.up_socre {
|
||||
color: #10A764;
|
||||
height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
height: 140rpx;
|
||||
line-height: 140rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.customer_img {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
right: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.li_7 {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 50rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.consume_view:nth-child(even) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
.consume_tip {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 188rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
position: absolute;
|
||||
top: 36rpx;
|
||||
right: -44rpx;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
border: 1px dashed;
|
||||
box-shadow: 0 0 0 3px #10A764, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
|
||||
background: #10A764;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
left: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrap:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
width: 80rpx;
|
||||
height: 14rpx;
|
||||
position: absolute;
|
||||
right: 68rpx;
|
||||
top: -1px;
|
||||
background: #4D6530;
|
||||
}
|
||||
|
||||
.wrap:after {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
width: 14rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 66rpx;
|
||||
background: #4D6530;
|
||||
}</style>
|
||||
Reference in New Issue
Block a user