pingpu_H5/pages/worm/analyse.vue

<template>
	<!-- 虫害分析 -->
	<view>
		<!-- 时期卡片 -->
		<view class="ui-card px-13">
			<!-- 选项框 -->
			<view class="row-end mb">
				<picker class="picker mr">
					<view class="picker-wrapper">
						2022年
						<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
					</view>
				</picker>
				<picker class="picker">
					<view class="picker-wrapper">
						步甲
						<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
					</view>
				</picker>
			</view>
			<!-- 时期列表 -->
			<view class="period-navs">
				<view class="period-item" v-for="(period,index) in periodList" :key="index">
					<view class="icon"></view>
					<view class="title">{{period.title}}</view>
					<view class="text">{{period.time}}</view>
					<view class="text">数量：{{period.num}}</view>
				</view>
			</view>
		</view>
		<!-- 虫害统计图 -->
		<view class="ui-card px-13">
			<!-- 选择时间范围 -->
			<view class="mb">
				<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @maskClick="maskClick" />
			</view>
			<!-- 区域统计图 -->
			<area-charts :chartData="areaData"></area-charts>
			<view style="height: 20rpx;"></view>
			<!-- 环形统计图 -->
			<pie-charts :chartData="pieData"></pie-charts>
			<!-- 统计列表 -->
			<view class="mt-12">
				<view class="progress-item">
					<view class="label">1、贪夜蛾</view>
					<view class="progress">
						<progress :percent="10" backgroundColor="#F3F5F9" activeColor="#10AEFF" :stroke-width="9" />
					</view>
					<view class="percent">52%</view>
				</view>
			
			</view>
		</view>
		
		<!-- 虫害表格数据 -->
		<view class="ui-card worm-table">
			<ui-tabs :list="tabs" :active="1"></ui-tabs>
			<uni-table class="table-style mt-12" 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>
	</view>
</template>

<script>
	import areaCharts from './components/w-area-charts.vue'
	import pieCharts from './components/w-pie-charts.vue'
	export default {
		data() {
			return {
				pieData: {
					series: [{
						data: [{
							"name": "一班",
							"value": 50
						}, {
							"name": "二班",
							"value": 30
						}, {
							"name": "三班",
							"value": 20
						}]
					}]
				},
				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]
						}
					]
				},
				// 日期列表
				periodList: [{
						url: '',
						title: '始见期',
						time: '2022-08-22',
						num: 536
					},
					{
						url: '',
						title: '高峰期',
						time: '2022-08-22',
						num: 132
					}, {
						url: '',
						title: '终见期',
						time: '2022-08-22',
						num: 0
					}
				],
				range: ['2021-02-1', '2021-3-28'],
				tabs: [{
					text: '图像溯源',
					value: 1
				}, {
					text: '虫害基础数据',
					value: 2
				}, ]
			};
		},
		components: {
			areaCharts,
			pieCharts
		},
		methods: {
			maskClick(e) {
				console.log('----maskClick事件:', e);
			}
		}
	}
</script>

<style lang="scss">
	// 时期样式
	.period-navs {
		display: flex;
		justify-content: space-between;
	}

	.period-item {
		width: 206rpx;
		height: 264rpx;
		padding: 24rpx;
		background-color: #FCF8FF;

		.icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 18rpx;
			background-color: #95F9E7;
			border-radius: 100%;
		}

		.title {
			font-size: 32rpx;
			font-weight: normal;
			color: #333333;
			line-height: 44rpx;
		}

		.text {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: normal;
			color: #999999;
			line-height: 34rpx;
		}

	}


	.progress-item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label,
		.percent {
			font-size: 24rpx;
			color: #333;
		}

		.label {
			width: 160rpx;
		}

		.percent {
			width: 80rpx;
			text-align: right;
		}

		.progress {
			flex: 1;
			height: 18rpx;
			overflow: hidden;
			border-radius: 30rpx;


		}
	}
	// 虫害表格数据
	.worm-table{
		padding: 10rpx 24rpx 30rpx;
		margin-bottom: 100rpx;
		border-radius: 0;
	}
</style>