qsy-zdh/pages/data/disaster/water-disaster/water-disaster.vue

<template>
	<view class="page-body">
		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="info-wrap">
					<view class="data-wrap">
						<view class="data-item-wrap" v-for="(item, index) in list">
							<view class="title">{{ item.name }}</view>
							<view class="data">{{ item.data }}</view>
						</view>
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'分站统计'">
					<template v-slot:content>
						<bar-chart :barType="'pie'" :data="pieChartData" :optSet="pieSet"
							:barHeight="'431rpx'"></bar-chart>
						<view class="icon-wrap">
							<view class="item" v-for="(item, index) in statusList">
								<view :style="{ backgroundColor: item.color }" class="icon"></view>
								<view class="title">{{ item.name }}</view>
							</view>
						</view>
					</template>
				</page-card>
				<page-card class="mix-chart-wrap" :notShow="true" :name="`${getCurrentTime()}隆雨星统计`">
					<template v-slot:content>
						<view class="type-wrap">
							<image @click="chartChange('line')" v-if="chartType === 'column'" src="@/static/line.png"/>
							<image v-if="chartType === 'line'" src="@/static/line-active.png"/>
							<image @click="chartChange('column')" v-if="chartType === 'line'" src="@/static/bar.png"/>
							<image v-if="chartType === 'column'" src="@/static/bar-active.png"/>
						</view>
						<bar-chart :barType="chartType" :data="chartData" :optSet="chartType === 'column' ? chartSet : chartSet1"
							:barHeight="'363rpx'"></bar-chart>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{ // 列表
					name: '地面传感器',
					data: '9'
				}, {
					name: '压力水位传感器',
					data: '2'
				}, {
					name: '流量传感器',
					data: '23'
				}, {
					name: '自动雨量站',
					data: '1'
				}, {
					name: '地面断线传感器',
					data: '0'
				}, {
					name: '井下断线传感器',
					data: '0'
				}],
				pageData: {}, // 页头信息
				pieChartData: {}, // 饼状图数据
				statusList: [{ // 状态列表
					name: '(2016款)KJ402-F系列',
					color: '#1890FF'
				}, {
					name: 'XN水质分站',
					color: '#EE6666'
				}, {
					name: 'XN-流国统计分站',
					color: '#FAC858'
				}, {
					name: 'KJ402-FB-1',
					color: '#1890FF'
				}, {
					name: 'X飪肛H气氨站6要素',
					color: '#73C0DE'
				}],
				pieSet: { // 饼转图配置
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
					dataLabel: false,
					legend: {
						show: false
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartType: 'column', // 图表类型
				chartData: {}, // 柱图表数据
				chartSet: { // 柱状图配置
					color: ["#1890FF", "#91CB74"],
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartSet1: { // 折现线图配置
					color: ["#1890FF", "#91CB74"],
					legend: {
						show: false
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(option.data)
			this.getPieData()
			this.getChartData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			getPieData() { // 获取饼图数据
				let res = {
					series: [{
						data: [{
							"value": 50
						}, {
							"value": 30
						}, {
							"value": 20
						}, {
							"value": 18
						}, {
							"value": 8
						}]
					}]
				};
				this.pieChartData = JSON.parse(JSON.stringify(res));
			},
			getChartData() {  // 获取图表数据
				let res = {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
							name: "目标值",
							data: [35, 36, 31, 33, 13, 34]
						},
						{
							name: "完成量",
							data: [18, 27, 21, 24, 6, 28]
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			getCurrentTime() { // 获取当前时间
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				return `${year}年${month}月`;
			},
			chartChange(data) { // 图标切换
				this.chartType = data
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		.scroll-wrap {
			height: calc(100vh - 85rpx);
			overflow: scroll;

			.basic-info-wrap {
				position: relative;
				height: 390rpx;
				padding: 48rpx 90rpx;
				background: url(../../../../static/page_bg.png);
				background-size: 150%;

				.info-wrap {
					display: flex;
					flex-wrap: wrap;
				}

				.data-wrap {
					display: flex;
					flex-wrap: wrap;

					.data-item-wrap {
						width: 33.33%;
						padding: 9rpx 0;
						min-height: 81rpx;
						text-align: center;
						margin-top: 60rpx;

						.title {
							font-size: 22rpx;
							color: #FFFFFF;
							margin-bottom: 14rpx;
						}

						.data {
							font-weight: 700;
							font-size: 36rpx;
							color: #FFF600;
						}
					}

					.data-item-wrap:nth-child(-n+3) {
						margin-top: 0;
					}
				}

				.radius-wrap {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100vw;
					height: 30rpx;
					background-color: #fff;
					border-radius: 35rpx 35rpx 0 0;
				}
			}

			.detail-info-wrap {
				padding: 40rpx 35rpx;

				.icon-wrap {
					display: flex;
					flex-wrap: wrap;
					padding: 4rpx 40rpx 45rpx;

					.item {
						display: flex;
						width: calc(50% - 20rpx);
						margin-top: 36rpx;

						.icon {
							width: 32rpx;
							height: 32rpx;
							border-radius: 6rpx;
							margin-right: 8rpx;
						}

						.title {
							font-size: 24rpx;
							color: #000000;
						}
					}

					.item:nth-child(2n) {
						margin-left: 30rpx;
					}
				}
				
				.chart-wrap {
					padding: 30rpx 24rpx;
				}
				
				.mix-chart-wrap {
					.type-wrap {
						display: flex;
						justify-content: end;
						padding: 0 24rpx;
						image {
							width: 30rpx;
							height: 26rpx;
						}
						image:last-child {
							margin-left: 30rpx;
						}
					}
					
					.type-wrap {
						position: absolute;
						top: -54rpx;
						right: 0;
					}
					
					/deep/ .content-wrap {
						position: relative;
					}
				}
				
				
				/deep/ .card-wrap:last-child {
					margin-bottom: 0 !important;
				}
			}
		}
	}
</style>