uni-zhihuikuangshan-2/pages/production/zaoquan/vehicle_monitoring/Violation/Violation.vue

<template>
	<view>
		<view class="top">
			<image src="./icon/top.png" mode="widthFix"></image>
		</view>

		<view class="total">
			<view class="title">今日车辆违章</view>
			<view class="num">
				<text>{{total}}</text>个
			</view>
		</view>

		<view class="section section_1">
			<view class="title">
				<view class="line"></view>
				<view class="text">车辆违章统计</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts_1" :chartData="chartData_1" />
			</view>
		</view>

		<view class="section">
			<view class="title">
				<view class="line"></view>
				<view class="text">一周内车辆违章趋势</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts_2" :chartData="chartData_2" />
			</view>
		</view>

		<view class="section section_3">
			<view class="title">
				<view class="line"></view>
				<view class="text">今日车辆违章</view>
			</view>
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="single" />
				<view class="btn" @click="getServerData">查询</view>
			</view>
			<view class="table">
				<uni-table emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">车牌</uni-th>
						<uni-th align="center" width="80">违章类型</uni-th>
						<uni-th align="center">区队</uni-th>
						<uni-th align="center" width="100">时间</uni-th>
						<uni-th align="center">位置/速度</uni-th>
					</uni-tr>
					<uni-tr v-for="(item,index) in table" :key="index">
						<uni-td style="text-align: center;vertical-align: middle;">{{item.car_number}}</uni-td>
						<uni-td style="text-align: center;vertical-align: middle;">{{item.type}}</uni-td>
						<uni-td style="text-align: center;vertical-align: middle;">{{item.speed}}</uni-td>
						<uni-td style="text-align: center;vertical-align: middle;">{{item.time}}</uni-td>
						<uni-td style="text-align: center;vertical-align: middle;">{{item.place}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import "@/common/time.js"
	export default {
		data() {
			return {
				total: 0,
				single: "",

				chartData_1: {},
				chartData_2: {},

				table: [],
				opts_1: {
					color: ["#FF7C7C", "#FCC524"],
					legend: {},
					extra: {
						column: {
							width: 15,
						}
					}
				},
				opts_2: {
					color: ["#00A1E9"],
					legend: {
						show: false
					},
					extra: {
						column: {
							width: 25,
						}
					}
				}
			};
		},
		onLoad() {
			console.log()
			// 获取今天的日期
			this.single = new Date().format("yyyy-MM-dd");

			this.getServerData()
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					uni.showLoading({
						mask: true
					})
					this.$api.getCarDownIllegalAllList({
						mine_code: "zaoquan",
						date: this.single
					}).then((res) => {
						uni.hideLoading()
						this.total = res.data.total
						this.chartData_1 = res.data.speeding_con
						this.chartData_2 = res.data.speeding_week
						this.table = res.data.detail_list
					})
				}, 10);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.top {
		margin-top: -60rpx;

		image {
			width: 750rpx;
		}
	}

	.total {
		position: relative;
		z-index: 1;
		margin: -200rpx auto 60rpx;
		width: 440rpx;
		height: 80rpx;
		background: rgba(0, 161, 233, 0.3);
		border: 2rpx solid #FFFFFF;
		border-radius: 40px;

		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		color: #fff;

		.title {
			margin-right: 20rpx;
		}

		.num {
			text {
				font-size: 42rpx;
			}
		}
	}

	.section_1 {
		position: relative;
		z-index: 1;
	}

	.section_3 {
		.title {
			margin: -20rpx -20rpx 0;
			padding: 20rpx;
			background-image: url("./icon/title.png");
			background-size: 100%;
		}
	}

	.section {
		margin: 0 auto 30rpx;
		width: 680rpx;
		min-height: 400rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

		.title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			font-weight: 700;
			display: flex;
			align-items: center;

			.line {
				width: 8rpx;
				height: 30rpx;
				background-color: #00A1E9;
				border-radius: 20rpx;
				margin-right: 10rpx;
			}

			.text {}
		}

		.charts-box {
			width: 100%;
			min-height: 400rpx;
			padding: 20rpx 0;
		}

		.example-body {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 160rpx;
				line-height: 80rpx;
				background: #00A1E9;
				border-radius: 30px;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
			}

			/deep/.uni-date {
				width: 460rpx;
			}

			/deep/.uni-date-editor--x {
				border-radius: 60rpx;
				overflow: hidden;
			}

			/deep/.uni-icons.uniui-calendar {
				display: none;
			}
		}

		.table {
			margin: 20rpx 0;


			/deep/.uni-table-tr {
				background-color: #F2FAFE;
			}

			/deep/.uni-table-th {
				border: none;
				background-color: #fff;
			}

			/deep/.uni-table-td {
				color: #000;
				font-size: 28rpx;
				font-weight: 700;
				padding: 30rpx 0;
				border-bottom: 8rpx solid #fff;
			}

			/deep/.table--border {
				border: none;
			}
		}
	}
</style>