修改首页时间选择

reado-app/pages/homePage/index.vue

@@ -1,19 +1,17 @@
 <template>
 	<view>
-		<!-- <uni-section title="时间范围" type="line"
-			style="width:80%;display: flex;align-items: center;margin:40rpx 0 20rpx 0">
-			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
-		</uni-section> -->
 		<div class="moreTime">
-			<div v-for="(item,index) in range" :key="index" @click="change(1,index,item.value)"
-				:class="choiceTime===index?'bod':''">
-				{{item.text}}
+			<div v-for="(item,index) in range" :key="index" @click="change(index)" :class="choiceTime===index?'bod':''">
+				{{item}}
 			</div>
 		</div>
-		<div class="childTime" v-if="isShow">
-			<div v-for="(item,index) in moreTimeList" @click="change(2,index,item.value)"
-				:class="choiceMoreTime===index?'box':''">
-				{{item.text}}
+		<div class="childTime">
+			<div v-for="(item,index) in childTime" v-show="choiceTime===index">
+				<template>
+					<template v-for="(o,i) in item">
+						<div @click="getTime(i,o.value)" :class="choiceChildTime===i?'box':''">{{o.text}}</div>
+					</template>
+				</template>
 			</div>
 		</div>
 
@@ -36,7 +34,7 @@
 						{{item.chartName}}
 					</view>
 					<!-- <lineEcharts :echartsData="item" /> -->
-					<web-view :src="item.src" style="top:7vh;width:100%;height:320px;"></web-view>
+					<web-view :src="item.src" style="top:10vh;width:100%;height:320px;"></web-view>
 				</view>
 			</view>
 		</template>
@@ -75,51 +73,72 @@
 				echartsData: [],
 				value: 3600000,
 				startTime: null,
-				range: [{
-						value: 3600000,
-						text: "分时"
-					},
-					{
-						value: 86400000,
-						text: "日"
-					},
-					{
-						value: 1,
-						text: "周"
-					},
-					{
-						value: 2,
-						text: "月"
-					}
-				],
-				moreTimeList: [{
-						value: 7200000,
-						text: "120分"
-					},
-					{
-						value: 3600000,
-						text: "60分"
-					},
-					{
-						value: 1800000,
-						text: "30分"
-					},
-					{
-						value: 900000,
-						text: "15分"
-					},
-					{
-						value: 300000,
-						text: '5分'
-					},
-					{
-						value: 60000,
-						text: '1分'
-					}
+				range: ["分", "时", "日", "周"],
+				childTime: [
+					[{
+							value: 900000,
+							text: "15分"
+						},
+						{
+							value: 1800000,
+							text: "30分"
+						},
+						{
+							value: 2700000,
+							text: "45分"
+						}
+					],
+					[{
+							value: 3600000,
+							text: "1小时"
+						},
+						{
+							value: 21600000,
+							text: "6小时"
+						},
+						{
+							value: 43200000,
+							text: "12小时"
+						},
+						{
+							value: 64800000,
+							text: "18小时"
+						}
+					],
+					[{
+							value: 86400000,
+							text: "1日"
+						},
+						{
+							value: 259200000,
+							text: "3日"
+						},
+						{
+							value: 432000000,
+							text: "5日"
+						}
+					],
+					[{
+							value: 604800000,
+							text: "1周"
+						},
+						{
+							value: 1209600000,
+							text: "2周"
+						},
+						{
+							value: 1814400000,
+							text: "3周"
+						},
+						{
+							value: 2419200000,
+							text: "4周"
+						}
+					],
 				],
 				clear: true,
 				choiceTime: 0,
-				choiceMoreTime: 0,
+				choiceChildTime: 0,
 				isShow: false
 			}
 		},
@@ -128,7 +147,7 @@
 			this.clear = true
 			this.value = null
 			this.choiceTime = 0
-			this.startTime = timeToDate(new Date().getTime() - 3600000)
+			this.startTime = timeToDate(new Date().getTime() - 900000)
 			this.temperature()
 		},
 		onHide() {
@@ -171,35 +190,37 @@
 					}
 				})
 			},
-			change(type, i, e) {
-				if (type === 1) {
-					this.choiceTime = i
-				} else {
-					this.choiceMoreTime = i
-				}
-				if (e === 'more') {
-					this.isShow = !this.isShow
-				} else {
-					if (typeof(e) !== 'string' && e !== 1 && e !== 2 && e !== 3) {
-						this.startTime = timeToDate(new Date().getTime() - e)
-					} else if (typeof(e) !== 'string' && e !== null) {
-						switch (e) {
-							case 1:
-								this.startTime = timeToDate(getLastWeek()[0])
-								break;
-							case 2:
-								this.startTime = timeToDate(getLastMonth()[0])
-								break;
-							case 3:
-								this.startTime = timeToDate(getLast3Month()[0])
-								break;
-						}
-					} else if (typeof(e) === 'string') {
-						this.startTime = timeToDate(new Date().getTime() - 3600000)
-						this.echartsData = []
-					}
-					this.temperature()
-				}
+			change(i) {
+				this.choiceTime === i ? this.choiceTime = -1 : this.choiceTime = i
+				this.choiceChildTime = -1
+				// if (e === 'more') {
+				// 	this.isShow = !this.isShow
+				// } else {
+				// 	if (typeof(e) !== 'string' && e !== 1 && e !== 2 && e !== 3) {
+				// 		this.startTime = timeToDate(new Date().getTime() - e)
+				// 	} else if (typeof(e) !== 'string' && e !== null) {
+				// 		switch (e) {
+				// 			case 1:
+				// 				this.startTime = timeToDate(getLastWeek()[0])
+				// 				break;
+				// 			case 2:
+				// 				this.startTime = timeToDate(getLastMonth()[0])
+				// 				break;
+				// 			case 3:
+				// 				this.startTime = timeToDate(getLast3Month()[0])
+				// 				break;
+				// 		}
+				// 	} else if (typeof(e) === 'string') {
+				// 		this.startTime = timeToDate(new Date().getTime() - 3600000)
+				// 		this.echartsData = []
+				// 	}
+				// 	this.temperature()
+				// }
+			},
+			getTime(i, val) {
+				this.choiceChildTime = i
+				this.startTime = timeToDate(new Date().getTime() - val)
+				this.temperature()
 			}
 		}
 	};
@@ -233,19 +254,23 @@
 	}
 
 	.childTime {
+
+		margin: 60rpx 34rpx 0 34rpx;
+	}
+
+	.childTime>div {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		margin: 60rpx 34rpx 0 34rpx;
 	}
 
-	.childTime div {
+	.childTime>div>div {
+		width: 140rpx;
 		padding: 10rpx;
 		border: 1px solid #e6e6e6;
 		border-radius: 16rpx;
 		color: #7e7e7e;
 		font-size: 26rpx;
-		width: 80rpx;
 		text-align: center;
 	}
 </style>

reado-app/static/webview/line-wv.html

@@ -64,12 +64,12 @@
 					type: 'category',
 					data: [],
 					axisLabel: {
-						// formatter: function(value) {
-						// 	const result = value.replaceAll('-', '').substring(0,
-						// 		9);
-						// 	return result
-						// }
-						formatter: '{value}'
+						formatter: function(value) {
+							const result = value.replaceAll('-', '').substring(0,
+								9);
+							return result
+						}
+						// formatter: '{value}'
 					}
 				},
 				yAxis: {
@@ -173,7 +173,7 @@
 							}
 						})
 						option.xAxis.data = timeData
-						option.series =series
+						option.series = series
 						initEcharts()
 					}