pingpu_H5/pages/worm/history.vue

<template>
	<!-- 虫情历史数据 -->
	<view>
		<!-- 统计图 -->
		<view class="ui-card history-chart">
			<!-- 按钮组合 -->
			<view class="time-btn-group">
				<block v-for="(time,index) in timeList" :key="index">
					<view class="row-center time-btn">{{time.text}}</view>
				</block>
			</view>
			
		</view>

		<!-- 统计图end -->
		<!-- 历史数据列表 -->
		<view class="ui-card history-panel">
			<view class="row-between mb">
				<view class="">数据列表</view>
			</view>
			<!-- 历史数据表格 -->
			<uni-table class="table-style" ref="table" :loading="loading" border emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="150" align="center">日期</uni-th>
					<uni-th width="150" align="center">姓名</uni-th>
					<uni-th align="center">地址</uni-th>
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</uni-td>
				</uni-tr>
			</uni-table>
			<!-- 页码 -->
			<uni-pagination :total="50" title="标题文字" />
			<!-- 页码end -->
		</view>
		<!-- 历史数据列表end -->

	</view>
</template>

<script>
	import {
		getWormLampList
	} from '@/api/worm.js'
	import areaCharts from './components/w-area-charts.vue'
	export default {
		data() {
			return {
				areaData: {
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
					series: [{
							name: "成交量A",
							data: [35, 8, 25, 37, 4, 20]
						},
						{
							name: "成交量B",
							data: [70, 40, 65, 100, 44, 68]
						},
						{
							name: "成交量C",
							data: [100, 80, 95, 150, 112, 132]
						}
					]
				},
				// 时间列表
				timeList: [{
						text: '24小时',
						value: 1,
					},
					{
						text: '近一个月',
						value: 2,
					}, {
						text: '近半年',
						value: 3,
					}, {
						text: '近一年',
						value: 4,
					}
				],
				range: ['2021-02-1', '2021-3-28'],
				loading: false, // 表格加载状态
				tableData: [{
					"date": "2020-09-01",
					"name": "Dcloud1",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud2",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud3",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud4",
					"address": "上海市普陀区金沙江路 1516 弄"
				}],
			};
		},
		components: {
			areaCharts
		},
		methods: {
			maskClick(e) {
				console.log('----maskClick事件:', e);
			}
		}
	}
</script>

<style lang="scss">
	.history-chart {
		padding: 32rpx 24rpx;
	}

	.time-btn-group {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;
		.time-btn {
			width: 125rpx;
			height: 55rpx;
			font-size: 24rpx;
			color: #999;
			border-radius: 8rpx;
			border: 1rpx solid #DDDDDD;
		}
	}

	.history-panel {
		padding: 24rpx 26rpx;
		margin-bottom: 56rpx;
	}

	.table-style {
		margin-bottom: 42rpx;

		.uni-table-th,
		.uni-table-td {
			color: #333333;
			font-weight: normal;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: center;
		}

		.uni-table-th {
			background-color: #F9F9F9;
			padding: 10rpx 20rpx;
		}

		.uni-table-td {
			padding: 12rpx 20rpx;
		}
	}
</style>