You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.3 KiB
89 lines
2.3 KiB
1 year ago
|
<template>
|
||
|
|
<view class="periodPrice_body">
|
||
|
|
<scroll-view v-if="priceList.length>2" style="width: 100%; height: 380rpx; " scroll-x="true">
|
||
|
|
<qiunDataCharts :ontouch="true" :canvas2d='true' canvasId='canvasIdt' inScrollView="true" type="area" :opts="{
|
||
|
|
enableScroll:true,
|
||
|
|
extra:{
|
||
|
|
area:{
|
||
|
|
type:'curve',
|
||
|
|
addLine:true,
|
||
|
|
gradient:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis:{
|
||
|
|
itemCount:5,
|
||
|
|
scrollShow:true
|
||
|
|
},
|
||
|
|
fontColor:'#000000',
|
||
|
|
}" :chartData="Line" />
|
||
|
|
</scroll-view>
|
||
|
|
<view style="flex: 1;overflow: hidden;">
|
||
|
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
|
||
|
|
<view class="periodPrice_item" :key="index" v-for="(item,index) in priceList">
|
||
|
|
<view class="periodPrice_item_top flex">
|
||
|
|
<view class=" periodPrice_item_top_label oneflex">
|
||
|
|
{{item.startTime}}-{{item.endTime}} \n\n\n
|
||
|
|
<text v-if=" `${item.startTime} - ${item.endTime}` == now ">(当前时间段)</text>
|
||
|
|
</view>
|
||
|
|
<view class="periodPrice_item_top_value">￥{{item.totalFee}}/度</view>
|
||
|
|
</view>
|
||
|
|
<view class="periodPrice_item_bottom">
|
||
|
|
<text>电费: <text class="blue">{{ tool.getnum(item.electricityFee,3)}}元/度</text> </text>
|
||
|
|
<text style="margin-left: 19rpx;">服务费: <text class="blue">{{ tool.getnum(item.serviceFee,3)}}元/度</text> </text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import qiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
qiunDataCharts
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
priceList: [],
|
||
|
|
Line: null,
|
||
|
|
now:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
if (e.priceList) {
|
||
|
|
this.priceList = JSON.parse(e.priceList).map(item=>{
|
||
|
|
item.totalFee = this.tool.getnum(item.totalFee,3)
|
||
|
|
return item
|
||
|
|
});
|
||
|
|
this.lineInit()
|
||
|
|
}
|
||
|
|
if(e.now){
|
||
|
|
this.now =e.now;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
lineInit() {
|
||
|
|
let categories = this.priceList.map(item => item.startTime);
|
||
|
|
let data = this.priceList.map(item => item.totalFee)
|
||
|
|
this.Line = {
|
||
|
|
categories,
|
||
|
|
series: [{
|
||
|
|
name: "金额",
|
||
|
|
data
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scrolltolower() {
|
||
|
|
uni.showToast({
|
||
|
|
title: '到底了',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'index.scss';
|
||
|
|
</style>
|