client_LemonBeans/subPackages/equipment/single.vue

<template>
	<view class="single-page">
		<navigation title="单一设备"></navigation>
		<view class="title" :style="{ color:productStatus == 1? '#2fc25b': 'red'}">{{equipmentName}}</view>
		<view class="chart-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view class="chart-box">
			<qiun-data-charts type="line" :opts="optsMix" :chartData="chartDataMix" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productStatus: '',
				equipmentName: '',
				equipmentCode: '',
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					legend: {
						position: 'top'
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true, //【旋转】数据点（刻度点）文字
						rotateAngle: 20 //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							tofix: 2,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					},
					dataLabel: false, //是否显示图表区域内数据点上方的数据文案
				},
				chartDataMix: {},
				optsMix: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					enableScroll: false,
					legend: {
						position: 'top'
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 20,
						labelCount: 7
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							tofix: 2,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					},
					dataLabel: false,
				}
			}
		},
		onLoad(option) {
			this.productStatus = option.productStatus
			this.equipmentName = option.equipmentName
			this.equipmentCode = option.equipmentCode
			this.listDayCropRate()
			this.listTagDifferenceHours()
		},
		methods: {
			listDayCropRate() {
				let params = {
					tag: 'Product_Status',
					start: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
					end: this.dayjs().format('YYYY-MM-DD'),
					equipmentCode: this.equipmentCode
				}
				this.$api.listDayCropRate(params).then(res => {
					let tempList = []
					for (const key in res.data) {
						let night0 = 0
						let night1 = 0
						let day0 = 0
						let day1 = 0
						for (const key1 in res.data[key]) {
							day0 = day0 + res.data[key][key1].day['0']
							day1 = day1 + res.data[key][key1].day['1']
							night0 = night0 + res.data[key][key1].night['0']
							night1 = night1 + res.data[key][key1].night['1']
						}
						tempList.push({
							day: key,
							day0: day0,
							day1: day1,
							night0: night0,
							night1: night1,
						})
					}
					tempList.sort(function(a, b) {
						return a.day < b.day ? -1 : 1
					})
					let xData = []
					let day = []
					let night = []
					for (let i = 0; i < tempList.length; i++) {
						xData.push(this.dayjs(tempList[i]['day']).format('MM-DD'))
						day.push(
							((tempList[i]['day1'] * 100) / (tempList[i]['day0'] + tempList[i]['day1']))
							.toFixed(2),
						)
						night.push(
							((tempList[i]['night1'] * 100) / (tempList[i]['night0'] + tempList[i]['night1']))
							.toFixed(
								2,
							),
						)
					}
					this.chartData = {
						categories: xData,
						series: [{
							name: "白班",
							data: day,
							pointShape: "none"
						}, {
							name: "夜班",
							data: night,
							pointShape: "none"
						}]
					}
				}).catch(err => {})
			},
			listTagDifferenceHours() {
				let params = {
					tag: 'TotalPower',
					rq: this.dayjs().format('YYYY-MM-DD'),
					equipmentCode: this.equipmentCode
				}
				this.$api.listTagDifferenceHours(params).then(res => {
					let dataList = res.data.hours.number
					let list = []
					let xData = []
					let data = []
					for (var j in dataList) {
						list.push({
							time: this.dayjs(j).format('MM-DD HH'),
							val: dataList[j],
						})
					}
					list.map((item) => {
						xData.push(item.time)
						data.push(item.val)
					})
					this.chartDataMix = {
						categories: xData,
						series: [{
							name: "用电量(度)",
							data: data,
							pointShape: "none"
						}]
					}
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.single-page {
		.title {
			margin: 24rpx;
			font-size: 30rpx;
		}

		.chart-box {
			background-color: #fff;
			margin: 24rpx;
			padding: 20rpx;
			border-radius: 12rpx;
		}
	}
</style>