高峰时段选择

pages/investigation/task.vue

@@ -65,13 +65,13 @@
 					<view class="label-box">
 						<view class="border"></view> {{sectionName}}
 					</view>
-					
+
 					<uni-forms-item label="道路类型" name="roadType" required label-width="80">
 						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
 							<!-- <input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
 								v-model="formData.roadType" placeholder="请输入道路类型" @focus="focus" /> -->
-								<view class="Height100" :class="formData.roadType?'':'gary'" v-if="isEdit"
-									@click="showdlPicker=true">{{ formData.roadType?formData.roadType:'请选择道路类型' }} </view>
+							<view class="Height100" :class="formData.roadType?'':'gary'" v-if="isEdit"
+								@click="showdlPicker=true">{{ formData.roadType?formData.roadType:'请选择道路类型' }} </view>
 							<view class="Height100" v-else>{{ formData.roadType }}</view>
 							<view class="Height100"></view>
 						</view>
@@ -143,7 +143,8 @@
 				@confirm="pickerxqConfirm"></u-picker>
 			<u-picker :show="showjdPicker" :columns="columnsjdPicker" keyName="label" @cancel="pickerjdCancel"
 				@confirm="pickerjdConfirm"></u-picker>
-
+			<u-picker :show="showtimePicker" :columns="columnstimePicker" keyName="label" @cancel="pickertimeCancel"
+				@confirm="pickertimeConfirm"></u-picker>
 			<!-- 	<view class="echarts" v-if="active === 2">
 				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
 			</view> -->
@@ -171,8 +172,12 @@
 					</uni-forms-item>
 					<uni-forms-item label="高峰时段">
 						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
-							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
-								v-model="formData.peakHours" placeholder="请输入高峰时段" @focus="focus2" />
+							<view v-if="isEditStep2" class="Height100" :class="formData.peakHours?'':'gary'"
+								@click="showtimePicker=true">
+								{{ formData.peakHours?formData.peakHours:'请选择高峰时段' }}
+							</view>
+							<!-- <input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
+								v-model="formData.peakHours" placeholder="请输入高峰时段" @focus="focus2" /> -->
 							<view class="Height100" v-else>{{ formData.peakHours }}</view>
 							<view class="Height100"></view>
 						</view>
@@ -546,6 +551,16 @@
 						value: ""
 					},
 				],
+				columnstimePicker: [
+					['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时',
+						'15时', '16时', '17时',
+						'18时', '19时', '20时', '21时', '22时', '23时', '24'
+					],
+					['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时',
+						'15时', '16时', '17时',
+						'18时', '19时', '20时', '21时', '22时', '23时', '24时'
+					],
+				],
 				investigationDetailTitle: "title",
 				isEdit: false,
 				isEditStep2: false,
@@ -732,7 +747,7 @@
 					series: []
 				},
 				chartData4: {
-					categories:["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24"],
+					categories: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24"],
 					series: [{
 							name: "总量",
 							legendShape: "line",
@@ -797,6 +812,7 @@
 
 				],
 				showdlPicker: false,
+				showtimePicker: false,
 				columnsdlPicker: [
 
 				],
@@ -957,13 +973,20 @@
 				// this.$set(this.formData, 'xqname', e.value[0].xqname)
 
 			},
-			pickerdlConfirm(e){
+			pickerdlConfirm(e) {
 				this.showdlPicker = false
 				this.$set(this.formData, 'roadType', e.value[0].label)
 			},
 			pickerdlCancel(e) {
 				this.showdlPicker = false
 			},
+			pickertimeConfirm(e) {
+				this.showtimePicker = false
+				this.$set(this.formData, 'peakHours', e.value[0] + ' - ' + e.value[1])
+			},
+			pickertimeCancel(e) {
+				this.showtimePicker = false
+			},
 			openPicker() {
 
 				this.showPicker = true
@@ -1571,10 +1594,10 @@
 				let res = {
 					categories: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24"],
 					series: [{
-							name: "总量",
-							legendShape: "line",
-							data: [],
-						}],
+						name: "总量",
+						legendShape: "line",
+						data: [],
+					}],
 				};
 				this.chartData2 = JSON.parse(JSON.stringify(res));
 			},