pingpu_H5/pages/weather/details.vue

<template>
	<!-- 设备详情：墒情检测or气象检测 -->
	<view>
		<!-- 设备卡片 -->
		<view class="ui-card forecast-card">
			<view class="flex-1">
				<view class="font-16 title">设备名称：{{deviceInfo.equip_name}}</view>
				<view class="text">设备ID：{{deviceInfo.equip_id}}</view>
				<view class="text text-ellipsis">地址：{{deviceInfo.address}}</view>
				<view class="text">最新上报时间：{{deviceInfo.uptime | timeFrom}}</view>
			</view>
			<navigator :url="`warn?type=${deviceInfo.device_type}`" class="font-12 state">预警</navigator>
		</view>
		<!-- 设备卡片end -->
		<view class="row-between m-12">
			<view class="font-16 mr">实时数据</view>
			<view class="flex-1 font-10 text-sub">（可点击查看24小时数据）</view>
			<navigator :url="`history?id=${deviceInfo.equip_id}`" class="font-14 text-primary" hover-class="none">历史数据
			</navigator>
		</view>
		<!-- 数据列表 -->
		<view class="latest-list">
			<block v-for="(item,index) in latestList" :key="index">
				<view class="ui-card latest-item" @click="openLatestChart(item.el,item.text)">
					<view class="icon"></view>
					<view class="column-between text-info font-12">
						<view class="text">{{item.text}}</view>
						<view class="text">{{item.value}}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 数据列表end -->
		<!-- 统计图24小时数据 -->
		<uni-popup ref="chartsPopup" type="bottom" :mask-click="false">

			<view class="column charts-popup" v-if="dayData">
				<view class="flex-1">
					<view class="charts-title">
						24小时数据
					</view>
					<lineCharts :chartData="chartShowData" :width="200" :height="200"></lineCharts>
					<view class="charts-text mt-12">
						当天最大值：{{dayData.max}} {{dayData.maxtime | timeFrom}}
					</view>
					<view class="charts-text">
						当天最小值：{{dayData.min}} {{dayData.mintime | timeFrom}}
					</view>
				</view>
				<view class="row-center charts-cancel" @click="closeChartsPopup">取消</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		getWeatherDeviceDetail,
		getWeatherDayData,
		getWeatherChart
	} from '@/api/weather.js'
	import lineCharts from './components/w-line-charts.vue' // 折线图
	// 设备详情
	export default {
		data() {
			return {
				deviceInfo: {}, // 设备信息
				// 实时数据列表 { icon:'图标', text:'标题',value:'值'}
				latestList: [],
				dayData: null, //当天24小时数据
				dayDatas: [], // 24小时数据列表
				// 统计图24小时数据
				chartShowData: {
					categories: [],
					series: [],
				},
				// 统计图储存数据 格式 {通道号:数据列表}
				chartData: null,
			};
		},
		components: {
			lineCharts
		},
		onLoad(options) {
			this.deviceInfo = JSON.parse(options.params);
			this.getLatestList(); // 获取实时列表
			this.getWeatherDayData(); // 获取24小时数据
			this.getWeatherChart(); // 获取设备24小时折线图数据
		},
		methods: {
			// 获取实时数据列表
			async getLatestList() {
				this.latestList = await getWeatherDeviceDetail({
					device_id: this.deviceInfo.equip_id
				});
			},
			// 获取24小时实时数据
			async getWeatherDayData() {
				const {
					data
				} = await getWeatherDayData({
					device_id: this.deviceInfo.equip_id
				});
				this.dayDatas = data ?? [];
			},
			/**
			 * 根据通道号 字段el 获取实时数据折线图信息
			 * @param {string} el 通道号
			 * @param {string} name 标识名称
			 */
			openLatestChart(el, name) {
				if (!this.chartData) {
					return this.$api.msg('数据加载中，请稍后');
				}
				this.dayData = this.dayDatas.find(item => item.ekey == el);
				this.chartShowData.series = [{
					name: name,
					data: this.chartData[el] ?? []
				}]
				this.$refs['chartsPopup'].open();
			},
			// 关闭弹框
			closeChartsPopup() {
				this.dayData = null;
				this.$refs['chartsPopup'].close();
			},
			// 获取气象统计数据
			async getWeatherChart() {
				const {
					times,
					charts
				} = await getWeatherChart({
					device_id: this.deviceInfo.equip_id,
					begin: this.$util.timeFrame('start'),
					end: this.$util.timeFrame('end'),
				});
				this.chartData = charts; // 统计数据集合
				console.log(this.chartData);
				// 统计图显示数据
				this.chartShowData.categories = times;
			}
		}

	}
</script>

<style lang="scss">
	.charts-popup {
		position: relative;
		width: 100%;
		background-color: #fff;
		padding: 50rpx 32rpx 20rpx;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		height: 850rpx;
	}

	.charts-icon {
		position: absolute;
		right: -20rpx;
		top: -50rpx;
	}

	.charts-box {
		width: 100%;
		height: 450rpx;
		overflow: hidden;
	}

	.charts-title {
		font-size: $font-size-title;
		color: $color-title;
		line-height: $line-height-title;
		text-align: center;
	}

	.charts-text {
		font-size: 24rpx;
		color: $color-subtitle;
		line-height: $line-height-subtitle;
	}
	.charts-cancel{
		border-top: #f5f5f5 26rpx solid;
		margin-left: -32rpx;
		margin-right: -32rpx;
		padding: 24rpx;
		color:#999
	}
</style>