工作台

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() {
-			if (this.siteType === 1) {
-				this.getSiteList()
-			}
-
+			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 {