client_LemonBeans/subPackages/equipment/detail.vue

<template>
	<view class="detail-page">
		<navigation title="设备详情"></navigation>
		<view class="info-box">
			<image src="@/static/ic_tab_shutdown_selected.png" class="img-icon"></image>
			<view>
				<view class="item-text">设备名称：{{ item.name || '-' }}</view>
				<view class="item-text">稼动率：{{ item.time || '-' }}</view>
				<view class="item-text">当班产量：{{ item.name || '-' }}</view>
				<view class="item-text">模具编号：{{ item.time || '-' }}</view>
				<view class="item-text">生产产品：{{ item.name || '-' }}</view>
			</view>
		</view>
		<view class="chart-box">
			<view class="title">每小时产量</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view class="chart-box">
			<view class="title">每小时用电量</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartDataElec" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				chartDataElec: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							tofix: 2,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				},
			}
		},
		onLoad(option) {
			console.log(option.type)
			this.getServerData()
			this.getServerDataElec()
		},
		methods: {
			// 产量
			getServerData() {
				setTimeout(() => {
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
							name: "每小时产量",
							data: [35, 8, 25, 37, 4, 20]
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 用电量
			getServerDataElec() {
				let res = {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
						name: "每小时用电量",
						data: [35, 8, 25, 37, 4, 20]
					}, ]
				};
				this.chartDataElec = JSON.parse(JSON.stringify(res));
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-page {
		.info-box {
			background-color: #fff;
			margin: 24rpx;
			padding: 20rpx 40rpx;
			border-radius: 12rpx;
			display: flex;
			color: $uni-text-color-list;

			.img-icon {
				width: 200rpx;
				height: 200rpx;
				margin-left: 10%;
				margin-right: 10%;
			}

			.item-text {
				margin-top: 8rpx;
			}
		}

		.chart-box {
			background-color: #fff;
			margin: 24rpx;
			padding: 20rpx;
			border-radius: 12rpx;

			.title {
				font-size: 28rpx;
			}
		}
	}
</style>