supervise/supervise-uniapp/pages/home/UserFragment.vue

<template>
	<view class="content">

		<view>
			<view class="top_select">
				<text class="top_select_text">选择日期</text>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="queryParams.date" @change="dateChange" />
			</view>

			<view class="top_select" style="display: flex;">
				<text class="top_select_text">选择类型</text>
				<uni-data-select style="flex-grow: 1;" v-model="queryParams.type" :localdata="range"
					@change="typeChange"></uni-data-select>
			</view>

			<view class="top_select_btn">

				<button class="mini-btn" type="primary" size="mini" @click="doQuery()">查询</button>

				<button class="mini-btn" type="primary" size="mini" @click="doReset()">重置 </button>
			</view>

		</view>


		<view style="margin-top: 20px;margin-left: 20px;">
			<text>当日数据</text>
			<text style="margin-left: 10px;">{{newDate}}</text>

		</view>


		<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;">
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newDate: this.getDate(),
				// 类型1.全部,2.常规商品3.烟草
				range: [{
						"value": 1,
						"text": "全部",
					},
					{
						"value": 2,
						"text": "常规商品",
					}, {
						"value": 3,
						"text": "烟草",
					}
				],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						title: ""
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "折线"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "柱状图",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
				queryParams: {
					customerSid: "",
					date: "",
					type: "",
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getDate() {
				var tempDate = new Date() // 获取今天的日期
				tempDate.setDate(tempDate.getDate() - 1) // 今天的前N天的日期，N自定义
				var endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate()
				console.log(endDate)
				return endDate
			},
			dateChange(e) {
				console.log('----dateChange事件:', e);

			},
			typeChange(e) {
				console.log('e:', e);
				this.queryParams.type = e
			},
			doQuery() {
				this.newDate = this.queryParams.date
				this.getServerData();
			},
			doReset() {
				this.queryParams = {
					customerSid: "",
					date: "",
					type: "",
				}
				this.newDate = this.getDate()
				this.getServerData();
			},
			getServerData() {
				// 	var _this = this
				// 	this.$api.getThresholdAnalysis(_this.queryParams).then((resp) => {
				// 			// if (resp.success) {
				// 			console.log('1111', resp.data)
				// 			//   const data = resp.data
				// 			//   _this.dataList = data.financialData
				// 			//   _this.listSalesChannelData = data.listSalesChannelData
				// 			//   _this.drawLine(data.financialAnalysisChartData)
				// 			//   this.tableLoading = false
				// 			// } else {
				// 			//   // 根据resp.code进行异常情况处理
				// 			//   _this.dataList = []
				// 			//   _this.listSalesChannelData = []
				// 		}
				// 	}).catch(e => {
				// 	console.log('eeeee', e)
				// 	_this.tableLoading = false
				// })

				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "柱1",
								index: 1,
								type: "column",
								data: [40, {
									"value": 30,
									"color": "#f04864"
								}, 55, 110, 24, 58]
							},
							{
								name: "柱2",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							},
							{
								name: "折线",
								type: "line",
								color: "#2fc25b",
								data: [120, 140, 105, 170, 95, 160]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style scoped>
	.content {
		background: #fff;
		padding-top: 10px;
	}

	.top_select {
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		flex-direction: row;
		margin-top: 10px;
		align-items: center;
	}

	.top_select_text {
		margin-right: 10px;
	}

	.top_select_btn {
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		flex-direction: row;
		margin-top: 15px;
		align-items: center;
	}
</style>