212 lines
4.6 KiB
Vue
212 lines
4.6 KiB
Vue
<template>
|
|
<view class="TrendPage">
|
|
<view class="charts">
|
|
<!-- 时间选择 -->
|
|
<view class="boxTime">
|
|
<view class="one">
|
|
<picker mode="date" :end="endDate" @change="handStartTimeH" :fields="fields"
|
|
:value="startTime?startTime:startDate">
|
|
<view class="uni-input mr-10">{{startTime?startTime:startDate}}
|
|
<icon class="iconfont icon-arrow-down-bold"></icon>
|
|
</view>
|
|
</picker>
|
|
<view class="center">~</view>
|
|
<picker mode="date" :end="endDate" @change="handEndTimeH" :fields="fields"
|
|
:value="endTime?endTime:endDate">
|
|
<view class="uni-input mr-10">{{endTime?endTime:endDate}}
|
|
<icon class="iconfont icon-arrow-down-bold"></icon>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 曲线图 -->
|
|
<view class="box">
|
|
<view class="boxLine">
|
|
<view class="line" v-for="(item,index) in weightList">
|
|
<view v-if="item.line.categories.length" class="mt-15 mb-15">
|
|
<qiunDataCharts type="column" :chartData="item.line" :canvas2d="true" :canvasId="item.id"
|
|
:Width="340" :Height="250" :animation="false"
|
|
:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
|
|
</view>
|
|
<view v-else>
|
|
<view class="nolist">
|
|
<image src="../../static/none.png"></image>
|
|
<text>{{$t("index.none")}}</text>
|
|
</view>
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
|
export default {
|
|
components: {
|
|
qiunDataCharts,
|
|
},
|
|
computed: {
|
|
...mapState(["labelList"]),
|
|
endDate() {
|
|
return this.$tools.getDate("start")
|
|
},
|
|
startDate() {
|
|
return this.$tools.GetDateStr(-90);
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
name: "",
|
|
list: [],
|
|
acd_id: 0,
|
|
handTrue: true,
|
|
active: 0,
|
|
startTime: "",
|
|
endTime: "",
|
|
fields: "",
|
|
weightList: [],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
let that = this
|
|
that.active = 0
|
|
that.acd_id = options.acd_id
|
|
that.time = that.startDate
|
|
that.labelList.forEach(ite => {
|
|
if (ite.acd_id == that.acd_id) {
|
|
that.list = ite.list
|
|
that.name = that.list[0]
|
|
return
|
|
}
|
|
})
|
|
that.handlePublicTrendList()
|
|
// #ifdef APP-PLUS
|
|
that.fields = "time"
|
|
// #endif
|
|
// #ifndef APP-PLUS
|
|
that.fields = "day"
|
|
// #endif
|
|
},
|
|
methods: {
|
|
handStartTimeH(e) {
|
|
let that = this
|
|
if (that.endTime) {
|
|
if (Date.parse(e.detail.value) > Date.parse(that.endTime)) {
|
|
that.$tools.msg(that.$t("tips.verifyBodyDate"))
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.detail.value) > Date.parse(that.endDate)) {
|
|
that.$tools.msg(that.$t("tips.verifyBodyDate"))
|
|
return
|
|
}
|
|
}
|
|
that.startTime = e.detail.value
|
|
that.handlePublicTrendList()
|
|
},
|
|
handEndTimeH(e) {
|
|
let that = this
|
|
if (that.startTime) {
|
|
if (Date.parse(e.detail.value) < Date.parse(that.startTime)) {
|
|
that.$tools.msg(that.$t("tips.verifyBodyDate"))
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.detail.value) < Date.parse(that.startDate)) {
|
|
that.$tools.msg(that.$t("tips.verifyBodyDate"))
|
|
return
|
|
}
|
|
}
|
|
that.endTime = e.detail.value
|
|
that.handlePublicTrendList()
|
|
},
|
|
handlePublicTrendList() {
|
|
let that = this
|
|
that.$model.getPublicTrendList({
|
|
aud_id: uni.getStorageSync('userid'),
|
|
acd_id: that.acd_id,
|
|
s_time: that.startTime ? that.startTime : that.startDate,
|
|
e_time: that.endTime ? that.endTime : that.endDate
|
|
}).then(res => {
|
|
// 公共曲线
|
|
if (res.code == 0) {
|
|
that.weightList = res.data
|
|
}
|
|
console.log("公共曲线", that.weightList)
|
|
})
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.TrendPage {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.boxTime {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
.one {
|
|
width: 100%;
|
|
display: flex;
|
|
line-height: 25px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.center {
|
|
width: 10%;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
picker {
|
|
width: 50%;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.iconfont {
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.line {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 14PX;
|
|
margin-top: 15px;
|
|
|
|
text {
|
|
width: 15px;
|
|
height: 10px;
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style> |