工作台

pages/index.vue

@@ -83,7 +83,6 @@
 			}
 		},
 		onReachBottom() {
-			console.log('触底了')
 			if (this.list.length >= this.total) {
 				return console.log('数据已经加载完成')
 			}

pages/work/DateRangeSelect.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="time-range">
+		<uni-datetime-picker v-model="dateRange" type="daterange" start="2000-01-01" :end="defaultDateRange[1]"
+			:clear-icon="false" rangeSeparator="至" @change="changeTime" />
+		<view class="btns-container">
+			<button size="mini" class="small" :disabled="loading" @click="reset">重置</button>
+			<button type="primary" class="small" size="mini" :disabled="loading" @click="search">搜索</button>
+			<button type="primary" class="large" size="mini" :disabled="loading"
+				@click="timeLine('before')">上一时段</button>
+			<button type="primary" class="large" size="mini" @click="timeLine('next')"
+				:disabled="loading || disabledNextBtn">下一时段</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		formatDate
+	} from '@/utils/filters'
+	export default {
+		computed: {
+			disabledNextBtn() {
+				return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
+			}
+		},
+		data() {
+			return {
+				loading: false,
+				dateRange: [],
+				defaultDateRange: [],
+			}
+		},
+		methods: {
+			init() {
+				const now = new Date(),
+					formatNow = formatDate(now);
+				const weekAgo = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
+				this.dateRange = [weekAgo, formatNow];
+				this.defaultDateRange = [weekAgo, formatNow];
+				this.$emit('updateDate', this.dateRange)
+			},
+			changeTime(val) {
+				this.dateRange = val || []
+			},
+			showBtnLoading(status) {
+				this.loading = status
+			},
+			resetDate() {
+				this.dateRange = this.defaultDateRange
+			},
+			//重置 设置时间范围为初始化时间段
+			reset() {
+				this.resetDate()
+				this.$emit('updateDate', this.dateRange)
+			},
+			// 搜索
+			search() {
+				this.$emit('updateDate', this.dateRange)
+			},
+			timeLine(type) {
+				//baseTime,maxTime 毫秒数
+				let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - (24 * 60 * 60 * 1000) :
+					new Date(this.dateRange[1]).getTime() + (24 * 60 * 60 * 1000),
+					maxTime = new Date(this.defaultDateRange[1]).getTime()
+				//updateTime 毫秒数
+				let updateTime = type === 'before' ? baseTime - 7 * 24 * 60 * 60 * 1000 : baseTime + 7 * 24 * 60 * 60 *
+					1000
+				if (type === 'next' && updateTime >= maxTime) updateTime = maxTime
+				const start = formatDate(type === 'before' ? updateTime : baseTime)
+				const end = formatDate(type === 'before' ? baseTime : updateTime)
+				this.dateRange = [start, end]
+				this.$emit('updateDate', this.dateRange)
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.time-range {
+		padding: 10rpx 22rpx;
+
+		.btns-container {
+			margin-top: 20rpx;
+			margin-bottom: 40rpx;
+
+			uni-button {
+				padding-left: 0;
+				padding-right: 0;
+				text-align: center;
+
+				&:not(:last-child) {
+					margin-right: 20rpx;
+				}
+			}
+
+			.small {
+				width: 120rpx;
+			}
+
+			.large {
+				width: 180rpx;
+			}
+		}
+	}
+</style>

pages/work/dtdc/index.vue

@@ -131,7 +131,6 @@
 			this.pageScrollTop = e.scrollTop
 		},
 		onReachBottom() {
-			console.log('触底了')
 			if (this.list.length >= this.total) {
 				return console.log('数据已经加载完成')
 			}

pages/work/index.vue

@@ -24,7 +24,7 @@
 				<text class="right">{{baseInfo[item.attr]}}</text>
 			</view>
 		</uni-section>
-		<!-- 菜单 -->
+		<!-- 工作台 -->
 		<uni-section title="工作台" type="line" :titleFontSize="titleFontSize" class="sections-list">
 			<view class="grid-body">
 				<uni-grid :column="4" :showBorder="false" @change="toDetail">
@@ -37,12 +37,22 @@
 				</uni-grid>
 			</view>
 		</uni-section>
-		<!-- 一周功率曲线 uchart的组件最好放在同级-->
-		<uni-section title="一周功率曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
-			<!-- <week-chart /> -->
+		<!-- 一周充放曲线 uchart的组件最好放在同级-->
+		<uni-section title="一周充放曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
+			<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
 			<view style="width:100%;height: 250px;">
-				<qiun-data-charts type="line" :chartData="chartsData" :optsWatch='false' :inScrollView="true"
-					:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
+				<qiun-data-charts type="line" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
+					:canvas2d="true" canvasId="scrollcolumnid" :pageScrollTop="pageScrollTop" :opts="options"
+					:ontouch="true" />
+			</view>
+		</uni-section>
+		<!-- 当日功率曲线 uchart的组件最好放在同级-->
+		<uni-section title="当日功率曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
+			<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
+			<view style="width:100%;height: 250px;">
+				<qiun-data-charts type="line" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
+					:canvas2d="true" canvasId="scrollcolumnid" :pageScrollTop="pageScrollTop" :opts="options"
+					:ontouch="true" />
 			</view>
 		</uni-section>
 	</view>
@@ -50,6 +60,7 @@
 
 <script>
 	import WeekChart from './WeekChart.vue'
+	import DateRangeSelect from './DateRangeSelect.vue'
 	import {
 		getAllSites,
 		getSingleSiteBaseInfo,
@@ -57,12 +68,16 @@
 	} from '@/api/ems/site.js'
 	export default {
 		components: {
-			WeekChart
+			WeekChart,
+			DateRangeSelect
 		},
 		data() {
 			return {
 				// 图表数据
-				chartsData: {},
+				weekChartTimeRange: [],
+				activeChartTimeRange: [],
+				weekChartData: {},
+				activeChartData: {},
 				pageScrollTop: 0,
 				options: {
 					enableScroll: true,
@@ -144,6 +159,17 @@
 			}
 		},
 		methods: {
+			// 更新一周冲放曲线时间范围 重置图表
+			updateWeekChartDate(data) {
+				this.weekChartTimeRange = data || []
+				this.siteId && this.getWeekChartData()
+			},
+			// 更新当日功率曲线时间范围 重置图表
+			updateActiveChartDate(data) {
+				this.weekChartTimeRange = data || []
+				//todo 更新当日功率曲线 接口还没定
+				// this.siteId && this.getWeekChartData()  
+			},
 			toDetail(e) {
 				if (!this.siteId) return uni.showToast({
 					title: "请选择清单",
@@ -160,6 +186,7 @@
 				if (this.siteType === 1) {
 					this.getSiteBaseInfo()
 					this.getWeekChartData()
+					//todo 更新当日功率曲线
 				}
 			},
 			selectedSiteType(id) {
@@ -167,7 +194,8 @@
 				this.siteType = id
 				this.siteId = ''
 				this.baseInfo = {}
-				this.chartsData = {}
+				this.weekChartData = {}
+				this.activeChartData = {}
 			},
 			getSiteBaseInfo() {
 				getSingleSiteBaseInfo({
@@ -192,14 +220,16 @@
 						this.siteId = data[0].siteId
 						this.getSiteBaseInfo()
 						this.getWeekChartData()
+						//todo 更新当日功率曲线
 					}
 				})
 			},
 			getWeekChartData() {
+				this.$refs.weekChartDateRangeSelect.showBtnLoading(true)
 				getSevenChargeData({
 					siteId: this.siteId,
-					startDate: '', //timeRange[0],
-					endDate: '', //timeRange[1]
+					startDate: this.weekChartTimeRange[0],
+					endDate: this.weekChartTimeRange[1]
 				}).then(response => {
 					console.log('一周功率曲线', response)
 					let data = response?.data || [],
@@ -211,7 +241,7 @@
 						chargedCap.push(item.chargedCap || undefined)
 						disChargedCap.push(item.disChargedCap || undefined)
 					})
-					this.chartsData = JSON.parse(JSON.stringify({
+					this.weekChartData = JSON.parse(JSON.stringify({
 						categories,
 						series: [{
 								"name": '充电量',
@@ -223,16 +253,20 @@
 							}
 						]
 					}))
-				})
+				}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
 			}
 		},
 		// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
 		mounted() {
+			this.$nextTick(() => {
+				this.$refs.weekChartDateRangeSelect.init()
+				this.$refs.activeChartDateRangeSelect.init()
 				if (this.siteType === 1) {
 					this.getSiteList()
 				}
-
+			})
 		},
+		// 页面滚动 设置pageScrollTop chart显示需要
 		onPageScroll(e) {
 			this.pageScrollTop = e.scrollTop
 		},
@@ -280,6 +314,7 @@
 
 	.icon {
 		font-size: 52rpx;
+		color: #3a98ff;
 	}
 
 	.base-lists {