baozhida-logistics-app/pages/order/humiture.vue

<template>
	<!-- 温湿度 -->
	<view>
		<u-navbar title="温湿度记录" autoBack placeholder></u-navbar>
		<view class="card_qiucharts" v-if="userType == 'customer'">
			<view class="card_echart">
				<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
			</view>
			<view class="card_echart">
				<qiun-data-charts type="gauge" :opts="opts1" :chartData="chartData1" />
			</view>
		</view>
		<view v-else>
			<view v-if="humitureList.length > 0">
				<view class="card_particulars" v-for="(item,index) in humitureList" :key="index">
					<view class="card_describe">
						<view class="describe_title">{{item.title}}</view>
						<view class="describe_time">{{item.startTime}}</view>
						<view class="describe_time">{{item.endTime}}</view>
					</view>
					<view class="humiture_details" @click="foldingPanel(item)">
						<view class="title_details">温湿度</view>
						<view style="display: flex;">
							<view class="title_blue title_details">查看详情</view>
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
					<view v-show="item.collapseil">
						<x-humiture ref="humiture" :taskId="item.id" :waybillNo="orderList.waybillNo"
							:current="item.presentNum" :probeList="item.deviceSensorList"
							@sectionChange="sectionChange"></x-humiture>
					</view>
				</view>
			</view>
			<view style="margin-top: 30%;" v-else>
				<u-empty mode="data" text="当前没有温湿度记录"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: {},
				humitureList: [],
				userType: '',
				myChart: null,
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#3592FE"],
					padding: undefined,
					title: {
						// name: "66℃",
						fontSize: 25,
						color: "#3592FE",
						offsetY: 0
					},
					subtitle: {
						name: "当前温度",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							// startNumber: 5,
							// endNumber: 35,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					},
				},
				opts1: {
					color: ["#67C23A"],
					padding: 20,
					title: {
						// name: "66℃",
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 0
					},
					subtitle: {
						name: "当前湿度",
						fontSize: 15,
						color: "#67C23A",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#000000",
							startAngle: 0.75,
							endAngle: 0.25,
							// startNumber: 0,
							// endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#67C23A",
								childNumber: 5,
								childWidth: 12
							},
							labelOffset: 20,
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					},
				}
			}
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			this.userType = userInfo.userType
			var orderList = this.$cache.getCache('orderDetails')
			this.orderList = orderList
			if (this.userType == 'customer') {
				this.getServerData();
			} else {
				this.getList()
			}
		},
		methods: {
			getList() {
				this.$api.get('/api/waybill-task', {
					waybillNo: this.orderList.waybillNo,
				}).then(res => {
					if (res.code == 200) {
						this.humitureList = res.data.list
						this.humitureList.forEach((item, index) => {
							item.title = ''
							item.collapseil = false
							if (item.car.id) {
								item.title = item.car.carNo
							} else if (item.warehouse.id) {
								item.title = item.warehouse.name
							}
						})
					}
				})
			},
			// 折叠面板
			foldingPanel(value) {
				this.humitureList.forEach((item, index) => {
					if (item.id == value.id) {
						if (item.collapseil) {
							item.collapseil = false
						} else {
							this.$refs.humiture[index].getlist(item.deviceSensorList[0].T_id)
							item.collapseil = true
						}
					}
				})
				this.$forceUpdate()
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				if (e[0].status == 'open') {
					this.humitureList.forEach((item, index) => {
						this.$refs.humiture[index].getlist(item.deviceSensorList[0].T_id)
					})
				}
			},
			getServerData() {
				this.$api.post('/api/waybill-task/newest-locus', {
					waybillNo: this.orderList.waybillNo,
				}).then((res) => {
					if (res.code == 200) {
						this.opts.title.name = res.data.T_t + '℃'
						this.opts.extra.gauge.startNumber = res.data.T_tl
						this.opts.extra.gauge.endNumber = res.data.T_tu
						this.opts1.title.name = res.data.T_rh + '℃'
						this.opts1.extra.gauge.startNumber = res.data.T_rhl
						this.opts1.extra.gauge.endNumber = res.data.T_rhu
						let arr = (res.data.T_t - res.data.T_tl) / (res.data.T_tu - res.data.T_tl)
						let arr1 = (res.data.T_rh - res.data.T_rhl) / (res.data.T_rhu - res.data.T_rhl)
						let value = {
							categories: [{
								"value": 0.2,
								"color": "#1890ff"
							}, {
								"value": 0.8,
								"color": "#2fc25b"
							}, {
								"value": 1,
								"color": "#f04864"
							}],
							series: [{
								data: arr.toFixed(1)
							}]
						};
						let value1 = {
							categories: [{
								"value": 0.2,
								"color": "#1890ff"
							}, {
								"value": 0.8,
								"color": "#2fc25b"
							}, {
								"value": 1,
								"color": "#f04864"
							}],
							series: [{
								data: arr1.toFixed(1)
							}]
						};
						this.chartData = JSON.parse(JSON.stringify(value));
						this.chartData1 = JSON.parse(JSON.stringify(value1));
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.card_particulars {
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
		margin: 30rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.card_describe {
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #EBEEF5;
	}

	.describe_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.describe_time {
		font-size: 28rpx;
	}

	.humiture_details {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.title_blue {
		color: #2979ff;
		margin-right: 10rpx;
	}

	.title_details {
		font-size: 28rpx;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0rpx 0rpx 30rpx 0rpx;
	}

	::v-deep .u-line {
		display: none;
	}

	.card_qiucharts {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.card_echart {
		width: 80%;
		height: 500rpx;
	}

	.card_echart {
		width: 80%;
		height: 500rpx;
	}
</style>